@optiaxiom/react 1.1.2 → 1.2.0

package/dist/esm/packages/react/src/nav-item/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DOVkqqxM.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-BUmRo4aJ.css';
-import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-BdQxHsrr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-ReU4Msyb.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-0KfIDBKX.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-Bbjhv3cx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'od1i6y']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'hkyozj'],variants:{expanded:{false:'_1j7ixuy',true:'rdh670'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1lm3lqu']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1bhinnh'],variants:{expanded:{false:'_3s9i0i',true:'_1ga6087'}}});
 
 export { item, label };

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-D-rDWBIZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BXbFVLhQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'dcdq0f']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_188rs3u'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'xccdn']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'_19dzk00']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'wvufeq'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'rw1g3']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-DwHSk3QZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-Csb1AGeK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1xaveq0'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_174utyp'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DZZm_Ymr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-D8aQgdKP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1ehmc1z']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'fnkrti']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DOVkqqxM.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DkD0kjT5.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-Dz5zm-D4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-ReU4Msyb.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-SvMQoK1u.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-SDY9HO4t.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'gl3czh'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_3l92r3']});
-var input = recipeRuntime({base:'t2jh9t'});
-var radio = recipeRuntime({base:'_1jmkas'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1druh4v'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_8rsvd0']});
+var input = recipeRuntime({base:'_1rylsdd'});
+var radio = recipeRuntime({base:'v6pzj7'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-BH7IRGQp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-BNrq9XTe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1hmbbvf']});
-var search = recipeRuntime({base:'j69wfs'});
+var clear = recipeRuntime({base:[{size:'sm'},'_12atjb7']});
+var search = recipeRuntime({base:'_11kgw6b'});
 
 export { clear, search };

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef, useState } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useRef } from 'react';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
@@ -13,19 +14,13 @@ import { forceValueChange } from '../utils/forceValueChange.js';
 import { search, clear } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
-  ({
-    addonBefore,
-    className,
-    defaultValue = "",
-    onChange,
-    onValueClear,
-    value: valueProp,
-    ...props
-  }, outerRef) => {
+  ({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    const [innerValue, setValue] = useState(defaultValue);
-    const value = typeof valueProp === "undefined" ? innerValue : valueProp;
+    const [value, setValue] = useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
     return /* @__PURE__ */ jsx(
       Input,
       {
@@ -59,7 +54,6 @@ const SearchInput = forwardRef(
         },
         ref,
         type: "search",
-        value,
         ...search({}, className),
         ...props
       }

package/dist/esm/packages/react/src/select/Select.js

@@ -1,78 +1,116 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useSelect } from 'downshift';
+import { forwardRef, useRef, useMemo } from 'react';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 import { SelectProvider } from '../select-context/SelectContext.js';
+import { SelectHiddenSelect } from '../select-hidden-select/SelectHiddenSelect.js';
+import { useObserveReset } from './useObserveReset.js';
+import { useObserveValue } from './useObserveValue.js';
 
-function Select({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  items,
-  itemToKey = (value2) => value2,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onOpenChange,
-  onValueChange,
-  open,
-  value,
-  ...props
-}) {
-  const [selectedItem, setSelectedItem] = useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    isOpen,
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
-  );
-  const downshift = useSelect({
-    ...props,
-    defaultHighlightedIndex: selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : 0,
-    highlightedIndex,
-    isOpen: placed,
+const Select = forwardRef(
+  ({
+    children,
+    defaultOpen = false,
+    defaultValue,
+    disabled,
+    isItemDisabled = () => false,
     items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange(changes) {
-      setHighlightedIndex(changes.highlightedIndex);
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2, type }) {
-      setSelectedItem(
-        (prevSelectedItem) => selectedItem2 && prevSelectedItem && type !== useSelect.stateChangeTypes.ToggleButtonBlur && itemToKey(selectedItem2) === itemToKey(prevSelectedItem) ? null : selectedItem2
-      );
-    },
-    selectedItem: null
-  });
-  downshift.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
-    SelectProvider,
-    {
-      disabled,
-      downshift,
-      highlightedItem: items[highlightedIndex],
-      isOpen,
+    itemToLabel = (value2) => value2 ? String(value2) : "",
+    itemToValue = (item) => typeof item === "string" ? item : void 0,
+    name,
+    onBlur,
+    onChange,
+    onOpenChange,
+    onValueChange,
+    open,
+    required,
+    value
+  }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const [shadowValue, setShadowValue] = useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: value
+    });
+    useObserveValue(innerRef, setShadowValue);
+    useObserveReset(innerRef, setShadowValue);
+    const selectedItem = useMemo(
+      () => shadowValue ? items.find((item) => itemToValue(item) === shadowValue) : void 0,
+      [itemToValue, items, shadowValue]
+    );
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+      () => selectedItem ? items.findIndex(
+        (item) => itemToValue(selectedItem) === itemToValue(item)
+      ) : -1
+    );
+    const downshift = useSelect({
+      highlightedIndex,
+      isItemDisabled,
+      isOpen: placed,
       items,
-      itemToKey,
-      itemToString,
-      placed,
-      selectedItem,
-      setPlaced,
-      children
-    }
-  ) });
-}
+      itemToKey: itemToValue,
+      itemToString: itemToLabel,
+      onHighlightedIndexChange(changes) {
+        if ((changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
+      },
+      onIsOpenChange({ isOpen: isOpen2 }) {
+        setIsOpen(isOpen2);
+      },
+      onSelectedItemChange({ selectedItem: selectedItem2 }) {
+        if (innerRef.current) {
+          innerRef.current.value = itemToValue(selectedItem2) ?? "";
+        }
+      },
+      selectedItem: selectedItem ?? null
+    });
+    downshift.getMenuProps({}, { suppressRefError: true });
+    return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
+      SelectProvider,
+      {
+        disabled,
+        downshift,
+        highlightedItem: items[highlightedIndex],
+        isOpen,
+        items,
+        itemToLabel,
+        itemToValue,
+        onBlur,
+        placed,
+        selectedItem,
+        setPlaced,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectHiddenSelect,
+            {
+              defaultValue,
+              name,
+              onChange: (event) => {
+                setShadowValue(event.target.value);
+                onChange?.(event);
+              },
+              ref,
+              required,
+              value
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
 Select.displayName = "@optiaxiom/react/Select";
 
 export { Select };

package/dist/esm/packages/react/src/select/useObserveReset.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+const useObserveReset = (inputRef, setValue) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const form = input.closest("form");
+    if (!form) {
+      return;
+    }
+    const listener = () => setValue("");
+    form.addEventListener("reset", listener);
+    return () => form.removeEventListener("reset", listener);
+  }, [inputRef, setValue]);
+};
+
+export { useObserveReset };

package/dist/esm/packages/react/src/select/useObserveValue.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+const useObserveValue = (inputRef, setValue) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(
+      input.constructor.prototype,
+      "value"
+    );
+    Object.defineProperty(input, "value", {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        return descriptor?.get?.call(input);
+      },
+      set: function(value) {
+        descriptor?.set?.call(input, value);
+        setValue(value);
+      }
+    });
+  }, [inputRef, setValue]);
+};
+
+export { useObserveValue };

package/dist/esm/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-CtoX-3jS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-CIP9Lzv4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_17rhgy2']});
+var content = recipeRuntime({base:['j259xi']});
 
 export { content };

package/dist/esm/packages/react/src/select-content/SelectContent.js

@@ -5,10 +5,13 @@ import { Portal } from '@radix-ui/react-portal';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
+import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalLayer } from '../modal-layer/ModalLayer.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
+import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
 import { Spinner } from '../spinner/Spinner.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import { content } from './SelectContent-css.js';
 
 const SelectContent = forwardRef(
@@ -21,34 +24,63 @@ const SelectContent = forwardRef(
     ...props
   }, ref) => {
     const { boxProps, restProps } = extractBoxProps(props);
-    const { downshift, isOpen, placed, setPlaced } = useSelectContext(
-      "@optiaxiom/react/SelectContent"
-    );
-    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
-      MenuListbox,
+    const {
+      downshift,
+      highlightedItem,
+      isOpen,
+      items,
+      itemToLabel,
+      itemToValue,
+      placed,
+      setPlaced
+    } = useSelectContext("@optiaxiom/react/SelectContent");
+    return /* @__PURE__ */ jsx(
+      TransitionGroup,
       {
-        asChild: true,
-        maxH: "sm",
-        minW: loading ? "trigger" : void 0,
-        provider: "popper",
-        ...content({}, className),
-        ...boxProps,
-        ...downshift.getMenuProps(
-          { ref, ...restProps },
-          { suppressRefError: !placed }
-        ),
-        children: /* @__PURE__ */ jsx(
-          PopperContent,
+        onPresenceChange: (presence) => {
+          if (!presence) {
+            setPlaced(presence);
+          }
+        },
+        open: isOpen,
+        presence: placed,
+        children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+          MenuListbox,
           {
-            align,
-            onPlaced: () => setPlaced(true),
-            side,
-            sideOffset: 5,
-            children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+            asChild: true,
+            maxH: "sm",
+            minW: loading ? "trigger" : void 0,
+            provider: "popper",
+            ...content({}, className),
+            ...boxProps,
+            ...downshift.getMenuProps(
+              { ref, ...restProps },
+              { suppressRefError: !placed }
+            ),
+            children: /* @__PURE__ */ jsx(
+              PopperContent,
+              {
+                align,
+                asChild: !loading && typeof children === "function",
+                onPlaced: () => setPlaced(true),
+                side,
+                sideOffset: 5,
+                children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children ? typeof children === "function" ? /* @__PURE__ */ jsx(
+                  ListboxVirtualized,
+                  {
+                    highlightedItem,
+                    items,
+                    children
+                  }
+                ) : children : items.map((item) => {
+                  return /* @__PURE__ */ jsx(SelectRadioItem, { item, children: itemToLabel(item) }, itemToValue(item));
+                })
+              }
+            )
           }
-        )
+        ) }) })
       }
-    ) }) });
+    );
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";

package/dist/esm/packages/react/src/select-hidden-select/SelectHiddenSelect.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { useSelectContext } from '../select-context/SelectContext.js';
+
+const SelectHiddenSelect = forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
+  const { items, itemToLabel, itemToValue } = useSelectContext(
+    "@optiaxiom/react/SelectHiddenSelect"
+  );
+  return /* @__PURE__ */ jsx(VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      defaultValue,
+      disabled,
+      name,
+      onChange,
+      ref,
+      required,
+      tabIndex: -1,
+      value,
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "" }),
+        items.map((item) => /* @__PURE__ */ jsx("option", { value: itemToValue(item), children: itemToLabel(item) }, itemToValue(item)))
+      ]
+    }
+  ) });
+});
+SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
+
+export { SelectHiddenSelect };

package/dist/esm/packages/react/src/select-item/SelectItem.js

@@ -7,12 +7,25 @@ import '../sprinkles/sprinklesMerge.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 
 const SelectItem = forwardRef(
-  ({ children, item, size, ...props }, ref) => {
-    const { downshift, highlightedItem, selectedItem } = useSelectContext(
-      "@optiaxiom/react/SelectItem"
-    );
-    const itemProps = downshift.getItemProps({ item, ref, ...props });
-    itemProps["aria-selected"] = selectedItem === item;
+  ({ children, item, onMouseMove, size, ...props }, ref) => {
+    const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+    const itemProps = downshift.getItemProps({
+      item,
+      onMouseMove: (event) => {
+        onMouseMove?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!isOpen) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+        }
+      },
+      ref,
+      ...props
+    });
     return /* @__PURE__ */ jsx(
       Box,
       {

package/dist/esm/packages/react/src/select-trigger/SelectTrigger.js

@@ -16,11 +16,12 @@ const SelectTrigger = forwardRef(
     "aria-labelledby": ariaLabelledBy,
     asChild,
     children,
+    onBlur: onBlurProp,
     onKeyDown,
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, itemToLabel, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = extractBoxProps(props);
     const buttonRef = useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -33,7 +34,7 @@ const SelectTrigger = forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToString(selectedItem) : placeholder;
+    const value = selectedItem ? itemToLabel(selectedItem) : placeholder;
     return /* @__PURE__ */ jsx(
       PopperAnchor,
       {
@@ -43,10 +44,15 @@ const SelectTrigger = forwardRef(
           ...restProps,
           "aria-labelledby": labelId,
           disabled,
+          onBlur: (event) => {
+            onBlurProp?.(event);
+            onBlur?.(event);
+          },
           onKeyDown: (event) => {
             onKeyDown?.(event);
             document.dispatchEvent(new Event("tooltip.open"));
-          }
+          },
+          type: "button"
         }),
         children: /* @__PURE__ */ jsx(Slot, { ref, children: asChild ? decorateChildren(
           { asChild, children },

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-DIu23l0k.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-DiGfLTN9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_h2fokeqwgislkw3fqntlep77qq/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_5l53e',md:'j218kg',base:'_15ao9gs'},defaultClass:'_15ao9gs'},vertical:{conditions:{sm:'ugmopu',md:'otnhkw',base:'_19rtwqk'},defaultClass:'_19rtwqk'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1ei1g34',md:'pxhni6',base:'_1tho3lc'},defaultClass:'_1tho3lc'},vertical:{conditions:{sm:'_1refkoc',md:'_13mi3n9',base:'_11gcuj5'},defaultClass:'_11gcuj5'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BCNl7fHi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-DG9soKiN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'kjwm40']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'ydjiym']});
 
 export { skeleton };

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpowjLes.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-S8qGkvOP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-Cad6t5Kv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_17mc3vz',inverse:'rjf6k1'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_1036k15',inverse:'_1b38fkx'}}});
 
 export { track };