@optiaxiom/react 1.3.6 → 1.4.1

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

@@ -1,14 +1,15 @@
-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-CN-ptlpS.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-y2sGvAVd.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-B_BvVbLX.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'},'v3vlox'],variants:{pinned:{left:'bphej6',right:'c2dkrb'},pinnedType:{body:'_1lohb6y',header:{}}}});
+var cellOffsetVar = 'var(--_1syaoi7)';
+var cellSizeVar = 'var(--_3mq2hn)';
+var header = recipeRuntime({base:[{display:'grid'},'_1l873up']});
+var leftTotalSizeVar = 'var(--_1k0eeyd)';
+var rightTotalSizeVar = 'var(--_3271g5)';
+var table = recipeRuntime({base:'bjb7aa',variants:{pinned:{both:'_1rx0mbq',left:'_2ky1n9',none:{},right:'ftpwb'}}});
+var totalSizeVar = 'var(--_19guvqp)';
 
-export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table, totalSizeVar };

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

@@ -11,9 +11,9 @@ 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 { table, header, cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 import { useDataTableContext } from './DataTableContext.js';
 import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 
@@ -48,7 +48,8 @@ const DataTableBody = forwardRef(
         ref,
         style: assignInlineVars({
           [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
-          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`,
+          [totalSizeVar]: `${table$1.getTotalSize()}`
         }),
         ...table(
           {
@@ -58,30 +59,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()}`
+                })
               },
-              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,
             {
@@ -112,7 +110,7 @@ const DataTableBody = forwardRef(
                         style: {
                           ...assignInlineVars({
                             [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
                           })
                         },
                         ...cell({
@@ -132,7 +130,7 @@ const DataTableBody = forwardRef(
                       {
                         style: {
                           ...assignInlineVars({
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
                           })
                         },
                         ...cell(),
@@ -146,7 +144,7 @@ const DataTableBody = forwardRef(
                         style: {
                           ...assignInlineVars({
                             [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
                           })
                         },
                         ...cell({
@@ -156,8 +154,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-CN-ptlpS.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Dfr-ZVsQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1ivxycp',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_38o68m',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-CN-ptlpS.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BDXyWNw-.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'},'_4fvazl']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1v3d7db'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1lydxuj'],variants:{active:{false:'p2w03w',true:'cu7w8o'}}});
 
 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-CN-ptlpS.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Kyyq361k.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:'_15dofjc'});
-var picker = recipeRuntime({base:'bjnqfm'});
+var clear = recipeRuntime({base:[{size:'sm'},'_4oj1c1']});
+var date = recipeRuntime({base:'_1vr3os2'});
+var input = recipeRuntime({base:'s354nb'});
+var picker = recipeRuntime({base:'_14h9pme'});
 
-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-CN-ptlpS.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-CN-ptlpS.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-uYY5DsHe.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'},'_1jwv6jm']});
 
 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-CN-ptlpS.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-Ce79BS9p.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:'ww9beu'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1ce2a9l'],variants:{size:{sm:'_36l4tp',md:'n4qto6',lg:'_1ebv4vh',fullscreen:'_1kynhyy'}}});
+var nestedDialogCountVar = 'var(--jb8ae8)';
 
 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-CN-ptlpS.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-CN-ptlpS.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-D5qNkX1z.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'},'_15qqzqt']});
+var close = recipeRuntime({base:['_14dj8nh']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'cnlljw']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'ckzld7']});
 
 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-CN-ptlpS.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-C0URMyiR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['in4jc8']});
-var outer = recipeRuntime({base:[{display:'grid'},'egevmr']});
+var inner = recipeRuntime({base:['n7xyrd']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1q9vbt1']});
 
 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-CN-ptlpS.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-B7jh3O1M.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:'_12zs6fx',start:'_220i6g'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_18iv6vr']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'m8jaw0']});
 
 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 }) });