@optiaxiom/react 0.3.5 → 0.4.0

package/dist/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-Dby1HGSv.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-v_WxKtkk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_3bbeh0'],variants:{colorScheme:{danger:'_1p424cf',information:'_1a43cjt',neutral:'_13bimol',primary:'_3t9cl3',success:'_1wtq2vv',warning:'_1qtrqgl'},variant:{light:'ngknio',solid:'dea1r8'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_1nc2zx3'],variants:{colorScheme:{danger:'slgk6x',information:'j5os2w',neutral:'_8p5rhv',primary:'i64itj',success:'_1lomvqb',warning:'_1m4x20b'},variant:{light:'_4g7if8',solid:'_1ny8n3m'}}});
 
 export { badge };

package/dist/src/banner/Banner-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{colorScheme:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});

package/dist/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/box/Box.css.ts.vanilla-BHZ4bhCx.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/box/Box.css.ts.vanilla-DlV97In6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1ezwwu2'});
+var box = recipeRuntime({base:'_22gb6j'});
 
 export { box };

package/dist/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-BHtcSNLa.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cdep1j3a.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_4ci4l7',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_838r88'],variants:{colorScheme:{danger:'_1kmcyc6',neutral:'_10fu58u',primary:'ufyggn'},iconOnly:{false:'_5gsrs5',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'exsz1p',solid:'_3zelz6',subtle:'_1cr2gai'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_80p7q7',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'sam27k',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'wmq17e',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:'_1vaqmo4'});
+var buttonBase = recipeRuntime({base:['lmxxxn',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1im33aw'],variants:{colorScheme:{danger:'if8skd',neutral:'c4fjjx',primary:'_12vdocu'},iconOnly:{false:'xg4fm5',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1p96fk1',solid:'pm6twy',subtle:'_1iwd84e'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'hnlowv',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_1syvzmn',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1a8wi93',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:'_1sgmzw9'});
 
 export { buttonBase, spinner };

package/dist/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'c6u42p'});
+var buttonGroup = recipeRuntime({base:'awlold'});
 
 export { buttonGroup };

package/dist/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-BHtcSNLa.css';
-import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CnyGW7JN.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cdep1j3a.css';
+import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-B3UxIRoe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'dn99pm']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1343gin']});
 
 export { loadable };

package/dist/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CYG8X4be.css';
-import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-BP-IS8uM.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B-y4RHi9.css';
+import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-B4c8nGzf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'_14hl1zr'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'h08m3m']});
-var icon = recipeRuntime({base:['_56ea5e']});
+var checkbox = recipeRuntime({base:'_855f5a'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'_1683711']});
+var icon = recipeRuntime({base:['kv7kfb']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'jmjhjk'});
+var input = recipeRuntime({base:'_1jecikf'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
-import './../../assets/src/code/Code.css.ts.vanilla-Di85g701.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/code/Code.css.ts.vanilla-BE7HUNcL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'oohy28']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'co0rt5']});
 
 export { code };

package/dist/src/combobox/Combobox.js

@@ -1,84 +1,32 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useCombobox } from 'downshift';
-import { useEffect } from 'react';
 import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
 import { Popover } from '../popover/Popover.js';
 
 function Combobox({
   children,
   defaultOpen = false,
-  defaultValue,
-  items,
+  isItemDisabled = () => false,
   itemToKey = (value) => value,
   itemToString = (value) => value ? String(value) : "",
-  mode: modeProp,
-  onInputValueChange,
   onOpenChange,
-  onValueChange,
   open: openProp,
-  value: valueProp,
   ...props
 }) {
-  const mode = modeProp ?? "single";
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [value, setValue] = useControllableState({
-    defaultProp: defaultValue ?? (mode === "multiple" ? [] : void 0),
-    onChange: onValueChange,
-    prop: valueProp
-  });
-  const [inputValue, setInputValue] = useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange
-  });
-  useEffect(() => {
-    if (!open) {
-      setInputValue("");
-    }
-  }, [open, setInputValue]);
-  const downshift = useCombobox({
-    ...props,
-    inputValue,
-    isOpen: open,
-    items,
-    itemToKey,
-    itemToString,
-    onSelectedItemChange({ selectedItem, type }) {
-      if (type !== useCombobox.stateChangeTypes.InputBlur) {
-        if (mode === "single" || !Array.isArray(value)) {
-          setValue(selectedItem);
-        } else {
-          setValue(
-            value.includes(selectedItem) ? value.filter((v) => v !== selectedItem) : [...value, selectedItem]
-          );
-        }
-      }
-      if (mode === "single" || type === useCombobox.stateChangeTypes.InputKeyDownEnter) {
-        setOpen(false);
-      }
-    },
-    selectedItem: mode === "multiple" ? null : value ?? null
-  });
-  downshift.getInputProps({}, { suppressRefError: true });
-  downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
     ComboboxContextProvider,
     {
-      downshift,
-      highlightedItem: items[downshift.highlightedIndex],
-      items,
+      isItemDisabled,
       itemToKey,
       itemToString,
-      mode,
       open,
-      setInputValue,
       setOpen,
-      setValue,
-      value,
+      ...props,
       children
     }
   ) });

package/dist/src/combobox-checkbox-item/ComboboxCheckboxItem.js

@@ -0,0 +1,6 @@
+import { CommandCheckboxItem } from '../command-checkbox-item/CommandCheckboxItem.js';
+
+const ComboboxCheckboxItem = CommandCheckboxItem;
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+
+export { ComboboxCheckboxItem };

package/dist/src/combobox-content/ComboboxContent.js

@@ -1,5 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Command } from '../command/Command.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
@@ -7,6 +9,14 @@ import { PopoverContent } from '../popover-content/PopoverContent.js';
 const ComboboxContent = forwardRef(
   ({ children, ...props }, ref) => {
     const { labelId } = useFieldContext();
+    const {
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onSelect
+    } = useComboboxContext("ComboboxContent");
     return /* @__PURE__ */ jsx(
       PopoverContent,
       {
@@ -15,7 +25,18 @@ const ComboboxContent = forwardRef(
         p: "4",
         ref,
         ...props,
-        children
+        children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            isItemDisabled,
+            items,
+            itemToKey,
+            itemToString,
+            onInputValueChange,
+            onSelect,
+            children
+          }
+        )
       }
     );
   }

package/dist/src/combobox-empty/ComboboxEmpty.js

@@ -1,30 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { CommandEmpty } from '../command-empty/CommandEmpty.js';
 
-const ComboboxEmpty = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { items } = useComboboxContext("ComboboxEmpty");
-    if (items.length > 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: "center",
-        color: "fg.disabled",
-        display: "flex",
-        fontSize: "md",
-        justifyContent: "center",
-        p: "md",
-        ref,
-        ...props,
-        children: children || "No options"
-      }
-    );
-  }
-);
+const ComboboxEmpty = CommandEmpty;
 ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
 
 export { ComboboxEmpty };

package/dist/src/combobox-footer/ComboboxFooter.js

@@ -1,13 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
-import { footer } from './ComboboxFooter-css.js';
+import { CommandFooter } from '../command-footer/CommandFooter.js';
 
-const ComboboxFooter = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ref, ...footer({}, className), ...props, children: /* @__PURE__ */ jsx("li", { children }) });
-  }
-);
+const ComboboxFooter = CommandFooter;
 ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
 
 export { ComboboxFooter };

package/dist/src/combobox-input/ComboboxInput.js

@@ -1,37 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
-import { Input } from '../input/Input.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { CommandInput } from '../command-input/CommandInput.js';
 
-const ComboboxInput = forwardRef(
-  (props, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    const { downshift, highlightedItem, setInputValue } = useComboboxContext("ComboboxInput");
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        m: "4",
-        ...sprinkleProps,
-        ...downshift.getInputProps({
-          ...restProps,
-          onChange: (event) => {
-            setInputValue("value" in event.target ? event.target.value : "");
-          },
-          onKeyDown: (event) => {
-            if (event.key === " " && highlightedItem) {
-              event.preventDefault();
-              downshift.selectItem(highlightedItem);
-            }
-          },
-          ref
-        })
-      }
-    );
-  }
-);
+const ComboboxInput = CommandInput;
 ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
 
 export { ComboboxInput };

package/dist/src/combobox-item/ComboboxItem.js

@@ -1,49 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Checkbox } from '../checkbox/Checkbox.js';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
-import { ComboboxItemContextProvider } from '../combobox-item-context/ComboboxItemContext.js';
-import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { CommandItem } from '../command-item/CommandItem.js';
 
-const ComboboxItem = forwardRef(
-  ({ addonAfter, addonBefore, children, description, icon, item, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    const { downshift, highlightedItem, mode, value } = useComboboxContext("ComboboxItem");
-    const itemProps = downshift.getItemProps({ item });
-    return /* @__PURE__ */ jsx(ComboboxItemContextProvider, { active: value === item, item, children: /* @__PURE__ */ jsx(
-      ListboxItemBase,
-      {
-        addonAfter,
-        addonBefore: addonBefore ?? (mode === "multiple" && /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: Array.isArray(value) ? value.includes(item) : value === item,
-            disabled: itemProps["aria-disabled"],
-            tabIndex: -1
-          }
-        )),
-        description,
-        icon,
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(
-          "li",
-          {
-            "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-            "data-highlighted": highlightedItem === item ? "" : void 0,
-            "data-selected": downshift.selectedItem === item ? "" : void 0,
-            ref,
-            ...restProps,
-            ...itemProps,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
+const ComboboxItem = CommandItem;
 ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
 
 export { ComboboxItem };

package/dist/src/combobox-item-indicator/ComboboxItemIndicator.js

@@ -1,20 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { useComboboxItemContext } from '../combobox-item-context/ComboboxItemContext.js';
-import { IconCheck } from '../icons/IconCheck.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { CommandItemIndicator } from '../command-item-indicator/CommandItemIndicator.js';
 
-const ComboboxItemIndicator = forwardRef(({ children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  const { active } = useComboboxItemContext("ComboboxItemIndicator");
-  if (!active) {
-    return /* @__PURE__ */ jsx(Box, { w: "12" });
-  }
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
-});
+const ComboboxItemIndicator = CommandItemIndicator;
 ComboboxItemIndicator.displayName = "@optiaxiom/react/ComboboxItemIndicator";
 
 export { ComboboxItemIndicator };

package/dist/src/combobox-list/ComboboxList.js

@@ -1,33 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { CommandList } from '../command-list/CommandList.js';
 
-const ComboboxList = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    const { downshift, items } = useComboboxContext("ComboboxList");
-    if (!items.length) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        display: "flex",
-        flex: "1",
-        flexDirection: "column",
-        gap: "2",
-        overflow: "auto",
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({ ref, ...restProps }), children })
-      }
-    );
-  }
-);
+const ComboboxList = CommandList;
 ComboboxList.displayName = "@optiaxiom/react/ComboboxList";
 
 export { ComboboxList };

package/dist/src/combobox-multiple-value/ComboboxMultipleValue.js

@@ -5,10 +5,13 @@ import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Flex } from '../flex/Flex.js';
 
 const maxDisplayedItems = 2;
-const ComboboxMultipleValue = forwardRef(({ children, placeholder, ...props }, ref) => {
-  const { itemToKey, itemToString, value } = useComboboxContext(
+const ComboboxMultipleValue = forwardRef(({ children, placeholder, value, ...props }, ref) => {
+  const { itemToKey, itemToString } = useComboboxContext(
     "ComboboxMultipleValue"
   );
+  if (value instanceof Set) {
+    value = [...value];
+  }
   return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length > maxDisplayedItems ? /* @__PURE__ */ jsxs(Badge, { children: [
     value.length,
     " selected"

package/dist/src/combobox-separator/ComboboxSeparator.js

@@ -1,9 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { Separator } from '../separator/Separator.js';
+import { CommandSeparator } from '../command-separator/CommandSeparator.js';
 
-const ComboboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("li", { ref, children: /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props }) }) }));
+const ComboboxSeparator = CommandSeparator;
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
 export { ComboboxSeparator };

package/dist/src/combobox-single-value/ComboboxSingleValue.js

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 
-const ComboboxSingleValue = forwardRef(({ children, placeholder, ...props }, ref) => {
-  const { itemToString, value } = useComboboxContext("ComboboxSingleValue");
+const ComboboxSingleValue = forwardRef(({ children, placeholder, value, ...props }, ref) => {
+  const { itemToString } = useComboboxContext("ComboboxSingleValue");
   return /* @__PURE__ */ jsx(Box, { ref, ...props, children: value ? children ?? itemToString(value) : placeholder });
 });
 ComboboxSingleValue.displayName = "@optiaxiom/react/ComboboxSingleValue";

package/dist/src/combobox-value/ComboboxValue.js

@@ -1,14 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { ComboboxMultipleValue } from '../combobox-multiple-value/ComboboxMultipleValue.js';
 import { ComboboxSingleValue } from '../combobox-single-value/ComboboxSingleValue.js';
 
 const ComboboxValue = forwardRef(
-  ({ placeholder, ...props }, ref) => {
-    const { mode } = useComboboxContext("ComboboxValue");
-    const Comp = mode === "single" ? ComboboxSingleValue : ComboboxMultipleValue;
-    return /* @__PURE__ */ jsx(Comp, { placeholder, ref, ...props });
+  (props, ref) => {
+    return props.type === "multiple" ? /* @__PURE__ */ jsx(ComboboxMultipleValue, { ref, ...props }) : /* @__PURE__ */ jsx(ComboboxSingleValue, { ref, ...props });
   }
 );
 ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";

package/dist/src/command/Command.js

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCombobox } from 'downshift';
+import { useEffect } from 'react';
+import { CommandContextProvider } from '../command-context/CommandContext.js';
+
+function Command({
+  children,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onOpenChange,
+  onSelect
+}) {
+  const [inputValue, setInputValue] = useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange
+  });
+  useEffect(() => {
+    return () => {
+      setInputValue("");
+    };
+  }, [setInputValue]);
+  const downshift = useCombobox({
+    inputValue,
+    isItemDisabled,
+    isOpen: true,
+    items,
+    itemToKey,
+    itemToString,
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== useCombobox.stateChangeTypes.InputBlur) {
+        onSelect?.(selectedItem);
+      }
+    },
+    selectedItem: null,
+    stateReducer(state, actionAndChanges) {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            /**
+             * Keep the selected option highlighted rather than resetting to -1
+             */
+            highlightedIndex: state.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    CommandContextProvider,
+    {
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      setInputValue,
+      setOpen: onOpenChange,
+      setValue: onSelect,
+      children
+    }
+  );
+}
+Command.displayName = "@optiaxiom/react/Command";
+
+export { Command };

package/dist/src/command-checkbox-item/CommandCheckboxItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { Flex } from '../flex/Flex.js';
+
+const CommandCheckboxItem = forwardRef(({ addonBefore, ...props }, ref) => {
+  const { isItemDisabled, items } = useCommandContext("CommandCheckboxItem");
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: props.active,
+            disabled: isItemDisabled(props.item, items.indexOf(props.item)),
+            tabIndex: -1
+          }
+        ),
+        addonBefore
+      ] }),
+      ref,
+      ...props
+    }
+  );
+});
+CommandCheckboxItem.displayName = "@optiaxiom/react/CommandCheckboxItem";
+
+export { CommandCheckboxItem };

package/dist/src/command-context/CommandContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [CommandContextProvider, useCommandContext] = createContext("Command");
+
+export { CommandContextProvider, useCommandContext };