@optiaxiom/react 0.13.0 → 0.13.1

package/dist/esm/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DOFxVbIV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Ba5NC_AS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1edynus'});
+var item = recipeRuntime({base:'_16qybo6'});
 
 export { item };

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

@@ -10,6 +10,7 @@ const CommandItem = forwardRef(
     const itemProps = downshift.getItemProps({
       "aria-selected": selected ?? value?.has(item),
       item,
+      ref,
       ...props
     });
     return /* @__PURE__ */ jsx(
@@ -17,7 +18,6 @@ const CommandItem = forwardRef(
       {
         "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
         "data-highlighted": highlightedItem === item ? "" : void 0,
-        ref,
         size,
         tabIndex: -1,
         ...itemProps,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-B-I3ddwo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVoaPd3v.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{overlay:{false:{},true:['ulsqec','lc91f6']}}});
+var cover = recipeRuntime({variants:{overlay:{false:{},true:['_1opmuma','_1xdctdj']}}});
 
 export { cover };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CgvKoCRz.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-CbD9vNcU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C4Vu9cf4.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-DIqBRd91.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_9zg2pa'],variants:{pinned:{left:'u4bbji',right:'sdm6uy'},pinnedType:{body:'l1akui',header:{}}}});
-var cellOffsetVar = 'var(--_13mxk2m)';
-var cellSizeVar = 'var(--b669pf)';
-var header = recipeRuntime({base:['_183xdxw']});
-var leftTotalSizeVar = 'var(--_3gyhym)';
-var rightTotalSizeVar = 'var(--_14j1dyj)';
-var table = recipeRuntime({base:'d7848j',variants:{pinned:{both:'_1585f9r',left:'_1iclc34',none:{},right:'vk97ad'}}});
+var cell = recipeRuntime({base:[{display:'flex'},'_1gg90t8'],variants:{pinned:{left:'vumz7',right:'_9ur6n1'},pinnedType:{body:'_1otcv8x',header:{}}}});
+var cellOffsetVar = 'var(--_1xfi2as)';
+var cellSizeVar = 'var(--t8ry6n)';
+var header = recipeRuntime({base:[{display:'grid'},'_15qgxt1']});
+var leftTotalSizeVar = 'var(--qix54)';
+var rightTotalSizeVar = 'var(--us84oq)';
+var table = recipeRuntime({base:'rr6exg',variants:{pinned:{both:'_1qvxp6f',left:'mdjv7w',none:{},right:'_17otbbz'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,13 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
 import { Pagination } from '../pagination/Pagination.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
 import { Table } from '../table/Table.js';
 import { TableBody } from '../table-body/TableBody.js';
 import { TableCell } from '../table-cell/TableCell.js';
@@ -15,8 +17,28 @@ import { TableHeader } from '../table-header/TableHeader.js';
 import { TableRow } from '../table-row/TableRow.js';
 import { table, header, cell, cellSizeVar, cellOffsetVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTable-css.js';
 
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
 const DataTable = forwardRef(
-  ({ table: table$1, ...props }, ref) => {
+  ({ estimatedRowHeight = 52, loading, table: table$1, ...props }, ref) => {
+    const tableRef = useRef(null);
+    const { rows } = table$1.getRowModel();
+    const centerColumns = table$1.getCenterVisibleLeafColumns();
+    const columnVirtualizer = useVirtualizer({
+      count: centerColumns.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+      estimateSize: (index) => centerColumns[index].getSize(),
+      getScrollElement: () => tableRef.current,
+      horizontal: true
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+    const rowVirtualizer = useVirtualizer({
+      count: rows.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+      estimateSize: () => estimatedRowHeight,
+      getScrollElement: () => tableRef.current
+    });
     return /* @__PURE__ */ jsxs(
       Box,
       {
@@ -31,6 +53,7 @@ const DataTable = forwardRef(
             Table,
             {
               layout: "fixed",
+              ref: tableRef,
               style: assignInlineVars({
                 [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
                 [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
@@ -39,7 +62,7 @@ const DataTable = forwardRef(
                 pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
               }),
               children: [
-                /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
                   DataTableHeaderCell,
                   {
                     header,
@@ -60,28 +83,86 @@ const DataTable = forwardRef(
                   },
                   header.id
                 )) }, headerGroup.id)) }),
-                /* @__PURE__ */ jsx(TableBody, { children: table$1.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell$1) => {
-                  return /* @__PURE__ */ jsx(
-                    TableCell,
-                    {
-                      style: {
-                        ...assignInlineVars({
-                          [cellOffsetVar]: `${cell$1.column.getStart(cell$1.column.getIsPinned() || "left")}px`,
-                          [cellSizeVar]: `${cell$1.column.getSize()}px`
-                        })
+                /* @__PURE__ */ jsx(
+                  TableBody,
+                  {
+                    display: "grid",
+                    style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+                    children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
+                      row: fakeRow(table$1, rowIndex),
+                      virtualRow: void 0
+                    })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
+                      row: rows[virtualRow.index],
+                      virtualRow
+                    })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxs(
+                      TableRow,
+                      {
+                        "data-index": virtualRow?.index,
+                        display: "flex",
+                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                        style: virtualRow ? {
+                          minHeight: virtualRow.size,
+                          position: "absolute",
+                          transform: `translateY(${virtualRow.start}px)`
+                        } : void 0,
+                        children: [
+                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
+                                })
+                              },
+                              ...cell({
+                                pinned: "left",
+                                pinnedType: "body"
+                              }),
+                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                            },
+                            cell$1.id
+                          )),
+                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                            const cells = row.getCenterVisibleCells();
+                            return cells[virtualCell.index];
+                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              style: {
+                                ...assignInlineVars({
+                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
+                                })
+                              },
+                              ...cell(),
+                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                            },
+                            cell$1.id
+                          )),
+                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
+                                })
+                              },
+                              ...cell({
+                                pinned: "right",
+                                pinnedType: "body"
+                              }),
+                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                            },
+                            cell$1.id
+                          ))
+                        ]
                       },
-                      ...cell({
-                        pinned: cell$1.column.getIsPinned() || void 0,
-                        pinnedType: cell$1.column.getIsPinned() ? "body" : void 0
-                      }),
-                      children: flexRender(
-                        cell$1.column.columnDef.cell,
-                        cell$1.getContext()
-                      )
-                    },
-                    cell$1.id
-                  );
-                }) }, row.id)) })
+                      row.id
+                    ))
+                  }
+                )
               ]
             }
           ),
@@ -99,5 +180,26 @@ const DataTable = forwardRef(
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";
+const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
+  column,
+  getContext: () => ({}),
+  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+}));
+const fakeCellWidth = (id) => id.split("-")[1];
+const fakeRow = (table, rowIndex) => ({
+  getCenterVisibleCells: fakeCellsFactory(
+    table.getCenterVisibleLeafColumns(),
+    rowIndex
+  ),
+  getLeftVisibleCells: fakeCellsFactory(
+    table.getLeftVisibleLeafColumns(),
+    rowIndex
+  ),
+  getRightVisibleCells: fakeCellsFactory(
+    table.getRightVisibleLeafColumns(),
+    rowIndex
+  ),
+  id: "loading" + rowIndex
+});
 
 export { DataTable };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BPJHzlBh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-D8iEaYLp.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'ka7ruu','toplv5']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1yjmu2n'],variants:{active:{false:'_1oame5a',true:'_1e7j5ao'},muted:{false:{},true:'_1f00x7k'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1i01mwe','_14nbm67']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'mn8317'],variants:{active:{false:'_1sj8xtf',true:'_1edduah'},muted:{false:{},true:'_37lpdj'}}});
 
 export { button, icon };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BOZIK-Va.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var picker = recipeRuntime({base:'_1p2euk6'});
+
+export { picker };

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

@@ -1,9 +1,11 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useState, useRef } from 'react';
+import { Button } from '../button/Button.js';
 import { Calendar } from '../calendar/Calendar.js';
+import { Flex } from '../flex/Flex.js';
 import { IconCalendar } from '../icons/IconCalendar.js';
 import { Input } from '../input/Input.js';
 import { Popover } from '../popover/Popover.js';
@@ -13,7 +15,7 @@ import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { forceValueChange } from '../utils/forceValueChange.js';
-import { useCalendarSupported } from './useCalendarSupported.js';
+import { picker } from './DateInput-css.js';
 import { parse, format } from './utils.js';
 
 const DateInput = forwardRef(
@@ -27,23 +29,6 @@ const DateInput = forwardRef(
     const ref = useComposedRefs(innerRef, outerRef);
     const maxDate = max ? new Date(max) : void 0;
     const minDate = min ? new Date(min) : void 0;
-    const supported = useCalendarSupported();
-    if (supported === null) {
-      return null;
-    } else if (!supported) {
-      return /* @__PURE__ */ jsx(
-        Input,
-        {
-          disabled,
-          max,
-          min,
-          onChange,
-          ref,
-          type: "date",
-          ...props
-        }
-      );
-    }
     return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
       /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
         Input,
@@ -53,8 +38,10 @@ const DateInput = forwardRef(
             {
               appearance: "subtle",
               "aria-label": "Show date picker",
+              hasCustomAnchor: true,
               icon: /* @__PURE__ */ jsx(IconCalendar, {}),
-              size: "sm"
+              size: "sm",
+              ...picker()
             }
           ),
           disabled,
@@ -68,7 +55,7 @@ const DateInput = forwardRef(
             e.preventDefault();
           },
           onKeyDown: (e) => {
-            if (e.key === " ") {
+            if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
               e.preventDefault();
               setOpen(true);
             }
@@ -78,30 +65,46 @@ const DateInput = forwardRef(
           ...props
         }
       ) }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         PopoverContent,
         {
+          gap: "8",
           onCloseAutoFocus: (event) => {
             event.preventDefault();
             innerRef.current?.focus();
           },
-          children: /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              max: maxDate,
-              min: minDate,
-              onValueChange: (date) => {
-                if (!date) {
-                  return;
-                }
-                if (innerRef.current) {
-                  forceValueChange(innerRef?.current, format(date));
-                }
-                setOpen(false);
-              },
-              value: parse(value)
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                max: maxDate,
+                min: minDate,
+                onValueChange: (date) => {
+                  if (!date) {
+                    return;
+                  }
+                  if (innerRef.current) {
+                    forceValueChange(innerRef?.current, format(date));
+                  }
+                  setOpen(false);
+                },
+                value: parse(value)
+              }
+            ),
+            /* @__PURE__ */ jsx(Flex, { flexDirection: "row", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                onClick: () => {
+                  if (innerRef.current) {
+                    forceValueChange(innerRef.current, "");
+                  }
+                  setOpen(false);
+                },
+                children: "Clear"
+              }
+            ) })
+          ]
         }
       )
     ] });

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BQ9-WHf6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-Ddt9KOuM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'baet66'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'psr1f'],variants:{size:{sm:'_1i9tkd2',md:'_135vpww',lg:'b2dor9',fullscreen:'iwiqy2'}}});
-var nestedDialogCountVar = 'var(--wd5f9v)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_98xec9'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_15c5b99'],variants:{size:{sm:'_70z7xj',md:'_1gwenpx',lg:'_1y7ad04',fullscreen:'tep9ar'}}});
+var nestedDialogCountVar = 'var(--_11v06c2)';
 
 export { backdrop, content, nestedDialogCountVar };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'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-DvUyVLsY.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-g_BPVGm3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-G61u2gKQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'n8i0u7']});
-var close = recipeRuntime({base:['_1apj6e6']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1dsbh3r']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1qr0chj']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'kquq0r']});
+var close = recipeRuntime({base:['_1aqk4ee']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1l1wphh']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1ubbx9m']});
 
 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-DvUyVLsY.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CoBOLDcZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Csj_lgJn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1pd5ixm']});
-var outer = recipeRuntime({base:[{display:'grid'},'_15gi53l']});
+var inner = recipeRuntime({base:['dup0ry']});
+var outer = recipeRuntime({base:[{display:'grid'},'_2lyiss']});
 
 export { inner, outer };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CiNDiK90.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CPpShJkA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1te8vyg',start:'_1cndddn'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',h:'lg',px:'8',transition:'colors'},'_1b69dxl']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_8jjarh',start:'_1krvtd4'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',h:'lg',px:'8',transition:'colors'},'_1bhnclw']});
 
 export { icon, trigger };

package/dist/esm/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-C5moTRX0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-CTcFfMDy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'hnjkmn']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'szdg3n']});
 
 export { actions };

package/dist/esm/packages/react/src/drawer-content/DrawerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-DrHSgLrl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-DwoG5d6e.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_16elo2n'],variants:{position:{bottom:[{borderT:'1'},'n4d0w7'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_8sjneu'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1qiwigc']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1clxqmh'],variants:{position:{bottom:[{borderT:'1'},'_1pqtk9t'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_36isd0'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1npfroe']}}});
 
 export { content };

package/dist/esm/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CRBMloeK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-BmdcM6zv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1v6taoa']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1n4r38c']});
 
 export { description };

package/dist/esm/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-C_2hFP_b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CM3wsGna.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_1wmxqq1']});
+var title = recipeRuntime({base:[{flex:'1'},'_17m27gc']});
 
 export { title };

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useState } from 'react';
 import { DropdownMenuContextProvider } from '../dropdown-menu-context/DropdownMenuContext.js';
 
 function DropdownMenu({
@@ -16,7 +17,16 @@ function DropdownMenu({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuContextProvider, { open, children }) });
+  const [presence, setPresence] = useState();
+  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    DropdownMenuContextProvider,
+    {
+      open,
+      presence,
+      setPresence,
+      children
+    }
+  ) });
 }
 DropdownMenu.displayName = "@optiaxiom/react/DropdownMenu";
 

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

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
+import { ListboxSwitchItem } from '../listbox-switch-item/ListboxSwitchItem.js';
 
 const DropdownMenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixMenu.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxCheckboxItem, { children }) });
+  return /* @__PURE__ */ jsx(RadixMenu.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxSwitchItem, { children }) });
 });
 DropdownMenuCheckboxItem.displayName = "@optiaxiom/react/DropdownMenuCheckboxItem";
 

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

@@ -11,17 +11,40 @@ import { Spinner } from '../spinner/Spinner.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
 const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ...props }, ref) => {
-  const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
-    MenuListbox,
+  const { open, presence, setPresence } = useDropdownMenuContext(
+    "DropdownMenuContent"
+  );
+  return /* @__PURE__ */ jsx(
+    TransitionGroup,
     {
-      asChild: true,
-      minW: loading ? "trigger" : void 0,
-      provider: "dropdown-menu",
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset: 4, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+      onPresenceChange: setPresence,
+      open,
+      presence,
+      children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+        MenuListbox,
+        {
+          asChild: true,
+          minW: loading ? "trigger" : void 0,
+          provider: "dropdown-menu",
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            RadixMenu.Content,
+            {
+              align,
+              onPointerMove: (event) => {
+                if (!open) {
+                  event.preventDefault();
+                }
+              },
+              ref,
+              sideOffset: 4,
+              children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+            }
+          )
+        }
+      ) })
     }
-  ) }) });
+  );
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";