@optiaxiom/react 0.3.3 → 0.3.5

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

@@ -3,7 +3,7 @@ import { PopperContent } from '@radix-ui/react-popper';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { content } from './AutocompleteContent-css.js';
 
@@ -16,8 +16,8 @@ const AutocompleteContent = forwardRef(
     sideOffset = 5,
     ...props
   }, ref) => {
-    const { downshift, isOpen } = useAutocompleteContext("AutocompleteContent");
-    return /* @__PURE__ */ jsx(MenuContentBase, { minW: "trigger", open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(PopperContent, { align, asChild: true, sideOffset, children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({}, { suppressRefError: true }), children: loading ? /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : children }) }) }) });
+    const { isOpen } = useAutocompleteContext("AutocompleteContent");
+    return /* @__PURE__ */ jsx(ListboxBase, { minW: "trigger", open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(PopperContent, { align, sideOffset, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) });
   }
 );
 AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";

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

@@ -0,0 +1,31 @@
+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;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      color: "fg.disabled",
+      display: "flex",
+      fontSize: "md",
+      justifyContent: "center",
+      p: "md",
+      ...sprinkleProps,
+      children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children: children || "No options" })
+    }
+  );
+});
+AutocompleteEmpty.displayName = "@optiaxiom/react/AutocompleteEmpty";
+
+export { AutocompleteEmpty };

package/dist/src/autocomplete-item/AutocompletItem.js

@@ -1,39 +1,48 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
-import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
-import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { AutocompleteItemContextProvider } from '../autocomplete-item-context/AutocompleteItemContext.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
-const AutocompleteItem = forwardRef(({ addonAfter, addonBefore, children, description, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  const { downshift, highlightedItem } = useAutocompleteContext("AutocompleteItem");
-  const { item } = useAutocompleteListContext("AutocompleteItem");
-  const itemProps = downshift.getItemProps({ item });
-  return /* @__PURE__ */ jsx(
-    MenuItemBase,
-    {
-      addonAfter,
-      addonBefore,
-      description,
-      ...sprinkleProps,
-      children: /* @__PURE__ */ jsx(
-        "li",
-        {
-          "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-          "data-highlighted": highlightedItem === item ? "" : void 0,
-          "data-selected": downshift.selectedItem === item ? "" : void 0,
-          ref,
-          ...restProps,
-          ...itemProps,
-          children
-        }
-      )
-    }
-  );
-});
+const AutocompleteItem = forwardRef(
+  ({ addonAfter, addonBefore, children, description, icon, item, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem } = useAutocompleteContext("AutocompleteItem");
+    const itemProps = downshift.getItemProps({ item });
+    return /* @__PURE__ */ jsx(
+      AutocompleteItemContextProvider,
+      {
+        active: downshift.selectedItem === item,
+        item,
+        children: /* @__PURE__ */ jsx(
+          ListboxItemBase,
+          {
+            addonAfter,
+            addonBefore,
+            description,
+            icon,
+            ...sprinkleProps,
+            children: /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+                "data-highlighted": highlightedItem === item ? "" : void 0,
+                "data-selected": downshift.selectedItem === item ? "" : void 0,
+                ref,
+                ...restProps,
+                ...itemProps,
+                children
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
 AutocompleteItem.displayName = "@optiaxiom/react/AutocompleteItem";
 
 export { AutocompleteItem };

package/dist/src/autocomplete-item-context/AutocompleteItemContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [AutocompleteItemContextProvider, useAutocompleteItemContext] = createContext("AutocompleteItem");
+
+export { AutocompleteItemContextProvider, useAutocompleteItemContext };

package/dist/src/autocomplete-item-indicator/AutocompleteItemIndicator.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
+import { useAutocompleteItemContext } from '../autocomplete-item-context/AutocompleteItemContext.js';
 import { Box } from '../box/Box.js';
 import { IconCheck } from '../icons/IconCheck.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
@@ -9,7 +9,7 @@ import '../sprinkles/sprinklesMerge.js';
 
 const AutocompleteItemIndicator = forwardRef(({ children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
-  const { active } = useAutocompleteListContext("AutocompleteItemIndicator");
+  const { active } = useAutocompleteItemContext("AutocompleteItemIndicator");
   if (!active) {
     return /* @__PURE__ */ jsx(Box, { w: "12" });
   }

package/dist/src/autocomplete-list/AutocompleteList.js

@@ -1,19 +1,31 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
-import { AutocompleteListContextProvider } from '../autocomplete-list-context/AutocompleteListContext.js';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
-function AutocompleteList({ children }) {
-  const { downshift, items, itemToKey } = useAutocompleteContext("AutocompleteList");
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(
-    AutocompleteListContextProvider,
+const AutocompleteList = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { downshift, items } = useAutocompleteContext("AutocompleteList");
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      active: downshift.selectedItem === item,
-      item,
-      children: children(item)
-    },
-    itemToKey(item)
-  )) });
-}
+      asChild: true,
+      display: "flex",
+      flex: "1",
+      flexDirection: "column",
+      gap: "2",
+      overflow: "auto",
+      ...sprinkleProps,
+      children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({ ref, ...restProps }), children })
+    }
+  );
+});
 AutocompleteList.displayName = "@optiaxiom/react/AutocompleteList";
 
 export { AutocompleteList };

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
-import './../../assets/src/avatar/Avatar.css.ts.vanilla-BF1qaLvg.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/avatar/Avatar.css.ts.vanilla-UAC31ujs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'rhysjq'],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'},'vzqu2g'],sm:[{fontSize:'xs',size:'sm'},'_154lu2q'],md:[{fontSize:'md',size:'md'},'rk85en'],lg:[{fontSize:'lg',size:'lg'},'_1w7f5vq'],xl:[{fontSize:'2xl',size:'xl'},'rpl2io'],'5xl':[{fontSize:'4xl',size:'5xl'},'_4j2h85']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'wrz0hn'],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'},'_198szq4'],sm:[{fontSize:'xs',size:'sm'},'f5rxl4'],md:[{fontSize:'md',size:'md'},'_45i3y1'],lg:[{fontSize:'lg',size:'lg'},'_1baawat'],xl:[{fontSize:'2xl',size:'xl'},'dsb99o'],'5xl':[{fontSize:'4xl',size:'5xl'},'g8hc8l']}}});
 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-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_14qmtc8',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['vsldt8',{display:'flex'}]});
 
 export { avatarGroup };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-CDFp0bWo.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-Dby1HGSv.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'},'_3cmv2i'],variants:{colorScheme:{danger:'_16jr9ht',information:'s30x2m',neutral:'u8hs3s',primary:'btpj4w',success:'_503mp6',warning:'_1e1p44p'},variant:{light:'_1qh9p2t',solid:'_157w3f8'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_3bbeh0'],variants:{colorScheme:{danger:'_1p424cf',information:'_1a43cjt',neutral:'_13bimol',primary:'_3t9cl3',success:'_1wtq2vv',warning:'_1qtrqgl'},variant:{light:'ngknio',solid:'dea1r8'}}});
 
 export { badge };

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

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.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'}}}});

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/box/Box.css.ts.vanilla-CIZw6Oxp.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/box/Box.css.ts.vanilla-BHZ4bhCx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1ndimy9'});
+var box = recipeRuntime({base:'_1ezwwu2'});
 
 export { box };

package/dist/src/box/Box.js

@@ -17,7 +17,7 @@ const Box = forwardRef(
       {
         "data-axiom": version,
         ref,
-        ...box({}, sprinklesMerge(className, sprinkles(sprinkleProps))),
+        ...box({}, sprinklesMerge(sprinkles(sprinkleProps), className)),
         ...restProps
       }
     );

package/dist/src/button/Button.js

@@ -1,63 +1,40 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef, isValidElement, cloneElement, useEffect } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
-import { Box } from '../box/Box.js';
-import { Flex } from '../flex/Flex.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 { Spinner } from '../spinner/Spinner.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import '../utils/conditions.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { icon, label, button, spinner, addon } from './Button-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" }
-};
 const Button = forwardRef(
   ({
     addonAfter,
     addonBefore,
-    appearance = "default",
     asChild,
     children,
-    className,
-    disabled,
-    icon: icon$1,
+    icon,
+    iconOnly,
     iconPosition = "start",
-    loading,
-    size = "md",
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    const presetProps = appearances[appearance];
-    const colorScheme = presetProps.colorScheme;
-    const variant = presetProps.variant;
-    let isIconOnly = Boolean(!children && icon$1);
+    let isIconOnly = Boolean(!children && icon);
     if (asChild) {
       const newElement = isValidElement(children) ? children : null;
-      isIconOnly = Boolean(!newElement?.props.children && icon$1);
+      isIconOnly = Boolean(!newElement?.props.children && icon);
       children = newElement ? cloneElement(
         newElement,
         void 0,
-        isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(newElement.props.children) })
+        isIconOnly ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: newElement.props.children })
       ) : children;
     } else {
-      children = isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(children) });
+      children = isIconOnly ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children });
     }
-    if (icon$1 && !isIconOnly) {
+    if (icon && !isIconOnly) {
       if (iconPosition === "start") {
-        addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
+        addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon });
       } else if (iconPosition === "end") {
-        addonAfter = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
+        addonAfter = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon });
       }
     }
     const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
@@ -69,36 +46,17 @@ const Button = forwardRef(
       }
     }, [isIconMissingAriaLabel]);
     return /* @__PURE__ */ jsx(
-      Box,
+      ButtonBase,
       {
         asChild: true,
-        cursor: disabled || loading ? "not-allowed" : "pointer",
-        "data-disabled": disabled ? "" : void 0,
-        "data-loading": loading ? "" : void 0,
-        ...button(
-          {
-            colorScheme,
-            iconOnly: isIconOnly,
-            size,
-            variant
-          },
-          className
-        ),
-        ...sprinkleProps,
-        ...isIconOnly && { justifyContent: "center" },
-        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
-            Spinner,
-            {
-              "aria-hidden": "true",
-              colorScheme: variant === "solid" ? "inverse" : "default",
-              size: "2xs",
-              ...spinner()
-            }
-          ) }),
-          addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
+        iconOnly: isIconOnly || iconOnly,
+        ref,
+        ...props,
+        ...(isIconOnly || iconOnly) && { justifyContent: "center" },
+        children: /* @__PURE__ */ jsxs(Comp, { children: [
+          addonBefore && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonBefore }),
           /* @__PURE__ */ jsx(Slottable, { children }),
-          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) })
+          addonAfter && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonAfter })
         ] })
       }
     );

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-BHtcSNLa.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var buttonBase = recipeRuntime({base:['_4ci4l7',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_838r88'],variants:{colorScheme:{danger:'_1kmcyc6',neutral:'_10fu58u',primary:'ufyggn'},iconOnly:{false:'_5gsrs5',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'exsz1p',solid:'_3zelz6',subtle:'_1cr2gai'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_80p7q7',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'sam27k',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'wmq17e',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:'_1vaqmo4'});
+
+export { buttonBase, spinner };

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+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" }
+};
+const ButtonBase = forwardRef(
+  ({
+    appearance = "default",
+    asChild,
+    children,
+    className,
+    disabled,
+    iconOnly,
+    loading,
+    size = "md",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const presetProps = appearances[appearance];
+    const colorScheme = presetProps.colorScheme;
+    const variant = presetProps.variant;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        cursor: disabled || loading ? "not-allowed" : "pointer",
+        "data-disabled": disabled ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
+        ...buttonBase(
+          {
+            colorScheme,
+            iconOnly: Boolean(iconOnly),
+            size,
+            variant
+          },
+          className
+        ),
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              "aria-hidden": "true",
+              colorScheme: variant === "solid" ? "inverse" : "default",
+              size: "2xs",
+              ...spinner()
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Slottable, { children })
+        ] })
+      }
+    );
+  }
+);
+ButtonBase.displayName = "@optiaxiom/react/ButtonBase";
+
+export { ButtonBase };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1qqb1dw'});
+var buttonGroup = recipeRuntime({base:'c6u42p'});
 
 export { buttonGroup };

package/dist/src/button-label/ButtonLabel.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
+import { Flex } from '../flex/Flex.js';
+
+const ButtonLabel = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "4", mx: "4", ref, ...props, children }) });
+  }
+);
+ButtonLabel.displayName = "@optiaxiom/react/ButtonLabel";
+
+export { ButtonLabel };

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-BHtcSNLa.css';
+import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CnyGW7JN.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var loadable = recipeRuntime({base:[{transition:'opacity'},'dn99pm']});
+
+export { loadable };

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

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { loadable } from './ButtonLoadable-css.js';
+
+const ButtonLoadable = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...loadable({}, className), ...props, children });
+  }
+);
+ButtonLoadable.displayName = "@optiaxiom/react/ButtonLoadable";
+
+export { ButtonLoadable };

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

@@ -1,13 +1,13 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DEHzszBc.css';
-import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-q3GGPGwP.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CYG8X4be.css';
+import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-BP-IS8uM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'k7s66q'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'_1ywjeeu']});
-var icon = recipeRuntime({base:['_1q0x3ld']});
+var checkbox = recipeRuntime({base:'_14hl1zr'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'h08m3m']});
+var icon = recipeRuntime({base:['_56ea5e']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_3yhhcl'});
+var input = recipeRuntime({base:'jmjhjk'});
 
 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-C7QPdQL4.css';
-import './../../assets/src/code/Code.css.ts.vanilla-CVJglY5u.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/code/Code.css.ts.vanilla-Di85g701.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_1ubfvma']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'oohy28']});
 
 export { code };