@optiaxiom/react 1.3.0 → 1.3.2

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DOeVqQUF.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var buttonBase = recipeRuntime({base:['_1y05g67',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_12q8z6u'],variants:{intent:{danger:'_1gbq27h',neutral:'_179aewr',primary:'b0dmmd'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'_13ftavh',true:{}},variant:{outline:'_1l86vvk',strong:'mw94hu',subtle:'_41hxbx'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'hnjqkg',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1o2mp32',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_83qfzy',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'_1dnm7z8']});
+
+export { buttonBase, spinner };

package/dist/esm/packages/react/src/{button-base/ButtonBase.js → button/ButtonRoot.js}

@@ -6,11 +6,11 @@ import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { Transition } from '../transition/Transition.js';
-import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { TransitionGroup } from '../transition/TransitionGroup.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
-import { buttonBase, spinner } from './ButtonBase-css.js';
+import { buttonBase, spinner } from './ButtonRoot-css.js';
 
 const appearances = {
   danger: { intent: "danger", variant: "strong" },
@@ -20,7 +20,7 @@ const appearances = {
   primary: { intent: "primary", variant: "strong" },
   subtle: { intent: "neutral", variant: "subtle" }
 };
-const ButtonBase = forwardRef(
+const ButtonRoot = forwardRef(
   ({
     appearance = "default",
     asChild,
@@ -67,6 +67,6 @@ const ButtonBase = forwardRef(
     );
   }
 );
-ButtonBase.displayName = "@optiaxiom/react/ButtonBase";
+ButtonRoot.displayName = "@optiaxiom/react/ButtonRoot";
 
-export { ButtonBase };
+export { ButtonRoot };

package/dist/esm/packages/react/src/calendar/Calendar.js

@@ -6,10 +6,11 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { Clock } from '../clock/Clock.js';
 import { Flex } from '../flex/Flex.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { Separator } from '../separator/Separator.js';
 import { Text } from '../text/Text.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
-import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import '../utils/isHoverSupported.js';

package/dist/esm/packages/react/src/calendar/CalendarDayButton-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-VdS4O7gs.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DTJ-qgEE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1cpennm'],variants:{appearance:{'default':'lpugor',holiday:[{color:'fg.error'},'_8xcodz'],range_middle:'_2szeva',selected:[{color:'fg.white'},'_1uve59g'],weekend:[{color:'fg.tertiary'},'_1oc1irp']},range:{end:['ep0dtw'],middle:['_1cw1l2p'],start:['h31ien']}}});
-var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1j50ags']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'d3bv4l'],variants:{appearance:{'default':'hucvx5',holiday:[{color:'fg.error'},'_658db3'],range_middle:'_6vwj0z',selected:[{color:'fg.white'},'_10x7emu'],weekend:[{color:'fg.tertiary'},'_1l74jx9']},range:{end:['_1e6tfds'],middle:['zqzute'],start:['nq2gnn']}}});
+var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'gqs6rg']});
 
 export { button, today };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-CV3jww0a.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-7CBP-dxX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ukbjap']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'e7co3i']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNav-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-KqCd-2ik.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-B_yyKqbi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1ja9z4b']});
+var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'t13yoa']});
 
 export { nav };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { NextMonthButton } from 'react-day-picker';
 import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
 
 function CalendarNextMonthButton({
   children,

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { PreviousMonthButton } from 'react-day-picker';
 import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
 
 function CalendarPreviousMonthButton({
   children,

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-QdHEU1mZ.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-B3y4Cor7.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-CrsxV1vR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-C2LWvVnD.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Bz4ucIQV.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-CFMBvGPI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1440ip6',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'sddc3c']});
+var card = recipeRuntime({base:['ym82cp',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1swxt0d']});
 
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -2,10 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
-import { ActionsRoot } from '../actions-root/ActionsRoot.js';
-import { CardProvider } from '../card-context/CardContext.js';
+import '../actions/ActionsContent.js';
+import { ActionsRoot } from '../actions/ActionsRoot.js';
 import { Flex } from '../flex/Flex.js';
 import { card } from './Card-css.js';
+import { CardProvider } from './CardContext.js';
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",

package/dist/esm/packages/react/src/card/CardAction-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/card/CardOverflow.css.ts.vanilla-BxEr3QwY.css';
+import './../../../../assets/src/card/CardAction.css.ts.vanilla-BwYecK1h.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var action = recipeRuntime({base:['_19s5u3s']});
+
+export { action };

package/dist/esm/packages/react/src/{card-action → card}/CardAction.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { ActionsContent } from '../actions-content/ActionsContent.js';
+import { ActionsContent } from '../actions/ActionsContent.js';
+import '../actions/ActionsRoot.js';
 import { action } from './CardAction-css.js';
 
 const CardAction = forwardRef(

package/dist/esm/packages/react/src/{card-checkbox → card}/CardCheckbox.js

@@ -8,9 +8,9 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCardContext } from '../card-context/CardContext.js';
-import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
-import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
+import { CheckboxControl } from '../checkbox/CheckboxControl.js';
+import { CheckboxRoot } from '../checkbox/CheckboxRoot.js';
+import { useCardContext } from './CardContext.js';
 
 const CardCheckbox = forwardRef(
   ({ children, indeterminate, onChange, ...props }, ref) => {

package/dist/esm/packages/react/src/{card-description → card}/CardDescription.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCardContext } from '../card-context/CardContext.js';
 import { Text } from '../text/Text.js';
+import { useCardContext } from './CardContext.js';
 
 const CardDescription = forwardRef(({ children, ...props }, ref) => {
   const { descriptionId } = useCardContext("@optiaxiom/react/CardDescription");

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/card/CardImage.css.ts.vanilla-B1rMon9l.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1ackn87'],variants:{orientation:{horizontal:[{w:'auto'},'_1o5zb6v'],vertical:[{w:'full'},'_16vo671']}}});
+
+export { cardImage };

package/dist/esm/packages/react/src/{card-image → card}/CardImage.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCardContext } from '../card-context/CardContext.js';
+import { useCardContext } from './CardContext.js';
 import { cardImage } from './CardImage-css.js';
 
 const CardImage = forwardRef(

package/dist/esm/packages/react/src/card/CardOverflow-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/card/CardOverflow.css.ts.vanilla-BxEr3QwY.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardOverflow = recipeRuntime({base:['_1rn6761',{alignSelf:'stretch'},'_6ngnek'],variants:{orientation:{horizontal:['_1dhrovf'],vertical:['_1ej6l6k']}}});
+
+export { cardOverflow };

package/dist/esm/packages/react/src/{card-overflow → card}/CardOverflow.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCardContext } from '../card-context/CardContext.js';
+import { useCardContext } from './CardContext.js';
 import { cardOverflow } from './CardOverflow-css.js';
 
 const CardOverflow = forwardRef(

package/dist/esm/packages/react/src/{card-title → card}/CardTitle.js

@@ -2,8 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { useCardContext } from '../card-context/CardContext.js';
 import { Heading } from '../heading/Heading.js';
+import { useCardContext } from './CardContext.js';
 
 const CardTitle = forwardRef(
   ({ asChild, children, ...props }, ref) => {

package/dist/esm/packages/react/src/checkbox/Checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { CheckboxContent } from '../checkbox-content/CheckboxContent.js';
-import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
-import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
+import { CheckboxContent } from './CheckboxContent.js';
+import { CheckboxControl } from './CheckboxControl.js';
+import { CheckboxRoot } from './CheckboxRoot.js';
 
 const Checkbox = forwardRef(
   ({ children, description, indeterminate, ...props }, ref) => {

package/dist/esm/packages/react/src/{checkbox-content → checkbox}/CheckboxContent.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
-import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
-import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+import '../toggle-input/ToggleInput.js';
+import { ToggleInputContent } from '../toggle-input/ToggleInputContent.js';
+import '../toggle-input/ToggleInputControl.js';
+import { ToggleInputDescription } from '../toggle-input/ToggleInputDescription.js';
+import '../toggle-input/ToggleInputHiddenInput.js';
+import { ToggleInputLabel } from '../toggle-input/ToggleInputLabel.js';
 
 const CheckboxContent = forwardRef(({ children, description, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(ToggleInputContent, { ref, ...props, children: [

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -0,0 +1,11 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DpdhCvOY.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DxtE4aN4.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1ewjrxk'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1an8rpp']});
+var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
+
+export { control, icon, indicator };

package/dist/esm/packages/react/src/{checkbox-control → checkbox}/CheckboxControl.js

@@ -6,7 +6,12 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { CheckboxCheck } from '../icons/CheckboxCheck.js';
 import { IconMinus } from '../icons/IconMinus.js';
-import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
+import '../toggle-input/ToggleInput.js';
+import '../toggle-input/ToggleInputContent.js';
+import { ToggleInputControl } from '../toggle-input/ToggleInputControl.js';
+import '../toggle-input/ToggleInputDescription.js';
+import '../toggle-input/ToggleInputHiddenInput.js';
+import '../toggle-input/ToggleInputLabel.js';
 import { control, indicator, icon } from './CheckboxControl-css.js';
 
 const CheckboxControl = forwardRef(({ className, indeterminate, shift, ...props }, ref) => {

package/dist/esm/packages/react/src/{checkbox-root → checkbox}/CheckboxRoot.js

@@ -4,7 +4,11 @@ import { forwardRef } from 'react';
 import '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
-import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
+import '../toggle-input/ToggleInputContent.js';
+import '../toggle-input/ToggleInputControl.js';
+import '../toggle-input/ToggleInputDescription.js';
+import { ToggleInputHiddenInput } from '../toggle-input/ToggleInputHiddenInput.js';
+import '../toggle-input/ToggleInputLabel.js';
 
 const CheckboxRoot = forwardRef(
   ({ children, description, ...props }, ref) => {

package/dist/esm/packages/react/src/clock/Clock.js

@@ -4,8 +4,8 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Select } from '../select/Select.js';
-import { SelectContent } from '../select-content/SelectContent.js';
-import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { SelectContent } from '../select/SelectContent.js';
+import { SelectTrigger } from '../select/SelectTrigger.js';
 import { parse, range, format } from './utils.js';
 
 const Clock = forwardRef(

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-gz4dgqef.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-BAmyfEkg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'mfzupi']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'u8umzj']});
 
 export { code };

package/dist/esm/packages/react/src/command/Command.js

@@ -3,10 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCombobox } from 'downshift';
 import { useEffect, useRef } from 'react';
-import { resolveItemProperty, CommandProvider } from '../command-context/CommandContext.js';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
-import { useCommandItems } from '../use-command-items/useCommandItems.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
+import { resolveItemProperty, CommandProvider } from './CommandContext.js';
+import { useCommandItems } from './useCommandItems.js';
 
 function Command({
   children,
@@ -34,8 +38,8 @@ function Command({
     }
   }, [placed, setInputValueStable]);
   const pauseInteractionRef = useRef({
-    timer: void 0,
-    triangle: null
+    isInsideTriangle: null,
+    timer: void 0
   });
   const downshift = useCombobox({
     highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
@@ -56,7 +60,7 @@ function Command({
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
         onItemSelect?.(selectedItem, {
-          close: type !== useCombobox.stateChangeTypes.FunctionSelectItem
+          close: type !== useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
         });
       }
     },

package/dist/esm/packages/react/src/command/CommandInput.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
+import { Input } from '../input/Input.js';
+import '../input/InputAddon.js';
+import '../input/InputControl.js';
+import '../input/InputRoot.js';
+import { useCommandContext } from './CommandContext.js';
+
+const CommandInput = forwardRef(
+  ({ onKeyDown, size, ...props }, ref) => {
+    const { downshift, highlightedItem, setInputValue } = useCommandContext(
+      "@optiaxiom/react/CommandInput"
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
+        htmlSize: 1,
+        size,
+        ...downshift.getInputProps({
+          ref,
+          ...props,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (!(event.target instanceof HTMLInputElement)) {
+              return;
+            }
+            if (event.target.value) {
+              return;
+            }
+            if (!highlightedItem) {
+              return;
+            }
+            const subOptions = highlightedItem.subOptions;
+            if (event.key === " ") {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
+            } else if (event.key === "ArrowRight" && subOptions?.length) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
+            }
+          }
+        })
+      }
+    );
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+
+export { CommandInput };

package/dist/esm/packages/react/src/{command-item → command}/CommandItem.js

@@ -4,12 +4,12 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
+import { useCommandContext, resolveItemProperty } from './CommandContext.js';
 
 const CommandItem = forwardRef(
   ({ asChild, children, item, selected, size, ...props }, ref) => {
@@ -30,10 +30,10 @@ const CommandItem = forwardRef(
           });
           return;
         }
-        if (!pauseInteractionRef.current.triangle) {
+        if (!pauseInteractionRef.current.isInsideTriangle) {
           return;
         }
-        if (isInsideTriangle(pauseInteractionRef.current.triangle, {
+        if (pauseInteractionRef.current.isInsideTriangle({
           x: event.clientX,
           y: event.clientY
         })) {
@@ -43,10 +43,10 @@ const CommandItem = forwardRef(
           });
           window.clearTimeout(pauseInteractionRef.current.timer);
           pauseInteractionRef.current.timer = window.setTimeout(() => {
-            pauseInteractionRef.current.triangle = null;
+            pauseInteractionRef.current.isInsideTriangle = null;
           }, 50);
         } else {
-          pauseInteractionRef.current.triangle = null;
+          pauseInteractionRef.current.isInsideTriangle = null;
         }
       },
       ref,
@@ -81,13 +81,5 @@ const CommandItem = forwardRef(
   }
 );
 CommandItem.displayName = "@optiaxiom/react/CommandItem";
-function isInsideTriangle({
-  bottom,
-  side,
-  top
-}, target) {
-  const b0 = (top.x - side.x) * (bottom.y - side.y) - (bottom.x - side.x) * (top.y - side.y), b1 = ((top.x - target.x) * (bottom.y - target.y) - (bottom.x - target.x) * (top.y - target.y)) / b0, b2 = ((bottom.x - target.x) * (side.y - target.y) - (side.x - target.x) * (bottom.y - target.y)) / b0, b3 = ((side.x - target.x) * (top.y - target.y) - (top.x - target.x) * (side.y - target.y)) / b0;
-  return b1 > 0 && b2 > 0 && b3 > 0;
-}
 
 export { CommandItem };

package/dist/esm/packages/react/src/{command-listbox → command}/CommandListbox.js

@@ -1,8 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
-import { ListboxItemized } from '../listbox-itemized/ListboxItemized.js';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import { ListboxItemized } from '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+import { useCommandContext, resolveItemProperty } from './CommandContext.js';
 
 const CommandListbox = forwardRef(
   ({ children, size, ...props }, ref) => {

package/dist/esm/packages/react/src/{use-command-items → command}/useCommandItems.js

@@ -1,6 +1,11 @@
 import { useMemo } from 'react';
-import { resolveItemProperty } from '../command-context/CommandContext.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import 'react/jsx-runtime';
+import '../utils/isHoverSupported.js';
+import { resolveItemProperty } from './CommandContext.js';
 import { fuzzysearch } from './fuzzysearch.js';
 
 const useCommandItems = ({
@@ -15,16 +20,15 @@ const useCommandItems = ({
   });
   return useMemo(() => {
     const substring = (inputValue ?? "").normalize();
-    return options.flatMap((item) => {
-      if (item.subOptions && substring) {
-        return item.subOptions.filter((item2) => filterFn(item2, substring)).map((subItem) => ({
-          ...subItem,
-          parentOption: item
-        }));
-      } else {
-        return filterFn(item, substring) ? [item] : [];
-      }
-    });
+    const callback = (parentOption) => (item) => {
+      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+        parentOption ? {
+          ...item,
+          parentOption
+        } : item
+      ] : [];
+    };
+    return options.flatMap(callback());
   }, [options, filterFn, inputValue]);
 };
 

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-QdHEU1mZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-C2LWvVnD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1mmhzrn','_1dyccbq'],true:{}},inset:{false:'w5m0rj',true:'_4bjvqd'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1vny94w','_1pgkl4y'],true:{}},inset:{false:'_1zit3y',true:'_3wt4dq'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DataTableProvider } from '../data-table-context/DataTableContext.js';
 import { Flex } from '../flex/Flex.js';
+import { DataTableProvider } from './DataTableContext.js';
 
 const DataTable = forwardRef(
   ({ children, table, ...props }, ref) => {

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -0,0 +1,14 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-UFa4hpoZ.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BcJ3AJ4f.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'fazkac'],variants:{pinned:{left:'_1en8i7t',right:'_1yc5n83'},pinnedType:{body:'_1j40eed',header:{}}}});
+var cellOffsetVar = 'var(--_16uzvor)';
+var cellSizeVar = 'var(--_1el4nm5)';
+var header = recipeRuntime({base:[{display:'grid'},'ejlhak']});
+var leftTotalSizeVar = 'var(--_1kka7rx)';
+var rightTotalSizeVar = 'var(--fqnbt1)';
+var table = recipeRuntime({base:'wjkulz',variants:{pinned:{both:'_1hhlm9p',left:'_168dth2',none:{},right:'_1kon59n'}}});
+
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };