fix: fixed registry issues of the command component

Author: stefan-karger

apps/docs/public/registry/index.json

@@ -128,7 +128,7 @@
       "dialog"
     ],
     "files": [
-      "ui/combobox.tsx"
+      "ui/command.tsx"
     ],
     "type": "ui"
   },

apps/docs/public/registry/ui/command.json

@@ -9,8 +9,8 @@
   ],
   "files": [
     {
-      "name": "combobox.tsx",
-      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { Combobox as ComboboxPrimitive } from \"@kobalte/core\"\nimport { TbCheck, TbSelector } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nconst ComboboxItem: Component<ComboboxPrimitive.ComboboxItemProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <ComboboxPrimitive.Item\n      class={cn(\n        \"relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst ComboboxItemLabel = ComboboxPrimitive.ItemLabel\n\nconst ComboboxItemIndicator: Component<ComboboxPrimitive.ComboboxItemIndicatorProps> = (props) => {\n  const [, rest] = splitProps(props, [\"children\"])\n  return (\n    <ComboboxPrimitive.ItemIndicator {...rest}>\n      {props.children ?? <TbCheck />}\n    </ComboboxPrimitive.ItemIndicator>\n  )\n}\n\nconst ComboboxSection: Component<ComboboxPrimitive.ComboboxSectionProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <ComboboxPrimitive.Section\n      class={cn(\n        \"overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground \",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n// due to the generic typing this needs to be a function\nfunction ComboboxControl<T>(props: ComboboxPrimitive.ComboboxControlProps<T>) {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <ComboboxPrimitive.Control\n      class={cn(\"flex items-center rounded-md border px-3\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nconst ComboboxInput: Component<ComboboxPrimitive.ComboboxInputProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <ComboboxPrimitive.Input\n      class={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect\n\nconst ComboboxTrigger: Component<ComboboxPrimitive.ComboboxTriggerProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\n  return (\n    <ComboboxPrimitive.Trigger class={cn(\"size-4 opacity-50\", props.class)} {...rest}>\n      <ComboboxPrimitive.Icon>{props.children ?? <TbSelector />}</ComboboxPrimitive.Icon>\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nconst ComboboxContent: Component<ComboboxPrimitive.ComboboxContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Content\n        class={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80\",\n          props.class\n        )}\n        {...rest}\n      >\n        <ComboboxPrimitive.Listbox class=\"m-0 p-1\" />\n      </ComboboxPrimitive.Content>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nexport {\n  Combobox,\n  ComboboxItem,\n  ComboboxItemLabel,\n  ComboboxItemIndicator,\n  ComboboxSection,\n  ComboboxControl,\n  ComboboxTrigger,\n  ComboboxInput,\n  ComboboxHiddenSelect,\n  ComboboxContent\n}\n"
+      "name": "command.tsx",
+      "content": "import type { ComponentProps, VoidComponent, VoidProps } from \"solid-js\"\nimport { splitProps, type ParentComponent } from \"solid-js\"\n\nimport type { Dialog as DialogPrimitive } from \"@kobalte/core\"\nimport { Combobox as ComboboxPrimitive } from \"@kobalte/core\"\nimport { TbSearch } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/ui/dialog\"\n\ntype CommandProps<Option, OptGroup> = Omit<\n  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,\n  | \"open\"\n  | \"defaultOpen\"\n  | \"multiple\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"removeOnBackspace\"\n  | \"readOnly\"\n  | \"allowsEmptyCollection\"\n>\n\nconst Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Root\n      // force render list\n      open\n      // @ts-ignore -- prevent select\n      value=\"\"\n      allowsEmptyCollection\n      class={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Control class=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <TbSearch class=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <ComboboxPrimitive.Input\n        cmdk-input=\"\"\n        class={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          local.class\n        )}\n        {...rest}\n      />\n    </ComboboxPrimitive.Control>\n  )\n}\n\nconst CommandList = <Option, OptGroup>(\n  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>\n) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Listbox\n      cmdk-list=\"\"\n      class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden p-1\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"item\"])\n\n  return (\n    <ComboboxPrimitive.Item\n      item={local.item}\n      cmdk-item=\"\"\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemLabel = ComboboxPrimitive.ItemLabel\n\nconst CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Section\n      cmdk-heading=\"\"\n      class={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemShortcut: ParentComponent<ComponentProps<\"span\">> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &\n  CommandProps<Option, OptGroup>\n\nconst CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"children\"])\n\n  return (\n    <Dialog {...rest}>\n      <DialogContent class=\"overflow-hidden p-0\">\n        <Command\n          class=\"[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2\"\n          {...rest}\n        >\n          {local.children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport {\n  Command,\n  CommandInput,\n  CommandList,\n  CommandItem,\n  CommandItemLabel,\n  CommandItemShortcut,\n  CommandHeading,\n  CommandDialog\n}\n"
     }
   ],
   "type": "ui"

apps/docs/src/__registry__/index.tsx

@@ -95,7 +95,7 @@ export const Index: Record<string, any> = {
     type: "ui",
     registryDependencies: ["dialog"],
     component: lazy(() => import("~/registry/ui/command")),
-    files: ["registry/ui/combobox.tsx"],
+    files: ["registry/ui/command.tsx"],
   },
   "context-menu": {
     name: "context-menu",

apps/docs/src/registry/example/command-demo.tsx

@@ -8,8 +8,8 @@ import {
   CommandInput,
   CommandItem,
   CommandItemLabel,
-  CommandList,
-  CommandShortcut
+  CommandItemShortcut,
+  CommandList
 } from "~/registry/ui/command"
 
 type ListOption = {
@@ -53,19 +53,19 @@ export default function CommandDemo() {
           icon: <TbUser class="mr-2 size-4" />,
           label: "Profile",
           value: "Profile",
-          shortcut: <CommandShortcut>⌘P</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘P</CommandItemShortcut>
         },
         {
           icon: <TbMail class="mr-2 size-4" />,
           label: "Mail",
           value: "Mail",
-          shortcut: <CommandShortcut>⌘B</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘B</CommandItemShortcut>
         },
         {
           icon: <TbSettings class="mr-2 size-4" />,
           label: "Setting",
           value: "Setting",
-          shortcut: <CommandShortcut>⌘S</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘S</CommandItemShortcut>
         }
       ]
     }

apps/docs/src/registry/example/command-dialog-demo.tsx

@@ -8,8 +8,8 @@ import {
   CommandInput,
   CommandItem,
   CommandItemLabel,
-  CommandList,
-  CommandShortcut
+  CommandItemShortcut,
+  CommandList
 } from "~/registry/ui/command"
 
 type ListOption = {
@@ -53,19 +53,19 @@ export default function CommandDialogDemo() {
           icon: <TbUser class="mr-2 size-4" />,
           label: "Profile",
           value: "Profile",
-          shortcut: <CommandShortcut>⌘P</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘P</CommandItemShortcut>
         },
         {
           icon: <TbMail class="mr-2 size-4" />,
           label: "Mail",
           value: "Mail",
-          shortcut: <CommandShortcut>⌘B</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘B</CommandItemShortcut>
         },
         {
           icon: <TbSettings class="mr-2 size-4" />,
           label: "Setting",
           value: "Setting",
-          shortcut: <CommandShortcut>⌘S</CommandShortcut>
+          shortcut: <CommandItemShortcut>⌘S</CommandItemShortcut>
         }
       ]
     }

apps/docs/src/registry/registry.ts

@@ -76,7 +76,7 @@ const ui: Registry = [
     type: "ui",
     dependencies: ["@kobalte/core", "solid-icons"],
     registryDependencies: ["dialog"],
-    files: ["ui/combobox.tsx"]
+    files: ["ui/command.tsx"]
   },
   {
     name: "context-menu",

apps/docs/src/registry/ui/command.tsx

@@ -8,8 +8,6 @@ import { TbSearch } from "solid-icons/tb"
 import { cn } from "~/lib/utils"
 import { Dialog, DialogContent } from "~/registry/ui/dialog"
 
-export const CommandItemLabel = ComboboxPrimitive.ItemLabel
-
 type CommandProps<Option, OptGroup> = Omit<
   ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,
   | "open"
@@ -22,7 +20,7 @@ type CommandProps<Option, OptGroup> = Omit<
   | "allowsEmptyCollection"
 >
 
-export const Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {
+const Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
@@ -41,21 +39,7 @@ export const Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>)
   )
 }
 
-export const CommandList = <Option, OptGroup>(
-  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>
-) => {
-  const [local, rest] = splitProps(props, ["class"])
-
-  return (
-    <ComboboxPrimitive.Listbox
-      cmdk-list=""
-      class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden p-1", local.class)}
-      {...rest}
-    />
-  )
-}
-
-export const CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {
+const CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
@@ -73,7 +57,21 @@ export const CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> =
   )
 }
 
-export const CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {
+const CommandList = <Option, OptGroup>(
+  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>
+) => {
+  const [local, rest] = splitProps(props, ["class"])
+
+  return (
+    <ComboboxPrimitive.Listbox
+      cmdk-list=""
+      class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden p-1", local.class)}
+      {...rest}
+    />
+  )
+}
+
+const CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "item"])
 
   return (
@@ -89,27 +87,29 @@ export const CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> =
   )
 }
 
-export const CommandShortcut: ParentComponent<ComponentProps<"span">> = (props) => {
+const CommandItemLabel = ComboboxPrimitive.ItemLabel
+
+const CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <span
-      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
+    <ComboboxPrimitive.Section
+      cmdk-heading=""
+      class={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2",
+        local.class
+      )}
       {...rest}
     />
   )
 }
 
-export const CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {
+const CommandItemShortcut: ParentComponent<ComponentProps<"span">> = (props) => {
   const [local, rest] = splitProps(props, ["class"])
 
   return (
-    <ComboboxPrimitive.Section
-      cmdk-heading=""
-      class={cn(
-        "px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2",
-        local.class
-      )}
+    <span
+      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
       {...rest}
     />
   )
@@ -118,14 +118,30 @@ export const CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionPr
 type CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &
   CommandProps<Option, OptGroup>
 
-export const CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {
+const CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {
   const [local, rest] = splitProps(props, ["children"])
 
   return (
     <Dialog {...rest}>
       <DialogContent class="overflow-hidden p-0">
-        <Command {...rest}>{local.children}</Command>
+        <Command
+          class="[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2"
+          {...rest}
+        >
+          {local.children}
+        </Command>
       </DialogContent>
     </Dialog>
   )
 }
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandItemLabel,
+  CommandItemShortcut,
+  CommandHeading,
+  CommandDialog
+}