@optiaxiom/react 0.13.0 → 0.13.2

package/dist/esm/packages/react/src/{autocomplete-virtualized/AutocompleteVirtualized.js → combobox-virtualized/ComboboxVirtualized.js}

@@ -9,7 +9,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
 
-const AutocompleteVirtualized = forwardRef(({ children, items, ...props }, outerRef) => {
+const ComboboxVirtualized = forwardRef(({ children, items, ...props }, outerRef) => {
   const innerRef = useRef(null);
   const ref = useComposedRefs(outerRef, innerRef);
   const [enabled, setEnabled] = useState(false);
@@ -22,7 +22,7 @@ const AutocompleteVirtualized = forwardRef(({ children, items, ...props }, outer
     estimateSize: () => 40,
     getScrollElement: () => innerRef.current
   });
-  const { downshift } = useCommandContext("AutocompleteVirtualized");
+  const { downshift } = useCommandContext("ComboboxVirtualized");
   useEffect(() => {
     rowVirtualizer.scrollToIndex(downshift.highlightedIndex);
   }, [downshift.highlightedIndex, enabled, rowVirtualizer]);
@@ -55,6 +55,6 @@ const AutocompleteVirtualized = forwardRef(({ children, items, ...props }, outer
     }
   ) });
 });
-AutocompleteVirtualized.displayName = "@optiaxiom/react/AutocompleteVirtualized";
+ComboboxVirtualized.displayName = "@optiaxiom/react/ComboboxVirtualized";
 
-export { AutocompleteVirtualized };
+export { ComboboxVirtualized };

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-DSlls5n2.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DaYj-sq1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1edynus'});
+var item = recipeRuntime({base:'_1a5dv9k'});
 
 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-DSlls5n2.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-Ci2yOQqa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{overlay:{false:{},true:['ulsqec','lc91f6']}}});
+var cover = recipeRuntime({variants:{disabled:{false:['bajrm1','_176z0j5'],true:{}},inset:{false:'_1apy5th',true:'ivl526'}}});
 
 export { cover };

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

@@ -7,7 +7,14 @@ import '../sprinkles/sprinklesMerge.js';
 import { cover } from './Cover-css.js';
 
 const Cover = forwardRef(
-  ({ className, overlay, ...props }, ref) => /* @__PURE__ */ jsx(Box, { ref, ...cover({ overlay }, className), ...props })
+  ({ className, disabled, inset = false, ...props }, ref) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      ...cover({ disabled, inset }, className),
+      ...props
+    }
+  )
 );
 Cover.displayName = "@optiaxiom/react/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-DSlls5n2.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-B77gD6Xr.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-jOZXGbmb.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'},'cmr7eo'],variants:{pinned:{left:'_92xjxj',right:'_16vos8y'},pinnedType:{body:'jm17hv',header:{}}}});
+var cellOffsetVar = 'var(--_13tn59e)';
+var cellSizeVar = 'var(--_1h9fw8t)';
+var header = recipeRuntime({base:[{display:'grid'},'_18ifbts']});
+var leftTotalSizeVar = 'var(--tdm48i)';
+var rightTotalSizeVar = 'var(--xbf8k0)';
+var table = recipeRuntime({base:'d5om10',variants:{pinned:{both:'_16gmpu0',left:'_1pyjs02',none:{},right:'_2zjhfh'}}});
 
 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-DSlls5n2.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-D9RKZYNB.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',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1vry02w']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1mlxmvb'],variants:{active:{false:'woqt7z',true:'gsfrc9'}}});
 
 export { button, icon };

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

@@ -2,10 +2,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Grid } from '../grid/Grid.js';
+import { ActionsContent } from '../actions-content/ActionsContent.js';
+import { ActionsRoot } from '../actions-root/ActionsRoot.js';
+import { Cover } from '../cover/Cover.js';
 import { Icon } from '../icon/Icon.js';
 import { IconSort } from '../icons/IconSort.js';
 import { IconSortDown } from '../icons/IconSortDown.js';
@@ -22,28 +21,26 @@ const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) =>
       colSpan: header.colSpan,
       ref,
       ...props,
-      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(Box, { asChild: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
+      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Cover, { asChild: true, inset: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
         children,
         sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
           "sorted ",
           sortDir === "asc" ? "ascending" : "descending"
         ] }),
-        /* @__PURE__ */ jsxs(Grid, { placeItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              asChild: true,
-              ...icon({
-                active: sortDir === false,
-                muted: !sortDir
-              }),
-              children: /* @__PURE__ */ jsx(IconSort, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
-        ] })
-      ] }) }) : children
+        /* @__PURE__ */ jsxs(
+          ActionsContent,
+          {
+            display: "grid",
+            placeItems: "center",
+            visible: !!sortDir,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsx(IconSort, {}) }),
+              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
+              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
+            ]
+          }
+        )
+      ] }) }) }) : children
     }
   );
 });

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DSlls5n2.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BkApdH74.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var picker = recipeRuntime({base:'waylnm'});
+
+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-DSlls5n2.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-3P0jZRFg.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:'_13gpuu4'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_3kkx1a'],variants:{size:{sm:'mzyfwe',md:'_16l6ull',lg:'_1k50iqr',fullscreen:'qgxoj0'}}});
+var nestedDialogCountVar = 'var(--_10jwuq0)';
 
 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-DSlls5n2.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-DSlls5n2.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-jgMhCg09.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'},'ir7d5']});
+var close = recipeRuntime({base:['_1tl8m4c']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1lnh2cj']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_6xfw0h']});
 
 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-DSlls5n2.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DRntf7OZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1pd5ixm']});
-var outer = recipeRuntime({base:[{display:'grid'},'_15gi53l']});
+var inner = recipeRuntime({base:['ptv1ww']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1arfj04']});
 
 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-DSlls5n2.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BBOwEkpE.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:'_9re77a',start:'u6jz6i'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',h:'lg',px:'8',transition:'colors'},'_6dmxi7']});
 
 export { icon, trigger };

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

@@ -34,7 +34,7 @@ const DisclosureTrigger = forwardRef(
           rounded: "md",
           textAlign: "start",
           w: "full",
-          children: /* @__PURE__ */ jsx(Cover, { asChild: true, overlay: true, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { children: [
+          children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { children: [
             chevronPosition === "start" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleRight, {}) }),
             /* @__PURE__ */ jsx(Box, { flex: "1", children }),
             chevronPosition === "end" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })

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-DSlls5n2.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-BKuoS_1s.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'},'_1mjaveq'],variants:{position:{bottom:[{borderT:'1'},'_12cl0gp'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'asbd7i'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'jru15s']}}});
 
 export { content };

package/dist/esm/packages/react/src/drawer-header/DrawerHeader-css.js

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DSlls5n2.css';
+import './../../../../assets/src/drawer-header/DrawerHeader.css.ts.vanilla-CgvBxp1f.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_16g9yt6']});
+var close = recipeRuntime({base:['_11h5dub']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'kxmcok']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'ntffe3']});
+
+export { actions, close, description, title };