@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/combobox.json

@@ -32,6 +32,1128 @@
     "useListCollection",
     "ComboboxItemContext"
   ],
+  "parts": [
+    {
+      "name": "Combobox",
+      "props": [
+        {
+          "name": "anchor",
+          "type": "RefObject<HTMLElement | null>",
+          "required": false,
+          "description": "Anchor the popup to another element, e.g. a `ComboboxChips` container.",
+          "from": "arkcn"
+        },
+        {
+          "name": "collection",
+          "type": "ListCollection<T>",
+          "required": true,
+          "description": "The collection of items",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "allowCustomValue",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow typing custom values in the input",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "alwaysSubmitOnEnter",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to always submit on Enter key press, even if popup is open.\nUseful for single-field autocomplete forms where Enter should submit the form.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to autofocus the input on mount",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to close the combobox when an item is selected.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "composite",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether the combobox is a composed with other composite widgets like tabs",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The initial highlighted value of the combobox when rendered.\nUse when you don't need to control the highlighted value of the combobox.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "defaultInputValue",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "description": "The initial value of the combobox's input when rendered.\nUse when you don't need to control the value of the combobox's input.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "description": "The initial open state of the combobox when rendered.\nUse when you don't need to control the open state of the combobox.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "defaultValue",
+          "type": "string[]",
+          "required": false,
+          "default": "[]",
+          "description": "The initial value of the combobox's selected items when rendered.\nUse when you don't need to control the value of the combobox's selected items.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the combobox is disabled",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "disableLayer",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to disable registering this a dismissable layer",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "required": false,
+          "description": "The associate form of the combobox.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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": "highlightedValue",
+          "type": "string | null",
+          "required": false,
+          "description": "The controlled highlighted value of the combobox",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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 combobox. Useful for composition.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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": "inputBehavior",
+          "type": "\"none\" | \"autohighlight\" | \"autocomplete\"",
+          "required": false,
+          "default": "\"none\"",
+          "description": "Defines the auto-completion behavior of the combobox.\n\n- `autohighlight`: The first focused item is highlighted as the user types\n- `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "inputValue",
+          "type": "string",
+          "required": false,
+          "description": "The controlled value of the combobox's input",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the combobox is invalid",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "lazyMount",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to enable lazy mounting",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "loopFocus",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to loop the keyboard navigation through the items",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether to allow multiple selection.\n\n**Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.\nIt is recommended to render the selected items in a separate container.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "description": "The `name` attribute of the combobox's input. Useful for form submission",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "navigate",
+          "type": "((details: NavigateDetails) => void) | null",
+          "required": false,
+          "description": "Function to navigate to the selected item",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "onEnterComplete",
+          "type": "VoidFunction",
+          "required": false,
+          "description": "Function called when the animation ends in the open state",
+          "from": "@zag-js/presence"
+        },
+        {
+          "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": "onHighlightChange",
+          "type": "((details: HighlightChangeDetails<T>) => void)",
+          "required": false,
+          "description": "Function called when an item is highlighted using the pointer\nor keyboard navigation.",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "onInputValueChange",
+          "type": "((details: InputValueChangeDetails) => void)",
+          "required": false,
+          "description": "Function called when the input's value changes",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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 called when the popup is opened",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "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": "onSelect",
+          "type": "((details: SelectionDetails) => void)",
+          "required": false,
+          "description": "Function called when an item is selected",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((details: ValueChangeDetails<T>) => void)",
+          "required": false,
+          "description": "Function called when a new item is selected",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "The controlled open state of the combobox",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "openOnChange",
+          "type": "boolean | ((details: InputValueChangeDetails) => boolean)",
+          "required": false,
+          "default": "true",
+          "description": "Whether to show the combobox when the input value changes",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "openOnClick",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to open the combobox popup on initial click on the input",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "openOnKeyPress",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to open the combobox on arrow key press",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "description": "The placeholder text of the combobox's input",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "positioning",
+          "type": "PositioningOptions",
+          "required": false,
+          "default": "{ placement: \"bottom-start\" }",
+          "description": "The positioning options to dynamically position the menu",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "present",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the node is present (controlled by the user)",
+          "from": "@zag-js/presence"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the combobox is readonly. This puts the combobox in a \"non-editable\" mode\nbut the user can still interact with it",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the combobox is required",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "scrollToIndexFn",
+          "type": "((details: ScrollToIndexDetails) => void)",
+          "required": false,
+          "description": "Function to scroll to a specific index",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "selectionBehavior",
+          "type": "\"clear\" | \"replace\" | \"preserve\"",
+          "required": false,
+          "default": "\"replace\"",
+          "description": "The behavior of the combobox input when an item is selected\n\n- `replace`: The selected item string is set as the input value\n- `clear`: The input value is cleared\n- `preserve`: The input value is preserved",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "skipAnimationOnMount",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether to allow the initial presence animation.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        },
+        {
+          "name": "translations",
+          "type": "IntlTranslations",
+          "required": false,
+          "description": "Specifies the localized strings that identifies the accessibility elements and their states",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to unmount on exit.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "value",
+          "type": "string[]",
+          "required": false,
+          "description": "The controlled value of the combobox's selected items",
+          "from": "@zag-js/combobox"
+        }
+      ]
+    },
+    {
+      "name": "ComboboxChip",
+      "props": [
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "description": "The selected value this chip represents.",
+          "from": "arkcn"
+        },
+        {
+          "name": "showRemove",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Render the remove button on the chip.",
+          "from": "arkcn"
+        },
+        {
+          "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": "ComboboxChips",
+      "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": "ComboboxChipsInput",
+      "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": "ComboboxClear",
+      "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": "ComboboxCollection",
+      "props": [
+        {
+          "name": "children",
+          "type": "(item: T, index: number) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        }
+      ]
+    },
+    {
+      "name": "ComboboxContent",
+      "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": "ComboboxContext",
+      "props": [
+        {
+          "name": "children",
+          "type": "(context: UseComboboxContext<unknown>) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    },
+    {
+      "name": "ComboboxControl",
+      "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": "ComboboxEmpty",
+      "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": "ComboboxGroup",
+      "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": "ComboboxInput",
+      "props": [
+        {
+          "name": "showClear",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Render the clear button in the control.",
+          "from": "arkcn"
+        },
+        {
+          "name": "showTrigger",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Render the open/close trigger in the control.",
+          "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": "ComboboxItem",
+      "props": [
+        {
+          "name": "item",
+          "type": "any",
+          "required": false,
+          "description": "The collection item. Falls back to `value` for string collections.",
+          "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": "persistFocus",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether hovering outside should clear the highlighted state",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "ComboboxItemIndicator",
+      "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": "ComboboxItemText",
+      "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": "ComboboxLabel",
+      "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": "ComboboxList",
+      "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": "ComboboxPositioner",
+      "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": "ComboboxRootLabel",
+      "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": "ComboboxSeparator",
+      "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": "ComboboxTrigger",
+      "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": "focusable",
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the trigger is focusable",
+          "from": "@zag-js/combobox"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "ComboboxValue",
+      "props": [
+        {
+          "name": "placeholder",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Text shown while there is no value.",
+          "from": "arkcn"
+        },
+        {
+          "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": "ComboboxItemContext",
+      "props": [
+        {
+          "name": "children",
+          "type": "(context: UseComboboxItemContext) => ReactNode",
+          "required": true,
+          "description": "Content rendered inside the part.",
+          "from": "@ark-ui/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -44,7 +1166,7 @@
   "files": [
     {
       "path": "components/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Combobox as ComboboxPrimitive,\n  Portal as PortalPrimitive,\n  createListCollection,\n  useComboboxContext,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n} from \"@ark-ui/react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupTrigger, InputGroupInput } from \"@/components/ui/input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\n\nfunction Combobox<T extends CollectionItem>({\n  positioning,\n  anchor,\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Root<T>> & {\n  /** Anchor the popup to another element, e.g. a `ComboboxChips` container. */\n  anchor?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <ComboboxPrimitive.Root\n      data-slot=\"combobox\"\n      positioning={{\n        placement: \"bottom-start\",\n        gutter: 6,\n        sameWidth: true,\n        ...(anchor ? { getAnchorElement: () => anchor.current } : {}),\n        ...positioning,\n      }}\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxContext({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.Context>) {\n  return <ComboboxPrimitive.Context {...props} />\n}\n\nfunction ComboboxRootLabel({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Label>) {\n  return (\n    <ComboboxPrimitive.Label\n      data-slot=\"combobox-root-label\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxControl({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.Control>) {\n  return <ComboboxPrimitive.Control data-slot=\"combobox-control\" {...props} />\n}\n\n/**\n * Ark has no value-text part for Combobox. Renders the selected items as\n * text, or `placeholder` when nothing is selected.\n */\nfunction ComboboxValue({\n  placeholder,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & { placeholder?: React.ReactNode }) {\n  const combobox = useComboboxContext()\n  return (\n    <span data-slot=\"combobox-value\" data-placeholder-shown={combobox.hasSelectedItems ? undefined : \"\"} {...props}>\n      {children ?? (combobox.hasSelectedItems ? combobox.valueAsString : placeholder)}\n    </span>\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Trigger>, \"id\">) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ClearTrigger>) {\n  const combobox = useComboboxContext()\n  // Match Base UI: unmount when there is nothing to clear, so the trigger\n  // button (hidden via `has-data-[slot=combobox-clear]`) shows again.\n  if (!combobox.hasSelectedItems && !combobox.inputValue) return null\n  return (\n    <ComboboxPrimitive.ClearTrigger data-slot=\"combobox-clear\" className={cn(className)} asChild {...props}>\n      <InputGroupTrigger variant=\"ghost\" size=\"icon-xs\">\n        <XIcon className=\"pointer-events-none\" />\n      </InputGroupTrigger>\n    </ComboboxPrimitive.ClearTrigger>\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Input>, \"id\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Control asChild>\n      <InputGroup className={cn(\"w-auto\", className)}>\n        <ComboboxPrimitive.Input asChild disabled={disabled} {...props}>\n          <InputGroupInput />\n        </ComboboxPrimitive.Input>\n        <InputGroupAddon align=\"inline-end\">\n          {showTrigger && (\n            <InputGroupTrigger\n              size=\"icon-xs\"\n              variant=\"ghost\"\n              asChild\n              data-slot=\"input-group-trigger\"\n              className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n              disabled={disabled}\n            >\n              <ComboboxTrigger />\n            </InputGroupTrigger>\n          )}\n          {showClear && <ComboboxClear disabled={disabled} />}\n        </InputGroupAddon>\n        {children}\n      </InputGroup>\n    </ComboboxPrimitive.Control>\n  )\n}\n\nfunction ComboboxPositioner({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Positioner>) {\n  return (\n    <ComboboxPrimitive.Positioner\n      data-slot=\"combobox-positioner\"\n      className={cn(\"isolate [--z-index:50]\", className)}\n      {...props}\n    />\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxContent({ className, ...props }: Omit<React.ComponentProps<typeof ComboboxPrimitive.Content>, \"id\">) {\n  return (\n    <PortalPrimitive>\n      <ComboboxPositioner>\n        <ComboboxPrimitive.Content\n          data-slot=\"combobox-content\"\n          className={cn(\n            \"group/combobox-content relative z-50 max-h-(--available-height) w-(--reference-width) max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPositioner>\n    </PortalPrimitive>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.List>) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)-(--spacing(9))),calc(var(--available-height)-(--spacing(9))))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  item,\n  value,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Item>, \"item\"> & {\n  /** The collection item. Falls back to `value` for string collections. */\n  item?: CollectionItem\n  value?: string\n}) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      item={item ?? value}\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxItemIndicator>\n        <CheckIcon className=\"pointer-events-none\" />\n      </ComboboxItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxItemText({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemText>) {\n  return <ComboboxPrimitive.ItemText data-slot=\"combobox-item-text\" {...props} />\n}\n\nfunction ComboboxItemIndicator({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>) {\n  return (\n    <ComboboxPrimitive.ItemIndicator\n      data-slot=\"combobox-item-indicator\"\n      className={cn(\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemGroup>) {\n  return <ComboboxPrimitive.ItemGroup data-slot=\"combobox-group\" className={cn(className)} {...props} />\n}\n\nfunction ComboboxLabel({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemGroupLabel>) {\n  return (\n    <ComboboxPrimitive.ItemGroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Renders every item in the root's collection through a render function.\n * Ark has no Collection part; this reads the collection from context.\n */\nfunction ComboboxCollection<T extends CollectionItem = CollectionItem>({\n  children,\n}: {\n  children: (item: T, index: number) => React.ReactNode\n}) {\n  const combobox = useComboboxContext()\n  const items = combobox.collection.items as T[]\n  return (\n    <React.Fragment>\n      {items.map((item, index) => (\n        <React.Fragment key={combobox.collection.getItemValue(item) ?? index}>{children(item, index)}</React.Fragment>\n      ))}\n    </React.Fragment>\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"flex w-full justify-center py-2 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Chips for `multiple` comboboxes. Ark has no chip parts; these read the\n * selected values from context and remove them via `clearValue`.\n */\nfunction ComboboxChips({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Control>) {\n  return (\n    <ComboboxPrimitive.Control\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  value,\n  showRemove = true,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** The selected value this chip represents. */\n  value: string\n  showRemove?: boolean\n}) {\n  const combobox = useComboboxContext()\n  return (\n    <div\n      data-slot=\"combobox-chip\"\n      data-value={value}\n      className={cn(\n        \"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          data-slot=\"combobox-chip-remove\"\n          aria-label={`Remove ${value}`}\n          disabled={combobox.disabled}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          onClick={() => combobox.clearValue(value)}\n        >\n          <XIcon className=\"pointer-events-none\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nfunction ComboboxChipsInput({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\n/** Render-prop access to one item's state (`{ selected, highlighted, disabled, ... }`). */\nfunction ComboboxItemContext({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemContext>) {\n  return <ComboboxPrimitive.ItemContext {...props} />\n}\n\nexport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxContext,\n  ComboboxControl,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n  ComboboxItemText,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxPositioner,\n  ComboboxRootLabel,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  createListCollection,\n  useComboboxAnchor,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n  ComboboxItemContext,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Combobox as ComboboxPrimitive,\n  Portal as PortalPrimitive,\n  createListCollection,\n  useComboboxContext,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n} from \"@ark-ui/react\"\nimport { cn } from \"@/lib/utils\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupTrigger, InputGroupInput } from \"@/components/ui/input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\n\nfunction Combobox<T extends CollectionItem>({\n  positioning,\n  anchor,\n  lazyMount = true,\n  unmountOnExit = true,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Root<T>> & {\n  /** Anchor the popup to another element, e.g. a `ComboboxChips` container. */\n  anchor?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <ComboboxPrimitive.Root\n      data-slot=\"combobox\"\n      positioning={{\n        placement: \"bottom-start\",\n        gutter: 6,\n        sameWidth: true,\n        ...(anchor ? { getAnchorElement: () => anchor.current } : {}),\n        ...positioning,\n      }}\n      lazyMount={lazyMount}\n      unmountOnExit={unmountOnExit}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxContext({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.Context>) {\n  return <ComboboxPrimitive.Context {...props} />\n}\n\nfunction ComboboxRootLabel({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Label>) {\n  return (\n    <ComboboxPrimitive.Label\n      data-slot=\"combobox-root-label\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxControl({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.Control>) {\n  return <ComboboxPrimitive.Control data-slot=\"combobox-control\" {...props} />\n}\n\n/**\n * Ark has no value-text part for Combobox. Renders the selected items as\n * text, or `placeholder` when nothing is selected.\n */\nfunction ComboboxValue({\n  placeholder,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & { placeholder?: React.ReactNode }) {\n  const combobox = useComboboxContext()\n  return (\n    <span data-slot=\"combobox-value\" data-placeholder-shown={combobox.hasSelectedItems ? undefined : \"\"} {...props}>\n      {children ?? (combobox.hasSelectedItems ? combobox.valueAsString : placeholder)}\n    </span>\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Trigger>, \"id\">) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ClearTrigger>) {\n  const combobox = useComboboxContext()\n  // Match Base UI: unmount when there is nothing to clear, so the trigger\n  // button (hidden via `has-data-[slot=combobox-clear]`) shows again.\n  if (!combobox.hasSelectedItems && !combobox.inputValue) return null\n  return (\n    <ComboboxPrimitive.ClearTrigger data-slot=\"combobox-clear\" className={cn(className)} asChild {...props}>\n      <InputGroupTrigger variant=\"ghost\" size=\"icon-xs\">\n        <XIcon className=\"pointer-events-none\" />\n      </InputGroupTrigger>\n    </ComboboxPrimitive.ClearTrigger>\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Input>, \"id\"> & {\n  /** Render the open/close trigger in the control. */\n  showTrigger?: boolean\n  /** Render the clear button in the control. */\n  showClear?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Control asChild>\n      <InputGroup className={cn(\"w-auto\", className)}>\n        <ComboboxPrimitive.Input asChild disabled={disabled} {...props}>\n          <InputGroupInput />\n        </ComboboxPrimitive.Input>\n        <InputGroupAddon align=\"inline-end\">\n          {showTrigger && (\n            <InputGroupTrigger\n              size=\"icon-xs\"\n              variant=\"ghost\"\n              asChild\n              data-slot=\"input-group-trigger\"\n              className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n              disabled={disabled}\n            >\n              <ComboboxTrigger />\n            </InputGroupTrigger>\n          )}\n          {showClear && <ComboboxClear disabled={disabled} />}\n        </InputGroupAddon>\n        {children}\n      </InputGroup>\n    </ComboboxPrimitive.Control>\n  )\n}\n\nfunction ComboboxPositioner({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Positioner>) {\n  return (\n    <ComboboxPrimitive.Positioner\n      data-slot=\"combobox-positioner\"\n      className={cn(\"isolate [--z-index:50]\", className)}\n      {...props}\n    />\n  )\n}\n\n/** `id` is omitted: set part ids through the root `ids` prop so Ark's internal lookups keep working. */\nfunction ComboboxContent({ className, ...props }: Omit<React.ComponentProps<typeof ComboboxPrimitive.Content>, \"id\">) {\n  return (\n    <PortalPrimitive>\n      <ComboboxPositioner>\n        <ComboboxPrimitive.Content\n          data-slot=\"combobox-content\"\n          className={cn(\n            \"group/combobox-content relative z-50 max-h-(--available-height) w-(--reference-width) max-w-(--available-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPositioner>\n    </PortalPrimitive>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.List>) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)-(--spacing(9))),calc(var(--available-height)-(--spacing(9))))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  item,\n  value,\n  ...props\n}: Omit<React.ComponentProps<typeof ComboboxPrimitive.Item>, \"item\"> & {\n  /** The collection item. Falls back to `value` for string collections. */\n  item?: CollectionItem\n  value?: string\n}) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      item={item ?? value}\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxItemIndicator>\n        <CheckIcon className=\"pointer-events-none\" />\n      </ComboboxItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxItemText({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemText>) {\n  return <ComboboxPrimitive.ItemText data-slot=\"combobox-item-text\" {...props} />\n}\n\nfunction ComboboxItemIndicator({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>) {\n  return (\n    <ComboboxPrimitive.ItemIndicator\n      data-slot=\"combobox-item-indicator\"\n      className={cn(\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemGroup>) {\n  return <ComboboxPrimitive.ItemGroup data-slot=\"combobox-group\" className={cn(className)} {...props} />\n}\n\nfunction ComboboxLabel({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemGroupLabel>) {\n  return (\n    <ComboboxPrimitive.ItemGroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Renders every item in the root's collection through a render function.\n * Ark has no Collection part; this reads the collection from context.\n */\nfunction ComboboxCollection<T extends CollectionItem = CollectionItem>({\n  children,\n}: {\n  children: (item: T, index: number) => React.ReactNode\n}) {\n  const combobox = useComboboxContext()\n  const items = combobox.collection.items as T[]\n  return (\n    <React.Fragment>\n      {items.map((item, index) => (\n        <React.Fragment key={combobox.collection.getItemValue(item) ?? index}>{children(item, index)}</React.Fragment>\n      ))}\n    </React.Fragment>\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"flex w-full justify-center py-2 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Chips for `multiple` comboboxes. Ark has no chip parts; these read the\n * selected values from context and remove them via `clearValue`.\n */\nfunction ComboboxChips({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Control>) {\n  return (\n    <ComboboxPrimitive.Control\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  value,\n  showRemove = true,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** The selected value this chip represents. */\n  value: string\n  /** Render the remove button on the chip. */\n  showRemove?: boolean\n}) {\n  const combobox = useComboboxContext()\n  return (\n    <div\n      data-slot=\"combobox-chip\"\n      data-value={value}\n      className={cn(\n        \"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          data-slot=\"combobox-chip-remove\"\n          aria-label={`Remove ${value}`}\n          disabled={combobox.disabled}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          onClick={() => combobox.clearValue(value)}\n        >\n          <XIcon className=\"pointer-events-none\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nfunction ComboboxChipsInput({ className, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\n/** Render-prop access to one item's state (`{ selected, highlighted, disabled, ... }`). */\nfunction ComboboxItemContext({ ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemContext>) {\n  return <ComboboxPrimitive.ItemContext {...props} />\n}\n\nexport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxContext,\n  ComboboxControl,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n  ComboboxItemText,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxPositioner,\n  ComboboxRootLabel,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  createListCollection,\n  useComboboxAnchor,\n  useFilter,\n  useListCollection,\n  type CollectionItem,\n  type ListCollection,\n  ComboboxItemContext,\n}\n"
     }
   ]
 }