@optiaxiom/react 0.1.0-next.12 → 0.1.0-next.14

package/dist/assets/src/styles/{theme.css.ts.vanilla-DWW2Oo9s.css → theme.css.ts.vanilla-D9K5B5ZA.css}

@@ -82,8 +82,9 @@
   --ax-colors-neutral-1000: #1C2029;
   --ax-colors-neutral-1100: #171A23;
   --ax-colors-neutral-1200: #091E42;
+  --ax-colors-neutral-50-6: #F9FAFC0F;
   --ax-colors-neutral-50-32: #F9FAFC52;
-  --ax-colors-neutral-1200-5: #091E420D;
+  --ax-colors-neutral-1200-4: #091E420A;
   --ax-colors-neutral-1200-12: #091E421F;
   --ax-colors-neutral-1200-18: #091E422E;
   --ax-colors-neutral-1200-22: #091E4238;
@@ -138,7 +139,7 @@
   --ax-colors-bg-error-solid-hover: #B21313;
   --ax-colors-bg-information: #E7F3FE;
   --ax-colors-bg-information-solid: #1668AC;
-  --ax-colors-bg-input-disabled: #091E420D;
+  --ax-colors-bg-input-disabled: #091E420A;
   --ax-colors-bg-neutral: #F5F6FA;
   --ax-colors-bg-neutral-inverse: #2E3442;
   --ax-colors-bg-neutral-inverse-hover: #262B37;
@@ -294,7 +295,8 @@
   --ax-size-sm: 1.5rem;
   --ax-size-md: 2rem;
   --ax-size-lg: 2.5rem;
-  --ax-size-xl: 4rem;
+  --ax-size-xl: 3rem;
+  --ax-size-5xl: 5rem;
   --ax-size-1-2: 50%;
   --ax-size-1-3: 33.333333%;
   --ax-size-2-3: 66.666666%;
@@ -419,8 +421,9 @@
   --ax-colors-neutral-1000: #1C2029;
   --ax-colors-neutral-1100: #171A23;
   --ax-colors-neutral-1200: #091E42;
+  --ax-colors-neutral-50-6: #F9FAFC0F;
   --ax-colors-neutral-50-32: #F9FAFC52;
-  --ax-colors-neutral-1200-5: #091E420D;
+  --ax-colors-neutral-1200-4: #091E420A;
   --ax-colors-neutral-1200-12: #091E421F;
   --ax-colors-neutral-1200-18: #091E422E;
   --ax-colors-neutral-1200-22: #091E4238;
@@ -475,7 +478,7 @@
   --ax-colors-bg-error-solid-hover: #B21313;
   --ax-colors-bg-information: #1C2B41;
   --ax-colors-bg-information-solid: #1668AC;
-  --ax-colors-bg-input-disabled: #091E420D;
+  --ax-colors-bg-input-disabled: #091E420A;
   --ax-colors-bg-neutral: #1e293b;
   --ax-colors-bg-neutral-inverse: #E9EDF5;
   --ax-colors-bg-neutral-inverse-hover: #CACFDC;
@@ -631,7 +634,8 @@
   --ax-size-sm: 1.5rem;
   --ax-size-md: 2rem;
   --ax-size-lg: 2.5rem;
-  --ax-size-xl: 4rem;
+  --ax-size-xl: 3rem;
+  --ax-size-5xl: 5rem;
   --ax-size-1-2: 50%;
   --ax-size-1-3: 33.333333%;
   --ax-size-2-3: 66.666666%;

package/dist/assets/src/table/Table.css.ts.vanilla-C9ntYW9X.css

@@ -0,0 +1,9 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  .n7dxra0 {
+    caption-side: bottom;
+  }
+  .n7dxra1 {
+    position: relative;
+  }
+}

package/dist/assets/src/table-body/TableBody.css.ts.vanilla-WI2VmycQ.css

@@ -0,0 +1,6 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  .gt6egm0 {
+    position: relative;
+  }
+}

package/dist/assets/src/table-cell/TableCell.css.ts.vanilla-Bn9ccAMh.css

@@ -0,0 +1,10 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._15qsgdy0 {
+    vertical-align: middle;
+    word-break: break-word;
+  }
+  .ozx0pm0:hover ._15qsgdy0 {
+    background-color: var(--ax-colors-bg-input-disabled);
+  }
+}

package/dist/assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-DEMkJMmk.css

@@ -0,0 +1,6 @@
+@layer optiaxiom._1kfj4ga1;
+@layer optiaxiom._1kfj4ga1 {
+  ._1nhtayz0 {
+    vertical-align: middle;
+  }
+}

package/dist/assets/src/toast/{Toast.css.ts.vanilla-N6bXbnrT.css → Toast.css.ts.vanilla-D1qN8JIH.css}

@@ -32,7 +32,6 @@
   }
   ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
     transition: translate 100ms ease-in 100ms;
-    translate: 0 -100%;
   }
   ._1egjidm5[data-state="open"] {
     animation: _1egjidm3 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -49,28 +48,28 @@
     translate: var(--radix-toast-swipe-move-x) var(--radix-toast-swipe-move-y);
   }
   ._1egjidm5[data-swipe-direction="down"] {
-    --_1egjidm1: 0 calc(100% + 24px);
+    --_1egjidm1: 0 calc(100% + var(--ax-spacing-24));
   }
   ._1egjidm5[data-swipe-direction="left"] {
-    --_1egjidm1: calc(-100% - 24px) 0;
+    --_1egjidm1: calc(-100% - var(--ax-spacing-24)) 0;
   }
   ._1egjidm5[data-swipe-direction="right"] {
-    --_1egjidm1: calc(100% + 24px) 0;
+    --_1egjidm1: calc(100% + var(--ax-spacing-24)) 0;
   }
   ._1egjidm5[data-swipe-direction="up"] {
-    --_1egjidm1: 0 calc(-100% - 24px);
+    --_1egjidm1: 0 calc(-100% - var(--ax-spacing-24));
   }
   [data-position^="bottom"] ._1egjidm5:first-child {
     margin-bottom: auto;
   }
   [data-position^="bottom"] ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
-    translate: 0 100%;
+    translate: 0 calc(100% + var(--ax-spacing-md));
   }
   [data-position^="top"] ._1egjidm5:last-child {
     margin-top: auto;
   }
   [data-position^="top"] ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
-    translate: 0 -100%;
+    translate: 0 calc(-100% - var(--ax-spacing-md));
   }
   ._1egjidm6 {
     --_1egjidm0: var(--ax-colors-red-300);

package/dist/avatar/Avatar-css.js

@@ -1,10 +1,11 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
-import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
-import './../assets/src/avatar/Avatar.css.ts.vanilla-esFrnsM7.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/avatar/Avatar.css.ts.vanilla-DxtsIDr-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',justifyContent:'center',overflow:'hidden',rounded:'full'},'t64xwp0'],variants:{colorScheme:{blue:{bg:'blue.50',color:'blue.500'},brand:{bg:'brand.50',color:'brand.500'},dark:{bg:'dark.50',color:'dark.500'},gray:{bg:'gray.50',color:'gray.500'},green:{bg:'green.50',color:'green.500'},magenta:{bg:'magenta.50',color:'magenta.500'},neutral:{bg:'neutral.50',color:'neutral.500'},orange:{bg:'orange.50',color:'orange.500'},purple:{bg:'purple.50',color:'purple.500'},red:{bg:'red.50',color:'red.500'},slate:{bg:'slate.50',color:'slate.500'},yellow:{bg:'yellow.50',color:'yellow.500'}},size:{xs:{fontSize:'xs',size:'xs'},sm:{fontSize:'sm',size:'sm'},md:{fontSize:'md',size:'md'},lg:{fontSize:'lg',size:'lg'},xl:{fontSize:'xl',size:'xl'}}}});
-var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'},variants:{size:{xs:{px:'4'},sm:{px:'6'},md:{px:'8'},lg:{px:'10'},xl:{px:'20'}}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'t64xwp0'],variants:{colorScheme:{blue:{bg:'blue.500',color:'white'},brand:{bg:'brand.500',color:'white'},dark:{bg:'dark.500',color:'white'},gray:{bg:'gray.500',color:'white'},green:{bg:'green.500',color:'white'},magenta:{bg:'magenta.500',color:'white'},neutral:{bg:'neutral.150',color:'bg.neutral.inverse'},orange:{bg:'orange.500',color:'white'},purple:{bg:'purple.500',color:'white'},red:{bg:'red.500',color:'white'},slate:{bg:'slate.500',color:'white'},yellow:{bg:'yellow.500',color:'white'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'t64xwp1'],sm:[{fontSize:'xs',size:'sm'},'t64xwp2'],md:[{fontSize:'md',size:'md'},'t64xwp3'],xl:[{fontSize:'2xl',size:'xl'},'t64xwp4'],'5xl':[{fontSize:'4xl',size:'5xl'},'t64xwp5']}}});
+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'},xl:{w:'20'},'5xl':{w:'32'}}}});
 
-export { avatar, fallback };
+export { avatar, fallback, icon };

package/dist/avatar/Avatar.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import { forwardRef, useContext } from 'react';
-import { AvatarGroupContext } from '../avatar-context/AvatarContext.js';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
-import { avatar, fallback } from './Avatar-css.js';
+import { avatar, fallback, icon } from './Avatar-css.js';
 
 const FALLBACK_DELAY_IN_MS = 600;
 function getInitialsFromName(name) {
@@ -17,14 +17,14 @@ const Avatar = forwardRef(
     children,
     className,
     colorScheme = "neutral",
-    icon,
+    icon: icon$1,
     name,
     size: sizeProp,
     src,
     ...props
   }, ref) => {
-    const groupContext = useContext(AvatarGroupContext);
-    const size = sizeProp || groupContext?.size || "md";
+    const context = useContext(AvatarContext);
+    const size = sizeProp || context?.size || "md";
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -33,7 +33,7 @@ const Avatar = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
           /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({ size }), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon ? icon : name ? getInitialsFromName(name) : children }) })
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children }) })
         ] })
       }
     );

package/dist/avatar-context/AvatarContext.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 
-const AvatarGroupContext = createContext({
+const AvatarContext = createContext({
   size: void 0
 });
 
-export { AvatarGroupContext };
+export { AvatarContext };

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

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var avatarGroup = recipeRuntime({base:['_11600940',{display:'flex'}]});

package/dist/avatar-group/AvatarGroup.js

@@ -1,28 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, Children } from 'react';
-import { Avatar } from '../avatar/Avatar.js';
-import { AvatarGroupContext } from '../avatar-context/AvatarContext.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
-import { HoverCard } from '../hover-card/HoverCard.js';
-import { HoverCardContent } from '../hover-card-content/HoverCardContent.js';
-import { HoverCardTrigger } from '../hover-card-trigger/HoverCardTrigger.js';
 import { avatarGroup } from './AvatarGroup-css.js';
 
 const AvatarGroup = forwardRef(
-  ({ children, className, maxItems = 3, size = "md", ...props }, ref) => {
-    const allChildren = Children.toArray(children);
-    const visibleChildren = allChildren.slice(0, maxItems);
-    const overflowChildren = allChildren.slice(maxItems);
-    return /* @__PURE__ */ jsxs(Box, { ref, ...avatarGroup({}, className), ...props, children: [
-      /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size }, children: visibleChildren }),
-      overflowChildren.length > 0 && /* @__PURE__ */ jsxs(HoverCard, { children: [
-        /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Avatar, { colorScheme: "gray", size, children: [
-          "+",
-          overflowChildren.length
-        ] }) }),
-        /* @__PURE__ */ jsx(HoverCardContent, { flexDirection: "row", children: overflowChildren.map((child, index) => /* @__PURE__ */ jsx(Box, { asChild: true, children: child }, index)) })
-      ] })
-    ] });
+  ({ children, className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size }, children }) });
   }
 );
 AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";

package/dist/axiom-provider/AxiomProvider.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+const AxiomProvider = ({ children, tooltip }) => /* @__PURE__ */ jsx(RadixTooltip.Provider, { ...tooltip, children });
+AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
+
+export { AxiomProvider };

package/dist/badge/Badge-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/badge/Badge.css.ts.vanilla-D5YRrHke.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/box/Box-css.js

@@ -1,6 +1,6 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
-import './../assets/src/box/Box.css.ts.vanilla-D1mbecuN.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/box/Box.css.ts.vanilla-DLsoitAb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var box = recipeRuntime({base:'_1jn0ep0'});

package/dist/box/Box.js

@@ -3,31 +3,32 @@ import '@fontsource-variable/fira-code';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import 'inter-ui/inter-variable.css';
-import { forwardRef, isValidElement } from 'react';
+import { createContext, forwardRef, useContext } from 'react';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import { sprinkles } from '../sprinkles/sprinkles-css.js';
 import { box } from './Box-css.js';
 
+const SprinklesContext = createContext(void 0);
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    if (asChild && isValidElement(props.children)) {
-      const { sprinkleProps: childrenSprinkleProps } = extractSprinkles(
-        props.children.props
-      );
-      for (const key in childrenSprinkleProps) {
-        delete sprinkleProps[key];
+    const outerSprinkleProps = useContext(SprinklesContext);
+    if (className && outerSprinkleProps) {
+      for (const [key, value] of Object.entries(outerSprinkleProps)) {
+        if (key in sprinkleProps) {
+          className = (" " + className + " ").replace(" " + sprinkles({ [key]: value }) + " ", " ").trim();
+        }
       }
     }
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(SprinklesContext.Provider, { value: asChild ? sprinkleProps : void 0, children: /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
         ...box({}, clsx(className, sprinkles(sprinkleProps))),
         ...restProps
       }
-    );
+    ) });
   }
 );
 Box.displayName = "@optiaxiom/react/Box";

package/dist/button/Button-css.js

@@ -1,11 +1,13 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
-import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
-import './../assets/src/button/Button.css.ts.vanilla-BVWox07Y.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/button/Button.css.ts.vanilla-DeHH8Xkd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1gqmi2d6'],variants:{colorScheme:{danger:'_1gqmi2d7',neutral:'_1gqmi2d8',primary:'_1gqmi2d9'},iconOnly:{false:'_1gqmi2da',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1gqmi2db',solid:'_1gqmi2dc',subtle:'_1gqmi2dd'}},variantsCompounded:[{style:'_1gqmi2de',variants:{colorScheme:'neutral',variant:'outline'}},{style:'_1gqmi2df',variants:{iconOnly:true,size:'sm'}},{style:'_1gqmi2dg',variants:{iconOnly:false,size:'sm'}},{style:'_1gqmi2dh',variants:{iconOnly:true,size:'md'}},{style:'_1gqmi2di',variants:{iconOnly:false,size:'md'}},{style:'_1gqmi2dj',variants:{iconOnly:true,size:'lg'}},{style:'_1gqmi2dk',variants:{iconOnly:false,size:'lg'}}]});
-var icon = recipeRuntime({base:{h:'auto',w:'20'}});
-var label = recipeRuntime({base:{flexDirection:'row',gap:'4',mx:'4'}});
+var button = recipeRuntime({base:['_1gqmi2d6',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1gqmi2d7'],variants:{colorScheme:{danger:'_1gqmi2d8',neutral:'_1gqmi2d9',primary:'_1gqmi2da'},iconOnly:{false:'_1gqmi2db',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1gqmi2dc',solid:'_1gqmi2dd',subtle:'_1gqmi2de'}},variantsCompounded:[{style:'_1gqmi2df',variants:{colorScheme:'neutral',variant:'outline'}},{style:'_1gqmi2dg',variants:{iconOnly:true,size:'sm'}},{style:'_1gqmi2dh',variants:{iconOnly:false,size:'sm'}},{style:'_1gqmi2di',variants:{iconOnly:true,size:'md'}},{style:'_1gqmi2dj',variants:{iconOnly:false,size:'md'}},{style:'_1gqmi2dk',variants:{iconOnly:true,size:'lg'}},{style:'_1gqmi2dl',variants:{iconOnly:false,size:'lg'}}]});
+var decorator = recipeRuntime({base:[{transition:'opacity'},'_1gqmi2dm']});
+var icon = recipeRuntime({base:[{h:'auto',w:'20'},{transition:'opacity'},'_1gqmi2dm']});
+var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'_1gqmi2dm']});
+var spinner = recipeRuntime({base:'_1gqmi2dn'});
 
-export { button, icon, label };
+export { button, decorator, icon, label, spinner };

package/dist/button/Button.js

@@ -1,18 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef, isValidElement, cloneElement } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import '../animate-presence/PresenceContext.js';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
+import { Spinner } from '../spinner/Spinner.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
+import { Transition } from '../transition/Transition.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { icon, label, button } from './Button-css.js';
+import { icon, label, button, spinner, decorator } 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" },
   secondary: { colorScheme: "neutral", variant: "subtle" }
 };
@@ -22,7 +27,6 @@ const Button = forwardRef(
     asChild,
     children,
     className,
-    colorScheme: colorSchemeProp,
     disabled,
     endDecorator,
     icon: icon$1,
@@ -30,15 +34,13 @@ const Button = forwardRef(
     loading,
     size = "md",
     startDecorator,
-    variant: variantProp,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const presetProps = appearances[appearance];
-    const colorScheme = colorSchemeProp ?? presetProps.colorScheme;
-    const variant = variantProp ?? presetProps.variant;
-    const isDisabled = Boolean(disabled || loading);
+    const colorScheme = presetProps.colorScheme;
+    const variant = presetProps.variant;
     let isIconOnly = Boolean(!children && icon$1);
     if (asChild) {
       const newElement = isValidElement(children) ? children : null;
@@ -62,7 +64,8 @@ const Button = forwardRef(
       Box,
       {
         asChild: true,
-        "data-disabled": isDisabled ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
         ...button(
           {
             colorScheme,
@@ -73,10 +76,16 @@ const Button = forwardRef(
           className
         ),
         ...sprinkleProps,
-        children: /* @__PURE__ */ jsxs(Comp, { disabled: isDisabled, ref, ...restProps, children: [
-          startDecorator,
+        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", ...spinner(), children: /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              colorScheme: variant === "solid" ? "inverse" : "default"
+            }
+          ) }) }) }),
+          startDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator(), children: fallbackSpan(startDecorator) }),
           /* @__PURE__ */ jsx(Slottable, { children }),
-          endDecorator
+          endDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator(), children: fallbackSpan(endDecorator) })
         ] })
       }
     );

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

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/table-row/TableRow.css.ts.vanilla-4BGjgIuZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var buttonGroup = recipeRuntime({base:'_1sewcgl0'});

package/dist/checkbox/Checkbox-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-DWW2Oo9s.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/checkbox/Checkbox.css.ts.vanilla-w5cdPwHc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';

package/dist/checkbox/Checkbox.js

@@ -5,25 +5,22 @@ import { Box } from '../box/Box.js';
 import { ControlBase } from '../control-base/ControlBase.js';
 import { IconCheck } from '../icons/IconCheck.js';
 import { IconMinus } from '../icons/IconMinus.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles-css.js';
 import { checkbox, indicator, iconChecked, iconIndeterminate } from './Checkbox-css.js';
 
 const Checkbox = forwardRef(
-  ({ children, endDecorator, id, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, defaultChecked, endDecorator, id, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       ControlBase,
       {
+        control: /* @__PURE__ */ jsx(Box, { asChild: true, ...checkbox(), children: /* @__PURE__ */ jsx(RadixCheckbox.Root, { defaultChecked, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsxs(RadixCheckbox.Indicator, { children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconChecked(), children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconIndeterminate(), children: /* @__PURE__ */ jsx(IconMinus, {}) })
+        ] }) }) }) }),
         endDecorator,
         id,
-        label: children,
         ref,
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...checkbox(), children: /* @__PURE__ */ jsx(RadixCheckbox.Root, { ...restProps, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsxs(RadixCheckbox.Indicator, { children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconChecked(), children: /* @__PURE__ */ jsx(IconCheck, {}) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconIndeterminate(), children: /* @__PURE__ */ jsx(IconMinus, {}) })
-        ] }) }) }) })
+        ...props,
+        children
       }
     );
   }

package/dist/combobox/Combobox.js

@@ -1,28 +1,36 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState } from 'react';
-import { ComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
 import { Popover } from '../popover/Popover.js';
 
 const Combobox = ({
   children,
   defaultOpen,
   defaultValue = "",
-  items = [],
+  mode = "single",
   onOpenChange,
-  onSelect,
-  open: openProp
+  onValueChange,
+  open: openProp,
+  value: valueProp
 }) => {
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
   return /* @__PURE__ */ jsx(
-    ComboboxContext.Provider,
+    ComboboxContextProvider,
     {
-      value: { items, onSelect, open, setOpen, setValue, value },
+      mode,
+      open,
+      setOpen,
+      setValue,
+      value,
       children: /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children })
     }
   );

package/dist/combobox-content/ComboboxContent.js

@@ -1,57 +1,21 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { Box } from '../box/Box.js';
-import { ComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Command } from '../command/Command.js';
-import { CommandEmpty } from '../command-empty/CommandEmpty.js';
 import { CommandInput } from '../command-input/CommandInput.js';
-import { CommandItem } from '../command-item/CommandItem.js';
-import { CommandList } from '../command-list/CommandList.js';
 import { CommandSeparator } from '../command-separator/CommandSeparator.js';
-import { Flex } from '../flex/Flex.js';
-import { IconCheck } from '../icons/IconCheck.js';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 import { Search } from '../search/Search.js';
 
 const ComboboxContent = forwardRef(
-  ({ asChild, children, emptyResult, ...props }, ref) => {
-    const context = useContext(ComboboxContext);
+  ({ asChild, children, ...props }, ref) => {
+    const context = useComboboxContext("Combobox");
     if (!context)
       throw new Error("ComboboxContent must be used within a Combobox");
-    const { items, onSelect, setOpen, setValue, value } = context;
-    return /* @__PURE__ */ jsx(PopoverContent, { asChild: true, p: "0", ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxs(Command, { alignItems: "center", children: [
+    return /* @__PURE__ */ jsx(PopoverContent, { asChild: true, p: "0", ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxs(Command, { children: [
       /* @__PURE__ */ jsx(CommandInput, { asChild: true, children: /* @__PURE__ */ jsx(Search, { m: "2" }) }),
-      /* @__PURE__ */ jsx(CommandSeparator, {}),
-      /* @__PURE__ */ jsx(CommandEmpty, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", py: "4", children: emptyResult || "No results found" }) }),
-      /* @__PURE__ */ jsx(CommandList, { maxH: "sm", mt: "4", overflow: "auto", children: items?.map((item) => /* @__PURE__ */ jsx(
-        CommandItem,
-        {
-          keywords: [item.value, item.label],
-          onSelect: (currentValue) => {
-            setValue(currentValue === value ? "" : currentValue);
-            setOpen(false);
-            if (onSelect) {
-              onSelect(currentValue);
-            }
-          },
-          tabIndex: 0,
-          value: item.value,
-          children: /* @__PURE__ */ jsxs(
-            Box,
-            {
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              w: "full",
-              children: [
-                item.label,
-                value == item.value ? /* @__PURE__ */ jsx(Box, { color: "black", mr: "2", children: /* @__PURE__ */ jsx(IconCheck, {}) }) : /* @__PURE__ */ jsx(Fragment, {})
-              ]
-            }
-          )
-        },
-        item.value
-      )) })
+      /* @__PURE__ */ jsx(CommandSeparator, { alwaysRender: true }),
+      children
     ] }) });
   }
 );

package/dist/combobox-context/ComboboxContext.js

@@ -1,7 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from '@radix-ui/react-context';
 
-const ComboboxContext = createContext(
-  void 0
-);
+const [ComboboxContextProvider, useComboboxContext] = createContext("Combobox");
 
-export { ComboboxContext };
+export { ComboboxContextProvider, useComboboxContext };