@optiaxiom/react 1.3.2 → 1.3.4

package/dist/esm/packages/react/src/alert-dialog/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-BB19Fskg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CeHGV9aR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1njbpyp']});
+var footer = recipeRuntime({base:[{flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'opzudk']});
 
 export { footer };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogHeader.js

@@ -7,7 +7,6 @@ import { Heading } from '../heading/Heading.js';
 import { Icon } from '../icon/Icon.js';
 import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
 import '../utils/conditions.js';
-import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
 

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-4T1-0l3f.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DxrBSYDj.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'},'fht1mb'],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'},'eh6yrq'],xs:[{fontWeight:'400',size:'xs'},'_5h2bbk'],sm:[{size:'sm'},'vfck66'],md:[{size:'md'},'_1y9yrhh'],lg:[{size:'lg'},'_1fur72f'],xl:[{size:'xl'},'n7qnzd'],'3xl':[{size:'3xl'},'_19pwqi0']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1tyxdvy'],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'},'_1kf5obh'],xs:[{fontWeight:'400',size:'xs'},'hjd31x'],sm:[{size:'sm'},'s6mype'],md:[{size:'md'},'_1j2bgfz'],lg:[{size:'lg'},'ny716y'],xl:[{size:'xl'},'_1mbexzo'],'3xl':[{size:'3xl'},'_16q5uad']}}});
 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/Avatar.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { IconUserSolid } from '../icons/IconUserSolid.js';
 import { IconUsersSolid } from '../icons/IconUsersSolid.js';
 import { avatar, fallback, icon } from './Avatar-css.js';
-import { AvatarContext } from './AvatarContext.js';
+import { useAvatarContext } from './AvatarContext.js';
 
 function getInitialsFromName(name) {
   const names = name.trim().split(" ");
@@ -31,7 +31,7 @@ const Avatar = forwardRef(
     src,
     ...props
   }, ref) => {
-    const context = useContext(AvatarContext);
+    const context = useAvatarContext("@optiaxiom/react/Avatar");
     const size = sizeProp || context?.size || "md";
     return /* @__PURE__ */ jsx(
       Box,

package/dist/esm/packages/react/src/avatar/AvatarContext.js

@@ -1,8 +1,6 @@
 "use client";
-import { createContext } from 'react';
+import { createContext } from '@radix-ui/react-context';
 
-const AvatarContext = createContext({
-  size: void 0
-});
+const [AvatarProvider, useAvatarContext] = createContext("@optiaxiom/react/Avatar", { size: void 0 });
 
-export { AvatarContext };
+export { AvatarProvider, useAvatarContext };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['um8pwz',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_1mfs6tx',{display:'flex'}]});
 
 export { avatarGroup };

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

@@ -4,12 +4,12 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { AvatarContext } from './AvatarContext.js';
+import { AvatarProvider } from './AvatarContext.js';
 import { avatarGroup } from './AvatarGroup-css.js';
 
 const AvatarGroup = forwardRef(
   ({ children, className, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size }, children }) });
+    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarProvider, { size, children }) });
   }
 );
 AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DJRYzxKo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DcYrZKqo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1kgl6vp']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_5ml0ot']});
 
 export { backdrop };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CCwl4jnG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-B8D-HF4B.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'},'tavnz9'],variants:{intent:{danger:'_1ywbg1e',information:'byaw3r',neutral:'wxkdab',primary:'_17t5eg7',success:'vqy1pr',warning:'_6bz77b'},variant:{strong:'irq2up',subtle:'w03say'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'fpmdye'],variants:{intent:{danger:'rkb69e',information:'_1pkxsnd',neutral:'_10jxfyc',primary:'z7dgrm',success:'_39fkm3',warning:'_18fvatm'},variant:{strong:'z4m2jg',subtle:'_18efg7n'}}});
 
 export { badge };

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Text } from '../text/Text.js';
 import { badge } from './Badge-css.js';
 
+const Slot = createSlot("@optiaxiom/react/Badge");
 const Badge = forwardRef(
   ({
     asChild,

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-Wkjy8BkP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-BPijpKTb.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'},'ey9kj7']});
+var content = recipeRuntime({base:[{flex:'1',gap:'8'},'_4qy3zx']});
 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-CKOpez_X.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-DOGkQqDO.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-DthSPGYm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BcqoWQvZ.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-Dnq424Jf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_9b91xg'});
+var box = recipeRuntime({base:'_1kq6xyi'});
 
 export { box };

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import '@optiaxiom/globals/fonts';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { version } from '../../package.json.js';
 import { sprinkles } from '../sprinkles/sprinkles.js';
@@ -9,6 +9,7 @@ import { sprinklesMerge } from '../sprinkles/sprinklesMerge.js';
 import { box } from './Box-css.js';
 import { extractBoxProps } from './extractBoxProps.js';
 
+const Slot = createSlot("@optiaxiom/react/Box");
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-Dk_HPFzo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-BOZzSJCT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1yzuent']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1mqeehb']});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-UyybgV83.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-CrnYrajV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'ihb95q']});
+var link = recipeRuntime({base:[{fontSize:'md',overflow:'hidden',rounded:'md'},'zl0xt9']});
 
 export { link };

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbLink.js

@@ -2,10 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Link } from '../link/Link.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import { link } from './BreadcrumbLink-css.js';
 
 const BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Link, { ...link({}, className), ref, ...props });
+  return /* @__PURE__ */ jsx(Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsx(Link, { ...link({}, className), ref, ...props }) });
 });
 BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
 

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbPage.js

@@ -1,13 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { Text } from '../text/Text.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 
 const BreadcrumbPage = forwardRef(
   ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsx("span", { ref, ...props }) });
+    return /* @__PURE__ */ jsx(Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        "aria-current": "page",
+        asChild: true,
+        color: "fg.default",
+        fontSize: "md",
+        truncate: true,
+        children: /* @__PURE__ */ jsx("span", { ref, ...props })
+      }
+    ) });
   }
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";

package/dist/esm/packages/react/src/button/Button.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef, useEffect } from 'react';
 import { Icon } from '../icon/Icon.js';
 import '../utils/conditions.js';
@@ -13,6 +13,7 @@ import { ButtonLabel } from './ButtonLabel.js';
 import { ButtonLoadable } from './ButtonLoadable.js';
 import { ButtonRoot } from './ButtonRoot.js';
 
+const Slot = createSlot("@optiaxiom/react/Button");
 const Button = forwardRef(
   ({
     addonAfter,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1epwpkn'});
+var buttonGroup = recipeRuntime({base:'oeconp'});
 
 export { buttonGroup };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DOeVqQUF.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BTH4I9NZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CDi0jeiu.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-CysVj99D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1k1ls0q']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1vdpvh2']});
 
 export { loadable };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DOeVqQUF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CDi0jeiu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1y05g67',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_12q8z6u'],variants:{intent:{danger:'_1gbq27h',neutral:'_179aewr',primary:'b0dmmd'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'_13ftavh',true:{}},variant:{outline:'_1l86vvk',strong:'mw94hu',subtle:'_41hxbx'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'hnjqkg',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1o2mp32',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_83qfzy',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_1dnm7z8']});
+var buttonBase = recipeRuntime({base:['_1ywwdbx',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'ts6ai6'],variants:{intent:{danger:'ixm75b',neutral:'_1bucar7',primary:'_1awajhc'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:'k6hez8',true:{}},variant:{outline:'mtlo09',strong:'y41mm2',subtle:'_47jcqa'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_19dwtin',variants:{size:'sm',square:false}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'nubpkl',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'fzetoy',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'mlluz8']});
 
 export { buttonBase, spinner };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
@@ -12,6 +12,7 @@ import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
 import { buttonBase, spinner } from './ButtonRoot-css.js';
 
+const Slot = createSlot("@optiaxiom/react/ButtonRoot");
 const appearances = {
   danger: { intent: "danger", variant: "strong" },
   "danger-outline": { intent: "danger", variant: "outline" },

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

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+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, useEffect } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
 import { DayPicker } from 'react-day-picker';
 import { Clock } from '../clock/Clock.js';
+import { toInstant } from '../date-input/utils.js';
 import { Flex } from '../flex/Flex.js';
 import { useEffectEvent } from '../hooks/useEffectEvent.js';
 import '../field/FieldContext.js';
@@ -12,7 +13,6 @@ import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { Separator } from '../separator/Separator.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
-import '@radix-ui/react-slot';
 import '../utils/isHoverSupported.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainTime } from '../utils/toPlainTime.js';
@@ -33,7 +33,6 @@ import { toTimeZoneName } from './toTimeZoneName.js';
 const components = {
   Chevron: CalendarChevron,
   Day: CalendarDay,
-  DayButton: CalendarDayButton,
   MonthCaption: CalendarMonthCaption,
   MonthGrid: CalendarMonthGrid,
   Months: CalendarMonths,
@@ -46,7 +45,7 @@ const components = {
 };
 const Calendar = forwardRef(
   ({
-    defaultValue,
+    defaultValue = null,
     holiday,
     max,
     min,
@@ -61,6 +60,7 @@ const Calendar = forwardRef(
     ...props
   }, outerRef) => {
     const [value, setValue] = useControllableState({
+      caller: "@optiaxiom/react/Calendar",
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp
@@ -72,6 +72,36 @@ const Calendar = forwardRef(
     });
     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);
+              setTo(props2.day.date);
+            },
+            onPointerLeave: (event) => {
+              onPointerLeave?.(event);
+              setTo(void 0);
+            },
+            ...props2
+          }
+        );
+      },
+      []
+    );
     const onHeightChangeStable = useEffectEvent(onHeightChange ?? (() => {
     }));
     useEffect(() => {
@@ -96,28 +126,68 @@ const Calendar = forwardRef(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
+          mode === "single" ? /* @__PURE__ */ jsx(
             DayPicker,
             {
               autoFocus: true,
-              components,
-              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : value,
+              components: {
+                ...components,
+                DayButton: DayButtonMemo
+              },
+              defaultMonth: value instanceof Date ? value : void 0,
               disabled: [
                 ...min ? [{ before: min }] : [],
                 ...max ? [{ after: max }] : []
               ],
-              fixedWeeks: mode === "range",
-              mode,
+              mode: "single",
               modifiers: { holiday, weekend },
-              numberOfMonths: mode === "range" ? numberOfMonths : 1,
               onSelect: (value2) => {
                 setValue(
-                  value2 instanceof Date ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2
+                  value2 ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2 ?? null
                 );
               },
               required: true,
-              selected: value,
-              showOutsideDays: mode === "range",
+              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 },
+              numberOfMonths,
+              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);
+                } else {
+                  setFrom(void 0);
+                  setValue(
+                    to && to < from ? {
+                      from: to,
+                      to: toInstant(toPlainDate(from) + "T23:59:59.999")
+                    } : {
+                      from,
+                      to: to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0
+                    }
+                  );
+                }
+              },
+              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
             }
           ),

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DTJ-qgEE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-CloEEnqj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'d3bv4l'],variants:{appearance:{'default':'hucvx5',holiday:[{color:'fg.error'},'_658db3'],range_middle:'_6vwj0z',selected:[{color:'fg.white'},'_10x7emu'],weekend:[{color:'fg.tertiary'},'_1l74jx9']},range:{end:['_1e6tfds'],middle:['zqzute'],start:['nq2gnn']}}});
-var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'gqs6rg']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'r3rikg'],variants:{appearance:{'default':'zc2y9h',holiday:[{color:'fg.error'},'_1ezz8ma'],range_middle:'_1ceblxj',selected:[{color:'fg.white'},'_1hfxpw4'],weekend:[{color:'fg.tertiary'},'pb4j9a']},range:{end:['kltvxn'],middle:['nhjqo9'],start:['_1bxe8qi']}}});
+var today = recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1gz1uxc']});
 
 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-CKOpez_X.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-7CBP-dxX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-D9HKgHqG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'e7co3i']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'m15xq0']});
 
 export { months };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-B_yyKqbi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/calendar/CalendarNav.css.ts.vanilla-BH_CEHvg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'t13yoa']});
+var nav = recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'bk8xwq']});
 
 export { nav };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-C2LWvVnD.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-Bz4ucIQV.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-CFMBvGPI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-C1SX3EWC.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-B-UzZVPR.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-undxWMUN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['ym82cp',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1swxt0d']});
+var card = recipeRuntime({base:['_1nry745',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_19zrum1']});
 
 export { card };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
-import './../../../../assets/src/card/CardOverflow.css.ts.vanilla-BxEr3QwY.css';
-import './../../../../assets/src/card/CardAction.css.ts.vanilla-BwYecK1h.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css';
+import './../../../../assets/src/card/CardOverflow.css.ts.vanilla-CfaszGo6.css';
+import './../../../../assets/src/card/CardAction.css.ts.vanilla-DT_sWq0i.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var action = recipeRuntime({base:['_19s5u3s']});
+var action = recipeRuntime({base:['_112gkvg']});
 
 export { action };

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

@@ -2,7 +2,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
@@ -10,6 +9,7 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { CheckboxControl } from '../checkbox/CheckboxControl.js';
 import { CheckboxRoot } from '../checkbox/CheckboxRoot.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useCardContext } from './CardContext.js';
 
 const CardCheckbox = forwardRef(
@@ -17,6 +17,7 @@ const CardCheckbox = forwardRef(
     const labelPrefixId = useId();
     const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
     const [checked, setChecked] = useControllableState({
+      caller: "@optiaxiom/react/CardCheckbox",
       defaultProp: props.defaultChecked,
       prop: props.checked
     });