@optiaxiom/react 1.4.4 → 1.5.0

package/dist/esm/packages/react/src/checkbox/Checkbox.js

@@ -7,16 +7,24 @@ import { CheckboxRoot } from './CheckboxRoot.js';
 
 const Checkbox = forwardRef(
   ({ children, description, indeterminate, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(CheckboxRoot, { description: !!description, ref, ...props, children: [
-      /* @__PURE__ */ jsx(
-        CheckboxControl,
-        {
-          indeterminate,
-          shift: Boolean(children)
-        }
-      ),
-      (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      CheckboxRoot,
+      {
+        "aria-checked": indeterminate ? "mixed" : void 0,
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            CheckboxControl,
+            {
+              indeterminate,
+              shift: Boolean(children)
+            }
+          ),
+          (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "@optiaxiom/react/Checkbox";

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-QKro-bni.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DMo_bcI0.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-CDC0fy2v.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BopGCQ-R.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CCXnMKDM.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DsEEG4cq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1f3f11g'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1itw1qj']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'zb92pu'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'p5g9u']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/checkbox/CheckboxRoot.js

@@ -11,9 +11,9 @@ import { ToggleInputHiddenInput } from '../toggle-input/ToggleInputHiddenInput.j
 import '../toggle-input/ToggleInputLabel.js';
 
 const CheckboxRoot = forwardRef(
-  ({ children, description, ...props }, ref) => {
+  ({ children, ...props }, ref) => {
     const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsxs(ToggleInput, { description: !!description, ...boxProps, children: [
+    return /* @__PURE__ */ jsxs(ToggleInput, { ...boxProps, children: [
       /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...restProps }),
       children
     ] });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-Cg92YaKp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-BoAhBZWP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_13rp2rd']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_7jabfq']});
 
 export { code };

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

@@ -10,12 +10,12 @@ import { useCommandItems } from './useCommandItems.js';
 function Command({
   children,
   empty,
+  enabled,
   inputValue: inputValueProp,
   loading,
   onHover,
   onInputValueChange,
   onSelect: onItemSelect,
-  open,
   options
 }) {
   const [inputValue, setInputValue] = useControllableState({
@@ -26,7 +26,7 @@ function Command({
   });
   const items = useCommandItems({ inputValue, options });
   const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
-    open,
+    enabled,
     () => items.filter((item) => "selected" in item).length > items.length / 2 ? items.findIndex(
       (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
     ) : -1

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

@@ -48,7 +48,10 @@ const CommandItem = forwardRef(
       },
       onMouseMove: (event) => {
         onMouseMove?.(event);
-        if (resolveItemProperty(item.disabledReason)) {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!downshift.isOpen || resolveItemProperty(item.disabledReason)) {
           event.preventDefault();
           Object.assign(event.nativeEvent, {
             preventDownshiftDefault: true
@@ -92,14 +95,14 @@ const CommandItem = forwardRef(
         children: decorateChildren(
           { asChild, children },
           (children2) => children2 ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            item.parentOption && /* @__PURE__ */ jsxs(Fragment, { children: [
+            item.parentOption && !item.parentOption.hiddenInSearchContext && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
                 inputValue
               }) }),
               /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
-            detail && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: detail })
+            detail && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", flex: "1", children: detail })
           ] })
         )
       }

package/dist/esm/packages/react/src/command/useCommandItems.js

@@ -20,7 +20,9 @@ const useCommandItems = ({
   return useMemo(() => {
     const substring = (inputValue ?? "").normalize();
     const callback = (parentOption) => (item) => {
-      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+      return item.subOptions && substring ? resolveItemProperty(item.subOptions, { inputValue }).flatMap(
+        callback(item)
+      ) : filterFn(item, substring) ? [
         parentOption ? {
           ...item,
           key: [
@@ -33,7 +35,9 @@ const useCommandItems = ({
         } : item
       ] : [];
     };
-    return options.flatMap(callback());
+    return options.flatMap(callback()).sort((a, b) => {
+      return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
+    });
   }, [options, filterFn, inputValue]);
 };
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-Bb508Rff.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-Bhl8iscl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1cjc4dz','_87f6pj'],true:{}},inset:{false:'_1rmdsiz',true:'_1oajvpw'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1cpgzji','_5g7fcj'],true:{}},inset:{false:'mxcniw',true:'_1w2mifg'}}});
 
 export { cover };

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

@@ -1,11 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { DataTableProvider } from './DataTableContext.js';
 
 const DataTable = forwardRef(
   ({ children, table, ...props }, ref) => {
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -15,7 +16,15 @@ const DataTable = forwardRef(
         maxW: "full",
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx(DataTableProvider, { table, children })
+        children: /* @__PURE__ */ jsx(
+          DataTableProvider,
+          {
+            highlightedIndex,
+            setHighlightedIndex,
+            table,
+            children
+          }
+        )
       }
     );
   }

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

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
+import '../table/Table.js';
+import { TableAction } from '../table/TableAction.js';
+import '../table/TableBody.js';
+import '../table/TableCell.js';
+import '../table/TableHeader.js';
+import '../table/TableHeaderCell.js';
+import '../table/TableRow.js';
+import { useDataTableRowContext } from './DataTableRowContext.js';
+
+const DataTableAction = forwardRef(
+  ({ onKeyDown, onPointerDown, primary, visible, ...props }, outerRef) => {
+    const {
+      actions,
+      focusManaged,
+      highlightedIndex,
+      onActionMount,
+      setHighlightedIndex
+    } = useDataTableRowContext("@optiaxiom/react/DataTableAction");
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    useEffect(() => {
+      if (!onActionMount) {
+        return;
+      }
+      return onActionMount({ primary, ref: innerRef });
+    }, [onActionMount, primary]);
+    const index = actions.indexOf(innerRef);
+    useEffect(() => {
+      if (highlightedIndex === index) {
+        innerRef.current?.focus();
+      }
+    }, [highlightedIndex, index]);
+    return /* @__PURE__ */ jsx(
+      TableAction,
+      {
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (event.target instanceof HTMLElement && event.target !== innerRef?.current && (event.target.isContentEditable || ["input", "select", "textarea"].includes(event.target.localName))) {
+            return;
+          }
+          if (focusManaged && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+            const nextIndex = event.key === "ArrowRight" ? highlightedIndex + 1 : highlightedIndex - 1;
+            if (nextIndex >= -1 && nextIndex <= actions.length - 1) {
+              event.preventDefault();
+              setHighlightedIndex?.(nextIndex);
+            }
+          }
+        },
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          setHighlightedIndex?.(index);
+        },
+        ref,
+        tabIndex: focusManaged ? highlightedIndex === index ? 0 : -1 : void 0,
+        visible: visible ?? (primary ? "always" : void 0),
+        ...props
+      }
+    );
+  }
+);
+DataTableAction.displayName = "@optiaxiom/react/DataTableAction";
+
+export { DataTableAction };

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

@@ -1,15 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-DEeo_qVc.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-C6qwczKB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-NYW4Uw9y.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-C_DfJtL2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1jjb2bk'],variants:{pinned:{left:'k41td',right:'msotqt'},pinnedType:{body:'_8cr14m',header:{}}}});
-var cellOffsetVar = 'var(--_128dd32)';
-var cellSizeVar = 'var(--_49w8ph)';
-var header = recipeRuntime({base:[{display:'grid'},'_17gsw4i']});
-var leftTotalSizeVar = 'var(--_39p27)';
-var rightTotalSizeVar = 'var(--dxh3oz)';
-var table = recipeRuntime({base:'ugboq3',variants:{pinned:{both:'_1656gw8',left:'g70o2o',none:{},right:'pag6fp'}}});
-var totalSizeVar = 'var(--_1tcmes2)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1cywpho'],variants:{pinned:{left:'_956rl0',right:'_1fy2bgc'},pinnedType:{body:'f8c8ww',header:{}}}});
+var cellOffsetVar = 'var(--_9dunfk)';
+var cellSizeVar = 'var(--_13gfxs6)';
+var leftTotalSizeVar = 'var(--b5wrzk)';
+var rightTotalSizeVar = 'var(--vm1if2)';
+var table = recipeRuntime({base:'o7k06r',variants:{pinned:{both:'_1gzro5',left:'_1p8pchs',none:{},right:'udxfzy'}}});
+var totalSizeVar = 'var(--e5cbr4)';
 
-export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table, totalSizeVar };
+export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, table, totalSizeVar };

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

@@ -13,9 +13,11 @@ import { TableCell } from '../table/TableCell.js';
 import { TableHeader } from '../table/TableHeader.js';
 import '../table/TableHeaderCell.js';
 import { TableRow } from '../table/TableRow.js';
-import { table, header, cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+import { table, cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 import { useDataTableContext } from './DataTableContext.js';
 import { DataTableHeaderCell } from './DataTableHeaderCell.js';
+import { DataTableRow } from './DataTableRow.js';
+import { fakeRow } from './DataTableRowContext.js';
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -59,10 +61,11 @@ const DataTableBody = forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TableHeader, { display: "grid", pinned: true, children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
             DataTableHeaderCell,
             {
               header,
+              pinned: !!header.column.getIsPinned(),
               style: {
                 ...assignInlineVars({
                   [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
@@ -91,13 +94,14 @@ const DataTableBody = forwardRef(
               })) : 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,
+              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
+                DataTableRow,
                 {
-                  "data-highlighted": row.getIsSelected() ? "" : void 0,
                   "data-index": virtualRow?.index,
                   display: "flex",
+                  index: virtualRow?.index ?? index,
                   ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                  row,
                   style: virtualRow ? {
                     minHeight: virtualRow.size,
                     position: "absolute",
@@ -107,6 +111,7 @@ const DataTableBody = forwardRef(
                     row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
                       TableCell,
                       {
+                        pinned: true,
                         style: {
                           ...assignInlineVars({
                             [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
@@ -141,6 +146,7 @@ const DataTableBody = forwardRef(
                     row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
                       TableCell,
                       {
+                        pinned: true,
                         style: {
                           ...assignInlineVars({
                             [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
@@ -167,27 +173,6 @@ const DataTableBody = forwardRef(
   }
 );
 DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
-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
-  ),
-  getIsSelected: () => false,
-  getLeftVisibleCells: fakeCellsFactory(
-    table.getLeftVisibleLeafColumns(),
-    rowIndex
-  ),
-  getRightVisibleCells: fakeCellsFactory(
-    table.getRightVisibleLeafColumns(),
-    rowIndex
-  ),
-  id: "loading" + rowIndex
-});
 
 export { DataTableBody };

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

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useId } from '@radix-ui/react-id';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
+import { forwardRef, useRef, useEffect } from 'react';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { DataTableAction } from './DataTableAction.js';
+import { useDataTableContext } from './DataTableContext.js';
+import { useDataTableRowContext } from './DataTableRowContext.js';
+
+const DataTableCheckbox = forwardRef(({ children, disabled, visible, ...props }, outerRef) => {
+  const { table } = useDataTableContext("@optiaxiom/react/DataTableCheckbox");
+  const { labelId, row, setSelector } = useDataTableRowContext(
+    "@optiaxiom/react/DataTableCheckbox"
+  );
+  const labelPrefixId = useId();
+  const innerRef = useRef(null);
+  const ref = useComposedRefs(innerRef, outerRef);
+  useEffect(() => {
+    if (!setSelector) {
+      return;
+    }
+    if (!disabled) {
+      setSelector(innerRef);
+    }
+    return () => setSelector(void 0);
+  }, [disabled, setSelector]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    row && /* @__PURE__ */ jsxs(VisuallyHidden, { id: labelPrefixId, children: [
+      "Check to ",
+      row.getIsSelected() ? "unselect" : "select"
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataTableAction,
+      {
+        asChild: true,
+        visible: visible ?? (table.getIsSomeRowsSelected() || !row) ? "always" : void 0,
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": !row ? "Select all" : void 0,
+            "aria-labelledby": row && clsx(labelPrefixId, labelId),
+            checked: row ? row.getIsSelected() : table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(),
+            disabled,
+            indeterminate: !row && table.getIsSomePageRowsSelected(),
+            onChange: row ? row.getToggleSelectedHandler() : table.getToggleAllPageRowsSelectedHandler(),
+            ref,
+            ...props,
+            children
+          }
+        )
+      }
+    )
+  ] });
+});
+DataTableCheckbox.displayName = "@optiaxiom/react/DataTableCheckbox";
+
+export { DataTableCheckbox };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-BtJiNqG5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-C_IF3hEV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_4o2gg7',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'uivehr',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DgDqM1Tx.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BurCdT_Z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DNpXsbZo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1tskfdl']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'r2lb75'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1fr32r9'],variants:{active:{false:'_1457p1g',true:'elyfi6'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'szddm3']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1jyvgc0'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'opoqtb'],variants:{active:{false:'mbpgia',true:'_1vkro7u'}}});
 
 export { button, handle, icon };

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

@@ -29,21 +29,27 @@ const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) =>
       ref,
       ...props,
       children: [
-        header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(ActionsContent, { visible: header.column.getIsResizing(), children: /* @__PURE__ */ jsx(
-          Separator,
+        header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(
+          ActionsContent,
           {
-            onDoubleClick: () => header.column.resetSize(),
-            onMouseDown: header.getResizeHandler(),
-            onTouchStart: header.getResizeHandler(),
-            orientation: "vertical",
-            style: {
-              transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
-            },
-            ...handle({
-              resizing: header.column.getIsResizing()
-            })
+            visible: header.column.getIsResizing() ? "always" : "if-needed",
+            children: /* @__PURE__ */ jsx(
+              Separator,
+              {
+                onDoubleClick: () => header.column.resetSize(),
+                onMouseDown: header.getResizeHandler(),
+                onTouchStart: header.getResizeHandler(),
+                orientation: "vertical",
+                style: {
+                  transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
+                },
+                ...handle({
+                  resizing: header.column.getIsResizing()
+                })
+              }
+            )
           }
-        ) }),
+        ),
         header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(Cover, { asChild: true, inset: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
           children,
           sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
@@ -55,7 +61,7 @@ const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) =>
             {
               display: "grid",
               placeItems: "center",
-              visible: !!sortDir,
+              visible: sortDir ? "always" : "if-needed",
               children: [
                 /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsx(IconSort, {}) }),
                 /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),

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

@@ -0,0 +1,19 @@
+"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 { useDataTableRowContext } from './DataTableRowContext.js';
+
+const DataTableLabel = forwardRef(
+  (props, ref) => {
+    const { labelId } = useDataTableRowContext(
+      "@optiaxiom/react/DataTableLabel"
+    );
+    return /* @__PURE__ */ jsx(Box, { id: labelId, ref, ...props });
+  }
+);
+DataTableLabel.displayName = "@optiaxiom/react/DataTableLabel";
+
+export { DataTableLabel };