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

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-MxzOgYAm.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'},'_1i2gg7f']});
-var trigger = recipeRuntime({base:['x3krz3',{fontSize:'md',fontWeight:'500',py:'4'},'ze5jph']});
+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/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/text/Text.css.ts.vanilla-DQhdIgmY.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'},'_7uqxyf','_1cc3845','vb85kb'],'2':[undefined,'_7uqxyf','_1cc3845','_1r4bcj6'],'3':[undefined,'_7uqxyf','_1cc3845','_1oqccr9'],'4':[undefined,'_7uqxyf','_1cc3845','t6tk9v']},truncate:{true:[undefined,'_7uqxyf',{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/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/textarea/Textarea.css.ts.vanilla-BldcNjGl.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:'_14tvwwe'});
-var wrapper = recipeRuntime({base:{flexDirection:'column',overflow:'auto'},variants:{resize:{auto:{},none:{},vertical:'_18cyn2g'}}});
+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

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { theme } from '../theme/theme-css.js';
-import { tokens, tokensDark } from '../tokens/index.js';
+import { theme, tokens, tokensDark } from '@optiaxiom/globals';
 
 function ThemeProvider({
   children,

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-WsywbHOO.css';
-import './../../assets/src/toast/Toast.css.ts.vanilla-s1odg-lj.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'},'_1mwaah2']});
-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']},'_6zniuy'],variants:{colorScheme:{danger:'_15e91g4',neutral:'_7ym6zd',success:'fuc6wg',warning:'g8vnet'}}});
+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/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-WsywbHOO.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'},'_11do5jl'],variants:{position:{bottom:'tcr2n','bottom-left':'m7n9nq','bottom-right':'_1g8j9eg',top:'_16ohtwn','top-left':'tt70ea','top-right':'_19eo3wu'}}});
+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

@@ -7,7 +7,7 @@ import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
 import { Text } from '../text/Text.js';
-import { theme } from '../theme/theme-css.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/layers/layers.css.ts.vanilla-B7ZZTGQb.css';
-import './../../assets/src/transition/Transition.css.ts.vanilla-COAIGiKV.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:'_1d1lgtw',variants:{duration:{sm:'_1yu3oeo',md:'_1o8wpvd',lg:'k00riz'},type:{fade:'_1x1qayn',pop:'_1gxkyfo'}}});
+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-CUYQy-H8.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.17",
+  "version": "0.1.0-next.18",
   "files": [
     "dist/**",
     "LICENSE"
@@ -62,11 +63,13 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "react-textarea-autosize": "^8.5.3",
-    "@optiaxiom/globals": "^0.2.0-next.1"
+    "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"
   },