{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-styled",
  "title": "Breadcrumb essentials",
  "description": "Styled breadcrumb: the essentials set. 5 decorative breadcrumb variations (SlashBreadcrumb, ChevronBreadcrumb, PillBreadcrumb, ArrowBreadcrumb, DotBreadcrumb) 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-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ChevronRight, Home, Slash } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Breadcrumb family: 5 decorative trails. 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; the others are token links carrying a focus-visible ring. 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 = \"flex items-center text-muted-foreground/60 [&_svg]:size-3.5 [&_svg]:shrink-0\"\n\n/* Slash: slash separators. */\nexport function SlashBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\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          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                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={link}>\n                  {item.label}\n                </a>\n              )}\n              {!last && (\n                <span className={sep} aria-hidden=\"true\">\n                  <Slash />\n                </span>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/* Chevron: ok-basi ayraclar, ilk oge ev ikonu. */\nexport function ChevronBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\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          return (\n            <li key={i} className=\"inline-flex items-center gap-2\">\n              {last || !item.href ? (\n                <span className={current} aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={link}>\n                  {i === 0 && <Home aria-hidden=\"true\" />}\n                  {item.label}\n                </a>\n              )}\n              {!last && (\n                <span className={sep} aria-hidden=\"true\">\n                  <ChevronRight />\n                </span>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nconst pillBox: Record<StyledSize, string> = {\n  sm: \"h-6 rounded-md px-2 text-xs\",\n  md: \"h-7 rounded-md px-2.5 text-xs\",\n  lg: \"h-8 rounded-lg px-3 text-sm\",\n  xl: \"h-9 rounded-lg px-3.5 text-sm\",\n}\n\n/* Pill: every crumb is a token chip; the current page is filled and the rest are\n   transparent tokens. */\nexport function PillBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  const pill =\n    \"inline-flex items-center gap-1.5 font-medium transition-colors [&_svg]:size-3.5 [&_svg]:shrink-0 [&_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          return (\n            <li key={i} className=\"inline-flex items-center gap-1.5\">\n              {last || !item.href ? (\n                <span\n                  className={cn(pill, pillBox[size], \"bg-primary text-primary-foreground\")}\n                  aria-current=\"page\"\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <a\n                  href={item.href}\n                  className={cn(\n                    pill,\n                    pillBox[size],\n                    \"bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n                  )}\n                >\n                  {item.label}\n                </a>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nconst arrowBox: Record<StyledSize, string> = {\n  sm: \"h-6 pl-3 pr-2 text-xs\",\n  md: \"h-7 pl-4 pr-2.5 text-xs\",\n  lg: \"h-8 pl-5 pr-3 text-sm\",\n  xl: \"h-9 pl-6 pr-3.5 text-sm\",\n}\n\n/* Arrow: ileri isaret eden basamak sekilli izler (chevron kesimli). */\nexport function ArrowBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  const step =\n    \"relative inline-flex items-center font-medium transition-colors [clip-path:polygon(0_0,calc(100%-0.6rem)_0,100%_50%,calc(100%-0.6rem)_100%,0_100%,0.6rem_50%)] first:[clip-path:polygon(0_0,calc(100%-0.6rem)_0,100%_50%,calc(100%-0.6rem)_100%,0_100%)] [&_svg]:size-3.5 [&_svg]:shrink-0 [&_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], \"gap-0\", className)}>\n        {items.map((item, i) => {\n          const last = i === items.length - 1\n          return (\n            <li key={i} className=\"inline-flex -ml-2 first:ml-0\">\n              {last || !item.href ? (\n                <span\n                  className={cn(step, arrowBox[size], \"bg-primary text-primary-foreground\")}\n                  aria-current=\"page\"\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <a\n                  href={item.href}\n                  className={cn(\n                    step,\n                    arrowBox[size],\n                    \"bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n                  )}\n                >\n                  {item.label}\n                </a>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/* Dot: nokta ayracli minimal iz. */\nexport function DotBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\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          return (\n            <li key={i} className=\"inline-flex items-center gap-2\">\n              {last || !item.href ? (\n                <span className={current} aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <a href={item.href} className={link}>\n                  {item.label}\n                </a>\n              )}\n              {!last && (\n                <span\n                  className=\"size-1 rounded-full bg-muted-foreground/50\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/breadcrumb-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "breadcrumb"
  ],
  "type": "registry:component"
}