{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Menubar",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/DropdownMenu",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Menubar.res",
      "content": "@@directive(\"'use client'\")\n\n@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Variant = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"destructive\") Destructive\n}\n\n@react.componentWithProps(BaseUi.Menubar.props)\nlet make = (props: BaseUi.Menubar.props) => {\n  let dataSlot = props.dataSlot->Option.getOr(\"menubar\")\n  <BaseUi.Menubar\n    {...props}\n    dataSlot\n    className={cn(\"h-8 gap-0.5 rounded-lg border p-[3px] flex items-center\", props.className)}\n  />\n}\nmodule Menu = {\n  @react.componentWithProps(BaseUi.Menu.Root.props)\n  let make = (props: BaseUi.Menu.Root.props<'payload>) =>\n    <DropdownMenu {...props} dataSlot={props.dataSlot->Option.getOr(\"menubar-menu\")} />\n}\n\nmodule Group = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Menu.Group {...props} dataSlot={props.dataSlot->Option.getOr(\"menubar-group\")} />\n}\n\nmodule Portal = {\n  @react.componentWithProps(BaseUi.Menu.Portal.props)\n  let make = (props: BaseUi.Menu.Portal.props) =>\n    <BaseUi.Menu.Portal {...props} dataSlot={props.dataSlot->Option.getOr(\"menubar-portal\")} />\n}\n\nmodule Trigger = {\n  @react.componentWithProps(BaseUi.Menu.Trigger.props)\n  let make = (props: BaseUi.Menu.Trigger.props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"menubar-trigger\")\n    <DropdownMenu.Trigger\n      {...props}\n      dataSlot\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none\",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule Content = {\n  @react.componentWithProps(DropdownMenu.Content.contentProps)\n  let make = (props: DropdownMenu.Content.props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"menubar-content\")\n    let align = props.align->Option.getOr(BaseUi.Types.Align.Start)\n    let alignOffset = props.alignOffset->Option.getOr(-4.)\n    let sideOffset = props.sideOffset->Option.getOr(8.)\n    <DropdownMenu.Content\n      {...props}\n      dataSlot\n      align\n      alignOffset\n      sideOffset\n      className={cn(\n        \"data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100  \",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule Item = {\n  @react.componentWithProps(DropdownMenu.Item.props)\n  let make = (props: DropdownMenu.Item.props) =>\n    <DropdownMenu.Item\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-item\")}\n      dataVariant={(props.variant->Option.getOr(Default) :> string)}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\",\n        props.className,\n      )}\n    />\n}\n\nmodule CheckboxItem = {\n  type props = {\n    ...BaseUi.Menu.CheckboxItem.props,\n    inset?: bool,\n  }\n  let toCheckboxItemProps: props => BaseUi.Menu.CheckboxItem.props = %raw(`({inset, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <BaseUi.Menu.CheckboxItem\n      {...props->toCheckboxItemProps}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-checkbox-item\")}\n      dataInset=?{props.dataInset->Option.orElse(props.inset)}\n      checked=?{props.checked}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      <span\n        className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\"\n      >\n        <BaseUi.Menu.CheckboxItemIndicator>\n          <Icons.Check />\n        </BaseUi.Menu.CheckboxItemIndicator>\n      </span>\n      {props.children->Option.getOr(React.null)}\n    </BaseUi.Menu.CheckboxItem>\n}\n\nmodule RadioGroup = {\n  @react.componentWithProps(BaseUi.Menu.RadioGroup.props)\n  let make = (props: BaseUi.Menu.RadioGroup.props<'value>) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"menubar-radio-group\")\n    <DropdownMenu.RadioGroup {...props} dataSlot />\n  }\n}\n\nmodule RadioItem = {\n  type props<'value> = {inset?: bool, ...BaseUi.Menu.RadioItem.props<'value>}\n\n  let toBaseUiProps: props<'value> => BaseUi.Menu.RadioItem.props<\n    'value,\n  > = %raw(`({inset, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props<'value>) =>\n    <BaseUi.Menu.RadioItem\n      {...toBaseUiProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-radio-item\")}\n      dataInset=?{props.dataInset->Option.orElse(props.inset)}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      <span\n        className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\"\n      >\n        <BaseUi.Menu.RadioItemIndicator>\n          <Icons.Check />\n        </BaseUi.Menu.RadioItemIndicator>\n      </span>\n      {props.children->Option.getOr(React.null)}\n    </BaseUi.Menu.RadioItem>\n}\n\nmodule Label = {\n  @react.componentWithProps(DropdownMenu.Label.props)\n  let make = (props: DropdownMenu.Label.props) =>\n    <DropdownMenu.Label\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-label\")}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-inset:pl-7\", props.className)}\n    />\n}\n\nmodule Separator = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <DropdownMenu.Separator\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-separator\")}\n      className={cn(\"bg-border -mx-1 my-1 h-px\", props.className)}\n    />\n}\n\nmodule Shortcut = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <DropdownMenu.Shortcut\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"menubar-shortcut\")}\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\",\n        props.className,\n      )}\n    />\n}\n\nmodule Sub = {\n  @react.componentWithProps(BaseUi.Menu.SubmenuRoot.props)\n  let make = (props: BaseUi.Menu.SubmenuRoot.props<'payload>) =>\n    <DropdownMenu.Sub {...props} dataSlot={props.dataSlot->Option.getOr(\"menubar-sub\")} />\n}\n\nmodule SubTrigger = {\n  @react.componentWithProps(DropdownMenu.SubTrigger.props)\n  let make = (props: DropdownMenu.SubTrigger.props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"menubar-sub-trigger\")\n    <DropdownMenu.SubTrigger\n      {...props}\n      dataSlot\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4\",\n        props.className,\n      )}\n    />\n  }\n}\n\nmodule SubContent = {\n  @react.componentWithProps(DropdownMenu.Content.props)\n  let make = (props: DropdownMenu.Content.props) => {\n    let dataSlot = props.dataSlot->Option.getOr(\"menubar-sub-content\")\n    <DropdownMenu.SubContent\n      {...props}\n      dataSlot\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100  \",\n        props.className,\n      )}\n    />\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Menubar.res"
    }
  ],
  "type": "registry:ui"
}