{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "DropdownMenu",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/DropdownMenu.res",
      "content": "@@directive(\"'use client'\")\n\n@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\nopen BaseUi.Types\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.Menu.Root.props)\nlet make = (props: BaseUi.Menu.Root.props<'payload>) => {\n  let dataSlot = props.dataSlot->Option.getOr(\"dropdown-menu\")\n  <BaseUi.Menu.Root {...props} dataSlot />\n}\n\nmodule Portal = {\n  @react.componentWithProps(BaseUi.Menu.Portal.props)\n  let make = (props: BaseUi.Menu.Portal.props) =>\n    <BaseUi.Menu.Portal\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-portal\")}\n    />\n}\n\nmodule Trigger = {\n  @react.componentWithProps(BaseUi.Menu.Trigger.props)\n  let make = (props: BaseUi.Menu.Trigger.props) =>\n    <BaseUi.Menu.Trigger\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-trigger\")}\n    />\n}\n\nmodule Content = {\n  type props = {\n    align?: Align.t,\n    alignOffset?: float,\n    side?: Side.t,\n    sideOffset?: float,\n    ...BaseUi.Types.BaseUIComponentProps.t,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({align, alignOffset, side, sideOffset, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <BaseUi.Menu.Portal>\n      <BaseUi.Menu.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={props.align->Option.getOr(Align.Start)}\n        alignOffset={Const(props.alignOffset->Option.getOr(0.))}\n        side={props.side->Option.getOr(Side.Bottom)}\n        sideOffset={Const(props.sideOffset->Option.getOr(4.))}\n      >\n        <BaseUi.Menu.Popup\n          {...toBaseUiProps(props)}\n          dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-content\")}\n          className={cn(\n            \"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 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            props.className,\n          )}\n        />\n      </BaseUi.Menu.Positioner>\n    </BaseUi.Menu.Portal>\n}\n\nmodule Group = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) => {\n    let className = props.className->Option.getOr(\"\")\n    <BaseUi.Menu.Group\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-group\")} className\n    />\n  }\n}\n\nmodule Label = {\n  type props = {\n    ...BaseUi.Types.BaseUIComponentProps.t,\n    inset?: bool,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({inset, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <BaseUi.Menu.GroupLabel\n      {...toBaseUiProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-label\")}\n      dataInset=?{props.dataInset->Option.orElse(props.inset)}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        props.className,\n      )}\n    />\n}\n\nmodule Item = {\n  type props = {\n    inset?: bool,\n    variant?: Variant.t,\n    ...BaseUi.Menu.Item.props,\n  }\n\n  let toBaseUiProps: props => BaseUi.Menu.Item.props = %raw(`({inset, variant, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let variant = props.variant->Option.getOr(Variant.Default)\n\n    <BaseUi.Menu.Item\n      {...toBaseUiProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-item\")}\n      dataInset=?{props.dataInset->Option.orElse(props.inset)}\n      dataVariant={props.dataVariant->Option.getOr((variant :> 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-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item 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  }\n}\n\nmodule CheckboxItem = {\n  @react.componentWithProps(BaseUi.Menu.CheckboxItem.props)\n  let make = (props: BaseUi.Menu.CheckboxItem.props) =>\n    <BaseUi.Menu.CheckboxItem\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-checkbox-item\")}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm 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 data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        dataSlot=\"dropdown-menu-checkbox-item-indicator\"\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    <BaseUi.Menu.RadioGroup\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-radio-group\")}\n    />\n}\n\nmodule RadioItem = {\n  @react.componentWithProps(BaseUi.Menu.RadioItem.props)\n  let make = (props: BaseUi.Menu.RadioItem.props<'value>) =>\n    <BaseUi.Menu.RadioItem\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-radio-item\")}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm 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 data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        dataSlot=\"dropdown-menu-radio-item-indicator\"\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 Separator = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Menu.Separator\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-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    <span\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-shortcut\")}\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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    <BaseUi.Menu.SubmenuRoot\n      {...props} dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-sub\")}\n    />\n}\n\nmodule SubTrigger = {\n  type props = {\n    ...BaseUi.Types.BaseUIComponentProps.t,\n    inset?: bool,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.BaseUIComponentProps.t = %raw(`({inset, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <BaseUi.Menu.SubmenuTrigger\n      {...toBaseUiProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-sub-trigger\")}\n      dataInset=?{props.dataInset->Option.orElse(props.inset)}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**: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 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.null)}\n      <Icons.ChevronRight className=\" ml-auto\" />\n    </BaseUi.Menu.SubmenuTrigger>\n}\n\nmodule SubContent = {\n  @react.componentWithProps(Content.contentProps)\n  let make = (props: Content.props) =>\n    <Content\n      {...props}\n      align={props.align->Option.getOr(Align.Start)}\n      alignOffset={props.alignOffset->Option.getOr(-3.)}\n      side={props.side->Option.getOr(Side.Right)}\n      sideOffset={props.sideOffset->Option.getOr(0.)}\n      dataSlot={props.dataSlot->Option.getOr(\"dropdown-menu-sub-content\")}\n      className={cn(\n        \"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 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/DropdownMenu.res"
    }
  ],
  "type": "registry:ui"
}