@optiaxiom/react 0.1.0-next.4 → 0.1.0-next.6

package/dist/assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css

@@ -0,0 +1,4 @@
+@layer optiaxiom;
+@layer optiaxiom.base;
+@layer optiaxiom._1kfj4ga0;
+@layer optiaxiom._1kfj4ga1;

package/dist/assets/src/styles/{theme.css.ts.vanilla-Cb0QJvUK.css → theme.css.ts.vanilla-0B4GnT52.css}

@@ -4,7 +4,7 @@
   --ax-borderRadius-md: 0.375rem;
   --ax-borderRadius-lg: 0.5rem;
   --ax-borderRadius-xl: 0.75rem;
-  --ax-borderRadius-full: 100%;
+  --ax-borderRadius-full: 9999px;
   --ax-borderRadius-none: 0;
   --ax-borderWidth-0: 0;
   --ax-borderWidth-1: 1px;
@@ -317,6 +317,7 @@
   --ax-zIndex-40: 40;
   --ax-zIndex-50: 50;
   --ax-zIndex-auto: auto;
+  --ax-zIndex-popover: 1500;
 }
 :root.dark {
   --ax-borderRadius-xs: 0.125rem;
@@ -324,7 +325,7 @@
   --ax-borderRadius-md: 0.375rem;
   --ax-borderRadius-lg: 0.5rem;
   --ax-borderRadius-xl: 0.75rem;
-  --ax-borderRadius-full: 100%;
+  --ax-borderRadius-full: 9999px;
   --ax-borderRadius-none: 0;
   --ax-borderWidth-0: 0;
   --ax-borderWidth-1: 1px;
@@ -637,4 +638,5 @@
   --ax-zIndex-40: 40;
   --ax-zIndex-50: 50;
   --ax-zIndex-auto: auto;
+  --ax-zIndex-popover: 1500;
 }

package/dist/assets/src/text/{Text.css.ts.vanilla-BtaUGYv3.css → Text.css.ts.vanilla-DK_dMlGe.css}

@@ -1,7 +1,6 @@
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
   ._13y7bdy0 {
-    overflow: hidden;
     text-overflow: ellipsis;
   }
   ._13y7bdy1 {
@@ -20,7 +19,4 @@
   ._13y7bdy5 {
     -webkit-line-clamp: 4;
   }
-  ._13y7bdy6 {
-    white-space: nowrap;
-  }
 }

package/dist/assets/src/transition/{Transition.css.ts.vanilla-qjeQECVe.css → Transition.css.ts.vanilla-COX8x_Bo.css}

@@ -6,41 +6,50 @@
     transition-timing-function: ease;
   }
   ._1p67mhc1 {
-    opacity: 0;
+    transition-duration: 250ms;
   }
   ._1p67mhc2 {
+    transition-duration: 400ms;
+  }
+  ._1p67mhc3 {
+    transition-duration: 550ms;
+  }
+  ._1p67mhc4 {
+    opacity: 0;
+  }
+  ._1p67mhc5 {
     opacity: 0;
     transform: translateY(-15px);
   }
-  ._1p67mhc3 {
+  ._1p67mhc6 {
     opacity: 0;
     transform: translateX(15px);
   }
-  ._1p67mhc4 {
+  ._1p67mhc7 {
     opacity: 0;
     transform: translateX(-15px);
   }
-  ._1p67mhc5 {
+  ._1p67mhc8 {
     opacity: 0;
     transform: translateY(15px);
   }
-  ._1p67mhc6 {
+  ._1p67mhc9 {
     opacity: 0;
     transform: scale(0.9);
   }
-  ._1p67mhc7 {
+  ._1p67mhca {
     opacity: 0;
     transform: scale(0.9) translateY(-10px);
   }
-  ._1p67mhc8 {
+  ._1p67mhcb {
     opacity: 0;
     transform: scale(0.9) translateX(10px);
   }
-  ._1p67mhc9 {
+  ._1p67mhcc {
     opacity: 0;
     transform: scale(0.9) translateX(-10px);
   }
-  ._1p67mhca {
+  ._1p67mhcd {
     opacity: 0;
     transform: scale(0.9) translateY(10px);
   }

package/dist/avatar/Avatar-css.js

@@ -1,10 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/sprinkles/sprinkles.css.ts.vanilla-NXW-pecy.css';
-import './../assets/src/avatar/Avatar.css.ts.vanilla-DdarHYxU.css';
-import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/avatar/Avatar.css.ts.vanilla-CihLlW6Z.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = createRuntimeFn({compoundVariants:[],defaultClassName:'t64xwph',defaultVariants:{},variantClassNames:{colorScheme:{blue:'yukyx7a yukyx797',brand:'yukyx7f yukyx79f',dark:'yukyx7p yukyx79m',gray:'yukyx7t yukyx79t',green:'yukyx713 yukyx7a3',magenta:'yukyx71d yukyx7aa',neutral:'yukyx71h yukyx7ah',orange:'yukyx71t yukyx7aq',purple:'yukyx71x yukyx7au',red:'yukyx722 yukyx7b2',slate:'yukyx72c yukyx7bc',yellow:'yukyx72n yukyx7bn'},size:{xs:'yukyx7oo yukyx71m8 yukyx7h4',sm:'yukyx7os yukyx71mc yukyx7h8',md:'yukyx7ow yukyx71mg yukyx7hc',lg:'yukyx7p0 yukyx71mk yukyx7hg',xl:'yukyx7p4 yukyx71mo yukyx7hk'}}});
-var fallback = createRuntimeFn({compoundVariants:[],defaultClassName:'t64xwp15 yukyx78l yukyx7q4 yukyx71no yukyx7ec yukyx7f0 yukyx7qg yukyx7dy',defaultVariants:{},variantClassNames:{size:{xs:'yukyx71co yukyx71es',sm:'yukyx71cs yukyx71ew',md:'yukyx71cw yukyx71f0',lg:'yukyx71d0 yukyx71f4',xl:'yukyx71dc yukyx71fg'}}});
+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'}}}});
 
 export { avatar, fallback };

package/dist/avatar/Avatar.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { avatar, fallback } from './Avatar-css.js';
@@ -27,11 +26,11 @@ const Avatar = forwardRef(
       Box,
       {
         asChild: true,
-        className: clsx(avatar({ colorScheme, size }), className),
+        ...avatar({ colorScheme, size }, className),
         ...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, className: 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({ size }), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon ? icon : name ? getInitialsFromName(name) : children }) })
         ] })
       }
     );

package/dist/box/Box-css.js

@@ -1,7 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-0B4GnT52.css';
 import './../assets/src/box/Box.css.ts.vanilla-DMx7YI4c.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var base = '_1jn0ep0';
+var box = recipeRuntime({base:'_1jn0ep0'});
 
-export { base };
+export { box };

package/dist/box/Box.js

@@ -6,7 +6,7 @@ import 'inter-ui/inter-variable.css';
 import { forwardRef } from 'react';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import { sprinkles } from '../sprinkles/sprinkles-css.js';
-import { base } from './Box-css.js';
+import { box } from './Box-css.js';
 
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
@@ -15,8 +15,8 @@ const Box = forwardRef(
     return /* @__PURE__ */ jsx(
       Comp,
       {
-        className: clsx(className, base, sprinkles(sprinkleProps)),
         ref,
+        ...box({}, clsx(className, sprinkles(sprinkleProps))),
         ...restProps
       }
     );

package/dist/button/Button-css.js

@@ -1,8 +1,8 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/button/Button.css.ts.vanilla-VaFYcYGO.css';
-import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/styles/theme.css.ts.vanilla-0B4GnT52.css';
+import './../assets/src/button/Button.css.ts.vanilla-CAppQRyC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = createRuntimeFn({compoundVariants:[[{colorScheme:'secondary',variant:'outline'},'_1gqmi2dd']],defaultClassName:'_1gqmi2d3',defaultVariants:{},variantClassNames:{colorScheme:{danger:'_1gqmi2d4',primary:'_1gqmi2d5',secondary:'_1gqmi2d6'},size:{sm:'_1gqmi2d7',md:'_1gqmi2d8',lg:'_1gqmi2d9'},variant:{ghost:'_1gqmi2da',outline:'_1gqmi2db',solid:'_1gqmi2dc'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flexDirection:'row',gap:'xs',justifyContent:'center',overflow:'hidden',transition:'colors'},'_1gqmi2d3'],variants:{colorScheme:{danger:'_1gqmi2d4',primary:'_1gqmi2d5',secondary:'_1gqmi2d6'},size:{sm:{fontSize:'sm',h:'24',px:'10'},md:{fontSize:'md',h:'32',px:'12'},lg:{fontSize:'lg',h:'40',px:'16'}},variant:{ghost:'_1gqmi2d7',outline:'_1gqmi2d8',solid:'_1gqmi2d9'}},variantsCompounded:[{style:'_1gqmi2da',variants:{colorScheme:'secondary',variant:'outline'}}]});
 
 export { button };

package/dist/button/Button.js

@@ -1,9 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { Text } from '../text/Text.js';
 import { button } from './Button-css.js';
 
 const presets = {
@@ -22,7 +20,6 @@ const Button = forwardRef(
     disabled,
     isLoading,
     leftSection,
-    onClick,
     preset = "default",
     rightSection,
     size = "md",
@@ -30,36 +27,29 @@ const Button = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    children = asChild && isValidElement(children) ? cloneElement(
-      children,
-      void 0,
-      /* @__PURE__ */ jsx(Text, { as: "span", fontSize: "inherit", children: children.props.children })
-    ) : /* @__PURE__ */ jsx(Text, { as: "span", fontSize: "inherit", children });
     const presetProps = presets[preset];
     const finalColorScheme = colorScheme ?? presetProps.colorScheme;
     const finalVariant = variant ?? presetProps.variant;
-    const isDisabled = disabled || isLoading;
+    const isDisabled = Boolean(disabled || isLoading);
     return /* @__PURE__ */ jsx(
       Box,
       {
-        "aria-disabled": isDisabled,
         asChild: true,
-        className: clsx(
-          button({
+        "data-disabled": isDisabled,
+        ...button(
+          {
             colorScheme: finalColorScheme,
             size,
             variant: finalVariant
-          }),
+          },
           className
         ),
-        "data-disabled": isDisabled,
-        onClick: isDisabled ? void 0 : onClick,
         ...props,
-        children: /* @__PURE__ */ jsx(Comp, { ref, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: /* @__PURE__ */ jsxs(Comp, { disabled: isDisabled, ref, children: [
           leftSection,
           /* @__PURE__ */ jsx(Slottable, { children }),
           rightSection
-        ] }) })
+        ] })
       }
     );
   }

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

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/button-group/ButtonGroup.css.ts.vanilla-xsXT6MRu.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'_1sewcgl0',variants:{orientation:{horizontal:'_1sewcgl1',vertical:'_1sewcgl2'},spacing:{false:{},true:{}}},variantsCompounded:[{style:'_1sewcgl3',variants:{orientation:'horizontal',spacing:false}},{style:'_1sewcgl4',variants:{orientation:'vertical',spacing:false}}]});
+
+export { button };

package/dist/button-group/ButtonGroup.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { button } from './ButtonGroup-css.js';
+
+const ButtonGroup = forwardRef(
+  ({
+    children,
+    className,
+    colorScheme,
+    disabled,
+    gap = "0",
+    orientation = "horizontal",
+    preset,
+    size,
+    variant,
+    ...props
+  }, ref) => {
+    const mappedChildren = Children.map(children, (child) => {
+      if (isValidElement(child)) {
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            asChild: true,
+            ...button({ orientation, spacing: gap !== "0" }),
+            children: cloneElement(child, {
+              colorScheme: child.props.colorScheme || colorScheme,
+              disabled: child.props.disabled || disabled,
+              preset: child.props.preset || preset,
+              size: child.props.size || size,
+              variant: child.props.variant || variant
+            })
+          }
+        );
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        className,
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        gap,
+        ref,
+        ...props,
+        children: mappedChildren
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "@optiaxiom/react/ButtonGroup";
+
+export { ButtonGroup };

package/dist/code/Code-css.js

@@ -1,6 +1,7 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D6EvK_O8.css';
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/code/Code.css.ts.vanilla-Dz07Qp9h.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var base = 'go7emt0';
+var code = recipeRuntime({base:'go7emt0'});
 
-export { base };
+export { code };

package/dist/code/Code.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { base } from './Code-css.js';
+import { code } from './Code-css.js';
 
 const Code = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
@@ -13,10 +12,10 @@ const Code = forwardRef(
       {
         asChild: true,
         bg: "bg.neutral",
-        className: clsx(className, base),
         display: "inline-block",
         px: "4",
         rounded: "sm",
+        ...code({}, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { ref, children })
       }

package/dist/field/Field.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixLabel from '@radix-ui/react-label';
+import { useId } from '@reach/auto-id';
+import { forwardRef, cloneElement } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+const Field = forwardRef(
+  ({
+    children,
+    description,
+    disabled,
+    error,
+    id: idProp,
+    label,
+    required,
+    ...props
+  }, ref) => {
+    const id = useId(idProp);
+    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "2", maxW: "sm", ref, ...props, children: [
+      label && /* @__PURE__ */ jsx(Text, { asChild: true, children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: id, children: [
+        label,
+        required && /* @__PURE__ */ jsxs(Text, { "aria-hidden": "true", as: "span", color: "fg.error", children: [
+          " ",
+          "*"
+        ] })
+      ] }) }),
+      cloneElement(children, {
+        disabled,
+        error: !!error,
+        id,
+        required
+      }),
+      description && /* @__PURE__ */ jsx(Text, { as: "p", color: "fg.default", fontSize: "sm", children: description }),
+      error && /* @__PURE__ */ jsx(Text, { as: "p", color: "fg.error", fontSize: "sm", children: error })
+    ] });
+  }
+);
+Field.displayName = "@optiaxiom/react/Field";
+
+export { Field };