{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "description": "A trail of links to the pages above the current one.",
  "dependencies": [
    "@base-ui/react",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/breadcrumb.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n  ArrowRight01Icon,\n  MoreHorizontalCircle01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles, visuallyHidden } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  media,\n  sizes,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst rtl = \":is([dir='rtl'], [dir='rtl'] *)\";\n\nconst styles = stylex.create({\n  list: {\n    alignItems: \"center\",\n    color: colors.textSecondary,\n    columnGap: space.xs,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    listStyleType: \"none\",\n    paddingInlineEnd: 0,\n    paddingInlineStart: 0,\n    rowGap: space.xxs,\n  },\n  item: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: space.xxs,\n    minWidth: 0,\n  },\n  link: {\n    color: {\n      default: colors.textSecondary,\n      [media.hover]: {\n        default: colors.textSecondary,\n        \":hover\": colors.textPrimary,\n      },\n      \":active\": colors.textPrimary,\n    },\n    textDecorationLine: \"none\",\n    transitionDuration: durations.hover,\n    transitionProperty: \"color\",\n    transitionTimingFunction: \"ease\",\n  },\n  page: {\n    color: colors.textPrimary,\n  },\n  separator: {\n    display: \"flex\",\n    transform: { default: null, [rtl]: \"scaleX(-1)\" },\n  },\n  ellipsis: {\n    alignItems: \"center\",\n    display: \"flex\",\n    height: sizes.iconLg,\n    justifyContent: \"center\",\n    width: sizes.iconLg,\n  },\n});\n\nfunction Breadcrumb({ sx, ...props }: Styled<ComponentProps<\"nav\">>) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      data-slot=\"breadcrumb\"\n      {...props}\n      {...stylex.props(sx)}\n    />\n  );\n}\n\nfunction BreadcrumbList({ sx, ...props }: Styled<ComponentProps<\"ol\">>) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, styles.list], sx)}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ sx, ...props }: Styled<ComponentProps<\"li\">>) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      {...props}\n      {...stylex.props(styles.item, sx)}\n    />\n  );\n}\n\n/** Pass a router's link as `render`. */\nfunction BreadcrumbLink({\n  render,\n  sx,\n  ...props\n}: Styled<useRender.ComponentProps<\"a\">>) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(props, stylex.props(styles.link, sx)),\n    render,\n    state: { slot: \"breadcrumb-link\" },\n  });\n}\n\nfunction BreadcrumbPage({ sx, ...props }: Styled<ComponentProps<\"span\">>) {\n  return (\n    <span\n      aria-current=\"page\"\n      data-slot=\"breadcrumb-page\"\n      {...props}\n      {...stylex.props(styles.page, sx)}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  sx,\n  ...props\n}: Styled<ComponentProps<\"li\">>) {\n  return (\n    <li\n      aria-hidden\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n      {...stylex.props(styles.separator, sx)}\n    >\n      {children ?? (\n        <HugeiconsIcon\n          icon={ArrowRight01Icon}\n          size={sizes.iconSm}\n          strokeWidth={Number(strokes.icon)}\n        />\n      )}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ sx, ...props }: Styled<ComponentProps<\"span\">>) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      {...props}\n      {...stylex.props(styles.ellipsis, sx)}\n    >\n      <HugeiconsIcon\n        aria-hidden\n        icon={MoreHorizontalCircle01Icon}\n        size={sizes.icon}\n        strokeWidth={Number(strokes.icon)}\n      />\n      <span {...stylex.props(visuallyHidden.base)}>More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/breadcrumb/index.md",
  "type": "registry:ui"
}