{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Command",
  "dependencies": [
    "cmdk",
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Dialog",
    "@rescript-shadcn/Icons",
    "@rescript-shadcn/InputGroup"
  ],
  "files": [
    {
      "path": "registry/base/ui/Command.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@@directive(\"'use client'\")\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule CommandPrimitive = {\n  type props = {\n    ...BaseUIComponentProps.t,\n    value?: string,\n    onValueChange?: string => unit,\n    defaultValue?: string,\n  }\n  @module(\"cmdk\")\n  external make: React.component<props> = \"Command\"\n\n  module Input = {\n    type props = {\n      ...BaseUIComponentProps.t,\n      value?: string,\n      onValueChange?: string => unit,\n      defaultValue?: string,\n    }\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<props> = \"Input\"\n  }\n\n  module List = {\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<BaseUIComponentProps.t> = \"List\"\n  }\n\n  module Empty = {\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<BaseUIComponentProps.t> = \"Empty\"\n  }\n\n  module Group = {\n    type props = {\n      ...BaseUIComponentProps.t,\n      heading?: string,\n      forceMount?: bool,\n    }\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<props> = \"Group\"\n  }\n\n  module Separator = {\n    type props = {\n      ...BaseUIComponentProps.t,\n      alwaysRender?: bool,\n    }\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<props> = \"Separator\"\n  }\n\n  module Item = {\n    type props = {\n      ...BaseUi.Types.BaseDomWithoutOnSelectProps.t,\n      ...BaseUi.Types.ExtraDomProps.t,\n      children?: React.element,\n      value?: string,\n      onSelect?: string => unit,\n      asChild?: bool,\n      keywords?: array<string>,\n      forceMount?: bool,\n    }\n    @module(\"cmdk\") @scope(\"Command\")\n    external make: React.component<props> = \"Item\"\n  }\n}\n\n@react.componentWithProps(CommandPrimitive.props)\nlet make = (props: CommandPrimitive.props) =>\n  <CommandPrimitive\n    {...props}\n    dataSlot={props.dataSlot->Option.getOr(\"command\")}\n    className={cn(\n      \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n      props.className,\n    )}\n  />\n\nmodule Dialog = {\n  type props<'payload> = {\n    ...BaseUi.Dialog.Root.props<'payload>,\n    description?: string,\n    showCloseButton?: bool,\n  }\n\n  let toBaseUiProps: props<'payload> => BaseUi.Dialog.Root.props<\n    'payload,\n  > = %raw(`({className, title, description, showCloseButton, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props<'payload>) => {\n    let children = props.children->Option.getOr(React.null)\n    let title = props.title->Option.getOr(\"Command Palette\")\n    let description = props.description->Option.getOr(\"Search for a command to run...\")\n    let showCloseButton = props.showCloseButton->Option.getOr(false)\n    <Dialog {...props->toBaseUiProps}>\n      <Dialog.Header className=\"sr-only\">\n        <Dialog.Title> {title->React.string} </Dialog.Title>\n        <Dialog.Description> {description->React.string} </Dialog.Description>\n      </Dialog.Header>\n      <Dialog.Content\n        className={cn(\"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\", props.className)}\n        showCloseButton\n      >\n        {children}\n      </Dialog.Content>\n    </Dialog>\n  }\n}\n\nmodule Input = {\n  @react.componentWithProps(CommandPrimitive.Input.props)\n  let make = (props: CommandPrimitive.Input.props) =>\n    <div dataSlot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup\n        className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\"\n      >\n        <CommandPrimitive.Input\n          {...props}\n          dataSlot={props.dataSlot->Option.getOr(\"command-input\")}\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            props.className,\n          )}\n        />\n        <InputGroup.Addon>\n          <Icons.Search className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>\n}\n\nmodule List = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <CommandPrimitive.List\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"command-list\")}\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        props.className,\n      )}\n    />\n}\n\nmodule Empty = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n    <CommandPrimitive.Empty\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"command-empty\")}\n      className={cn(\"py-6 text-center text-sm\", props.className)}\n    />\n}\n\nmodule Group = {\n  @react.componentWithProps(CommandPrimitive.Group.props)\n  let make = (props: CommandPrimitive.Group.props) =>\n    <CommandPrimitive.Group\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"command-group\")}\n      className={cn(\n        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n        props.className,\n      )}\n    />\n}\n\nmodule Separator = {\n  @react.componentWithProps(CommandPrimitive.Separator.props)\n  let make = (props: CommandPrimitive.Separator.props) =>\n    <CommandPrimitive.Separator\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"command-separator\")}\n      className={cn(\"bg-border -mx-1 h-px\", props.className)}\n    />\n}\n\nmodule Item = {\n  @react.componentWithProps(CommandPrimitive.Item.props)\n  let make = (props: CommandPrimitive.Item.props) => {\n    let children = props.children->Option.getOr(React.null)\n    <CommandPrimitive.Item\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"command-item\")}\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        props.className,\n      )}\n    >\n      {children}\n      <Icons.Check\n        className=\" ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\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(\"command-shortcut\")}\n      className={cn(\n        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Command.res"
    }
  ],
  "type": "registry:ui"
}