@blueshift-gg/ui-components 0.1.75 → 0.1.76

package/dist/Slider.cjs

@@ -1,291 +0,0 @@
-"use client";
-
-const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
-const require_Icon = require('./Icon.cjs');
-const require_CrossHair = require('./CrossHair.cjs');
-let motion_react = require("motion/react");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("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 Slider = ({ type = "range", min = 0, max = 100, step = 1, value = {
-	min: 0,
-	max: 100
-}, header, prefix, onChange, className, abbreviateValues = true }) => {
-	const [currentValues, setCurrentValues] = (0, react.useState)({
-		min: value.min,
-		max: value.max
-	});
-	const [isDragging, setIsDragging] = (0, react.useState)(false);
-	const [activeThumb, setActiveThumb] = (0, react.useState)(null);
-	const [wasCenterDragging, setWasCenterDragging] = (0, react.useState)(false);
-	const sliderRef = (0, react.useRef)(null);
-	const [trackWidth, setTrackWidth] = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.useCallback)((thumb) => {
-		setIsDragging(true);
-		setActiveThumb(thumb);
-		if (thumb === "center") setWasCenterDragging(true);
-	}, []);
-	const handlePointerUp = (0, react.useCallback)(() => {
-		setIsDragging(false);
-		setActiveThumb(null);
-		setTimeout(() => setWasCenterDragging(false), 100);
-	}, []);
-	const handleTrackClick = (0, react.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 = (0, react.useCallback)((event) => {
-		event.stopPropagation();
-		handlePointerDown("center");
-	}, [handlePointerDown]);
-	(0, react.useEffect)(() => {
-		setCurrentValues({
-			min: value.min,
-			max: value.max
-		});
-	}, [value.min, value.max]);
-	(0, react.useEffect)(() => {
-		const measure = () => {
-			if (sliderRef.current) setTrackWidth(sliderRef.current.clientWidth);
-		};
-		measure();
-		window.addEventListener("resize", measure);
-		return () => window.removeEventListener("resize", measure);
-	}, []);
-	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, classnames.default)("relative w-full flex flex-col gap-y-2.5 select-none", className),
-		children: [
-			header && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between px-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-base font-medium text-shade-primary leading-none",
-					children: header.title
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-x-1 text-shade-tertiary",
-					children: [header.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-						name: header.icon.name,
-						size: header.icon.size
-					}), prefix ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "leading-none font-mono text-sm",
-						children: [
-							prefix,
-							abbreviatedMin,
-							" - ",
-							prefix,
-							abbreviatedMax
-						]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "leading-none font-mono text-sm",
-						children: [
-							abbreviatedMin,
-							" - ",
-							abbreviatedMax
-						]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
-						initial: { opacity: 0 },
-						animate: { opacity: [
-							0,
-							1,
-							.2,
-							1,
-							.4,
-							1,
-							.6,
-							1,
-							.8,
-							1
-						] },
-						transition: {
-							duration: 1,
-							delay: .5,
-							ease: motion_react.anticipate
-						},
-						className: (0, classnames.default)("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__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
-						className: (0, classnames.default)(`-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__ */ (0, react_jsx_runtime.jsx)(require_CrossHair.CrosshairCorners, {
-							animationDelay: 0,
-							animationDuration: 1,
-							size: 6,
-							variant: "bordered",
-							borders: ["left"],
-							className: "text-brand-primary"
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.motion.div, {
-						className: (0, classnames.default)(`-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__ */ (0, react_jsx_runtime.jsx)(require_CrossHair.CrosshairCorners, {
-							animationDelay: 0,
-							animationDuration: 1,
-							size: 6,
-							variant: "bordered",
-							borders: ["right"],
-							className: "text-brand-primary"
-						})]
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "w-0.5 h-0.5 bg-shade-tertiary/25 last:hidden",
-							style: { left: leftPosition }
-						}, `divider-${index}`)] });
-					});
-				})()
-			})
-		]
-	});
-};
-
-//#endregion
-exports.Slider = Slider;
-//# sourceMappingURL=Slider.cjs.map

package/dist/Slider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.cjs","names":["Icon","motion","anticipate","CrosshairCorners"],"sources":["../src/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { anticipate, motion } from \"motion/react\";\nimport { useState, useCallback, useRef, useEffect } from \"react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\n// Helper function to abbreviate numbers\nconst abbreviateNumber = (num: number): string => {\n  const absNum = Math.abs(num);\n\n  if (absNum >= 1e9) {\n    return Math.round(num / 1e9) + \"B\";\n  }\n  if (absNum >= 1e6) {\n    return Math.round(num / 1e6) + \"M\";\n  }\n  if (absNum >= 1e3) {\n    return Math.round(num / 1e3) + \"K\";\n  }\n\n  return num.toString();\n};\n\nexport type SliderProps = {\n  type?: \"range\";\n  min?: number;\n  max?: number;\n  step?: number;\n  prefix?: string;\n  value?: {\n    min: number;\n    max: number;\n  };\n  header?: {\n    title: string;\n    icon?: IconProps;\n  };\n  onChange?: (value: { min: number; max: number }) => void;\n  className?: string;\n  abbreviateValues?: boolean;\n};\n\nexport const Slider = ({\n  type = \"range\",\n  min = 0,\n  max = 100,\n  step = 1,\n  value = { min: 0, max: 100 },\n  header,\n  prefix,\n  onChange,\n  className,\n  abbreviateValues = true,\n}: SliderProps) => {\n  const [currentValues, setCurrentValues] = useState({\n    min: value.min,\n    max: value.max,\n  });\n  const [isDragging, setIsDragging] = useState(false);\n  const [activeThumb, setActiveThumb] = useState<\n    \"min\" | \"max\" | \"center\" | null\n  >(null);\n  const [wasCenterDragging, setWasCenterDragging] = useState(false);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const [trackWidth, setTrackWidth] = useState(0);\n  const thumbSize = 27; // Size of the draggable thumb\n\n  // Calculate the percentage position of the current values\n  const minPercentage = ((currentValues.min - min) / (max - min)) * 100;\n  const maxPercentage = ((currentValues.max - min) / (max - min)) * 100;\n  const minThumbPosition =\n    (minPercentage / 100) * Math.max(0, trackWidth - thumbSize);\n  const maxThumbPosition =\n    (maxPercentage / 100) * Math.max(0, trackWidth - thumbSize);\n\n  const handleValueChange = useCallback(\n    (newMin: number, newMax: number) => {\n      const clampedMin = Math.max(min, Math.min(max, newMin));\n      const clampedMax = Math.max(min, Math.min(max, newMax));\n      const steppedMin = Math.round(clampedMin / step) * step;\n      const steppedMax = Math.round(clampedMax / step) * step;\n\n      // Ensure min doesn't exceed max and vice versa\n      const finalMin = Math.min(steppedMin, steppedMax);\n      const finalMax = Math.max(steppedMin, steppedMax);\n\n      setCurrentValues({ min: finalMin, max: finalMax });\n      onChange?.({ min: finalMin, max: finalMax });\n    },\n    [min, max, step, onChange]\n  );\n\n  const handlePointerMove = useCallback(\n    (clientX: number, thumb: \"min\" | \"max\" | \"center\") => {\n      if (!sliderRef.current) return;\n      const rect = sliderRef.current.getBoundingClientRect();\n      // Map pointer position to the left position of the thumb (top-left),\n      // centering the thumb under the pointer for a natural feel\n      const xWithinTrack = clientX - rect.left;\n      const clampedX = Math.max(\n        0,\n        Math.min(rect.width - thumbSize, xWithinTrack - thumbSize / 2)\n      );\n      const percentage =\n        rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0;\n      const newValue = min + percentage * (max - min);\n\n      if (thumb === \"min\") {\n        handleValueChange(newValue, currentValues.max);\n      } else if (thumb === \"max\") {\n        handleValueChange(currentValues.min, newValue);\n      } else if (thumb === \"center\") {\n        // Calculate the current range width\n        const rangeWidth = currentValues.max - currentValues.min;\n        const halfRange = rangeWidth / 2;\n\n        // Calculate new min and max values centered around the new position\n        const newMin = Math.max(\n          min,\n          Math.min(max - rangeWidth, newValue - halfRange)\n        );\n        const newMax = Math.min(\n          max,\n          Math.max(min + rangeWidth, newValue + halfRange)\n        );\n\n        handleValueChange(newMin, newMax);\n      }\n    },\n    [min, max, currentValues, handleValueChange]\n  );\n\n  const handlePointerDown = useCallback((thumb: \"min\" | \"max\" | \"center\") => {\n    setIsDragging(true);\n    setActiveThumb(thumb);\n    if (thumb === \"center\") {\n      setWasCenterDragging(true);\n    }\n  }, []);\n\n  const handlePointerUp = useCallback(() => {\n    setIsDragging(false);\n    setActiveThumb(null);\n    // Reset the center dragging flag after a short delay to prevent track click\n    setTimeout(() => setWasCenterDragging(false), 100);\n  }, []);\n\n  // Handle track clicks\n  const handleTrackClick = useCallback(\n    (event: React.MouseEvent) => {\n      // Prevent track click if we just finished center dragging\n      if (wasCenterDragging) {\n        return;\n      }\n\n      if (sliderRef.current) {\n        const rect = sliderRef.current.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const clampedX = Math.max(\n          0,\n          Math.min(rect.width - thumbSize, x - thumbSize / 2)\n        );\n        const percentage =\n          rect.width - thumbSize > 0 ? clampedX / (rect.width - thumbSize) : 0;\n        const newValue = min + percentage * (max - min);\n\n        // Check if the click is within the active track area\n        const isWithinActiveTrack =\n          x >= minThumbPosition && x <= maxThumbPosition + thumbSize;\n\n        // Determine which thumb is closer and update that one\n        const distanceToMin = Math.abs(newValue - currentValues.min);\n        const distanceToMax = Math.abs(newValue - currentValues.max);\n\n        if (distanceToMin < distanceToMax) {\n          handleValueChange(newValue, currentValues.max);\n        } else {\n          handleValueChange(currentValues.min, newValue);\n        }\n      }\n    },\n    [\n      min,\n      max,\n      currentValues,\n      handleValueChange,\n      wasCenterDragging,\n      minThumbPosition,\n      maxThumbPosition,\n      thumbSize,\n    ]\n  );\n\n  // Handle active track clicks (center dragging)\n  const handleActiveTrackClick = useCallback(\n    (event: React.PointerEvent) => {\n      event.stopPropagation(); // Prevent track click from firing\n      handlePointerDown(\"center\");\n    },\n    [handlePointerDown]\n  );\n\n  // Update current values when prop changes\n  useEffect(() => {\n    setCurrentValues({ min: value.min, max: value.max });\n  }, [value.min, value.max]);\n\n  // Measure track width responsively\n  useEffect(() => {\n    const measure = () => {\n      if (sliderRef.current) {\n        setTrackWidth(sliderRef.current.clientWidth);\n      }\n    };\n    measure();\n    window.addEventListener(\"resize\", measure);\n    return () => window.removeEventListener(\"resize\", measure);\n  }, []);\n\n  // Global pointer listeners during drag\n  useEffect(() => {\n    if (!isDragging || !activeThumb) return;\n    const handleMove = (e: PointerEvent) => {\n      handlePointerMove(e.clientX, activeThumb);\n    };\n    const handleUp = () => {\n      handlePointerUp();\n      window.removeEventListener(\"pointermove\", handleMove);\n      window.removeEventListener(\"pointerup\", handleUp);\n    };\n    window.addEventListener(\"pointermove\", handleMove);\n    window.addEventListener(\"pointerup\", handleUp, { once: true });\n    return () => {\n      window.removeEventListener(\"pointermove\", handleMove);\n      window.removeEventListener(\"pointerup\", handleUp);\n    };\n  }, [isDragging, activeThumb, handlePointerMove, handlePointerUp]);\n\n  const abbreviatedMin = abbreviateValues\n    ? abbreviateNumber(currentValues.min)\n    : currentValues.min.toString();\n  const abbreviatedMax = abbreviateValues\n    ? abbreviateNumber(currentValues.max)\n    : currentValues.max.toString();\n\n  return (\n    <div\n      className={classNames(\n        \"relative w-full flex flex-col gap-y-2.5 select-none\",\n        className\n      )}\n    >\n      {header && (\n        <div className=\"flex items-center justify-between px-1\">\n          <span className=\"text-base font-medium text-shade-primary leading-none\">\n            {header.title}\n          </span>\n          <div className=\"flex items-center gap-x-1 text-shade-tertiary\">\n            {header.icon && (\n              <Icon name={header.icon.name} size={header.icon.size} />\n            )}\n            {prefix ? (\n              <span className=\"leading-none font-mono text-sm\">\n                {prefix}\n                {abbreviatedMin} - {prefix}\n                {abbreviatedMax}\n              </span>\n            ) : (\n              <span className=\"leading-none font-mono text-sm\">\n                {abbreviatedMin} - {abbreviatedMax}\n              </span>\n            )}\n          </div>\n        </div>\n      )}\n\n      <div\n        ref={sliderRef}\n        className=\"relative cursor-pointer w-full h-[24px]\"\n        onClick={handleTrackClick}\n        role=\"group\"\n        aria-label={`Range slider: ${currentValues.min} to ${currentValues.max}`}\n      >\n        {/* Track background */}\n        <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]\" />\n\n        {/* Active track */}\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n          transition={{ duration: 1, delay: 0.5, ease: anticipate }}\n          className={classNames(\n            \"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\"\n          )}\n          style={{\n            left: `${minThumbPosition}px`,\n            width: `${maxThumbPosition - minThumbPosition + thumbSize}px`,\n            backgroundSize: `300%`,\n            backgroundPosition: \"center\",\n          }}\n          onPointerDown={handleActiveTrackClick}\n        />\n\n        {/* Min thumb */}\n        <motion.div\n          className={classNames(\n            `-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`,\n            activeThumb === \"min\" ? \"z-20\" : \"z-10\"\n          )}\n          style={{\n            left: minThumbPosition,\n          }}\n          onPointerDown={() => handlePointerDown(\"min\")}\n          role=\"slider\"\n          aria-label=\"Minimum value\"\n          aria-orientation=\"horizontal\"\n          aria-valuemin={min}\n          aria-valuemax={currentValues.max}\n          aria-valuenow={currentValues.min}\n          tabIndex={0}\n          whileTap={{ scale: 0.95 }}\n        >\n          <CrosshairCorners\n            animationDelay={0}\n            animationDuration={1}\n            size={6}\n            variant=\"bordered\"\n            borders={[\"left\"]}\n            className=\"text-brand-primary\"\n          />\n        </motion.div>\n\n        {/* Max thumb */}\n        <motion.div\n          className={classNames(\n            `-translate-y-1/2 top-1/2 h-[27px] w-[27px] absolute cursor-grab active:cursor-grabbing focus:outline-none`,\n            activeThumb === \"max\" ? \"z-20\" : \"z-10\"\n          )}\n          style={{\n            left: maxThumbPosition,\n          }}\n          onPointerDown={() => handlePointerDown(\"max\")}\n          role=\"slider\"\n          aria-label=\"Maximum value\"\n          aria-orientation=\"horizontal\"\n          aria-valuemin={currentValues.min}\n          aria-valuemax={max}\n          aria-valuenow={currentValues.max}\n          tabIndex={0}\n          whileTap={{ scale: 0.95 }}\n        >\n          {\" \"}\n          <CrosshairCorners\n            animationDelay={0}\n            animationDuration={1}\n            size={6}\n            variant=\"bordered\"\n            borders={[\"right\"]}\n            className=\"text-brand-primary\"\n          />\n        </motion.div>\n      </div>\n\n      {/* Tick marks */}\n      <div className=\"relative flex items-center justify-between\">\n        {/* Calculate tick positions */}\n        {(() => {\n          const tickValues = [\n            min,\n            min + (max - min) * 0.25,\n            min + (max - min) * 0.5,\n            min + (max - min) * 0.75,\n            max,\n          ];\n\n          return tickValues.map((tickValue, index) => {\n            const position = (tickValue - min) / (max - min);\n            const leftPosition =\n              position * (trackWidth - thumbSize) + thumbSize / 2;\n\n            return (\n              <>\n                <span\n                  key={index}\n                  style={{ left: leftPosition }}\n                  className=\"font-mono text-xs text-shade-tertiary leading-none whitespace-nowrap\"\n                >\n                  {abbreviateValues\n                    ? abbreviateNumber(tickValue)\n                    : tickValue.toString()}\n                </span>\n                <div\n                  key={`divider-${index}`}\n                  className=\"w-0.5 h-0.5 bg-shade-tertiary/25 last:hidden\"\n                  style={{ left: leftPosition }}\n                />\n              </>\n            );\n          });\n        })()}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/Slider.d.cts

@@ -1,40 +0,0 @@
-import { IconProps } from "./Icon.cjs";
-import * as react_jsx_runtime196 from "react/jsx-runtime";
-
-//#region src/Slider.d.ts
-type SliderProps = {
-  type?: "range";
-  min?: number;
-  max?: number;
-  step?: number;
-  prefix?: string;
-  value?: {
-    min: number;
-    max: number;
-  };
-  header?: {
-    title: string;
-    icon?: IconProps;
-  };
-  onChange?: (value: {
-    min: number;
-    max: number;
-  }) => void;
-  className?: string;
-  abbreviateValues?: boolean;
-};
-declare const Slider: ({
-  type,
-  min,
-  max,
-  step,
-  value,
-  header,
-  prefix,
-  onChange,
-  className,
-  abbreviateValues
-}: SliderProps) => react_jsx_runtime196.JSX.Element;
-//#endregion
-export { Slider, SliderProps };
-//# sourceMappingURL=Slider.d.cts.map

package/dist/Slider.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.d.cts","names":[],"sources":["../src/Slider.tsx"],"sourcesContent":[],"mappings":";;;;KAyBY,WAAA;;;EAAA,GAAA,CAAA,EAAA,MAAA;EAmBC,IAAA,CAAA,EAAA,MAyWZ;EAzWsB,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA;IAAA,GAAA,EAAA,MAAA;IAAA,GAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA;IAAA,KAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAPZ,SAOY;EAAA,CAAA;EAAA,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA;IAWpB,GAAA,EAAA,MAAA;IAAW,GAAA,EAAA,MAAA;EA8Vb,CAAA,EAAA,GAAA,IAAA;;;;cAzWY;;;;;;;;;;;GAWV,gBAAW,oBAAA,CAAA,GAAA,CAAA"}

package/dist/Slider.d.mts

@@ -1,40 +0,0 @@
-import { IconProps } from "./Icon.mjs";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-
-//#region src/Slider.d.ts
-type SliderProps = {
-  type?: "range";
-  min?: number;
-  max?: number;
-  step?: number;
-  prefix?: string;
-  value?: {
-    min: number;
-    max: number;
-  };
-  header?: {
-    title: string;
-    icon?: IconProps;
-  };
-  onChange?: (value: {
-    min: number;
-    max: number;
-  }) => void;
-  className?: string;
-  abbreviateValues?: boolean;
-};
-declare const Slider: ({
-  type,
-  min,
-  max,
-  step,
-  value,
-  header,
-  prefix,
-  onChange,
-  className,
-  abbreviateValues
-}: SliderProps) => react_jsx_runtime1.JSX.Element;
-//#endregion
-export { Slider, SliderProps };
-//# sourceMappingURL=Slider.d.mts.map

package/dist/Slider.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slider.d.mts","names":[],"sources":["../src/Slider.tsx"],"sourcesContent":[],"mappings":";;;;KAyBY,WAAA;;;EAAA,GAAA,CAAA,EAAA,MAAA;EAmBC,IAAA,CAAA,EAAA,MAyWZ;EAzWsB,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA;IAAA,GAAA,EAAA,MAAA;IAAA,GAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA;IAAA,KAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAPZ,SAOY;EAAA,CAAA;EAAA,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA;IAWpB,GAAA,EAAA,MAAA;IAAW,GAAA,EAAA,MAAA;EA8Vb,CAAA,EAAA,GAAA,IAAA;;;;cAzWY;;;;;;;;;;;GAWV,gBAAW,kBAAA,CAAA,GAAA,CAAA"}