{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumbs",
  "type": "registry:component",
  "title": "Breadcrumbs",
  "description": "Shows a page's place in a hierarchy. Ancestors are links; the current page is full ink.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/breadcrumbs.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface Crumb {\n  label: React.ReactNode;\n  href?: string;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  items: Crumb[];\n}\n\nconst styles = stylex.create({\n  crumbs: {\n    fontSize: {\n      default: \"0.8125rem\",\n      [mq.phone]: vlak.controlFs,\n    },\n    color: vlak.ink,\n    letterSpacing: \"-0.01em\",\n  },\n  list: {\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n    display: \"flex\",\n    alignItems: {\n      default: \"baseline\",\n      [mq.phone]: \"center\",\n    },\n    flexWrap: {\n      default: null,\n      [mq.phone]: \"wrap\",\n    },\n    gap: {\n      default: \"0.5rem\",\n      [mq.phone]: \"0.375rem\",\n    },\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: {\n      default: \"baseline\",\n      [mq.phone]: \"center\",\n    },\n    gap: {\n      default: \"0.5rem\",\n      [mq.phone]: \"0.375rem\",\n    },\n  },\n  /* Ancestors are secondary gray at full opacity; the page carries weight. */\n  link: {\n    minWidth: vlak.hit,\n    transition: {\n      default: vlak.transition,\n      [mq.reduce]: \"none\",\n    },\n    color: {\n      default: vlak.gray,\n      \":link\": vlak.gray,\n      \":visited\": vlak.gray,\n      \":hover\": { default: null, [mq.hover]: vlak.ink },\n      \":active\": vlak.ink,\n      \":focus-visible\": vlak.ink,\n    },\n    fontWeight: 400,\n    textDecoration: {\n      default: \"none\",\n      \":hover\": { default: null, [mq.hover]: \"underline\" },\n    },\n    textUnderlineOffset: 3,\n    backgroundColor: \"transparent\",\n    display: {\n      default: \"inline-flex\",\n      [mq.phone]: \"inline-flex\",\n    },\n    alignItems: {\n      default: \"center\",\n      [mq.phone]: \"center\",\n    },\n    minHeight: {\n      default: vlak.hit,\n      [mq.phone]: vlak.hit,\n    },\n    outlineWidth: {\n      default: null,\n      \":focus-visible\": 2,\n    },\n    outlineStyle: {\n      default: null,\n      \":focus-visible\": \"solid\",\n    },\n    outlineColor: {\n      default: null,\n      \":focus-visible\": vlak.ink,\n    },\n    outlineOffset: {\n      default: null,\n      \":focus-visible\": 2,\n    },\n  },\n  sep: {\n    color: vlak.gray,\n  },\n  here: {\n    color: vlak.ink,\n    fontWeight: 500,\n    display: {\n      default: null,\n      [mq.phone]: \"inline-flex\",\n    },\n    alignItems: {\n      default: null,\n      [mq.phone]: \"center\",\n    },\n    minHeight: {\n      default: null,\n      [mq.phone]: vlak.hit,\n    },\n  },\n});\n\n/** A trail: ordered list in a nav, the current page marked. */\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(function Breadcrumbs(\n  { items, className, style, ...props },\n  ref,\n) {\n  const nav = rs([\"rs-crumbs\", className], styles.crumbs);\n  const list = rs([\"rs-crumbs-list\"], styles.list);\n  const item = rs([\"rs-crumbs-item\"], styles.item);\n  const link = rs([\"rs-crumbs-link\"], styles.link);\n  const sep = rs([\"rs-crumbs-sep\"], styles.sep);\n  const here = rs([\"rs-crumbs-here\"], styles.here);\n  return (\n    <nav ref={ref} aria-label=\"Breadcrumb\" {...props} className={nav.className} style={{ ...nav.style, ...style }}>\n      <ol className={list.className} style={list.style}>\n        {items.map((crumb, index) => {\n          const last = index === items.length - 1;\n          return (\n            <li key={index} className={item.className} style={item.style}>\n              {index > 0 && (\n                <span className={sep.className} style={sep.style} aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n              {last ? (\n                <span className={here.className} style={here.style} aria-current=\"page\">\n                  {crumb.label}\n                </span>\n              ) : crumb.href ? (\n                <a className={link.className} style={link.style} href={crumb.href}>\n                  {crumb.label}\n                </a>\n              ) : (\n                <span className={link.className} style={link.style}>\n                  {crumb.label}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/breadcrumbs.tsx"
    },
    {
      "path": "vlak/styles/breadcrumbs.css",
      "content": "/* ── breadcrumbs: generated from packages/react/src/components/breadcrumbs.tsx ── */\n.rs-crumbs{font-size:0.8125rem;color:var(--text);letter-spacing:-0.01em}\n@media (max-width: 640px){.rs-crumbs{font-size:var(--control-fs)}}\n.rs-crumbs-list{list-style:none;margin:0;padding:0;display:flex;align-items:baseline;gap:0.5rem}\n@media (max-width: 640px){.rs-crumbs-list{align-items:center;flex-wrap:wrap;gap:0.375rem}}\n.rs-crumbs-item{display:inline-flex;align-items:baseline;gap:0.5rem}\n@media (max-width: 640px){.rs-crumbs-item{align-items:center;gap:0.375rem}}\n.rs-crumbs-link{min-width:var(--hit);transition:var(--transition);color:var(--text-secondary);font-weight:400;text-decoration:none;text-underline-offset:3px;background-color:transparent;display:inline-flex;align-items:center;min-height:var(--hit)}\n.rs-crumbs-link:link{color:var(--text-secondary)}\n.rs-crumbs-link:visited{color:var(--text-secondary)}\n.rs-crumbs-link:active{color:var(--text)}\n.rs-crumbs-link:focus-visible{color:var(--text);outline-width:2px;outline-style:solid;outline-color:var(--text);outline-offset:2px}\n@media (prefers-reduced-motion: reduce){.rs-crumbs-link{transition:none}}\n@media (hover: hover) and (pointer: fine){.rs-crumbs-link:hover{color:var(--text);text-decoration:underline}}\n@media (max-width: 640px){.rs-crumbs-link{display:inline-flex;align-items:center;min-height:var(--hit)}}\n.rs-crumbs-sep{color:var(--text-secondary)}\n.rs-crumbs-here{color:var(--text);font-weight:500}\n@media (max-width: 640px){.rs-crumbs-here{display:inline-flex;align-items:center;min-height:var(--hit)}}\n",
      "type": "registry:file",
      "target": "styles/vlak/breadcrumbs.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "navigation",
      "classes": [
        "rs-crumbs",
        "rs-crumbs-list",
        "rs-crumbs-item",
        "rs-crumbs-link",
        "rs-crumbs-sep",
        "rs-crumbs-here"
      ],
      "snippet": "<p class=\"rs-crumbs\"><a class=\"rs-crumbs-link\" href=\"/\">Studio</a><span class=\"rs-crumbs-sep\">/</span><span class=\"rs-crumbs-here\">Vlak</span></p>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Breadcrumb",
        "Breadcrumbs",
        "Trail"
      ],
      "example": "import { Breadcrumbs } from \"@noorddev/vlak-react\";\n\n<Breadcrumbs items={[{ label: \"Studio\", href: \"/studio\" }, { label: \"Vlak\", href: \"/studio/vlak\" }, { label: \"Components\" }]} />",
      "usage": {
        "use": [
          "Showing where a page sits in a hierarchy three or more levels deep.",
          "The last item is the current page and carries no href."
        ],
        "avoid": [
          "Flat sites with one level.",
          "As the primary navigation; pair it with a nav."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves between the ancestor links"
        },
        {
          "keys": "Enter",
          "does": "Follows the link"
        }
      ],
      "a11y": [
        "Renders <nav aria-label=\"Breadcrumb\"> with an ordered list.",
        "The last item is marked aria-current=\"page\"; separators are aria-hidden."
      ]
    }
  }
}