@optiaxiom/react 0.4.2 → 0.5.1

package/dist/src/alert/Alert.js

@@ -12,7 +12,7 @@ import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationF
 import { IconX } from '../icons/IconX.js';
 import { alert, icon } from './Alert-css.js';
 
-const iconMap = {
+const mapIntentToIcon = {
   danger: IconCircleExclamationFilled,
   information: IconCircleInfoFilled,
   neutral: IconCircleInfoFilled,
@@ -20,7 +20,7 @@ const iconMap = {
   warning: IconTriangleExclamationFilled
 };
 const Alert = forwardRef(
-  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsx(AlertContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
@@ -30,10 +30,10 @@ const Alert = forwardRef(
         "aria-labelledby": labelId,
         ref,
         role: "alert",
-        ...alert({ colorScheme }, className),
+        ...alert({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,

package/dist/src/alert-dialog-action/AlertDialogAction.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const AlertDialogAction = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "danger", ...restProps, children }) });
+const AlertDialogAction = forwardRef(({ appearance = "danger", asChild, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
 });
 AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
 

package/dist/src/alert-dialog-cancel/AlertDialogCancel.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const AlertDialogCancel = forwardRef(({ asChild, children = "Cancel", ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "subtle", ...restProps, children }) });
+const AlertDialogCancel = forwardRef(({ appearance = "subtle", asChild, children = "Cancel", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
 });
 AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
 

package/dist/src/alert-dialog-content/AlertDialogContent-css.js

@@ -1,8 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-smGvjG2W.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-DfOEzQyP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'fifehl'],variants:{size:{sm:'ksfnn1',md:'_1w91h23',lg:'_10gbo9c'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'cjobui']});
+var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'p4uviy']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md'},'_187yqhm'],variants:{size:{sm:'_1tj3r7e',md:'uhxrej',lg:'z5pnj1'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1mvorsc']});
 
-export { content, overlay };
+export { container, content, overlay };

package/dist/src/alert-dialog-content/AlertDialogContent.js

@@ -4,14 +4,20 @@ import { forwardRef } from 'react';
 import { useAlertDialogContext, AlertDialogContextProvider } from '../alert-dialog-context/AlertDialogContext.js';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
 import { Transition } from '../transition/Transition.js';
-import { overlay, content } from './AlertDialogContent-css.js';
+import { overlay, container, content } from './AlertDialogContent-css.js';
 
 const AlertDialogContent = forwardRef(({ children, size = "sm", ...props }, ref) => {
   const { open } = useAlertDialogContext("AlertDialogContent");
   return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
     /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
-    /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) })
+    /* @__PURE__ */ jsxs(Flex, { ...container(), children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
+    ] })
   ] }) });
 });
 AlertDialogContent.displayName = "@optiaxiom/react/AlertDialogContent";

package/dist/src/alert-dialog-description/AlertDialogDescription-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});

package/dist/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-EDbgAUpH.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-DTviko8V.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_1o0ym6g']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_176n52g']});
 
 export { footer };

package/dist/src/alert-dialog-trigger/AlertDialogTrigger.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const AlertDialogTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
 });
 AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
 

package/dist/src/autocomplete-content/AutocompleteContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-BWEuLmul.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-yr5VObxv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'cr1msa']});
+var content = recipeRuntime({base:[{p:'4'},'_2jmttq']});
 
 export { content };

package/dist/src/autocomplete-empty/AutocompleteEmpty.js

@@ -2,12 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
   const { items } = useAutocompleteContext("AutocompleteEmpty");
   if (items.length > 0) {
     return null;
@@ -15,14 +11,15 @@ const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      asChild: true,
+      alignItems: "center",
       color: "fg.disabled",
       display: "flex",
+      flexDirection: "column",
       fontSize: "md",
-      justifyContent: "center",
       p: "md",
-      ...sprinkleProps,
-      children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children: children || "No options" })
+      ref,
+      ...props,
+      children: children || "No options"
     }
   );
 });

package/dist/src/autocomplete-trigger/AutocompleteTrigger.js

@@ -25,7 +25,6 @@ const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
           alignSelf: "stretch",
           flexDirection: "row",
           gap: "0",
-          mr: "0",
           children: [
             downshift.selectedItem && /* @__PURE__ */ jsx(Flex, { onClick: () => downshift.reset(), w: "32", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true, focusable: false }) }) }),
             /* @__PURE__ */ jsx(Separator, { my: "xs", orientation: "vertical" }),
@@ -33,6 +32,7 @@ const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
           ]
         }
       ),
+      pr: "0",
       ...sprinkleProps,
       ...downshift.getInputProps({
         ...restProps,

package/dist/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/avatar/Avatar.css.ts.vanilla-DFwfPXh5.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/avatar/Avatar.css.ts.vanilla-7Pz1ShaS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'q1w45z'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_27k7c8'],sm:[{fontSize:'xs',size:'sm'},'_1isa4dp'],md:[{fontSize:'md',size:'md'},'j6d4ph'],lg:[{fontSize:'lg',size:'lg'},'_1w8cto1'],xl:[{fontSize:'2xl',size:'xl'},'wq08aa'],'5xl':[{fontSize:'4xl',size:'5xl'},'_1og5str']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'_1de4k1a'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_1xbfeq5'],sm:[{fontSize:'xs',size:'sm'},'_9wo6tz'],md:[{fontSize:'md',size:'md'},'t9dnp5'],lg:[{fontSize:'lg',size:'lg'},'_1gzqx9r'],xl:[{fontSize:'2xl',size:'xl'},'diowu9'],'5xl':[{fontSize:'4xl',size:'5xl'},'br0nxl']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
 

package/dist/src/avatar-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1qjtom',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['slysdj',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-DkeeO3hp.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-CsqUU2-u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'mxmsa1'],variants:{colorScheme:{danger:'_127bq6g',information:'oqek2l',neutral:'_1ouc4f2',primary:'_1xngmy8',success:'_1ema7ga',warning:'_1b9xeu0'},variant:{light:'_1bsa6e0',solid:'_14zfehq'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_8u4chm'],variants:{intent:{danger:'_1sg8x20',information:'_1qafblu',neutral:'_1hmyeat',primary:'_6coa14',success:'_1quqqtd',warning:'bbhuj2'},variant:{light:'cbyas',solid:'v0s553'}}});
 
 export { badge };

package/dist/src/badge/Badge.js

@@ -9,7 +9,7 @@ const Badge = forwardRef(
     asChild,
     children,
     className,
-    colorScheme = "neutral",
+    intent = "neutral",
     variant = "light",
     ...props
   }, ref) => {
@@ -19,7 +19,7 @@ const Badge = forwardRef(
       {
         asChild: true,
         role: "presentation",
-        ...badge({ colorScheme, variant }, className),
+        ...badge({ intent, variant }, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { ref, children })
       }

package/dist/src/banner/Banner-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{colorScheme:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var icon = recipeRuntime({base:[{mt:'4'}],variants:{colorScheme:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, icon };

package/dist/src/banner/Banner.js

@@ -12,7 +12,7 @@ import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationF
 import { IconX } from '../icons/IconX.js';
 import { banner, icon } from './Banner-css.js';
 
-const iconMap = {
+const mapIntentToIcon = {
   danger: IconCircleExclamationFilled,
   information: IconCircleInfoFilled,
   neutral: IconCircleInfoFilled,
@@ -20,7 +20,7 @@ const iconMap = {
   warning: IconTriangleExclamationFilled
 };
 const Banner = forwardRef(
-  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsx(BannerContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
@@ -30,10 +30,10 @@ const Banner = forwardRef(
         "aria-labelledby": labelId,
         ref,
         role: "alert",
-        ...banner({ colorScheme }, className),
+        ...banner({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,

package/dist/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/box/Box.css.ts.vanilla-DXsrXznr.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/box/Box.css.ts.vanilla-CFbu6ERG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1q2741b'});
+var box = recipeRuntime({base:'g2l9n8'});
 
 export { box };

package/dist/src/button/Button.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef, isValidElement, cloneElement, useEffect } from 'react';
+import { ButtonAddon } from '../button-addon/ButtonAddon.js';
 import { ButtonBase } from '../button-base/ButtonBase.js';
 import { ButtonLabel } from '../button-label/ButtonLabel.js';
 import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
 import { Icon } from '../icon/Icon.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 
 const Button = forwardRef(
   ({
@@ -52,11 +55,13 @@ const Button = forwardRef(
         iconOnly: isIconOnly || iconOnly,
         ref,
         ...props,
-        ...(isIconOnly || iconOnly) && { justifyContent: "center" },
+        ...(isIconOnly || iconOnly || props.loading) && {
+          justifyContent: "center"
+        },
         children: /* @__PURE__ */ jsxs(Comp, { children: [
-          addonBefore && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonBefore }),
+          addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(Slottable, { children }),
-          addonAfter && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonAfter })
+          addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
         ] })
       }
     );

package/dist/src/button-addon/ButtonAddon.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
+
+const ButtonAddon = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Box, { display: "flex", flex: "none", ref, ...props, children }) });
+  }
+);
+ButtonAddon.displayName = "@optiaxiom/react/ButtonAddon";
+
+export { ButtonAddon };

package/dist/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-CbhXWBhY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-lSreN2s2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['o66lyz',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'snq2rn'],variants:{colorScheme:{danger:'edwo7x',neutral:'mx0yq',primary:'s9lkdo'},iconOnly:{false:'szvq3t',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1rc5d1d',solid:'_1k3dfkq',subtle:'_3424n8'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'nbo5bi',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_60t1ev',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'k8yjgy',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:'_1l29ljr'});
+var buttonBase = recipeRuntime({base:['atih8l',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'qm429p'],variants:{iconOnly:{false:'_1dcf3kk',true:{}},intent:{danger:'_1iekj3a',neutral:'_5sq53z',primary:'_1x11jl7'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1aa590g',solid:'s3dccm',subtle:'_9zicc6'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1eyl9gm',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_12ma8x8',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'e4klwr',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:'ffn8d9'});
 
 export { buttonBase, spinner };

package/dist/src/button-base/ButtonBase.js

@@ -10,12 +10,12 @@ import '../sprinkles/sprinklesMerge.js';
 import { buttonBase, spinner } from './ButtonBase-css.js';
 
 const appearances = {
-  danger: { colorScheme: "danger", variant: "solid" },
-  "danger-outline": { colorScheme: "danger", variant: "outline" },
-  default: { colorScheme: "neutral", variant: "outline" },
-  inverse: { colorScheme: "neutral", variant: "solid" },
-  primary: { colorScheme: "primary", variant: "solid" },
-  subtle: { colorScheme: "neutral", variant: "subtle" }
+  danger: { intent: "danger", variant: "solid" },
+  "danger-outline": { intent: "danger", variant: "outline" },
+  default: { intent: "neutral", variant: "outline" },
+  inverse: { intent: "neutral", variant: "solid" },
+  primary: { intent: "primary", variant: "solid" },
+  subtle: { intent: "neutral", variant: "subtle" }
 };
 const ButtonBase = forwardRef(
   ({
@@ -31,32 +31,30 @@ const ButtonBase = forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    const presetProps = appearances[appearance];
-    const colorScheme = presetProps.colorScheme;
-    const variant = presetProps.variant;
+    const { intent, variant } = appearances[appearance];
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
-        cursor: disabled || loading ? "not-allowed" : "pointer",
+        cursor: disabled ? "not-allowed" : "pointer",
         "data-disabled": disabled ? "" : void 0,
         "data-loading": loading ? "" : void 0,
         ...buttonBase(
           {
-            colorScheme,
             iconOnly: Boolean(iconOnly),
+            intent,
             size,
             variant
           },
           className
         ),
         ...sprinkleProps,
-        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
+        children: /* @__PURE__ */ jsxs(Comp, { disabled, ref, ...restProps, children: [
           /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
             Spinner,
             {
+              appearance: variant === "solid" ? "inverse" : "default",
               "aria-hidden": "true",
-              colorScheme: variant === "solid" ? "inverse" : "default",
               size: "2xs",
               ...spinner()
             }

package/dist/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_19c7dqd'});
+var buttonGroup = recipeRuntime({base:'o5ggju'});
 
 export { buttonGroup };

package/dist/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-CbhXWBhY.css';
-import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-C4Loni8x.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-lSreN2s2.css';
+import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DdBJS1WF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1ot18om']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_8klg3m']});
 
 export { loadable };

package/dist/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B5zW77Q6.css';
-import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-atE0BHRf.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-llCUpF4m.css';
+import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-Kaqr1iOD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'x3c5aj'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'16'},'ds9wkf'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['_1da0m23']});
+var checkbox = recipeRuntime({base:'_1fcaobb'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'16'},'_1b6ey87'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:['zozbig']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1ne2smd'});
+var input = recipeRuntime({base:'_1hpm0s4'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/code/Code.css.ts.vanilla-BokaFw0b.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/code/Code.css.ts.vanilla-DXWRlz04.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'cc90xq']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1gt60ck']});
 
 export { code };

package/dist/src/combobox/Combobox.js

@@ -1,32 +1,72 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useMemo, useEffect } from 'react';
 import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { Dialog } from '../dialog/Dialog.js';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
 import { Popover } from '../popover/Popover.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 
 function Combobox({
   children,
   defaultOpen = false,
   isItemDisabled = () => false,
+  items,
   itemToKey = (value) => value,
   itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onItemSelect,
   onOpenChange,
   open: openProp,
-  ...props
+  value: valueProp
 }) {
+  const components = useResponsiveMatches({
+    base: {
+      Content: DialogContent,
+      Root: Dialog,
+      Trigger: DialogTrigger
+    },
+    sm: {
+      Content: PopoverContent,
+      Root: Popover,
+      Trigger: PopoverTrigger
+    }
+  });
+  const value = useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+  const onInputValueChangeStable = useEffectEvent(
+    onInputValueChange ?? (() => {
+    })
+  );
+  useEffect(() => {
+    if (!open) {
+      onInputValueChangeStable("");
+    }
+  }, [open, onInputValueChangeStable]);
+  return /* @__PURE__ */ jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
     ComboboxContextProvider,
     {
+      components,
       isItemDisabled,
+      items,
       itemToKey,
       itemToString,
+      onInputValueChange,
+      onItemSelect,
       open,
       setOpen,
-      ...props,
+      value,
       children
     }
   ) });