@ultraviolet/ui 3.24.2 → 3.25.0

package/dist/components/Data Entry/Slider/components/DoubleSlider.js

@@ -0,0 +1,301 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { Stack, init_Stack } from "../../../Layout/Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../Overlay/Tooltip/index.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { Label, init_Label } from "../../../Typography/Label/index.js";
+import { NumberInput, init_NumberInput } from "../../NumberInput/index.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";
+
+//#region src/components/Data Entry/Slider/components/DoubleSlider.tsx
+var DoubleSlider;
+function init_DoubleSlider() {
+	return (init_DoubleSlider = __esmMin(() => {
+		init_Stack();
+		init_Tooltip();
+		init_Label();
+		init_Text();
+		init_NumberInput();
+		init_Options();
+		init_styles_css();
+		init_objectSpread2();
+		DoubleSlider = ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min = 0, max = 100, step = 1, id, onBlur, onFocus, options, unit, label, className, input, prefix, suffix, required, tooltipPosition, "aria-label": ariaLabel, labelDescription, defaultScale = false, customValueDisplay, "aria-describedby": ariaDescribedBy }) => {
+			var _selectedIndexes$;
+			var _selectedIndexes$2;
+			const theme = useTheme();
+			const localId = useId();
+			const finalId = id !== null && id !== void 0 ? id : localId;
+			const refSlider = useRef(null);
+			const safeValue = value && Array.isArray(value) && value.length === 2 ? value : [min !== null && min !== void 0 ? min : 0, max !== null && max !== void 0 ? max : 1];
+			const [selectedIndexes, setSelectedIndexes] = useState(safeValue);
+			const [sliderWidth, setWidth] = useState(0);
+			const [inputValue, setInputValue] = useState(safeValue);
+			useEffect(() => {
+				setInputValue(selectedIndexes);
+			}, [selectedIndexes]);
+			useEffect(() => {
+				var _refSlider$current;
+				setWidth(Number((_refSlider$current = refSlider.current) === null || _refSlider$current === void 0 ? void 0 : _refSlider$current.offsetWidth));
+			}, [refSlider]);
+			const activeValue = (side) => {
+				if (side === "left") {
+					if (selectedIndexes[0] === null) return 0;
+					if (selectedIndexes[1] !== null && selectedIndexes[1] < selectedIndexes[0]) return 1;
+					return 0;
+				}
+				if (selectedIndexes[1] === null) return 1;
+				if (selectedIndexes[0] !== null && selectedIndexes[1] < selectedIndexes[0]) return 0;
+				return 1;
+			};
+			const ticks = useMemo(() => {
+				if (options && defaultScale) return options;
+				if (options) return options.map((element, index) => ({
+					label: element.label,
+					value: index
+				}));
+				return [];
+			}, [options, defaultScale]);
+			const internalOnChangeRef = useCallback((localValue) => {
+				var _localValue$;
+				var _localValue$2;
+				let leftSliderValue = (_localValue$ = localValue[0]) !== null && _localValue$ !== void 0 ? _localValue$ : min;
+				let rightSliderValue = (_localValue$2 = localValue[1]) !== null && _localValue$2 !== void 0 ? _localValue$2 : max;
+				leftSliderValue = Math.max(min, Math.min(leftSliderValue, max));
+				rightSliderValue = Math.max(min, Math.min(rightSliderValue, max));
+				const newValues = [leftSliderValue, rightSliderValue];
+				setSelectedIndexes(newValues);
+				onChange === null || onChange === void 0 || onChange([Math.min(...newValues), Math.max(...newValues)]);
+			}, [
+				max,
+				min,
+				onChange
+			]);
+			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 handleMinChange = (newValue) => {
+				internalOnChangeRef([newValue, selectedIndexes[1]]);
+			};
+			const handleMaxChange = (newValue) => {
+				internalOnChangeRef([selectedIndexes[0], newValue]);
+			};
+			const handleChangeInput = (val, side) => {
+				if (side === "left") setInputValue([val, selectedIndexes[1]]);
+				else if (side === "right") setInputValue([selectedIndexes[0], val]);
+			};
+			const onBlurInput = (event, side) => {
+				if (event.target.value) {
+					const newValue = Number.parseFloat(event.target.value);
+					if (side === "left") internalOnChangeRef([newValue, selectedIndexes[1]]);
+					else internalOnChangeRef([selectedIndexes[0], newValue]);
+				} else if (side === "left") {
+					if (activeValue("left") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+					else internalOnChangeRef([selectedIndexes[0], max]);
+				} else if (side === "right") {
+					if (activeValue("right") === 0) internalOnChangeRef([min, selectedIndexes[1]]);
+					else internalOnChangeRef([selectedIndexes[0], max]);
+				}
+			};
+			const styledValue = (valueNumber, side) => {
+				const isRowDirection = direction !== "column";
+				const index = side === "left" ? 0 : 1;
+				return input && !options ? /* @__PURE__ */ jsx(NumberInput, {
+					"aria-label": `input-${side}`,
+					controls: false,
+					"data-testid": `slider-input-${side}`,
+					disabled,
+					max,
+					min,
+					onBlur: (event) => onBlurInput(event, side),
+					onChange: (newVal) => {
+						handleChangeInput(newVal, side);
+					},
+					size: "small",
+					step,
+					unit: typeof suffix === "string" ? suffix : unit,
+					value: inputValue === null || inputValue === void 0 ? void 0 : inputValue[index]
+				}) : /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					className: sliderStyle.doubleText({
+						isDouble: true,
+						isPadded: isRowDirection
+					}),
+					"data-testid": dataTestId ? `${dataTestId}-value-${side}` : `value-${side}`,
+					placement: isRowDirection ? "center" : "right",
+					sentiment: "neutral",
+					variant: "bodySmall",
+					children: [
+						prefix,
+						valueNumber,
+						suffix ? suffix[index] : unit
+					]
+				});
+			};
+			const minPos = (Math.min(...selectedIndexes) - min) * 100 / (max - min);
+			const maxPos = (Math.max(...selectedIndexes) - min) * 100 / (max - min);
+			const tooltipText = useMemo(() => {
+				if (tooltip === true) return [Math.min(...selectedIndexes), Math.max(...selectedIndexes)];
+				if (Array.isArray(tooltip)) return tooltip;
+				if (typeof tooltip === "string") return tooltip;
+				return [null, null];
+			}, [tooltip, selectedIndexes]);
+			const placementTooltip = [(selectedIndexes[0] - min) / (max - min) * (sliderWidth - 16) + 16 / 2 - sliderWidth / 2, (selectedIndexes[1] - min) / (max - min) * (sliderWidth - 16) + 16 / 2 - sliderWidth / 2];
+			const [leftToShow, rightToShow] = options && !defaultScale ? [options[selectedIndexes[0]].value, options[selectedIndexes[1]].value] : selectedIndexes;
+			const leftSliderProgress = (((_selectedIndexes$ = selectedIndexes[0]) !== null && _selectedIndexes$ !== void 0 ? _selectedIndexes$ : 0) - min) * 100 / (max - min);
+			const rightSliderProgress = (((_selectedIndexes$2 = selectedIndexes[1]) !== null && _selectedIndexes$2 !== void 0 ? _selectedIndexes$2 : 0) - min) * 100 / (max - min);
+			useEffect(() => {
+				setSelectedIndexes(() => {
+					const newSafeValue = value && Array.isArray(value) && value.length === 2 ? value : [min, max];
+					if (min > newSafeValue[0]) newSafeValue[0] = min;
+					if (max < newSafeValue[1]) newSafeValue[1] = max;
+					return newSafeValue;
+				});
+			}, [
+				min,
+				max,
+				value
+			]);
+			return /* @__PURE__ */ jsxs(Stack, {
+				direction: "column",
+				gap: 1,
+				justifyContent: "left",
+				children: [label ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					justifyContent: "space-between",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor: finalId,
+						labelDescription,
+						required,
+						children: label
+					}), customValueDisplay]
+				}) : null, /* @__PURE__ */ jsxs(Stack, {
+					direction,
+					gap: 1,
+					width: "100%",
+					children: [
+						direction === "column" ? /* @__PURE__ */ jsxs(Stack, {
+							direction: "row",
+							justifyContent: "space-between",
+							children: [styledValue(leftToShow, "left"), styledValue(rightToShow, "right")]
+						}) : styledValue(leftToShow, "left"),
+						/* @__PURE__ */ jsx(Tooltip, {
+							className: sliderStyle.tooltip,
+							placement: tooltipPosition,
+							style: assignInlineVars({ [tooltipLeft]: `${(placementTooltip[0] + placementTooltip[1]) / 2}px` }),
+							text: typeof tooltipText === "string" ? tooltipText : void 0,
+							children: (tooltipProps) => /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: sliderStyle.doubleWrapper }, tooltipProps), {}, { children: [
+								/* @__PURE__ */ jsx("div", {
+									className: sliderStyle.customRail,
+									children: /* @__PURE__ */ jsx("div", {
+										"aria-disabled": !!disabled,
+										className: sliderStyle.innerRail({
+											disabled: !!disabled,
+											error: !!error
+										}),
+										"data-error": !!error,
+										style: {
+											left: `${minPos}%`,
+											right: `${100 - maxPos}%`
+										}
+									})
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									className: sliderStyle.tooltip,
+									placement: tooltipPosition,
+									style: assignInlineVars({ [tooltipLeft]: `${placementTooltip[0]}px` }),
+									text: Array.isArray(tooltipText) ? tooltipText[0] : void 0,
+									children: /* @__PURE__ */ jsx("input", {
+										"aria-describedby": ariaDescribedBy,
+										"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+										className: cn(className, sliderStyle.double({ disabled }), sliderStyle.thumbStyle({ disabled })),
+										"data-direction": direction,
+										"data-error": error,
+										"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "handle"}-left`,
+										disabled: !!disabled,
+										id: finalId,
+										max,
+										min,
+										name,
+										onBlur,
+										onChange: (event) => {
+											event.preventDefault();
+											handleMinChange(Number.parseFloat(event.target.value));
+										},
+										onFocus,
+										ref: refSlider,
+										step,
+										style: assignInlineVars({
+											[leftVar]: `calc(${leftSliderProgress}% - ${16 * leftSliderProgress / 100}px)`,
+											[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+										}),
+										type: "range",
+										value: selectedIndexes[0]
+									})
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									className: sliderStyle.tooltip,
+									placement: tooltipPosition,
+									style: assignInlineVars({ [tooltipLeft]: `${placementTooltip[1]}px` }),
+									text: Array.isArray(tooltipText) ? tooltipText[1] : void 0,
+									children: /* @__PURE__ */ jsx("input", {
+										"aria-describedby": ariaDescribedBy,
+										"aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name,
+										className: cn(className, sliderStyle.double({ disabled }), sliderStyle.thumbStyle({ disabled })),
+										"data-direction": direction,
+										"data-error": error,
+										"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "handle"}-right`,
+										disabled: !!disabled,
+										id: finalId,
+										max,
+										min,
+										name,
+										onBlur,
+										onChange: (event) => {
+											event.preventDefault();
+											handleMaxChange(Number.parseFloat(event.target.value));
+										},
+										onFocus,
+										step,
+										style: assignInlineVars({
+											[leftVar]: `calc(${rightSliderProgress}% - ${16 * rightSliderProgress / 100}px)`,
+											[thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
+										}),
+										type: "range",
+										value: selectedIndexes[1]
+									})
+								}),
+								options ? /* @__PURE__ */ jsx(Options, {
+									defaultScale,
+									max,
+									min,
+									step,
+									ticks,
+									value: selectedIndexes
+								}) : null
+							] }))
+						}),
+						direction === "row" ? styledValue(rightToShow, "right") : null
+					]
+				})]
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_DoubleSlider();
+export { DoubleSlider, init_DoubleSlider };

package/dist/components/Data Entry/Slider/components/Options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Entry/Slider/components/Options.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAC3B,EAAE,CAAA;IACH,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,OAAO,mDAAoD,YAAY,gCA0CnF,CAAA"}

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

@@ -0,0 +1,49 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../Typography/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/Data Entry/Slider/components/Options.tsx
+var Options;
+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();
+export { Options, init_Options };

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

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Entry/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAIjD,eAAO,MAAM,YAAY,yUA6BtB,iBAAiB,gCA+MnB,CAAA"}

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

@@ -0,0 +1,218 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { Stack, init_Stack } from "../../../Layout/Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../Overlay/Tooltip/index.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { Label, init_Label } from "../../../Typography/Label/index.js";
+import { NumberInput, init_NumberInput } from "../../NumberInput/index.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";
+
+//#region src/components/Data Entry/Slider/components/SingleSlider.tsx
+var SingleSlider;
+function init_SingleSlider() {
+	return (init_SingleSlider = __esmMin(() => {
+		init_Stack();
+		init_Tooltip();
+		init_Label();
+		init_Text();
+		init_NumberInput();
+		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
+					}),
+					/* @__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 })),
+								"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,
+							step,
+							ticks,
+							value: selectedIndex
+						}) : null]
+					}),
+					direction === "row" ? displayCorrectValue : null
+				]
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_SingleSlider();
+export { SingleSlider, init_SingleSlider };

package/dist/components/Data Entry/Slider/constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/Slider/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,KAAK,CAAA"}

package/dist/components/Data Entry/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Data Entry/Slider/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;+BAQnB,EACrB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,SAAoB,EACpB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,MAAM,EACN,GAAS,EACT,IAAQ,EACR,EAAE,EACF,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,KAAK,EACL,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,YAAoB,EACpB,kBAAkB,EAAE,eAAe,GACpC,EAAE,WAAW"}