@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/radio/Radio.js

@@ -1,66 +1,54 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { ToggleInput } from '../toggle-input/ToggleInput.js';
-import { ToggleInputContent } from '../toggle-input/ToggleInputContent.js';
-import { ToggleInputControl } from '../toggle-input/ToggleInputControl.js';
-import { ToggleInputDescription } from '../toggle-input/ToggleInputDescription.js';
-import { ToggleInputHiddenInput } from '../toggle-input/ToggleInputHiddenInput.js';
-import { ToggleInputLabel } from '../toggle-input/ToggleInputLabel.js';
-import { input, indicator, control, radio } from './Radio-css.js';
-import { useRadioGroupContext } from './RadioGroupContext.js';
-
-const Radio = forwardRef(
-  ({
-    children,
-    className,
-    description,
-    disabled,
-    name,
-    onBlur,
-    onChange,
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    const groupContext = useRadioGroupContext("@optiaxiom/react/Radio");
-    if (groupContext) {
-      if ("checked" in props) {
-        throw new Error(
-          `Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``
-        );
-      }
-      if (props.value === void 0) {
-        throw new Error(
-          `Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``
-        );
-      }
-    }
-    return /* @__PURE__ */ jsxs(ToggleInput, { ...radio({}, className), ...boxProps, children: [
-      /* @__PURE__ */ jsx(
-        ToggleInputHiddenInput,
-        {
-          checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
-          defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
-          disabled: groupContext?.disabled ?? disabled,
-          name: groupContext?.name ?? name,
-          onBlur: groupContext?.onBlur ?? onBlur,
-          onChange: groupContext?.onChange ?? onChange,
-          ref,
-          type: "radio",
-          ...input(),
-          ...restProps
-        }
-      ),
-      /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator() }) }),
-      (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
-        children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
-        description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
-      ] })
-    ] });
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { ToggleInput } from "../toggle-input/ToggleInput.js";
+import { ToggleInputContent } from "../toggle-input/ToggleInputContent.js";
+import { ToggleInputControl } from "../toggle-input/ToggleInputControl.js";
+import { ToggleInputDescription } from "../toggle-input/ToggleInputDescription.js";
+import { ToggleInputHiddenInput } from "../toggle-input/ToggleInputHiddenInput.js";
+import { ToggleInputLabel } from "../toggle-input/ToggleInputLabel.js";
+import { control, indicator, input, radio } from "./Radio-css.js";
+import { useRadioGroupContext } from "./RadioGroupContext.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio/Radio.tsx
+/**
+* Basic control to allow selecting only one item from a set.
+*
+* @since 0.1.0
+* @group RadioGroup
+*/
+const Radio = forwardRef(({ children, className, description, disabled, name, onBlur, onChange, ...props }, ref) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	const groupContext = useRadioGroupContext("@optiaxiom/react/Radio");
+	if (groupContext) {
+		if ("checked" in props) throw new Error(`Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``);
+		if (props.value === void 0) throw new Error(`Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``);
+	}
+	return /* @__PURE__ */ jsxs(ToggleInput, {
+		...radio({}, className),
+		...boxProps,
+		children: [
+			/* @__PURE__ */ jsx(ToggleInputHiddenInput, {
+				checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
+				defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
+				disabled: groupContext?.disabled ?? disabled,
+				name: groupContext?.name ?? name,
+				onBlur: groupContext?.onBlur ?? onBlur,
+				onChange: groupContext?.onChange ?? onChange,
+				ref,
+				type: "radio",
+				...input(),
+				...restProps
+			}),
+			/* @__PURE__ */ jsx(ToggleInputControl, {
+				...control({ shift: Boolean(children) }),
+				children: /* @__PURE__ */ jsx(Box, { ...indicator() })
+			}),
+			(children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { children: [children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }), description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })] })
+		]
+	});
+});
 Radio.displayName = "@optiaxiom/react/Radio";
-
+//#endregion
 export { Radio };

package/dist/esm/packages/react/src/radio/RadioGroup.js

@@ -1,69 +1,50 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { RadioGroupProvider } from './RadioGroupContext.js';
-
+import { mapResponsiveValue } from "../sprinkles/sprinkles.js";
+import { useSurface } from "../surface/useSurface.js";
+import { Group } from "../group/Group.js";
+import { RadioGroupProvider } from "./RadioGroupContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/radio/RadioGroup.tsx
 const mapGapToOrientation = {
-  column: "12",
-  "column-reverse": "12",
-  row: "16",
-  "row-reverse": "16"
+	column: "12",
+	"column-reverse": "12",
+	row: "16",
+	"row-reverse": "16"
 };
-const RadioGroup = forwardRef(
-  ({
-    children,
-    defaultValue,
-    disabled,
-    flexDirection = "column",
-    name,
-    onBlur,
-    onChange,
-    onValueChange,
-    value,
-    ...props
-  }, ref) => {
-    const surface = useSurface("property");
-    const { track } = surface ?? {};
-    return /* @__PURE__ */ jsx(
-      RadioGroupProvider,
-      {
-        defaultValue,
-        disabled,
-        name,
-        onBlur,
-        onChange: (event) => {
-          const newValue = event.target.value;
-          onChange?.(event);
-          onValueChange?.(newValue);
-          track?.({
-            name: "changed",
-            value: newValue
-          });
-        },
-        value,
-        children: /* @__PURE__ */ jsx(
-          Group,
-          {
-            flexDirection,
-            fontSize: "md",
-            gap: mapResponsiveValue(
-              flexDirection,
-              (value2) => mapGapToOrientation[value2]
-            ),
-            ref,
-            ...props,
-            children
-          }
-        )
-      }
-    );
-  }
-);
+/**
+* Basic control to allow selecting only one item from a set.
+*
+* @category form
+* @since 0.1.0
+*/
+const RadioGroup = forwardRef(({ children, defaultValue, disabled, flexDirection = "column", name, onBlur, onChange, onValueChange, value, ...props }, ref) => {
+	const { track } = useSurface("property") ?? {};
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		defaultValue,
+		disabled,
+		name,
+		onBlur,
+		onChange: (event) => {
+			const newValue = event.target.value;
+			onChange?.(event);
+			onValueChange?.(newValue);
+			track?.({
+				name: "changed",
+				value: newValue
+			});
+		},
+		value,
+		children: /* @__PURE__ */ jsx(Group, {
+			flexDirection,
+			fontSize: "md",
+			gap: mapResponsiveValue(flexDirection, (value) => mapGapToOrientation[value]),
+			ref,
+			...props,
+			children
+		})
+	});
+});
 RadioGroup.displayName = "@optiaxiom/react/RadioGroup";
-
+//#endregion
 export { RadioGroup };

package/dist/esm/packages/react/src/radio/RadioGroupContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/radio/RadioGroupContext.ts
 const [RadioGroupProvider, useRadioGroupContext] = createContext("@optiaxiom/react/RadioGroup", null);
-
+//#endregion
 export { RadioGroupProvider, useRadioGroupContext };

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,14 +1,54 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-Bffa-774.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var control = recipeRuntime({base:[{bg:'transparent'},'_1if9z7h']});
-var fillValue = 'var(--_8xfz7p)';
-var mark = recipeRuntime({base:[{transition:'colors'},'_1qy3ng7'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--_6ku8zi)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'rqoczf']});
-var root = recipeRuntime({base:['_1n6u2vu',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_1w2aj1j'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'op7u9t']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'rdrt9d']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/range/Range.css.ts.vanilla-B37iskNN.css";
+//#region src/range/Range.css.ts
+var control = recipeRuntime({ base: [{ bg: "transparent" }, "lj07d7"] });
+var fillValue = "var(--_1eo2cc1)";
+var mark = recipeRuntime({
+	base: [{ transition: "colors" }, "nbtfvf"],
+	variants: { active: {
+		false: { color: "fg.secondary" },
+		true: {}
+	} }
+});
+var markValue = "var(--_1t88mzx)";
+var range = recipeRuntime({ base: [{
+	h: "full",
+	rounded: "inherit"
+}, "_2stc86"] });
+var root = recipeRuntime({
+	base: [
+		"_1oehj7r",
+		{
+			alignItems: "center",
+			color: "fg.default",
+			display: "flex",
+			fontSize: "md",
+			w: "full"
+		},
+		"_1rux8hu"
+	],
+	variants: {
+		marks: {
+			false: {},
+			true: { mb: "24" }
+		},
+		size: {
+			md: { h: "md" },
+			lg: { h: "lg" }
+		}
+	}
+});
+var thumb = recipeRuntime({ base: [{
+	border: "1",
+	rounded: "full",
+	shadow: "sm",
+	size: "xs"
+}, "la7ww5"] });
+var track = recipeRuntime({ base: [{
+	display: "flex",
+	flex: "1",
+	rounded: "full"
+}, "_1aswgqj"] });
+//#endregion
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/range/Range.js

@@ -1,157 +1,108 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import clsx from 'clsx';
-import { forwardRef, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { useFieldContext } from '../field/FieldContext.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-import { range, thumb, control, track, fillValue, mark, markValue, root } from './Range-css.js';
-import { useTooltipState } from './useTooltipState.js';
-
-const Range = forwardRef(
-  ({
-    className,
-    defaultValue = 0,
-    disabled,
-    getLabel = (value) => value,
-    marks,
-    max = 100,
-    min = 0,
-    onChange,
-    onValueChange,
-    showTooltip = false,
-    size = "md",
-    step = 1,
-    value: valueProp,
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    const { descriptionId, error, errorId, inputId } = useFieldContext(
-      "@optiaxiom/react/Range"
-    );
-    const [value, setValue] = useControllableState({
-      caller: "@optiaxiom/react/Range",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const fillValue$1 = `${(value - min) / (max - min)}`;
-    const [tooltipOpen, setTooltipOpen] = useTooltipState();
-    const isPointerInsideRef = useRef(false);
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        "data-disabled": disabled ? "" : void 0,
-        ...root({ marks: !!marks, size }, className),
-        ...boxProps,
-        children: [
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              style: assignInlineVars({
-                [fillValue]: fillValue$1
-              }),
-              ...track(),
-              children: [
-                /* @__PURE__ */ jsx(Box, { ...range() }),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    content: getLabel(value),
-                    disabled: disabled || !showTooltip,
-                    disableHoverableContent: true,
-                    open: tooltipOpen,
-                    children: /* @__PURE__ */ jsx(Box, { ...thumb() })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
-                    "aria-disabled": disabled,
-                    "aria-invalid": error ? true : void 0,
-                    asChild: true,
-                    id: inputId,
-                    ref,
-                    ...control(),
-                    children: /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        disabled,
-                        max,
-                        min,
-                        onBlur: () => {
-                          if (isPointerInsideRef.current) {
-                            return;
-                          }
-                          setTooltipOpen(false);
-                        },
-                        onChange: (event) => {
-                          setValue(Number(event.currentTarget.value));
-                          onChange?.(event);
-                        },
-                        onFocus: (event) => {
-                          if (event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(true);
-                          }
-                        },
-                        onKeyDown: () => {
-                          setTooltipOpen(true);
-                        },
-                        onPointerLeave: (event) => {
-                          isPointerInsideRef.current = false;
-                          if (!event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(false);
-                          }
-                        },
-                        onPointerMove: () => {
-                          isPointerInsideRef.current = true;
-                          setTooltipOpen(true, true);
-                        },
-                        step,
-                        type: "range",
-                        value,
-                        ...restProps
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          marks?.map(
-            (mark) => typeof mark === "number" ? {
-              label: getLabel(mark),
-              value: mark
-            } : mark
-          ).map((mark$1) => /* @__PURE__ */ jsx(
-            Box,
-            {
-              onClick: () => {
-                if (!disabled) {
-                  setValue(mark$1.value);
-                }
-              },
-              style: assignInlineVars({
-                [markValue]: `${(mark$1.value - min) / (max - min)}`
-              }),
-              ...mark({ active: value >= mark$1.value }),
-              children: mark$1.label
-            },
-            mark$1.value
-          ))
-        ]
-      }
-    );
-  }
-);
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { control, fillValue, mark, markValue, range, root, thumb, track } from "./Range-css.js";
+import { useTooltipState } from "./useTooltipState.js";
+import { forwardRef, useRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+//#region src/range/Range.tsx
+/**
+* Allow users to select a numeric value within a range.
+*
+* @category form
+* @since 1.7.12
+* @experimental
+*/
+const Range = forwardRef(({ className, defaultValue = 0, disabled, getLabel = (value) => value, marks, max = 100, min = 0, onChange, onValueChange, showTooltip = false, size = "md", step = 1, value: valueProp, ...props }, ref) => {
+	const { boxProps, restProps } = extractBoxProps(props);
+	const { descriptionId, error, errorId, inputId } = useFieldContext("@optiaxiom/react/Range");
+	const [value, setValue] = useControllableState({
+		caller: "@optiaxiom/react/Range",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const fillValue$1 = `${(value - min) / (max - min)}`;
+	const [tooltipOpen, setTooltipOpen] = useTooltipState();
+	const isPointerInsideRef = useRef(false);
+	return /* @__PURE__ */ jsxs(Box, {
+		"data-disabled": disabled ? "" : void 0,
+		...root({
+			marks: !!marks,
+			size
+		}, className),
+		...boxProps,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			style: assignInlineVars({ [fillValue]: fillValue$1 }),
+			...track(),
+			children: [
+				/* @__PURE__ */ jsx(Box, { ...range() }),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: getLabel(value),
+					disabled: disabled || !showTooltip,
+					disableHoverableContent: true,
+					open: tooltipOpen,
+					children: /* @__PURE__ */ jsx(Box, { ...thumb() })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					"aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+					"aria-disabled": disabled,
+					"aria-invalid": error ? true : void 0,
+					asChild: true,
+					id: inputId,
+					ref,
+					...control(),
+					children: /* @__PURE__ */ jsx("input", {
+						disabled,
+						max,
+						min,
+						onBlur: () => {
+							if (isPointerInsideRef.current) return;
+							setTooltipOpen(false);
+						},
+						onChange: (event) => {
+							setValue(Number(event.currentTarget.value));
+							onChange?.(event);
+						},
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible")) setTooltipOpen(true);
+						},
+						onKeyDown: () => {
+							setTooltipOpen(true);
+						},
+						onPointerLeave: (event) => {
+							isPointerInsideRef.current = false;
+							if (!event.currentTarget.matches(":focus-visible")) setTooltipOpen(false);
+						},
+						onPointerMove: () => {
+							isPointerInsideRef.current = true;
+							setTooltipOpen(true, true);
+						},
+						step,
+						type: "range",
+						value,
+						...restProps
+					})
+				})
+			]
+		}), marks?.map((mark) => typeof mark === "number" ? {
+			label: getLabel(mark),
+			value: mark
+		} : mark).map((mark$1) => /* @__PURE__ */ jsx(Box, {
+			onClick: () => {
+				if (!disabled) setValue(mark$1.value);
+			},
+			style: assignInlineVars({ [markValue]: `${(mark$1.value - min) / (max - min)}` }),
+			...mark({ active: value >= mark$1.value }),
+			children: mark$1.label
+		}, mark$1.value))]
+	});
+});
 Range.displayName = "@optiaxiom/react/Range";
-
+//#endregion
 export { Range };

package/dist/esm/packages/react/src/range/useTooltipState.js

@@ -1,23 +1,20 @@
 "use client";
-import { useState, useRef } from 'react';
-
+import { useRef, useState } from "react";
+//#region src/range/useTooltipState.tsx
 const useTooltipState = () => {
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-  const timerRef = useRef();
-  return [
-    tooltipOpen,
-    (flag, delayed = false) => {
-      if (delayed) {
-        window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => {
-          setTooltipOpen(flag);
-        }, 50);
-      } else {
-        window.clearTimeout(timerRef.current);
-        setTooltipOpen(flag);
-      }
-    }
-  ];
+	const [tooltipOpen, setTooltipOpen] = useState(false);
+	const timerRef = useRef();
+	return [tooltipOpen, (flag, delayed = false) => {
+		if (delayed) {
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				setTooltipOpen(flag);
+			}, 50);
+		} else {
+			window.clearTimeout(timerRef.current);
+			setTooltipOpen(flag);
+		}
+	}];
 };
-
+//#endregion
 export { useTooltipState };

package/dist/esm/packages/react/src/resizable/Resizable.js

@@ -1,10 +1,13 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/resizable/Resizable.tsx
 const Resizable = ({ ...props }) => {
-  return /* @__PURE__ */ jsx(ResizablePrimitive.PanelGroup, { direction: "horizontal", ...props });
+	return /* @__PURE__ */ jsx(ResizablePrimitive.PanelGroup, {
+		direction: "horizontal",
+		...props
+	});
 };
 Resizable.displayName = "@optiaxiom/react/Resizable";
-
+//#endregion
 export { Resizable };