@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/pagination-DwyHpT49.js

@@ -0,0 +1,223 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_ButtonRoot = require("./ButtonRoot-MlsRzbPN.js");
+const require_group = require("./group.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconEllipsisStroke = require("@optiaxiom/icons/IconEllipsisStroke");
+let _optiaxiom_icons_IconChevronRight = require("@optiaxiom/icons/IconChevronRight");
+let _optiaxiom_icons_IconChevronLeft = require("@optiaxiom/icons/IconChevronLeft");
+require("./assets/Pagination.css.ts.vanilla-yYxi9W3S.css");
+//#region ../../node_modules/.pnpm/@mantine+hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs
+function useUncontrolled({ value, defaultValue, finalValue, onChange = () => {} }) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue !== void 0 ? defaultValue : finalValue);
+	const handleUncontrolledChange = (val, ...payload) => {
+		setUncontrolledValue(val);
+		onChange?.(val, ...payload);
+	};
+	if (value !== void 0) return [
+		value,
+		onChange,
+		true
+	];
+	return [
+		uncontrolledValue,
+		handleUncontrolledChange,
+		false
+	];
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@mantine+hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.mjs
+function range(start, end) {
+	const length = end - start + 1;
+	return Array.from({ length }, (_, index) => index + start);
+}
+const DOTS = "dots";
+function usePagination({ total, siblings = 1, boundaries = 1, page, initialPage = 1, onChange }) {
+	const _total = Math.max(Math.trunc(total), 0);
+	const [activePage, setActivePage] = useUncontrolled({
+		value: page,
+		onChange,
+		defaultValue: initialPage,
+		finalValue: initialPage
+	});
+	const setPage = (pageNumber) => {
+		if (pageNumber <= 0) setActivePage(1);
+		else if (pageNumber > _total) setActivePage(_total);
+		else setActivePage(pageNumber);
+	};
+	const next = () => setPage(activePage + 1);
+	const previous = () => setPage(activePage - 1);
+	const first = () => setPage(1);
+	const last = () => setPage(_total);
+	return {
+		range: (0, react.useMemo)(() => {
+			if (siblings * 2 + 3 + boundaries * 2 >= _total) return range(1, _total);
+			const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
+			const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);
+			const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
+			const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);
+			if (!shouldShowLeftDots && shouldShowRightDots) return [
+				...range(1, siblings * 2 + boundaries + 2),
+				DOTS,
+				...range(_total - (boundaries - 1), _total)
+			];
+			if (shouldShowLeftDots && !shouldShowRightDots) {
+				const rightItemCount = boundaries + 1 + 2 * siblings;
+				return [
+					...range(1, boundaries),
+					DOTS,
+					...range(_total - rightItemCount, _total)
+				];
+			}
+			return [
+				...range(1, boundaries),
+				DOTS,
+				...range(leftSiblingIndex, rightSiblingIndex),
+				DOTS,
+				...range(_total - boundaries + 1, _total)
+			];
+		}, [
+			_total,
+			siblings,
+			activePage
+		]),
+		active: activePage,
+		setPage,
+		next,
+		previous,
+		first,
+		last
+	};
+}
+//#endregion
+//#region src/pagination/Pagination.css.ts
+var button = require_recipeRuntime.recipeRuntime({ base: [{ justifyContent: "center" }, "_15ruzfj"] });
+var cursor = require_recipeRuntime.recipeRuntime({
+	base: [{
+		justifyContent: "center",
+		z: "10"
+	}, "_1n9r8vs"],
+	variants: { animation: {
+		false: {},
+		true: { transition: "transform" }
+	} }
+});
+var list = require_recipeRuntime.recipeRuntime({ base: [{ gap: "2" }, "_1nsvgzn"] });
+//#endregion
+//#region src/pagination/Pagination.tsx
+/**
+* Display active page and navigate between multiple pages.
+*
+* @category navigation
+* @since 0.1.0
+*/
+const Pagination = (0, react.forwardRef)(({ defaultPage = 1, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Pagination",
+		defaultProp: defaultPage,
+		onChange: onPageChange,
+		prop: pageProp
+	});
+	const { active, next, previous, range, setPage } = usePagination({
+		onChange: setValue,
+		page: value,
+		siblings: 2,
+		total
+	});
+	const [animation, setAnimation] = (0, react.useState)(false);
+	const activeRef = (0, react.useRef)(null);
+	const cursorRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!activeRef.current || !cursorRef.current) return;
+		cursorRef.current.style.transform = `translateX(${activeRef.current.offsetLeft}px)`;
+		cursorRef.current.style.visibility = "visible";
+		setTimeout(() => setAnimation(true), 150);
+	}, [active]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			"aria-label": "pagination",
+			ref,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+				asChild: true,
+				...list(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonRoot.ButtonRoot, {
+						appearance: "subtle",
+						"aria-hidden": true,
+						asChild: true,
+						"data-state": "active",
+						disabled,
+						ref: cursorRef,
+						...cursor({ animation }),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: active })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+						content: "Prev",
+						disabled: disabled || active === 1,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							appearance: "subtle",
+							"aria-label": "Previous page",
+							disabled: disabled || active === 1,
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronLeft.IconChevronLeft, {}),
+							onClick: previous
+						})
+					}) }),
+					range.map((page, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: page === "dots" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+						alignItems: "stretch",
+						display: "flex",
+						justifyContent: "center",
+						px: "6",
+						py: "8",
+						size: "md",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Icon, {
+							asChild: true,
+							color: disabled ? "fg.disabled" : "fg.default",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconEllipsisStroke.IconEllipsisStroke, {})
+						})
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ButtonRoot.ButtonRoot, {
+						appearance: "subtle",
+						"aria-current": active === page ? "page" : void 0,
+						disabled,
+						onClick: () => setPage(page),
+						ref: active === page ? activeRef : void 0,
+						...button(),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, { children: "page" }),
+							" ",
+							page,
+							page === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, { children: "(last page)" }) : null
+						]
+					}) }, page === "dots" ? `${page}-${index < range.indexOf(active) ? "before" : "after"}` : page)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+						content: "Next",
+						disabled: disabled || active === total,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							appearance: "subtle",
+							"aria-label": "Next page",
+							disabled: disabled || active === total,
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronRight.IconChevronRight, {}),
+							onClick: next
+						})
+					}) })
+				] })
+			})
+		})
+	});
+});
+Pagination.displayName = "@optiaxiom/react/Pagination";
+//#endregion
+Object.defineProperty(exports, "Pagination", {
+	enumerable: true,
+	get: function() {
+		return Pagination;
+	}
+});

package/dist/cjs/pagination.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_pagination = require("./pagination-DwyHpT49.js");
+exports.Pagination = require_pagination.Pagination;

package/dist/cjs/paper-BAtiTHb1.js

@@ -0,0 +1,44 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/paper/Paper.css.ts
+var paper = require_recipeRuntime.recipeRuntime({
+	base: {
+		bg: "bg.default",
+		color: "fg.default",
+		shadow: "md",
+		z: "popover"
+	},
+	variants: { elevation: {
+		dialog: { rounded: "lg" },
+		menu: {
+			border: "1",
+			borderColor: "border.secondary",
+			rounded: "lg"
+		},
+		screen: {}
+	} }
+});
+//#endregion
+//#region src/paper/Paper.tsx
+/**
+* Paper component for elevated surfaces
+*
+* @category layout
+*/
+const Paper = (0, react.forwardRef)(({ className, elevation = "menu", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+	ref,
+	...paper({ elevation }, className),
+	...props
+}));
+Paper.displayName = "@optiaxiom/react/Paper";
+//#endregion
+Object.defineProperty(exports, "Paper", {
+	enumerable: true,
+	get: function() {
+		return Paper;
+	}
+});

package/dist/cjs/paper.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_paper = require("./paper-BAtiTHb1.js");
+exports.Paper = require_paper.Paper;

package/dist/cjs/popover.js

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+exports.Popover = require_SuggestionPopover.Popover;
+exports.PopoverAnchor = require_SuggestionPopover.PopoverAnchor;
+exports.PopoverContent = require_SuggestionPopover.PopoverContent;
+exports.PopoverTrigger = require_SuggestionPopover.PopoverTrigger;

package/dist/cjs/progress-EVjv4w66.js

@@ -0,0 +1,76 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_progress = require("@radix-ui/react-progress");
+_radix_ui_react_progress = require_rolldown_runtime.__toESM(_radix_ui_react_progress, 1);
+require("./assets/Progress.css.ts.vanilla-ZuJrtcOw.css");
+//#region src/progress/Progress.css.ts
+var indicator = require_recipeRuntime.recipeRuntime({
+	base: [{
+		h: "full",
+		rounded: "full",
+		transition: "all"
+	}],
+	variants: { intent: {
+		danger: "r3xzi0",
+		opal: {},
+		primary: {},
+		success: {}
+	} },
+	variantsCompounded: [{
+		style: "_1lvm55i",
+		variants: { intent: [
+			"opal",
+			"primary",
+			"success"
+		] }
+	}]
+});
+var progress = require_recipeRuntime.recipeRuntime({ base: [{
+	bg: "bg.pill.default",
+	overflow: "hidden",
+	rounded: "full"
+}, "eotwmv"] });
+//#endregion
+//#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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		...progress({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_progress.Root, {
+			ref,
+			children: isValidValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				style: {
+					backgroundSize: `${1e4 / widthPercentage}%`,
+					width: `${widthPercentage}%`
+				},
+				...indicator({ intent }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_progress.Indicator, {})
+			})
+		})
+	});
+});
+const DEFAULT_MAX = 100;
+Progress.displayName = "@optiaxiom/react/Progress";
+//#endregion
+Object.defineProperty(exports, "Progress", {
+	enumerable: true,
+	get: function() {
+		return Progress;
+	}
+});

package/dist/cjs/progress.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_progress = require("./progress-EVjv4w66.js");
+exports.Progress = require_progress.Progress;

package/dist/cjs/radio-YUw5kuai.js

@@ -0,0 +1,131 @@
+"use client";
+const require_box = require("./box-B2PXBdH7.js");
+const require_sprinkles = require("./sprinkles-COrycuH3.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_group = require("./group.js");
+const require_ToggleInputLabel = require("./ToggleInputLabel-CtYVkNC4.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+require("./assets/ButtonGroup.css.ts.vanilla-Big2-ymt.css");
+require("./assets/ToggleInput.css.ts.vanilla-BOJ3ABfS.css");
+require("./assets/Radio.css.ts.vanilla-CcBQfYkE.css");
+//#region src/radio/Radio.css.ts
+var control = require_recipeRuntime.recipeRuntime({
+	base: [{
+		bg: "bg.default",
+		display: "grid",
+		rounded: "full",
+		size: "sm"
+	}, "_3444rs"],
+	variants: { shift: {
+		false: {},
+		true: "_1i5e86u"
+	} }
+});
+var indicator = require_recipeRuntime.recipeRuntime({ base: [{
+	rounded: "inherit",
+	transition: "transform"
+}, "_1l2py3m"] });
+var input = require_recipeRuntime.recipeRuntime({ base: "d6p53b" });
+var radio = require_recipeRuntime.recipeRuntime({ base: "vo9lsc" });
+//#endregion
+//#region src/radio/RadioGroupContext.ts
+const [RadioGroupProvider, useRadioGroupContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/RadioGroup", null);
+//#endregion
+//#region src/radio/Radio.tsx
+/**
+* Basic control to allow selecting only one item from a set.
+*
+* @since 0.1.0
+* @group RadioGroup
+*/
+const Radio = (0, react.forwardRef)(({ children, className, description, disabled, name, onBlur, onChange, ...props }, ref) => {
+	const { boxProps, restProps } = require_box.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__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInput, {
+		...radio({}, className),
+		...boxProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.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__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputControl, {
+				...control({ shift: Boolean(children) }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, { ...indicator() })
+			}),
+			(children || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInputContent, { children: [children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputLabel, { children }), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputDescription, { children: description })] })
+		]
+	});
+});
+Radio.displayName = "@optiaxiom/react/Radio";
+//#endregion
+//#region src/radio/RadioGroup.tsx
+const mapGapToOrientation = {
+	column: "12",
+	"column-reverse": "12",
+	row: "16",
+	"row-reverse": "16"
+};
+/**
+* Basic control to allow selecting only one item from a set.
+*
+* @category form
+* @since 0.1.0
+*/
+const RadioGroup = (0, react.forwardRef)(({ children, defaultValue, disabled, flexDirection = "column", name, onBlur, onChange, onValueChange, value, ...props }, ref) => {
+	const { track } = require_useSurface.useSurface("property") ?? {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+			flexDirection,
+			fontSize: "md",
+			gap: require_sprinkles.mapResponsiveValue(flexDirection, (value) => mapGapToOrientation[value]),
+			ref,
+			...props,
+			children
+		})
+	});
+});
+RadioGroup.displayName = "@optiaxiom/react/RadioGroup";
+//#endregion
+Object.defineProperty(exports, "Radio", {
+	enumerable: true,
+	get: function() {
+		return Radio;
+	}
+});
+Object.defineProperty(exports, "RadioGroup", {
+	enumerable: true,
+	get: function() {
+		return RadioGroup;
+	}
+});

package/dist/cjs/radio.js

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_radio = require("./radio-YUw5kuai.js");
+exports.Radio = require_radio.Radio;
+exports.RadioGroup = require_radio.RadioGroup;

package/dist/cjs/recipeRuntime-BV5B1H9r.js

@@ -0,0 +1,38 @@
+//#region src/vanilla-extract/recipeRuntime.ts
+const recipeRuntime = ({ base = {}, variants, variantsCompounded = [] }) => {
+	return (props, className) => {
+		const selections = props ?? {};
+		const classNames = className ? [className] : [];
+		const sprinkleProps = {};
+		function process(rule) {
+			for (const item of Array.isArray(rule) ? rule : [rule]) if (typeof item === "string") classNames.push(item);
+			else for (const [name, value] of Object.entries(item)) sprinkleProps[name] = value;
+		}
+		process(base);
+		for (const variantName in variants) {
+			if (selections[variantName] === null || selections[variantName] === void 0) continue;
+			const variant = variants[variantName];
+			const selection = typeof selections[variantName] === "boolean" ? selections[variantName] ? "true" : "false" : selections[variantName];
+			if (String(selection) in variant) process(variant[selection]);
+		}
+		for (const { style, variants } of variantsCompounded) {
+			if (!shouldApplyCompound(variants, selections)) continue;
+			process(style);
+		}
+		return {
+			...sprinkleProps,
+			className: classNames.join(" ")
+		};
+	};
+};
+const shouldApplyCompound = (compoundCheck, selections) => {
+	for (const key of Object.keys(compoundCheck)) if (compoundCheck[key] !== void 0 && selections[key] !== void 0 && !(Array.isArray(compoundCheck[key]) ? compoundCheck[key] : [compoundCheck[key]]).includes(selections[key])) return false;
+	return true;
+};
+//#endregion
+Object.defineProperty(exports, "recipeRuntime", {
+	enumerable: true,
+	get: function() {
+		return recipeRuntime;
+	}
+});

package/dist/cjs/rem-yLUl-9YY.js

@@ -0,0 +1,20 @@
+//#region src/utils/rem.ts
+/**
+* `--ax-styles-scale` defaults to `1rem` in ThemeProvider. Consumers can set it
+* (e.g. `16px`) on the same `:root` or `:host` as the theme to decouple sizing
+* from the page's root font size. Media queries can't read custom properties,
+* so breakpoints must use plain `rem` instead.
+*
+* Falls back to `1rem` for hosts whose ThemeProvider predates the variable.
+*/
+const rem = (value) => {
+	const units = value.endsWith("px") ? parseFloat(value) / 16 : value.endsWith("rem") ? parseFloat(value) : null;
+	return units === null ? value : `calc(${parseFloat(units.toFixed(4))} * var(--ax-styles-scale, 1rem))`;
+};
+//#endregion
+Object.defineProperty(exports, "rem", {
+	enumerable: true,
+	get: function() {
+		return rem;
+	}
+});

package/dist/cjs/rolldown-runtime-C0BPl7ul.js

@@ -0,0 +1,43 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+Object.defineProperty(exports, "__exportAll", {
+	enumerable: true,
+	get: function() {
+		return __exportAll;
+	}
+});
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});

package/dist/cjs/search-input-D2X1UQ1r.js

@@ -0,0 +1,75 @@
+"use client";
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_input = require("./input-BVk2X8bm.js");
+const require_group = require("./group.js");
+const require_useObserveValue = require("./useObserveValue-B_tuG44C.js");
+let _optiaxiom_icons_IconXmark = require("@optiaxiom/icons/IconXmark");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconSearch = require("@optiaxiom/icons/IconSearch");
+require("./assets/SearchInput.css.ts.vanilla-D3At6cIM.css");
+//#region src/search-input/SearchInput.css.ts
+var clear = require_recipeRuntime.recipeRuntime({ base: [{ size: "sm" }, "_870c2n"] });
+var input = require_recipeRuntime.recipeRuntime({ base: "_1nvsnri" });
+var search = require_recipeRuntime.recipeRuntime({ base: "dgp9pc" });
+//#endregion
+//#region src/search-input/SearchInput.tsx
+/**
+* Basic search input field with clear button.
+*
+* @category form
+* @since 0.1.0
+* @extends Input
+*/
+const SearchInput = (0, react.forwardRef)(({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/SearchInput",
+		defaultProp: props.defaultValue,
+		prop: props.value
+	});
+	const forceValueChange = require_useObserveValue.useObserveValue(innerRef, setValue);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+		addonAfter: value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			appearance: "subtle",
+			"aria-label": "Clear",
+			icon: value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconXmark.IconXmark, {}),
+			onPointerDown: (event) => {
+				event.preventDefault();
+				forceValueChange("");
+				onValueClear?.();
+			},
+			tabIndex: -1,
+			...clear()
+		}),
+		addonBefore: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+			gap: "8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconSearch.IconSearch, {}), addonBefore]
+		}),
+		addonPointerEvents: "none",
+		asChild: true,
+		autoComplete: "off",
+		onChange: (event) => {
+			onChange?.(event);
+			setValue(event.target.value);
+		},
+		ref,
+		type: "search",
+		...search({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...input() })
+	});
+});
+SearchInput.displayName = "@optiaxiom/react/SearchInput";
+//#endregion
+Object.defineProperty(exports, "SearchInput", {
+	enumerable: true,
+	get: function() {
+		return SearchInput;
+	}
+});