@blueshift-gg/ui-components 0.1.50 → 0.1.51

package/dist/Slider.mjs

@@ -1,338 +1,289 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { motion, anticipate } from 'motion/react';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { Icon } from './Icon';
-import classNames from 'classnames';
-import { CrosshairCorners } from './CrossHair';
+"use client";
 
+import { Icon } from "./Icon.mjs";
+import { CrosshairCorners } from "./CrossHair.mjs";
+import { anticipate, motion } from "motion/react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/Slider.tsx
 const abbreviateNumber = (num) => {
-  const absNum = Math.abs(num);
-  if (absNum >= 1e9) {
-    return Math.round(num / 1e9) + "B";
-  }
-  if (absNum >= 1e6) {
-    return Math.round(num / 1e6) + "M";
-  }
-  if (absNum >= 1e3) {
-    return Math.round(num / 1e3) + "K";
-  }
-  return num.toString();
+	const absNum = Math.abs(num);
+	if (absNum >= 1e9) return Math.round(num / 1e9) + "B";
+	if (absNum >= 1e6) return Math.round(num / 1e6) + "M";
+	if (absNum >= 1e3) return Math.round(num / 1e3) + "K";
+	return num.toString();
 };
-const Slider = ({
-  type = "range",
-  min = 0,
-  max = 100,
-  step = 1,
-  value = { min: 0, max: 100 },
-  header,
-  prefix,
-  onChange,
-  className,
-  abbreviateValues = true
-}) => {
-  const [currentValues, setCurrentValues] = useState({
-    min: value.min,
-    max: value.max
-  });
-  const [isDragging, setIsDragging] = useState(false);
-  const [activeThumb, setActiveThumb] = useState(null);
-  const [wasCenterDragging, setWasCenterDragging] = useState(false);
-  const sliderRef = useRef(null);
-  const [trackWidth, setTrackWidth] = useState(0);
-  const thumbSize = 27;
-  const minPercentage = (currentValues.min - min) / (max - min) * 100;
-  const maxPercentage = (currentValues.max - min) / (max - min) * 100;
-  const minThumbPosition = minPercentage / 100 * Math.max(0, trackWidth - thumbSize);
-  const maxThumbPosition = maxPercentage / 100 * Math.max(0, trackWidth - thumbSize);
-  const handleValueChange = useCallback(
-    (newMin, newMax) => {
-      const clampedMin = Math.max(min, Math.min(max, newMin));
-      const clampedMax = Math.max(min, Math.min(max, newMax));
-      const steppedMin = Math.round(clampedMin / step) * step;
-      const steppedMax = Math.round(clampedMax / step) * step;
-      const finalMin = Math.min(steppedMin, steppedMax);
-      const finalMax = Math.max(steppedMin, steppedMax);
-      setCurrentValues({ min: finalMin, max: finalMax });
-      onChange?.({ min: finalMin, max: finalMax });
-    },
-    [min, max, step, onChange]
-  );
-  const handlePointerMove = useCallback(
-    (clientX, thumb) => {
-      if (!sliderRef.current) return;
-      const rect = sliderRef.current.getBoundingClientRect();
-      const xWithinTrack = clientX - rect.left;
-      const clampedX = Math.max(
-        0,
-        Math.min(rect.width - thumbSize, xWithinTrack - thumbSize / 2)
-      );
-      const percentage = rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0;
-      const newValue = min + percentage * (max - min);
-      if (thumb === "min") {
-        handleValueChange(newValue, currentValues.max);
-      } else if (thumb === "max") {
-        handleValueChange(currentValues.min, newValue);
-      } else if (thumb === "center") {
-        const rangeWidth = currentValues.max - currentValues.min;
-        const halfRange = rangeWidth / 2;
-        const newMin = Math.max(
-          min,
-          Math.min(max - rangeWidth, newValue - halfRange)
-        );
-        const newMax = Math.min(
-          max,
-          Math.max(min + rangeWidth, newValue + halfRange)
-        );
-        handleValueChange(newMin, newMax);
-      }
-    },
-    [min, max, currentValues, handleValueChange]
-  );
-  const handlePointerDown = useCallback((thumb) => {
-    setIsDragging(true);
-    setActiveThumb(thumb);
-    if (thumb === "center") {
-      setWasCenterDragging(true);
-    }
-  }, []);
-  const handlePointerUp = useCallback(() => {
-    setIsDragging(false);
-    setActiveThumb(null);
-    setTimeout(() => setWasCenterDragging(false), 100);
-  }, []);
-  const handleTrackClick = useCallback(
-    (event) => {
-      if (wasCenterDragging) {
-        return;
-      }
-      if (sliderRef.current) {
-        const rect = sliderRef.current.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const clampedX = Math.max(
-          0,
-          Math.min(rect.width - thumbSize, x - thumbSize / 2)
-        );
-        const percentage = rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0;
-        const newValue = min + percentage * (max - min);
-        const distanceToMin = Math.abs(newValue - currentValues.min);
-        const distanceToMax = Math.abs(newValue - currentValues.max);
-        if (distanceToMin < distanceToMax) {
-          handleValueChange(newValue, currentValues.max);
-        } else {
-          handleValueChange(currentValues.min, newValue);
-        }
-      }
-    },
-    [
-      min,
-      max,
-      currentValues,
-      handleValueChange,
-      wasCenterDragging,
-      minThumbPosition,
-      maxThumbPosition,
-      thumbSize
-    ]
-  );
-  const handleActiveTrackClick = useCallback(
-    (event) => {
-      event.stopPropagation();
-      handlePointerDown("center");
-    },
-    [handlePointerDown]
-  );
-  useEffect(() => {
-    setCurrentValues({ min: value.min, max: value.max });
-  }, [value.min, value.max]);
-  useEffect(() => {
-    const measure = () => {
-      if (sliderRef.current) {
-        setTrackWidth(sliderRef.current.clientWidth);
-      }
-    };
-    measure();
-    window.addEventListener("resize", measure);
-    return () => window.removeEventListener("resize", measure);
-  }, []);
-  useEffect(() => {
-    if (!isDragging || !activeThumb) return;
-    const handleMove = (e) => {
-      handlePointerMove(e.clientX, activeThumb);
-    };
-    const handleUp = () => {
-      handlePointerUp();
-      window.removeEventListener("pointermove", handleMove);
-      window.removeEventListener("pointerup", handleUp);
-    };
-    window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleUp, { once: true });
-    return () => {
-      window.removeEventListener("pointermove", handleMove);
-      window.removeEventListener("pointerup", handleUp);
-    };
-  }, [isDragging, activeThumb, handlePointerMove, handlePointerUp]);
-  const abbreviatedMin = abbreviateValues ? abbreviateNumber(currentValues.min) : currentValues.min.toString();
-  const abbreviatedMax = abbreviateValues ? abbreviateNumber(currentValues.max) : currentValues.max.toString();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(
-        "relative w-full flex flex-col gap-y-2.5 select-none",
-        className
-      ),
-      children: [
-        header && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-shade-primary leading-none", children: header.title }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 text-shade-tertiary", children: [
-            header.icon && /* @__PURE__ */ jsx(Icon, { name: header.icon.name, size: header.icon.size }),
-            prefix ? /* @__PURE__ */ jsxs("span", { className: "leading-none font-mono text-sm", children: [
-              prefix,
-              abbreviatedMin,
-              " - ",
-              prefix,
-              abbreviatedMax
-            ] }) : /* @__PURE__ */ jsxs("span", { className: "leading-none font-mono text-sm", children: [
-              abbreviatedMin,
-              " - ",
-              abbreviatedMax
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: sliderRef,
-            className: "relative cursor-pointer w-full h-[24px]",
-            onClick: handleTrackClick,
-            role: "group",
-            "aria-label": `Range slider: ${currentValues.min} to ${currentValues.max}`,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border border-border-light shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] [background:linear-gradient(0deg,rgba(173,185,210,0.02),rgba(173,185,210,0.02)),#0B0E14]" }),
-              /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  initial: { opacity: 0 },
-                  animate: { opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] },
-                  transition: { duration: 1, delay: 0.5, ease: anticipate },
-                  className: classNames(
-                    "h-[24px] top-1/2 -translate-y-1/2 absolute inset-y-0 shadow-[inset_0px_0px_12px_rgba(0,255,255,0.25)] [background:linear-gradient(130deg,rgba(0,255,255,0)_0%,rgba(0,255,255,0.3)_40%,rgba(0,255,255,0.6)_50%,rgba(0,255,255,0.3)_60%,rgba(0,255,255,0.0)_100%)] cursor-grab active:cursor-grabbing"
-                  ),
-                  style: {
-                    left: `${minThumbPosition}px`,
-                    width: `${maxThumbPosition - minThumbPosition + thumbSize}px`,
-                    backgroundSize: `300%`,
-                    backgroundPosition: "center"
-                  },
-                  onPointerDown: handleActiveTrackClick
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: classNames(
-                    `-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`,
-                    activeThumb === "min" ? "z-20" : "z-10"
-                  ),
-                  style: {
-                    left: minThumbPosition
-                  },
-                  onPointerDown: () => handlePointerDown("min"),
-                  role: "slider",
-                  "aria-label": "Minimum value",
-                  "aria-orientation": "horizontal",
-                  "aria-valuemin": min,
-                  "aria-valuemax": currentValues.max,
-                  "aria-valuenow": currentValues.min,
-                  tabIndex: 0,
-                  whileTap: { scale: 0.95 },
-                  children: /* @__PURE__ */ jsx(
-                    CrosshairCorners,
-                    {
-                      animationDelay: 0,
-                      animationDuration: 1,
-                      size: 6,
-                      variant: "bordered",
-                      borders: ["left"],
-                      className: "text-brand-primary"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                motion.div,
-                {
-                  className: classNames(
-                    `-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`,
-                    activeThumb === "max" ? "z-20" : "z-10"
-                  ),
-                  style: {
-                    left: maxThumbPosition
-                  },
-                  onPointerDown: () => handlePointerDown("max"),
-                  role: "slider",
-                  "aria-label": "Maximum value",
-                  "aria-orientation": "horizontal",
-                  "aria-valuemin": currentValues.min,
-                  "aria-valuemax": max,
-                  "aria-valuenow": currentValues.max,
-                  tabIndex: 0,
-                  whileTap: { scale: 0.95 },
-                  children: [
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      CrosshairCorners,
-                      {
-                        animationDelay: 0,
-                        animationDuration: 1,
-                        size: 6,
-                        variant: "bordered",
-                        borders: ["right"],
-                        className: "text-brand-primary"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "relative flex items-center justify-between", children: (() => {
-          const tickValues = [
-            min,
-            min + (max - min) * 0.25,
-            min + (max - min) * 0.5,
-            min + (max - min) * 0.75,
-            max
-          ];
-          return tickValues.map((tickValue, index) => {
-            const position = (tickValue - min) / (max - min);
-            const leftPosition = position * (trackWidth - thumbSize) + thumbSize / 2;
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: { left: leftPosition },
-                  className: "font-mono text-xs text-shade-tertiary leading-none whitespace-nowrap",
-                  children: abbreviateValues ? abbreviateNumber(tickValue) : tickValue.toString()
-                },
-                index
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "w-0.5 h-0.5 bg-shade-tertiary/25 last:hidden",
-                  style: { left: leftPosition }
-                },
-                `divider-${index}`
-              )
-            ] });
-          });
-        })() })
-      ]
-    }
-  );
+const Slider = ({ type = "range", min = 0, max = 100, step = 1, value = {
+	min: 0,
+	max: 100
+}, header, prefix, onChange, className, abbreviateValues = true }) => {
+	const [currentValues, setCurrentValues] = useState({
+		min: value.min,
+		max: value.max
+	});
+	const [isDragging, setIsDragging] = useState(false);
+	const [activeThumb, setActiveThumb] = useState(null);
+	const [wasCenterDragging, setWasCenterDragging] = useState(false);
+	const sliderRef = useRef(null);
+	const [trackWidth, setTrackWidth] = useState(0);
+	const thumbSize = 27;
+	const minPercentage = (currentValues.min - min) / (max - min) * 100;
+	const maxPercentage = (currentValues.max - min) / (max - min) * 100;
+	const minThumbPosition = minPercentage / 100 * Math.max(0, trackWidth - thumbSize);
+	const maxThumbPosition = maxPercentage / 100 * Math.max(0, trackWidth - thumbSize);
+	const handleValueChange = useCallback((newMin, newMax) => {
+		const clampedMin = Math.max(min, Math.min(max, newMin));
+		const clampedMax = Math.max(min, Math.min(max, newMax));
+		const steppedMin = Math.round(clampedMin / step) * step;
+		const steppedMax = Math.round(clampedMax / step) * step;
+		const finalMin = Math.min(steppedMin, steppedMax);
+		const finalMax = Math.max(steppedMin, steppedMax);
+		setCurrentValues({
+			min: finalMin,
+			max: finalMax
+		});
+		onChange?.({
+			min: finalMin,
+			max: finalMax
+		});
+	}, [
+		min,
+		max,
+		step,
+		onChange
+	]);
+	const handlePointerMove = useCallback((clientX, thumb) => {
+		if (!sliderRef.current) return;
+		const rect = sliderRef.current.getBoundingClientRect();
+		const xWithinTrack = clientX - rect.left;
+		const clampedX = Math.max(0, Math.min(rect.width - thumbSize, xWithinTrack - thumbSize / 2));
+		const newValue = min + (rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0) * (max - min);
+		if (thumb === "min") handleValueChange(newValue, currentValues.max);
+		else if (thumb === "max") handleValueChange(currentValues.min, newValue);
+		else if (thumb === "center") {
+			const rangeWidth = currentValues.max - currentValues.min;
+			const halfRange = rangeWidth / 2;
+			handleValueChange(Math.max(min, Math.min(max - rangeWidth, newValue - halfRange)), Math.min(max, Math.max(min + rangeWidth, newValue + halfRange)));
+		}
+	}, [
+		min,
+		max,
+		currentValues,
+		handleValueChange
+	]);
+	const handlePointerDown = useCallback((thumb) => {
+		setIsDragging(true);
+		setActiveThumb(thumb);
+		if (thumb === "center") setWasCenterDragging(true);
+	}, []);
+	const handlePointerUp = useCallback(() => {
+		setIsDragging(false);
+		setActiveThumb(null);
+		setTimeout(() => setWasCenterDragging(false), 100);
+	}, []);
+	const handleTrackClick = useCallback((event) => {
+		if (wasCenterDragging) return;
+		if (sliderRef.current) {
+			const rect = sliderRef.current.getBoundingClientRect();
+			const x = event.clientX - rect.left;
+			const clampedX = Math.max(0, Math.min(rect.width - thumbSize, x - thumbSize / 2));
+			const newValue = min + (rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0) * (max - min);
+			x >= minThumbPosition && maxThumbPosition + thumbSize;
+			if (Math.abs(newValue - currentValues.min) < Math.abs(newValue - currentValues.max)) handleValueChange(newValue, currentValues.max);
+			else handleValueChange(currentValues.min, newValue);
+		}
+	}, [
+		min,
+		max,
+		currentValues,
+		handleValueChange,
+		wasCenterDragging,
+		minThumbPosition,
+		maxThumbPosition,
+		thumbSize
+	]);
+	const handleActiveTrackClick = useCallback((event) => {
+		event.stopPropagation();
+		handlePointerDown("center");
+	}, [handlePointerDown]);
+	useEffect(() => {
+		setCurrentValues({
+			min: value.min,
+			max: value.max
+		});
+	}, [value.min, value.max]);
+	useEffect(() => {
+		const measure = () => {
+			if (sliderRef.current) setTrackWidth(sliderRef.current.clientWidth);
+		};
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, []);
+	useEffect(() => {
+		if (!isDragging || !activeThumb) return;
+		const handleMove = (e) => {
+			handlePointerMove(e.clientX, activeThumb);
+		};
+		const handleUp = () => {
+			handlePointerUp();
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", handleUp, { once: true });
+		return () => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+		};
+	}, [
+		isDragging,
+		activeThumb,
+		handlePointerMove,
+		handlePointerUp
+	]);
+	const abbreviatedMin = abbreviateValues ? abbreviateNumber(currentValues.min) : currentValues.min.toString();
+	const abbreviatedMax = abbreviateValues ? abbreviateNumber(currentValues.max) : currentValues.max.toString();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("relative w-full flex flex-col gap-y-2.5 select-none", className),
+		children: [
+			header && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-base font-medium text-shade-primary leading-none",
+					children: header.title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-x-1 text-shade-tertiary",
+					children: [header.icon && /* @__PURE__ */ jsx(Icon, {
+						name: header.icon.name,
+						size: header.icon.size
+					}), prefix ? /* @__PURE__ */ jsxs("span", {
+						className: "leading-none font-mono text-sm",
+						children: [
+							prefix,
+							abbreviatedMin,
+							" - ",
+							prefix,
+							abbreviatedMax
+						]
+					}) : /* @__PURE__ */ jsxs("span", {
+						className: "leading-none font-mono text-sm",
+						children: [
+							abbreviatedMin,
+							" - ",
+							abbreviatedMax
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: sliderRef,
+				className: "relative cursor-pointer w-full h-[24px]",
+				onClick: handleTrackClick,
+				role: "group",
+				"aria-label": `Range slider: ${currentValues.min} to ${currentValues.max}`,
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "absolute inset-0 border border-border-light shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] [background:linear-gradient(0deg,rgba(173,185,210,0.02),rgba(173,185,210,0.02)),#0B0E14]" }),
+					/* @__PURE__ */ jsx(motion.div, {
+						initial: { opacity: 0 },
+						animate: { opacity: [
+							0,
+							1,
+							.2,
+							1,
+							.4,
+							1,
+							.6,
+							1,
+							.8,
+							1
+						] },
+						transition: {
+							duration: 1,
+							delay: .5,
+							ease: anticipate
+						},
+						className: classNames("h-[24px] top-1/2 -translate-y-1/2 absolute inset-y-0 shadow-[inset_0px_0px_12px_rgba(0,255,255,0.25)] [background:linear-gradient(130deg,rgba(0,255,255,0)_0%,rgba(0,255,255,0.3)_40%,rgba(0,255,255,0.6)_50%,rgba(0,255,255,0.3)_60%,rgba(0,255,255,0.0)_100%)] cursor-grab active:cursor-grabbing"),
+						style: {
+							left: `${minThumbPosition}px`,
+							width: `${maxThumbPosition - minThumbPosition + thumbSize}px`,
+							backgroundSize: `300%`,
+							backgroundPosition: "center"
+						},
+						onPointerDown: handleActiveTrackClick
+					}),
+					/* @__PURE__ */ jsx(motion.div, {
+						className: classNames(`-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`, activeThumb === "min" ? "z-20" : "z-10"),
+						style: { left: minThumbPosition },
+						onPointerDown: () => handlePointerDown("min"),
+						role: "slider",
+						"aria-label": "Minimum value",
+						"aria-orientation": "horizontal",
+						"aria-valuemin": min,
+						"aria-valuemax": currentValues.max,
+						"aria-valuenow": currentValues.min,
+						tabIndex: 0,
+						whileTap: { scale: .95 },
+						children: /* @__PURE__ */ jsx(CrosshairCorners, {
+							animationDelay: 0,
+							animationDuration: 1,
+							size: 6,
+							variant: "bordered",
+							borders: ["left"],
+							className: "text-brand-primary"
+						})
+					}),
+					/* @__PURE__ */ jsxs(motion.div, {
+						className: classNames(`-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`, activeThumb === "max" ? "z-20" : "z-10"),
+						style: { left: maxThumbPosition },
+						onPointerDown: () => handlePointerDown("max"),
+						role: "slider",
+						"aria-label": "Maximum value",
+						"aria-orientation": "horizontal",
+						"aria-valuemin": currentValues.min,
+						"aria-valuemax": max,
+						"aria-valuenow": currentValues.max,
+						tabIndex: 0,
+						whileTap: { scale: .95 },
+						children: [" ", /* @__PURE__ */ jsx(CrosshairCorners, {
+							animationDelay: 0,
+							animationDuration: 1,
+							size: 6,
+							variant: "bordered",
+							borders: ["right"],
+							className: "text-brand-primary"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative flex items-center justify-between",
+				children: (() => {
+					return [
+						min,
+						min + (max - min) * .25,
+						min + (max - min) * .5,
+						min + (max - min) * .75,
+						max
+					].map((tickValue, index) => {
+						const leftPosition = (tickValue - min) / (max - min) * (trackWidth - thumbSize) + thumbSize / 2;
+						return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							style: { left: leftPosition },
+							className: "font-mono text-xs text-shade-tertiary leading-none whitespace-nowrap",
+							children: abbreviateValues ? abbreviateNumber(tickValue) : tickValue.toString()
+						}, index), /* @__PURE__ */ jsx("div", {
+							className: "w-0.5 h-0.5 bg-shade-tertiary/25 last:hidden",
+							style: { left: leftPosition }
+						}, `divider-${index}`)] });
+					});
+				})()
+			})
+		]
+	});
 };
 
+//#endregion
 export { Slider };
-//# sourceMappingURL=Slider.mjs.map
 //# sourceMappingURL=Slider.mjs.map