@optiaxiom/react 0.1.0-next.7 → 0.1.0-next.8

package/dist/assets/src/button/{Button.css.ts.vanilla-DJjt3whH.css → Button.css.ts.vanilla-BopXGX13.css}

@@ -5,6 +5,7 @@
     cursor: pointer;
     position: relative;
     text-decoration: none;
+    user-select: none;
   }
   ._1gqmi2d3:active:not([data-disabled="true"]) {
     box-shadow: var(--ax-boxShadow-inner);
@@ -12,7 +13,7 @@
   ._1gqmi2d3:focus-visible {
     outline-offset: 1px;
     outline-style: solid;
-    outline-width: 1px;
+    outline-width: 2px;
   }
   ._1gqmi2d3[data-disabled="true"] {
     cursor: not-allowed;
@@ -52,7 +53,7 @@
     --_1gqmi2d2: var(--ax-colors-bg-error-subtle);
   }
   ._1gqmi2d4:focus-visible {
-    outline-color: red.200;
+    outline-color: var(--ax-colors-red-200);
   }
   ._1gqmi2d5 {
     --_1gqmi2d0: var(--ax-colors-bg-brand-solid);

package/dist/button/Button-css.js

@@ -1,10 +1,10 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/styles/theme.css.ts.vanilla-BftJbjRk.css';
 import './../assets/src/button-group/ButtonGroup.css.ts.vanilla-4BGjgIuZ.css';
-import './../assets/src/button/Button.css.ts.vanilla-DJjt3whH.css';
+import './../assets/src/button/Button.css.ts.vanilla-BopXGX13.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var button = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flexDirection:'row',gap:'4',justifyContent:'center',overflow:'hidden',transition:'colors'},'_1gqmi2d3'],variants:{colorScheme:{danger:'_1gqmi2d4',primary:'_1gqmi2d5',secondary:'_1gqmi2d6'},disabled:{false:{},true:{}},iconOnly:{false:{},true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},variant:{ghost:'_1gqmi2d7',outline:'_1gqmi2d8',solid:'_1gqmi2d9'}},variantsCompounded:[{style:'_1gqmi2da',variants:{colorScheme:'secondary',variant:'outline'}},{style:{px:'2'},variants:{iconOnly:true,size:'sm'}},{style:{px:'4'},variants:{iconOnly:false,size:'sm'}},{style:{px:'1'},variants:{iconOnly:true,size:'sm',variant:'outline'}},{style:{px:'1'},variants:{disabled:true,iconOnly:true,size:'sm',variant:'solid'}},{style:{px:'3'},variants:{iconOnly:false,size:'sm',variant:'outline'}},{style:{px:'3'},variants:{disabled:true,iconOnly:false,size:'sm',variant:'solid'}},{style:{px:'6'},variants:{iconOnly:true,size:'md'}},{style:{px:'8'},variants:{iconOnly:false,size:'md'}},{style:{px:'5'},variants:{iconOnly:true,size:'md',variant:'outline'}},{style:{px:'5'},variants:{disabled:true,iconOnly:true,size:'md',variant:'solid'}},{style:{px:'7'},variants:{iconOnly:false,size:'md',variant:'outline'}},{style:{px:'7'},variants:{disabled:true,iconOnly:false,size:'md',variant:'solid'}},{style:{px:'10'},variants:{iconOnly:true,size:'lg'}},{style:{px:'12'},variants:{iconOnly:false,size:'lg'}},{style:{px:'9'},variants:{iconOnly:true,size:'lg',variant:'outline'}},{style:{px:'9'},variants:{disabled:true,iconOnly:true,size:'lg',variant:'solid'}},{style:{px:'11'},variants:{iconOnly:false,size:'lg',variant:'outline'}},{style:{px:'11'},variants:{disabled:true,iconOnly:false,size:'lg',variant:'solid'}}]});
-var section = recipeRuntime({variants:{position:{end:{},start:{}},size:{sm:{w:'20'},md:{w:'20'},lg:{w:'20'}}},variantsCompounded:[{style:{ml:'2'},variants:{position:'end',size:'md'}},{style:{mr:'2'},variants:{position:'start',size:'md'}},{style:{ml:'4'},variants:{position:'end',size:'lg'}},{style:{mr:'4'},variants:{position:'start',size:'lg'}}]});
+var icon = recipeRuntime({variants:{position:{end:{},start:{}},size:{sm:{w:'20'},md:{w:'20'},lg:{w:'20'}}},variantsCompounded:[{style:{ml:'2'},variants:{position:'end',size:'md'}},{style:{mr:'2'},variants:{position:'start',size:'md'}},{style:{ml:'4'},variants:{position:'end',size:'lg'}},{style:{mr:'4'},variants:{position:'start',size:'lg'}}]});
 
-export { button, section };
+export { button, icon };

package/dist/button/Button.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { button, section } from './Button-css.js';
+import { button, icon } from './Button-css.js';
 
 const appearances = {
   danger: { colorScheme: "danger", variant: "solid" },
@@ -19,7 +19,7 @@ const Button = forwardRef(
     className,
     colorScheme,
     disabled,
-    icon,
+    icon: icon$1,
     iconPosition = "start",
     isLoading,
     size = "md",
@@ -31,7 +31,7 @@ const Button = forwardRef(
     const finalColorScheme = colorScheme ?? presetProps.colorScheme;
     const finalVariant = variant ?? presetProps.variant;
     const isDisabled = Boolean(disabled || isLoading);
-    const isIconOnly = Boolean(!children && icon);
+    const isIconOnly = Boolean(!children && icon$1);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -53,23 +53,23 @@ const Button = forwardRef(
             Box,
             {
               asChild: true,
-              ...section({
+              ...icon({
                 position: "start",
-                size: icon && iconPosition === "start" ? size : void 0
+                size: icon$1 && iconPosition === "start" ? size : void 0
               }),
-              children: icon && iconPosition === "start" ? icon : /* @__PURE__ */ jsx("div", {})
+              children: icon$1 && iconPosition === "start" ? icon$1 : /* @__PURE__ */ jsx("div", {})
             }
           ),
-          /* @__PURE__ */ jsx(Slottable, { children: isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...section({ size }), children: icon }) : children }),
+          /* @__PURE__ */ jsx(Slottable, { children: isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : children }),
           !isIconOnly && /* @__PURE__ */ jsx(
             Box,
             {
               asChild: true,
-              ...section({
+              ...icon({
                 position: "end",
-                size: icon && iconPosition === "end" ? size : void 0
+                size: icon$1 && iconPosition === "end" ? size : void 0
               }),
-              children: icon && iconPosition === "end" ? icon : /* @__PURE__ */ jsx("div", {})
+              children: icon$1 && iconPosition === "end" ? icon$1 : /* @__PURE__ */ jsx("div", {})
             }
           )
         ] })

package/dist/index.d.ts

@@ -499,9 +499,9 @@ type WrapperVariants = RecipeVariants<typeof wrapper>;
 
 type InputProps = ExtendProps<ComponentPropsWithRef<"input">, ComponentPropsWithRef<typeof Box>, {
     disabled?: boolean;
+    endDecorator?: ReactNode;
     error?: boolean;
-    leftSection?: ReactNode;
-    rightSection?: ReactNode;
+    startDecorator?: ReactNode;
 } & WrapperVariants>;
 declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 

package/dist/input/Input.js

@@ -10,11 +10,11 @@ const Input = forwardRef(
   ({
     className,
     disabled,
+    endDecorator,
     error,
     id,
-    leftSection,
-    rightSection,
     size = "md",
+    startDecorator,
     variant = "default",
     ...props
   }, ref) => {
@@ -29,9 +29,9 @@ const Input = forwardRef(
         ...wrapper({ size, variant }, className),
         ...sprinkleProps,
         children: [
-          leftSection && /* @__PURE__ */ jsx(Flex, { gap: "0", mr: "8", children: leftSection }),
+          startDecorator && /* @__PURE__ */ jsx(Flex, { gap: "0", mr: "8", children: startDecorator }),
           /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ variant }), children: /* @__PURE__ */ jsx("input", { id, readOnly: disabled, ref, ...restProps }) }),
-          rightSection && /* @__PURE__ */ jsx(Flex, { gap: "0", ml: "8", children: rightSection })
+          endDecorator && /* @__PURE__ */ jsx(Flex, { gap: "0", ml: "8", children: endDecorator })
         ]
       }
     );

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.0-next.7",
+  "version": "0.1.0-next.8",
   "files": [
     "dist/**",
     "LICENSE"