@optiaxiom/react 1.6.2 → 1.6.4

package/dist/esm/packages/react/src/calendar/CalendarGrid.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { useCalendarContext } from './CalendarContext.js';
+import { grid as grid$1 } from './CalendarGrid-css.js';
+
+const grid = [0, 1, 2].map((row) => [0, 1, 2, 3].map((col) => row * 4 + col));
+const intentMap = {
+  ArrowDown: 4,
+  ArrowLeft: -1,
+  ArrowRight: 1,
+  ArrowUp: -4
+};
+function CalendarGrid({
+  onPageChange,
+  onValueChange,
+  options,
+  value
+}) {
+  const { month, view } = useCalendarContext("@optiaxiom/react/CalendarGrid");
+  const [highlightedIndex, setHighlightedIndex] = useState(value);
+  const cellsRef = useRef([]);
+  useEffect(() => {
+    cellsRef.current[highlightedIndex]?.focus();
+  }, [highlightedIndex]);
+  const ref = useRef(null);
+  const lastMonthRef = useRef();
+  const lastViewRef = useRef();
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (lastMonthRef.current && view === lastViewRef.current) {
+      ref.current.animate(
+        [
+          {
+            opacity: 0,
+            translate: month > lastMonthRef.current ? "20px" : "-20px"
+          },
+          {
+            opacity: 1,
+            translate: "0px"
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+    } else {
+      ref.current.animate(
+        [
+          {
+            opacity: 0,
+            scale: lastViewRef.current === "year" ? 1.03 : 0.97
+          },
+          {
+            opacity: 1,
+            scale: 1
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+    }
+    lastMonthRef.current = month;
+    lastViewRef.current = view;
+  }, [month, view]);
+  return /* @__PURE__ */ jsx(Box, { ref, role: "grid", ...grid$1(), children: grid.map((row, i) => /* @__PURE__ */ jsx(Box, { display: "flex", flex: "1", gap: "2", role: "row", children: row.map((index, j) => /* @__PURE__ */ jsx(Box, { display: "flex", flex: "1", role: "gridcell", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      "aria-label": Array.isArray(options[index]) ? options[index][1] : void 0,
+      h: "auto",
+      justifyContent: "center",
+      onClick: () => {
+        onValueChange(index);
+      },
+      onKeyDown: (event) => {
+        let intent = highlightedIndex + (intentMap[event.key] ?? 0);
+        if (intent === highlightedIndex) {
+          return;
+        }
+        if (intent < 0) {
+          onPageChange(-1);
+          intent += 12;
+        } else if (intent >= 12) {
+          onPageChange(1);
+          intent %= 12;
+        }
+        setHighlightedIndex(intent);
+      },
+      px: "0",
+      ref: (node) => cellsRef.current[index] = node,
+      tabIndex: highlightedIndex === index ? 0 : -1,
+      w: "full",
+      children: Array.isArray(options[index]) ? options[index][0] : options[index]
+    }
+  ) }, j)) }, i)) }, view);
+}
+CalendarGrid.displayName = "@optiaxiom/react/CalendarGrid";
+
+export { CalendarGrid };

package/dist/esm/packages/react/src/calendar/CalendarMonthCaption.js

@@ -9,20 +9,7 @@ function CalendarMonthCaption({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      alignItems: "center",
-      asChild: true,
-      display: "flex",
-      fontSize: "lg",
-      fontWeight: "500",
-      h: "md",
-      justifyContent: "center",
-      mb: "16",
-      children: /* @__PURE__ */ jsx(MonthCaption, { ...props, children })
-    }
-  );
+  return /* @__PURE__ */ jsx(Box, { asChild: true, mb: "16", mr: "64", children: /* @__PURE__ */ jsx(MonthCaption, { ...props, children }) });
 }
 CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
 

package/dist/esm/packages/react/src/calendar/CalendarMonthGrid.js

@@ -1,15 +1,122 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { MonthGrid } from 'react-day-picker';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useCalendarContext } from './CalendarContext.js';
+import { CalendarGrid } from './CalendarGrid.js';
+import { withYear, withMonth } from './utils.js';
 
+const months = [
+  ["Jan", "January"],
+  ["Feb", "February"],
+  ["Mar", "March"],
+  ["Apr", "April"],
+  ["May", "May"],
+  ["Jun", "June"],
+  ["Jul", "July"],
+  ["Aug", "August"],
+  ["Sep", "September"],
+  ["Oct", "October"],
+  ["Nov", "November"],
+  ["Dec", "December"]
+];
 function CalendarMonthGrid({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(MonthGrid, { ...props, children }) });
+  const { month, setMonth, setView, view } = useCalendarContext(
+    "@optiaxiom/react/CalendarMonthGrid"
+  );
+  const ref = useRef(null);
+  const lastMonthRef = useRef();
+  const lastViewRef = useRef();
+  useEffect(() => {
+    if (view !== "day") {
+      lastMonthRef.current = void 0;
+      lastViewRef.current = view;
+      return;
+    }
+    if (lastMonthRef.current) {
+      ref.current?.querySelector("tbody")?.animate(
+        [
+          {
+            opacity: 0,
+            translate: month > lastMonthRef.current ? "20px" : "-20px"
+          },
+          {
+            opacity: 1,
+            translate: "0px"
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+    } else if (lastViewRef.current) {
+      ref.current?.animate(
+        [
+          {
+            opacity: 0,
+            scale: 1.03
+          },
+          {
+            opacity: 1,
+            scale: 1
+          }
+        ],
+        {
+          duration: 150
+        }
+      );
+      const days = Array.from(
+        ref.current?.querySelectorAll(
+          "tbody button:not([disabled])"
+        ) ?? []
+      );
+      const focusedDay = days.find((day) => day.textContent === `${month.getDate()}`) ?? days[0];
+      focusedDay?.focus();
+    }
+    lastMonthRef.current = month;
+    lastViewRef.current = view;
+  }, [month, view]);
+  if (view === "year") {
+    return /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        onPageChange: (dir) => {
+          setMonth(withYear(month, month.getFullYear() + dir * 12));
+        },
+        onValueChange: (value) => {
+          setMonth(withYear(month, month.getFullYear() + value));
+          setView("month");
+        },
+        options: Array.from({ length: 12 }).map(
+          (_, index) => month.getFullYear() + index
+        ),
+        value: 0
+      }
+    );
+  } else if (view === "month") {
+    return /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        onPageChange: (dir) => {
+          setMonth(withYear(month, month.getFullYear() + dir));
+        },
+        onValueChange: (value) => {
+          setMonth(withMonth(month, value));
+          setView("day");
+        },
+        options: months,
+        value: month.getMonth()
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(Box, { ref, children: /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(MonthGrid, { ...props, children }) }) });
+  }
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-C-BzmPym.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BlrPUb_X.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1lrtqvm']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'gzib2p']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BOetjPpt.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1yr7jrn'});
+
+export { button };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton.js

@@ -3,13 +3,42 @@ import { jsx } from 'react/jsx-runtime';
 import { NextMonthButton } from 'react-day-picker';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
+import { useCalendarContext } from './CalendarContext.js';
+import { button } from './CalendarNextMonthButton-css.js';
+import { withYear } from './utils.js';
 
 function CalendarNextMonthButton({
+  "aria-label": ariaLabel,
   children,
+  className,
   color: _color,
+  onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsx(NextMonthButton, {}) });
+  const { month, setMonth, view } = useCalendarContext(
+    "@optiaxiom/react/CalendarNextMonthButton"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      "aria-label": view === "year" ? "Go to next year range" : view === "month" ? "Go to next year" : ariaLabel,
+      asChild: true,
+      icon: children,
+      onClick: (event) => {
+        if (view === "day") {
+          onClick?.(event);
+        } else {
+          setMonth(
+            withYear(month, month.getFullYear() + (view === "year" ? 12 : 1))
+          );
+        }
+      },
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(NextMonthButton, {})
+    }
+  );
 }
 CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
 

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-Bu4oDCl_.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1s9sulw'});
+
+export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton.js

@@ -3,13 +3,42 @@ import { jsx } from 'react/jsx-runtime';
 import { PreviousMonthButton } from 'react-day-picker';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
+import { useCalendarContext } from './CalendarContext.js';
+import { button } from './CalendarPreviousMonthButton-css.js';
+import { withYear } from './utils.js';
 
 function CalendarPreviousMonthButton({
+  "aria-label": ariaLabel,
   children,
+  className,
   color: _color,
+  onClick,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsx(PreviousMonthButton, {}) });
+  const { month, setMonth, view } = useCalendarContext(
+    "@optiaxiom/react/CalendarPreviousMonthButton"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      "aria-label": view === "year" ? "Go to previous year range" : view === "month" ? "Go to previous year" : ariaLabel,
+      asChild: true,
+      icon: children,
+      onClick: (event) => {
+        if (view === "day") {
+          onClick?.(event);
+        } else {
+          setMonth(
+            withYear(month, month.getFullYear() - (view === "year" ? 12 : 1))
+          );
+        }
+      },
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(PreviousMonthButton, {})
+    }
+  );
 }
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 

package/dist/esm/packages/react/src/calendar/utils.js

@@ -0,0 +1,19 @@
+const withMonth = (date, month) => {
+  const next = new Date(date);
+  next.setDate(1);
+  next.setMonth(month);
+  next.setDate(Math.min(date.getDate(), getDaysOfMonth(next)));
+  return next;
+};
+const withYear = (date, year) => {
+  const next = new Date(date);
+  next.setDate(1);
+  next.setFullYear(year);
+  next.setDate(Math.min(date.getDate(), getDaysOfMonth(next)));
+  return next;
+};
+const getDaysOfMonth = (date) => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+
+export { withMonth, withYear };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-DLBvSviR.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-2K-Qgkt6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DQEnEJ5F.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-DYI-7YYN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1eikbhh',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'c6fjmv']});
+var card = recipeRuntime({base:['orpxu9',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_2n7gwy']});
 
 export { card };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-BjU9yoNF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-Drf9Mrwl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['tr28s4']});
+var checkbox = recipeRuntime({base:['yybfmv']});
 
 export { checkbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-D5-Y0NVd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-DbUxmfb8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1uyf2cq',before:'_10k2o1f'}}});
-var content = recipeRuntime({base:[{flex:'1'},'vk7uf6']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_9owyah']});
+var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_14fm1uv',before:'_1eduwo9'}}});
+var content = recipeRuntime({base:[{flex:'1'},'yasc0x']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1o9bm23']});
 
 export { addon, content, header };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-DIJviDj6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-DKlax-Ld.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_3a02un']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'nuh31q']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'x2di2e']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_15tpqp9']});
 
 export { overlay, preview };

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BrVdMbOn.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DPvYjwu-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C_g9Pa34.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-iBExXKO6.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-Dfy9f6Mm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'cjoia4'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'uoo2x0']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_4hw10k'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_7e5j7n']});
 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-C-Pv41tL.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-C21wD7rn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-D9ameOJD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_1jtq85y']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_11ejx5o']});
 
 export { code };

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

@@ -54,19 +54,18 @@ const CommandInput = forwardRef(
             if (!highlightedItem) {
               return;
             }
-            if (!event.target.value && event.key === " ") {
+            const selectedWithSpace = !event.target.value && event.key === " ";
+            if (highlightedItemRef.current instanceof HTMLAnchorElement && (selectedWithSpace || event.key === "Enter")) {
+              const { view: _view, ...eventInit } = event;
+              event.preventDefault();
+              Object.assign(event, { preventDownshiftDefault: true });
+              preventDownshiftBlurRef.current = true;
+              highlightedItemRef.current.dispatchEvent(
+                new MouseEvent("click", eventInit)
+              );
+            } else if (selectedWithSpace) {
               event.preventDefault();
               downshift.selectItem(highlightedItem);
-            } else if (event.key === "Enter") {
-              if (highlightedItemRef.current instanceof HTMLAnchorElement) {
-                const { view: _view, ...eventInit } = event;
-                event.preventDefault();
-                Object.assign(event, { preventDownshiftDefault: true });
-                preventDownshiftBlurRef.current = true;
-                highlightedItemRef.current.dispatchEvent(
-                  new MouseEvent("click", eventInit)
-                );
-              }
             }
           }
         })

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

@@ -9,6 +9,7 @@ import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
 import { useCommandContext, resolveItemProperty } from './CommandContext.js';
 
@@ -117,7 +118,7 @@ const CommandItem = forwardRef(
               /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
-            detail && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", flex: "1", children: detail })
+            detail && /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", flex: "1", children: fallbackSpan(detail) })
           ] })
         )
       }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-DLBvSviR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DQEnEJ5F.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['r8zsxy','_1oex1d5'],true:{}},inset:{false:'g6uzt7',true:'yffm8g'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1g1eoqk','a5406r'],true:{}},inset:{false:'rxjycv',true:'_1kx8pyp'}}});
 
 export { cover };

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

@@ -1,14 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-DDvVQhtA.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-OaoFzEpt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-BYkohVwQ.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-CBbYH5Ni.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_14xpfrg'],variants:{pinned:{left:'_107756n',right:'_1dpnvxp'},pinnedType:{body:'rra9q3',header:{}}}});
-var cellOffsetVar = 'var(--bjo1s)';
-var cellSizeVar = 'var(--_134huyu)';
-var leftTotalSizeVar = 'var(--hc7z35)';
-var rightTotalSizeVar = 'var(--_5n1gce)';
-var table = recipeRuntime({base:'_1lj9bzz',variants:{pinned:{both:'_156ksi0',left:'z1klq1',none:{},right:'_1usmzub'}}});
-var totalSizeVar = 'var(--mqck0x)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'scnchw'],variants:{pinned:{left:'wpqfcs',right:'dvcp06'},pinnedType:{body:'_1dscpxv',header:{}}}});
+var cellOffsetVar = 'var(--_19oett4)';
+var cellSizeVar = 'var(--ml3qx3)';
+var leftTotalSizeVar = 'var(--_16h4ru9)';
+var rightTotalSizeVar = 'var(--s52att)';
+var totalSizeVar = 'var(--z33wj9)';
 
-export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, table, totalSizeVar };
+export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };

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

@@ -13,7 +13,7 @@ import { TableCell } from '../table/TableCell.js';
 import { TableHeader } from '../table/TableHeader.js';
 import '../table/TableHeaderCell.js';
 import { TableRow } from '../table/TableRow.js';
-import { table, cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+import { 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';
@@ -22,12 +22,12 @@ import { fakeRow } from './DataTableRowContext.js';
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
 const DataTableBody = forwardRef(
-  ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
+  ({ estimatedRowHeight = 52, loading, ...props }, outerRef) => {
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    const { table: table$1 } = useDataTableContext("@optiaxiom/react/DataTableBody");
-    const { rows } = table$1.getRowModel();
-    const centerColumns = table$1.getCenterVisibleLeafColumns();
+    const { table } = useDataTableContext("@optiaxiom/react/DataTableBody");
+    const { rows } = table.getRowModel();
+    const centerColumns = table.getCenterVisibleLeafColumns();
     const columnVirtualizer = useVirtualizer({
       count: centerColumns.length,
       enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
@@ -49,19 +49,13 @@ const DataTableBody = forwardRef(
         layout: "fixed",
         ref,
         style: assignInlineVars({
-          [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
-          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`,
-          [totalSizeVar]: `${table$1.getTotalSize()}`
+          [leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
+          [rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
+          [totalSizeVar]: `${table.getTotalSize()}`
         }),
-        ...table(
-          {
-            pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
-          },
-          className
-        ),
         ...props,
         children: [
-          /* @__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(
+          /* @__PURE__ */ jsx(TableHeader, { display: "grid", pinned: true, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
             DataTableHeaderCell,
             {
               header,
@@ -89,7 +83,7 @@ const DataTableBody = forwardRef(
               display: "grid",
               style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
               children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
-                row: fakeRow(table$1, rowIndex),
+                row: fakeRow(table, rowIndex),
                 virtualRow: void 0
               })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
                 row: rows[virtualRow.index],

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-mVjXakUg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-B8an411b.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1wlmw86',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_128g3my',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };