{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Select",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Select.res",
      "content": "@@directive(\"'use client'\")\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Size = {\n  @unboxed\n  type t =\n    | @as(\"default\") Default\n    | @as(\"sm\") Sm\n}\n\nlet make = BaseUi.Select.Root.make\n\nmodule Multiple = {\n  @react.componentWithProps(BaseUi.Select.Root.Multiple.props)\n  let make = (props: BaseUi.Select.Root.Multiple.props<'value>) =>\n    <BaseUi.Select.Root.Multiple {...props} multiple=True />\n}\n\nmodule Group = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.Group\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-group\")}\n      className={cn(\"scroll-my-1 p-1\", props.className)}\n    />\n}\n\nmodule Value = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.Value\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-value\")}\n      className={cn(\"flex flex-1 text-left\", props.className)}\n    />\n}\n\nmodule ScrollUpButton = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.ScrollUpArrow\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-scroll-up-button\")}\n      className={cn(\n        \"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\",\n        props.className,\n      )}\n    >\n      <Icons.ChevronUp />\n    </BaseUi.Select.ScrollUpArrow>\n}\n\nmodule ScrollDownButton = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.ScrollDownArrow\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-scroll-down-button\")}\n      className={cn(\n        \"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\",\n        props.className,\n      )}\n    >\n      <Icons.ChevronDown />\n    </BaseUi.Select.ScrollDownArrow>\n}\n\nmodule Trigger = {\n  type triggerProps = {\n    size?: Size.t,\n    ...BaseUi.Select.Trigger.props,\n  }\n  let toBaseUiProps: triggerProps => BaseUi.Select.Trigger.props = %raw(`({size, ...rest}) => rest`)\n  @react.componentWithProps(triggerProps)\n  let make = (props: triggerProps) => {\n    let size = props.size->Option.getOr(Default)\n    let baseUiProps = props->toBaseUiProps\n    <BaseUi.Select.Trigger\n      {...baseUiProps}\n      dataSlot={props.dataSlot->Option.getOr(\"select-trigger\")}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.null)}\n      <BaseUi.Select.Icon\n        render={<Icons.ChevronDown className=\"text-muted-foreground size-4 pointer-events-none\" />}\n      />\n    </BaseUi.Select.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, \"data-align-trigger\": dataAlignTrigger, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let alignItemWithTrigger = props.dataAlignTrigger->Option.getOr(true)\n    <BaseUi.Select.Portal>\n      <BaseUi.Select.Positioner\n        side={props.side->Option.getOr(Side.Bottom)}\n        sideOffset={Const(props.sideOffset->Option.getOr(4.))}\n        align={props.align->Option.getOr(Align.Center)}\n        alignOffset={Const(props.alignOffset->Option.getOr(0.))}\n        alignItemWithTrigger\n        className=\"isolate z-50\"\n      >\n        <BaseUi.Select.Popup\n          {...toBaseUiProps(props)}\n          dataSlot={props.dataSlot->Option.getOr(\"select-content\")}\n          dataAlignTrigger={alignItemWithTrigger}\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-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-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\n            props.className,\n          )}\n        >\n          <ScrollUpButton />\n          <BaseUi.Select.List children=?props.children />\n          <ScrollDownButton />\n        </BaseUi.Select.Popup>\n      </BaseUi.Select.Positioner>\n    </BaseUi.Select.Portal>\n  }\n}\n\nmodule Label = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.GroupLabel\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-label\")}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", props.className)}\n    />\n}\n\nmodule Item = {\n  @react.componentWithProps(BaseUi.Select.Item.props)\n  let make = (props: BaseUi.Select.Item.props<'value>) => {\n    let children = props.children\n    <BaseUi.Select.Item\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-item\")}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full 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      <BaseUi.Select.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\" ?children />\n      <BaseUi.Select.ItemIndicator\n        render={<span\n          className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\"\n        />}\n      >\n        <Icons.Check className=\"pointer-events-none\" />\n      </BaseUi.Select.ItemIndicator>\n    </BaseUi.Select.Item>\n  }\n}\n\nmodule Separator = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <BaseUi.Select.Separator\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"select-separator\")}\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", props.className)}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Select.res"
    }
  ],
  "type": "registry:ui"
}