{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumbs",
  "title": "Breadcrumbs",
  "description": "Where you are. Long trails fold the middle.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "breadcrumbs/Breadcrumbs.css",
      "content": ".cr-breadcrumbs__list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--cr-space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-breadcrumbs__item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cr-space-2);\n}\n\n.cr-breadcrumbs__link {\n  border-radius: 6px;\n  color: var(--cr-color-text-secondary);\n  text-decoration: none;\n}\n\n.cr-breadcrumbs__link[href]:hover {\n  color: var(--cr-color-text-default);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n.cr-breadcrumbs__link[aria-current='page'] {\n  color: var(--cr-color-text-default);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-breadcrumbs__sep {\n  color: var(--cr-color-text-muted);\n}\n\n.cr-breadcrumbs__more {\n  padding: 2px var(--cr-space-2);\n  border: 0;\n  border-radius: var(--cr-radius-sm);\n  background: var(--cr-color-bg-subtle);\n  color: var(--cr-color-text-default);\n  font: inherit;\n  font-weight: var(--cr-font-weight-bold);\n  cursor: pointer;\n}\n\n.cr-breadcrumbs__link:focus-visible,\n.cr-breadcrumbs__more:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/breadcrumbs/Breadcrumbs.css"
    },
    {
      "path": "breadcrumbs/Breadcrumbs.tsx",
      "content": "'use client';\n\nimport { useState, type MouseEventHandler, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Breadcrumbs.css';\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n}\n\nexport interface BreadcrumbsProps {\n  /** From the top level down. The last item is the current page. */\n  items: BreadcrumbItem[];\n  /** Above this many items, the middle collapses into a button. Default 4. */\n  maxItems?: number;\n  /** Accessible name of the nav. Default \"Breadcrumb\". */\n  label?: string;\n  className?: string;\n}\n\n/** Where you are, as a trail of links. Long trails keep the first and last levels and fold the middle. */\nexport function Breadcrumbs({ items, maxItems = 4, label = 'Breadcrumb', className }: BreadcrumbsProps) {\n  const [expanded, setExpanded] = useState(false);\n  const fold = !expanded && items.length > maxItems;\n  const hidden = fold ? items.length - 2 : 0;\n  const shown = fold ? [items[0]!, null, items[items.length - 1]!] : items;\n\n  return (\n    <nav aria-label={label} className={cx('cr-breadcrumbs', className)}>\n      <ol className=\"cr-breadcrumbs__list\">\n        {shown.map((item, i) => {\n          const last = i === shown.length - 1;\n          return (\n            <li key={i} className=\"cr-breadcrumbs__item\">\n              {item === null ? (\n                <button type=\"button\" className=\"cr-breadcrumbs__more\" aria-label={`Show ${hidden} hidden levels`} onClick={() => setExpanded(true)}>\n                  …\n                </button>\n              ) : (\n                <a\n                  className=\"cr-breadcrumbs__link\"\n                  href={item.href}\n                  onClick={item.onClick}\n                  aria-current={last ? 'page' : undefined}\n                >\n                  {item.label}\n                </a>\n              )}\n              {!last && (\n                <span className=\"cr-breadcrumbs__sep\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/breadcrumbs/Breadcrumbs.tsx"
    }
  ],
  "categories": [
    "molecule",
    "navigation"
  ],
  "type": "registry:ui"
}