@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/command.json

@@ -21,6 +21,842 @@
     "useFilter",
     "useListCollection"
   ],
+  "parts": [
+    {
+      "name": "Command",
+      "props": [
+        {
+          "name": "collection",
+          "type": "ListCollection<T>",
+          "required": true,
+          "description": "The collection of items",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial value of the highlighted item when opened.\nUse when you don't need to control the highlighted value of the listbox.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "default": "[]",
+          "description": "The initial default value of the listbox when rendered.\nUse when you don't need to control the value of the listbox.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "deselectable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to disallow empty selection",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the listbox is disabled",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "disallowSelectAll",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to disallow selecting all items when `meta+a` is pressed",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled key of the highlighted item",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the listbox. Useful for composition.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to loop the keyboard navigation through the options",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<T>) => void)",
+          "required": false,
+          "description": "The callback fired when the highlighted item changes.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((details: ValueChangeDetails<T>) => void)",
+          "required": false,
+          "description": "The callback fired when the selected item changes.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "default": "\"vertical\"",
+          "description": "The orientation of the listbox.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "selectionMode",
+          "type": "SelectionMode",
+          "required": false,
+          "default": "\"single\"",
+          "description": "How multiple selection should behave in the listbox.\n\n- `single`: The user can select a single item.\n- `multiple`: The user can select multiple items without using modifier keys.\n- `extended`: The user can select multiple items by using modifier keys.",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "selectOnHighlight",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to select the item when it is highlighted",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "typeahead",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to enable typeahead on the listbox",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "The controlled keys of the selected items",
+          "from": "@zag-js/listbox"
+        }
+      ]
+    },
+    {
+      "name": "CommandContext",
+      "props": [
+        {
+          "name": "children",
+          "type": "(context: UseListboxContext<unknown>) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandDialog",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "default": "\"Search for a command to run...\"",
+          "description": "Description text.",
+          "from": "arkcn"
+        },
+        {
+          "name": "showCloseButton",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Render the close button.",
+          "from": "arkcn"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "\"Command Palette\"",
+          "description": "Title text.",
+          "from": "arkcn"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "description": "Human readable label for the dialog, in event the dialog title is not rendered",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the dialog when the escape key is pressed",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "closeOnInteractOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to close the dialog when the outside is clicked",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "The initial open state of the dialog when rendered.\nUse when you don't need to control the open state of the dialog.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "defaultTriggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial active trigger value when rendered.\nUse when you don't need to control the active trigger value.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "finalFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the dialog is closed",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "hideMode",
+          "type": "HideMode",
+          "required": false,
+          "default": "'display-none'",
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "description": "The unique identifier of the machine.",
+          "from": "@zag-js/types"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the dialog. Useful for composition.",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "immediate",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to synchronize the present change immediately or defer it to the next frame",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "initialFocusEl",
+          "type": "(() => MaybeElement)",
+          "required": false,
+          "description": "Element to receive focus when the dialog is opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "modal",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to prevent pointer interaction outside the element and hide all content below it",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onEscapeKeyDown",
+          "type": "((event: KeyboardEvent) => void)",
+          "required": false,
+          "description": "Function called when the escape key is pressed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onExitComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the closed state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "onFocusOutside",
+          "type": "((event: FocusOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the focus is moved outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onInteractOutside",
+          "type": "((event: InteractOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when an interaction happens outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((details: OpenChangeDetails) => void)",
+          "required": false,
+          "description": "Function to call when the dialog's open state changes",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "onPointerDownOutside",
+          "type": "((event: PointerDownOutsideEvent) => void)",
+          "required": false,
+          "description": "Function called when the pointer is pressed down outside the component",
+          "from": "@zag-js/interact-outside"
+        },
+        {
+          "name": "onRequestDismiss",
+          "type": "((event: LayerDismissEvent) => void)",
+          "required": false,
+          "description": "Function called when this layer is closed due to a parent layer being closed",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "onTriggerValueChange",
+          "type": "((details: TriggerValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function to call when the active trigger changes",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state of the dialog",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "persistentElements",
+          "type": "(() => Element | null)[]",
+          "required": false,
+          "description": "Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event",
+          "from": "@zag-js/dismissable"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "preventScroll",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to prevent scrolling behind the dialog when it's opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "restoreFocus",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to restore focus to the element that had focus before the dialog was opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "role",
+          "type": "\"dialog\" | \"alertdialog\"",
+          "required": false,
+          "default": "\"dialog\"",
+          "description": "The dialog's role",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "trapFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to trap focus inside the dialog when it's opened",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "triggerValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled active trigger value",
+          "from": "@zag-js/dialog"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandEmpty",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandGroup",
+      "props": [
+        {
+          "name": "heading",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Group heading text.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandGroupLabel",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandInput",
+      "props": [
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "required": false,
+          "description": "Called with the input text on every change. Wire it to your collection's `filter`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "autoHighlight",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to automatically highlight the item when typing",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "keyboardPriority",
+          "type": "\"navigate\" | \"caret\"",
+          "required": false,
+          "default": "\"caret\"",
+          "description": "Determines how keyboard conflicts in the input are resolved.\n- \"caret\": keep native text-editing behavior\n- \"navigate\": forward supported keys to listbox navigation",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandItem",
+      "props": [
+        {
+          "name": "item",
+          "type": "any",
+          "required": false,
+          "description": "The collection item. Falls back to `value` for string collections.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onSelect",
+          "type": "SelectHandler",
+          "required": false,
+          "description": "Called with the item's value when it is selected by click or Enter.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "highlightOnHover",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to highlight the item on hover",
+          "from": "@zag-js/listbox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandItemIndicator",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandItemText",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandList",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandSeparator",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommandShortcut",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -33,7 +869,7 @@
   "files": [
     {
       "path": "components/ui/command.tsx",
-      "content": "import * as React from \"react\"\nimport {\n  Listbox as CommandPrimitive,\n  createListCollection,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n} from \"@ark-ui/react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ui/dialog\"\nimport { InputGroup, InputGroupAddon } from \"@/components/ui/input-group\"\nimport { SearchIcon, CheckIcon } from \"lucide-react\"\n\n/**\n * Backed by Ark UI's Listbox. Ark has no built-in fuzzy filter: pass a\n * `collection` and filter it yourself (see `useListCollection` and\n * `useFilter`, re-exported below), wiring `CommandInput`'s `onValueChange`\n * to the collection's `filter`.\n */\n\ntype SelectHandler = (value: string) => void\n\nconst CommandSelectContext = React.createContext<{\n  register: (value: string, handler: SelectHandler) => () => void\n} | null>(null)\n\nfunction Command<T extends CollectionItem>({\n  className,\n  selectionMode = \"single\",\n  onSelect,\n  defaultHighlightedValue,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Root<T>>) {\n  // Like cmdk, highlight the first item on mount so Enter works immediately.\n  const initialHighlight = defaultHighlightedValue ?? props.collection.firstValue\n  const handlers = React.useRef(new Map<string, SelectHandler>())\n  const register = React.useCallback((value: string, handler: SelectHandler) => {\n    handlers.current.set(value, handler)\n    return () => {\n      handlers.current.delete(value)\n    }\n  }, [])\n  const ctx = React.useMemo(() => ({ register }), [register])\n  return (\n    <CommandSelectContext.Provider value={ctx}>\n      <CommandPrimitive.Root\n        data-slot=\"command\"\n        selectionMode={selectionMode}\n        defaultHighlightedValue={initialHighlight}\n        onSelect={(details) => {\n          handlers.current.get(details.value)?.(details.value)\n          onSelect?.(details)\n        }}\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </CommandSelectContext.Provider>\n  )\n}\n\nfunction CommandContext({ ...props }: React.ComponentProps<typeof CommandPrimitive.Context>) {\n  return <CommandPrimitive.Context {...props} />\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className={cn(\"overflow-hidden rounded-xl! p-0\", className)} showCloseButton={showCloseButton}>\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  autoHighlight = true,\n  onValueChange,\n  onChange,\n  onFocus,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input> & {\n  /** Called with the input text on every change. Wire it to your collection's `filter`. */\n  onValueChange?: (value: string) => void\n}) {\n  const settled = React.useRef(false)\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          autoHighlight={autoHighlight}\n          onFocus={(event) => {\n            onFocus?.(event)\n            // When a Dialog focuses this input in the same tick it mounts, the\n            // listbox machine has not entered its ready state yet and drops the\n            // focus event, leaving the highlighted item invisible. Re-issue the\n            // focus once, on the next tick, so the listbox registers it.\n            if (settled.current) return\n            settled.current = true\n            const el = event.currentTarget\n            setTimeout(() => {\n              if (document.activeElement !== el) return\n              el.blur()\n              el.focus({ preventScroll: true })\n            }, 0)\n          }}\n          className={cn(\"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\", className)}\n          onChange={(event) => {\n            onChange?.(event)\n            onValueChange?.(event.currentTarget.value)\n          }}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Content>) {\n  return (\n    <CommandPrimitive.Content\n      data-slot=\"command-list\"\n      className={cn(\"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.ItemGroup> & {\n  heading?: React.ReactNode\n}) {\n  return (\n    <CommandPrimitive.ItemGroup\n      data-slot=\"command-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground\", className)}\n      {...props}\n    >\n      {heading != null && <CommandGroupLabel>{heading}</CommandGroupLabel>}\n      {children}\n    </CommandPrimitive.ItemGroup>\n  )\n}\n\nfunction CommandGroupLabel({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.ItemGroupLabel>) {\n  return (\n    <CommandPrimitive.ItemGroupLabel\n      data-slot=\"command-group-label\"\n      className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  item,\n  value,\n  onSelect,\n  ...props\n}: Omit<React.ComponentProps<typeof CommandPrimitive.Item>, \"item\" | \"onSelect\"> & {\n  /** The collection item. Falls back to `value` for string collections. */\n  item?: CollectionItem\n  value?: string\n  /** Called with the item's value when it is selected by click or Enter. */\n  onSelect?: SelectHandler\n}) {\n  const ctx = React.useContext(CommandSelectContext)\n  const resolvedItem = item ?? value\n  const itemValue =\n    typeof resolvedItem === \"string\" ? resolvedItem : ((resolvedItem as { value?: string } | undefined)?.value ?? value)\n  React.useEffect(() => {\n    if (!ctx || !onSelect || itemValue == null) return\n    return ctx.register(itemValue, onSelect)\n  }, [ctx, onSelect, itemValue])\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      item={resolvedItem}\n      className={cn(\n        \"group/command-item 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! data-highlighted:bg-muted data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-highlighted:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CommandItemIndicator>\n        <CheckIcon />\n      </CommandItemIndicator>\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandItemText({ ...props }: React.ComponentProps<typeof CommandPrimitive.ItemText>) {\n  return <CommandPrimitive.ItemText data-slot=\"command-item-text\" {...props} />\n}\n\nfunction CommandItemIndicator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.ItemIndicator>) {\n  return (\n    <CommandPrimitive.ItemIndicator\n      data-slot=\"command-item-indicator\"\n      className={cn(\"ml-auto group-has-data-[slot=command-shortcut]/command-item:hidden\", className)}\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(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-highlighted/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandContext,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandItemIndicator,\n  CommandItemText,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  createListCollection,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n}\n"
+      "content": "import * as React from \"react\"\nimport {\n  Listbox as CommandPrimitive,\n  createListCollection,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n} from \"@ark-ui/react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ui/dialog\"\nimport { InputGroup, InputGroupAddon } from \"@/components/ui/input-group\"\nimport { SearchIcon, CheckIcon } from \"lucide-react\"\n\n/**\n * Backed by Ark UI's Listbox. Ark has no built-in fuzzy filter: pass a\n * `collection` and filter it yourself (see `useListCollection` and\n * `useFilter`, re-exported below), wiring `CommandInput`'s `onValueChange`\n * to the collection's `filter`.\n */\n\ntype SelectHandler = (value: string) => void\n\nconst CommandSelectContext = React.createContext<{\n  register: (value: string, handler: SelectHandler) => () => void\n} | null>(null)\n\nfunction Command<T extends CollectionItem>({\n  className,\n  selectionMode = \"single\",\n  onSelect,\n  defaultHighlightedValue,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Root<T>>) {\n  // Like cmdk, highlight the first item on mount so Enter works immediately.\n  const initialHighlight = defaultHighlightedValue ?? props.collection.firstValue\n  const handlers = React.useRef(new Map<string, SelectHandler>())\n  const register = React.useCallback((value: string, handler: SelectHandler) => {\n    handlers.current.set(value, handler)\n    return () => {\n      handlers.current.delete(value)\n    }\n  }, [])\n  const ctx = React.useMemo(() => ({ register }), [register])\n  return (\n    <CommandSelectContext.Provider value={ctx}>\n      <CommandPrimitive.Root\n        data-slot=\"command\"\n        selectionMode={selectionMode}\n        defaultHighlightedValue={initialHighlight}\n        onSelect={(details) => {\n          handlers.current.get(details.value)?.(details.value)\n          onSelect?.(details)\n        }}\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </CommandSelectContext.Provider>\n  )\n}\n\nfunction CommandContext({ ...props }: React.ComponentProps<typeof CommandPrimitive.Context>) {\n  return <CommandPrimitive.Context {...props} />\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogContent className={cn(\"overflow-hidden rounded-xl! p-0\", className)} showCloseButton={showCloseButton}>\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  autoHighlight = true,\n  onValueChange,\n  onChange,\n  onFocus,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input> & {\n  /** Called with the input text on every change. Wire it to your collection's `filter`. */\n  onValueChange?: (value: string) => void\n}) {\n  const settled = React.useRef(false)\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          autoHighlight={autoHighlight}\n          onFocus={(event) => {\n            onFocus?.(event)\n            // When a Dialog focuses this input in the same tick it mounts, the\n            // listbox machine has not entered its ready state yet and drops the\n            // focus event, leaving the highlighted item invisible. Re-issue the\n            // focus once, on the next tick, so the listbox registers it.\n            if (settled.current) return\n            settled.current = true\n            const el = event.currentTarget\n            setTimeout(() => {\n              if (document.activeElement !== el) return\n              el.blur()\n              el.focus({ preventScroll: true })\n            }, 0)\n          }}\n          className={cn(\"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\", className)}\n          onChange={(event) => {\n            onChange?.(event)\n            onValueChange?.(event.currentTarget.value)\n          }}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Content>) {\n  return (\n    <CommandPrimitive.Content\n      data-slot=\"command-list\"\n      className={cn(\"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.ItemGroup> & {\n  /** Group heading text. */\n  heading?: React.ReactNode\n}) {\n  return (\n    <CommandPrimitive.ItemGroup\n      data-slot=\"command-group\"\n      className={cn(\"overflow-hidden p-1 text-foreground\", className)}\n      {...props}\n    >\n      {heading != null && <CommandGroupLabel>{heading}</CommandGroupLabel>}\n      {children}\n    </CommandPrimitive.ItemGroup>\n  )\n}\n\nfunction CommandGroupLabel({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.ItemGroupLabel>) {\n  return (\n    <CommandPrimitive.ItemGroupLabel\n      data-slot=\"command-group-label\"\n      className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  item,\n  value,\n  onSelect,\n  ...props\n}: Omit<React.ComponentProps<typeof CommandPrimitive.Item>, \"item\" | \"onSelect\"> & {\n  /** The collection item. Falls back to `value` for string collections. */\n  item?: CollectionItem\n  value?: string\n  /** Called with the item's value when it is selected by click or Enter. */\n  onSelect?: SelectHandler\n}) {\n  const ctx = React.useContext(CommandSelectContext)\n  const resolvedItem = item ?? value\n  const itemValue =\n    typeof resolvedItem === \"string\" ? resolvedItem : ((resolvedItem as { value?: string } | undefined)?.value ?? value)\n  React.useEffect(() => {\n    if (!ctx || !onSelect || itemValue == null) return\n    return ctx.register(itemValue, onSelect)\n  }, [ctx, onSelect, itemValue])\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      item={resolvedItem}\n      className={cn(\n        \"group/command-item 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! data-highlighted:bg-muted data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-highlighted:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CommandItemIndicator>\n        <CheckIcon />\n      </CommandItemIndicator>\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandItemText({ ...props }: React.ComponentProps<typeof CommandPrimitive.ItemText>) {\n  return <CommandPrimitive.ItemText data-slot=\"command-item-text\" {...props} />\n}\n\nfunction CommandItemIndicator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.ItemIndicator>) {\n  return (\n    <CommandPrimitive.ItemIndicator\n      data-slot=\"command-item-indicator\"\n      className={cn(\"ml-auto group-has-data-[slot=command-shortcut]/command-item:hidden\", className)}\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(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-highlighted/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandContext,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandItemIndicator,\n  CommandItemText,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n  createListCollection,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n}\n"
     }
   ],
   "docs": "## Porting rules\n- **Feature parity** with the shadcn original: same exported names, same props surface\n  where Ark supports it, same visual result, same variants.\n- **Ark's tree wins** where the structure differs (e.g. `Positioner` wrappers,\n  `Control`/`HiddenInput` splits, `ItemGroup`/`ItemGroupLabel`, `Backdrop` vs `Overlay`).\n  Export the extra Ark parts as their own composable pieces; do not fold them away.\n- **Stay compositional.** Every part is its own exported component. No collapsing\n  parts into a single \"smart\" component, no dropping sub-parts to simplify.\n- **Styling:** `cn` from `@/lib/utils` and `cva` from `class-variance-authority`.\n  Style state via Ark's data attributes (`data-state`, `data-open`, `data-disabled`,\n  `data-highlighted`, `data-placement`, `data-orientation`, ...). Keep `data-slot`\n  attributes on every part, as shadcn does.\n- `command.tsx` runs on Ark's Listbox and `drawer.tsx` on Ark's Drawer; `cmdk`, `vaul`,\n  `radix-ui`, `@base-ui/react`, and every shadcn package (`shadcn` CLI, `@shadcn/react`,\n  `cn`) are removed. Do not reintroduce them. `cn` is clsx + tailwind-merge in\n  `src/lib/utils.ts`. Base variants, keyframes, and utilities live in `src/index.css`\n  (keyframes at the end of the `@theme inline` block); there is no `components.json`.\n- `questionnaire.tsx` and `message-scroller.tsx` were removed because they depended on\n  the `@shadcn/react` runtime. Rebuild from scratch if they are wanted.\n- Components with no Ark equivalent (calendar, carousel, chart, resizable, input-otp,\n  sonner/toast) keep their current libraries. Separator, Label, AspectRatio, Direction\n  are plain React."