{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "type": "registry:ui",
  "title": "Breadcrumb",
  "description": "Location trail with links, the current page, and collapsed levels.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "lucide-react@^1.47.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/breadcrumb-knobs.ts",
      "target": "@components/control-ui/knob-contracts/breadcrumb-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/breadcrumb.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const breadcrumbKnobs = [\n  \"--cui-breadcrumb-list-foreground\",\n  \"--cui-breadcrumb-page-foreground\",\n  \"--cui-breadcrumb-link-hover-foreground\",\n] as const;\nexport type BreadcrumbKnobStyle = Partial<Record<(typeof breadcrumbKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/breadcrumb.css",
      "target": "@components/control-ui/styles/recipes/breadcrumb.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"root\"]) {\n    --cui-breadcrumb-list-foreground: var(--muted-foreground);\n    --cui-breadcrumb-page-foreground: var(--foreground);\n    --cui-breadcrumb-link-hover-foreground: var(--foreground);\n  }\n\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"page\"]) {\n    font-weight: var(--font-weight-normal);\n    color: var(--cui-breadcrumb-page-foreground);\n  }\n\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"list\"]) {\n    gap: calc(var(--spacing) * 1.5);\n    font-size: var(--text-body);\n    line-height: calc(var(--spacing) * 5);\n    color: var(--cui-breadcrumb-list-foreground);\n  }\n\n  @media (width >= 40rem) {\n    :where([data-control-family=\"breadcrumb\"][data-slot=\"list\"]) {\n      gap: calc(var(--spacing) * 2.5);\n    }\n  }\n\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"item\"]) {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"link\"]) {\n    transition: color var(--duration-fast) var(--ease-standard);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"breadcrumb\"][data-slot=\"link\"]:hover:not([aria-disabled=\"true\"])) {\n      color: var(--cui-breadcrumb-link-hover-foreground);\n    }\n  }\n\n  :where([data-control-family=\"breadcrumb\"][data-slot=\"ellipsis\"]) {\n    inline-size: calc(var(--spacing) * 9);\n    block-size: calc(var(--spacing) * 9);\n  }\n\n  @media (pointer: coarse) {\n    :where([data-control-family=\"breadcrumb\"][data-slot=\"link\"]) {\n      position: relative;\n    }\n\n    :where([data-control-family=\"breadcrumb\"][data-slot=\"link\"])::after {\n      content: \"\";\n      position: absolute;\n      inset: 50% 50%;\n      translate: -50% -50%;\n      inline-size: 100%;\n      block-size: max(100%, var(--touch-target));\n    }\n  }\n}\n\n@property --cui-breadcrumb-list-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-breadcrumb-page-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-breadcrumb-link-hover-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/breadcrumb.tsx",
      "target": "@components/control-ui/ui/breadcrumb.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type { ComponentProps, CSSProperties } from \"react\";\nimport type { RenderProp } from \"@/components/control-ui/control-props\";\nimport type { BreadcrumbKnobStyle } from \"@/components/control-ui/knob-contracts/breadcrumb-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport function Breadcrumb({ className, ...props }: ComponentProps<\"nav\"> & { style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"root\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbList({\n  className,\n  ...props\n}: Omit<ComponentProps<\"ol\">, \"style\"> & { style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <ol\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"list\"\n      className={cn(\"flex flex-wrap items-center break-words\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({ className, ...props }: ComponentProps<\"li\"> & { style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <li\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"item\"\n      className={cn(\"inline-flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbLink({\n  render,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"a\"> & {\n  render?: RenderProp<ComponentProps<\"a\">>;\n}) {\n  return useRender({\n    defaultTagName: \"a\",\n    render,\n    props: {\n      ...props,\n      \"data-control-ui\": \"breadcrumb\",\n      \"data-control-family\": \"breadcrumb\",\n      \"data-slot\": \"link\",\n      className: className,\n      children,\n    },\n  });\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"style\"> & { style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <span\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"page\"\n      aria-current=\"page\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: ComponentProps<\"li\"> & { style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <li\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight data-icon-dir=\"inline\" />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  label = \"Show hidden breadcrumbs\",\n  className,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"children\"> & { label?: string; style?: CSSProperties & BreadcrumbKnobStyle }) {\n  return (\n    <span\n      data-control-ui=\"breadcrumb\"\n      data-control-family=\"breadcrumb\"\n      data-slot=\"ellipsis\"\n      className={cn(\"flex items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/breadcrumb.css\"": {}
  }
}