@ultraviolet/ui 3.11.1 → 3.12.0

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

@@ -1,41 +1,47 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Text } from "../../Text/index.js";
-import { leftOption, sliderDatalist, sliderOption } from "../styles.css.js";
+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 { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Slider/components/Options.tsx
-const Options = ({ ticks, min, max, value, step }) => /* @__PURE__ */ jsx("datalist", {
-	className: sliderDatalist({ double: Array.isArray(value) }),
-	"data-double": Array.isArray(value),
-	children: ticks.map((element, index, { length }) => {
-		var _element$label;
-		const left = (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: sliderOption({
-				left: index === 0,
-				right: index === length - 1
-			}),
-			"data-element-left": index === 0,
-			"data-element-right": index === length - 1,
-			"data-value": element.value,
-			style: assignInlineVars({ [leftOption]: `${left}%` }),
-			children: /* @__PURE__ */ jsx(Text, {
-				as: "p",
-				sentiment: isSelected ? "primary" : "neutral",
-				variant: isSelected ? "captionStrong" : "caption",
-				children: formatedElement
-			})
-		}, element.value);
-	})
+var Options;
+var init_Options = __esmMin(() => {
+	init_Text();
+	init_styles_css();
+	Options = ({ ticks, min, max, value, step }) => /* @__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 left = (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: index === length - 1
+				}),
+				"data-element-left": index === 0,
+				"data-element-right": index === length - 1,
+				"data-value": element.value,
+				style: assignInlineVars({ [leftOption]: `${left}%` }),
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					sentiment: isSelected ? "primary" : "neutral",
+					variant: isSelected ? "captionStrong" : "caption",
+					children: formatedElement
+				})
+			}, element.value);
+		})
+	});
 });
 
 //#endregion
-export { Options };
+init_Options();
+export { Options, init_Options };

package/dist/components/Slider/components/SingleSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAKjD,eAAO,MAAM,YAAY,mVAwQxB,CAAA"}
+{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAKjD,eAAO,MAAM,YAAY,mVA8PxB,CAAA"}

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

@@ -1,208 +1,218 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Stack } from "../../Stack/index.js";
-import { Tooltip } from "../../Tooltip/index.js";
-import { Text } from "../../Text/index.js";
-import { Label } from "../../Label/index.js";
-import { NumberInput } from "../../NumberInput/index.js";
-import { leftVar, sliderDoubleText, sliderNumberInput, sliderSingle, sliderThumbStyle, sliderTooltip, thumbColor, tooltipLeft } from "../styles.css.js";
-import { Options } from "./Options.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.115.0/helpers/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_constant } from "../constant.js";
+import { init_styles_css, leftVar, sliderStyle, thumbColor, tooltipLeft } from "../styles.css.js";
+import { Options, init_Options } from "./Options.js";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 
 //#region src/components/Slider/components/SingleSlider.tsx
-const 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 }) => {
-	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) return options.map((element, index) => ({
-			label: element.label,
-			value: index
-		}));
-		return [];
-	}, [options]);
-	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: sliderNumberInput,
-		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: sliderDoubleText({
-			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;
-	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, {
+var SingleSlider;
+var init_SingleSlider = __esmMin(() => {
+	init_Label();
+	init_NumberInput();
+	init_Stack();
+	init_Text();
+	init_Tooltip();
+	init_constant();
+	init_styles_css();
+	init_Options();
+	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 }) => {
+		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) return options.map((element, index) => ({
+				label: element.label,
+				value: index
+			}));
+			return [];
+		}, [options]);
+		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" && (input || !customValueDisplay) ? styledValue(valueToShow) : null,
-					direction === "column" && customValueDisplay && !input ? customValueDisplay : null
-				]
-			}) : null,
-			/* @__PURE__ */ jsxs(Stack, {
-				direction: "row",
-				justifyContent: "flex-end",
-				children: [direction === "column" && !label && (input || !customValueDisplay) ? styledValue(valueToShow) : null, direction === "column" && !label && customValueDisplay && !input ? customValueDisplay : null]
-			}),
-			/* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
-				gap: 1,
-				justifyContent: "center",
-				width: "100%",
-				children: [/* @__PURE__ */ jsx(Tooltip, {
-					className: sliderTooltip,
-					placement: tooltipPosition,
-					style: assignInlineVars({ [tooltipLeft]: `${placementTooltip}px` }),
-					text: tooltipText,
-					children: /* @__PURE__ */ jsx("input", {
-						"aria-disabled": disabled,
-						"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
-						className: cn(className, sliderSingle({
-							direction,
-							disabled,
-							error: !!error
-						}), sliderThumbStyle({
-							disabled,
-							isDouble: false
-						})),
-						"data-direction": direction,
-						"data-error": !!error,
-						"data-testid": dataTestId,
-						disabled: !!disabled,
-						id: finalId,
+					}), 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-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 / 2}px)`,
+								[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+							})), getBackgroundSize),
+							tabIndex: 0,
+							type: "range",
+							value: selectedIndex
+						})
+					}), options ? /* @__PURE__ */ jsx(Options, {
 						max,
 						min,
-						name,
-						onBlur,
-						onChange: (event) => {
-							internalOnChange(Number.parseFloat(event.target.value));
-						},
-						onFocus,
-						ref: refSlider,
 						step,
-						style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-							[leftVar]: `calc(${leftPosition}% - ${16 / 2}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, {
-					max,
-					min,
-					step,
-					ticks,
-					value: selectedIndex
-				}) : null]
-			}),
-			direction === "row" && (input || !customValueDisplay) ? styledValue(valueToShow) : null,
-			direction === "row" && customValueDisplay && !input ? customValueDisplay : null
-		]
-	});
-};
+					}) : null]
+				}),
+				direction === "row" ? displayCorrectValue : null
+			]
+		});
+	};
+});
 
 //#endregion
-export { SingleSlider };
+init_SingleSlider();
+export { SingleSlider, init_SingleSlider };

package/dist/components/Slider/constant.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Slider/constant.ts
+var init_constant = __esmMin(() => {});
+
+//#endregion
+init_constant();
+export { init_constant };