{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "A trail of links with glyph separators and a current-page marker.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { forwardRef, Fragment, type HTMLAttributes, type ReactNode } from 'react'\nimport { ChevronRightGlyph } from '@/lib/internal-glyphs'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type LiquidBreadcrumbItem = {\n  href?: string\n  icon?: ReactNode\n  label: ReactNode\n  onClick?: () => void\n}\n\nexport type LiquidBreadcrumbsProps = HTMLAttributes<HTMLElement> & LiquidStyleProps & {\n  items: LiquidBreadcrumbItem[]\n  label?: string\n  separator?: ReactNode\n}\n\nexport const LiquidBreadcrumbs = forwardRef<HTMLElement, LiquidBreadcrumbsProps>(({\n  className,\n  items,\n  label = 'Breadcrumb',\n  separator,\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-breadcrumbs', { className, style, styles })\n\n  return (\n    <nav aria-label={label} className={root.className} ref={ref} style={root.style} {...props}>\n      <ol>\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1\n          const content = (\n            <>\n              {item.icon && <span className=\"lq-breadcrumbs__icon\">{item.icon}</span>}\n              <span>{item.label}</span>\n            </>\n          )\n\n          return (\n            <Fragment key={index}>\n              <li aria-current={isLast ? 'page' : undefined} data-current={isLast}>\n                {isLast || (!item.href && !item.onClick)\n                  ? <span className=\"lq-breadcrumbs__item\">{content}</span>\n                  : item.href\n                    ? <a className=\"lq-breadcrumbs__item\" href={item.href} onClick={item.onClick}>{content}</a>\n                    : <button className=\"lq-breadcrumbs__item\" onClick={item.onClick} type=\"button\">{content}</button>}\n              </li>\n              {!isLast && (\n                <li aria-hidden=\"true\" className=\"lq-breadcrumbs__separator\">\n                  {separator ?? <ChevronRightGlyph size={13} />}\n                </li>\n              )}\n            </Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n})\n\nLiquidBreadcrumbs.displayName = 'LiquidBreadcrumbs'\n",
      "path": "registry/liquid-breadcrumbs.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-breadcrumbs",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/internal-glyphs.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidBreadcrumbs",
  "type": "registry:ui"
}