{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"breadcrumb","title":"Breadcrumb","description":"Semantic hierarchy trail with native navigation links.","dependencies":["@base-ui/react@1.7.0","lucide-react@1.18.0"],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/breadcrumb/breadcrumb.tsx","content":"\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\n\nexport function Breadcrumb(props: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      {...props}\n      className={cn(slotClass(\"breadcrumb\", props), props.className)}\n    />\n  );\n}\n\nexport function BreadcrumbList({\n  className,\n  ...props\n}: React.ComponentProps<\"ol\">) {\n  // The trail wraps by default; design-rework.css owns the wrap, so a header\n  // bar can keep it on one line (Dashboard Shell).\n  return (\n    <ol\n      className={cn(\n        slotClass(\"breadcrumb-list\", props),\n        \"wrap-break-word flex items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\",\n        className,\n      )}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  // A crumb can shrink below its text, so a long one never runs past the\n  // trail: the current page ends with an ellipsis, a link wraps.\n  return (\n    <li\n      className={cn(\n        slotClass(\"breadcrumb-item\", props),\n        \"inline-flex min-w-0 items-center gap-1.5\",\n        className,\n      )}\n      data-slot=\"breadcrumb-item\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  const defaultProps = {\n    className: cn(\n      slotClass(\"breadcrumb-link\", props, render),\n      \"hover:text-foreground\",\n      className,\n    ),\n    \"data-slot\": \"breadcrumb-link\",\n  };\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function BreadcrumbPage({\n  className,\n  children,\n  title,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  // The current page stays on one line and ends with an ellipsis when the\n  // trail has no room for it; plain text keeps its full value in title (K5).\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn(\n        slotClass(\"breadcrumb-page\", props),\n        \"min-w-0 truncate font-normal text-foreground\",\n        className,\n      )}\n      data-slot=\"breadcrumb-page\"\n      title={title ?? plainText(children)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\n/** The text of children made of strings and numbers only, such as `Invoice {id}`. */\nfunction plainText(children: React.ReactNode): string | undefined {\n  const parts = React.Children.toArray(children);\n  const text = parts.every(\n    (part) => typeof part === \"string\" || typeof part === \"number\",\n  )\n    ? parts.join(\"\")\n    : \"\";\n  return text === \"\" ? undefined : text;\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  // The default chevron points to the next level, at the inline end: it\n  // mirrors in a right-to-left page.\n  return (\n    <li\n      aria-hidden=\"true\"\n      className={cn(\n        slotClass(\"breadcrumb-separator\", props),\n        \"opacity-80 [&>svg]:size-4\",\n        className,\n      )}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <ChevronRightIcon className=\"rtl:-scale-x-100\" />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // Inside a menu trigger the ellipsis keeps the muted link color and,\n        // like the links, turns to the foreground color on hover or while open.\n        slotClass(\"breadcrumb-ellipsis\", props),\n        \"text-muted-foreground in-aria-expanded:text-foreground in-[button:hover]:text-foreground\",\n        className,\n      )}\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4 opacity-100\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/breadcrumb/breadcrumb.tsx"},{"path":"packages/ui/src/components/breadcrumb/index.ts","content":"export * from \"./breadcrumb\";\n","type":"registry:ui","target":"~/src/siteplane/components/breadcrumb/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/breadcrumb.md","categories":["Navigation"],"meta":{"avoidWhen":["Avoid for steps in a process; use Stepper.","Avoid as the only navigation of an application: it shows one path, not the structure."],"description":"Semantic hierarchy trail with native navigation links.","knownLimitations":[],"providerNotes":[],"releaseStatus":"stable","searchTerms":["breadcrumb"],"useWhen":["Use to show where the current page sits in a hierarchy and to link to the levels above it."]}}