@optiaxiom/react 1.0.0 → 1.0.2

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-4FPrdoRp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CQCDEGIj.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'},'_14vsm3s'],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'},'_7sxgok'],xs:[{fontWeight:'400',size:'xs'},'_1rq833h'],sm:[{size:'sm'},'on33y3'],md:[{size:'md'},'wnwpbu'],lg:[{size:'lg'},'_20ictt'],xl:[{size:'xl'},'_1b4szsc'],'3xl':[{size:'3xl'},'_1sjmwii']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1primr5'],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'},'_133s16a'],xs:[{fontWeight:'400',size:'xs'},'_15w3gwk'],sm:[{size:'sm'},'thcjys'],md:[{size:'md'},'_1d43oau'],lg:[{size:'lg'},'_1vcv24r'],xl:[{size:'xl'},'p8ntdb'],'3xl':[{size:'3xl'},'_1dumk0y']}}});
 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-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_5m7xs',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_136f1qw',{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-B6uM87MS.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-RFc_brGy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-B5sSvN1U.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1gpddad']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'m1og1i']});
 
 export { backdrop };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BhfN--ir.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-DW9NourM.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'},'_1rrqoo7'],variants:{intent:{danger:'_13oir7k',information:'r330f0',neutral:'_1f305lk',primary:'rcfq78',success:'_1k0hbff',warning:'_7m5n97'},variant:{strong:'g1b2jd',subtle:'_1jkj90b'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'e9kk2p'],variants:{intent:{danger:'_1h2gxdx',information:'_1d3qedt',neutral:'c8tbzn',primary:'az3qov',success:'ohjqih',warning:'_1ilmyth'},variant:{strong:'_4lgik3',subtle:'_1k6wfqp'}}});
 
 export { badge };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-Da-umeWB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-YZk4FvO0.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'},'_1lp5cbt']});
+var content = recipeRuntime({base:[{flex:'1',gap:'8'},'_1cou84l']});
 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-B6uM87MS.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-OtYyCU5C.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-CS-G2hy7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-IQK5Rgk4.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-CtfynAbO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1o0houj'});
+var box = recipeRuntime({base:'_15dp18s'});
 
 export { box };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DX09wDLi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-Wrav6UY7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1v1hgtx']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1pr0wtp']});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Bbc1EPhV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-D9fDwi5c.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1ixzyyj']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1kpvdup']});
 
 export { link };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DvzVv_Yk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CsVNMzoL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_2lnl5n',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1gs8uwd'],variants:{intent:{danger:'_14bcrya',neutral:'shfzd4',primary:'ugm1zw'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'jrkf2u',true:{}},variant:{outline:'_1d7imox',strong:'_1s2c6p7',subtle:'_14v21wc'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1y3codl',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1vekxj',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_11pjzi1',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'uwjh4w']});
+var buttonBase = recipeRuntime({base:['_1rv21po',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_4tul9y'],variants:{intent:{danger:'_1jv452r',neutral:'_1n7ezwb',primary:'bmhnm2'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'_1ithqm1',true:{}},variant:{outline:'_1hk8dq',strong:'_11eeq2q',subtle:'_1ycyamr'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'y49kz',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1lmvx71',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_1hcgo1r',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'_6k7zjz']});
 
 export { buttonBase, spinner };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_17vcku3'});
+var buttonGroup = recipeRuntime({base:'_1j6pklz'});
 
 export { buttonGroup };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DvzVv_Yk.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DxNPPPVO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CsVNMzoL.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-Cdkejac-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'b5kl1r']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1v1fxyb']});
 
 export { loadable };

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

@@ -1,11 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 import { CalendarChevron } from './CalendarChevron.js';
 import { CalendarDay } from './CalendarDay.js';
@@ -37,12 +39,13 @@ const Calendar = forwardRef(
     max,
     min,
     mode = "single",
+    onHeightChange,
     onValueChange,
     today,
     value: valueProp,
     weekend,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const [value, setValue] = useControllableState({
       defaultProp: defaultValue,
       onChange: onValueChange,
@@ -52,6 +55,22 @@ const Calendar = forwardRef(
       base: 1,
       sm: 2
     });
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const onHeightChangeStable = useEffectEvent(onHeightChange ?? (() => {
+    }));
+    useEffect(() => {
+      if (!innerRef.current) {
+        return;
+      }
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          onHeightChangeStable(entry.contentRect.height);
+        }
+      });
+      observer.observe(innerRef.current);
+      return () => observer.disconnect();
+    }, [onHeightChangeStable]);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -65,15 +84,17 @@ const Calendar = forwardRef(
           {
             autoFocus: true,
             components,
-            defaultMonth: value && "from" in value ? value.from : value,
-            endMonth: max,
+            defaultMonth: value && typeof value === "object" && "from" in value ? value.from : value,
+            disabled: [
+              ...min ? [{ before: min }] : [],
+              ...max ? [{ after: max }] : []
+            ],
             mode,
             modifiers: { holiday, weekend },
             numberOfMonths: mode === "range" ? numberOfMonths : 1,
             onSelect: setValue,
             required: true,
             selected: value,
-            startMonth: min,
             today
           }
         )

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-zG41UHo4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-BuCPLplF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'8',size:'md',transition:'colors'},'_6qlr8d'],variants:{appearance:{'default':'n3i0qf',holiday:[{color:'fg.error'},'fb77a4'],range_middle:'fhu8yh',selected:[{color:'fg.white'},'_1583xtq'],weekend:{color:'fg.tertiary'}},range:{end:['_1tpgzk0'],middle:['k5e6lx'],start:['_1l6hvd5']}}});
-var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1nzu17c']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'8',size:'md',transition:'colors'},'_10knug1'],variants:{appearance:{'default':'_1f1c79j',holiday:[{color:'fg.error'},'eqoxcy'],range_middle:'djfph4',selected:[{color:'fg.white'},'_1pz7t5s'],weekend:[{color:'fg.tertiary'},'_10vynvc']},range:{end:['_1aeycoa'],middle:['f84itz'],start:['oo4fp2']}}});
+var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'hilpb5']});
 
 export { button, today };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BLY60OYq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-Czb1i3AJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1cfhwf6']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1svokqo']});
 
 export { months };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-B5mcb2DY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-EHFSUN3p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'uuxbyg']});
+var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1bmk9r1']});
 
 export { nav };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-BizQxxnK.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-QXU3qT6c.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-Br-saxRR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-VfBrbMf1.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-DWgR_kLB.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-jqZb_7_n.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_99v27q',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'wqa1ah']});
+var card = recipeRuntime({base:['sw28nd',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1kiyjmj']});
 
 export { card };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-BR3mZqQ9.css';
-import './../../../../assets/src/card-actions/CardActions.css.ts.vanilla-DGAHHTMs.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-BJFwp3I-.css';
+import './../../../../assets/src/card-actions/CardActions.css.ts.vanilla-rkKkSUIB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:['_6k5tct']});
+var actions = recipeRuntime({base:['dp909n']});
 
 export { actions };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-BAjfPqKX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-CdKgrBrx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1u4ar3g'],variants:{orientation:{horizontal:[{w:'auto'},'_8mo2c2'],vertical:[{w:'full'},'_122lf4f']}}});
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_13swnz9'],variants:{orientation:{horizontal:[{w:'auto'},'_8r39l3'],vertical:[{w:'full'},'_1y1df8o']}}});
 
 export { cardImage };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-BR3mZqQ9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-BJFwp3I-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardOverflow = recipeRuntime({base:['ls9q7c',{alignSelf:'stretch'},'_8aww59'],variants:{orientation:{horizontal:['_1ahb7bd'],vertical:['_9gcr31']}}});
+var cardOverflow = recipeRuntime({base:['rhlxpg',{alignSelf:'stretch'},'aanpp1'],variants:{orientation:{horizontal:['_1vdtv4p'],vertical:['_1kol0hh']}}});
 
 export { cardOverflow };

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BQF6GBfz.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Dck9Yy-L.css';
-import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-BGoEjOnC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BwHzm_lE.css';
+import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DrgK3jgJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1fvkf1c'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_10v81k0']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'j2fnar'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'b9xhpj']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/clock/Clock-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/clock/Clock.css.ts.vanilla-BaVWu3y1.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var wheel = recipeRuntime({base:[{flexDirection:'column',gap:'2',justifyContent:'flex-start',overflow:'auto',px:'4'},'v9ht2q']});
+
+export { wheel };

package/dist/esm/packages/react/src/clock/Clock.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useRef, useEffect } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { SegmentedControl } from '../segmented-control/SegmentedControl.js';
+import { SegmentedControlItem } from '../segmented-control-item/SegmentedControlItem.js';
+import { wheel } from './Clock-css.js';
+import { parse, range, format } from './utils.js';
+
+const Clock = forwardRef(
+  ({ defaultValue, onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: valueProp
+    });
+    const parsed = parse(value, parseInt(step) / 60);
+    const hourRef = useRef(null);
+    const minuteRef = useRef(null);
+    useEffect(() => {
+      if (hourRef.current?.parentElement) {
+        hourRef.current.parentElement.style.overflow = "hidden";
+        hourRef.current?.scrollIntoView();
+        hourRef.current.parentElement.style.overflow = "";
+      }
+      if (minuteRef.current?.parentElement) {
+        minuteRef.current.parentElement.style.overflow = "hidden";
+        minuteRef.current?.scrollIntoView();
+        minuteRef.current.parentElement.style.overflow = "";
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        alignItems: "stretch",
+        flexDirection: "row",
+        gap: "0",
+        onKeyDown: (event) => {
+          if (!(event.target instanceof HTMLButtonElement)) {
+            return;
+          }
+          const parent = event.target.parentElement;
+          if (!parent) {
+            return;
+          }
+          const grandParent = parent.parentElement;
+          if (!grandParent) {
+            return;
+          }
+          const sibling = event.key === "ArrowRight" ? parent.nextElementSibling ?? grandParent.firstElementChild : event.key === "ArrowLeft" ? parent.previousElementSibling ?? grandParent.lastElementChild : void 0;
+          if (!sibling) {
+            return;
+          }
+          const focusable = sibling.querySelector('[tabindex="0"]') ?? sibling.querySelector('[aria-checked="true"]');
+          if (focusable instanceof HTMLButtonElement) {
+            focusable.focus();
+          }
+        },
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              "aria-label": "Select hour",
+              loop: true,
+              onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
+              orientation: "vertical",
+              role: "radiogroup",
+              value: parsed.hour,
+              ...wheel(),
+              children: range(1, 12).map((hour) => /* @__PURE__ */ jsx(
+                SegmentedControlItem,
+                {
+                  appearance: "subtle",
+                  flex: "none",
+                  ref: hour === parsed.hour ? hourRef : void 0,
+                  square: true,
+                  value: hour,
+                  children: hour
+                },
+                hour
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              "aria-label": "Select minute",
+              loop: true,
+              onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
+              orientation: "vertical",
+              role: "radiogroup",
+              value: parsed.minute,
+              ...wheel(),
+              children: range(0, 59, parseInt(step) / 60).map((minute) => minute.padStart(2, "0")).map((minute) => /* @__PURE__ */ jsx(
+                SegmentedControlItem,
+                {
+                  appearance: "subtle",
+                  "aria-label": `${parseInt(minute)}`,
+                  flex: "none",
+                  ref: minute === parsed.minute ? minuteRef : void 0,
+                  square: true,
+                  value: minute,
+                  children: minute
+                },
+                minute
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              "aria-label": "Select AM or PM",
+              onValueChange: (meridiem) => meridiem && setValue(format({ ...parsed, meridiem })),
+              orientation: "vertical",
+              role: "radiogroup",
+              value: parsed.meridiem,
+              ...wheel(),
+              children: ["AM", "PM"].map((meridiem) => /* @__PURE__ */ jsx(
+                SegmentedControlItem,
+                {
+                  appearance: "subtle",
+                  flex: "none",
+                  square: true,
+                  value: meridiem,
+                  children: meridiem
+                },
+                meridiem
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Clock.displayName = "@optiaxiom/react/Clock";
+
+export { Clock };

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

@@ -0,0 +1,24 @@
+const format = ({
+  hour,
+  meridiem,
+  minute
+}) => {
+  const formattedHour = parseInt(hour) === 12 ? 0 : parseInt(hour);
+  return (formattedHour + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0") + ":" + minute;
+};
+const parse = (value, step = 1) => {
+  const now = /* @__PURE__ */ new Date();
+  const [hour, minute] = (value ? value : `${now.getHours()}:${now.getMinutes()}`).split(":");
+  const parsedHour = parseInt(hour) % 12 === 0 ? 12 : parseInt(hour) % 12;
+  return {
+    hour: parsedHour.toString(),
+    meridiem: parseInt(hour) < 12 ? "AM" : "PM",
+    minute: (Math.floor(parseInt(minute) / step) * step).toString().padStart(2, "0")
+  };
+};
+const range = (min, max, step = 1) => Array.from(
+  { length: Math.floor((max - min) / step) + 1 },
+  (_, index) => (min + index * step).toString()
+);
+
+export { format, parse, range };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-DPKZKRnl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-BSUxBEOS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_1npythz']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1c2ofof']});
 
 export { code };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-c_tAijxG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Bk9Sshj3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'r268fi'});
+var item = recipeRuntime({base:'_1xqzlpu'});
 
 export { item };

package/dist/esm/packages/react/src/command-listbox/CommandListbox.js

@@ -6,7 +6,7 @@ import { Listbox } from '../listbox/Listbox.js';
 
 const CommandListbox = forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext("CommandList");
+    const { downshift, setPlaced } = useCommandContext("CommandListbox");
     useEffect(() => {
       setPlaced(true);
     }, [setPlaced]);

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-BizQxxnK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-VfBrbMf1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['r9hf74','_1kqf8w7'],true:{}},inset:{false:'_14jppo8',true:'_1v9mwi7'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['okt9tl','_91uvmf'],true:{}},inset:{false:'_13gnan0',true:'u8qhju'}}});
 
 export { cover };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-YvJepO06.css';
-import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-B3KZiWPc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CggMOZ5O.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-cijPXl7J.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'wk3nm0'],variants:{pinned:{left:'_1o0dnt0',right:'_1uqeymu'},pinnedType:{body:'_1r27fvd',header:{}}}});
-var cellOffsetVar = 'var(--_9qz8iw)';
-var cellSizeVar = 'var(--_1w3htlt)';
-var header = recipeRuntime({base:[{display:'grid'},'_1if0wrg']});
-var leftTotalSizeVar = 'var(--r6b9zw)';
-var rightTotalSizeVar = 'var(--_1rs9oq5)';
-var table = recipeRuntime({base:'_1gb8j4j',variants:{pinned:{both:'_13gluip',left:'_16oerzz',none:{},right:'p5oxqv'}}});
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'vhvrs2'],variants:{pinned:{left:'_12le3yj',right:'_4h3ij'},pinnedType:{body:'psuqw8',header:{}}}});
+var cellOffsetVar = 'var(--_10jvtdq)';
+var cellSizeVar = 'var(--_1cv9ezw)';
+var header = recipeRuntime({base:[{display:'grid'},'_1pnzk2v']});
+var leftTotalSizeVar = 'var(--_14y88du)';
+var rightTotalSizeVar = 'var(--_1udkrwj)';
+var table = recipeRuntime({base:'_1y8bhl5',variants:{pinned:{both:'_1cfhjth',left:'_17a6ok',none:{},right:'_1gmnqvo'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B6uM87MS.css';
-import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-eugFkbbr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css';
+import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-DV0TYHds.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'traiwl',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_17o6sfb',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };