{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb-bar",
  "title": "Bar breadcrumb",
  "description": "Styled breadcrumb: the Bar set. 5 decorative breadcrumb variations (BarBreadcrumb, CardBreadcrumb, OutlineBreadcrumb, FilledBreadcrumb, StickyBreadcrumb) 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-bar.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Bar breadcrumb family: 5 contained surfaces. The trail and the separator are always the same; what changes is the container wrapping the trail (a full-width lined bar, a rounded card, a border only, a solid secondary surface, a sticky bar that stays on top while scrolling). Colour comes ONLY from tokens (alpha via color-mix), the size is a text scale plus gap plus height. 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 box: Record<StyledSize, string> = {\n  sm: \"min-h-8 px-2.5 py-1.5\",\n  md: \"min-h-9 px-3 py-2\",\n  lg: \"min-h-10 px-4 py-2.5\",\n  xl: \"min-h-12 px-5 py-3\",\n}\n\nconst radius: Record<StyledSize, string> = {\n  sm: \"rounded-md\",\n  md: \"rounded-lg\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\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-foreground 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\n/* Shared shell: barClassName carries each variant's container technique. */\nfunction BarTrail({\n  className,\n  size = \"md\",\n  items,\n  barClassName,\n}: Props & { items: Crumb[]; barClassName: string }) {\n  return (\n    <nav\n      data-slot=\"styled-breadcrumb\"\n      aria-label=\"Breadcrumb\"\n      className={cn(\"flex max-w-full items-center\", box[size], barClassName, className)}\n    >\n      <ol className={cn(\"flex flex-wrap items-center\", trail[size])}>\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                  <ChevronRight />\n                </span>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\n/* Bar: full width, no corners; only the bottom line separates it from the content. */\nexport function BarBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <BarTrail\n      className={className}\n      size={size}\n      items={items}\n      barClassName=\"w-full border-b border-border bg-background\"\n    />\n  )\n}\n\n/* Card: a rounded card with a shadow; the trail sits on a surface. */\nexport function CardBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <BarTrail\n      className={className}\n      size={size}\n      items={items}\n      barClassName={cn(radius[size], \"w-fit border border-border bg-card text-card-foreground shadow-sm\")}\n    />\n  )\n}\n\n/* Outline: a container with no fill; only the border draws the bounds of the trail. */\nexport function OutlineBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <BarTrail\n      className={className}\n      size={size}\n      items={items}\n      barClassName={cn(radius[size], \"w-fit border border-border bg-transparent\")}\n    />\n  )\n}\n\n/* Filled: dolu ikincil yuzey; kenarlik yok, kontrast dolgudan gelir. */\nexport function FilledBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <BarTrail\n      className={className}\n      size={size}\n      items={items}\n      barClassName={cn(radius[size], \"w-fit bg-secondary text-secondary-foreground\")}\n    />\n  )\n}\n\n/* Sticky: a bar that hangs at the top of a scrollable container. For the stickiness to work the container itself must be scrollable. */\nexport function StickyBreadcrumb({ className, size = \"md\", items = defaultItems }: Props) {\n  return (\n    <BarTrail\n      className={className}\n      size={size}\n      items={items}\n      barClassName=\"sticky top-0 z-20 w-full border-b border-[color-mix(in_oklab,var(--color-border)_80%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_85%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm\"\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/breadcrumb-bar.tsx"
    }
  ],
  "categories": [
    "styled",
    "breadcrumb"
  ],
  "type": "registry:component"
}