@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/components/Slider/components/Options.js

@@ -2,47 +2,47 @@
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
 import { Text, init_Text } from "../../Text/index.js";
 import { init_styles_css, leftOption, sliderStyle } from "../styles.css.js";
-import { init_constant } from "../constant.js";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Slider/components/Options.tsx
 var Options;
-var init_Options = __esmMin(() => {
-	init_Text();
-	init_constant();
-	init_styles_css();
-	Options = ({ ticks, min, max, value, step, defaultScale }) => /* @__PURE__ */ jsx("datalist", {
-		className: sliderStyle.datalist({ double: Array.isArray(value) }),
-		"data-double": Array.isArray(value),
-		children: ticks.map((element, index, { length }) => {
-			var _element$label;
-			const progress = ((defaultScale ? element.value : index * step) - min) * 100 / (max - min);
-			const formatedElement = (_element$label = element.label) !== null && _element$label !== void 0 ? _element$label : String(element.value);
-			const getIsSelected = () => {
-				if (!value) return false;
-				return typeof value === "number" ? element.value === value : value.includes(element.value);
-			};
-			const isSelected = getIsSelected();
-			return /* @__PURE__ */ jsx("span", {
-				className: sliderStyle.option({
-					left: index === 0,
-					right: defaultScale ? element.value === max : index === length - 1
-				}),
-				"data-element-left": index === 0,
-				"data-element-right": index === length - 1,
-				"data-value": element.value,
-				style: assignInlineVars({ [leftOption]: `calc(${progress}% - ${16 * progress / 100}px + ${16 / 2}px)` }),
-				children: /* @__PURE__ */ jsx(Text, {
-					as: "p",
-					sentiment: isSelected ? "primary" : "neutral",
-					variant: isSelected ? "captionStrong" : "caption",
-					children: formatedElement
-				})
-			}, element.value);
-		})
-	});
-});
+function init_Options() {
+	return (init_Options = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Options = ({ ticks, min, max, value, step, defaultScale }) => /* @__PURE__ */ jsx("datalist", {
+			className: sliderStyle.datalist({ double: Array.isArray(value) }),
+			"data-double": Array.isArray(value),
+			children: ticks.map((element, index, { length }) => {
+				var _element$label;
+				const progress = ((defaultScale ? element.value : index * step) - min) * 100 / (max - min);
+				const formatedElement = (_element$label = element.label) !== null && _element$label !== void 0 ? _element$label : String(element.value);
+				const getIsSelected = () => {
+					if (!value) return false;
+					return typeof value === "number" ? element.value === value : value.includes(element.value);
+				};
+				const isSelected = getIsSelected();
+				return /* @__PURE__ */ jsx("span", {
+					className: sliderStyle.option({
+						left: index === 0,
+						right: defaultScale ? element.value === max : index === length - 1
+					}),
+					"data-element-left": index === 0,
+					"data-element-right": index === length - 1,
+					"data-value": element.value,
+					style: assignInlineVars({ [leftOption]: `calc(${progress}% - ${16 * progress / 100}px + ${16 / 2}px)` }),
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "p",
+						sentiment: isSelected ? "primary" : "neutral",
+						variant: isSelected ? "captionStrong" : "caption",
+						children: formatedElement
+					})
+				}, element.value);
+			})
+		});
+	}))();
+}
 
 //#endregion
 init_Options();

package/dist/components/Slider/components/SingleSlider.js

@@ -1,13 +1,12 @@
 '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 { Text, init_Text } from "../../Text/index.js";
 import { Label, init_Label } from "../../Label/index.js";
 import { NumberInput, init_NumberInput } from "../../NumberInput/index.js";
 import { init_styles_css, leftVar, sliderStyle, thumbColor, tooltipLeft } from "../styles.css.js";
-import { init_constant } from "../constant.js";
 import { Options, init_Options } from "./Options.js";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@ultraviolet/themes";
@@ -17,204 +16,205 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Slider/components/SingleSlider.tsx
 var SingleSlider;
-var init_SingleSlider = __esmMin(() => {
-	init_Label();
-	init_NumberInput();
-	init_Stack();
-	init_Text();
-	init_Tooltip();
-	init_constant();
-	init_Options();
-	init_styles_css();
-	init_objectSpread2();
-	SingleSlider = ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min = 0, max = 100, step = 1, id, onBlur, unit, options, onFocus, className, label, input, prefix, suffix, required, labelDescription, customValueDisplay, "aria-label": ariaLabel, tooltipPosition, defaultScale = false, "aria-describedby": ariaDescribedBy }) => {
-		const localId = useId();
-		const theme = useTheme();
-		const finalId = id !== null && id !== void 0 ? id : localId;
-		const safeValue = value !== null && value !== void 0 ? value : min;
-		const [selectedIndex, setSelectedIndex] = useState(safeValue);
-		const refSlider = useRef(null);
-		const [sliderWidth, setWidth] = useState(0);
-		const [inputValue, setInputValue] = useState(safeValue);
-		useEffect(() => {
-			setInputValue(selectedIndex);
-		}, [selectedIndex]);
-		useEffect(() => {
-			var _refSlider$current;
-			setWidth(Number((_refSlider$current = refSlider.current) === null || _refSlider$current === void 0 ? void 0 : _refSlider$current.offsetWidth));
-		}, [refSlider]);
-		const ticks = useMemo(() => {
-			if (options && defaultScale) return options;
-			if (options) return options.map((element, index) => ({
-				label: element.label,
-				value: index
-			}));
-			return [];
-		}, [options, defaultScale]);
-		const internalOnChange = useCallback((newValue) => {
-			if (!newValue) {
-				setSelectedIndex(min);
-				onChange === null || onChange === void 0 || onChange(min);
-			} else if (newValue < min) {
-				setSelectedIndex(min);
-				onChange === null || onChange === void 0 || onChange(min);
-			} else if (newValue > max) {
-				setSelectedIndex(max);
-				onChange === null || onChange === void 0 || onChange(max);
-			} else {
-				setSelectedIndex(newValue);
-				onChange === null || onChange === void 0 || onChange(newValue);
-			}
-		}, [
-			max,
-			min,
-			onChange
-		]);
-		useEffect(() => {
-			if (value < min) internalOnChange(min);
-			else if (value > max) internalOnChange(max);
-			else setSelectedIndex(() => value !== null && value !== void 0 ? value : min);
-		}, [
-			value,
-			max,
-			min,
-			internalOnChange
-		]);
-		useEffect(() => {
-			const setWidthResize = () => {
-				var _refSlider$current2;
-				setWidth(Number((_refSlider$current2 = refSlider.current) === null || _refSlider$current2 === void 0 ? void 0 : _refSlider$current2.offsetWidth));
-			};
-			window.addEventListener("resize", setWidthResize);
-			return () => {
-				window.removeEventListener("resize", setWidthResize);
-			};
-		}, []);
-		const leftPosition = useMemo(() => (selectedIndex - min) * 100 / (max - min), [
-			selectedIndex,
-			max,
-			min
-		]);
-		const getBackgroundSize = useMemo(() => ({ backgroundSize: `${leftPosition}% 100%` }), [leftPosition]);
-		const styledValue = (valueNumber) => input && !options ? /* @__PURE__ */ jsx(NumberInput, {
-			"aria-label": "input",
-			className: sliderStyle.numberInput,
-			controls: false,
-			"data-testid": dataTestId ? `${dataTestId}-input` : "slider-input",
-			disabled,
-			max,
-			min,
-			onBlur: (event) => {
-				internalOnChange(Number.parseFloat(event.target.value));
-			},
-			onChange: setInputValue,
-			size: "small",
-			step,
-			unit: typeof suffix === "string" ? suffix : unit,
-			value: inputValue
-		}) : /* @__PURE__ */ jsxs(Text, {
-			as: "span",
-			className: sliderStyle.doubleText({
-				isDouble: direction !== "column",
-				isPadded: direction === "column"
-			}),
-			"data-testid": dataTestId ? `${dataTestId}-value` : "slider-value",
-			placement: direction === "column" ? "right" : "center",
-			sentiment: "neutral",
-			variant: "bodySmall",
-			children: [
-				prefix,
-				valueNumber,
-				suffix !== null && suffix !== void 0 ? suffix : unit
-			]
-		});
-		const tooltipText = useMemo(() => {
-			if (tooltip === true) return selectedIndex;
-			if (tooltip) return tooltip;
-		}, [tooltip, selectedIndex]);
-		const placementTooltip = (selectedIndex - min) / (max - min) * (sliderWidth - 16) + 16 / 2 - sliderWidth / 2;
-		const valueToShow = (options === null || options === void 0 ? void 0 : options[selectedIndex]) ? options[selectedIndex].value : selectedIndex;
-		const displayCorrectValue = input || !(customValueDisplay !== void 0) ? styledValue(valueToShow) : customValueDisplay;
-		return /* @__PURE__ */ jsxs(Stack, {
-			direction,
-			gap: 1,
-			justifyContent: "left",
-			children: [
-				label ? /* @__PURE__ */ jsxs(Stack, {
-					alignItems: "center",
-					direction: "row",
-					justifyContent: "space-between",
-					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: finalId,
-						labelDescription,
-						required,
-						children: label
-					}), direction === "column" ? displayCorrectValue : null]
-				}) : null,
-				/* @__PURE__ */ jsx(Stack, {
-					direction: "row",
-					justifyContent: "flex-end",
-					children: direction === "column" && !label ? displayCorrectValue : null
+function init_SingleSlider() {
+	return (init_SingleSlider = __esmMin(() => {
+		init_Label();
+		init_NumberInput();
+		init_Stack();
+		init_Text();
+		init_Tooltip();
+		init_Options();
+		init_styles_css();
+		init_objectSpread2();
+		SingleSlider = ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min = 0, max = 100, step = 1, id, onBlur, unit, options, onFocus, className, label, input, prefix, suffix, required, labelDescription, customValueDisplay, "aria-label": ariaLabel, tooltipPosition, defaultScale = false, "aria-describedby": ariaDescribedBy }) => {
+			const localId = useId();
+			const theme = useTheme();
+			const finalId = id !== null && id !== void 0 ? id : localId;
+			const safeValue = value !== null && value !== void 0 ? value : min;
+			const [selectedIndex, setSelectedIndex] = useState(safeValue);
+			const refSlider = useRef(null);
+			const [sliderWidth, setWidth] = useState(0);
+			const [inputValue, setInputValue] = useState(safeValue);
+			useEffect(() => {
+				setInputValue(selectedIndex);
+			}, [selectedIndex]);
+			useEffect(() => {
+				var _refSlider$current;
+				setWidth(Number((_refSlider$current = refSlider.current) === null || _refSlider$current === void 0 ? void 0 : _refSlider$current.offsetWidth));
+			}, [refSlider]);
+			const ticks = useMemo(() => {
+				if (options && defaultScale) return options;
+				if (options) return options.map((element, index) => ({
+					label: element.label,
+					value: index
+				}));
+				return [];
+			}, [options, defaultScale]);
+			const internalOnChange = useCallback((newValue) => {
+				if (!newValue) {
+					setSelectedIndex(min);
+					onChange === null || onChange === void 0 || onChange(min);
+				} else if (newValue < min) {
+					setSelectedIndex(min);
+					onChange === null || onChange === void 0 || onChange(min);
+				} else if (newValue > max) {
+					setSelectedIndex(max);
+					onChange === null || onChange === void 0 || onChange(max);
+				} else {
+					setSelectedIndex(newValue);
+					onChange === null || onChange === void 0 || onChange(newValue);
+				}
+			}, [
+				max,
+				min,
+				onChange
+			]);
+			useEffect(() => {
+				if (value < min) internalOnChange(min);
+				else if (value > max) internalOnChange(max);
+				else setSelectedIndex(() => value !== null && value !== void 0 ? value : min);
+			}, [
+				value,
+				max,
+				min,
+				internalOnChange
+			]);
+			useEffect(() => {
+				const setWidthResize = () => {
+					var _refSlider$current2;
+					setWidth(Number((_refSlider$current2 = refSlider.current) === null || _refSlider$current2 === void 0 ? void 0 : _refSlider$current2.offsetWidth));
+				};
+				window.addEventListener("resize", setWidthResize);
+				return () => {
+					window.removeEventListener("resize", setWidthResize);
+				};
+			}, []);
+			const leftPosition = useMemo(() => (selectedIndex - min) * 100 / (max - min), [
+				selectedIndex,
+				max,
+				min
+			]);
+			const getBackgroundSize = useMemo(() => ({ backgroundSize: `${leftPosition}% 100%` }), [leftPosition]);
+			const styledValue = (valueNumber) => input && !options ? /* @__PURE__ */ jsx(NumberInput, {
+				"aria-label": "input",
+				className: sliderStyle.numberInput,
+				controls: false,
+				"data-testid": dataTestId ? `${dataTestId}-input` : "slider-input",
+				disabled,
+				max,
+				min,
+				onBlur: (event) => {
+					internalOnChange(Number.parseFloat(event.target.value));
+				},
+				onChange: setInputValue,
+				size: "small",
+				step,
+				unit: typeof suffix === "string" ? suffix : unit,
+				value: inputValue
+			}) : /* @__PURE__ */ jsxs(Text, {
+				as: "span",
+				className: sliderStyle.doubleText({
+					isDouble: direction !== "column",
+					isPadded: direction === "column"
 				}),
-				/* @__PURE__ */ jsxs(Stack, {
-					direction: "column",
-					gap: 1,
-					justifyContent: "center",
-					width: "100%",
-					children: [/* @__PURE__ */ jsx(Tooltip, {
-						className: sliderStyle.tooltip,
-						placement: tooltipPosition,
-						style: assignInlineVars({ [tooltipLeft]: `${placementTooltip}px` }),
-						text: tooltipText,
-						children: /* @__PURE__ */ jsx("input", {
-							"aria-describedby": ariaDescribedBy,
-							"aria-disabled": disabled,
-							"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
-							className: cn(className, sliderStyle.single({
-								direction,
-								disabled,
-								error: !!error
-							}), sliderStyle.thumbStyle({
-								disabled,
-								isDouble: false
-							})),
-							"data-direction": direction,
-							"data-error": !!error,
-							"data-testid": dataTestId,
-							disabled: !!disabled,
-							id: finalId,
+				"data-testid": dataTestId ? `${dataTestId}-value` : "slider-value",
+				placement: direction === "column" ? "right" : "center",
+				sentiment: "neutral",
+				variant: "bodySmall",
+				children: [
+					prefix,
+					valueNumber,
+					suffix !== null && suffix !== void 0 ? suffix : unit
+				]
+			});
+			const tooltipText = useMemo(() => {
+				if (tooltip === true) return selectedIndex;
+				if (tooltip) return tooltip;
+			}, [tooltip, selectedIndex]);
+			const placementTooltip = (selectedIndex - min) / (max - min) * (sliderWidth - 16) + 16 / 2 - sliderWidth / 2;
+			const valueToShow = (options === null || options === void 0 ? void 0 : options[selectedIndex]) ? options[selectedIndex].value : selectedIndex;
+			const displayCorrectValue = input || !(customValueDisplay !== void 0) ? styledValue(valueToShow) : customValueDisplay;
+			return /* @__PURE__ */ jsxs(Stack, {
+				direction,
+				gap: 1,
+				justifyContent: "left",
+				children: [
+					label ? /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						justifyContent: "space-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: finalId,
+							labelDescription,
+							required,
+							children: label
+						}), direction === "column" ? displayCorrectValue : null]
+					}) : null,
+					/* @__PURE__ */ jsx(Stack, {
+						direction: "row",
+						justifyContent: "flex-end",
+						children: direction === "column" && !label ? displayCorrectValue : null
+					}),
+					/* @__PURE__ */ jsxs(Stack, {
+						direction: "column",
+						gap: 1,
+						justifyContent: "center",
+						width: "100%",
+						children: [/* @__PURE__ */ jsx(Tooltip, {
+							className: sliderStyle.tooltip,
+							placement: tooltipPosition,
+							style: assignInlineVars({ [tooltipLeft]: `${placementTooltip}px` }),
+							text: tooltipText,
+							children: /* @__PURE__ */ jsx("input", {
+								"aria-describedby": ariaDescribedBy,
+								"aria-disabled": disabled,
+								"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+								className: cn(className, sliderStyle.single({
+									direction,
+									disabled,
+									error: !!error
+								}), sliderStyle.thumbStyle({
+									disabled,
+									isDouble: false
+								})),
+								"data-direction": direction,
+								"data-error": !!error,
+								"data-testid": dataTestId,
+								disabled: !!disabled,
+								id: finalId,
+								max,
+								min,
+								name,
+								onBlur,
+								onChange: (event) => {
+									internalOnChange(Number.parseFloat(event.target.value));
+								},
+								onFocus,
+								ref: refSlider,
+								step,
+								style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+									[leftVar]: `calc(${leftPosition}% - ${16 * leftPosition / 100}px)`,
+									[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+								})), getBackgroundSize),
+								tabIndex: 0,
+								type: "range",
+								value: selectedIndex
+							})
+						}), options ? /* @__PURE__ */ jsx(Options, {
+							defaultScale,
 							max,
 							min,
-							name,
-							onBlur,
-							onChange: (event) => {
-								internalOnChange(Number.parseFloat(event.target.value));
-							},
-							onFocus,
-							ref: refSlider,
 							step,
-							style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-								[leftVar]: `calc(${leftPosition}% - ${16 * leftPosition / 100}px)`,
-								[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
-							})), getBackgroundSize),
-							tabIndex: 0,
-							type: "range",
+							ticks,
 							value: selectedIndex
-						})
-					}), options ? /* @__PURE__ */ jsx(Options, {
-						defaultScale,
-						max,
-						min,
-						step,
-						ticks,
-						value: selectedIndex
-					}) : null]
-				}),
-				direction === "row" ? displayCorrectValue : null
-			]
-		});
-	};
-});
+						}) : null]
+					}),
+					direction === "row" ? displayCorrectValue : null
+				]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_SingleSlider();