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

package/dist/assets/src/styles/{theme.css.ts.vanilla-EbjT5N3_.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;
@@ -420,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;
@@ -476,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;

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,6 +1,6 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
-import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.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';
 

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/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-EbjT5N3_.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-EbjT5N3_.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/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-EbjT5N3_.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-EbjT5N3_.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/command-item/CommandItem-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/styles/theme.css.ts.vanilla-D9K5B5ZA.css';
 import './../assets/src/command-item/CommandItem.css.ts.vanilla-ml8xjFWy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 

package/dist/control-base/ControlBase-css.js

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

package/dist/control-base/ControlBase.js

@@ -11,15 +11,15 @@ import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { controlBase, indicator, label, decorator } from './ControlBase-css.js';
 
 const ControlBase = forwardRef(
-  ({ children, className, endDecorator, id: idProp, label: label$1, ...props }, ref) => {
+  ({ children, className, control, endDecorator, id: idProp, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const id = useId(idProp);
     return /* @__PURE__ */ jsxs(Box, { ref, ...controlBase({}, className), ...sprinkleProps, children: [
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: cloneElement(children, {
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: cloneElement(control, {
         id,
         ...restProps
       }) }),
-      /* @__PURE__ */ jsx(Text, { asChild: true, ...label(), children: /* @__PURE__ */ jsx(RadixLabel.Root, { htmlFor: id, children: label$1 }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, ...label(), children: /* @__PURE__ */ jsx(RadixLabel.Root, { htmlFor: id, children }) }),
       endDecorator && /* @__PURE__ */ jsx(Box, { asChild: true, ...decorator(), children: fallbackSpan(endDecorator) })
     ] });
   }

package/dist/grid/Grid.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
 const Grid = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { cols: "1", display: "grid", gap: "md", ref, ...props });
+  return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "md", gridTemplateColumns: "1", ref, ...props });
 });
 Grid.displayName = "@optiaxiom/react/Grid";
 

package/dist/heading/Heading.js

@@ -20,9 +20,9 @@ const mapTagToFontSize = {
   h6: "md"
 };
 const Heading = forwardRef(
-  ({ asChild, children, level = "1", variant, ...props }, ref) => {
+  ({ appearance, asChild, children, level = "1", ...props }, ref) => {
     const Comp = asChild ? Slot : mapLevelToTag[level];
-    const fontSize = mapTagToFontSize[variant ?? mapLevelToTag[level]];
+    const fontSize = mapTagToFontSize[appearance ?? mapLevelToTag[level]];
     return /* @__PURE__ */ jsx(Text, { asChild: true, fontSize, fontWeight: "700", ref, ...props, children: /* @__PURE__ */ jsx(Comp, { children }) });
   }
 );