"use client";
import { cn } from "./index3.js";
import { Label } from "./index10.js";
import { FieldTooltip } from "./index19.js";
import { hasFieldProps, splitFieldProps } from "./index20.js";
import { Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight } from "./index22.js";
import { colorClasses, trackSizeClasses, useAutoDirection } from "./index33.js";
import { forwardRef, useId, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { DirectionProvider } from "@base-ui/react/direction-provider";
import { Slider } from "@base-ui/react/slider";
//#region src/components/atoms/forms/Slider/Slider.tsx
var toArray = (val) => {
	if (val === void 0) return void 0;
	if (typeof val === "number") return [val];
	return [...val];
};
var SliderTooltip = ({ id, value, format }) => {
	return /* @__PURE__ */ jsxs("div", {
		id,
		role: "tooltip",
		className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 flex flex-col items-center",
		children: [/* @__PURE__ */ jsx("div", {
			className: "bg-foreground px-3 py-1.5 rounded-md",
			children: /* @__PURE__ */ jsx("span", {
				className: "text-xs font-normal text-background whitespace-nowrap",
				children: format ? format(value) : `${value}%`
			})
		}), /* @__PURE__ */ jsx("svg", {
			width: "8",
			height: "4",
			viewBox: "0 0 8 4",
			fill: "none",
			className: "text-foreground",
			"aria-hidden": "true",
			children: /* @__PURE__ */ jsx("path", {
				d: "M4 4L0 0H8L4 4Z",
				fill: "currentColor"
			})
		})]
	});
};
/**
* Base slider component with support for single/range modes
*/
var SliderBase = forwardRef(({ className, defaultValue, value, min = 0, max = 100, size = "md", color = "primary", thumbCount, onValueChange, ...props }, forwardedRef) => {
	const count = thumbCount ?? (Array.isArray(value) ? value.length : Array.isArray(defaultValue) ? defaultValue.length : 1);
	const colors = colorClasses[color];
	return /* @__PURE__ */ jsx(Slider.Root, {
		ref: forwardedRef,
		className: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
		"data-slot": "slider",
		"data-color": color,
		"data-size": size,
		defaultValue,
		value,
		min,
		max,
		onValueChange,
		...props,
		children: /* @__PURE__ */ jsxs(Slider.Control, {
			className: cn("group/slider data-[orientation=vertical]:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
			children: [/* @__PURE__ */ jsx(Slider.Track, {
				"data-slot": "slider-track",
				className: cn("rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full relative overflow-hidden select-none transition-transform duration-200 ease-out origin-center data-[orientation=horizontal]:group-hover/slider:scale-y-[1.5] data-[orientation=vertical]:group-hover/slider:scale-x-[1.5] motion-reduce:transition-none motion-reduce:group-hover/slider:scale-100", trackSizeClasses[size], colors.track),
				children: /* @__PURE__ */ jsx(Slider.Indicator, {
					"data-slot": "slider-range",
					className: cn("select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", colors.indicator)
				})
			}), Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
				"data-slot": "slider-thumb",
				className: cn("relative size-5 rounded-full border-2 bg-background shadow-sm transition-[color,box-shadow,transform] duration-150 ease-out hover:ring-4 hover:scale-110 focus-visible:ring-4 focus-visible:scale-110 active:scale-105 data-[dragging]:shadow-md data-[dragging]:scale-110 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 motion-reduce:active:scale-100 motion-reduce:data-[dragging]:scale-100 before:absolute before:-inset-3 before:rounded-full", colors.thumb)
			}, index))]
		})
	});
});
SliderBase.displayName = "SliderBase";
var SliderControl = forwardRef(({ mode = "single", size = "md", color = "primary", label, labelMode = "none", valueFormat, showMinMax, hint, min = 0, max = 100, value, defaultValue, className, onValueChange, dir, ...props }, forwardedRef) => {
	const { ref, direction } = useAutoDirection(dir);
	const tooltipIdBase = useId();
	const computedDefaultValue = useMemo(() => {
		if (value !== void 0) return void 0;
		const defaultArr = toArray(defaultValue);
		if (defaultArr !== void 0) return defaultArr;
		return mode === "range" ? [min, max] : [min];
	}, [
		defaultValue,
		mode,
		min,
		max,
		value
	]);
	const [internalValue, setInternalValue] = useState(toArray(value) ?? computedDefaultValue ?? (mode === "range" ? [min, max] : [min]));
	const currentValue = toArray(value) ?? internalValue;
	const handleValueChange = (newValue) => {
		const arr = toArray(newValue) ?? [];
		if (value === void 0) setInternalValue(arr);
		onValueChange?.(arr);
	};
	const formatValue = (val) => {
		if (valueFormat) return valueFormat(val);
		return `${val}%`;
	};
	const getThumbPosition = (val) => {
		return (val - min) / (max - min) * 100;
	};
	const valueMarkerTranslate = direction === "rtl" ? "translateX(50%)" : "translateX(-50%)";
	const containerHeight = labelMode === "bottom" ? "h-14" : labelMode === "floating" ? "h-12" : "h-6";
	return /* @__PURE__ */ jsx("div", {
		ref,
		className: cn("w-full space-y-3", className),
		children: /* @__PURE__ */ jsxs(DirectionProvider, {
			direction,
			children: [
				label && /* @__PURE__ */ jsx(Label, {
					className: "text-sm font-medium",
					children: label
				}),
				/* @__PURE__ */ jsxs("div", {
					className: cn("relative w-full", containerHeight),
					children: [
						labelMode === "floating" && currentValue.map((val, index) => /* @__PURE__ */ jsx("div", {
							className: "absolute top-0 transition-[inset-inline-start] duration-100 ease-out motion-reduce:transition-none",
							style: {
								insetInlineStart: `${getThumbPosition(val)}%`,
								transform: valueMarkerTranslate
							},
							children: /* @__PURE__ */ jsx(SliderTooltip, {
								id: `${tooltipIdBase}-tooltip-${index}`,
								value: val,
								format: valueFormat
							})
						}, index)),
						/* @__PURE__ */ jsx("div", {
							className: cn("absolute inset-x-0", labelMode === "floating" ? "top-8" : "top-2"),
							children: /* @__PURE__ */ jsx(SliderBase, {
								ref: forwardedRef,
								min,
								max,
								size,
								color,
								thumbCount: currentValue.length,
								value: currentValue,
								defaultValue: computedDefaultValue,
								onValueChange: handleValueChange,
								...props
							})
						}),
						labelMode === "bottom" && currentValue.map((val, index) => /* @__PURE__ */ jsx("div", {
							className: "absolute bottom-0 transition-[inset-inline-start] duration-100 ease-out motion-reduce:transition-none",
							style: {
								insetInlineStart: `${getThumbPosition(val)}%`,
								transform: valueMarkerTranslate
							},
							children: /* @__PURE__ */ jsx("span", {
								className: "text-base font-medium text-foreground whitespace-nowrap",
								children: formatValue(val)
							})
						}, index))
					]
				}),
				showMinMax && /* @__PURE__ */ jsxs("div", {
					className: "flex justify-between text-xs text-muted-foreground",
					children: [/* @__PURE__ */ jsx("span", { children: min }), /* @__PURE__ */ jsx("span", { children: max })]
				}),
				hint && /* @__PURE__ */ jsx("p", {
					className: "text-sm text-muted-foreground",
					children: hint
				})
			]
		})
	});
});
SliderControl.displayName = "SliderControl";
var Slider$1 = forwardRef((props, forwardedRef) => {
	const [fieldPropsObj, controlProps] = splitFieldProps(props);
	if (!hasFieldProps(fieldPropsObj)) return /* @__PURE__ */ jsx(SliderControl, {
		ref: forwardedRef,
		...controlProps,
		label: fieldPropsObj.label
	});
	const { label, required, labelIcon, tooltip, topRight, description, bottomRight, error, fieldClassName } = fieldPropsObj;
	const cp = controlProps;
	const hasTopRow = label || topRight;
	const hasBottomRow = description || bottomRight || error;
	return /* @__PURE__ */ jsxs(Field, {
		state: error ? "destructive" : void 0,
		disabled: cp.disabled,
		className: fieldClassName,
		children: [
			hasTopRow && /* @__PURE__ */ jsxs(FieldTop, { children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
				required,
				labelIcon,
				children: [label, tooltip && /* @__PURE__ */ jsx(FieldTooltip, { content: tooltip })]
			}), topRight && /* @__PURE__ */ jsx(FieldTopRight, { children: topRight })] }),
			/* @__PURE__ */ jsx(FieldControl, { children: () => /* @__PURE__ */ jsx(SliderControl, {
				ref: forwardedRef,
				...cp
			}) }),
			hasBottomRow && /* @__PURE__ */ jsxs(FieldBottom, { children: [
				error && /* @__PURE__ */ jsx(FieldError, { children: error }),
				!error && description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
				bottomRight && /* @__PURE__ */ jsx(FieldBottomRight, {
					className: "ms-auto",
					children: bottomRight
				})
			] })
		]
	});
});
Slider$1.displayName = "Slider";
//#endregion
export { Slider$1 as Slider, SliderBase };

//# sourceMappingURL=index34.js.map