{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Breadcrumb",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Breadcrumb.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.Types.DomProps.t)\nlet make = (props: BaseUi.Types.DomProps.t) => {\n  let className = props.className->Option.getOr(\"\")\n  <nav\n    {...props}\n    ariaLabel={props.ariaLabel->Option.getOr(\"breadcrumb\")}\n    dataSlot={props.dataSlot->Option.getOr(\"breadcrumb\")}\n    className={cn(\"\", Some(className))}\n  />\n}\n\nmodule List = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <ol\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"breadcrumb-list\")}\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word\",\n        props.className,\n      )}\n    />\n}\n\nmodule Item = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <li\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"breadcrumb-item\")}\n      className={cn(\"gap-1 inline-flex items-center\", props.className)}\n    />\n}\n\nmodule Link = {\n  type state = {slot: string}\n  let toDomProps: BaseUi.Types.BaseUIComponentProps.t => BaseUi.Types.DomProps.t = %raw(`({className, render, ...props}) => props`)\n\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) => {\n    BaseUi.Render.use({\n      defaultTagName: \"a\",\n      render: ?props.render,\n      props: BaseUi.Render.mergeProps(\n        {className: cn(\"hover:text-foreground transition-colors\", props.className)},\n        toDomProps(props),\n      ),\n      state: {slot: \"breadcrumb-link\"},\n    })\n  }\n}\n\nmodule Page = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) => {\n    let ariaCurrent = props.ariaCurrent->Option.getOr(#page)\n    let ariaDisabled = props.ariaDisabled->Option.getOr(true)\n    let role = props.role->Option.getOr(\"link\")\n    <span\n      {...props}\n      ariaCurrent\n      ariaDisabled\n      role\n      dataSlot={props.dataSlot->Option.getOr(\"breadcrumb-page\")}\n      className={cn(\"text-foreground font-normal\", props.className)}\n    />\n  }\n}\n\nmodule Separator = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) => {\n    let ariaHidden = props.ariaHidden->Option.getOr(true)\n    let role = props.role->Option.getOr(\"presentation\")\n    let children = props.children\n    let content = switch children {\n    | Some(content) => content\n    | None => <Icons.ChevronRight className=\"\" />\n    }\n    <li\n      {...props}\n      ariaHidden\n      role\n      dataSlot={props.dataSlot->Option.getOr(\"breadcrumb-separator\")}\n      className={cn(\"[&>svg]:size-3.5\", props.className)}\n    >\n      {content}\n    </li>\n  }\n}\n\nmodule Ellipsis = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) => {\n    let ariaHidden = props.ariaHidden->Option.getOr(true)\n    let role = props.role->Option.getOr(\"presentation\")\n    <span\n      {...props}\n      ariaHidden\n      role\n      dataSlot={props.dataSlot->Option.getOr(\"breadcrumb-ellipsis\")}\n      className={cn(\"size-5 [&>svg]:size-4 flex items-center justify-center\", props.className)}\n    >\n      <Icons.MoreHorizontal />\n      <span className=\"sr-only\"> {\"More\"->React.string} </span>\n    </span>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Breadcrumb.res"
    }
  ],
  "type": "registry:ui"
}