Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-CKQMccvm.cjs");
const require_components_Select_index = require("../Select/index.cjs");
const require_components_Input_index = require("../Input/index.cjs");
let clsx = require("clsx");
clsx = require_chunk.__toESM(clsx);
let lucide_react = require("lucide-react");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let lodash_es_debounce = require("lodash-es/debounce");
lodash_es_debounce = require_chunk.__toESM(lodash_es_debounce);
let _radix_ui_react_slider = require("@radix-ui/react-slider");
_radix_ui_react_slider = require_chunk.__toESM(_radix_ui_react_slider);
//#region src/components/Slider/Slider.tsx
const formatNumber = (num) => {
	if (num === void 0) return "";
	if (num >= 1e3) return new Intl.NumberFormat("en-US", {
		notation: "compact",
		compactDisplay: "short"
	}).format(num).toLowerCase();
	return String(num);
};
const Slider = (0, react.forwardRef)(({ variant, min, max, step, disabled, value, defaultValue, onValueChange, className, style, leftContent, rightContent, ...props }, ref) => {
	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue && defaultValue.length > 0 ? defaultValue : [min]);
	const isControlled = value !== void 0;
	const valueToShow = isControlled ? value : internalValue;
	const isRange = valueToShow && valueToShow.length > 1;
	const thumbs = (0, react.useMemo)(() => {
		const thumbClass = "openui-slider-thumb-handle";
		const valueIndicatorClass = "openui-slider-thumb-value";
		if (isRange) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: valueToShow?.map((v, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slider.Thumb, {
			className: "openui-slider-thumb",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: thumbClass,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "openui-slider-thumb-handle-inner",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "openui-slider-thumb-handle-inner-dot" })
				}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: valueIndicatorClass,
					children: formatNumber(v)
				})]
			})
		}, i)) });
		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slider.Thumb, {
			className: "openui-slider-thumb",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: thumbClass,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "openui-slider-thumb-handle-inner",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "openui-slider-thumb-handle-inner-dot" })
				}), !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: valueIndicatorClass,
					children: formatNumber(valueToShow?.[0])
				})]
			})
		});
	}, [
		disabled,
		valueToShow,
		isRange
	]);
	const renderDots = () => {
		if (variant === "discrete" && step) {
			const numSteps = Math.floor((max - min) / step);
			const currentValue = valueToShow?.[0] ?? min;
			return Array.from({ length: numSteps + 1 }, (_, index) => {
				const value = min + step * index;
				const position = (value - min) / (max - min) * 100;
				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: (0, clsx.default)("openui-slider-dots-dot", { "openui-slider-dots-dot--active": isRange ? value >= (valueToShow?.[0] ?? min) && value <= (valueToShow?.[1] ?? max) : value <= currentValue }),
					style: { left: `${position}%` }
				}, value);
			});
		}
		return null;
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "openui-slider-wrapper",
		children: [
			leftContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "openui-slider-left-content",
				children: leftContent
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "openui-slider-container-wrapper",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "openui-slider-container",
					children: /* @__PURE__ */ (0, react.createElement)(_radix_ui_react_slider.Root, {
						ref,
						className: (0, clsx.default)("openui-slider-root", { "openui-slider--disabled": disabled }, className),
						...props,
						min,
						max,
						step,
						value: valueToShow,
						onValueChange: (val) => {
							if (!isControlled) setInternalValue(val);
							onValueChange?.(val);
						},
						minStepsBetweenThumbs: 1,
						disabled,
						key: variant,
						style
					}, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_slider.Track, {
						className: "openui-slider-track",
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slider.Range, { className: (0, clsx.default)("openui-slider-range", { "openui-slider-range--at-min": !isRange && valueToShow?.[0] === min }) }), variant === "discrete" && renderDots()]
					}), thumbs)
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "openui-slider-labels",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatNumber(min) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatNumber(max) })]
				})]
			}),
			rightContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "openui-slider-right-content",
				children: rightContent
			})
		]
	});
});
//#endregion
//#region src/components/Slider/SliderBlock.tsx
const ValueInput = ({ value, onChange, error, disabled }) => {
	const [inputValue, setInputValue] = (0, react.useState)(value);
	const [isFocused, setIsFocused] = (0, react.useState)(false);
	(0, react.useEffect)(() => {
		if (!isFocused) setInputValue(value);
	}, [value, isFocused]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: "openui-slider-block__validated-input",
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Input_index.Input, {
			type: "text",
			value: inputValue,
			onChange: (e) => {
				const { value: newValue } = e.target;
				setInputValue(newValue);
				if (!isNaN(Number(newValue))) onChange(Number(newValue));
			},
			className: (0, clsx.default)("openui-slider-block__input", { "openui-slider-block__input-error": error }),
			disabled,
			onFocus: () => setIsFocused(true),
			onBlur: () => setIsFocused(false)
		})
	});
};
const SliderBlock = (props) => {
	const { label, name, variant, min = 0, max = 100, step, defaultValue, disabled, ...sliderProps } = props;
	const [value, setValue] = (0, react.useState)(defaultValue ?? [min]);
	const { min: minError, max: maxError } = (0, react.useMemo)(() => {
		const [minValue, maxValue] = value;
		const checkValue = (v) => {
			if (isNaN(v)) return "Invalid number";
			if (v < min || v > max) return `Value must be between ${min} and ${max}`;
			return "";
		};
		const error = {
			min: checkValue(minValue),
			max: checkValue(maxValue)
		};
		if (value.length > 1 && minValue > maxValue) error.min = "Min must be less than max";
		return error;
	}, [
		value,
		min,
		max
	]);
	const onValueCommitRef = (0, react.useRef)(sliderProps?.onValueCommit);
	onValueCommitRef.current = sliderProps.onValueCommit;
	const debouncedOnValueCommit = (0, react.useMemo)(() => (0, lodash_es_debounce.default)((newValue) => {
		onValueCommitRef.current?.(newValue);
	}, 200), []);
	(0, react.useEffect)(() => {
		return () => {
			debouncedOnValueCommit.flush();
		};
	}, [debouncedOnValueCommit]);
	const setValueAndCommit = (0, react.useCallback)((newValue) => {
		setValue(newValue);
		debouncedOnValueCommit(newValue);
	}, [debouncedOnValueCommit]);
	(0, react.useEffect)(() => {
		setValue(defaultValue ?? [min]);
	}, [defaultValue, min]);
	const isRange = value.length > 1;
	const isDiscrete = variant === "discrete";
	const effectiveStep = isDiscrete ? step ?? 1 : Math.max(1, step ?? 1);
	const controlElements = (0, react.useMemo)(() => {
		if (isDiscrete) {
			const allOptions = Array.from({ length: Math.floor((max - min) / effectiveStep) + 1 }, (_, i) => min + i * effectiveStep);
			return isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "openui-slider-block__controls is-range",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "openui-slider-block__validated-select-container",
					children: [
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Select_index.Select, {
							value: String(value[0]),
							disabled,
							onValueChange: (val) => setValueAndCommit([Number(val), value[1] ?? max].sort((a, b) => a - b)),
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectValue, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectContent, { children: allOptions.filter((o) => o < (value[1] ?? max)).map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectItem, {
								value: String(o),
								children: String(o)
							}, o)) })]
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "openui-slider-block__separator" }),
						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Select_index.Select, {
							value: String(value[1]),
							disabled,
							onValueChange: (val) => setValueAndCommit([value[0] ?? min, Number(val)].sort((a, b) => a - b)),
							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectValue, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectContent, { children: allOptions.filter((o) => o > (value[0] ?? min)).map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectItem, {
								value: String(o),
								children: String(o)
							}, o)) })]
						})
					]
				})
			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "openui-slider-block__controls is-single",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Select_index.Select, {
					value: String(value[0]),
					disabled,
					onValueChange: (val) => setValueAndCommit([Number(val)]),
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectValue, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectContent, { children: allOptions.map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_index.SelectItem, {
						value: String(o),
						children: String(o)
					}, o)) })]
				})
			});
		} else return isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "openui-slider-block__controls openui-slider-block__controls--inputs is-range",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "openui-slider-block__validated-input-container",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueInput, {
						value: value[0] ?? min,
						onChange: (newMin) => setValueAndCommit([newMin, value[1] ?? max]),
						error: minError,
						disabled
					}),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "openui-slider-block__separator" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueInput, {
						value: value[1] ?? max,
						onChange: (newMax) => setValueAndCommit([value[0] ?? min, newMax]),
						error: maxError,
						disabled
					})
				]
			}), (minError || maxError) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "openui-slider-block__error-message",
				children: [
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { size: 14 }),
					" ",
					minError || maxError
				]
			})]
		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "openui-slider-block__controls openui-slider-block__controls--inputs is-single",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueInput, {
				value: value[0] ?? min,
				onChange: (newVal) => setValueAndCommit([newVal]),
				error: minError,
				disabled
			}), minError && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "openui-slider-block__error-message",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { size: 14 }), minError]
			})]
		});
	}, [
		isDiscrete,
		isRange,
		value,
		min,
		max,
		effectiveStep,
		minError,
		maxError,
		disabled,
		setValueAndCommit
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: "openui-slider-block",
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: (0, clsx.default)("openui-slider-block__header", { "openui-slider-block__header--with-error": !isDiscrete && (isRange ? Boolean(minError || maxError) : Boolean(minError)) }),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				className: "openui-slider-block__label",
				children: label
			}), controlElements]
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
			className: "openui-slider-block__content",
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
				...sliderProps,
				value,
				onValueChange: (v) => {
					setValueAndCommit([...v].sort((a, b) => a - b));
				},
				min,
				max,
				step: effectiveStep,
				variant,
				name,
				disabled
			})
		})]
	});
};
//#endregion
exports.Slider = Slider;
exports.SliderBlock = SliderBlock;

//# sourceMappingURL=index.cjs.map