{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "description": "Breadcrumb from the Get IT Done design system.",
  "dependencies": [
    "@radix-ui/react-slot@^1.5.0",
    "class-variance-authority@^0.7.0",
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/recipes.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/breadcrumb.tsx",
      "content": "'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva } from 'class-variance-authority';\nimport { ChevronRight, Ellipsis } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\n\n// Figma Breadcrumbs (1122:153) + _Breadcrumb button base (43:3221).\n// Type Text | Text with line | Button primary | Button gray | Button gray with border | Path, Divider Chevron | Slash.\ntype BreadcrumbType = 'text' | 'text-with-line' | 'button-primary' | 'button-gray' | 'button-gray-border' | 'path';\ntype BreadcrumbDivider = 'chevron' | 'slash';\n\ninterface BreadcrumbContextValue {\n  type: BreadcrumbType;\n  divider: BreadcrumbDivider;\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({ type: 'text', divider: 'chevron' });\n\nconst listVariants = cva('flex flex-wrap items-center', {\n  variants: {\n    type: {\n      text: 'gap-3',\n      'text-with-line': 'gap-3 border-y border-solid border-border-default py-2 pl-2',\n      'button-primary': 'gap-2',\n      'button-gray': 'gap-2',\n      'button-gray-border': 'gap-2 rounded-control bg-muted p-1',\n      path: 'gap-gap-control',\n    },\n  },\n  defaultVariants: { type: 'text' },\n});\n\nconst itemVariants = cva(\n  [\n    'inline-flex h-control-sm items-center justify-center whitespace-nowrap rounded-item typography-text-small transition-colors',\n    'aria-[current=page]:text-text-default',\n    'aria-disabled:pointer-events-none aria-disabled:text-text-disabled',\n    ...focusRing,\n  ],\n  {\n    variants: {\n      type: {\n        text: 'rounded-none text-text-subtle hover:text-text-default',\n        'text-with-line': 'rounded-none text-text-subtle hover:text-text-default',\n        'button-primary': 'px-2 py-1 text-text-subtle hover:bg-background-brand-subtle aria-[current=page]:bg-background-brand-subtle',\n        // Gray segments sit on the muted fill, which needs the on-muted role to hold 4.5:1.\n        'button-gray': 'px-2 py-1 text-text-subtle-on-muted hover:bg-muted aria-[current=page]:bg-muted',\n        'button-gray-border': 'px-2 py-1 text-text-subtle-on-muted hover:bg-background aria-[current=page]:bg-background aria-[current=page]:shadow-elevation-surface',\n        path: 'rounded-none text-text-subtle hover:text-text-default',\n      },\n    },\n    defaultVariants: { type: 'text' },\n  },\n);\n\nexport interface BreadcrumbsProps extends React.ComponentPropsWithoutRef<'nav'> {\n  type?: BreadcrumbType;\n  divider?: BreadcrumbDivider;\n}\n\nconst Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ className, type = 'text', divider = 'chevron', children, 'aria-label': ariaLabelProp, ...props }, ref) => {\n    const l = useLabels();\n    const ariaLabel = ariaLabelProp ?? l.breadcrumb;\n    return (\n    <BreadcrumbContext.Provider value={{ type, divider }}>\n      <nav ref={ref} aria-label={ariaLabel} className={className} {...props}>\n        <ol className={listVariants({ type })}>{children}</ol>\n      </nav>\n    </BreadcrumbContext.Provider>\n  );\n  },\n);\nBreadcrumbs.displayName = 'Breadcrumbs';\n\nconst BreadcrumbSeparator = ({ className }: { className?: string }) => {\n  const { divider, type } = React.useContext(BreadcrumbContext);\n  const zero = usePreset() === 'zero';\n  const pathSize = zero ? 'h-icon-xs w-icon-xs' : 'h-icon-2xs w-icon-2xs';\n  const size = type === 'path' ? pathSize : divider === 'slash' ? 'h-icon-md w-icon-md' : 'h-icon-sm w-icon-sm';\n  return (\n    <span aria-hidden=\"true\" data-separator=\"\" className={cn('inline-flex shrink-0 text-icon-subtle', size, className)}>\n      {divider === 'slash' ? (\n        <svg viewBox=\"0 0 20 20\" fill=\"none\" className=\"h-full w-full\">\n          <path d=\"m7 16 6-12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        </svg>\n      ) : (\n        <ChevronRight className=\"h-full w-full\" />\n      )}\n    </span>\n  );\n};\n\n// One path segment plus the divider that follows it (hidden on the last item).\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, children, ...props }, ref) => {\n    const { type } = React.useContext(BreadcrumbContext);\n    return (\n      <li\n        ref={ref}\n        className={cn('group/crumb inline-flex items-center', type === 'path' ? 'gap-gap-control' : type === 'text' || type === 'text-with-line' ? 'gap-3' : 'gap-2', className)}\n        {...props}\n      >\n        {children}\n        <span className=\"inline-flex group-last/crumb:hidden\">\n          <BreadcrumbSeparator />\n        </span>\n      </li>\n    );\n  },\n);\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  asChild?: boolean;\n  // Marks the current page: not a link, `aria-current=\"page\"`.\n  current?: boolean;\n  // Unreachable level: dimmed and not focusable.\n  disabled?: boolean;\n  // Leading icon such as a home glyph.\n  icon?: React.ReactNode;\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ className, asChild = false, current = false, disabled = false, icon, children, ...props }, ref) => {\n    const { type } = React.useContext(BreadcrumbContext);\n    const classes = cn(itemVariants({ type }), icon && !children && 'px-1', className);\n    const content = (\n      <>\n        {icon && (\n          <span aria-hidden=\"true\" className=\"inline-flex h-icon-md w-icon-md shrink-0 items-center justify-center\">\n            {icon}\n          </span>\n        )}\n        {children}\n      </>\n    );\n    if (current || disabled) {\n      // Current page and disabled levels are plain text, not links.\n      return (\n        <span\n          ref={ref as unknown as React.Ref<HTMLSpanElement>}\n          aria-current={current ? 'page' : undefined}\n          aria-disabled={disabled || undefined}\n          className={classes}\n        >\n          {content}\n        </span>\n      );\n    }\n    const Comp = asChild ? Slot : 'a';\n    return (\n      <Comp ref={ref} className={classes} {...props}>\n        {asChild && React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement<{ children?: React.ReactNode }>, undefined, (\n              <>\n                {icon && (\n                  <span aria-hidden=\"true\" className=\"inline-flex h-icon-md w-icon-md shrink-0 items-center justify-center\">\n                    {icon}\n                  </span>\n                )}\n                {(children as React.ReactElement<{ children?: React.ReactNode }>).props.children}\n              </>\n            ))\n          : content}\n      </Comp>\n    );\n  },\n);\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\n// Collapsed middle levels (\"...\").\nconst BreadcrumbEllipsis = ({ className, label: labelProp }: { className?: string; label?: string }) => {\n  const l = useLabels();\n  const label = labelProp ?? l.moreLevels;\n  const { type } = React.useContext(BreadcrumbContext);\n  return (\n    <span role=\"presentation\" className={cn(itemVariants({ type }), 'hover:text-text-subtle', className)}>\n      <Ellipsis aria-hidden=\"true\" className=\"h-icon-md w-icon-md\" />\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  );\n};\n\nexport { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, Breadcrumbs, type BreadcrumbDivider, type BreadcrumbType };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}