{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumbs",
  "title": "Breadcrumbs",
  "description": "A breadcrumbs component.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "files": [
    {
      "path": "registry/default/breadcrumbs/breadcrumbs.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport {\r\n  ArrowRight01Icon,\r\n  MoreHorizontalIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ntype BreadcrumbVariant = \"default\" | \"surface\";\r\ntype BreadcrumbSize = \"sm\" | \"md\" | \"lg\";\r\n\r\ninterface BreadcrumbProps extends React.ComponentProps<\"nav\"> {\r\n  variant?: BreadcrumbVariant;\r\n  size?: BreadcrumbSize;\r\n  \"aria-label\"?: string;\r\n}\r\n\r\nfunction Breadcrumb({\r\n  variant = \"default\",\r\n  size = \"md\",\r\n  \"aria-label\": ariaLabel = \"breadcrumb\",\r\n  className,\r\n  ...props\r\n}: BreadcrumbProps) {\r\n  return (\r\n    <nav\r\n      aria-label={ariaLabel}\r\n      data-slot=\"breadcrumb\"\r\n      data-variant={variant}\r\n      data-size={size}\r\n      className={cn(\"group\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\r\n  return (\r\n    <ol\r\n      data-slot=\"breadcrumb-list\"\r\n      className={cn(\r\n        \"text-muted-foreground inline-flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5\",\r\n        \"group-data-[size=sm]:gap-1 group-data-[size=sm]:text-xs group-data-[size=sm]:sm:gap-2\",\r\n        \"group-data-[size=lg]:gap-2 group-data-[size=lg]:text-base group-data-[size=lg]:sm:gap-3\",\r\n        // surface variant — framed gray track lifted off the page.\r\n        \"group-data-[variant=surface]:bg-muted group-data-[variant=surface]:rounded-lg group-data-[variant=surface]:p-1 group-data-[variant=surface]:shadow-[var(--surface-shadow-1),var(--surface-rim-1)]\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface BreadcrumbItemProps extends React.ComponentProps<\"li\"> {\r\n  \"aria-label\"?: string;\r\n}\r\n\r\nfunction BreadcrumbItem({\r\n  className,\r\n  \"aria-label\": ariaLabel,\r\n  ...props\r\n}: BreadcrumbItemProps) {\r\n  return (\r\n    <li\r\n      data-slot=\"breadcrumb-item\"\r\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\r\n      aria-label={ariaLabel}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ntype BreadcrumbLinkProps = useRender.ComponentProps<\"a\">;\r\n\r\nfunction BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps) {\r\n  const defaultProps = {\r\n    \"data-slot\": \"breadcrumb-link\",\r\n    className: cn(\r\n      \"rounded-sm transition-colors duration-200 hover:text-foreground\",\r\n      \"outline-solid outline-2 outline-offset-2 outline-transparent focus-visible:outline-ring/50\",\r\n      // surface variant — padded hit area so links sit inside the track.\r\n      \"group-data-[variant=surface]:px-1.5 group-data-[variant=surface]:py-0.5\",\r\n      className,\r\n    ),\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"a\",\r\n    render,\r\n    props: mergeProps<\"a\">(defaultProps, props),\r\n  });\r\n}\r\n\r\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      data-slot=\"breadcrumb-page\"\r\n      aria-current=\"page\"\r\n      className={cn(\r\n        \"text-foreground font-normal\",\r\n        // surface variant — current-page pill lifted out of the muted track.\r\n        \"group-data-[variant=surface]:bg-surface-4 group-data-[variant=surface]:rounded-sm group-data-[variant=surface]:px-2 group-data-[variant=surface]:py-1 group-data-[variant=surface]:shadow-[var(--surface-shadow-3),var(--surface-rim-3)]\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface BreadcrumbSeparatorProps extends React.ComponentProps<\"li\"> {\r\n  separator?: React.ReactNode;\r\n}\r\n\r\nfunction BreadcrumbSeparator({\r\n  children,\r\n  className,\r\n  separator,\r\n  ...props\r\n}: BreadcrumbSeparatorProps) {\r\n  return (\r\n    <li\r\n      data-slot=\"breadcrumb-separator\"\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      className={cn(\r\n        \"flex items-center justify-center [&>svg]:size-3.5\",\r\n        \"group-data-[size=sm]:[&>svg]:size-3\",\r\n        \"group-data-[size=lg]:[&>svg]:size-4\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {children ?? separator ?? (\r\n        <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />\r\n      )}\r\n    </li>\r\n  );\r\n}\r\n\r\ninterface BreadcrumbEllipsisProps extends React.ComponentProps<\"span\"> {\r\n  \"aria-label\"?: string;\r\n}\r\n\r\nfunction BreadcrumbEllipsis({\r\n  className,\r\n  \"aria-label\": ariaLabel = \"More pages\",\r\n  ...props\r\n}: BreadcrumbEllipsisProps) {\r\n  return (\r\n    <span\r\n      data-slot=\"breadcrumb-ellipsis\"\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      className={cn(\r\n        \"flex size-9 items-center justify-center\",\r\n        \"group-data-[size=sm]:size-7\",\r\n        \"group-data-[size=lg]:size-11\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      <HugeiconsIcon\r\n        icon={MoreHorizontalIcon}\r\n        className=\"size-4 group-data-[size=lg]:size-5 group-data-[size=sm]:size-3\"\r\n        strokeWidth={2}\r\n      />\r\n      <span className=\"sr-only\">{ariaLabel}</span>\r\n    </span>\r\n  );\r\n}\r\n\r\nexport {\r\n  Breadcrumb,\r\n  BreadcrumbList,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n  BreadcrumbEllipsis,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/breadcrumbs.tsx"
    }
  ],
  "type": "registry:ui"
}