{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-icon",
  "title": "Icon breadcrumb",
  "description": "Styled breadcrumb: the Icon set. 5 decorative breadcrumb variations (HomeBreadcrumb, FolderBreadcrumb, StepBreadcrumb, BadgeBreadcrumb, MixedBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/breadcrumb-icon.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport {\n  ChevronRight,\n  Component,\n  FileText,\n  Folder,\n  FolderOpen,\n  Home,\n  LayoutGrid,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Icon breadcrumb family: 5 leading-icon strategies. The separator is always a chevron; what changes is the marker at the start of each crumb (home, folder, step number, badge, mixed depth icon). The icons are aria-hidden - the meaning lives in the label. Colour comes ONLY from tokens (alpha via color-mix), the size is a text scale plus gap. The last item is the current page (aria-current), not a link. Deterministic, no motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Crumb = { label: React.ReactNode; href?: string }\n\ntype Props = {\n  className?: string\n  size?: StyledSize\n  items?: Crumb[]\n}\n\nconst trail: Record<StyledSize, string> = {\n  sm: \"gap-1.5 text-xs\",\n  md: \"gap-2 text-sm\",\n  lg: \"gap-2.5 text-sm\",\n  xl: \"gap-3 text-base\",\n}\n\nconst defaultItems: Crumb[] = [\n  { label: \"Home\", href: \"#\" },\n  { label: \"Components\", href: \"#\" },\n  { label: \"Button\" },\n]\n\nconst link =\n  \"inline-flex items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none\"\n\nconst current =\n  \"inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none\"\n\nconst sep =\n  \"flex items-center text-muted-foreground/60 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none\"\n\nfunction Sep() {\n  return (\n    <span className={sep} aria-hidden=\"true\">\n      <ChevronRight />\n    </span>\n  )\n}\n\n/* Shared shell: leading returns a marker for each crumb (no icon when null). */\nfunction IconTrail({\n  className,\n  size = \"md\",\n  items,\n  leading,\n}: Props & { items: Crumb[]; leading: (i: number, last: boolean) => React.ReactNode }) {\n  return (\n    <nav data-slot=\"styled-breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol className={cn(\"flex flex-wrap items-center\", trail[size], className)}>\n        {items.map((item, i) => {\n          const last = i === items.length - 1\n          const mark = leading(i, last)\n          return (\n            <li key={i} className=\"inline-flex items-center gap-1.5\">\n              {last || !item.href ? (\n                <span className={current} aria-current=\"page\">\n                  {mark}\n                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={link}>\n                  {mark}\n                  {item.label}\n                </a>\n              )}\n              {!last && <Sep />}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/* Home: only the first crumb carries a home icon, the rest is plain text. */\nexport function HomeBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <IconTrail\n      className={className}\n      size={size}\n      items={items}\n      leading={(i) => (i === 0 ? <Home aria-hidden=\"true\" /> : null)}\n    />\n  )\n}\n\n/* Folder: dosya agaci metaforu. Ara izler kapali klasor, gecerli sayfa dosya. */\nexport function FolderBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <IconTrail\n      className={className}\n      size={size}\n      items={items}\n      leading={(i, last) =>\n        last ? (\n          <FileText aria-hidden=\"true\" />\n        ) : i === 0 ? (\n          <FolderOpen aria-hidden=\"true\" />\n        ) : (\n          <Folder aria-hidden=\"true\" />\n        )\n      }\n    />\n  )\n}\n\nconst stepDot: Record<StyledSize, string> = {\n  sm: \"size-4 text-[0.625rem]\",\n  md: \"size-4.5 text-[0.625rem]\",\n  lg: \"size-5 text-xs\",\n  xl: \"size-5.5 text-xs\",\n}\n\n/* Step: every crumb carries a numbered circle; the current page's circle is filled. */\nexport function StepBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  const dot =\n    \"inline-flex shrink-0 items-center justify-center rounded-full font-medium tabular-nums\"\n  return (\n    <nav data-slot=\"styled-breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol className={cn(\"flex flex-wrap items-center\", trail[size], className)}>\n        {items.map((item, i) => {\n          const last = i === items.length - 1\n          const mark = (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                dot,\n                stepDot[size],\n                last\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] text-muted-foreground\"\n              )}\n            >\n              {i + 1}\n            </span>\n          )\n          return (\n            <li key={i} className=\"inline-flex items-center gap-1.5\">\n              {last || !item.href ? (\n                <span className={current} aria-current=\"page\">\n                  {mark}\n                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={link}>\n                  {mark}\n                  {item.label}\n                </a>\n              )}\n              {!last && <Sep />}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nconst badgeBox: Record<StyledSize, string> = {\n  sm: \"size-5 rounded-md\",\n  md: \"size-6 rounded-md\",\n  lg: \"size-7 rounded-lg\",\n  xl: \"size-8 rounded-lg\",\n}\n\n/* Badge: the icon sits in its own toned box rather than next to the label. */\nexport function BadgeBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  const marks = [Home, LayoutGrid, Component]\n  const box =\n    \"inline-flex shrink-0 items-center justify-center [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none\"\n  return (\n    <nav data-slot=\"styled-breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol className={cn(\"flex flex-wrap items-center\", trail[size], className)}>\n        {items.map((item, i) => {\n          const last = i === items.length - 1\n          const Mark = marks[i % marks.length]\n          const mark = (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                box,\n                badgeBox[size],\n                last\n                  ? \"bg-[color-mix(in_oklab,var(--color-primary)_16%,transparent)] text-primary\"\n                  : \"bg-secondary text-muted-foreground\"\n              )}\n            >\n              <Mark />\n            </span>\n          )\n          return (\n            <li key={i} className=\"inline-flex items-center gap-1.5\">\n              {last || !item.href ? (\n                <span className={cn(current, \"gap-2\")} aria-current=\"page\">\n                  {mark}\n                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={cn(link, \"gap-2\")}>\n                  {mark}\n                  {item.label}\n                </a>\n              )}\n              {!last && <Sep />}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/* Mixed: derinlige gore degisen ikon dizisi - kok, bolum, sayfa. */\nexport function MixedBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  const marks = [Home, LayoutGrid, Component, Folder, FileText]\n  return (\n    <IconTrail\n      className={className}\n      size={size}\n      items={items}\n      leading={(i, last) => {\n        const Mark = last ? FileText : marks[Math.min(i, marks.length - 1)]\n        return <Mark aria-hidden=\"true\" />\n      }}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/breadcrumb-icon.tsx"
    }
  ],
  "categories": [
    "styled",
    "breadcrumb"
  ],
  "type": "registry:component"
}