@optiaxiom/react 1.6.3 → 1.6.5

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-BrROz78w.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-DJXYDbM3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BvYdwRbs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ys3lns']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1r7y963']});
 
 export { months };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BTF5n5wA.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'bjxilv'});
+
+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-D_rF7ERt.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-DnqppYzX.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'bbiau9'});
+
+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-BrROz78w.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-D_9kP-US.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-DSfbl5A4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVpB-ZyQ.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-DZiXEb1p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1w1e67r',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1m534q0']});
+var card = recipeRuntime({base:['_1ujtu6l',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1eync2m']});
 
 export { card };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-bRXJUE44.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-B8gdU-Ha.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['xt74iu']});
+var checkbox = recipeRuntime({base:['_18zrm1j']});
 
 export { checkbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-CLpYdz7v.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-CTlGHaCX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_12e12xq',before:'rjpogw'}}});
-var content = recipeRuntime({base:[{flex:'1'},'bpj82f']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'o6pogg']});
+var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1xpwn6p',before:'_1kql3f8'}}});
+var content = recipeRuntime({base:[{flex:'1'},'toh2vu']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'lj5rcu']});
 
 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-BrROz78w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.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-BrROz78w.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-BjUsjoYb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-D2lgjD-W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'l6nzre']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1jyfk10']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'e2yu8n']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_14xru08']});
 
 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-BrROz78w.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BvQs1MEn.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-D0EsrWDq.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DIMZ_EzU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DCAitvuu.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CawzUOob.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-CEjpaJ7e.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1jqdpe7'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1kr5p7q']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'l9yaxw'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1mtei3u']});
 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-BrROz78w.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-dO91hoO8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-Bx9kiLKR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'o7oh3t']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'lolzyy']});
 
 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/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-D_9kP-US.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVpB-ZyQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1az6prp','lg062e'],true:{}},inset:{false:'lejx5f',true:'_1dmrjh4'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['yt9rgv','_1cvy6k8'],true:{}},inset:{false:'oet6ho',true:'u34bzt'}}});
 
 export { cover };

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

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-XbRWXPbL.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-C3M6h2y-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-B_IsO6Ga.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-_ycVurHJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'pvl02y'],variants:{pinned:{left:'_12ee53g',right:'_1m725zr'},pinnedType:{body:'l9v18q',header:{}}}});
-var cellOffsetVar = 'var(--_19aqbw4)';
-var cellSizeVar = 'var(--_7klnv1)';
-var leftTotalSizeVar = 'var(--_1cmv9kx)';
-var rightTotalSizeVar = 'var(--_4wnxsx)';
-var totalSizeVar = 'var(--b9s1zz)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1kuv00h'],variants:{pinned:{left:'i8onsp',right:'_13utppu'},pinnedType:{body:'_1jizlx3',header:{}}}});
+var cellOffsetVar = 'var(--_1f9vr11)';
+var cellSizeVar = 'var(--_1kw4r4m)';
+var leftTotalSizeVar = 'var(--se64m5)';
+var rightTotalSizeVar = 'var(--_33uvoi)';
+var totalSizeVar = 'var(--_1hkc5xo)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-wtT_f4PM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-BlMzntAm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_11itrma',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'nmvltj',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-BrROz78w.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BoivQXd0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DtlTU0j_.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'},'_4tbd5q']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1y7b0c7'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1g10ve3'],variants:{active:{false:'_8i3l8g',true:'_1acwhy9'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_7g3j3u']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'m555oo'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'aa0ju3'],variants:{active:{false:'ck85zu',true:'_1wr4h5o'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-B56bYnBH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CXKEWItH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'qcgqoc']});
-var date = recipeRuntime({base:'lxuufw'});
-var input = recipeRuntime({base:'n1rprm'});
-var picker = recipeRuntime({base:'_1fij3mt'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1m7zxe4']});
+var date = recipeRuntime({base:'_8q3tph'});
+var input = recipeRuntime({base:'_1f0azl7'});
+var picker = recipeRuntime({base:'_1q3q2xb'});
 
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -57,7 +57,6 @@ const DateInput = forwardRef(
     });
     const forceValueChange = useObserveValue(innerRef, setValue);
     const instant = typeof value === "string" ? toInstant(value) ?? null : null;
-    const [month, setMonth] = useState(instant ?? void 0);
     const maxDate = max ? toInstant(max) : void 0;
     const minDate = min ? toInstant(min) : void 0;
     return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
@@ -101,7 +100,6 @@ const DateInput = forwardRef(
           onChange: (event) => {
             onChange?.(event);
             setValue(event.target.value);
-            setMonth(toInstant(event.target.value));
           },
           onClick: (e) => {
             if (CSS.supports("selector(::-webkit-datetime-edit)")) {
@@ -155,8 +153,6 @@ const DateInput = forwardRef(
                 holiday,
                 max: maxDate,
                 min: minDate,
-                month,
-                onMonthChange: setMonth,
                 onValueChange: (date) => {
                   if (!date) {
                     return;

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BrROz78w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});