@optiaxiom/react 1.9.36 → 1.9.38

package/dist/esm/packages/react/src/portal/Portal.js

@@ -1,15 +1,18 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixPortal from '@radix-ui/react-portal';
-import { forwardRef } from 'react';
-import { usePortalContext } from './PortalContext.js';
-
-const Portal = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { container } = usePortalContext("@optiaxiom/react/Portal");
-    return /* @__PURE__ */ jsx(RadixPortal.Root, { container, ref, ...props, children });
-  }
-);
+import { usePortalContext } from "./PortalContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixPortal from "@radix-ui/react-portal";
+//#region src/portal/Portal.tsx
+const Portal = forwardRef(({ children, ...props }, ref) => {
+	const { container } = usePortalContext("@optiaxiom/react/Portal");
+	return /* @__PURE__ */ jsx(RadixPortal.Root, {
+		container,
+		ref,
+		...props,
+		children
+	});
+});
 Portal.displayName = "@optiaxiom/react/Portal";
-
+//#endregion
 export { Portal };

package/dist/esm/packages/react/src/portal/PortalContext.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/portal/PortalContext.ts
 const [PortalProvider, usePortalContext] = createContext("@optiaxiom/react/Portal", { container: void 0 });
-
+//#endregion
 export { PortalProvider, usePortalContext };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,24 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-CVC0Y-WW.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var indicator$1 = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1t1mad1',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1y87bzi']});
-
-export { indicator$1 as indicator, progress };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/progress/Progress.css.ts.vanilla-Dn33S0hk.css";
+//#region src/progress/Progress.css.ts
+var indicator = recipeRuntime({
+	base: [{
+		h: "full",
+		rounded: "full",
+		transition: "all"
+	}],
+	variants: { intent: {
+		danger: { bg: "bg.error" },
+		opal: "oyieq3",
+		primary: { bg: "bg.accent" },
+		success: { bg: "bg.success" }
+	} }
+});
+var progress = recipeRuntime({ base: [{
+	bg: "bg.tertiary",
+	overflow: "hidden",
+	rounded: "full"
+}, "_6pkxps"] });
+//#endregion
+export { indicator, progress };

package/dist/esm/packages/react/src/progress/Progress.js

@@ -1,33 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { indicator, progress } from './Progress-css.js';
-
-const Progress = forwardRef(
-  ({ className, intent = "primary", ...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, ...progress({}, className), ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        style: {
-          backgroundSize: `${100 * 100 / widthPercentage}%`,
-          width: `${widthPercentage}%`
-        },
-        ...indicator({
-          intent
-        }),
-        children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
-      }
-    ) }) });
-  }
-);
+import { Box } from "../box/Box.js";
+import { indicator, progress } from "./Progress-css.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+//#region src/progress/Progress.tsx
+/**
+* Display feedback on status of task or length of a process.
+*
+* @since 0.1.0
+* @category feedback
+* @category data-display
+*/
+const Progress = forwardRef(({ className, intent = "primary", ...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,
+		...progress({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+			ref,
+			children: isValidValue && /* @__PURE__ */ jsx(Box, {
+				asChild: true,
+				style: {
+					backgroundSize: `${1e4 / widthPercentage}%`,
+					width: `${widthPercentage}%`
+				},
+				...indicator({ intent }),
+				children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
+			})
+		})
+	});
+});
 const DEFAULT_MAX = 100;
 Progress.displayName = "@optiaxiom/react/Progress";
-
+//#endregion
 export { Progress };

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

@@ -1,12 +1,28 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CZ4LjAw2.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DPDtpEdO.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CiM5gZJz.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-BoDdnZjn.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_12xil5c'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'j9mfwn']});
-var input$1 = recipeRuntime({base:'_3bk7bk'});
-var radio = recipeRuntime({base:'_1lwxycv'});
-
-export { control, indicator, input$1 as input, radio };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CdFjsC3-.css";
+import "./../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Bo7OdqI0.css";
+import "./../../../../assets/src/radio/Radio.css.ts.vanilla-CkFX2LnT.css";
+//#region src/radio/Radio.css.ts
+var control = recipeRuntime({
+	base: [{
+		bg: "bg.default",
+		border: "1",
+		p: "2",
+		rounded: "full",
+		size: "2xs"
+	}, "erp76r"],
+	variants: { shift: {
+		false: {},
+		true: { mt: "2" }
+	} }
+});
+var indicator = recipeRuntime({ base: [{
+	rounded: "inherit",
+	size: "full",
+	transition: "transform"
+}, "_1083u5x"] });
+var input = recipeRuntime({ base: "_5a2qkp" });
+var radio = recipeRuntime({ base: "t3c58h" });
+//#endregion
+export { control, indicator, input, radio };

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-CZ4LjAw2.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-DYmCxcU2.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var control = recipeRuntime({base:[{bg:'transparent'},'_1k4fzcm']});
-var fillValue = 'var(--pat3dl)';
-var mark = recipeRuntime({base:[{transition:'colors'},'elzzpz'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--_15olmih)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_10qdsoa']});
-var root = recipeRuntime({base:['_1bn5i4',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_1dogj7o'],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'},'rw8hk5']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_1kvigia']});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+import "./../../../../assets/src/range/Range.css.ts.vanilla-RRJfcxzG.css";
+//#region src/range/Range.css.ts
+var control = recipeRuntime({ base: [{ bg: "transparent" }, "k8tpwq"] });
+var fillValue = "var(--_1l1ff6g)";
+var mark = recipeRuntime({
+	base: [{ transition: "colors" }, "_1ksn6zh"],
+	variants: { active: {
+		false: { color: "fg.secondary" },
+		true: {}
+	} }
+});
+var markValue = "var(--_1yjxp6h)";
+var range = recipeRuntime({ base: [{
+	h: "full",
+	rounded: "inherit"
+}, "_1b9teg8"] });
+var root = recipeRuntime({
+	base: [
+		"_1rq09bz",
+		{
+			alignItems: "center",
+			color: "fg.default",
+			display: "flex",
+			fontSize: "md",
+			w: "full"
+		},
+		"_7yy7td"
+	],
+	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"
+}, "_16poest"] });
+var track = recipeRuntime({ base: [{
+	display: "flex",
+	flex: "1",
+	rounded: "full"
+}, "_1eni9j7"] });
+//#endregion
 export { control, fillValue, mark, markValue, range, root, thumb, track };