@blueshift-gg/ui-components 0.1.0

package/dist/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Pagination.tsx"],"names":["useWindowSize","jsxs","classNames","jsx","Dropdown","motion","Fragment","anticipate","CrosshairCorners","Icon"],"mappings":"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","file":"Pagination.js","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Pagination.mjs

@@ -0,0 +1,179 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { CrosshairCorners } from './CrossHair';
+import { motion, anticipate } from 'motion/react';
+import { Dropdown } from './Dropdown';
+import { useWindowSize } from 'usehooks-ts';
+
+const Pagination = ({
+  totalPages,
+  currentPage,
+  onPageChange,
+  onItemsPerPageChange,
+  className,
+  itemsPerPage,
+  itemsPerPageOptions
+}) => {
+  const { width } = useWindowSize();
+  const isMobile = width < 768;
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxPages = isMobile ? 4 : 6;
+    if (totalPages <= maxPages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= (isMobile ? 3 : 4)) {
+        const firstPagesCount = isMobile ? 3 : 5;
+        for (let i = 1; i <= firstPagesCount; i++) {
+          pages.push(i);
+        }
+        pages.push("divider");
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {
+        const lastPagesCount = isMobile ? 3 : 5;
+        pages.push(1);
+        pages.push("divider");
+        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("divider");
+        const surroundingCount = isMobile ? 1 : 1;
+        for (let i = currentPage - surroundingCount; i <= currentPage + surroundingCount; i++) {
+          pages.push(i);
+        }
+        pages.push("divider");
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+  const pageNumbers = generatePageNumbers();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "flex flex-col sm:flex-row items-center w-full gap-6",
+        itemsPerPageOptions ? "justify-between" : "justify-center"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classNames("flex items-center gap-1", className), children: [
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              label: "",
+              onClick: () => onPageChange(currentPage - 1),
+              disabled: currentPage === 1,
+              isControl: true,
+              controlDirection: "left"
+            }
+          ),
+          pageNumbers.map((page, index) => {
+            if (page === "divider") {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex items-center justify-center w-[36px] h-[36px]",
+                  children: /* @__PURE__ */ jsx("div", { className: "w-1 h-1 bg-shade-tertiary/15" })
+                },
+                `divider-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              PaginationButton,
+              {
+                label: page.toString(),
+                onClick: () => onPageChange(page),
+                disabled: false,
+                isActive: page === currentPage
+              },
+              page
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            PaginationButton,
+            {
+              label: "",
+              onClick: () => onPageChange(currentPage + 1),
+              disabled: currentPage === totalPages,
+              isControl: true,
+              controlDirection: "right"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: itemsPerPageOptions && /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            label: `${itemsPerPage ? itemsPerPage : "Items"} items per page`,
+            items: itemsPerPageOptions.map((item) => ({
+              label: item.toString(),
+              value: item.toString()
+            })),
+            size: "sm",
+            handleChange: (value) => onItemsPerPageChange(Number(value))
+          }
+        ) })
+      ]
+    }
+  );
+};
+const PaginationButton = ({
+  label,
+  onClick,
+  disabled,
+  isControl = false,
+  isActive = false,
+  controlDirection = "left"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      disabled,
+      onClick,
+      className: classNames(
+        "disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background",
+        isActive && "text-brand-primary",
+        !isActive && "enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary"
+      ),
+      children: [
+        isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]",
+              initial: { opacity: 0 },
+              animate: { opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] },
+              transition: { duration: 0.5, ease: anticipate }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CrosshairCorners,
+            {
+              size: 4,
+              variant: "corners",
+              corners: ["bottom-right"],
+              className: "text-current",
+              animationDuration: 0.85,
+              animationDelay: 0
+            }
+          )
+        ] }),
+        isControl ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: controlDirection === "left" ? "ChevronLeft" : "ChevronRight",
+            size: 14
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "font-mono", children: label })
+      ]
+    }
+  );
+};
+
+export { Pagination, PaginationButton };
+//# sourceMappingURL=Pagination.mjs.map
+//# sourceMappingURL=Pagination.mjs.map

package/dist/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":"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","file":"Pagination.mjs","sourcesContent":["import classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Slider.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as IconProps } from './index-DWGhkMUQ.mjs';
+import './utils/colours.mjs';
+
+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_runtime.JSX.Element;
+
+export { Slider, type SliderProps };

package/dist/Slider.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as IconProps } from './index-ekBNDG0H.js';
+import './utils/colours.js';
+
+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_runtime.JSX.Element;
+
+export { Slider, type SliderProps };

package/dist/Slider.js

@@ -0,0 +1,344 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('motion/react');
+var react = require('react');
+var Icon = require('./Icon');
+var classNames = require('classnames');
+var CrossHair = require('./CrossHair');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+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] = react.useState({
+    min: value.min,
+    max: value.max
+  });
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [activeThumb, setActiveThumb] = react.useState(null);
+  const [wasCenterDragging, setWasCenterDragging] = react.useState(false);
+  const sliderRef = react.useRef(null);
+  const [trackWidth, setTrackWidth] = 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 = 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 = 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 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 = react.useCallback((thumb) => {
+    setIsDragging(true);
+    setActiveThumb(thumb);
+    if (thumb === "center") {
+      setWasCenterDragging(true);
+    }
+  }, []);
+  const handlePointerUp = react.useCallback(() => {
+    setIsDragging(false);
+    setActiveThumb(null);
+    setTimeout(() => setWasCenterDragging(false), 100);
+  }, []);
+  const handleTrackClick = 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 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 = react.useCallback(
+    (event) => {
+      event.stopPropagation();
+      handlePointerDown("center");
+    },
+    [handlePointerDown]
+  );
+  react.useEffect(() => {
+    setCurrentValues({ min: value.min, max: value.max });
+  }, [value.min, value.max]);
+  react.useEffect(() => {
+    const measure = () => {
+      if (sliderRef.current) {
+        setTrackWidth(sliderRef.current.clientWidth);
+      }
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, []);
+  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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames__default.default(
+        "relative w-full flex flex-col gap-y-2.5 select-none",
+        className
+      ),
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-shade-primary leading-none", children: header.title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1 text-shade-tertiary", children: [
+            header.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: header.icon.name, size: header.icon.size }),
+            prefix ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "leading-none font-mono text-sm", children: [
+              prefix,
+              abbreviatedMin,
+              " - ",
+              prefix,
+              abbreviatedMax
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "leading-none font-mono text-sm", children: [
+              abbreviatedMin,
+              " - ",
+              abbreviatedMax
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                react$1.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: react$1.anticipate },
+                  className: classNames__default.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__ */ jsxRuntime.jsx(
+                react$1.motion.div,
+                {
+                  className: classNames__default.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: 0.95 },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    CrossHair.CrosshairCorners,
+                    {
+                      animationDelay: 0,
+                      animationDuration: 1,
+                      size: 6,
+                      variant: "bordered",
+                      borders: ["left"],
+                      className: "text-brand-primary"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                react$1.motion.div,
+                {
+                  className: classNames__default.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: 0.95 },
+                  children: [
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CrossHair.CrosshairCorners,
+                      {
+                        animationDelay: 0,
+                        animationDuration: 1,
+                        size: 6,
+                        variant: "bordered",
+                        borders: ["right"],
+                        className: "text-brand-primary"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-0.5 h-0.5 bg-shade-tertiary/25 last:hidden",
+                  style: { left: leftPosition }
+                },
+                `divider-${index}`
+              )
+            ] });
+          });
+        })() })
+      ]
+    }
+  );
+};
+
+exports.Slider = Slider;
+//# sourceMappingURL=Slider.js.map
+//# sourceMappingURL=Slider.js.map