@optiaxiom/react 1.2.5 → 1.3.1

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

@@ -1,29 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
 
 const CommandInput = forwardRef(
   ({ onKeyDown, size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      itemToSubItems,
-      setHighlightedSubIndex,
-      setInputValue
-    } = useCommandContext("@optiaxiom/react/CommandInput");
-    useEffect(() => {
-      setInputValue("");
-    }, [setInputValue]);
+    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 : "");
@@ -33,31 +27,24 @@ const CommandInput = forwardRef(
             if (event.defaultPrevented) {
               return;
             }
-            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
-              const subItems = itemToSubItems?.(highlightedItem) ?? [];
-              if (subItems.length === 0) {
-                return;
-              }
+            if (!(event.target instanceof HTMLInputElement)) {
+              return;
+            }
+            if (event.target.value) {
+              return;
+            }
+            if (!highlightedItem) {
+              return;
+            }
+            const subOptions = highlightedItem.subOptions;
+            if (event.key === " ") {
               event.preventDefault();
-              Object.assign(event.nativeEvent, {
-                preventDownshiftDefault: true
-              });
-              if (event.key === "ArrowRight") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
-                  "keyboard"
-                );
-              } else if (event.key === "ArrowLeft") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
-                  "keyboard"
-                );
-              } else if (event.key === "Enter") {
-                downshift.selectItem(subItems[highlightedSubIndex]);
-              }
+              downshift.selectItem(highlightedItem);
+            } else if (event.key === "ArrowRight" && subOptions?.length) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
             }
-          },
-          ref
+          }
         })
       }
     );

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

@@ -1,27 +1,81 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCommandContext } from '../command-context/CommandContext.js';
-import { CommandFocusableItem } from '../command-focusable-item/CommandFocusableItem.js';
+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';
 
 const CommandItem = forwardRef(
-  ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isItemSelected, items } = useCommandContext("@optiaxiom/react/CommandItem");
+  ({ asChild, children, item, selected, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, pauseInteractionRef } = useCommandContext("@optiaxiom/react/CommandItem");
     const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? isItemSelected(item, items.indexOf(item)),
+      "aria-selected": selected ?? resolveItemProperty(item.selected),
       item,
+      onClick: (event) => {
+        if (event.currentTarget instanceof HTMLAnchorElement) {
+          event.preventDefault();
+        }
+      },
+      onMouseMove: (event) => {
+        if (resolveItemProperty(item.disabledReason)) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          return;
+        }
+        if (!pauseInteractionRef.current.isInsideTriangle) {
+          return;
+        }
+        if (pauseInteractionRef.current.isInsideTriangle({
+          x: event.clientX,
+          y: event.clientY
+        })) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          window.clearTimeout(pauseInteractionRef.current.timer);
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+          }, 50);
+        } else {
+          pauseInteractionRef.current.isInsideTriangle = null;
+        }
+      },
       ref,
       ...props
     });
+    const detail = resolveItemProperty(item.detail, { inputValue });
     return /* @__PURE__ */ jsx(
-      CommandFocusableItem,
+      Box,
       {
+        asChild,
         "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
         "data-highlighted": highlightedItem === item ? "" : void 0,
         size,
         tabIndex: -1,
         ...itemProps,
-        children
+        ...item.link && { href: item.link },
+        children: decorateChildren(
+          { asChild, children },
+          (children2) => children2 ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            item.parentOption && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
+                inputValue
+              }) }),
+              /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
+            ] }),
+            resolveItemProperty(item.label, { inputValue }),
+            detail && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: detail })
+          ] })
+        )
       }
     );
   }

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

@@ -1,37 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useEffect, Fragment } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useCommandContext } from '../command-context/CommandContext.js';
-import { Listbox } from '../listbox/Listbox.js';
-import { ListboxEmpty } from '../listbox-empty/ListboxEmpty.js';
-import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
-import { Spinner } from '../spinner/Spinner.js';
+import { forwardRef } from 'react';
+import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
+import { ListboxItemized } from '../listbox-itemized/ListboxItemized.js';
 
-const VIRTUALIZE_THRESHOLD = 50;
 const CommandListbox = forwardRef(
-  ({ children, empty = "No results found.", loading, size, ...props }, ref) => {
-    const { downshift, highlightedItem, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
-    useEffect(() => {
-      requestAnimationFrame(() => setPlaced(true));
-      return () => setPlaced(false);
-    }, [setPlaced]);
+  ({ children, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
     return /* @__PURE__ */ jsx(
-      Listbox,
+      ListboxItemized,
       {
-        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        highlightedItem,
+        items,
+        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: setPlaced,
+        placed,
         size,
         ...downshift.getMenuProps({ ref, ...props }),
-        children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsx(
-          ListboxVirtualized,
-          {
-            highlightedItem,
-            items,
-            children
-          }
-        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: children(item) }, index)) : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty })
+        children
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-MaOs4its.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-CFXkX2QS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1jplud9','_1riho7v'],true:{}},inset:{false:'_8w7al6',true:'f4v3d3'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['pto8cg','_1svo1ab'],true:{}},inset:{false:'_401jb6',true:'_18zvqg5'}}});
 
 export { cover };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-Dzxs57Ca.css';
-import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-MsX92Doe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C8xEmbBv.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-DT67y1Z6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1iuw7iz'],variants:{pinned:{left:'y2wztl',right:'n26krp'},pinnedType:{body:'_1k2vu7v',header:{}}}});
-var cellOffsetVar = 'var(--_1r7wj72)';
-var cellSizeVar = 'var(--oqs8rg)';
-var header = recipeRuntime({base:[{display:'grid'},'_1dvu9uq']});
-var leftTotalSizeVar = 'var(--_12zd1fa)';
-var rightTotalSizeVar = 'var(--dm8p5p)';
-var table = recipeRuntime({base:'cl3n7r',variants:{pinned:{both:'_1v0nhcu',left:'_1xvq3du',none:{},right:'tjzwgn'}}});
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'w3f2u6'],variants:{pinned:{left:'przi2k',right:'_4hhea2'},pinnedType:{body:'jer5ns',header:{}}}});
+var cellOffsetVar = 'var(--_1mtov39)';
+var cellSizeVar = 'var(--_10b0tf5)';
+var header = recipeRuntime({base:[{display:'grid'},'_1poq2ke']});
+var leftTotalSizeVar = 'var(--_1tj311f)';
+var rightTotalSizeVar = 'var(--_1ygqjbh)';
+var table = recipeRuntime({base:'_1ys8i5x',variants:{pinned:{both:'_1ysbnzx',left:'_1fzpktf',none:{},right:'_18j0pz7'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BSLfrkW1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-CUUnuvvE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'w0mlxs',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_732vsj',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

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

@@ -14,7 +14,10 @@ import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
 import { Text } from '../text/Text.js';
 import { addon } from './DataTableFooter-css.js';
 
-const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
+  label: size,
+  value: size
+}));
 const DataTableFooter = forwardRef(
   ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
     const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
@@ -36,8 +39,8 @@ const DataTableFooter = forwardRef(
             /* @__PURE__ */ jsxs(
               Select,
               {
-                items: pageSizeOptions,
                 onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                options: pageSizeOptions,
                 value: pagination.pageSize.toString(),
                 children: [
                   /* @__PURE__ */ jsx(

package/dist/esm/packages/react/src/data-table-header-cell/DataTableHeaderCell-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CrqZmJXD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-Cl1-HqFR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1kzywp6']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'xuzae'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_12oj5j7'],variants:{active:{false:'_1usa78f',true:'_1ytyt7y'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1j2rrz']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1h86772'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1k4k6rc'],variants:{active:{false:'_1dr0ifh',true:'_1ahof'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BR8vi6FR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BaJS33T7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_3xxe0i'});
+var picker = recipeRuntime({base:'_4cn5iy'});
 
 export { picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -15,6 +15,7 @@ import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 import { useObserveValue } from '../use-observe-value/useObserveValue.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainDateTime } from '../utils/toPlainDateTime.js';
 import { picker } from './DateInput-css.js';

package/dist/esm/packages/react/src/date-picker-content/DatePickerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DhKbHjAB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C5ejyS0a.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1jbn8se']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'n36163']});
 
 export { panels };

package/dist/esm/packages/react/src/date-range-picker-content/DateRangePickerContent-css.js

@@ -1,7 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-CaPBBNgA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_142opfz']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
 
 export { panels };

package/dist/esm/packages/react/src/date-range-picker-content/DateRangePickerContent.js

@@ -9,6 +9,7 @@ import { PopoverContent } from '../popover-content/PopoverContent.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { panels } from './DateRangePickerContent-css.js';
 
@@ -42,6 +43,7 @@ const DateRangePickerContent = forwardRef(
         /* @__PURE__ */ jsx(
           Calendar,
           {
+            alignSelf: "start",
             holiday,
             max,
             min,

package/dist/esm/packages/react/src/dialog-body/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-D34fEDom.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-CmI_ANX6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'d6l8a9']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'d629sp']});
 
 export { body };

package/dist/esm/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CTrZhzGF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-RMNv9Lqm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_7tvtcj'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'d5vaz0'],variants:{size:{sm:'_1uh8dtp',md:'_19kjcix',lg:'og5uzz',fullscreen:'_1f8wops'}}});
-var nestedDialogCountVar = 'var(--_1a0o3hz)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'yn3f75'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_2uwmrr'],variants:{size:{sm:'_1o1egme',md:'ym04qy',lg:'evhtsc',fullscreen:'_49lak6'}}});
+var nestedDialogCountVar = 'var(--xi4npw)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog-content/DialogContent.js

@@ -12,6 +12,7 @@ import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 import { backdrop, content, nestedDialogCountVar } from './DialogContent-css.js';
 

package/dist/esm/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'}]});

package/dist/esm/packages/react/src/dialog-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-0DbxmJJE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-DDRAkIzV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_15bxf2h']});
-var close = recipeRuntime({base:['ju8xby']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1yaxyi']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_11rggyu']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_14751m2']});
+var close = recipeRuntime({base:['_1u6wyog']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'r32x3k']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'jnad73']});
 
 export { actions, close, description, title };

package/dist/esm/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Cf8_KbPG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CZ63c8aL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['nr844y']});
-var outer = recipeRuntime({base:[{display:'grid'},'jumvhf']});
+var inner = recipeRuntime({base:['_1u5fgxa']});
+var outer = recipeRuntime({base:[{display:'grid'},'_7cgzv3']});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-Defa1rUD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DWnSe8Ir.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1wnbfmu',start:'_137e53w'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'n8i9x9']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_18t7hg6']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_185mivf',start:'_18zluez'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'cf57ol']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1h6dxu8']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/dropdown-menu-content/DropdownMenuContent.js

@@ -6,7 +6,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
-import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
@@ -21,7 +21,7 @@ const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ..
       open,
       presence,
       children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
-        MenuListbox,
+        OverlayListbox,
         {
           asChild: true,
           minW: loading ? "trigger" : void 0,

package/dist/esm/packages/react/src/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -3,23 +3,32 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
-import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
 const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref) => {
   const { open, setPresence } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuSubContent"
   );
-  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
-    RadixMenu.SubContent,
+  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    OverlayListbox,
     {
-      alignOffset: -4,
-      asChild,
-      ref,
-      sideOffset: 0,
-      children
+      asChild: true,
+      minW: "trigger",
+      provider: "dropdown-menu",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadixMenu.SubContent,
+        {
+          alignOffset: -4,
+          asChild,
+          ref,
+          sideOffset: 0,
+          children
+        }
+      )
     }
-  ) }) }) });
+  ) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

package/dist/esm/packages/react/src/field/Field.js

@@ -12,6 +12,7 @@ import { IconTriangleExclamation } from '../icons/IconTriangleExclamation.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
+import '../utils/isHoverSupported.js';
 
 const Field = forwardRef(
   ({

package/dist/esm/packages/react/src/filtered-slot/FilteredSlot.js

@@ -5,7 +5,9 @@ import { forwardRef } from 'react';
 
 const FilteredSlot = forwardRef(
   ({ exclude, ...props }, ref) => {
-    delete props[exclude];
+    if (exclude) {
+      delete props[exclude];
+    }
     return /* @__PURE__ */ jsx(Slot, { ref, ...props });
   }
 );

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Xw-ns80B.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CwsU-HaV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'i6obck'});
+var mark = recipeRuntime({base:'_2x8rug'});
 
 export { mark };

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-Dv1nMsUG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DODouLxD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_115upev',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_1g9m2ac']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'gaemk9']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1nmx4ld'],variants:{offset:{false:'_1n6a8zf',true:{}},position:{'bottom-right':'_1r4nvrk','top-right':'_1cndnyv'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'cv4jvm']});
+var badge = recipeRuntime({base:'_1mchifr',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_39zd6s']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_12vom5c']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_12heisr'],variants:{offset:{false:'fsl09h',true:{}},position:{'bottom-right':'_1bqs7mm','top-right':'_1vjrmx'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'c1rbst']});
 
 export { badge, floating, indicator };

package/dist/esm/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-BdKXpj1z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DU5yHX96.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_7a7gm',variants:{empty:{false:{},true:'v0acjn'}}});
-var input = recipeRuntime({base:'w0lpc1'});
+var editor = recipeRuntime({base:'clqaag',variants:{empty:{false:{},true:'xrqdqk'}}});
+var input = recipeRuntime({base:'d09sm7'});
 
 export { editor, input };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/esm/packages/react/src/input/Input.js

@@ -9,6 +9,7 @@ import { InputControl } from '../input-control/InputControl.js';
 import { InputRoot } from '../input-root/InputRoot.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
+import '../utils/isHoverSupported.js';
 import { root, addon, input } from './Input-css.js';
 
 const Input = forwardRef(