@optiaxiom/react 0.8.1 → 0.9.0

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-t4oV6SfF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DKiGgQaa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1uqwur0']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'ei15i8']});
 
 export { item };

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem.js

@@ -8,9 +8,9 @@ import '../sprinkles/sprinklesMerge.js';
 import { item } from './BreadcrumbItem-css.js';
 
 const BreadcrumbItem = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item(), ...sprinkleProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-jWjrHmfC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Dba3cqM2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_6h1wtz']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'igp2ld']});
 
 export { link };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CZ1Rbq10.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:['oj5q8',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1n7j922'],variants:{iconOnly:{false:'u3y61h',true:{}},intent:{danger:'w0irs9',neutral:'_1s1j71t',primary:'x3kqei'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1og9wko',solid:'_1agsk9a',subtle:'pvujo'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1crnf0y',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_165hcdl',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1qa9plu',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'whsl48']});
+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-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.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:'_1e3d44x'});
+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-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CZ1Rbq10.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-B21w13d6.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'},'_1woo5nq']});
+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-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-nCXOMbJx.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-YB200lqY.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:'e9d706'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'2xs'},'_1al890c'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['_1fq6zvb']});
+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:'w5y62b'});
+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-CXVxxEDz.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-Cx6XK1yB.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'},'_1lv7010']});
+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-CXVxxEDz.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-D7kWNBAv.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:'l3mnsn'});
+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,11 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-CMl6wxvT.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 cellOffsetVar = 'var(--i7j5ex)';
-var columnWidthVar = 'var(--qyp0sv)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'rh21o3'],variants:{pinned:{false:{},left:'_1uwuqvr',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_3cff0s'],variants:{pinned:{false:{},left:'_12qxpvr',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'f5moa5']});
+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 { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,104 +1,101 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { useState, createElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { DataTableHeader } from '../data-table-header/DataTableHeader.js';
+import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Table } from '../table/Table.js';
 import { TableBody } from '../table-body/TableBody.js';
 import { TableCell } from '../table-cell/TableCell.js';
-import { TableHead } from '../table-head/TableHead.js';
-import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
+import { TableHeader } from '../table-header/TableHeader.js';
 import { TableRow } from '../table-row/TableRow.js';
-import { tableHeader, cellOffsetVar, columnWidthVar, tableHead, tableCell } from './DataTable-css.js';
+import { leftTotalSizeVar, rightTotalSizeVar, table, header, cellOffsetVar, cellSizeVar, cell } from './DataTable-css.js';
 
-const DataTable = ({
-  columns,
-  data,
-  ...props
-}) => {
-  const [sorting, setSorting] = useState([]);
-  const [{ pageIndex, pageSize }, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 10
-  });
-  const table = useReactTable({
-    ...props,
-    columns,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      ...props.state,
-      pagination: {
-        pageIndex,
-        pageSize
-      },
-      sorting
-    }
-  });
-  let offset = 0;
-  const offsets = Object.fromEntries(
-    table.getAllColumns().flatMap((column) => [
-      [column.id, (offset += column.getSize()) - column.getSize()]
-    ])
-  );
-  return /* @__PURE__ */ jsxs(Box, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHead, { ...tableHeader(), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-        return /* @__PURE__ */ jsx(
-          TableHeaderCell,
-          {
-            style: {
-              ...assignInlineVars({
-                [cellOffsetVar]: header.column.getIsPinned() ? `${offsets[header.column.id]}px` : void 0,
-                [columnWidthVar]: `${header.getSize()}px`
-              })
-            },
-            ...tableHead({
-              pinned: header.column.getIsPinned() ?? void 0
-            }),
-            children: header.column.columnDef.header && typeof header.column.columnDef.header !== "string" ? createElement(
-              header.column.columnDef.header,
-              header.getContext()
-            ) : /* @__PURE__ */ jsx(DataTableHeader, { ...header.getContext(), children: header.column.columnDef.header })
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => {
-        return /* @__PURE__ */ jsx(
-          TableCell,
-          {
-            style: {
-              ...assignInlineVars({
-                [cellOffsetVar]: cell.column.getIsPinned() ? `${offsets[cell.column.id]}px` : void 0,
-                [columnWidthVar]: `${cell.column.getSize()}px`
-              })
-            },
-            ...tableCell({
-              pinned: cell.column.getIsPinned() ?? void 0
-            }),
-            children: flexRender(cell.column.columnDef.cell, cell.getContext())
-          },
-          cell.id
-        );
-      }) }, row.id)) })
-    ] }),
-    data.length > table.getState().pagination.pageSize && /* @__PURE__ */ jsx(Box, { mt: "8", children: /* @__PURE__ */ jsx(
-      Pagination,
+const DataTable = forwardRef(
+  ({ table: table$1, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
       {
-        onPageChange: (newPage) => table.setPageIndex(newPage - 1),
-        page: table.getState().pagination.pageIndex + 1,
-        total: table.getPageCount()
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        maxW: "full",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Table,
+            {
+              layout: "fixed",
+              style: assignInlineVars({
+                [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+                [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+              }),
+              ...table({
+                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(
+                  DataTableHeaderCell,
+                  {
+                    header,
+                    style: {
+                      ...assignInlineVars({
+                        [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                        [cellSizeVar]: `${header.getSize()}px`
+                      })
+                    },
+                    ...cell({
+                      pinned: header.column.getIsPinned() || undefined,
+                      pinnedType: header.column.getIsPinned() ? "header" : undefined
+                    }),
+                    children: header.isPlaceholder ? null : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  },
+                  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`
+                        })
+                      },
+                      ...cell({
+                        pinned: cell$1.column.getIsPinned() || undefined,
+                        pinnedType: cell$1.column.getIsPinned() ? "body" : undefined
+                      }),
+                      children: flexRender(
+                        cell$1.column.columnDef.cell,
+                        cell$1.getContext()
+                      )
+                    },
+                    cell$1.id
+                  );
+                }) }, row.id)) })
+              ]
+            }
+          ),
+          table$1.getPageCount() > 1 && /* @__PURE__ */ jsx(Box, { mt: "8", children: /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
+              page: table$1.getState().pagination.pageIndex + 1,
+              total: table$1.getPageCount()
+            }
+          ) })
+        ]
       }
-    ) })
-  ] });
-};
+    );
+  }
+);
+DataTable.displayName = "@optiaxiom/react/DataTable";
 
 export { DataTable };

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

@@ -0,0 +1,8 @@
+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'},'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 };