@ultraviolet/ui 3.21.1 → 3.22.0

package/dist/components/SelectableCard/MultiStateInput.js

@@ -1,5 +1,5 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { Checkbox, init_Checkbox } from "../Checkbox/index.js";
 import { init_styles_css, selectableCardStyle } from "./styles.css.js";
 import { Radio, init_Radio } from "../Radio/index.js";
@@ -8,74 +8,76 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SelectableCard/MultiStateInput.tsx
 var MultiStateInput;
-var init_MultiStateInput = __esmMin(() => {
-	init_Checkbox();
-	init_Radio();
-	init_Toggle();
-	init_styles_css();
-	init_objectSpread2();
-	MultiStateInput = ({ checked, disabled, id, label, "aria-label": ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value }) => {
-		if (!type) return null;
-		if (type === "checkbox") {
-			const labelProps = label ? {
-				"aria-label": void 0,
-				children: label
-			} : { "aria-label": ariaLabel };
-			return /* @__PURE__ */ jsx(Checkbox, _objectSpread2({
-				checked,
-				className: selectableCardStyle.selectableElement,
-				"data-error": isError,
-				disabled,
-				error: isError,
-				id,
-				name,
-				onBlur,
-				onChange,
-				onFocus,
-				ref: innerRef,
-				tabIndex: -1,
-				value
-			}, labelProps));
-		}
-		if (type === "radio") {
-			const labelProps = label ? { label } : { "aria-label": ariaLabel };
-			return /* @__PURE__ */ jsx(Radio, _objectSpread2({
-				checked,
-				className: selectableCardStyle.selectableElement,
-				"data-error": isError,
-				disabled,
-				error: isError,
-				id,
-				name,
-				onBlur,
-				onChange,
-				onFocus,
-				ref: innerRef,
-				tabIndex: -1,
-				value
-			}, labelProps));
-		}
-		if (type === "toggle") {
-			const labelProps = label ? { label } : { "aria-label": ariaLabel };
-			return /* @__PURE__ */ jsx(Toggle, _objectSpread2({
-				checked,
-				className: selectableCardStyle.selectableElement,
-				"data-error": isError,
-				disabled,
-				error: isError,
-				id,
-				name,
-				onBlur,
-				onChange,
-				onFocus,
-				ref: innerRef,
-				tabIndex: -1,
-				value
-			}, labelProps));
-		}
-		return null;
-	};
-});
+function init_MultiStateInput() {
+	return (init_MultiStateInput = __esmMin(() => {
+		init_Checkbox();
+		init_Radio();
+		init_Toggle();
+		init_styles_css();
+		init_objectSpread2();
+		MultiStateInput = ({ checked, disabled, id, label, "aria-label": ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value }) => {
+			if (!type) return null;
+			if (type === "checkbox") {
+				const labelProps = label ? {
+					"aria-label": void 0,
+					children: label
+				} : { "aria-label": ariaLabel };
+				return /* @__PURE__ */ jsx(Checkbox, _objectSpread2({
+					checked,
+					className: selectableCardStyle.selectableElement,
+					"data-error": isError,
+					disabled,
+					error: isError,
+					id,
+					name,
+					onBlur,
+					onChange,
+					onFocus,
+					ref: innerRef,
+					tabIndex: -1,
+					value
+				}, labelProps));
+			}
+			if (type === "radio") {
+				const labelProps = label ? { label } : { "aria-label": ariaLabel };
+				return /* @__PURE__ */ jsx(Radio, _objectSpread2({
+					checked,
+					className: selectableCardStyle.selectableElement,
+					"data-error": isError,
+					disabled,
+					error: isError,
+					id,
+					name,
+					onBlur,
+					onChange,
+					onFocus,
+					ref: innerRef,
+					tabIndex: -1,
+					value
+				}, labelProps));
+			}
+			if (type === "toggle") {
+				const labelProps = label ? { label } : { "aria-label": ariaLabel };
+				return /* @__PURE__ */ jsx(Toggle, _objectSpread2({
+					checked,
+					className: selectableCardStyle.selectableElement,
+					"data-error": isError,
+					disabled,
+					error: isError,
+					id,
+					name,
+					onBlur,
+					onChange,
+					onFocus,
+					ref: innerRef,
+					tabIndex: -1,
+					value
+				}, labelProps));
+			}
+			return null;
+		};
+	}))();
+}
 
 //#endregion
 init_MultiStateInput();

package/dist/components/SelectableCard/SelectableCard.js

@@ -1,6 +1,6 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
 import { init_styles_css, selectableCardStyle } from "./styles.css.js";
@@ -14,112 +14,114 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectableCard/SelectableCard.tsx
 var SelectableCard;
-var init_SelectableCard = __esmMin(() => {
-	init_Stack();
-	init_Tooltip();
-	init_IllustrationContainer();
-	init_MultiStateInput();
-	init_styles_css();
-	init_variables_css();
-	init_objectSpread2();
-	SelectableCard = forwardRef(({ name, value, onChange, showTick = false, type = "radio", checked = false, disabled = false, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, productIcon, illustration, "aria-label": ariaLabel, style, indented = true }, ref) => {
-		const innerRef = useRef(null);
-		const childrenRef = useRef(null);
-		const image = useMemo(() => {
-			if (illustration) return "illustration";
-			if (productIcon) return "icon";
-			return "none";
-		}, [illustration, productIcon]);
-		const ParentContainer = useCallback(({ children: subChildren }) => {
-			if (tooltip) return /* @__PURE__ */ jsx(Stack, {
+function init_SelectableCard() {
+	return (init_SelectableCard = __esmMin(() => {
+		init_Stack();
+		init_Tooltip();
+		init_IllustrationContainer();
+		init_MultiStateInput();
+		init_styles_css();
+		init_variables_css();
+		init_objectSpread2();
+		SelectableCard = forwardRef(({ name, value, onChange, showTick = false, type = "radio", checked = false, disabled = false, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, productIcon, illustration, "aria-label": ariaLabel, style, indented = true }, ref) => {
+			const innerRef = useRef(null);
+			const childrenRef = useRef(null);
+			const image = useMemo(() => {
+				if (illustration) return "illustration";
+				if (productIcon) return "icon";
+				return "none";
+			}, [illustration, productIcon]);
+			const ParentContainer = useCallback(({ children: subChildren }) => {
+				if (tooltip) return /* @__PURE__ */ jsx(Stack, {
+					flex: 1,
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						containerFullHeight: true,
+						text: tooltip,
+						children: subChildren
+					})
+				});
+				return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
+			}, [tooltip]);
+			const onKeyDown = useCallback((event) => {
+				if (event.key === " " && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+					event.preventDefault();
+					innerRef.current.click();
+				}
+			}, [innerRef]);
+			const isComplexChildren = [
+				"function",
+				"array",
+				"object"
+			].includes(typeof children);
+			const onClickContainer = useCallback((event) => {
+				if (innerRef.current && !disabled) {
+					const inputElement = innerRef.current;
+					const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
+					const targetNode = event.target;
+					if (!(inputElement.contains(targetNode) || (labelElement === null || labelElement === void 0 ? void 0 : labelElement.contains(targetNode)))) inputElement.click();
+				}
+			}, [disabled]);
+			const isCheckboxOrToggle = type === "checkbox" || type === "toggle";
+			return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(Stack, {
+				alignItems: "flex-start",
+				className: cn(className, selectableCardStyle.container({
+					cursor: isCheckboxOrToggle && isComplexChildren ? "default" : "custom",
+					image
+				}), label ? selectableCardStyle.labelContainerSelectableCardLabel : selectableCardStyle.labelContainerSelectableCardNoLabel),
+				"data-checked": checked,
+				"data-disabled": disabled,
+				"data-error": isError,
+				"data-testid": dataTestId,
+				"data-type": type,
+				direction: label ? "column" : "row",
 				flex: 1,
-				children: /* @__PURE__ */ jsx(Tooltip, {
-					containerFullHeight: true,
-					text: tooltip,
-					children: subChildren
-				})
-			});
-			return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
-		}, [tooltip]);
-		const onKeyDown = useCallback((event) => {
-			if (event.key === " " && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
-				event.preventDefault();
-				innerRef.current.click();
-			}
-		}, [innerRef]);
-		const isComplexChildren = [
-			"function",
-			"array",
-			"object"
-		].includes(typeof children);
-		const onClickContainer = useCallback((event) => {
-			if (innerRef.current && !disabled) {
-				const inputElement = innerRef.current;
-				const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
-				const targetNode = event.target;
-				if (!(inputElement.contains(targetNode) || (labelElement === null || labelElement === void 0 ? void 0 : labelElement.contains(targetNode)))) inputElement.click();
-			}
-		}, [disabled]);
-		const isCheckboxOrToggle = type === "checkbox" || type === "toggle";
-		return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(Stack, {
-			alignItems: "flex-start",
-			className: cn(className, selectableCardStyle.container({
-				cursor: isCheckboxOrToggle && isComplexChildren ? "default" : "custom",
-				image
-			}), label ? selectableCardStyle.labelContainerSelectableCardLabel : selectableCardStyle.labelContainerSelectableCardNoLabel),
-			"data-checked": checked,
-			"data-disabled": disabled,
-			"data-error": isError,
-			"data-testid": dataTestId,
-			"data-type": type,
-			direction: label ? "column" : "row",
-			flex: 1,
-			gap: .5,
-			onClick: isCheckboxOrToggle && isComplexChildren ? void 0 : onClickContainer,
-			onKeyDown,
-			ref,
-			role: "button",
-			style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-				[inputDisplay]: showTick ? "inline" : "none",
-				[labelDisplay]: showTick || label ? "inline" : "none",
-				[widthSelectable]: label ? "100%" : "auto"
-			})), style),
-			tabIndex: disabled ? void 0 : 0,
-			children: /* @__PURE__ */ jsxs(IllustrationContainer, {
-				illustration,
-				productIcon,
-				children: [/* @__PURE__ */ jsx(MultiStateInput, {
-					"aria-label": ariaLabel,
-					checked,
-					"data-error": isError,
-					disabled,
-					id,
-					innerRef,
-					isError,
-					label,
-					name,
-					onBlur,
-					onChange,
-					onFocus,
-					type,
-					value
-				}), children ? /* @__PURE__ */ jsx(Stack, {
-					className: cn(selectableCardStyle.stack, !!label && showTick && indented ? selectableCardStyle.indentedCard : void 0),
-					"data-has-default-cursor": isCheckboxOrToggle && isComplexChildren,
-					"data-has-label": !!label && showTick,
-					onKeyDown: (event) => event.stopPropagation(),
-					ref: childrenRef,
-					width: "100%",
-					children: typeof children === "function" ? children({
+				gap: .5,
+				onClick: isCheckboxOrToggle && isComplexChildren ? void 0 : onClickContainer,
+				onKeyDown,
+				ref,
+				role: "button",
+				style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+					[inputDisplay]: showTick ? "inline" : "none",
+					[labelDisplay]: showTick || label ? "inline" : "none",
+					[widthSelectable]: label ? "100%" : "auto"
+				})), style),
+				tabIndex: disabled ? void 0 : 0,
+				children: /* @__PURE__ */ jsxs(IllustrationContainer, {
+					illustration,
+					productIcon,
+					children: [/* @__PURE__ */ jsx(MultiStateInput, {
+						"aria-label": ariaLabel,
 						checked,
-						disabled
-					}) : children
-				}) : null]
-			})
-		}) });
-	});
-	SelectableCard.displayName = "SelectableCard";
-});
+						"data-error": isError,
+						disabled,
+						id,
+						innerRef,
+						isError,
+						label,
+						name,
+						onBlur,
+						onChange,
+						onFocus,
+						type,
+						value
+					}), children ? /* @__PURE__ */ jsx(Stack, {
+						className: cn(selectableCardStyle.stack, !!label && showTick && indented ? selectableCardStyle.indentedCard : void 0),
+						"data-has-default-cursor": isCheckboxOrToggle && isComplexChildren,
+						"data-has-label": !!label && showTick,
+						onKeyDown: (event) => event.stopPropagation(),
+						ref: childrenRef,
+						width: "100%",
+						children: typeof children === "function" ? children({
+							checked,
+							disabled
+						}) : children
+					}) : null]
+				})
+			}) });
+		});
+		SelectableCard.displayName = "SelectableCard";
+	}))();
+}
 
 //#endregion
 init_SelectableCard();

package/dist/components/SelectableCard/styles.css.js

@@ -4,38 +4,40 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/SelectableCard/styles.css.ts
 var selectableCardStyle;
-var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
-	selectableCardStyle = {
-		container: createRuntimeFn({
-			defaultClassName: "uv_475tnd0",
-			variantClassNames: {
-				cursor: {
-					custom: "uv_475tnd1",
-					"default": "uv_475tnd2"
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		selectableCardStyle = {
+			container: createRuntimeFn({
+				defaultClassName: "uv_475tnd0",
+				variantClassNames: {
+					cursor: {
+						custom: "uv_475tnd1",
+						"default": "uv_475tnd2"
+					},
+					image: {
+						icon: "uv_475tnd3",
+						illustration: "uv_475tnd4",
+						none: "uv_475tnd5"
+					}
 				},
-				image: {
-					icon: "uv_475tnd3",
-					illustration: "uv_475tnd4",
-					none: "uv_475tnd5"
-				}
-			},
-			defaultVariants: {
-				cursor: "custom",
-				image: "none"
-			},
-			compoundVariants: []
-		}),
-		labelContainerSelectableCardLabel: "uv_475tnd6",
-		labelContainerSelectableCardNoLabel: "uv_475tnd7",
-		div: "uv_475tnd8",
-		image: "uv_475tnd9",
-		illustration: "uv_475tnda",
-		stack: "uv_475tndb",
-		indentedCard: "uv_475tndc",
-		selectableElement: "uv_475tndd"
-	};
-});
+				defaultVariants: {
+					cursor: "custom",
+					image: "none"
+				},
+				compoundVariants: []
+			}),
+			labelContainerSelectableCardLabel: "uv_475tnd6",
+			labelContainerSelectableCardNoLabel: "uv_475tnd7",
+			div: "uv_475tnd8",
+			image: "uv_475tnd9",
+			illustration: "uv_475tnda",
+			stack: "uv_475tndb",
+			indentedCard: "uv_475tndc",
+			selectableElement: "uv_475tndd"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/SelectableCard/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectableCard/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();

package/dist/components/SelectableCard/variables.css.js

@@ -2,11 +2,13 @@ import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectableCard/variables.css.ts
 var inputDisplay, labelDisplay, widthSelectable;
-var init_variables_css = __esmMin(() => {
-	inputDisplay = "var(--uv_18vc4d30)";
-	labelDisplay = "var(--uv_18vc4d31)";
-	widthSelectable = "var(--uv_18vc4d32)";
-});
+function init_variables_css() {
+	return (init_variables_css = __esmMin(() => {
+		inputDisplay = "var(--uv_18vc4d30)";
+		labelDisplay = "var(--uv_18vc4d31)";
+		widthSelectable = "var(--uv_18vc4d32)";
+	}))();
+}
 
 //#endregion
 init_variables_css();

package/dist/components/SelectableCardGroup/Context.js

@@ -4,9 +4,11 @@ import { createContext } from "react";
 
 //#region src/components/SelectableCardGroup/Context.tsx
 var SelectableCardGroupContext;
-var init_Context = __esmMin(() => {
-	SelectableCardGroupContext = createContext(void 0);
-});
+function init_Context() {
+	return (init_Context = __esmMin(() => {
+		SelectableCardGroupContext = createContext(void 0);
+	}))();
+}
 
 //#endregion
 init_Context();

package/dist/components/SelectableCardGroup/SingleCard.js

@@ -1,42 +1,43 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { SelectableCard, init_SelectableCard } from "../SelectableCard/SelectableCard.js";
-import { init_SelectableCard as init_SelectableCard$1 } from "../SelectableCard/index.js";
 import { SelectableCardGroupContext, init_Context } from "./Context.js";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SelectableCardGroup/SingleCard.tsx
 var CardSelectableCard;
-var init_SingleCard = __esmMin(() => {
-	init_SelectableCard$1();
-	init_Context();
-	CardSelectableCard = ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId }) => {
-		const context = useContext(SelectableCardGroupContext);
-		if (!context) throw new Error("SelectableCardGroup.Card can only be used inside a SelectableCardGroup");
-		const { groupName, onChange, groupValue, type, showTick, error } = context;
-		return /* @__PURE__ */ jsx(SelectableCard, {
-			checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value,
-			className,
-			"data-testid": dataTestId,
-			disabled,
-			id,
-			isError: isError || error,
-			label,
-			name: groupName,
-			onBlur,
-			onChange,
-			onFocus,
-			showTick,
-			style,
-			tooltip,
-			type,
-			value,
-			children
-		});
-	};
-	CardSelectableCard.displayName = "SelectableCardGroup.Card";
-});
+function init_SingleCard() {
+	return (init_SingleCard = __esmMin(() => {
+		init_SelectableCard();
+		init_Context();
+		CardSelectableCard = ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId }) => {
+			const context = useContext(SelectableCardGroupContext);
+			if (!context) throw new Error("SelectableCardGroup.Card can only be used inside a SelectableCardGroup");
+			const { groupName, onChange, groupValue, type, showTick, error } = context;
+			return /* @__PURE__ */ jsx(SelectableCard, {
+				checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value,
+				className,
+				"data-testid": dataTestId,
+				disabled,
+				id,
+				isError: isError || error,
+				label,
+				name: groupName,
+				onBlur,
+				onChange,
+				onFocus,
+				showTick,
+				style,
+				tooltip,
+				type,
+				value,
+				children
+			});
+		};
+		CardSelectableCard.displayName = "SelectableCardGroup.Card";
+	}))();
+}
 
 //#endregion
 init_SingleCard();