@optiaxiom/react 0.1.0-next.16 → 0.1.0-next.18

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

@@ -1,8 +1,7 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/styles/theme.css.ts.vanilla-BZP-0Wgr.css';
-import './../../assets/src/tabs-list/TabsList.css.ts.vanilla-D_56Zx3U.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/tabs-list/TabsList.css.ts.vanilla-C2E7_0fo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'_3rtz62'],variants:{appearance:{primary:'_1qne7sz',secondary:'_1oyl845'}}});
+var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'sejdkk'],variants:{appearance:{primary:'_130vq2',secondary:'_1qsbae'}}});
 
 export { list };

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

@@ -1,9 +1,8 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/styles/theme.css.ts.vanilla-BZP-0Wgr.css';
-import './../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-C745JKgD.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-BNJjgHvC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{flexDirection:'row',gap:'xs',py:'6',rounded:'sm'},'_77yixx']});
-var trigger = recipeRuntime({base:['wq0n6q',{fontSize:'md',fontWeight:'500',py:'4'},'_3520ui']});
+var content = recipeRuntime({base:[{flexDirection:'row',gap:'xs',py:'6',rounded:'sm'},'_92ns7y']});
+var trigger = recipeRuntime({base:['_1hctdf1',{fontSize:'md',fontWeight:'500',py:'4'},'_1m7qu28']});
 
 export { content, trigger };

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

@@ -11,30 +11,30 @@ import { trigger, content } from './TabsTrigger-css.js';
 
 const TabsTrigger = forwardRef(
   ({
+    addonAfter,
+    addonBefore,
     children,
-    endDecorator,
     icon,
     iconPosition = "start",
-    startDecorator,
     ...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: [
-      icon && iconPosition === "start" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "20", children: icon }) : startDecorator,
+      icon && iconPosition === "start" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "20", children: icon }) : addonBefore,
       children,
-      icon && iconPosition === "end" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "20", children: icon }) : endDecorator
+      icon && iconPosition === "end" ? /* @__PURE__ */ jsx(Box, { asChild: true, h: "auto", w: "20", children: icon }) : addonAfter
     ] }) }) }) : /* @__PURE__ */ jsx(
       Button,
       {
+        addonAfter,
+        addonBefore,
         appearance: "secondary",
         asChild: true,
-        endDecorator,
         icon,
         iconPosition,
         justifyContent: "start",
         ref,
-        startDecorator,
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, ...restProps, children })
       }

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

@@ -1,7 +1,7 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/text/Text.css.ts.vanilla-DkbtFw2B.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/text/Text.css.ts.vanilla-BvzD3lMf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var text = recipeRuntime((function(){var x={base:{fontSize:'md'},variants:{lineClamp:{'1':[{overflow:'hidden'},'_1h8h7ge','_122npx4','_1nwhe8z'],'2':[undefined,'_1h8h7ge','_122npx4','_1q9gsag'],'3':[undefined,'_1h8h7ge','_122npx4','r1g42k'],'4':[undefined,'_1h8h7ge','_122npx4','pjze29']},truncate:{true:[undefined,'_1h8h7ge',{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'},'_2k902v','fs1ra0','_15fz8s4'],'2':[undefined,'_2k902v','fs1ra0','_1g1yhd1'],'3':[undefined,'_2k902v','fs1ra0','_12lqg46'],'4':[undefined,'_2k902v','fs1ra0','_1f6dd4u']},truncate:{true:[undefined,'_2k902v',{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/src/textarea/Textarea-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/textarea/Textarea.css.ts.vanilla-DXsdo6Ye.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/textarea/Textarea.css.ts.vanilla-8uk_9UJz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var textarea = recipeRuntime({base:'j7wfve'});
-var wrapper = recipeRuntime({base:{flexDirection:'column',overflow:'auto'},variants:{resize:{auto:{},none:{},vertical:'_660m67'}}});
+var textarea = recipeRuntime({base:'k7kddu'});
+var wrapper = recipeRuntime({base:{flexDirection:'column',overflow:'auto'},variants:{resize:{auto:{},none:{},vertical:'dedq5m'}}});
 
 export { textarea, wrapper };

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

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { theme, tokens, tokensDark } from '@optiaxiom/globals';
+
+function ThemeProvider({
+  children,
+  selector = ":root"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        ${selector} {
+          ${assignInlineVars(theme, tokens)}
+        }
+      ` }),
+    /* @__PURE__ */ jsx("style", { children: `
+        ${selector === ":host" ? ":host-context(:root.dark)" : `${selector}.dark`} {
+          ${assignInlineVars(theme, tokensDark)}
+        }
+      ` }),
+    children
+  ] });
+}
+ThemeProvider.displayName = "@optiaxiom/react/ThemeProvider";
+
+export { ThemeProvider };

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

@@ -1,10 +1,9 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/styles/theme.css.ts.vanilla-BZP-0Wgr.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-BLTqnucc.css';
-import './../../assets/src/toast/Toast.css.ts.vanilla-DjI03j7j.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-U5IpQ-47.css';
+import './../../assets/src/toast/Toast.css.ts.vanilla-Cmr5JjvD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',h:'16',mt:'4',w:'auto'},'_1tb5y5c']});
-var root = recipeRuntime({base:[{alignItems:'center',bg:'bg.neutral.inverse',color:'fg.default.inverse',display:'flex',gap:'xs',maxW:'full',p:'sm',pl:'md',rounded:'md',shadow:'md',w:['full','max']},'a75ro9'],variants:{colorScheme:{danger:'_1hqinb3',neutral:'q0xahx',success:'hc1s9h',warning:'_1dl43rh'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',h:'16',mt:'4',w:'auto'},'_1x8zseh']});
+var root = recipeRuntime({base:[{alignItems:'center',bg:'bg.neutral.inverse',color:'fg.default.inverse',display:'flex',gap:'xs',maxW:'full',p:'sm',pl:'md',rounded:'md',shadow:'md',w:['full','max']},'_1q44ii7'],variants:{colorScheme:{danger:'_13vpvt9',neutral:'_18hgy3',success:'n5neun',warning:'_1gljik1'}}});
 
 export { icon, root };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-BLTqnucc.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-U5IpQ-47.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'w24i4p'],variants:{position:{bottom:'_1l0ta2c','bottom-left':'fdjkoh','bottom-right':'poyk2k',top:'_1ojojfy','top-left':'_1xin7d9','top-right':'_17pse49'}}});
+var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'o28xfh'],variants:{position:{bottom:'u63pkf','bottom-left':'_6qayyw','bottom-right':'_6kjd6y',top:'_1jfr3yt','top-left':'_1vhk460','top-right':'_1oxw9qa'}}});
 
 export { viewport };

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

@@ -2,7 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Portal } from '@radix-ui/react-portal';
 import * as RadixToast from '@radix-ui/react-toast';
-import { forwardRef, useSyncExternalStore, useRef, cloneElement } from 'react';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { Flex } from '../flex/Flex.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';

package/dist/src/tooltip/Tooltip.js

@@ -6,9 +6,8 @@ import { forwardRef, useRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import { theme } from '../styles/theme-css.js';
 import { Text } from '../text/Text.js';
+import { theme } from '@optiaxiom/globals';
 import { Transition } from '../transition/Transition.js';
 
 const Tooltip = forwardRef(

package/dist/src/transition/Transition-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/styles/layers.css.ts.vanilla-DOtWUDXC.css';
-import './../../assets/src/transition/Transition.css.ts.vanilla-WsYYK30s.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-C0Uc6A8D.css';
+import './../../assets/src/transition/Transition.css.ts.vanilla-Cb0oRAnj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'d1fbqn',variants:{duration:{sm:'_1u1aihi',md:'_56kawa',lg:'gpnkqr'},type:{fade:'piszsr',pop:'ltu58r'}}});
+var transition = recipeRuntime({base:'_11dfixy',variants:{duration:{sm:'_60kedg',md:'_5u7akf',lg:'r7bjw1'},type:{fade:'i4spkz',pop:'twzn4y'}}});
 var transitionDuration = {sm:150,md:250,lg:400};
 
 export { transition, transitionDuration };

package/dist/src/utils/conditions.js

@@ -1,4 +1,4 @@
-import { tokens } from '../tokens/index.js';
+import { tokens } from '@optiaxiom/globals';
 import { mapValues } from './mapValues.js';
 
 ({

package/dist/unstable.d.ts

@@ -1,4 +1,4 @@
-import { B as BoxProps, S as Sprinkles, L as Link, P as Popover, b as PopoverContent } from './PopoverContent-DHQm-nPQ.js';
+import { B as BoxProps, S as Sprinkles, L as Link, P as Popover, b as PopoverContent } from './PopoverContent-Cyo4iBvE.js';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -33,7 +33,7 @@ declare const BreadcrumbLink: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omi
     external?: boolean;
 } & {
     colorScheme?: "neutral" | "primary" | "secondary" | undefined;
-} & react.RefAttributes<HTMLAnchorElement>, "ref">, "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className"> & Omit<{
+} & react.RefAttributes<HTMLAnchorElement>, "ref">, "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, never> & react.RefAttributes<HTMLAnchorElement>>;
@@ -98,31 +98,31 @@ declare const ComboboxMultiTrigger: react.ForwardRefExoticComponent<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "solid" | "subtle" | undefined;
-}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "appearance" | "endDecorator" | "icon" | "iconPosition" | "loading" | "startDecorator"> & Omit<{
+}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "addonAfter" | "addonBefore" | "appearance" | "icon" | "iconPosition" | "loading"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
@@ -131,18 +131,18 @@ declare const ComboboxMultiTrigger: react.ForwardRefExoticComponent<{
 }, "colorScheme" | "iconOnly" | "variant">, never> & {
     maxDisplayedItems?: number;
     title?: string;
-} & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className" | "disabled" | "appearance" | "endDecorator" | "icon" | "iconPosition" | "loading" | "startDecorator"> & Omit<{
+} & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className" | "disabled" | "addonAfter" | "addonBefore" | "appearance" | "icon" | "iconPosition" | "loading"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
@@ -154,31 +154,31 @@ declare const ComboboxSingleTrigger: react.ForwardRefExoticComponent<Omit<Omit<O
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "solid" | "subtle" | undefined;
-}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "appearance" | "endDecorator" | "icon" | "iconPosition" | "loading" | "startDecorator"> & Omit<{
+}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "addonAfter" | "addonBefore" | "appearance" | "icon" | "iconPosition" | "loading"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
@@ -187,18 +187,18 @@ declare const ComboboxSingleTrigger: react.ForwardRefExoticComponent<Omit<Omit<O
 }, "colorScheme" | "iconOnly" | "variant">, never> & {
     maxDisplayedItems?: number;
     title?: string;
-} & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className" | "disabled" | "appearance" | "endDecorator" | "icon" | "iconPosition" | "loading" | "startDecorator"> & Omit<{
+} & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className" | "disabled" | "addonAfter" | "addonBefore" | "appearance" | "icon" | "iconPosition" | "loading"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
@@ -210,31 +210,31 @@ declare const ComboboxTrigger: react.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "solid" | "subtle" | undefined;
-}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "appearance" | "endDecorator" | "icon" | "iconPosition" | "loading" | "startDecorator"> & Omit<{
+}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "children" | "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "title" | "asChild" | "className" | "disabled" | "addonAfter" | "addonBefore" | "appearance" | "icon" | "iconPosition" | "loading"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
@@ -308,7 +308,7 @@ declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Omit<Pick<
 }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-} & react.RefAttributes<HTMLInputElement>, "ref">, "size" | "color" | "asChild" | "className"> & Omit<{
+} & react.RefAttributes<HTMLInputElement>, "ref">, "color" | "size" | "asChild" | "className"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, never> & react.RefAttributes<HTMLInputElement>>;
@@ -371,9 +371,9 @@ declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<Omit<
     asChild?: boolean;
     className?: string;
 } & Sprinkles, never> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     description?: react.ReactNode;
-    endDecorator?: react.ReactNode;
-    startDecorator?: react.ReactNode;
 } & {
     colorScheme?: "neutral" | "danger" | undefined;
 }, never> & react.RefAttributes<HTMLDivElement>>;
@@ -382,20 +382,20 @@ declare const Pill: react.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<react.De
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & Omit<{
+    addonAfter?: react.ReactNode;
+    addonBefore?: react.ReactNode;
     appearance?: "default" | "primary" | "secondary" | "inverse" | "danger" | "danger-outline";
     children?: react.ReactNode;
     disabled?: boolean;
-    endDecorator?: react.ReactNode;
     icon?: react.ReactNode;
     iconPosition?: "end" | "start";
     loading?: boolean;
-    startDecorator?: react.ReactNode;
 } & Omit<{
     colorScheme?: "neutral" | "primary" | "danger" | undefined;
     iconOnly?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "solid" | "subtle" | undefined;
-}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref">, "fontFamily" | "fontSize" | "size" | "borderColor" | "color" | "animation" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className"> & Omit<{
+}, "colorScheme" | "iconOnly" | "variant">, never> & react.RefAttributes<HTMLButtonElement>, "ref">, "borderColor" | "color" | "fontFamily" | "animation" | "fontSize" | "size" | "cursor" | "empty" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "overflow" | "rounded" | "shadow" | "tracking" | "z" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "h" | "leading" | "m" | "maxH" | "maxW" | "mb" | "ml" | "mr" | "mt" | "mx" | "my" | "p" | "pb" | "pl" | "pr" | "pt" | "px" | "py" | "w" | "asChild" | "className"> & Omit<{
     asChild?: boolean;
     className?: string;
 } & Sprinkles, "size"> & {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@optiaxiom/react",
+  "homepage": "https://github.com/optimizely-axiom/optiaxiom/tree/master/packages/react#readme",
   "repository": {
     "directory": "packages/react",
     "type": "git",
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0-next.16",
+  "version": "0.1.0-next.18",
   "files": [
     "dist/**",
     "LICENSE"
@@ -27,7 +28,6 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@fontsource-variable/fira-code": "^5.0.20",
     "@mantine/hooks": "^7.12.2",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
@@ -58,16 +58,18 @@
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@reach/auto-id": "^0.18.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "inter-ui": "^4.0.2",
     "react-textarea-autosize": "^8.5.3",
-    "@optiaxiom/globals": "^0.2.0-next.0"
+    "use-sync-external-store": "^1.2.2",
+    "@optiaxiom/globals": "^0.2.0-next.2"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",
     "@types/node": "^20.16.5",
+    "@types/use-sync-external-store": "^0.0.6",
     "@vanilla-extract/css": "^1.15.5",
     "@optiaxiom/shared": "^0.0.0"
   },
@@ -77,7 +79,7 @@
   },
   "scripts": {
     "build": "rm -rf dist && NODE_ENV=production rollup -c",
-    "dev": "rm -rf dist && rollup -cw",
+    "dev": "rm -rf dist && wait-on ../../packages/globals/dist/index.d.ts && rollup -cw",
     "lint": "oas-lint",
     "test": "vitest"
   }