@blueshift-gg/ui-components 0.1.50 → 0.1.51

package/dist/Pagination.mjs

@@ -1,181 +1,130 @@
-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';
+"use client";
 
-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: (selectedLabel) => `${selectedLabel || itemsPerPage || "Items"} items per page`,
-            items: itemsPerPageOptions.map((item) => ({
-              label: item.toString(),
-              value: item.toString()
-            })),
-            selectedItem: itemsPerPage?.toString(),
-            size: "sm",
-            handleChange: (value) => onItemsPerPageChange(Number(value)),
-            showClear: false
-          }
-        ) })
-      ]
-    }
-  );
+import { Icon } from "./Icon.mjs";
+import { CrosshairCorners } from "./CrossHair.mjs";
+import { Dropdown } from "./Dropdown.mjs";
+import { anticipate, motion } from "motion/react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useWindowSize } from "usehooks-ts";
+
+//#region src/Pagination.tsx
+const Pagination = ({ totalPages, currentPage, onPageChange, onItemsPerPageChange, className, itemsPerPage, itemsPerPageOptions }) => {
+	const { width } = useWindowSize();
+	const isMobile = width < 768;
+	const generatePageNumbers = () => {
+		const pages = [];
+		if (totalPages <= (isMobile ? 4 : 6)) 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: (selectedLabel) => `${selectedLabel || itemsPerPage || "Items"} items per page`,
+				items: itemsPerPageOptions.map((item) => ({
+					label: item.toString(),
+					value: item.toString()
+				})),
+				selectedItem: itemsPerPage?.toString(),
+				size: "sm",
+				handleChange: (value) => onItemsPerPageChange(Number(value)),
+				showClear: false
+			})
+		})]
+	});
 };
-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 })
-      ]
-    }
-  );
+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,
+				.2,
+				1,
+				.4,
+				1,
+				.6,
+				1,
+				.8,
+				1
+			] },
+			transition: {
+				duration: .5,
+				ease: anticipate
+			}
+		}), /* @__PURE__ */ jsx(CrosshairCorners, {
+			size: 4,
+			variant: "corners",
+			corners: ["bottom-right"],
+			className: "text-current",
+			animationDuration: .85,
+			animationDelay: 0
+		})] }), isControl ? /* @__PURE__ */ jsx(Icon, {
+			name: controlDirection === "left" ? "ChevronLeft" : "ChevronRight",
+			size: 14
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "font-mono",
+			children: label
+		})]
+	});
 };
 
+//#endregion
 export { Pagination, PaginationButton };
-//# sourceMappingURL=Pagination.mjs.map
 //# sourceMappingURL=Pagination.mjs.map

package/dist/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":"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","file":"Pagination.mjs","sourcesContent":["\"use client\";\n\nimport 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={(selectedLabel) =>\n              `${selectedLabel || itemsPerPage || \"Items\"} items per page`\n            }\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            selectedItem={itemsPerPage?.toString()}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n            showClear={false}\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"]}
+{"version":3,"file":"Pagination.mjs","names":["pages: (number | \"divider\")[]"],"sources":["../src/Pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport 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={(selectedLabel) =>\n              `${selectedLabel || itemsPerPage || \"Items\"} items per page`\n            }\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            selectedItem={itemsPerPage?.toString()}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n            showClear={false}\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"],"mappings":";;;;;;;;;;;AAmBA,MAAa,cAAc,EACzB,YACA,aACA,cACA,sBACA,WACA,cACA,0BACqB;CAErB,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,WAAW,QAAQ;CAEzB,MAAM,4BAA4B;EAChC,MAAMA,QAAgC,EAAE;AAGxC,MAAI,eAFa,WAAW,IAAI,GAI9B,MAAK,IAAI,IAAI,GAAG,KAAK,YAAY,IAC/B,OAAM,KAAK,EAAE;WAIX,gBAAgB,WAAW,IAAI,IAAI;GAErC,MAAM,kBAAkB,WAAW,IAAI;AACvC,QAAK,IAAI,IAAI,GAAG,KAAK,iBAAiB,IACpC,OAAM,KAAK,EAAE;AAEf,SAAM,KAAK,UAAU;AACrB,SAAM,KAAK,WAAW;aACb,eAAe,cAAc,WAAW,IAAI,IAAI;GAEzD,MAAM,iBAAiB,WAAW,IAAI;AACtC,SAAM,KAAK,EAAE;AACb,SAAM,KAAK,UAAU;AACrB,QAAK,IAAI,IAAI,cAAc,iBAAiB,IAAI,KAAK,YAAY,IAC/D,OAAM,KAAK,EAAE;SAEV;AAEL,SAAM,KAAK,EAAE;AACb,SAAM,KAAK,UAAU;GACrB,MAAM,mBAAmB,WAAW,IAAI;AACxC,QACE,IAAI,IAAI,cAAc,kBACtB,KAAK,cAAc,kBACnB,IAEA,OAAM,KAAK,EAAE;AAEf,SAAM,KAAK,UAAU;AACrB,SAAM,KAAK,WAAW;;AAI1B,SAAO;;CAGT,MAAM,cAAc,qBAAqB;AAEzC,QACE,qBAAC;EACC,WAAW,WACT,uDACA,sBAAsB,oBAAoB,iBAC3C;aAED,qBAAC;GAAI,WAAW,WAAW,2BAA2B,UAAU;;IAE9D,oBAAC;KACC,OAAM;KACN,eAAe,aAAa,cAAc,EAAE;KAC5C,UAAU,gBAAgB;KAC1B,WAAW;KACX,kBAAiB;MACjB;IAGD,YAAY,KAAK,MAAM,UAAU;AAChC,SAAI,SAAS,UACX,QACE,oBAAC;MAEC,WAAU;gBAEV,oBAAC,SAAI,WAAU,iCAAiC;QAH3C,WAAW,QAIZ;AAIV,YACE,oBAAC;MAEC,OAAO,KAAK,UAAU;MACtB,eAAe,aAAa,KAAK;MACjC,UAAU;MACV,UAAU,SAAS;QAJd,KAKL;MAEJ;IAGF,oBAAC;KACC,OAAM;KACN,eAAe,aAAa,cAAc,EAAE;KAC5C,UAAU,gBAAgB;KAC1B,WAAW;KACX,kBAAiB;MACjB;;IACE,EACN,oBAAC;GAAI,WAAU;aACZ,uBACC,oBAAC;IACC,QAAQ,kBACN,GAAG,iBAAiB,gBAAgB,QAAQ;IAE9C,OAAO,oBAAoB,KAAK,UAAU;KACxC,OAAO,KAAK,UAAU;KACtB,OAAO,KAAK,UAAU;KACvB,EAAE;IACH,cAAc,cAAc,UAAU;IACtC,MAAK;IACL,eAAe,UAAU,qBAAqB,OAAO,MAAM,CAAC;IAC5D,WAAW;KACX;IAEA;GACF;;AAaV,MAAa,oBAAoB,EAC/B,OACA,SACA,UACA,YAAY,OACZ,WAAW,OACX,mBAAmB,aACQ;AAC3B,QACE,qBAAC,OAAO;EACI;EACD;EACT,WAAW,WACT,iMACA,YAAY,sBACZ,CAAC,YACC,uEACH;aAEA,YACC,4CACE,oBAAC,OAAO;GACN,WAAU;GACV,SAAS,EAAE,SAAS,GAAG;GACvB,SAAS,EAAE,SAAS;IAAC;IAAG;IAAG;IAAK;IAAG;IAAK;IAAG;IAAK;IAAG;IAAK;IAAE,EAAE;GAC5D,YAAY;IAAE,UAAU;IAAK,MAAM;IAAY;IAC/C,EACF,oBAAC;GACC,MAAM;GACN,SAAQ;GACR,SAAS,CAAC,eAAe;GACzB,WAAU;GACV,mBAAmB;GACnB,gBAAgB;IAChB,IACD,EAEJ,YACC,oBAAC;GACC,MAAM,qBAAqB,SAAS,gBAAgB;GACpD,MAAM;IACN,GAEF,oBAAC;GAAK,WAAU;aAAa;IAAa;GAE9B"}

package/dist/Slider.cjs

@@ -0,0 +1,291 @@
+"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