@optiaxiom/react 0.8.2 → 0.10.0

package/dist/packages/react/src/table-header-cell/TableHeaderCell.js

@@ -2,6 +2,8 @@
 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 { cell, content } from './TableHeaderCell-css.js';
 
 const TableHeaderCell = forwardRef(({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsx(Box, { asChild: true, ...cell({}, className), ...props, children: /* @__PURE__ */ jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsx(Box, { ...content(), children }) }) }));

package/dist/packages/react/src/table-row/TableRow-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BP46h_xl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DXrWEyC2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var row = recipeRuntime({base:['m8pkss',{w:'full'},'gaduzy']});
+var row = recipeRuntime({base:['_1s44ilu',{transition:'colors',w:'full'},'ibylnc']});
 
 export { row };

package/dist/packages/react/src/table-row/TableRow.js

@@ -2,6 +2,8 @@
 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 { row } from './TableRow-css.js';
 
 const TableRow = forwardRef(

package/dist/packages/react/src/tabs/Tabs-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-eF05kHdN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-CpAfI52r.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var tabs = recipeRuntime({base:[{display:'flex'},'xacxc4']});
+var tabs = recipeRuntime({base:[{display:'flex'},'vd5d9n']});
 
 export { tabs };

package/dist/packages/react/src/tabs/Tabs.js

@@ -3,16 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { TabsContextProvider } from '../tabs-context/TabsContext.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { tabs } from './Tabs-css.js';
 
 const Tabs = forwardRef(
-  ({ appearance = "primary", children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...tabs(), ...sprinkleProps, children: /* @__PURE__ */ jsx(RadixTabs.Root, { ref, ...restProps, children: /* @__PURE__ */ jsx(TabsContextProvider, { appearance, children }) }) });
+  ({ children, className, ...props }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...tabs({}, className), ...boxProps, children: /* @__PURE__ */ jsx(RadixTabs.Root, { ref, ...restProps, children }) });
   }
 );
 Tabs.displayName = "@optiaxiom/react/Tabs";

package/dist/packages/react/src/tabs-content/TabsContent.js

@@ -3,14 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const TabsContent = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, flex: "1", ref, ...sprinkleProps, children: /* @__PURE__ */ jsx(RadixTabs.TabsContent, { ...restProps, children }) });
+  ({ children, value, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, flex: "1", ref, ...props, children: /* @__PURE__ */ jsx(RadixTabs.TabsContent, { value, children }) });
   }
 );
 TabsContent.displayName = "@optiaxiom/react/TabsContent";

package/dist/packages/react/src/tabs-list/TabsList-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/tabs-list/TabsList.css.ts.vanilla-DMC52kVj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/tabs-list/TabsList.css.ts.vanilla-Dp3XesSH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'_1a0qdqr'],variants:{appearance:{primary:'_1ju40w7',secondary:'_1kntdje'}}});
+var list = recipeRuntime({base:[{borderColor:'border.default',display:'flex'},'_1hoaefj']});
 
 export { list };

package/dist/packages/react/src/tabs-list/TabsList.js

@@ -3,13 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useTabsContext } from '../tabs-context/TabsContext.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { list } from './TabsList-css.js';
 
 const TabsList = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { appearance } = useTabsContext("TabsList");
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...list({ appearance }), children: /* @__PURE__ */ jsx(RadixTabs.List, { ref, ...props, children }) });
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...list({}, className), ...props, children: /* @__PURE__ */ jsx(RadixTabs.List, { ref, children }) });
   }
 );
 TabsList.displayName = "@optiaxiom/react/TabsList";

package/dist/packages/react/src/tabs-trigger/TabsTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-BGFNzd6p.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-C3tLDNmJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{flexDirection:'row',gap:'8',justifyContent:['center','start'],py:'6',rounded:'sm'},'_1j7ifz8']});
-var trigger = recipeRuntime({base:['_19avwc4',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4'},'_1yc770x']});
+var content = recipeRuntime({base:[{flexDirection:'row',gap:'8',justifyContent:['center','start'],py:'6',rounded:'sm',transition:'colors'},'y93omt']});
+var trigger = recipeRuntime({base:['_1kiw8tr',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'lag2rg']});
 
 export { content, trigger };

package/dist/packages/react/src/tabs-trigger/TabsTrigger.js

@@ -3,12 +3,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { Button } from '../button/Button.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useTabsContext } from '../tabs-context/TabsContext.js';
 import { trigger, content } from './TabsTrigger-css.js';
 
 const TabsTrigger = forwardRef(
@@ -16,31 +12,18 @@ const TabsTrigger = forwardRef(
     addonAfter,
     addonBefore,
     children,
+    className,
     icon,
     iconPosition = "start",
+    value,
     ...props
   }, ref) => {
-    const { appearance } = useTabsContext("TabsTrigger");
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return appearance === "primary" ? /* @__PURE__ */ jsx(Box, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, ...restProps, children: /* @__PURE__ */ jsxs(Flex, { ...content(), children: [
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, value, ...restProps, children: /* @__PURE__ */ jsxs(Flex, { ...content(), children: [
       icon && iconPosition === "start" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "xs", children: icon }) : addonBefore,
       children,
       icon && iconPosition === "end" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "xs", children: icon }) : addonAfter
-    ] }) }) }) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        addonAfter,
-        addonBefore,
-        appearance: "subtle",
-        asChild: true,
-        icon,
-        iconPosition,
-        justifyContent: "start",
-        ref,
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { ...restProps, children })
-      }
-    );
+    ] }) }) });
   }
 );
 TabsTrigger.displayName = "@optiaxiom/react/TabsTrigger";

package/dist/packages/react/src/text/Text-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/text/Text.css.ts.vanilla-C5IgOcZn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/text/Text.css.ts.vanilla-Ddgu8PPV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var text = recipeRuntime((function(){var x={base:{fontSize:'md'},variants:{lineClamp:{'1':[{overflow:'hidden'},'kqi2qg','_1y7klks','_2emf8s'],'2':[undefined,'kqi2qg','_1y7klks','_18gkkiu'],'3':[undefined,'kqi2qg','_1y7klks','xos6ay'],'4':[undefined,'kqi2qg','_1y7klks','y6qnfz']},truncate:{true:[undefined,'kqi2qg',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
+var text = recipeRuntime((function(){var x={base:{fontSize:'md'},variants:{lineClamp:{'1':[{overflow:'hidden'},'_17uq7ac','_1jjmdg7','ybk70p'],'2':[undefined,'_17uq7ac','_1jjmdg7','_1ul8psq'],'3':[undefined,'_17uq7ac','_1jjmdg7','x9nzgw'],'4':[undefined,'_17uq7ac','_1jjmdg7','_3l2a4j']},truncate:{true:[undefined,'_17uq7ac',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
 
 export { text };

package/dist/packages/react/src/text/Text.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { text } from './Text-css.js';
 
 const Text = forwardRef(

package/dist/packages/react/src/textarea/Textarea.js

@@ -2,12 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
+import '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { InputAddon } from '../input-addon/InputAddon.js';
 import { InputControl } from '../input-control/InputControl.js';
 import { InputRoot } from '../input-root/InputRoot.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { TextareaAutosize } from '../textarea-autosize/TextareaAutosize.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
@@ -24,7 +23,7 @@ const Textarea = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : TextareaAutosize;
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsxs(
       InputRoot,
       {
@@ -32,7 +31,7 @@ const Textarea = forwardRef(
         className,
         flexDirection: "column",
         style,
-        ...sprinkleProps,
+        ...boxProps,
         children: [
           addonBefore && /* @__PURE__ */ jsx(InputAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(InputControl, { asChild: true, p: "8", size: "lg", ...restProps, children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) }),

package/dist/packages/react/src/textarea-autosize/TextareaAutosize-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-Cud05mIM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-D4O8Rmfj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var shadow = recipeRuntime({base:['t61a3s','_1rwrjb0']});
-var textarea = recipeRuntime({base:['t61a3s','y8ijjc']});
-var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_1yvjyux','tsrzsk'],'2':['_1yvjyux','_12smxbv'],'3':['_1yvjyux','_1nt5vom'],'4':['_1yvjyux','_60a5r0'],'5':['_1yvjyux','_1de9pz']},resize:{auto:{},none:{},vertical:'_90kp93'}}});
+var shadow = recipeRuntime({base:['dm4hvg','_1sz4bgg']});
+var textarea = recipeRuntime({base:['dm4hvg','_1wiv13t']});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_1pk3ke8','uurw57'],'2':['_1pk3ke8','tvt9ya'],'3':['_1pk3ke8','_13ce3i5'],'4':['_1pk3ke8','h5jnd3'],'5':['_1pk3ke8','vozqly']},resize:{auto:{},none:{},vertical:'_4efneu'}}});
 
 export { shadow, textarea, wrapper };

package/dist/packages/react/src/textarea-autosize/TextareaAutosize.js

@@ -4,9 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { wrapper, textarea, shadow } from './TextareaAutosize-css.js';
 
 const TextareaAutosize = forwardRef(
@@ -20,13 +18,13 @@ const TextareaAutosize = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "textarea";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const [value, setValue] = useControllableState({
       defaultProp: props.defaultValue,
       prop: props.value
     });
     return /* @__PURE__ */ jsxs(Box, { ...wrapper({ maxRows, resize }), children: [
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea({}, className), ...boxProps, children: /* @__PURE__ */ jsx(
         Comp,
         {
           onChange: (event) => {
@@ -38,7 +36,7 @@ const TextareaAutosize = forwardRef(
           children
         }
       ) }),
-      resize === "auto" && /* @__PURE__ */ jsx(Box, { ...shadow({}, className), ...sprinkleProps, children: (value ?? "") + " " })
+      resize === "auto" && /* @__PURE__ */ jsx(Box, { ...shadow({}, className), ...boxProps, children: (value ?? "") + " " })
     ] });
   }
 );

package/dist/packages/react/src/theme-provider/ThemeProvider.js

@@ -1,8 +1,14 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { theme, tokens, tokensDark } from '@optiaxiom/globals';
+import { tokens, theme } from '@optiaxiom/globals';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
+const lightColors = Object.fromEntries(
+  Object.entries(tokens.colors).map(([k, v]) => [
+    k,
+    v.slice(v.indexOf("(") + 1, v.indexOf(","))
+  ])
+);
 function ThemeProvider({
   children,
   selector = ":root"
@@ -11,14 +17,16 @@ function ThemeProvider({
     /* @__PURE__ */ jsx("style", { children: `
         @layer optiaxiom.theme {
           ${selector} {
-            ${assignInlineVars(theme, tokens)}
+            ${assignInlineVars(theme, {
+      ...tokens,
+      colors: lightColors
+    })}
           }
-        }
-      ` }),
-    /* @__PURE__ */ jsx("style", { children: `
-        @layer optiaxiom.theme {
-          ${selector === ":host" ? ":host-context(:root.dark)" : `${selector}.dark`} {
-            ${assignInlineVars(theme.colors, tokensDark.colors)}
+
+          @supports (color: light-dark(black, white)) {
+            ${selector} {
+              ${assignInlineVars(theme.colors, tokens.colors)}
+            }
           }
         }
       ` }),

package/dist/packages/react/src/toast/Toast-css.js

@@ -1,9 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CXtQhxtZ.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-nlZSggfY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-DzeJ30rC.css';
+import './../../../../assets/src/toast/Toast.css.ts.vanilla-lPQ-CdKX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1gqgyrt']});
-var root = recipeRuntime({base:['_1yl3iyf',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_109pobo'],variants:{intent:{danger:'_1ukmgub',information:'_1l2r5gy',neutral:'_1pwzs1l',success:'_1s8l1yg',warning:'_9eazys'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1h93ri1']});
+var offsetVar = 'var(--_170pdpw)';
+var root = recipeRuntime({base:['cprxuh',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_1ew48vh'],variants:{intent:{danger:'_1qe79b',information:'eg9dpm',neutral:'_1hn9q2i',success:'nwvn0u',warning:'_1xht8c7'}}});
 
-export { icon, root };
+export { icon, offsetVar, root };

package/dist/packages/react/src/toast/Toast.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useToastContext } from '@optiaxiom/globals';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixToast from '@radix-ui/react-toast';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef, createElement } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { IconCircleCheckSolid } from '../icons/IconCircleCheckSolid.js';
@@ -11,10 +14,7 @@ import { IconCircleExclamationSolid } from '../icons/IconCircleExclamationSolid.
 import { IconCircleInfoSolid } from '../icons/IconCircleInfoSolid.js';
 import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
 import { IconX } from '../icons/IconX.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { root, icon } from './Toast-css.js';
+import { offsetVar, root, icon } from './Toast-css.js';
 
 const mapIntentToIcon = {
   danger: IconCircleExclamationSolid,
@@ -24,35 +24,50 @@ const mapIntentToIcon = {
   warning: IconTriangleExclamationSolid
 };
 const Toast = forwardRef(
-  ({ children, intent = "neutral", onOpenChange, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, className, intent = "neutral", onOpenChange, style, ...props }, outerRef) => {
+    const { boxProps, restProps } = extractBoxProps(props);
     const context = useToastContext("Toast");
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...root({ intent }), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
-      RadixToast.Root,
+    const ref = useComposedRefs(outerRef, context.toastRef);
+    return /* @__PURE__ */ jsx(
+      Box,
       {
-        forceMount: !!context,
-        onOpenChange: (open) => {
-          onOpenChange?.(open);
-          context.onOpenChange(open);
+        asChild: true,
+        style: {
+          ...style,
+          ...assignInlineVars({
+            [offsetVar]: `${context.offset}px`
+          })
         },
-        open: context.open,
-        ref,
-        ...restProps,
-        children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon[intent]) }),
-          children,
-          /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "inverse",
-              "aria-label": "close",
-              icon: /* @__PURE__ */ jsx(IconX, {}),
-              size: "sm"
-            }
-          ) })
-        ]
+        ...root({ intent }, className),
+        ...boxProps,
+        children: /* @__PURE__ */ jsxs(
+          RadixToast.Root,
+          {
+            forceMount: !!context,
+            onOpenChange: (open) => {
+              onOpenChange?.(open);
+              context.onOpenChange(open);
+            },
+            open: context.open,
+            ref,
+            ...restProps,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon[intent]) }),
+              children,
+              /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "inverse",
+                  "aria-label": "close",
+                  icon: /* @__PURE__ */ jsx(IconX, {}),
+                  size: "sm"
+                }
+              ) })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 );
 Toast.displayName = "@optiaxiom/react/Toast";

package/dist/packages/react/src/toast-action/ToastAction.js

@@ -6,10 +6,10 @@ import { Button } from '../button/Button.js';
 import { Separator } from '../separator/Separator.js';
 
 const ToastAction = forwardRef(
-  ({ altText, children, ...props }, ref) => {
+  ({ altText, appearance = "inverse", children, size = "sm", ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, { alignSelf: "center", h: "sm", ml: "12", orientation: "vertical" }),
-      /* @__PURE__ */ jsx(Button, { appearance: "inverse", asChild: true, size: "sm", ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
+      /* @__PURE__ */ jsx(Button, { appearance, asChild: true, size, ...props, children: /* @__PURE__ */ jsx(RadixToast.Action, { altText, ref, children }) })
     ] });
   }
 );

package/dist/packages/react/src/toast-provider/ToastProvider-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CXtQhxtZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-DzeJ30rC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'qffizw'],variants:{position:{bottom:'_1035lys','bottom-left':'ti9dsq','bottom-right':'_6ufm2n',top:'_165e4z4','top-left':'_1ic7sf2','top-right':'_1od9q76'}}});
+var gap = '16';
+var viewport = recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'wd4xdm'],variants:{position:{bottom:'l6r43k','bottom-left':'cjfzlv','bottom-right':'_1kujjut',top:'_13lguqr','top-left':'_2myoro','top-right':'fbaz9o'}}});
 
-export { viewport };
+export { gap, viewport };

package/dist/packages/react/src/toast-provider/ToastProvider.js

@@ -6,14 +6,13 @@ import { Portal } from '@radix-ui/react-portal';
 import * as RadixToast from '@radix-ui/react-toast';
 import { forwardRef, useRef, isValidElement } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { ToastAction } from '../toast-action/ToastAction.js';
 import { ToastTitle } from '../toast-title/ToastTitle.js';
 import { Toast } from '../toast/Toast.js';
-import { viewport } from './ToastProvider-css.js';
+import { gap, viewport } from './ToastProvider-css.js';
 import { useOverflowAnchor } from './useOverflowAnchor.js';
 
 const mapPositionToSwipeDirection = {
@@ -26,6 +25,7 @@ const mapPositionToSwipeDirection = {
 };
 const ToastProvider = forwardRef(
   ({
+    className,
     container,
     duration,
     label,
@@ -35,7 +35,7 @@ const ToastProvider = forwardRef(
     toaster: toasterProp = toaster,
     ...props
   }, outerRef) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const toasts = useSyncExternalStore(...toasterProp.store);
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
@@ -46,6 +46,7 @@ const ToastProvider = forwardRef(
     if (!toasts.length) {
       return null;
     }
+    let exitingToastOffsets = 0;
     return /* @__PURE__ */ jsxs(
       RadixToast.ToastProvider,
       {
@@ -54,11 +55,13 @@ const ToastProvider = forwardRef(
         swipeDirection: swipeDirection ?? mapPositionToSwipeDirection[position],
         swipeThreshold,
         children: [
-          toasts.map(({ id, open, toast }) => /* @__PURE__ */ jsx(
+          toasts.map(({ id, open, ref: ref2, toast }) => /* @__PURE__ */ jsx(
             ToastContextProvider,
             {
+              offset: exitingToastOffsets += !open && ref2.current ? ref2.current.offsetHeight + parseInt(gap) : 0,
               onOpenChange: () => toasterProp.remove(id),
               open,
+              toastRef: ref2,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/microsoft/TypeScript/issues/53178
               children: isValidElement(toast) ? toast : /* @__PURE__ */ jsxs(Toast, { intent: toast.type, children: [
                 /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
@@ -81,8 +84,8 @@ const ToastProvider = forwardRef(
               asChild: true,
               "data-position": position,
               flexDirection: position.startsWith("bottom") ? "column-reverse" : "column",
-              ...viewport({ position }),
-              ...sprinkleProps,
+              ...viewport({ position }, className),
+              ...boxProps,
               children: /* @__PURE__ */ jsx(RadixToast.Viewport, { ref, ...restProps })
             }
           ) })

package/dist/packages/react/src/toggle-button/ToggleButton.js

@@ -6,7 +6,7 @@ import { Button } from '../button/Button.js';
 
 const ToggleButton = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Button, { appearance: "subtle", asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixToggle.Root, { ref, children }) });
+    return /* @__PURE__ */ jsx(Button, { asChild: true, ...props, children: /* @__PURE__ */ jsx(RadixToggle.Root, { ref, children }) });
   }
 );
 ToggleButton.displayName = "@optiaxiom/react/ToggleButton";

package/dist/packages/react/src/toggle-input/ToggleInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CKQ2Aadr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_1wqc2mu',{alignItems:'start',flexDirection:'row',gap:'8'},'_1eo60zd']});
+var toggleInput = recipeRuntime({base:['tstbnr',{alignItems:'start',display:'inline-flex',flexDirection:'row',gap:'8'},'_1nao6xd']});
 
 export { toggleInput };

package/dist/packages/react/src/toggle-input/ToggleInput.js

@@ -1,27 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { Slot } from '@radix-ui/react-slot';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { forwardRef } from 'react';
+import '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { ToggleInputContextProvider } from '../toggle-input-context/ToggleInputContext.js';
 import { toggleInput } from './ToggleInput-css.js';
 
 const ToggleInput = forwardRef(
-  ({ asChild, children, description, ...props }, ref) => {
+  ({ asChild, children, className, description, ...props }, ref) => {
     const Comp = asChild ? Slot : "label";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const descriptionId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsx(
       ToggleInputContextProvider,
       {
-        descriptionId: description ? descriptionId : void 0,
+        descriptionId: description ? descriptionId : undefined,
         labelId,
-        children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput(), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) })
+        children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput({}, className), ...boxProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) })
       }
     );
   }

package/dist/packages/react/src/toggle-input-content/ToggleInputContent.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const ToggleInputContent = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Box, { flex: "1", fontSize: "md", overflow: "hidden", ref, ...props, children });