@blueshift-gg/ui-components 0.1.75 → 0.1.76

package/dist/Pagination.js

@@ -0,0 +1,130 @@
+"use client";
+
+import { Icon } from "./Icon.js";
+import { CrosshairCorners } from "./CrossHair.js";
+import { Dropdown } from "./Dropdown.js";
+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,
+				.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.js.map

package/dist/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","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":"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"}

package/dist/Slider.d.ts

@@ -0,0 +1,40 @@
+import { IconProps } from "./Icon.js";
+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.ts.map

package/dist/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","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"}

package/dist/Slider.js

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

package/dist/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"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/Tabs.d.ts

@@ -0,0 +1,39 @@
+import { IconProps } from "./Icon.js";
+import { MotionProps } from "motion/react";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/Tabs.d.ts
+type TabsProps = {
+  className?: string;
+  variant: "tab" | "segmented";
+  items: {
+    label?: string;
+    value: string;
+    icon?: IconProps;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+  }[];
+  theme: "primary" | "secondary";
+  animation?: MotionProps;
+  stretch?: boolean;
+  size?: "sm" | "lg";
+  title?: string;
+  isNavigation?: boolean;
+};
+declare const Tabs: ({
+  className,
+  variant,
+  items,
+  theme,
+  animation,
+  stretch,
+  size,
+  title,
+  isNavigation
+}: TabsProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { Tabs, TabsProps };
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","names":[],"sources":["../src/Tabs.tsx"],"sourcesContent":[],"mappings":";;;;;KAQY,SAAA;;;EAAA,KAAA,EAAA;IAMD,KAAA,CAAA,EAAA,MAAA;IAIU,KAAA,EAAA,MAAA;IAIP,IAAA,CAAA,EARH,SAQG;IAAW,QAAA,CAAA,EAAA,OAAA;IAOZ,QA6FZ,CAAA,EAAA,OAAA;IA7FoB,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;IAAA,QAAA,CAAA,EAXN,KAAA,CAAM,SAWA;IAAA,SAAA,CAAA,EAAA,MAAA;EAAA,CAAA,EAAA;EAAA,KAAA,EAAA,SAAA,GAAA,WAAA;EAAA,SAAA,CAAA,EAPP,WAOO;EAAA,OAAA,CAAA,EAAA,OAAA;EAAA,IAAA,CAAA,EAAA,IAAA,GAAA,IAAA;EAAA,KAAA,CAAA,EAAA,MAAA;EAUlB,YAAA,CAAA,EAAA,OAAA;CAAS;AAmFX,cA7FY,IA6FZ,EAAA,CAAA;EAAA,SAAA;EAAA,OAAA;EAAA,KAAA;EAAA,KAAA;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAnFE,SAmFF,EAAA,GAnFW,kBAAA,CAAA,GAAA,CAAA,OAmFX"}

package/dist/Tabs.js

@@ -0,0 +1,65 @@
+"use client";
+
+import { Icon } from "./Icon.js";
+import { CrosshairCorners } from "./CrossHair.js";
+import { breeze } from "./utils/easings.js";
+import { anticipate, motion } from "motion/react";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Tabs.tsx
+const Tabs = ({ className, variant, items, theme, animation, stretch, size = "lg", title, isNavigation = false }) => {
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: classNames("flex items-center gap-x-1 w-full", variant === "segmented" && "gradient-border before:bg-border", variant === "segmented" && size === "sm" && "p-1", variant === "segmented" && size === "lg" && "p-1", !stretch && "!w-max", className),
+		...animation,
+		children: items.map((item) => /* @__PURE__ */ jsxs(motion.button, {
+			className: classNames("group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary", !item.label && "w-max !px-3", item.selected && theme === "secondary" && "!text-shade-primary", item.selected && theme === "primary" && "!text-brand-primary", size === "sm" && "py-2 px-4 text-sm", size === "lg" && "py-2.5 px-5 text-base leading-none", !item.children && "!justify-center", item.className, isNavigation && "hover:cursor-pointer"),
+			onClick: item.onClick,
+			disabled: item.disabled,
+			children: [
+				item.selected && variant === "segmented" && /* @__PURE__ */ jsx(motion.div, {
+					layoutId: `segmented-tab-selected-${title}`,
+					transition: {
+						duration: .1,
+						ease: breeze
+					},
+					className: classNames("absolute inset-0", theme === "primary" && "bg-brand-tertiary/8", theme === "secondary" && "bg-card-foreground")
+				}),
+				item.selected && variant === "tab" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+					initial: { opacity: 0 },
+					animate: { opacity: [
+						0,
+						.15,
+						0,
+						.1,
+						0,
+						.06
+					] },
+					transition: {
+						duration: .5,
+						ease: anticipate
+					},
+					className: classNames("absolute inset-0 group-hover:opacity-15", theme === "primary" && "bg-brand-primary text-brand-primary", theme === "secondary" && "bg-shade-tertiary text-shade-primary")
+				}), /* @__PURE__ */ jsx(CrosshairCorners, {
+					animationDelay: 0,
+					animationDuration: .5,
+					size: 4,
+					corners: ["bottom-right"]
+				})] }),
+				item.icon && /* @__PURE__ */ jsx(Icon, {
+					...item.icon,
+					className: "flex-shrink-0 relative"
+				}),
+				item.label && /* @__PURE__ */ jsx("span", {
+					className: classNames("font-mono leading-[100%] relative", variant === "segmented" && "text-sm", variant === "tab" && "text-[15px]"),
+					children: item.label
+				}),
+				item.children && item.children
+			]
+		}, item.value))
+	});
+};
+
+//#endregion
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../src/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion, MotionProps } from \"motion/react\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { breeze, crisp, glide, swift } from \"./utils/easings\";\nimport { CrosshairCorners } from \"./CrossHair\";\n\nexport type TabsProps = {\n  className?: string;\n  variant: \"tab\" | \"segmented\";\n  items: {\n    label?: string;\n    value: string;\n    icon?: IconProps;\n    disabled?: boolean;\n    selected?: boolean;\n    onClick?: () => void;\n    children?: React.ReactNode;\n    className?: string;\n  }[];\n  theme: \"primary\" | \"secondary\";\n  animation?: MotionProps;\n  stretch?: boolean;\n  size?: \"sm\" | \"lg\";\n  title?: string;\n  isNavigation?: boolean;\n};\n\nexport const Tabs = ({\n  className,\n  variant,\n  items,\n  theme,\n  animation,\n  stretch,\n  size = \"lg\",\n  title,\n  isNavigation = false,\n}: TabsProps) => {\n  return (\n    <motion.div\n      className={classNames(\n        \"flex items-center gap-x-1 w-full\",\n        variant === \"segmented\" && \"gradient-border before:bg-border\",\n        variant === \"segmented\" && size === \"sm\" && \"p-1\",\n        variant === \"segmented\" && size === \"lg\" && \"p-1\",\n        !stretch && \"!w-max\",\n        className,\n      )}\n      {...animation}\n    >\n      {items.map((item) => (\n        <motion.button\n          className={classNames(\n            \"group disabled:opacity-40 hover:bg-card-solid/50 relative flex items-center gap-x-1.5 justify-between w-full text-shade-tertiary\",\n            !item.label && \"w-max !px-3\",\n            item.selected && theme === \"secondary\" && \"!text-shade-primary\",\n            item.selected && theme === \"primary\" && \"!text-brand-primary\",\n            size === \"sm\" && \"py-2 px-4 text-sm\",\n            size === \"lg\" && \"py-2.5 px-5 text-base leading-none\",\n            !item.children && \"!justify-center\",\n            item.className,\n            isNavigation && \"hover:cursor-pointer\"\n          )}\n          key={item.value}\n          onClick={item.onClick}\n          disabled={item.disabled}\n        >\n          {item.selected && variant === \"segmented\" && (\n            <motion.div\n              layoutId={`segmented-tab-selected-${title}`}\n              transition={{ duration: 0.1, ease: breeze }}\n              className={classNames(\n                \"absolute inset-0\",\n                theme === \"primary\" && \"bg-brand-tertiary/8\",\n                theme === \"secondary\" && \"bg-card-foreground\",\n              )}\n            ></motion.div>\n          )}\n\n          {item.selected && variant === \"tab\" && (\n            <>\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: [0, 0.15, 0, 0.1, 0, 0.06] }}\n                transition={{ duration: 0.5, ease: anticipate }}\n                className={classNames(\n                  \"absolute inset-0 group-hover:opacity-15\",\n                  theme === \"primary\" && \"bg-brand-primary text-brand-primary\",\n                  theme === \"secondary\" &&\n                    \"bg-shade-tertiary text-shade-primary\",\n                )}\n              />\n              <CrosshairCorners\n                animationDelay={0}\n                animationDuration={0.5}\n                size={4}\n                corners={[\"bottom-right\"]}\n              />\n            </>\n          )}\n\n          {item.icon && (\n            <Icon {...item.icon} className=\"flex-shrink-0 relative\" />\n          )}\n          {item.label && (\n            <span\n              className={classNames(\n                \"font-mono leading-[100%] relative\",\n                variant === \"segmented\" && \"text-sm\",\n                variant === \"tab\" && \"text-[15px]\",\n              )}\n            >\n              {item.label}\n            </span>\n          )}\n          {item.children && item.children}\n        </motion.button>\n      ))}\n    </motion.div>\n  );\n};\n"],"mappings":";;;;;;;;;;AA6BA,MAAa,QAAQ,EACnB,WACA,SACA,OACA,OACA,WACA,SACA,OAAO,MACP,OACA,eAAe,YACA;AACf,QACE,oBAAC,OAAO;EACN,WAAW,WACT,oCACA,YAAY,eAAe,oCAC3B,YAAY,eAAe,SAAS,QAAQ,OAC5C,YAAY,eAAe,SAAS,QAAQ,OAC5C,CAAC,WAAW,UACZ,UACD;EACD,GAAI;YAEH,MAAM,KAAK,SACV,qBAAC,OAAO;GACN,WAAW,WACT,oIACA,CAAC,KAAK,SAAS,eACf,KAAK,YAAY,UAAU,eAAe,uBAC1C,KAAK,YAAY,UAAU,aAAa,uBACxC,SAAS,QAAQ,qBACjB,SAAS,QAAQ,sCACjB,CAAC,KAAK,YAAY,mBAClB,KAAK,WACL,gBAAgB,uBACjB;GAED,SAAS,KAAK;GACd,UAAU,KAAK;;IAEd,KAAK,YAAY,YAAY,eAC5B,oBAAC,OAAO;KACN,UAAU,0BAA0B;KACpC,YAAY;MAAE,UAAU;MAAK,MAAM;MAAQ;KAC3C,WAAW,WACT,oBACA,UAAU,aAAa,uBACvB,UAAU,eAAe,qBAC1B;MACW;IAGf,KAAK,YAAY,YAAY,SAC5B,4CACE,oBAAC,OAAO;KACN,SAAS,EAAE,SAAS,GAAG;KACvB,SAAS,EAAE,SAAS;MAAC;MAAG;MAAM;MAAG;MAAK;MAAG;MAAK,EAAE;KAChD,YAAY;MAAE,UAAU;MAAK,MAAM;MAAY;KAC/C,WAAW,WACT,2CACA,UAAU,aAAa,uCACvB,UAAU,eACR,uCACH;MACD,EACF,oBAAC;KACC,gBAAgB;KAChB,mBAAmB;KACnB,MAAM;KACN,SAAS,CAAC,eAAe;MACzB,IACD;IAGJ,KAAK,QACJ,oBAAC;KAAK,GAAI,KAAK;KAAM,WAAU;MAA2B;IAE3D,KAAK,SACJ,oBAAC;KACC,WAAW,WACT,qCACA,YAAY,eAAe,WAC3B,YAAY,SAAS,cACtB;eAEA,KAAK;MACD;IAER,KAAK,YAAY,KAAK;;KApDlB,KAAK,MAqDI,CAChB;GACS"}