@optiaxiom/react 1.3.6 → 1.4.0

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-L9Fx5VZc.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-C6TM5Ak5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-D8hePLeg.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-BeC2R8ur.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1m4udcq'],variants:{pinned:{left:'dn5wae',right:'_1mehsjg'},pinnedType:{body:'iktydb',header:{}}}});
-var cellOffsetVar = 'var(--vcjzw)';
-var cellSizeVar = 'var(--o9mv9v)';
-var header = recipeRuntime({base:[{display:'grid'},'_2snwe2']});
-var leftTotalSizeVar = 'var(--_4mhe59)';
-var rightTotalSizeVar = 'var(--_1xvgvzn)';
-var table = recipeRuntime({base:'xlelnu',variants:{pinned:{both:'_1r443se',left:'_17yaj58',none:{},right:'fh2cqt'}}});
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_698l04'],variants:{pinned:{left:'_1dsu83o',right:'fmzssp'},pinnedType:{body:'_1e2a2f0',header:{}}}});
+var cellOffsetVar = 'var(--_1hvhdp0)';
+var cellSizeVar = 'var(--_19sawrn)';
+var header = recipeRuntime({base:[{display:'grid'},'_1vnygnz']});
+var leftTotalSizeVar = 'var(--_151po6m)';
+var rightTotalSizeVar = 'var(--rh9urp)';
+var table = recipeRuntime({base:'_1ujmfci',variants:{pinned:{both:'w9fkbs',left:'_16zguy3',none:{},right:'_5b4mrw'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -11,7 +11,7 @@ import '../table/TableAction.js';
 import { TableBody } from '../table/TableBody.js';
 import { TableCell } from '../table/TableCell.js';
 import { TableHeader } from '../table/TableHeader.js';
-import { TableHeaderCell } from '../table/TableHeaderCell.js';
+import '../table/TableHeaderCell.js';
 import { TableRow } from '../table/TableRow.js';
 import { table, header, cell, cellSizeVar, cellOffsetVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 import { useDataTableContext } from './DataTableContext.js';
@@ -58,30 +58,27 @@ const DataTableBody = forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { display: "flex", children: [
-            headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-              DataTableHeaderCell,
-              {
-                header,
-                style: {
-                  ...assignInlineVars({
-                    [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                    [cellSizeVar]: `${header.getSize()}px`
-                  })
-                },
-                ...cell({
-                  pinned: header.column.getIsPinned() || void 0,
-                  pinnedType: header.column.getIsPinned() ? "header" : void 0
-                }),
-                children: header.isPlaceholder ? null : flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
+          /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+            DataTableHeaderCell,
+            {
+              header,
+              style: {
+                ...assignInlineVars({
+                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                  [cellSizeVar]: `${header.getSize()}px`
+                })
               },
-              header.id
-            )),
-            /* @__PURE__ */ jsx(TableHeaderCell, { flex: "1", p: "0", w: "0" })
-          ] }, headerGroup.id)) }),
+              ...cell({
+                pinned: header.column.getIsPinned() || void 0,
+                pinnedType: header.column.getIsPinned() ? "header" : void 0
+              }),
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          )) }, headerGroup.id)) }),
           /* @__PURE__ */ jsx(
             TableBody,
             {
@@ -156,8 +153,7 @@ const DataTableBody = forwardRef(
                         children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
                       cell$1.id
-                    )),
-                    /* @__PURE__ */ jsx(TableCell, { flex: "1", p: "0", w: "0" })
+                    ))
                   ]
                 },
                 row.id

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Berk5yuA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CasZXHnd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1ivxycp',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'g7852w',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-Da09UJwb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-CxzbR_uv.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'},'_4bsdfs']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'bs5vyn'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_4d088f'],variants:{active:{false:'_15f0ff2',true:'_1ds5m0l'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1dh81m7']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1ot8u9i'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1botmij'],variants:{active:{false:'_1ij08kn',true:'fer3zz'}}});
 
 export { button, handle, icon };

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

@@ -1,8 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-DZAvtgCf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Ry85LfNR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:'_15dofjc'});
-var picker = recipeRuntime({base:'bjnqfm'});
+var clear = recipeRuntime({base:[{size:'sm'},'vwbrc9']});
+var date = recipeRuntime({base:'_18slptf'});
+var input = recipeRuntime({base:'mafrl'});
+var picker = recipeRuntime({base:'mmb9xb'});
 
-export { input, picker };
+export { clear, date, input, picker };

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

@@ -6,7 +6,6 @@ import { forwardRef, useState, useRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { Calendar } from '../calendar/Calendar.js';
-import { Flex } from '../flex/Flex.js';
 import '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
@@ -14,6 +13,7 @@ import '../utils/isHoverSupported.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainDateTime } from '../utils/toPlainDateTime.js';
 import { IconCalendar } from '../icons/IconCalendar.js';
+import { IconX } from '../icons/IconX.js';
 import { Input } from '../input/Input.js';
 import '../input/InputAddon.js';
 import '../input/InputControl.js';
@@ -22,11 +22,12 @@ import { Popover } from '../popover/Popover.js';
 import { PopoverAnchor } from '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
 import { PopoverTrigger } from '../popover/PopoverTrigger.js';
-import { input, picker } from './DateInput-css.js';
+import { date, input, picker, clear } from './DateInput-css.js';
 import { toInstant } from './utils.js';
 
 const DateInput = forwardRef(
   ({
+    className,
     disabled,
     holiday,
     max,
@@ -49,22 +50,37 @@ const DateInput = forwardRef(
     });
     const forceValueChange = useObserveValue(innerRef, setValue);
     const instant = typeof value === "string" ? toInstant(value) ?? null : null;
+    const [month, setMonth] = useState(instant ?? void 0);
     const maxDate = max ? toInstant(max) : void 0;
     const minDate = min ? toInstant(min) : void 0;
     return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
       /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
         Input,
         {
-          addonAfter: !disabled && /* @__PURE__ */ jsx(
-            PopoverTrigger,
+          addonAfter: value && !props.required && /* @__PURE__ */ jsx(
+            Button,
             {
               appearance: "subtle",
+              "aria-label": "Clear",
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              onPointerDown: (event) => {
+                event.preventDefault();
+                forceValueChange("");
+              },
+              tabIndex: -1,
+              ...clear()
+            }
+          ),
+          addonBefore: /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
               "aria-label": "Show date picker",
+              asChild: true,
               hasCustomAnchor: true,
-              icon: /* @__PURE__ */ jsx(IconCalendar, {}),
               ref: pickerRef,
-              size: "sm",
-              ...picker()
+              role: "img",
+              ...picker(),
+              children: /* @__PURE__ */ jsx(IconCalendar, {})
             }
           ),
           asChild: true,
@@ -74,6 +90,7 @@ const DateInput = forwardRef(
           onChange: (event) => {
             onChange?.(event);
             setValue(event.target.value);
+            setMonth(toInstant(event.target.value));
           },
           onClick: (e) => {
             if (CSS.supports("selector(::-webkit-datetime-edit)")) {
@@ -81,14 +98,20 @@ const DateInput = forwardRef(
             }
           },
           onKeyDown: (e) => {
-            if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
-              e.preventDefault();
-              setOpen(true);
+            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+              if (e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setOpen(false);
+              }
             }
           },
           ref,
           step,
           type,
+          ...date({}, className),
           ...props,
           children: /* @__PURE__ */ jsx("input", { ...input() })
         }
@@ -117,6 +140,8 @@ const DateInput = forwardRef(
                 holiday,
                 max: maxDate,
                 min: minDate,
+                month,
+                onMonthChange: setMonth,
                 onValueChange: (date) => {
                   if (!date) {
                     return;
@@ -134,21 +159,15 @@ const DateInput = forwardRef(
                 weekend
               }
             ),
-            (!props.required || type === "datetime-local") && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [
-              !props.required && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => {
-                    forceValueChange("");
-                    if (type === "date") {
-                      setOpen(false);
-                    }
-                  },
-                  children: "Clear"
-                }
-              ),
-              type === "datetime-local" && /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: () => setOpen(false), children: "Done" })
-            ] })
+            type === "datetime-local" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                flex: "none",
+                justifyContent: "center",
+                onClick: () => setOpen(false),
+                children: "Done"
+              }
+            )
           ]
         }
       )

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});

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

@@ -15,26 +15,23 @@ import '../popover/PopoverContent.js';
 import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { useDateRangePickerContext } from './DateRangePickerContext.js';
 
-const DEFAULT_FORMATTER = (date) => date.from && date.to ? date.from.toLocaleDateString(void 0, {
+const dateFormatter = new Intl.DateTimeFormat(void 0, {
   day: "numeric",
   month: "short",
   year: "numeric"
-}) + " - " + date.to.toLocaleDateString(void 0, {
-  day: "numeric",
-  month: "short",
-  year: "numeric"
-}) : null;
+});
 const DateRangePickerTrigger = forwardRef(
   ({
     "aria-labelledby": ariaLabelledBy,
     children,
-    format = DEFAULT_FORMATTER,
+    formatRange,
     placeholder = "Pick a date",
     ...props
   }, outerRef) => {
     const { disabled, value } = useDateRangePickerContext(
       "@optiaxiom/react/DateRangePickerTrigger"
     );
+    const formatter = formatRange ? { formatRange } : dateFormatter;
     const buttonRef = useRef(null);
     const ref = useComposedRefs(outerRef, buttonRef);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -46,7 +43,7 @@ const DateRangePickerTrigger = forwardRef(
         icon: /* @__PURE__ */ jsx(IconCalendar, {}),
         ref,
         ...props,
-        children: children ?? (value ? format(value) : /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: placeholder }))
+        children: children ?? (value ? formatter.formatRange(value.from, value.to) : /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: placeholder }))
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Cdq4Tadx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DGcCE6wN.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'},'_1u9i7n8']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'ag0h88']});
 
 export { body };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-B-s0-vtH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-C15H64bZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'of7v2d'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1gsu9ww'],variants:{size:{sm:'msliyc',md:'_1wfp9l2',lg:'_13vauzj',fullscreen:'_1emtnuz'}}});
-var nestedDialogCountVar = 'var(--sx0boz)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'f9u5m4'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'ykcbju'],variants:{size:{sm:'_1au5xhy',md:'twiygm',lg:'rdlpw4',fullscreen:'orub38'}}});
+var nestedDialogCountVar = 'var(--wr85l9)';
 
 export { backdrop, content, nestedDialogCountVar };

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

@@ -8,6 +8,7 @@ import { Backdrop } from '../backdrop/Backdrop.js';
 import { ModalProvider } from '../modal/ModalContext.js';
 import '../modal/ModalLayer.js';
 import { Paper } from '../paper/Paper.js';
+import { Portal } from '../portal/Portal.js';
 import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
 import '../utils/conditions.js';
@@ -30,7 +31,7 @@ const DialogContent = forwardRef(
     );
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(Portal, { children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
         Backdrop,
         {

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.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/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DWMzPbgh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-geHFKsr2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_4qn358']});
-var close = recipeRuntime({base:['_18y067l']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1y7ibss']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1jdpq0i']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_14jnzy3']});
+var close = recipeRuntime({base:['twt3gz']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1saz83w']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_19p7alr']});
 
 export { actions, close, description, title };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DPZl5rIE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DYyeWrcN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['in4jc8']});
-var outer = recipeRuntime({base:[{display:'grid'},'egevmr']});
+var inner = recipeRuntime({base:['_1ge0x14']});
+var outer = recipeRuntime({base:[{display:'grid'},'_176faqu']});
 
 export { inner, outer };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-C7s7QvBu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-BHU9nTbx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'qul032',start:'_1taon2q'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'xid362']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1odnipx']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1785mez',start:'_8302ym'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1c4lkd4']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_12l2fv9']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/downshift/usePortalPatch.js

@@ -1,7 +1,12 @@
 "use client";
 import { useState, useEffect } from 'react';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import 'react/jsx-runtime';
+import '../utils/isHoverSupported.js';
 
-function usePortalPatch(open, initialHighlightedIndex = -1) {
+function usePortalPatch(open, getInitialHighlightedIndex) {
   const [placed, setPlaced] = useState(false);
   useEffect(() => {
     if (open) {
@@ -11,13 +16,16 @@ function usePortalPatch(open, initialHighlightedIndex = -1) {
     }
   }, [open, setPlaced]);
   const [highlightedIndex, setHighlightedIndex] = useState(
-    initialHighlightedIndex
+    getInitialHighlightedIndex
+  );
+  const getInitialHighlightedIndexStable = useEffectEvent(
+    getInitialHighlightedIndex
   );
   useEffect(() => {
     if (!placed) {
-      setHighlightedIndex(initialHighlightedIndex);
+      setHighlightedIndex(getInitialHighlightedIndexStable);
     }
-  }, [initialHighlightedIndex, placed]);
+  }, [getInitialHighlightedIndexStable, placed]);
   return [
     /**
      * Downshift attempts to scroll to the currently selected item when the menu

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

@@ -14,7 +14,6 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import { ListboxSwitchItem } from '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 
 const DropdownMenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(RadixMenu.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxSwitchItem, { children }) });

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

@@ -6,6 +6,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { ModalListbox } from '../modal/ModalListbox.js';
+import { Portal } from '../portal/Portal.js';
 import { Spinner } from '../spinner/Spinner.js';
 import '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
@@ -21,7 +22,7 @@ const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ..
       onPresenceChange: setPresence,
       open,
       presence,
-      children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
         ModalListbox,
         {
           asChild: true,

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

@@ -6,11 +6,9 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const DropdownMenuGroup = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Group, { children }) });
-  }
-);
+const DropdownMenuGroup = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Group, { children }) });
+});
 DropdownMenuGroup.displayName = "@optiaxiom/react/DropdownMenuGroup";
 
 export { DropdownMenuGroup };

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

@@ -14,7 +14,6 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 import { useDropdownMenuContext } from './DropdownMenuContext.js';
 
 const DropdownMenuItem = forwardRef(({ asChild, children, onSelect, ...props }, ref) => {

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

@@ -6,11 +6,9 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const DropdownMenuLabel = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", p: "8", ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Label, { children }) });
-  }
-);
+const DropdownMenuLabel = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", p: "8", ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Label, { children }) });
+});
 DropdownMenuLabel.displayName = "@optiaxiom/react/DropdownMenuLabel";
 
 export { DropdownMenuLabel };

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

@@ -14,7 +14,6 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 
 const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxSeparator, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";

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

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { ModalListbox } from '../modal/ModalListbox.js';
+import { Portal } from '../portal/Portal.js';
 import '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
 import { useDropdownMenuSubContext } from './DropdownMenuSubContext.js';
@@ -11,7 +12,7 @@ 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(
+  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
     ModalListbox,
     {
       asChild: true,

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

@@ -15,7 +15,6 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 
 const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(ListboxItem, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Ni7ZUHUo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-DmgRrxyU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_6ala4g'});
+var mark = recipeRuntime({base:'_8aa34x'});
 
 export { mark };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DsiB7ym7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-mf5TryfP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1f09n3q',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'nii4k5']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_145s4ox']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_12bwm0p'],variants:{offset:{false:'cmqi33',true:{}},position:{'bottom-right':'_1lu8xbu','top-right':'_1ywi5u4'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_82idl6']});
+var badge = recipeRuntime({base:'_1gzd2y1',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_9v8tgu']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'bkazp6']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1pp73uz'],variants:{offset:{false:'h2atr3',true:{}},position:{'bottom-right':'_10wnaos','top-right':'lsunvj'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'bmjdwj']});
 
 export { badge, floating, indicator };