@optiaxiom/react 0.8.2 → 0.9.0

package/dist/packages/react/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1a820s4',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1cz9anp'],variants:{iconOnly:{false:'_19luy0g',true:{}},intent:{danger:'_5ob8g6',neutral:'_113apm',primary:'_112atqi'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'joyknb',solid:'_1m4uza7',subtle:'_16cc87w'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'snm2kl',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_9d3r3w',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1koqiat',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_1ci4rb1']});
+var buttonBase = recipeRuntime({base:['_15m7x0z',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1po00ao'],variants:{iconOnly:{false:'yrj1xf',true:{}},intent:{danger:'_6t8e9e',neutral:'jhmgkb',primary:'_8466a3'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'s7w5h1',solid:'fpw45',subtle:'_1wcb5mc'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'rt633a',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'w4w2l0',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1mm8xp6',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'y66v4x']});
 
 export { buttonBase, spinner };

package/dist/packages/react/src/button-base/ButtonBase.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { buttonBase, spinner } from './ButtonBase-css.js';
@@ -40,8 +40,8 @@ const ButtonBase = forwardRef(
       {
         asChild: true,
         cursor: disabled ? "not-allowed" : "pointer",
-        "data-disabled": disabled ? "" : void 0,
-        "data-loading": loading ? "" : void 0,
+        "data-disabled": disabled ? "" : undefined,
+        "data-loading": loading ? "" : undefined,
         ...buttonBase(
           {
             iconOnly: Boolean(iconOnly),
@@ -53,7 +53,7 @@ const ButtonBase = forwardRef(
         ),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx(Comp, { disabled, ref, ...restProps, children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(
             Spinner,
             {
               appearance: variant === "solid" ? "inverse" : "default",

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'p8ymh1'});
+var buttonGroup = recipeRuntime({base:'_1y076oe'});
 
 export { buttonGroup };

package/dist/packages/react/src/button-group/ButtonGroup.js

@@ -9,7 +9,7 @@ const ButtonGroup = forwardRef(
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        "data-orientation": gap === "0" ? orientation : void 0,
+        "data-orientation": gap === "0" ? orientation : undefined,
         flexDirection: orientation === "vertical" ? "column" : "row",
         gap,
         ref,

package/dist/packages/react/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-C_kf7cXQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BGUfLaAx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'qaocdt']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1nfe9uj']});
 
 export { loadable };

package/dist/packages/react/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-DQ-T1a-J.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BgMgylht.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-CxccT3Rg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'fgytt2'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'2xs'},'nickw6'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['_1ia14nw']});
+var checkbox = recipeRuntime({base:'gd9sx4'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_9gdsfl'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'uouv7i']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1rmpgid'});
+var input = recipeRuntime({base:'_1ywtts4'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-BoILKpeG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-B9UeDgSL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'z02nzz']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'n6drj0']});
 
 export { code };

package/dist/packages/react/src/combobox-content/ComboboxContent.js

@@ -10,7 +10,7 @@ import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 
 const ComboboxContent = forwardRef(
-  ({ children, size: _size, ...props }, ref) => {
+  ({ children, ...props }, ref) => {
     const p = useResponsiveMatches({
       base: "8",
       sm: "4"

package/dist/packages/react/src/combobox-dialog-content/ComboboxDialogContent.js

@@ -6,7 +6,7 @@ import { DialogContent } from '../dialog-content/DialogContent.js';
 import { DialogTitle } from '../dialog-title/DialogTitle.js';
 
 const ComboboxDialogContent = forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, ref, ...props, children: [
+  return /* @__PURE__ */ jsxs(DialogContent, { ref, ...props, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: ariaLabel }) }),
     children
   ] });

package/dist/packages/react/src/combobox-popover-content/ComboboxPopoverContent.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 
 const ComboboxPopoverContent = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(PopoverContent, { minW: "trigger", ref, ...props });
+  return /* @__PURE__ */ jsx(PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 

package/dist/packages/react/src/command/Command.js

@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
 import { CommandContextProvider } from '../command-context/CommandContext.js';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 
+const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
 function Command({
   children,
   inputValue: inputValueProp,
@@ -30,12 +31,12 @@ function Command({
     onChange: onInputValueChange,
     prop: inputValueProp
   });
-  const [lastInteractionSource, setLastInteractionSource] = useState("keyboard");
+  const [lastInteractionSource, setLastInteractionSource] = useState("pointer");
   const [highlightedIndex, setHighlightedIndex] = usePortalPatch(open);
   const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
   const downshift = useCombobox({
     ...props,
-    highlightedIndex,
+    highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
     isOpen: open,
@@ -43,8 +44,10 @@ function Command({
     itemToKey,
     itemToString,
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      setHighlightedIndex(highlightedIndex2);
-      if (type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp) {
+      if (type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
+        setHighlightedIndex(highlightedIndex2);
+      }
+      if (type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === useCombobox.stateChangeTypes.InputKeyDownPageDown || type === useCombobox.stateChangeTypes.InputKeyDownPageUp) {
         setLastInteractionSource("keyboard");
       } else {
         setLastInteractionSource("pointer");
@@ -55,8 +58,15 @@ function Command({
         setHighlightedSubIndex(-1);
       }
     },
-    onIsOpenChange({ isOpen }) {
+    onIsOpenChange({ isOpen, type }) {
       onOpenChange?.(isOpen);
+      if (isOpen) {
+        if (type === useCombobox.stateChangeTypes.InputClick) {
+          setLastInteractionSource("pointer");
+        } else {
+          setLastInteractionSource("keyboard");
+        }
+      }
     },
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur) {

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CsD5Lm9p.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BnQBFIMz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_3k27hl'});
+var item = recipeRuntime({base:'_17rdj5q'});
 
 export { item };

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

@@ -10,7 +10,7 @@ const CommandFocusableItem = forwardRef(({ children, className, ...props }, ref)
   return /* @__PURE__ */ jsx(
     Box,
     {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : undefined,
       ref,
       ...item({}, className),
       ...props,

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

@@ -4,13 +4,9 @@ import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandInput = forwardRef(
-  ({ onKeyDown, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ onKeyDown, size, ...props }, ref) => {
     const {
       downshift,
       highlightedItem,
@@ -23,9 +19,9 @@ const CommandInput = forwardRef(
       Input,
       {
         addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
-        ...sprinkleProps,
+        size,
         ...downshift.getInputProps({
-          ...restProps,
+          ...props,
           onChange: (event) => {
             setInputValue("value" in event.target ? event.target.value : "");
           },

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

@@ -3,27 +3,23 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandFocusableItem } from '../command-focusable-item/CommandFocusableItem.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandItem = forwardRef(
-  ({ children, item, selected, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, item, selected, size, ...props }, ref) => {
     const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
     const itemProps = downshift.getItemProps({
       "aria-selected": selected ?? value?.has(item),
       item,
-      ...restProps
+      ...props
     });
     return /* @__PURE__ */ jsx(
       CommandFocusableItem,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
+        "data-highlighted": highlightedItem === item ? "" : undefined,
         ref,
+        size,
         tabIndex: -1,
-        ...sprinkleProps,
         ...itemProps,
         children
       }

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

@@ -3,22 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { Listbox } from '../listbox/Listbox.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandListbox = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, size, ...props }, ref) => {
     const { downshift } = useCommandContext("CommandList");
-    return /* @__PURE__ */ jsx(
-      Listbox,
-      {
-        ...sprinkleProps,
-        ...downshift.getMenuProps({ ref, ...restProps }),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
   }
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";

package/dist/packages/react/src/command-sub-item/CommandSubItem.js

@@ -38,8 +38,8 @@ const CommandSubItem = forwardRef(
       {
         "aria-disabled": disabled,
         "aria-selected": isSelected,
-        "data-disabled": disabled ? "" : void 0,
-        "data-highlighted": highlighted ? "" : void 0,
+        "data-disabled": disabled ? "" : undefined,
+        "data-highlighted": highlighted ? "" : undefined,
         onClick: (event) => {
           onClick?.(event);
           if (event.defaultPrevented) {

package/dist/packages/react/src/command-toggle-button/CommandToggleButton.js

@@ -7,10 +7,10 @@ import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const CommandToggleButton = forwardRef(({ children, ...props }, ref) => {
+const CommandToggleButton = forwardRef(({ children, className, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
   const { downshift } = useCommandContext("CommandToggleButton");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...sprinkleProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
 });
 CommandToggleButton.displayName = "@optiaxiom/react/CommandToggleButton";
 

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BP46h_xl.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-D-Y37ogI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-zPkQonIM.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-BIy4QD6j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_3xycix'],variants:{pinned:{left:'_1o96dum',right:'p9tjnr'},pinnedType:{body:'_1s0hb48',header:{}}}});
-var cellOffsetVar = 'var(--k97bpv)';
-var cellSizeVar = 'var(--_1ezzrud)';
-var header = recipeRuntime({base:['ibbf5n']});
-var leftTotalSizeVar = 'var(--_1n5796e)';
-var rightTotalSizeVar = 'var(--_1vghd3a)';
-var table = recipeRuntime({base:'_11ek117',variants:{pinned:{both:'zqte4b',left:'s7h2ib',none:{},right:'_1fov8wc'}}});
+var cell = recipeRuntime({base:['sbddr5'],variants:{pinned:{left:'_94bvde',right:'_16fx1r8'},pinnedType:{body:'ejd7ig',header:{}}}});
+var cellOffsetVar = 'var(--_8uf644)';
+var cellSizeVar = 'var(--_1khgkbw)';
+var header = recipeRuntime({base:['sbivds']});
+var leftTotalSizeVar = 'var(--_145iq7e)';
+var rightTotalSizeVar = 'var(--_1c6o47h)';
+var table = recipeRuntime({base:'_4g7wai',variants:{pinned:{both:'dphpfc',left:'_1tcbiza',none:{},right:'itfwd6'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -15,25 +15,13 @@ import { leftTotalSizeVar, rightTotalSizeVar, table, header, cellOffsetVar, cell
 
 const DataTable = forwardRef(
   ({ table: table$1, ...props }, ref) => {
-    let offsetLeft = 0;
-    let offsetRight = table$1.getTotalSize();
-    const offsets = Object.fromEntries(
-      table$1.getAllColumns().flatMap((column) => [
-        [
-          column.id,
-          {
-            left: (offsetLeft += column.getSize()) - column.getSize(),
-            right: offsetRight -= column.getSize()
-          }
-        ]
-      ])
-    );
     return /* @__PURE__ */ jsxs(
       Box,
       {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
+        maxW: "full",
         ref,
         ...props,
         children: [
@@ -55,15 +43,15 @@ const DataTable = forwardRef(
                     header,
                     style: {
                       ...assignInlineVars({
-                        [cellOffsetVar]: `${offsets[header.column.id][header.column.getIsPinned() || "left"]}px`,
+                        [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
+                      pinned: header.column.getIsPinned() || undefined,
+                      pinnedType: header.column.getIsPinned() ? "header" : undefined
                     }),
-                    children: flexRender(
+                    children: header.isPlaceholder ? null : flexRender(
                       header.column.columnDef.header,
                       header.getContext()
                     )
@@ -76,13 +64,13 @@ const DataTable = forwardRef(
                     {
                       style: {
                         ...assignInlineVars({
-                          [cellOffsetVar]: `${offsets[cell$1.column.id][cell$1.column.getIsPinned() || "left"]}px`,
+                          [cellOffsetVar]: `${cell$1.column.getStart(cell$1.column.getIsPinned() || "left")}px`,
                           [cellSizeVar]: `${cell$1.column.getSize()}px`
                         })
                       },
                       ...cell({
-                        pinned: cell$1.column.getIsPinned() || void 0,
-                        pinnedType: cell$1.column.getIsPinned() ? "body" : void 0
+                        pinned: cell$1.column.getIsPinned() || undefined,
+                        pinnedType: cell$1.column.getIsPinned() ? "body" : undefined
                       }),
                       children: flexRender(
                         cell$1.column.columnDef.cell,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DAaoRros.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CgeIKahI.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'},'_1p42j9r','_91sku7']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1g6wuc7'],variants:{active:{false:'d4q77i',true:'il8kvh'},muted:{false:{},true:'_1i4wjq1'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'l6w6ad','ncxitn']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1p4j215'],variants:{active:{false:'_1g49bjw',true:'_1htoupv'},muted:{false:{},true:'_1lei0y7'}}});
 
 export { button, icon };

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

@@ -11,12 +11,14 @@ import { IconSortUp } from '../icons/IconSortUp.js';
 import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
 import { button, icon } from './DataTableHeaderCell-css.js';
 
-const DataTableHeaderCell = forwardRef(({ children, header, ...props }) => {
+const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
   return /* @__PURE__ */ jsx(
     TableHeaderCell,
     {
-      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
+      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : undefined,
+      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,

package/dist/packages/react/src/dialog/Dialog.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { DialogContextProvider } from '../dialog-context/DialogContext.js';
+import { NestedDialogContextProvider } from '../nested-dialog-context/NestedDialogContext.js';
+import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 
 function Dialog({
   children,
@@ -16,7 +18,16 @@ function Dialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DialogContextProvider, { open, children }) });
+  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("Dialog", open);
+  return /* @__PURE__ */ jsx(NestedDialogContextProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    DialogContextProvider,
+    {
+      isRootDialog,
+      nestedDialogCount,
+      open,
+      children
+    }
+  ) }) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

package/dist/packages/react/src/dialog-actions/DialogActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DmqGyOti.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DNIzS9xQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1abmlif']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'hvvat9']});
 
 export { actions };

package/dist/packages/react/src/dialog-actions/DialogActions.js

@@ -1,18 +1,12 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
-import { IconX } from '../icons/IconX.js';
 import { actions } from './DialogActions-css.js';
 
 const DialogActions = forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...actions({}, className), ...props, children: [
-      /* @__PURE__ */ jsx(Button, { appearance: "subtle", "aria-label": "Close", asChild: true, icon: /* @__PURE__ */ jsx(IconX, {}), children: /* @__PURE__ */ jsx(RadixDialog.Close, {}) }),
-      /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children })
-    ] });
+    return /* @__PURE__ */ jsx(Flex, { ref, ...actions({}, className), ...props, children });
   }
 );
 DialogActions.displayName = "@optiaxiom/react/DialogActions";

package/dist/packages/react/src/dialog-close/DialogClose.js

@@ -5,8 +5,8 @@ import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
 const DialogClose = forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  ({ asChild, children, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { size, children }) });
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

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

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-C5RktqfT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DZSpp9WD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'hamf0t'],variants:{size:{sm:'_1cylg9q',md:'zwpeau',lg:'x15bml',fullscreen:'_198uxws'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1umrefv'],variants:{size:{sm:'_1l3sknl',md:'_1agwhja',lg:'_1mktp5b',fullscreen:'_1kwyy6f'}}});
+var nestedDialogCountVar = 'var(--_1f5zfqa)';
 
-export { content };
+export { content, nestedDialogCountVar };

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

@@ -1,31 +1,50 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { content } from './DialogContent-css.js';
+import { nestedDialogCountVar, content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({ children, className, size = "md", transitionType = "fade", ...props }, ref) => {
-    const { open } = useDialogContext("DialogContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+  ({
+    children,
+    className,
+    size = "md",
+    style,
+    transitionType = "fade",
+    ...props
+  }, ref) => {
+    const { isRootDialog, nestedDialogCount, open } = useDialogContext("DialogContent");
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      isRootDialog && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
         Paper,
         {
           asChild: true,
           elevation: size === "fullscreen" ? "drawer" : "dialog",
           onBlur: onReactSelectInputBlur,
+          style: {
+            ...assignInlineVars({
+              [nestedDialogCountVar]: `${nestedDialogCount}`
+            }),
+            ...style
+          },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
+          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
+            children,
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {}) }),
+            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
+          ] })
         }
       ) })
     ] }) });