@optiaxiom/react 0.4.2 → 0.5.1

package/dist/src/textarea/Textarea.js

@@ -1,13 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
 import { InputBase } from '../input-base/InputBase.js';
 import { TextareaAutosize } from '../textarea-autosize/TextareaAutosize.js';
 
 const Textarea = forwardRef(
   ({ asChild, children, ...props }, ref) => {
     const Comp = asChild ? Slot : TextareaAutosize;
-    return /* @__PURE__ */ jsx(InputBase, { flexDirection: "column", size: "lg", ...props, children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) });
+    return /* @__PURE__ */ jsx(InputBase, { flexDirection: "column", size: "lg", ...props, children: /* @__PURE__ */ jsx(Box, { asChild: true, p: "xs", children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) }) });
   }
 );
 Textarea.displayName = "@optiaxiom/react/Textarea";

package/dist/src/textarea-autosize/TextareaAutosize-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-DbiBLo-Y.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/textarea-autosize/TextareaAutosize.css.ts.vanilla-DIlxSuuv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var shadow = recipeRuntime({base:['_1uylavw','gw274j']});
-var textarea = recipeRuntime({base:['_1uylavw','_175zmr9']});
-var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_1b5o3hf','_1ywv402'],'2':['_1b5o3hf','_1ceblze'],'3':['_1b5o3hf','ch6pvm'],'4':['_1b5o3hf','_1nepadm'],'5':['_1b5o3hf','_1ys4fgl']},resize:{auto:{},none:{},vertical:'_1182y5j'}}});
+var shadow = recipeRuntime({base:['_10lolza','_1vkcyez']});
+var textarea = recipeRuntime({base:['_10lolza','naje1e']});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_1v5h9iq','r8cwhx'],'2':['_1v5h9iq','x0wmq6'],'3':['_1v5h9iq','_1d93myq'],'4':['_1v5h9iq','_27gqqt'],'5':['_1v5h9iq','zl6hu']},resize:{auto:{},none:{},vertical:'_1qnv0tp'}}});
 
 export { shadow, textarea, wrapper };

package/dist/src/textarea-autosize/TextareaAutosize.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useState } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
@@ -19,9 +20,10 @@ const TextareaAutosize = forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot : "textarea";
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    const [value, setValue] = useState(
-      props.value === void 0 ? props.defaultValue : props.value
-    );
+    const [value, setValue] = useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
     return /* @__PURE__ */ jsxs(Box, { ...wrapper({ maxRows, resize }), children: [
       /* @__PURE__ */ jsx(Box, { asChild: true, ...textarea({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(
         Comp,

package/dist/src/toast/Toast-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-B7r1EWKp.css';
-import './../../assets/src/toast/Toast.css.ts.vanilla-CZhgjlMn.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-hbD7r5bf.css';
+import './../../assets/src/toast/Toast.css.ts.vanilla-B8N3Ss56.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1zzzh6']});
-var root = recipeRuntime({base:[{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'xs',maxW:'full',p:'sm',pl:'md',rounded:'md',shadow:'md',w:['full','max']},'_1i54r9b'],variants:{colorScheme:{danger:'_55yyau',information:'_1au9ti',neutral:'_136yg6h',success:'_61wzpt',warning:'_3k5eue'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'oekzvr']});
+var root = recipeRuntime({base:[{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',gap:'xs',maxW:'full',p:'sm',pl:'md',rounded:'md',shadow:'md',w:['full','max']},'_1tjkcpp'],variants:{intent:{danger:'zyqlwk',information:'ppujcu',neutral:'wps5ac',success:'_1qkovkk',warning:'rj1naq'}}});
 
 export { icon, root };

package/dist/src/toast/Toast.js

@@ -15,7 +15,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { useToastContext } from '../toast-context/ToastContext.js';
 import { root, icon } from './Toast-css.js';
 
-const iconMap = {
+const mapIntentToIcon = {
   danger: IconCircleExclamationFilled,
   information: IconCircleInfoFilled,
   neutral: IconCircleInfoFilled,
@@ -23,10 +23,10 @@ const iconMap = {
   warning: IconTriangleExclamationFilled
 };
 const Toast = forwardRef(
-  ({ children, colorScheme = "neutral", onOpenChange, open, ...props }, ref) => {
+  ({ children, intent = "neutral", onOpenChange, open, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const context = useToastContext("Toast");
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...root({ colorScheme }), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...root({ intent }), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
       RadixToast.Root,
       {
         forceMount: !!context,
@@ -34,11 +34,11 @@ const Toast = forwardRef(
           onOpenChange?.(open2);
           context.onOpenChange(open2);
         },
-        open: context.open || open,
+        open: context.open ?? open,
         ref,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: createElement(mapIntentToIcon[intent]) }),
           children,
           /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(
             Button,

package/dist/src/toast-provider/ToastProvider-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-B7r1EWKp.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/toast-provider/ToastProvider.css.ts.vanilla-hbD7r5bf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_19itiih'],variants:{position:{bottom:'_78jb9u','bottom-left':'v5oq6j','bottom-right':'_1enxa15',top:'_1y3bphn','top-left':'rqhmfs','top-right':'_144q2qf'}}});
+var viewport = recipeRuntime({base:[{gap:'md',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'g9u92u'],variants:{position:{bottom:'_1qak7gb','bottom-left':'_1yfrfrx','bottom-right':'_1yl3kij',top:'_1p2ce1w','top-left':'_6e8qmw','top-right':'_1q43ncg'}}});
 
 export { viewport };

package/dist/src/toast-provider/ToastProvider.js

@@ -60,7 +60,7 @@ const ToastProvider = forwardRef(
               onOpenChange: () => toasterProp.remove(id),
               open,
               // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/microsoft/TypeScript/issues/53178
-              children: isValidElement(toast) ? toast : /* @__PURE__ */ jsxs(Toast, { colorScheme: toast.type, children: [
+              children: isValidElement(toast) ? toast : /* @__PURE__ */ jsxs(Toast, { intent: toast.type, children: [
                 /* @__PURE__ */ jsx(ToastTitle, { children: toast.title }),
                 toast.action && /* @__PURE__ */ jsx(
                   ToastAction,

package/dist/src/toggle-input/ToggleInput-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B5zW77Q6.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-llCUpF4m.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_1exljtq',{alignItems:'start',flexDirection:'row',gap:'xs'},'sb77pn']});
+var toggleInput = recipeRuntime({base:['_1jslc44',{alignItems:'start',flexDirection:'row',gap:'xs'},'v6ov5a']});
 
 export { toggleInput };

package/dist/src/toggle-input-control/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B5zW77Q6.css';
-import './../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-B8-6yg8T.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-llCUpF4m.css';
+import './../../assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DYEoiGw8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['qbnnni']});
+var control = recipeRuntime({base:['_1puwvfa']});
 
 export { control };

package/dist/src/toggle-input-hidden-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-COI_-mI5.css';
 
-var className = '_11kgvng';
+var className = '_1e5clit';
 
 export { className };

package/dist/src/tooltip-content/TooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',px:'12',py:'8',rounded:'md',z:'tooltip'}]});

package/dist/src/tooltip-trigger/TooltipTrigger.js

@@ -3,16 +3,13 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
 import { useTooltipContext } from '../tooltip-context/TooltipContext.js';
 
 const TooltipTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
   const { triggerRef } = useTooltipContext("TooltipTrigger");
   const ref = useComposedRefs(triggerRef, outerRef);
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+  return /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "data-state", children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) }) });
 });
 TooltipTrigger.displayName = "@optiaxiom/react/TooltipTrigger";
 

package/dist/src/transition/Transition-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/transition/Transition.css.ts.vanilla-CVuwRXvD.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D3upUtFn.css';
+import './../../assets/src/transition/Transition.css.ts.vanilla-CAw7P9Kw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'ybm12d',variants:{duration:{sm:'_1kbqvhb',md:'_1jm6kdr',lg:'rv4u2w'},type:{fade:'_1or10xi',pop:'_1e29xe1'}}});
+var transition = recipeRuntime({base:'_51hx9y',variants:{duration:{sm:'_1madyof',md:'_1usim5b',lg:'jeaczq'},type:{fade:'_1yvmf1p',pop:'_1vlc7p4'}}});
 var transitionDuration = {sm:150,md:250,lg:400};
 
 export { transition, transitionDuration };

package/dist/src/use-responsive-matches/useResponsiveMatches.js

@@ -0,0 +1,22 @@
+import { useMediaQuery } from '@mantine/hooks';
+import { conditions } from '../utils/conditions.js';
+import 'react/jsx-runtime';
+import 'react';
+
+const list = ["lg", "md", "sm"];
+const useResponsiveMatches = (config) => {
+  const matches = {
+    base: true,
+    sm: useMediaQuery(conditions.conditions.sm["@media"]),
+    md: useMediaQuery(conditions.conditions.md["@media"]),
+    lg: useMediaQuery(conditions.conditions.lg["@media"])
+  };
+  for (const name of list) {
+    if (config[name] && matches[name]) {
+      return config[name];
+    }
+  }
+  return config.base;
+};
+
+export { useResponsiveMatches };

package/dist/src/utils/conditions.js

@@ -1,7 +1,7 @@
 import { tokens } from '@optiaxiom/globals';
 import { mapValues } from './mapValues.js';
 
-({
+const conditions = {
   conditions: {
     ...mapValues(tokens.screens, (width) => ({
       "@media": `screen and (min-width: ${width})`
@@ -10,4 +10,6 @@ import { mapValues } from './mapValues.js';
   },
   defaultCondition: "base",
   responsiveArray: ["base", "sm", "md"]
-});
+};
+
+export { conditions };