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

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-CSJt9B6W.css';
+import './../../assets/src/tabs-trigger/TabsTrigger.css.ts.vanilla-D30O8tC9.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'},'_19x95ec']});
+var trigger = recipeRuntime({base:['_4sgicb',{fontSize:'md',fontWeight:'500',py:'4'},'x96gdv']});
 
 export { content, trigger };

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

@@ -11,32 +11,32 @@ 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 })
+        children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { ...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-CSJt9B6W.css';
+import './../../assets/src/text/Text.css.ts.vanilla-BKtRaBxq.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'},'kdvj9x','_69ym6u','_1fvsg5a'],'2':[undefined,'kdvj9x','_69ym6u','pwy7uh'],'3':[undefined,'kdvj9x','_69ym6u','_1xmhs7h'],'4':[undefined,'kdvj9x','_69ym6u','yh90g4']},truncate:{true:[undefined,'kdvj9x',{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.js

@@ -1,31 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-import { Box } from '../box/Box.js';
 import { InputBase } from '../input-base/InputBase.js';
-import { wrapper, textarea } from './Textarea-css.js';
+import { TextareaAutosize } from '../textarea-autosize/TextareaAutosize.js';
 
 const Textarea = forwardRef(
-  ({ asChild, children, className, resize = "none", ...props }, ref) => {
-    const CompAuto = asChild ? Slot : TextareaAutosize;
-    const CompManual = asChild ? Slot : "textarea";
-    return /* @__PURE__ */ jsx(
-      InputBase,
-      {
-        size: "lg",
-        ...wrapper({ resize }, className),
-        ...props,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea(), children: resize === "auto" ? /* @__PURE__ */ jsx(
-          CompAuto,
-          {
-            minRows: "minRows" in props ? props.minRows : 3,
-            ref,
-            children
-          }
-        ) : /* @__PURE__ */ jsx(CompManual, { ref, rows: "rows" in props ? props.rows : 3, children }) })
-      }
-    );
+  ({ asChild, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : TextareaAutosize;
+    return /* @__PURE__ */ jsx(InputBase, { flexDirection: "column", size: "lg", ...props, children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) });
   }
 );
 Textarea.displayName = "@optiaxiom/react/Textarea";

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CSJt9B6W.css';
+import './../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-Vi7oxkCe.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var shadow = recipeRuntime({base:['b85i0t','b8mqo8']});
+var textarea = recipeRuntime({base:['b85i0t','_12ymtv']});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['pe4k67','_1elteaj'],'2':['pe4k67','_1ms345d'],'3':['pe4k67','ma7lqc'],'4':['pe4k67','_1gtd6ga'],'5':['pe4k67','_81gv93']},resize:{auto:{},none:{},vertical:'_13u2b2c'}}});
+
+export { shadow, textarea, wrapper };

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useState } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+import { wrapper, textarea, shadow } from './TextareaAutosize-css.js';
+
+const TextareaAutosize = forwardRef(
+  ({
+    asChild,
+    children,
+    className,
+    maxRows,
+    onChange,
+    resize = "none",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "textarea";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const [value, setValue] = useState(
+      props.value === void 0 ? props.defaultValue : props.value
+    );
+    return /* @__PURE__ */ jsxs(Box, { ...wrapper({ maxRows, resize }), children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(
+        Comp,
+        {
+          onChange: (event) => {
+            setValue(event.target.value);
+            onChange?.(event);
+          },
+          ref,
+          ...restProps,
+          children
+        }
+      ) }),
+      resize === "auto" && /* @__PURE__ */ jsx(Box, { ...shadow({}, className), ...sprinkleProps, children: (value ?? "") + " " })
+    ] });
+  }
+);
+TextareaAutosize.displayName = "@optiaxiom/react/TextareaAutosize";
+
+export { TextareaAutosize };

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-CSJt9B6W.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CRrCOnmY.css';
+import './../../assets/src/toast/Toast.css.ts.vanilla-CcGpHMYT.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'},'_1maqiyr']});
+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']},'_4vhf8n'],variants:{colorScheme:{danger:'_1dzujph',neutral:'_1ljwyw2',success:'z76k0z',warning:'_6w489f'}}});
 
 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-CSJt9B6W.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-CRrCOnmY.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'},'_1e805pz'],variants:{position:{bottom:'_1cvo2n9','bottom-left':'_523f56','bottom-right':'_1h5l8ki',top:'x5dwdz','top-left':'_1t3d0fy','top-right':'x807pw'}}});
 
 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-CSJt9B6W.css';
+import './../../assets/src/transition/Transition.css.ts.vanilla-CwC4wqUb.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:'_1pod0az',variants:{duration:{sm:'np3ek5',md:'_1p3id0p',lg:'d8erjf'},type:{fade:'sy1d7w',pop:'_1wenxzj'}}});
 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.19",
   "files": [
     "dist/**",
     "LICENSE"
@@ -61,12 +62,13 @@
     "@vanilla-extract/sprinkles": "^1.6.3",
     "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"
   },