@optiaxiom/react 0.12.3 → 0.13.1

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-B7ovfSlo.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-mAttatgp.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-BIDodemv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVoaPd3v.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Dszs5ipi.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-l6EO5dST.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1jejsad',{border:'1',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1wp44ly']});
+var card = recipeRuntime({base:['_1igh8l5',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1auijqv']});
 
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
+import { ActionsRoot } from '../actions-root/ActionsRoot.js';
 import { CardContextProvider } from '../card-context/CardContext.js';
 import { Flex } from '../flex/Flex.js';
 import { card } from './Card-css.js';
@@ -20,18 +21,16 @@ const Card = forwardRef(
         descriptionId,
         labelId,
         orientation,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(
           Flex,
           {
-            "aria-describedby": descriptionId,
-            "aria-labelledby": labelId,
             flexDirection: mapOrientationToFlexDirection[orientation],
             ref,
             ...card({}, className),
             ...props,
             children
           }
-        )
+        ) })
       }
     );
   }

package/dist/esm/packages/react/src/card-actions/CardActions-css.js

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-H9ltG-H8.css';
+import './../../../../assets/src/card-actions/CardActions.css.ts.vanilla-Cg4pe6pL.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var actions = recipeRuntime({base:['wybrpu']});
+
+export { actions };

package/dist/esm/packages/react/src/card-actions/CardActions.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ActionsContent } from '../actions-content/ActionsContent.js';
+import { actions } from './CardActions-css.js';
+
+const CardActions = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ActionsContent, { ref, ...actions({}, className), ...props, children });
+  }
+);
+CardActions.displayName = "@optiaxiom/react/CardActions";
+
+export { CardActions };

package/dist/esm/packages/react/src/card-checkbox/CardCheckbox.js

@@ -1,30 +1,48 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { CheckboxContent } from '../checkbox-content/CheckboxContent.js';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useCardContext } from '../card-context/CardContext.js';
 import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
 import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
-import { root, control } from './CardCheckbox-css.js';
 
 const CardCheckbox = forwardRef(
-  ({ children, className, description, indeterminate, ...props }, ref) => {
+  ({ children, indeterminate, onChange, ...props }, ref) => {
+    const labelPrefixId = useId();
+    const { labelId } = useCardContext("CardCheckbox");
+    const [checked, setChecked] = useControllableState({
+      defaultProp: props.defaultChecked,
+      prop: props.checked
+    });
     return /* @__PURE__ */ jsxs(
       CheckboxRoot,
       {
-        description: !!description,
+        "aria-labelledby": clsx(labelPrefixId, labelId),
+        description: false,
+        onChange: (event) => {
+          onChange?.(event);
+          setChecked(event.target.checked);
+        },
         ref,
-        ...root({}, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
             CheckboxControl,
             {
               indeterminate,
-              shift: Boolean(children),
-              ...control({}, className)
+              shift: Boolean(children)
             }
           ),
-          /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxs(Box, { id: labelPrefixId, children: [
+            "Check to ",
+            checked ? "unselect" : "select"
+          ] }) })
         ]
       }
     );

package/dist/esm/packages/react/src/card-image/CardImage-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-DjvVKLyu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-CxQbaQ_I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'ewcga8'],variants:{orientation:{horizontal:[{w:'auto'},'t6epaj'],vertical:[{w:'full'},'s8fhr5']}}});
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'t2nwh8'],variants:{orientation:{horizontal:[{w:'auto'},'_17itnb5'],vertical:[{w:'full'},'_19k2npo']}}});
 
 export { cardImage };

package/dist/esm/packages/react/src/card-image/CardImage.js

@@ -8,7 +8,7 @@ import { useCardContext } from '../card-context/CardContext.js';
 import { cardImage } from './CardImage-css.js';
 
 const CardImage = forwardRef(
-  ({ alt, asChild, children, className, src, ...props }, ref) => {
+  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
     const { orientation } = useCardContext("CardImage");
     return /* @__PURE__ */ jsx(
       Box,

package/dist/esm/packages/react/src/card-link/CardLink.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../link/Link.js';
+
+const CardLink = forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Link, { appearance: "subtle", overlay: true, ref, ...props });
+  }
+);
+CardLink.displayName = "@optiaxiom/react/CardLink";
+
+export { CardLink };

package/dist/esm/packages/react/src/card-overflow/CardOverflow-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-Cjn_Id7x.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-H9ltG-H8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardOverflow = recipeRuntime({base:[{alignSelf:'stretch'},'_1xgks22'],variants:{orientation:{horizontal:['_16f40mo'],vertical:['_3g0cj5']}}});
+var cardOverflow = recipeRuntime({base:['_1x40qpl',{alignSelf:'stretch'},'_1vv4ouq'],variants:{orientation:{horizontal:['_9owtpu'],vertical:['_1lhpgma']}}});
 
 export { cardOverflow };

package/dist/esm/packages/react/src/card-title/CardTitle.js

@@ -13,9 +13,9 @@ const CardTitle = forwardRef(
       Heading,
       {
         asChild: true,
+        fontSize: "md",
         fontWeight: "500",
         id: labelId,
-        level: "6",
         ref,
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { children })

package/dist/esm/packages/react/src/checkbox-control/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Uzeu57xv.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BWOKluYb.css';
-import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-Hd13ZaHc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BHTi0xxJ.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-R8IiI6oq.css';
+import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DyI14986.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1lo6rp9'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'iej4hg']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'n4lav'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1s7qz5e']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-BEhWJABt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-t0yDdgX3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'vh9pmz']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'x6tjo9']});
 
 export { code };

package/dist/esm/packages/react/src/combobox/Combobox.js

@@ -15,6 +15,7 @@ import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMat
 function Combobox({
   children,
   defaultOpen = false,
+  inputValue,
   isItemDisabled = () => false,
   items,
   itemToKey = (value) => value,
@@ -51,7 +52,7 @@ function Combobox({
     })
   );
   useEffect(() => {
-    if (!open) {
+    if (open) {
       onInputValueChangeStable("");
     }
   }, [open, onInputValueChangeStable]);
@@ -59,6 +60,7 @@ function Combobox({
     ComboboxContextProvider,
     {
       components,
+      inputValue,
       isItemDisabled,
       items,
       itemToKey,

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

@@ -18,6 +18,7 @@ const ComboboxContent = forwardRef(
     const { labelId } = useFieldContext();
     const {
       components,
+      inputValue,
       isItemDisabled,
       items,
       itemToKey,
@@ -37,6 +38,7 @@ const ComboboxContent = forwardRef(
         children: /* @__PURE__ */ jsx(
           Command,
           {
+            inputValue,
             isItemDisabled,
             items,
             itemToKey,

package/dist/esm/packages/react/src/combobox-scroll-area/ComboboxScrollArea.js

@@ -1,10 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
+import { Spinner } from '../spinner/Spinner.js';
 
-const ComboboxScrollArea = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(ListboxScrollArea, { ref, ...props });
+const ComboboxScrollArea = forwardRef(({ children, loading, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ListboxScrollArea, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children });
 });
 ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
 

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-Cd9ocVF0.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CyJRzNBY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Ba5NC_AS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'d4shc3'});
+var item = recipeRuntime({base:'_16qybo6'});
 
 export { item };

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+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 })
+);
+Cover.displayName = "@optiaxiom/react/Cover";
+
+export { Cover };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BKuGEq5b.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-BrXUhcOh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C4Vu9cf4.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-DIqBRd91.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_1g4usb9'],variants:{pinned:{left:'yen15q',right:'ic9kq2'},pinnedType:{body:'_10ms838',header:{}}}});
-var cellOffsetVar = 'var(--_1sg2yos)';
-var cellSizeVar = 'var(--_1pz8zo9)';
-var header = recipeRuntime({base:['_2j50hz']});
-var leftTotalSizeVar = 'var(--_1415tmj)';
-var rightTotalSizeVar = 'var(--_1mua5pj)';
-var table = recipeRuntime({base:'_12rjkdq',variants:{pinned:{both:'_1vwdlsa',left:'_4ml1gc',none:{},right:'mc7hhh'}}});
+var cell = recipeRuntime({base:[{display:'flex'},'_1gg90t8'],variants:{pinned:{left:'vumz7',right:'_9ur6n1'},pinnedType:{body:'_1otcv8x',header:{}}}});
+var cellOffsetVar = 'var(--_1xfi2as)';
+var cellSizeVar = 'var(--t8ry6n)';
+var header = recipeRuntime({base:[{display:'grid'},'_15qgxt1']});
+var leftTotalSizeVar = 'var(--qix54)';
+var rightTotalSizeVar = 'var(--us84oq)';
+var table = recipeRuntime({base:'rr6exg',variants:{pinned:{both:'_1qvxp6f',left:'mdjv7w',none:{},right:'_17otbbz'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,22 +1,44 @@
 "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';
 import { TableHeader } from '../table-header/TableHeader.js';
 import { TableRow } from '../table-row/TableRow.js';
-import { leftTotalSizeVar, rightTotalSizeVar, table, header, cellOffsetVar, cellSizeVar, cell } from './DataTable-css.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,
@@ -50,8 +73,8 @@ const DataTable = forwardRef(
                       })
                     },
                     ...cell({
-                      pinned: header.column.getIsPinned() || undefined,
-                      pinnedType: header.column.getIsPinned() ? "header" : undefined
+                      pinned: header.column.getIsPinned() || void 0,
+                      pinnedType: header.column.getIsPinned() ? "header" : void 0
                     }),
                     children: header.isPlaceholder ? null : flexRender(
                       header.column.columnDef.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() || undefined,
-                        pinnedType: cell$1.column.getIsPinned() ? "body" : undefined
-                      }),
-                      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 };