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

package/dist/index.js

@@ -1,6 +1,9 @@
+export { AnimatePresence } from './animate-presence/AnimatePresence.js';
+export { usePresence } from './animate-presence/usePresence.js';
 export { Avatar } from './avatar/Avatar.js';
 export { Box } from './box/Box.js';
 export { Button } from './button/Button.js';
+export { ButtonGroup } from './button-group/ButtonGroup.js';
 export { Code } from './code/Code.js';
 export { Field } from './field/Field.js';
 export { Flex } from './flex/Flex.js';
@@ -20,3 +23,4 @@ export { theme } from './styles/theme-css.js';
 export { Text } from './text/Text.js';
 export { tokens, tokensDark } from './tokens/index.js';
 export { Tooltip } from './tooltip/Tooltip.js';
+export { Transition } from './transition/Transition.js';

package/dist/input/Input-css.js

@@ -1,9 +1,9 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/input/Input.css.ts.vanilla-CucST5E4.css';
-import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+import './../assets/src/styles/theme.css.ts.vanilla-0B4GnT52.css';
+import './../assets/src/input/Input.css.ts.vanilla-X0R-SsOp.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = createRuntimeFn({compoundVariants:[],defaultClassName:'_5j10wf6',defaultVariants:{},variantClassNames:{variant:{'default':'_5j10wf7',number:'_5j10wf8'}}});
-var wrapper = createRuntimeFn({compoundVariants:[],defaultClassName:'_5j10wf0',defaultVariants:{},variantClassNames:{size:{sm:'_5j10wf1',md:'_5j10wf2',lg:'_5j10wf3'},variant:{'default':'_5j10wf4',number:'_5j10wf5'}}});
+var input = recipeRuntime({base:[{bg:'transparent',w:'full'},'_5j10wf1'],variants:{variant:{'default':{textAlign:'start'},number:{textAlign:'end'}}}});
+var wrapper = recipeRuntime({base:[{alignItems:'center',border:'1',color:'fg.default',display:'flex',flexDirection:'row',rounded:'sm'},'_5j10wf0'],variants:{size:{sm:{fontSize:'sm',h:'24',p:'8'},md:{fontSize:'md',h:'32',p:'8'},lg:{fontSize:'lg',h:'40',px:'8',py:'4'}},variant:{'default':{},number:{}}}});
 
 export { input, wrapper };

package/dist/input/Input.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
@@ -25,13 +24,13 @@ const Input = forwardRef(
       {
         "aria-disabled": disabled,
         "aria-invalid": error,
-        className: clsx(wrapper({ size, variant }), className),
         "data-disabled": disabled,
         "data-invalid": error,
+        ...wrapper({ size, variant }, className),
         ...sprinkleProps,
         children: [
           leftSection && /* @__PURE__ */ jsx(Flex, { gap: "0", mr: "8", children: leftSection }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, className: input({ variant }), children: /* @__PURE__ */ jsx("input", { id, readOnly: disabled, ref, ...restProps }) }),
+          /* @__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 })
         ]
       }

package/dist/kbd/Kbd-css.js

@@ -1,7 +1,8 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/kbd/Kbd.css.ts.vanilla-DB-l95Nr.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var base = 'q5e32p0';
-var keys = 'q5e32p1';
+var kbd = recipeRuntime({base:'q5e32p0'});
+var keys = recipeRuntime({base:'q5e32p1'});
 
-export { base, keys };
+export { kbd, keys };

package/dist/kbd/Kbd.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Code } from '../code/Code.js';
-import { base, keys } from './Kbd-css.js';
+import { kbd, keys } from './Kbd-css.js';
 
 const mapKeyToCode = {
   command: "\u2318",
@@ -27,15 +26,15 @@ const Kbd = forwardRef(
         alignItems: "center",
         asChild: true,
         border: "1",
-        className: clsx(base, className),
         display: "inline-flex",
         flexDirection: "row",
         fontWeight: "600",
         gap: "4",
         whiteSpace: "nowrap",
+        ...kbd({}, className),
         ...props,
         children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
-          keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { className: keys, title: key, children: mapKeyToCode[key] }, key)),
+          keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { title: key, ...keys(), children: mapKeyToCode[key] }, key)),
           children
         ] })
       }

package/dist/progress/Progress.js

@@ -3,22 +3,24 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
-const Progress = forwardRef((props, ref) => {
-  const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
-  const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
-  return /* @__PURE__ */ jsx(Box, { asChild: true, bg: "border.disabled", h: "6", rounded: "lg", ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      bg: "bg.brand.solid",
-      h: "full",
-      rounded: "lg",
-      style: { width: `${widthPercentage}%` },
-      transition: "all",
-      children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
-    }
-  ) }) });
-});
+const Progress = forwardRef(
+  (props, ref) => {
+    const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
+    const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, bg: "border.disabled", h: "6", rounded: "lg", ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        bg: "bg.brand.solid",
+        h: "full",
+        rounded: "lg",
+        style: { width: `${widthPercentage}%` },
+        transition: "all",
+        children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
+      }
+    ) }) });
+  }
+);
 const DEFAULT_MAX = 100;
 Progress.displayName = "@optiaxiom/react/Progress";
 

package/dist/separator/Separator-css.js

@@ -1,9 +1,9 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Cb0QJvUK.css';
-import './../assets/src/separator/Separator.css.ts.vanilla-DYzKo87M.css';
+import './../assets/src/separator/Separator.css.ts.vanilla-C_EYtori.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';
 
-var base = 'tlk8150';
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'tlk8151',md:'tlk8152',lg:'tlk8153',base:'tlk8154'},defaultClass:'tlk8154'},vertical:{conditions:{sm:'tlk8155',md:'tlk8156',lg:'tlk8157',base:'tlk8158'},defaultClass:'tlk8158'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var base = recipeRuntime({base:{bg:'border.default'}});
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'tlk8150',md:'tlk8151',lg:'tlk8152',base:'tlk8153'},defaultClass:'tlk8153'},vertical:{conditions:{sm:'tlk8154',md:'tlk8155',lg:'tlk8156',base:'tlk8157'},defaultClass:'tlk8157'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/separator/Separator.js

@@ -11,12 +11,8 @@ const Separator = forwardRef(
       Box,
       {
         asChild: true,
-        className: clsx(
-          base,
-          separator({ orientation }),
-          className
-        ),
         ref,
+        ...base({}, clsx(separator({ orientation }), className)),
         ...props,
         children: /* @__PURE__ */ jsx(RadixSeparator.Root, {})
       }

package/dist/skeleton/Skeleton-css.js

@@ -1,6 +1,7 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
 import './../assets/src/skeleton/Skeleton.css.ts.vanilla-Cl5oEbvn.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var base = '_15dwmwy0';
+var skeleton = recipeRuntime({base:'_15dwmwy0'});
 
-export { base };
+export { skeleton };

package/dist/skeleton/Skeleton.js

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { base } from './Skeleton-css.js';
+import { skeleton } from './Skeleton-css.js';
 
 const Skeleton = forwardRef(
   ({ children, circle, className, h, rounded, w, ...props }, ref) => {
@@ -12,7 +11,7 @@ const Skeleton = forwardRef(
         animation: "pulse",
         asChild: true,
         bg: "bg.neutral",
-        className: clsx(className, base),
+        ...skeleton({}, className),
         color: "surface",
         display: "block",
         h,