{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command","type":"registry:ui","title":"Command","description":"A fast, filterable command menu — inline or as a ⌘K palette.","dependencies":["cmdk","lucide-react"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-locale.json","https://dashral.com/r/dialog.json"],"files":[{"path":"registry/dashral/command.tsx","type":"registry:file","target":"components/dashral/command.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { useLocale } from \"./lib/locale\"\nimport { cn } from \"./lib/utils\"\nimport { Dialog } from \"./dialog\"\n\n/** Building block: the root, for a list of your own (Combobox and MultiSelect are built from these). */\nfunction CommandRoot({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ntype CommandAction = {\n  label: React.ReactNode\n  /** What the search matches; the label when it's text. */\n  value?: string\n  /** More words that find it, e.g. synonyms. */\n  keywords?: string[]\n  icon?: React.ReactNode\n  /**\n   * The keys that do the same, shown at the end: text such as \"⌘S\", or key caps, e.g. a sequence pressed one after the\n   * other as <><Kbd size=\"sm\">G</Kbd><Kbd size=\"sm\">O</Kbd></>.\n   */\n  shortcut?: React.ReactNode\n  /** At the end instead of a shortcut, e.g. a \"Pro\" badge. */\n  badge?: React.ReactNode\n  disabled?: boolean\n  onSelect?: () => void\n}\n\ntype CommandSection = { heading?: React.ReactNode; items: CommandAction[] }\n\ntype CommandProps = Omit<React.ComponentProps<typeof CommandPrimitive>, \"children\"> & {\n  groups: CommandSection[]\n  placeholder?: string\n  /** Shown when nothing matches. */\n  emptyText?: React.ReactNode\n}\n\nfunction CommandBody({ groups, placeholder, emptyText }: Pick<CommandProps, \"groups\" | \"placeholder\" | \"emptyText\">) {\n  return (\n    <>\n      <CommandInput placeholder={placeholder} />\n      <CommandList>\n        <CommandEmpty>{emptyText}</CommandEmpty>\n        {groups.map((group, g) => (\n          <React.Fragment key={g}>\n            {g > 0 && !group.heading && <CommandSeparator />}\n            <CommandGroup heading={group.heading}>\n              {group.items.map((item, i) => (\n                <CommandItem\n                  key={i}\n                  value={item.value ?? (typeof item.label === \"string\" ? item.label : undefined)}\n                  keywords={item.keywords}\n                  disabled={item.disabled}\n                  onSelect={item.onSelect}\n                >\n                  {item.icon}\n                  {item.label}\n                  {item.badge ? <span className=\"ms-auto\">{item.badge}</span> : item.shortcut ? <CommandShortcut>{item.shortcut}</CommandShortcut> : null}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </React.Fragment>\n        ))}\n      </CommandList>\n    </>\n  )\n}\n\n/** A searchable list of actions on the page, in one tag: groups of items with icons and shortcuts. */\nfunction Command({ groups, placeholder: placeholderProp, emptyText: emptyTextProp, className, ...props }: CommandProps) {\n  const { t } = useLocale()\n  const placeholder = placeholderProp ?? t(\"search\")\n  const emptyText = emptyTextProp ?? t(\"noResults\")\n  return (\n    <CommandRoot className={cn(\"rounded-lg border shadow-md\", className)} {...props}>\n      <CommandBody groups={groups} placeholder={placeholder} emptyText={emptyText} />\n    </CommandRoot>\n  )\n}\n\ntype CommandDialogProps = Omit<React.ComponentProps<typeof Dialog>, \"title\" | \"children\" | \"footer\" | \"form\"> & {\n  groups: CommandSection[]\n  placeholder?: string\n  emptyText?: React.ReactNode\n  /** Read out when it opens; not shown. */\n  title?: string\n  description?: string\n}\n\n/** A command palette: the same list in a dialog, e.g. on ⌘K. Open it with open / onOpenChange or a trigger. */\nfunction CommandDialog({\n  groups,\n  placeholder: placeholderProp,\n  emptyText: emptyTextProp,\n  title: titleProp,\n  description: descriptionProp,\n  className,\n  ...props\n}: CommandDialogProps) {\n  const { t } = useLocale()\n  const description = descriptionProp ?? t(\"commandDescription\")\n  const title = titleProp ?? t(\"commandTitle\")\n  const emptyText = emptyTextProp ?? t(\"noResults\")\n  const placeholder = placeholderProp ?? t(\"commandPlaceholder\")\n  return (\n    <Dialog\n      title={title}\n      description={description}\n      showCloseButton={false}\n      className={cn(\"top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-lg\", className)}\n      classNames={{ header: \"sr-only\" }}\n      {...props}\n    >\n      <CommandRoot className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2.5\">\n        <CommandBody groups={groups} placeholder={placeholder} emptyText={emptyText} />\n      </CommandRoot>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" cmdk-input-wrapper=\"\" className=\"flex h-10 items-center gap-2 border-b px-3\">\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" aria-hidden />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty data-slot=\"command-empty\" className=\"py-6 text-center text-sm text-muted-foreground\" {...props} />\n}\n\nfunction CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return <CommandPrimitive.Separator data-slot=\"command-separator\" className={cn(\"-mx-1 h-px bg-border\", className)} {...props} />\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"ms-auto flex items-center gap-1 text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandRoot,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n  type CommandProps,\n  type CommandDialogProps,\n  type CommandAction,\n  type CommandSection,\n}\n"}]}