@optiaxiom/react 1.6.2 → 1.6.4

package/dist/esm/packages/react/src/auth-provider/useAuthContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { AxiomAuthContext } from '@optiaxiom/globals';
+import { useContext } from 'react';
+
+function useAuthContext() {
+  return useContext(AxiomAuthContext);
+}
+
+export { useAuthContext };

package/dist/esm/packages/react/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-B6Kq1zoY.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/avatar/Avatar.css.ts.vanilla-wzzUVtRA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'avgr6p'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'ifwyrx'],xs:[{fontWeight:'400',size:'xs'},'_9yk4pa'],sm:[{size:'sm'},'_169qlc8'],md:[{size:'md'},'jz9glg'],lg:[{size:'lg'},'_1bk6d9b'],xl:[{size:'xl'},'_1wbjn06'],'3xl':[{size:'3xl'},'_1x7zjep']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1nn7cby'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'hwiaeg'],xs:[{fontWeight:'400',size:'xs'},'_1nvupzf'],sm:[{size:'sm'},'y1q13c'],md:[{size:'md'},'e8e7r8'],lg:[{size:'lg'},'_1nfwimf'],xl:[{size:'xl'},'_128mjlv'],'3xl':[{size:'3xl'},'_1pmnkpj']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

package/dist/esm/packages/react/src/avatar/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C_g9Pa34.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1dd9ens',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['rlesl2',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-C5nUsn1D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CDehhrsJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1ol5h8l']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_5v9ax1']});
 
 export { backdrop };

package/dist/esm/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-B8N8sUp_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-BA6X9gZP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'jkmtjr'],variants:{intent:{danger:'_159id0i',information:'_8za4me',neutral:'ccerux',primary:'ed7ly9',success:'_1rso8pt',warning:'paio5u'},variant:{strong:'_1qibg5y',subtle:'yp501a'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1coyhhf'],variants:{intent:{danger:'_1spn8ab',information:'x43bvk',neutral:'_1vn7mip',primary:'_1c1j7io',success:'_1255b1p',warning:'_1pup9xu'},variant:{strong:'fwcbal',subtle:'_1t6rmtb'}}});
 
 export { badge };

package/dist/esm/packages/react/src/banner/Banner-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-dowsuEhr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-CQZuS6VD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'_1gyp7nl']});
+var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'_13hxu6w']});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, content, icon };

package/dist/esm/packages/react/src/box/Box-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-D6pCdHON.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-TNDRA49L.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BlhoG3SJ.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-D7s8JFT5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1muyqie'});
+var box = recipeRuntime({base:'_1mfbxod'});
 
 export { box };

package/dist/esm/packages/react/src/breadcrumb/Breadcrumb-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-CWV6gTC7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-CJlTJqvy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'ofsgwk'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1qds2k3']});
+var link = recipeRuntime({base:'_1ivmp59'});
+var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_12e8zw3']});
 
 export { link, list };

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbNode-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-B98wT0pr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CgaYaIi3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'aq55bu']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'uwoy69']});
 
 export { item };

package/dist/esm/packages/react/src/button/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C_g9Pa34.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_17piix3'});
+var buttonGroup = recipeRuntime({base:'_1rs5q45'});
 
 export { buttonGroup };

package/dist/esm/packages/react/src/button/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BWx7ffIN.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BJ_sBZ1U.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/button/ButtonRoot.css.ts.vanilla-C_lserkU.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-B5y_020a.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1sg6jmy']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_10at4li']});
 
 export { loadable };

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzVeZagm.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BWx7ffIN.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/button/ButtonRoot.css.ts.vanilla-C_lserkU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_16rtupx',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'w0m53j'],variants:{intent:{danger:'_1ihm66z',neutral:'_1tb09wm',primary:'i6pcaf'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{opal:'_1gdt8eu',outline:'_1nl1zzh',strong:'_1bxueig',subtle:'uotmom'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1r3p0tk',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'jwnbxd',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_1vpwjre',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_1d2mmht']});
+var buttonBase = recipeRuntime({base:['_1x122cp',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_15gz51f'],variants:{intent:{danger:'_70cdod',neutral:'_1ow8zv9',primary:'_1tgbe0m'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{opal:'lmmpj',outline:'_1y6etbq',strong:'_1qrjb39',subtle:'ekhr0m'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_17rkx8a',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1s2z4xk',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'wumhlm',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'gahosr']});
 
 export { buttonBase, spinner };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-qc-tilCR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-nhTKmK6h.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'nwzjlp'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_1tgflbg'}}});
 
 export { picker };

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

@@ -2,15 +2,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { forwardRef, useRef, useState, useMemo } from 'react';
+import { forwardRef, useState, useRef } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Clock } from '../clock/Clock.js';
 import { Flex } from '../flex/Flex.js';
-import '../field/FieldContext.js';
-import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { usePopoverContentContext } from '../popover/PopoverContentContext.js';
 import '../popover/PopoverContext.js';
 import { Text } from '../text/Text.js';
@@ -20,13 +18,14 @@ import { toInstant } from '../utils/toInstant.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainTime } from '../utils/toPlainTime.js';
 import { picker } from './Calendar-css.js';
+import { CalendarCaptionLabel } from './CalendarCaptionLabel.js';
 import { CalendarChevron } from './CalendarChevron.js';
+import { CalendarProvider } from './CalendarContext.js';
 import { CalendarDay } from './CalendarDay.js';
 import { CalendarDayButton } from './CalendarDayButton.js';
 import { CalendarMonthCaption } from './CalendarMonthCaption.js';
 import { CalendarMonthGrid } from './CalendarMonthGrid.js';
 import { CalendarMonths } from './CalendarMonths.js';
-import { CalendarNav } from './CalendarNav.js';
 import { CalendarNextMonthButton } from './CalendarNextMonthButton.js';
 import { CalendarPreviousMonthButton } from './CalendarPreviousMonthButton.js';
 import { CalendarWeek } from './CalendarWeek.js';
@@ -35,12 +34,13 @@ import { CalendarWeekdays } from './CalendarWeekdays.js';
 import { toTimeZoneName } from './toTimeZoneName.js';
 
 const components = {
+  CaptionLabel: CalendarCaptionLabel,
   Chevron: CalendarChevron,
   Day: CalendarDay,
+  DayButton: CalendarDayButton,
   MonthCaption: CalendarMonthCaption,
   MonthGrid: CalendarMonthGrid,
   Months: CalendarMonths,
-  Nav: CalendarNav,
   NextMonthButton: CalendarNextMonthButton,
   PreviousMonthButton: CalendarPreviousMonthButton,
   Week: CalendarWeek,
@@ -54,9 +54,7 @@ const Calendar = forwardRef(
     max,
     min,
     mode = "single",
-    month,
     onDateSelect,
-    onMonthChange,
     onValueChange,
     step,
     today,
@@ -66,6 +64,7 @@ const Calendar = forwardRef(
     ...props
   }, outerRef) => {
     const { side } = usePopoverContentContext("@optiaxiom/react/Calendar");
+    const [view, setView] = useState("day");
     const [value, setValue] = useControllableState({
       caller: "@optiaxiom/react/Calendar",
       defaultProp: defaultValue,
@@ -73,148 +72,127 @@ const Calendar = forwardRef(
       prop: valueProp
     });
     const time = type === "date" ? "00:00" : toPlainTime(value instanceof Date ? value : /* @__PURE__ */ new Date(), step);
-    const numberOfMonths = useResponsiveMatches({
-      base: 1,
-      sm: 2
-    });
+    const [month, setMonth] = useState(
+      value && typeof value === "object" && "from" in value ? value.from : value instanceof Date ? value : today ?? /* @__PURE__ */ new Date()
+    );
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const [from, setFrom] = useState();
     const [to, setTo] = useState();
-    const DayButtonMemo = useMemo(
-      () => function DayButton({
-        onFocus,
-        onPointerEnter,
-        onPointerLeave,
-        ...props2
-      }) {
-        return /* @__PURE__ */ jsx(
-          CalendarDayButton,
-          {
-            onFocus: (event) => {
-              onFocus?.(event);
-              setTo(props2.day.date);
-            },
-            onPointerEnter: (event) => {
-              onPointerEnter?.(event);
-              if (!event.currentTarget.disabled) {
-                setTo(props2.day.date);
-              }
-            },
-            onPointerLeave: (event) => {
-              onPointerLeave?.(event);
-              if (!event.currentTarget.disabled) {
-                setTo(void 0);
-              }
-            },
-            ...props2
-          }
-        );
-      },
-      []
-    );
-    return /* @__PURE__ */ jsxs(
-      Flex,
+    return /* @__PURE__ */ jsx(
+      CalendarProvider,
       {
-        bg: "bg.default",
-        color: "fg.default",
-        fontSize: "md",
-        gap: "4",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...picker({ side }), children: mode === "single" ? /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              autoFocus: true,
-              components: {
-                ...components,
-                DayButton: DayButtonMemo
-              },
-              defaultMonth: value instanceof Date ? value : void 0,
-              disabled: [
-                ...min ? [{ before: min }] : [],
-                ...max ? [{ after: max }] : []
-              ],
-              mode: "single",
-              modifiers: { holiday, weekend },
-              month,
-              onMonthChange,
-              onSelect: (value2) => {
-                const date = value2 ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2 ?? null;
-                setValue(date);
-                onDateSelect?.(date);
-              },
-              required: true,
-              selected: value instanceof Date ? value : void 0,
-              today
-            }
-          ) : /* @__PURE__ */ jsx(
-            DayPicker,
-            {
-              autoFocus: true,
-              components: {
-                ...components,
-                DayButton: DayButtonMemo
-              },
-              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : void 0,
-              disabled: [
-                ...min ? [{ before: min }] : [],
-                ...max ? [{ after: max }] : []
-              ],
-              fixedWeeks: true,
-              mode: "range",
-              modifiers: { holiday, weekend },
-              month,
-              numberOfMonths,
-              onMonthChange,
-              onSelect: (newValue) => {
-                if (!from) {
-                  const oldFrom = value && typeof value === "object" && "from" in value ? value.from : void 0;
-                  const newFrom = oldFrom && newValue?.from && newValue.from < oldFrom ? newValue.from : newValue?.to;
-                  setFrom(newFrom);
-                  if (newFrom) {
-                    onDateSelect?.(newFrom);
+        month,
+        setMonth,
+        setTo,
+        setView,
+        view,
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            bg: "bg.default",
+            color: "fg.default",
+            fontSize: "md",
+            gap: "4",
+            ref,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(Box, { asChild: true, ...picker({ side }), children: mode === "single" ? /* @__PURE__ */ jsx(
+                DayPicker,
+                {
+                  autoFocus: true,
+                  components,
+                  disabled: [
+                    ...min ? [{ before: min }] : [],
+                    ...max ? [{ after: max }] : []
+                  ],
+                  mode: "single",
+                  modifiers: { holiday, weekend },
+                  month,
+                  navLayout: "after",
+                  onMonthChange: setMonth,
+                  onSelect: (value2) => {
+                    const date = value2 ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2 ?? null;
+                    setValue(date);
+                    onDateSelect?.(date);
+                  },
+                  required: true,
+                  selected: value instanceof Date ? value : void 0,
+                  today
+                }
+              ) : /* @__PURE__ */ jsx(
+                DayPicker,
+                {
+                  autoFocus: true,
+                  components,
+                  disabled: [
+                    ...min ? [{ before: min }] : [],
+                    ...max ? [{ after: max }] : []
+                  ],
+                  fixedWeeks: true,
+                  mode: "range",
+                  modifiers: { holiday, weekend },
+                  month,
+                  navLayout: "after",
+                  onMonthChange: setMonth,
+                  onSelect: (newValue) => {
+                    if (!from) {
+                      const oldFrom = value && typeof value === "object" && "from" in value ? value.from : void 0;
+                      const newFrom = oldFrom && newValue?.from && newValue.from < oldFrom ? newValue.from : newValue?.to;
+                      setFrom(newFrom);
+                      if (newFrom) {
+                        onDateSelect?.(newFrom);
+                      }
+                    } else {
+                      setFrom(void 0);
+                      const start = to && to < from ? to : from;
+                      const end = to && to < from ? toInstant(toPlainDate(from) + "T23:59:59.999") : to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0;
+                      if (end) {
+                        onDateSelect?.(end);
+                      }
+                      setValue(
+                        end ? {
+                          from: start,
+                          to: end
+                        } : null
+                      );
+                    }
+                  },
+                  required: true,
+                  selected: from ? to && to < from ? { from: to, to: from } : { from, to } : value && typeof value === "object" && "from" in value ? value : void 0,
+                  showOutsideDays: true,
+                  today
+                }
+              ) }),
+              type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Flex, { gap: "8", mt: "8", children: [
+                /* @__PURE__ */ jsx(
+                  Clock,
+                  {
+                    onValueChange: (time2) => {
+                      setValue(
+                        /* @__PURE__ */ new Date(
+                          toPlainDate(value instanceof Date ? value : /* @__PURE__ */ new Date()) + "T" + time2
+                        )
+                      );
+                    },
+                    step,
+                    value: time
                   }
-                } else {
-                  setFrom(void 0);
-                  const start = to && to < from ? to : from;
-                  const end = to && to < from ? toInstant(toPlainDate(from) + "T23:59:59.999") : to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0;
-                  if (end) {
-                    onDateSelect?.(end);
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    color: "fg.tertiary",
+                    fontSize: "sm",
+                    textAlign: "center",
+                    w: "full",
+                    children: toTimeZoneName(value instanceof Date ? value : /* @__PURE__ */ new Date())
                   }
-                  setValue(
-                    end ? {
-                      from: start,
-                      to: end
-                    } : null
-                  );
-                }
-              },
-              required: true,
-              selected: from ? to && to < from ? { from: to, to: from } : { from, to } : value && typeof value === "object" && "from" in value ? value : void 0,
-              showOutsideDays: true,
-              today
-            }
-          ) }),
-          type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Flex, { gap: "8", mt: "8", children: [
-            /* @__PURE__ */ jsx(
-              Clock,
-              {
-                onValueChange: (time2) => {
-                  setValue(
-                    /* @__PURE__ */ new Date(
-                      toPlainDate(value instanceof Date ? value : /* @__PURE__ */ new Date()) + "T" + time2
-                    )
-                  );
-                },
-                step,
-                value: time
-              }
-            ),
-            /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", textAlign: "center", w: "full", children: toTimeZoneName(value instanceof Date ? value : /* @__PURE__ */ new Date()) })
-          ] })
-        ]
+                )
+              ] })
+            ]
+          }
+        )
       }
     );
   }

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CaptionLabel } from 'react-day-picker';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+import { useCalendarContext } from './CalendarContext.js';
+
+function CalendarCaptionLabel({
+  children,
+  ...props
+}) {
+  const { month, setView, view } = useCalendarContext(
+    "@optiaxiom/react/CalendarCaptionLabel"
+  );
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      appearance: "subtle",
+      icon: /* @__PURE__ */ jsx(IconAngleDown, {}),
+      iconPosition: "end",
+      onClick: () => {
+        if (view === "month") {
+          setView("year");
+        } else {
+          setView("month");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(CaptionLabel, { ...props, children: view === "year" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          month.getFullYear(),
+          " - ",
+          month.getFullYear() + 11
+        ] }) : view === "month" ? month.getFullYear() : children }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: view === "month" ? "change year" : "change month" })
+      ]
+    }
+  );
+}
+CalendarCaptionLabel.displayName = "@optiaxiom/react/CalendarCaptionLabel";
+
+export { CalendarCaptionLabel };

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [CalendarProvider, useCalendarContext] = createContext("@optiaxiom/react/Calendar");
+
+export { CalendarProvider, useCalendarContext };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-Pv41tL.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-cK14Nhaz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-C3xplR8m.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1crvzw4'],variants:{appearance:{'default':'_4nidry',holiday:[{color:'fg.error'},'_1j4lnkl'],range_middle:'_1ylh3il',selected:[{color:'fg.white'},'_1jnil8w'],weekend:[{color:'fg.tertiary'},'_8dt9ih']},range:{end:['i563vj'],middle:['_1fn5ybu'],start:['e9w6yx']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_4p1wls']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1ny2ctv'],variants:{appearance:{'default':'_1qni3h4',holiday:[{color:'fg.error'},'_1f96ucd'],range_middle:'ygyg0i',selected:[{color:'fg.white'},'_4qlix3'],weekend:[{color:'fg.tertiary'},'xbazcd']},range:{end:['_1lky9ox'],middle:['_1y98y8b'],start:['_19dibdj']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'v31hmv']});
 
 export { button, today };

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

@@ -4,17 +4,19 @@ import { useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useCalendarContext } from './CalendarContext.js';
 import { button, today } from './CalendarDayButton-css.js';
 
 function CalendarDayButton({
   children,
   className,
   color: _color,
-  day: _day,
+  day,
   disabled,
   modifiers,
   ...props
 }) {
+  const { setTo } = useCalendarContext("@optiaxiom/react/CalendarDayButton");
   const ref = useRef(null);
   useEffect(() => {
     if (modifiers.focused) {
@@ -32,6 +34,19 @@ function CalendarDayButton({
         },
         className
       ),
+      onFocus: () => {
+        setTo(day.date);
+      },
+      onPointerEnter: () => {
+        if (!(modifiers.outside || disabled)) {
+          setTo(day.date);
+        }
+      },
+      onPointerLeave: () => {
+        if (!(modifiers.outside || disabled)) {
+          setTo(void 0);
+        }
+      },
       children: /* @__PURE__ */ jsxs("button", { disabled: modifiers.outside || disabled, ref, ...props, children: [
         children,
         modifiers.today && /* @__PURE__ */ jsx(Box, { ...today() })

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BQ5--BCo.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-BvjAHj07.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_18f8xat']});
+
+export { grid };