{"name":"breadcrumb","type":"registry:ui","files":[{"path":"breadcrumb.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { mergeProps } from \"@base-ui-components/react/merge-props\"\nimport { useRender } from \"@base-ui-components/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ChevronRight, Ellipsis as MoreHorizontal } from \"honestui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst breadcrumbVariants = cva(\"[font-weight:var(--hui-font-weight-medium)]\", {\n  variants: {\n    size: {\n      small:\n        \"[font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\",\n      medium:\n        \"[font-size:var(--hui-font-size-regular)] [letter-spacing:var(--hui-letter-spacing-regular)] [line-height:var(--hui-line-height-regular)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"medium\",\n  },\n})\n\ninterface BreadcrumbProps extends React.ComponentProps<\"nav\"> {\n  size?: VariantProps<typeof breadcrumbVariants>[\"size\"]\n}\n\nfunction Breadcrumb({ className, size, ...props }: BreadcrumbProps) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(breadcrumbVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"m-0 flex list-none items-center gap-[var(--hui-space-2)] p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"flex items-center whitespace-nowrap\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  const defaultProps = {\n    \"data-slot\": \"breadcrumb-link\",\n    className: cn(\n      \"flex cursor-pointer items-center gap-[var(--hui-space-2)] whitespace-nowrap text-[var(--hui-color-foreground-base-tertiary)] no-underline outline-none motion-safe:[transition:color_var(--hui-duration-fast)_var(--hui-ease-out)] hover:text-[var(--hui-color-foreground-base-secondary)] focus-visible:rounded-[var(--hui-radius-1)] focus-visible:[outline:var(--hui-focus-ring)] aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n      className\n    ),\n  }\n\n  return useRender({\n    defaultTagName: \"a\",\n    render,\n    props: mergeProps<\"a\">(defaultProps, props),\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\n        \"flex cursor-default items-center whitespace-nowrap text-[var(--hui-color-foreground-base-primary)] [font-weight:var(--hui-font-weight-medium)] hover:text-[var(--hui-color-foreground-base-primary)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex items-center text-[var(--hui-color-foreground-base-tertiary)] [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex items-center text-[var(--hui-color-foreground-base-tertiary)]\",\n        className\n      )}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nfunction BreadcrumbIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-icon\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbDropdownTrigger({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">) {\n  const defaultProps = {\n    \"data-slot\": \"breadcrumb-dropdown-trigger\",\n    type: \"button\" as const,\n    className: cn(\n      \"flex cursor-pointer items-center border-0 bg-transparent p-0 text-[var(--hui-color-foreground-base-secondary)] [font-size:inherit] [font-weight:inherit] outline-none focus-visible:rounded-[var(--hui-radius-1)] focus-visible:[outline:var(--hui-focus-ring)] [&_svg]:h-[var(--hui-space-3)]\",\n      className\n    ),\n  }\n\n  return useRender({\n    defaultTagName: \"button\",\n    render,\n    props: mergeProps<\"button\">(defaultProps, props),\n  })\n}\n\nfunction BreadcrumbDropdownItem({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  const defaultProps = {\n    \"data-slot\": \"breadcrumb-dropdown-item\",\n    className: cn(\n      \"block w-full cursor-pointer border-0 bg-transparent p-[var(--hui-space-3)] text-left text-[var(--hui-color-foreground-base-primary)] no-underline [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] hover:rounded-[var(--hui-radius-2)] hover:bg-[var(--hui-color-background-base-primary-hover)]\",\n      className\n    ),\n  }\n\n  return useRender({\n    defaultTagName: \"a\",\n    render,\n    props: mergeProps<\"a\">(defaultProps, props),\n  })\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  BreadcrumbIcon,\n  BreadcrumbDropdownTrigger,\n  BreadcrumbDropdownItem,\n  breadcrumbVariants,\n}\n","target":"components/ui/breadcrumb.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority","honestui"]}