{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "NativeSelect",
  "dependencies": [
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/NativeSelect.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\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\ntype props = {\n  ...BaseUi.Types.BaseDomProps.t,\n  ...BaseUi.Types.ExtraDomProps.t,\n  children?: React.element,\n  onChange?: JsxEvent.Form.t => unit,\n  multiple?: bool,\n  value?: string,\n  defaultValue?: string,\n  size?: Size.t,\n  invalid?: bool,\n}\nlet toDomProps: props => BaseUi.Types.DomProps.t = %raw(`({className, size, invalid, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let size = props.size->Stdlib.Option.getOr(Default)\n  <div\n    dataSlot=\"native-select-wrapper\"\n    dataSize={(size :> string)}\n    className={cn(\n      \" group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n      props.className,\n    )}\n  >\n    <select\n      {...toDomProps(props)}\n      dataSlot={props.dataSlot->Stdlib.Option.getOr(\"native-select\")}\n      dataSize={props.dataSize->Stdlib.Option.getOr((size :> string))}\n      ariaInvalid=?{props.ariaInvalid->Stdlib.Option.orElse(\n        props.invalid == Some(true) ? Some(#\"true\") : None,\n      )}\n      className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-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 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n    />\n    <Icons.ChevronDown\n      className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n      ariaHidden=true\n      dataSlot=\"native-select-icon\"\n    />\n  </div>\n}\n\nmodule Option = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <option\n      {...props}\n      dataSlot={props.dataSlot->Stdlib.Option.getOr(\"native-select-option\")}\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", props.className)}\n    />\n}\n\nmodule OptGroup = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <optgroup\n      {...props}\n      dataSlot={props.dataSlot->Stdlib.Option.getOr(\"native-select-optgroup\")}\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", props.className)}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/NativeSelect.res"
    }
  ],
  "type": "registry:ui"
}