@hexclave/dashboard-ui-components 1.0.10 → 1.0.12

package/dist/esm/components/analytics-chart/analytics-chart.js

@@ -5,6 +5,8 @@ import { cn } from "@hexclave/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CartesianGrid, ComposedChart, ReferenceArea, ReferenceLine, XAxis, YAxis } from "recharts";
+import { EMPTY_MATRIX, EMPTY_SERIES, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, resolveDataLayerStyle } from "./state.js";
+import { resolveAnalyticsChartStrings } from "./strings.js";
 import { DesignChartContainer } from "../chart-container.js";
 import { DefaultAnalyticsChartTooltip } from "./default-analytics-chart-tooltip.js";
 import { formatDelta, formatValue } from "./format.js";
@@ -13,8 +15,6 @@ import { DesignButton } from "../button.js";
 import { AnalyticsChartPie } from "./analytics-chart-pie.js";
 import { buildRampColors, resolveAnalyticsChartPalette } from "./palette.js";
 import { renderDataSeries } from "./render-data-series.js";
-import { EMPTY_MATRIX, EMPTY_SERIES, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, resolveDataLayerStyle } from "./state.js";
-import { resolveAnalyticsChartStrings } from "./strings.js";
 
 //#region src/components/analytics-chart/analytics-chart.tsx
 const FALLBACK_PRIMARY_STYLE = {

package/dist/esm/components/analytics-chart/index.js

@@ -1,9 +1,9 @@
+import { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_STATE, EMPTY_MATRIX, EMPTY_SERIES, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, patchLayerById, resolveDataLayerStyle, setLayerById } from "./state.js";
+import { ANALYTICS_CHART_DEFAULT_STRINGS, resolveAnalyticsChartStrings } from "./strings.js";
 import { DefaultAnalyticsChartTooltip, TrendPill } from "./default-analytics-chart-tooltip.js";
 import { DEFAULT_FORMAT_KIND, FORMAT_KIND_TYPES, formatDelta, formatValue } from "./format.js";
 import { pointValue } from "./types.js";
 import { ANALYTICS_CHART_DEFAULT_PALETTE, buildRampColors, buildSegmentThemeMap, resolveAnalyticsChartPalette } from "./palette.js";
-import { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_STATE, EMPTY_MATRIX, EMPTY_SERIES, STROKE_DASHARRAY, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, isAnalyticsChartDataLayer, isTimeseriesState, patchLayerById, resolveDataLayerStyle, setLayerById } from "./state.js";
-import { ANALYTICS_CHART_DEFAULT_STRINGS, resolveAnalyticsChartStrings } from "./strings.js";
 import { AnalyticsChart } from "./analytics-chart.js";
 
 export { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_PALETTE, ANALYTICS_CHART_DEFAULT_STATE, ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChart, DEFAULT_FORMAT_KIND, DefaultAnalyticsChartTooltip, EMPTY_MATRIX, EMPTY_SERIES, FORMAT_KIND_TYPES, STROKE_DASHARRAY, TrendPill, buildRampColors, buildSegmentThemeMap, computeLocalInProgressIdx, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, formatDelta, formatValue, isAnalyticsChartDataLayer, isTimeseriesState, patchLayerById, pointValue, resolveAnalyticsChartPalette, resolveAnalyticsChartStrings, resolveDataLayerStyle, setLayerById };

package/dist/esm/components/data-grid/data-grid.js

@@ -4,14 +4,14 @@ import { ArrowDown, ArrowUp, CaretDown, CaretUp, CheckSquare, MinusSquare, Squar
 import { cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { exportToCsv, formatGridDate, resolveColumnValue } from "./state.js";
-import { resolveDataGridStrings } from "./strings.js";
 import { throwErr } from "@hexclave/shared/dist/utils/errors";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DesignSkeleton } from "../skeleton.js";
 import { DEFAULT_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing.js";
 import { DataGridToolbar } from "./data-grid-toolbar.js";
+import { exportToCsv, formatGridDate, resolveColumnValue } from "./state.js";
+import { resolveDataGridStrings } from "./strings.js";
 
 //#region src/components/data-grid/data-grid.tsx
 function getEventTargetElement(target) {

package/dist/esm/components/data-grid/index.js

@@ -1,7 +1,7 @@
-import { applyQuickSearch, buildRowComparator, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, formatGridDate, paginateRows, resolveColumnValue } from "./state.js";
-import { DATA_GRID_DEFAULT_STRINGS, resolveDataGridStrings } from "./strings.js";
 import { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing.js";
 import { DataGridToolbar } from "./data-grid-toolbar.js";
+import { applyQuickSearch, buildRowComparator, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, formatGridDate, paginateRows, resolveColumnValue } from "./state.js";
+import { DATA_GRID_DEFAULT_STRINGS, resolveDataGridStrings } from "./strings.js";
 import { DataGrid, isDataGridInteractiveRowClickTarget } from "./data-grid.js";
 import { useDataSource } from "./use-data-source.js";
 import { useDataGridUrlState } from "./use-url-state.js";

package/dist/esm/components/data-grid/use-url-state.js

@@ -1,8 +1,8 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { createDefaultDataGridState } from "./state.js";
 import { DEFAULT_COL_WIDTH, clampColumnWidth } from "./data-grid-sizing.js";
+import { createDefaultDataGridState } from "./state.js";
 
 //#region src/components/data-grid/use-url-state.ts
 function serializeWidths(widths, columns) {

package/dist/esm/components/pill-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pill-toggle.d.ts","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"mappings":";;;KAQK,oBAAA;AAAA,KACA,wBAAA;AAAA,KAEO,sBAAA;EACV,EAAA;EACA,KAAA;EACA,IAAA,GAAO,KAAA,CAAM,WAAA;AAAA;AAAA,KAGH,qBAAA;EACV,OAAA,EAAS,sBAAA;EACT,QAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,IAAA,GAAO,oBAAA;EACP,YAAA;EACA,QAAA,GAAW,wBAAA,EAZqB;EAchC,UAAA;EACA,SAAA;AAAA;AAAA,iBA+Bc,gBAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,UAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"pill-toggle.d.ts","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"mappings":";;;KAOK,oBAAA;AAAA,KACA,wBAAA;AAAA,KAEO,sBAAA;EACV,EAAA;EACA,KAAA;EACA,IAAA,GAAO,KAAA,CAAM,WAAA;AAAA;AAAA,KAGH,qBAAA;EACV,OAAA,EAAS,sBAAA;EACT,QAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,IAAA,GAAO,oBAAA;EACP,YAAA;EACA,QAAA,GAAW,wBAAA,EAZqB;EAchC,UAAA;EACA,SAAA;AAAA;AAAA,iBAuCc,gBAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,UAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/pill-toggle.js

@@ -1,24 +1,27 @@
 "use client";
 
-import { Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@hexclave/ui";
+import { Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useGlassmorphicDefault } from "./card.js";
 
 //#region src/components/pill-toggle.tsx
+const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
 const sizeClasses = new Map([
 	["sm", {
 		button: "px-3 py-1.5 text-xs",
+		iconOnlyButton: "h-7 w-7 text-xs",
 		icon: "h-3.5 w-3.5"
 	}],
 	["md", {
 		button: "px-4 py-2 text-sm",
+		iconOnlyButton: "h-9 w-9 text-sm",
 		icon: "h-4 w-4"
 	}],
 	["lg", {
 		button: "px-5 py-2.5 text-sm",
+		iconOnlyButton: "h-10 w-10 text-sm",
 		icon: "h-4 w-4"
 	}]
 ]);
@@ -40,6 +43,10 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 	const sizeClass = getMapValueOrThrow(sizeClasses, size, "sizeClasses");
 	const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
 	const [loadingOptionId, setLoadingOptionId] = useState(null);
+	const [sliderMetrics, setSliderMetrics] = useState(null);
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	const toggleRef = useRef(null);
+	const optionRefs = useRef(/* @__PURE__ */ new Map());
 	const handleClick = (optionId) => {
 		const result = onSelect(optionId);
 		if (result && typeof result.then === "function") {
@@ -47,16 +54,57 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 			runAsynchronouslyWithAlert(Promise.resolve(result).finally(() => setLoadingOptionId(null)));
 		}
 	};
-	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
-		className: cn("inline-flex items-center gap-1 p-1 rounded-xl", glassmorphic ? "bg-foreground/[0.04] backdrop-blur-sm" : "bg-black/[0.08] dark:bg-white/[0.04]", className),
-		children: options.map((option) => {
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);
+		updatePrefersReducedMotion();
+		mediaQuery.addEventListener("change", updatePrefersReducedMotion);
+		return () => mediaQuery.removeEventListener("change", updatePrefersReducedMotion);
+	}, []);
+	useEffect(() => {
+		const toggle = toggleRef.current;
+		const selectedButton = optionRefs.current.get(selected);
+		if (!toggle || !selectedButton) {
+			setSliderMetrics(null);
+			return;
+		}
+		const updateSliderMetrics = () => {
+			setSliderMetrics({
+				left: selectedButton.offsetLeft,
+				width: selectedButton.offsetWidth
+			});
+		};
+		updateSliderMetrics();
+		if (typeof ResizeObserver === "undefined") return;
+		const resizeObserver = new ResizeObserver(updateSliderMetrics);
+		resizeObserver.observe(toggle);
+		resizeObserver.observe(selectedButton);
+		return () => resizeObserver.disconnect();
+	}, [options, selected]);
+	const body = /* @__PURE__ */ jsxs("div", {
+		ref: toggleRef,
+		className: cn("relative inline-flex items-center gap-1 p-1 rounded-xl", glassmorphic ? "bg-foreground/[0.04] backdrop-blur-sm" : "bg-black/[0.08] dark:bg-white/[0.04]", className),
+		children: [sliderMetrics != null && /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-background shadow-sm ring-1", glassmorphic ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:ring-[hsl(240,71%,70%)]/20" : activeRingClass),
+			style: {
+				transition: prefersReducedMotion ? void 0 : sliderTransition,
+				transform: `translateX(${sliderMetrics.left}px)`,
+				width: sliderMetrics.width
+			}
+		}), options.map((option) => {
 			const isActive = selected === option.id;
 			const Icon = option.icon;
 			const pill = /* @__PURE__ */ jsxs("button", {
 				type: "button",
+				ref: (element) => {
+					if (element) optionRefs.current.set(option.id, element);
+					else optionRefs.current.delete(option.id);
+				},
 				onClick: () => handleClick(option.id),
 				disabled: loadingOptionId !== null,
-				className: cn("relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none", sizeClass.button, isActive ? cn("bg-white dark:bg-background text-foreground shadow-sm ring-1", glassmorphic ? "ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20" : activeRingClass) : cn("text-muted-foreground hover:text-foreground", glassmorphic ? "hover:bg-background/50" : "hover:bg-black/[0.06] dark:hover:bg-white/[0.04]")),
+				"aria-label": showLabels ? void 0 : option.label,
+				className: cn("relative z-10 flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none", showLabels ? sizeClass.button : sizeClass.iconOnlyButton, !showLabels && "justify-center p-0", isActive ? cn("text-foreground", glassmorphic && "dark:text-[hsl(240,71%,90%)]") : cn("text-muted-foreground hover:text-foreground", glassmorphic ? "hover:bg-background/50" : "hover:bg-black/[0.06] dark:hover:bg-white/[0.04]")),
 				children: [loadingOptionId === option.id && /* @__PURE__ */ jsx(Spinner, {
 					size: 12,
 					className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
@@ -76,8 +124,9 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 				}) })]
 			}, option.id);
 			return pill;
-		})
-	}) });
+		})]
+	});
+	return showLabels ? body : /* @__PURE__ */ jsx(TooltipProvider, { children: body });
 }
 
 //#endregion

package/dist/esm/components/pill-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill-toggle.js","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@hexclave/ui\";\nimport { TooltipPortal } from \"@radix-ui/react-tooltip\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignPillToggleSize = \"sm\" | \"md\" | \"lg\";\ntype DesignPillToggleGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignPillToggleOption = {\n  id: string,\n  label: string,\n  icon?: React.ElementType,\n};\n\nexport type DesignPillToggleProps = {\n  options: DesignPillToggleOption[],\n  selected: string,\n  onSelect: (id: string) => void | Promise<void>,\n  size?: DesignPillToggleSize,\n  glassmorphic?: boolean,\n  gradient?: DesignPillToggleGradient,\n  /** When false, hides labels and shows a tooltip on hover instead. Defaults to true. */\n  showLabels?: boolean,\n  className?: string,\n};\n\ntype SizeClass = {\n  button: string,\n  icon: string,\n};\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n  [\"sm\", { button: \"px-3 py-1.5 text-xs\", icon: \"h-3.5 w-3.5\" }],\n  [\"md\", { button: \"px-4 py-2 text-sm\", icon: \"h-4 w-4\" }],\n  [\"lg\", { button: \"px-5 py-2.5 text-sm\", icon: \"h-4 w-4\" }],\n]);\n\nconst gradientClasses = new Map<DesignPillToggleGradient, string>([\n  [\"blue\", \"ring-blue-500/20 dark:ring-blue-400/20\"],\n  [\"cyan\", \"ring-cyan-500/20 dark:ring-cyan-400/20\"],\n  [\"purple\", \"ring-purple-500/20 dark:ring-purple-400/20\"],\n  [\"green\", \"ring-emerald-500/20 dark:ring-emerald-400/20\"],\n  [\"orange\", \"ring-amber-500/20 dark:ring-amber-400/20\"],\n  [\"default\", \"ring-black/[0.12] dark:ring-white/[0.06]\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignPillToggle({\n  options,\n  selected,\n  onSelect,\n  size = \"md\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  showLabels = true,\n  className,\n}: DesignPillToggleProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(sizeClasses, size, \"sizeClasses\");\n  const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n\n  const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);\n\n  const handleClick = (optionId: string) => {\n    const result = onSelect(optionId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingOptionId(optionId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingOptionId(null))\n      );\n    }\n  };\n\n  return (\n    <TooltipProvider>\n      <div\n        className={cn(\n          \"inline-flex items-center gap-1 p-1 rounded-xl\",\n          glassmorphic\n            ? \"bg-foreground/[0.04] backdrop-blur-sm\"\n            : \"bg-black/[0.08] dark:bg-white/[0.04]\",\n          className\n        )}\n      >\n        {options.map((option) => {\n          const isActive = selected === option.id;\n          const Icon = option.icon;\n\n          const pill = (\n            <button\n              type=\"button\"\n              key={option.id}\n              onClick={() => handleClick(option.id)}\n              disabled={loadingOptionId !== null}\n              className={cn(\n                \"relative flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n                sizeClass.button,\n                isActive\n                  ? cn(\n                    \"bg-white dark:bg-background text-foreground shadow-sm ring-1\",\n                    glassmorphic\n                      ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20\"\n                      : activeRingClass\n                  )\n                  : cn(\n                    \"text-muted-foreground hover:text-foreground\",\n                    glassmorphic\n                      ? \"hover:bg-background/50\"\n                      : \"hover:bg-black/[0.06] dark:hover:bg-white/[0.04]\"\n                  )\n              )}\n            >\n              {loadingOptionId === option.id && (\n                <Spinner\n                  size={12}\n                  className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n                />\n              )}\n              <span className={cn(\n                \"flex items-center gap-2\",\n                loadingOptionId === option.id && \"invisible\"\n              )}>\n                {Icon && <Icon className={sizeClass.icon} />}\n                {showLabels && option.label}\n              </span>\n            </button>\n          );\n\n          if (!showLabels) {\n            return (\n              <Tooltip key={option.id} delayDuration={0}>\n                <TooltipTrigger asChild>\n                  {pill}\n                </TooltipTrigger>\n                <TooltipPortal>\n                  <TooltipContent side=\"top\">\n                    {option.label}\n                  </TooltipContent>\n                </TooltipPortal>\n              </Tooltip>\n            );\n          }\n\n          return pill;\n        })}\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkCA,MAAM,cAAc,IAAI,IAAqC;CAC3D,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAe,CAAC;CAC9D,CAAC,MAAM;EAAE,QAAQ;EAAqB,MAAM;EAAW,CAAC;CACxD,CAAC,MAAM;EAAE,QAAQ;EAAuB,MAAM;EAAW,CAAC;CAC3D,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAsC;CAChE,CAAC,QAAQ,yCAAyC;CAClD,CAAC,QAAQ,yCAAyC;CAClD,CAAC,UAAU,6CAA6C;CACxD,CAAC,SAAS,+CAA+C;CACzD,CAAC,UAAU,2CAA2C;CACtD,CAAC,WAAW,2CAA2C;CACxD,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAGT,SAAgB,iBAAiB,EAC/B,SACA,UACA,UACA,OAAO,MACP,cAAc,kBACd,WAAW,WACX,aAAa,MACb,aACwB;CACxB,MAAM,eAAe,uBAAuB,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,aAAa,MAAM,cAAc;CACtE,MAAM,kBAAkB,mBAAmB,iBAAiB,UAAU,kBAAkB;CAExF,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAE3E,MAAM,eAAe,aAAqB;EACxC,MAAM,SAAS,SAAS,SAAS;AACjC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,sBAAmB,SAAS;AAC5B,8BACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,mBAAmB,KAAK,CAAC,CAChE;;;AAIL,QACE,oBAAC,6BACC,oBAAC;EACC,WAAW,GACT,iDACA,eACI,0CACA,wCACJ,UACD;YAEA,QAAQ,KAAK,WAAW;GACvB,MAAM,WAAW,aAAa,OAAO;GACrC,MAAM,OAAO,OAAO;GAEpB,MAAM,OACJ,qBAAC;IACC,MAAK;IAEL,eAAe,YAAY,OAAO,GAAG;IACrC,UAAU,oBAAoB;IAC9B,WAAW,GACT,6GACA,UAAU,QACV,WACI,GACA,gEACA,eACI,sHACA,gBACL,GACC,GACA,+CACA,eACI,2BACA,mDACL,CACJ;eAEA,oBAAoB,OAAO,MAC1B,oBAAC;KACC,MAAM;KACN,WAAU;MACV,EAEJ,qBAAC;KAAK,WAAW,GACf,2BACA,oBAAoB,OAAO,MAAM,YAClC;gBACE,QAAQ,oBAAC,QAAK,WAAW,UAAU,OAAQ,EAC3C,cAAc,OAAO;MACjB;MAjCF,OAAO,GAkCL;AAGX,OAAI,CAAC,WACH,QACE,qBAAC;IAAwB,eAAe;eACtC,oBAAC;KAAe;eACb;MACc,EACjB,oBAAC,2BACC,oBAAC;KAAe,MAAK;eAClB,OAAO;MACO,GACH;MARJ,OAAO,GASX;AAId,UAAO;IACP;GACE,GACU"}
+{"version":3,"file":"pill-toggle.js","names":[],"sources":["../../../src/components/pill-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn, Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignPillToggleSize = \"sm\" | \"md\" | \"lg\";\ntype DesignPillToggleGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignPillToggleOption = {\n  id: string,\n  label: string,\n  icon?: React.ElementType,\n};\n\nexport type DesignPillToggleProps = {\n  options: DesignPillToggleOption[],\n  selected: string,\n  onSelect: (id: string) => void | Promise<void>,\n  size?: DesignPillToggleSize,\n  glassmorphic?: boolean,\n  gradient?: DesignPillToggleGradient,\n  /** When false, hides labels and shows a tooltip on hover instead. Defaults to true. */\n  showLabels?: boolean,\n  className?: string,\n};\n\ntype SizeClass = {\n  button: string,\n  iconOnlyButton: string,\n  icon: string,\n};\n\ntype SliderMetrics = {\n  left: number,\n  width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\n\nconst sizeClasses = new Map<DesignPillToggleSize, SizeClass>([\n  [\"sm\", { button: \"px-3 py-1.5 text-xs\", iconOnlyButton: \"h-7 w-7 text-xs\", icon: \"h-3.5 w-3.5\" }],\n  [\"md\", { button: \"px-4 py-2 text-sm\", iconOnlyButton: \"h-9 w-9 text-sm\", icon: \"h-4 w-4\" }],\n  [\"lg\", { button: \"px-5 py-2.5 text-sm\", iconOnlyButton: \"h-10 w-10 text-sm\", icon: \"h-4 w-4\" }],\n]);\n\nconst gradientClasses = new Map<DesignPillToggleGradient, string>([\n  [\"blue\", \"ring-blue-500/20 dark:ring-blue-400/20\"],\n  [\"cyan\", \"ring-cyan-500/20 dark:ring-cyan-400/20\"],\n  [\"purple\", \"ring-purple-500/20 dark:ring-purple-400/20\"],\n  [\"green\", \"ring-emerald-500/20 dark:ring-emerald-400/20\"],\n  [\"orange\", \"ring-amber-500/20 dark:ring-amber-400/20\"],\n  [\"default\", \"ring-black/[0.12] dark:ring-white/[0.06]\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignPillToggle({\n  options,\n  selected,\n  onSelect,\n  size = \"md\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  showLabels = true,\n  className,\n}: DesignPillToggleProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(sizeClasses, size, \"sizeClasses\");\n  const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n\n  const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);\n  const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics | null>(null);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const toggleRef = useRef<HTMLDivElement | null>(null);\n  const optionRefs = useRef(new Map<string, HTMLButtonElement>());\n\n  const handleClick = (optionId: string) => {\n    const result = onSelect(optionId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingOptionId(optionId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingOptionId(null))\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n    updatePrefersReducedMotion();\n    mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n    return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n  }, []);\n\n  useEffect(() => {\n    const toggle = toggleRef.current;\n    const selectedButton = optionRefs.current.get(selected);\n\n    if (!toggle || !selectedButton) {\n      setSliderMetrics(null);\n      return;\n    }\n\n    const updateSliderMetrics = () => {\n      setSliderMetrics({\n        left: selectedButton.offsetLeft,\n        width: selectedButton.offsetWidth,\n      });\n    };\n\n    updateSliderMetrics();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const resizeObserver = new ResizeObserver(updateSliderMetrics);\n    resizeObserver.observe(toggle);\n    resizeObserver.observe(selectedButton);\n\n    return () => resizeObserver.disconnect();\n  }, [options, selected]);\n\n  const body = (\n    <div\n      ref={toggleRef}\n      className={cn(\n        \"relative inline-flex items-center gap-1 p-1 rounded-xl\",\n        glassmorphic\n          ? \"bg-foreground/[0.04] backdrop-blur-sm\"\n          : \"bg-black/[0.08] dark:bg-white/[0.04]\",\n        className\n      )}\n    >\n      {sliderMetrics != null && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-background shadow-sm ring-1\",\n            glassmorphic\n              ? \"ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:ring-[hsl(240,71%,70%)]/20\"\n              : activeRingClass\n          )}\n          style={{\n            transition: prefersReducedMotion ? undefined : sliderTransition,\n            transform: `translateX(${sliderMetrics.left}px)`,\n            width: sliderMetrics.width,\n          }}\n        />\n      )}\n      {options.map((option) => {\n        const isActive = selected === option.id;\n        const Icon = option.icon;\n\n        const pill = (\n          <button\n            type=\"button\"\n            key={option.id}\n            ref={(element) => {\n              if (element) {\n                optionRefs.current.set(option.id, element);\n              } else {\n                optionRefs.current.delete(option.id);\n              }\n            }}\n            onClick={() => handleClick(option.id)}\n            disabled={loadingOptionId !== null}\n            aria-label={showLabels ? undefined : option.label}\n            className={cn(\n              \"relative z-10 flex items-center gap-2 font-medium rounded-lg transition-all duration-150 hover:transition-none\",\n              showLabels ? sizeClass.button : sizeClass.iconOnlyButton,\n              !showLabels && \"justify-center p-0\",\n              isActive\n                ? cn(\"text-foreground\", glassmorphic && \"dark:text-[hsl(240,71%,90%)]\")\n                : cn(\n                  \"text-muted-foreground hover:text-foreground\",\n                  glassmorphic\n                    ? \"hover:bg-background/50\"\n                    : \"hover:bg-black/[0.06] dark:hover:bg-white/[0.04]\"\n                )\n            )}\n          >\n            {loadingOptionId === option.id && (\n              <Spinner\n                size={12}\n                className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n              />\n            )}\n            <span className={cn(\n              \"flex items-center gap-2\",\n              loadingOptionId === option.id && \"invisible\"\n            )}>\n              {Icon && <Icon className={sizeClass.icon} />}\n              {showLabels && option.label}\n            </span>\n          </button>\n        );\n\n        if (!showLabels) {\n          return (\n            <Tooltip key={option.id} delayDuration={0}>\n              <TooltipTrigger asChild>\n                {pill}\n              </TooltipTrigger>\n              <TooltipPortal>\n                <TooltipContent side=\"top\">\n                  {option.label}\n                </TooltipContent>\n              </TooltipPortal>\n            </Tooltip>\n          );\n        }\n\n        return pill;\n      })}\n    </div>\n  );\n\n  // Tooltips require a TooltipProvider in scope. Wrap defensively so callers\n  // outside an existing provider (e.g. inside a PageLayout actions slot) work.\n  return showLabels ? body : <TooltipProvider>{body}</TooltipProvider>;\n}\n"],"mappings":"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"}

package/dist/esm/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/tabs.tsx"],"mappings":";;;;KAOK,cAAA;AAAA,KACA,kBAAA;AAAA,KAEO,qBAAA;EACV,EAAA;EACA,KAAA;EACA,KAAA;EACA,UAAA;EACA,IAAA,GAAO,KAAA,CAAM,aAAA,CAAc,KAAA,CAAM,QAAA,CAAS,aAAA;AAAA;AAAA,KAGhC,uBAAA,GAA0B,IAAA,CAAK,KAAA,CAAM,cAAA;EAC/C,UAAA,EAAY,qBAAA;EACZ,gBAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,SAAA;EACA,IAAA,GAAO,cAAA;EACP,YAAA;EACA,QAAA,GAAW,kBAAA,EAVgB;EAY3B,QAAA,GAAW,SAAA;AAAA;AAAA,iBA8EG,kBAAA,CAAA;EACd,UAAA;EACA,gBAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../../src/components/tabs.tsx"],"mappings":";;;;KAOK,cAAA;AAAA,KACA,kBAAA;AAAA,KAEO,qBAAA;EACV,EAAA;EACA,KAAA;EACA,KAAA;EACA,UAAA;EACA,IAAA,GAAO,KAAA,CAAM,aAAA,CAAc,KAAA,CAAM,QAAA,CAAS,aAAA;AAAA;AAAA,KAGhC,uBAAA,GAA0B,IAAA,CAAK,KAAA,CAAM,cAAA;EAC/C,UAAA,EAAY,qBAAA;EACZ,gBAAA;EACA,QAAA,GAAW,EAAA,oBAAsB,OAAA;EACjC,SAAA;EACA,IAAA,GAAO,cAAA;EACP,YAAA;EACA,QAAA,GAAW,kBAAA,EAVgB;EAY3B,QAAA,GAAW,SAAA;AAAA;AAAA,iBAqFG,kBAAA,CAAA;EACd,UAAA;EACA,gBAAA;EACA,QAAA;EACA,SAAA;EACA,IAAA;EACA,YAAA,EAAc,gBAAA;EACd,QAAA;EACA,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/tabs.js

@@ -2,11 +2,12 @@
 
 import { Spinner, cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { useGlassmorphicDefault } from "./card.js";
 
 //#region src/components/tabs.tsx
+const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
 const tabSizeClasses = new Map([["sm", {
 	button: "px-3 py-2 text-xs",
 	badge: "text-[10px] px-1.5 py-0.5"
@@ -56,6 +57,10 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 	const sizeClass = getMapValueOrThrow(tabSizeClasses, size, "tabSizeClasses");
 	const gradientClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
 	const [loadingCategoryId, setLoadingCategoryId] = useState(null);
+	const [sliderMetrics, setSliderMetrics] = useState(null);
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	const tabListRef = useRef(null);
+	const tabButtonRefs = useRef(/* @__PURE__ */ new Map());
 	const handleSelect = (categoryId) => {
 		const result = onSelect(categoryId);
 		if (result && typeof result.then === "function") {
@@ -63,25 +68,73 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 			runAsynchronouslyWithAlert(Promise.resolve(result).finally(() => setLoadingCategoryId(null)));
 		}
 	};
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);
+		updatePrefersReducedMotion();
+		mediaQuery.addEventListener("change", updatePrefersReducedMotion);
+		return () => mediaQuery.removeEventListener("change", updatePrefersReducedMotion);
+	}, []);
+	useEffect(() => {
+		const tabList = tabListRef.current;
+		const selectedButton = tabButtonRefs.current.get(selectedCategory);
+		if (!tabList || !selectedButton) {
+			setSliderMetrics(null);
+			return;
+		}
+		const updateSliderMetrics = () => {
+			setSliderMetrics({
+				left: selectedButton.offsetLeft,
+				width: selectedButton.offsetWidth
+			});
+		};
+		updateSliderMetrics();
+		if (typeof ResizeObserver === "undefined") return;
+		const resizeObserver = new ResizeObserver(updateSliderMetrics);
+		resizeObserver.observe(tabList);
+		resizeObserver.observe(selectedButton);
+		return () => resizeObserver.disconnect();
+	}, [categories, selectedCategory]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex w-full min-w-0 items-center gap-2", glassmorphic ? "rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]" : "border-b border-gray-300 dark:border-gray-800", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("flex min-h-0 min-w-0 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden"),
-			children: categories.map((category) => {
-				const isActive = selectedCategory === category.id;
-				const badgeValue = category.badgeCount ?? category.count;
-				const shouldShowBadge = showBadge && badgeValue !== void 0;
-				return /* @__PURE__ */ jsxs("button", {
-					onClick: () => handleSelect(category.id),
-					disabled: loadingCategoryId !== null,
-					className: cn("font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap", "hover:text-gray-900 dark:hover:text-gray-100", sizeClass.button, glassmorphic ? "rounded-lg" : "", isActive ? cn(gradientClass.activeText, glassmorphic && "bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]") : cn("text-gray-700 dark:text-gray-400", glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]")),
-					children: [
-						loadingCategoryId === category.id && /* @__PURE__ */ jsx(Spinner, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: tabListRef,
+			className: cn("relative flex min-h-0 min-w-0 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden"),
+			children: [
+				glassmorphic && sliderMetrics != null && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-background shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:ring-white/[0.06]",
+					style: {
+						transition: prefersReducedMotion ? void 0 : sliderTransition,
+						transform: `translateX(${sliderMetrics.left}px)`,
+						width: sliderMetrics.width
+					}
+				}),
+				!glassmorphic && sliderMetrics != null && /* @__PURE__ */ jsx("div", {
+					className: cn("pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none", gradientClass.underline),
+					style: {
+						transition: prefersReducedMotion ? void 0 : sliderTransition,
+						transform: `translateX(${sliderMetrics.left}px)`,
+						width: sliderMetrics.width
+					}
+				}),
+				categories.map((category) => {
+					const isActive = selectedCategory === category.id;
+					const badgeValue = category.badgeCount ?? category.count;
+					const shouldShowBadge = showBadge && badgeValue !== void 0;
+					return /* @__PURE__ */ jsxs("button", {
+						ref: (element) => {
+							if (element) tabButtonRefs.current.set(category.id, element);
+							else tabButtonRefs.current.delete(category.id);
+						},
+						onClick: () => handleSelect(category.id),
+						disabled: loadingCategoryId !== null,
+						className: cn("font-medium transition-all duration-150 hover:transition-none relative z-10 flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap", "hover:text-gray-900 dark:hover:text-gray-100", sizeClass.button, glassmorphic ? "rounded-lg" : "", isActive ? gradientClass.activeText : cn("text-gray-700 dark:text-gray-400", glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]")),
+						children: [loadingCategoryId === category.id && /* @__PURE__ */ jsx(Spinner, {
 							size: 12,
 							className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-						}),
-						/* @__PURE__ */ jsxs("span", {
+						}), /* @__PURE__ */ jsxs("span", {
 							className: cn("flex items-center gap-2", loadingCategoryId === category.id && "invisible"),
 							children: [
 								category.icon && /* @__PURE__ */ jsx(category.icon, {
@@ -94,11 +147,10 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 									children: badgeValue
 								})
 							]
-						}),
-						!glassmorphic && isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
-					]
-				}, category.id);
-			})
+						})]
+					}, category.id);
+				})
+			]
 		}), trailing != null ? /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center",
 			children: trailing

package/dist/esm/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignTabsSize = \"sm\" | \"md\";\ntype DesignTabsGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignCategoryTabItem = {\n  id: string,\n  label: string,\n  count?: number,\n  badgeCount?: number,\n  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>,\n};\n\nexport type DesignCategoryTabsProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  categories: DesignCategoryTabItem[],\n  selectedCategory: string,\n  onSelect: (id: string) => void | Promise<void>,\n  showBadge?: boolean,\n  size?: DesignTabsSize,\n  glassmorphic?: boolean,\n  gradient?: DesignTabsGradient,\n  /** Renders inside the tab bar after the tab buttons (not a tab). */\n  trailing?: ReactNode,\n};\n\ntype TabSizeClass = {\n  button: string,\n  badge: string,\n};\n\ntype GradientClass = {\n  activeText: string,\n  activeBadge: string,\n  underline: string,\n};\n\nconst tabSizeClasses = new Map<DesignTabsSize, TabSizeClass>([\n  [\"sm\", { button: \"px-3 py-2 text-xs\", badge: \"text-[10px] px-1.5 py-0.5\" }],\n  [\"md\", { button: \"px-4 py-3 text-sm\", badge: \"text-xs px-1.5 py-0.5\" }],\n]);\n\nconst gradientClasses = new Map<DesignTabsGradient, GradientClass>([\n  [\n    \"blue\",\n    {\n      activeText: \"text-blue-700 dark:text-blue-400\",\n      activeBadge: \"bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400\",\n      underline: \"bg-blue-700 dark:bg-blue-400\",\n    },\n  ],\n  [\n    \"cyan\",\n    {\n      activeText: \"text-cyan-700 dark:text-cyan-300\",\n      activeBadge: \"bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300\",\n      underline: \"bg-cyan-600 dark:bg-cyan-400\",\n    },\n  ],\n  [\n    \"purple\",\n    {\n      activeText: \"text-purple-700 dark:text-purple-300\",\n      activeBadge: \"bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300\",\n      underline: \"bg-purple-600 dark:bg-purple-400\",\n    },\n  ],\n  [\n    \"green\",\n    {\n      activeText: \"text-emerald-700 dark:text-emerald-300\",\n      activeBadge: \"bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300\",\n      underline: \"bg-emerald-600 dark:bg-emerald-400\",\n    },\n  ],\n  [\n    \"orange\",\n    {\n      activeText: \"text-amber-700 dark:text-amber-300\",\n      activeBadge: \"bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300\",\n      underline: \"bg-amber-600 dark:bg-amber-400\",\n    },\n  ],\n  [\n    \"default\",\n    {\n      activeText: \"text-foreground\",\n      activeBadge: \"bg-foreground/10 text-foreground\",\n      underline: \"bg-foreground/80\",\n    },\n  ],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignCategoryTabs({\n  categories,\n  selectedCategory,\n  onSelect,\n  showBadge = true,\n  size = \"sm\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"blue\",\n  trailing,\n  className,\n  ...props\n}: DesignCategoryTabsProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(tabSizeClasses, size, \"tabSizeClasses\");\n  const gradientClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n  const [loadingCategoryId, setLoadingCategoryId] = useState<string | null>(null);\n\n  const handleSelect = (categoryId: string) => {\n    const result = onSelect(categoryId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingCategoryId(categoryId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingCategoryId(null))\n      );\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 items-center gap-2\",\n        glassmorphic\n          ? \"rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]\"\n          : \"border-b border-gray-300 dark:border-gray-800\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"flex min-h-0 min-w-0 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n        )}\n      >\n        {categories.map((category) => {\n          const isActive = selectedCategory === category.id;\n          const badgeValue = category.badgeCount ?? category.count;\n          const shouldShowBadge = showBadge && badgeValue !== undefined;\n\n          return (\n            <button\n              key={category.id}\n              onClick={() => handleSelect(category.id)}\n              disabled={loadingCategoryId !== null}\n              className={cn(\n                \"font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap\",\n                \"hover:text-gray-900 dark:hover:text-gray-100\",\n                sizeClass.button,\n                glassmorphic ? \"rounded-lg\" : \"\",\n                isActive\n                  ? cn(\n                    gradientClass.activeText,\n                    glassmorphic && \"bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                  )\n                  : cn(\n                    \"text-gray-700 dark:text-gray-400\",\n                    glassmorphic && \"rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                  )\n              )}\n            >\n              {loadingCategoryId === category.id && (\n                <Spinner\n                  size={12}\n                  className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n                />\n              )}\n              <span className={cn(\n                \"flex items-center gap-2\",\n                loadingCategoryId === category.id && \"invisible\"\n              )}>\n                {category.icon && (\n                  <category.icon className=\"h-4 w-4 shrink-0\" aria-hidden />\n                )}\n                {category.label}\n                {shouldShowBadge && (\n                  <span\n                    className={cn(\n                      \"rounded-full\",\n                      sizeClass.badge,\n                      isActive\n                        ? gradientClass.activeBadge\n                        : \"bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400\"\n                    )}\n                  >\n                    {badgeValue}\n                  </span>\n                )}\n              </span>\n              {!glassmorphic && isActive && (\n                <div className={cn(\"absolute bottom-0 left-0 right-0 h-0.5\", gradientClass.underline)} />\n              )}\n            </button>\n          );\n        })}\n      </div>\n      {trailing != null ? (\n        <div className=\"flex shrink-0 items-center\">\n          {trailing}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAyCA,MAAM,iBAAiB,IAAI,IAAkC,CAC3D,CAAC,MAAM;CAAE,QAAQ;CAAqB,OAAO;CAA6B,CAAC,EAC3E,CAAC,MAAM;CAAE,QAAQ;CAAqB,OAAO;CAAyB,CAAC,CACxE,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAuC;CACjE,CACE,QACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,QACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,UACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,SACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,UACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACD,CACE,WACA;EACE,YAAY;EACZ,aAAa;EACb,WAAW;EACZ,CACF;CACF,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAGT,SAAgB,mBAAmB,EACjC,YACA,kBACA,UACA,YAAY,MACZ,OAAO,MACP,cAAc,kBACd,WAAW,QACX,UACA,WACA,GAAG,SACuB;CAC1B,MAAM,eAAe,uBAAuB,iBAAiB;CAC7D,MAAM,YAAY,mBAAmB,gBAAgB,MAAM,iBAAiB;CAC5E,MAAM,gBAAgB,mBAAmB,iBAAiB,UAAU,kBAAkB;CACtF,MAAM,CAAC,mBAAmB,wBAAwB,SAAwB,KAAK;CAE/E,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,SAAS,SAAS,WAAW;AACnC,MAAI,UAAU,OAAQ,OAAyB,SAAS,YAAY;AAClE,wBAAqB,WAAW;AAChC,8BACE,QAAQ,QAAQ,OAAO,CAAC,cAAc,qBAAqB,KAAK,CAAC,CAClE;;;AAIL,QACE,qBAAC;EACC,WAAW,GACT,0CACA,eACI,wHACA,iDACJ,UACD;EACD,GAAI;aAEJ,oBAAC;GACC,WAAW,GACT,oGACD;aAEA,WAAW,KAAK,aAAa;IAC5B,MAAM,WAAW,qBAAqB,SAAS;IAC/C,MAAM,aAAa,SAAS,cAAc,SAAS;IACnD,MAAM,kBAAkB,aAAa,eAAe;AAEpD,WACE,qBAAC;KAEC,eAAe,aAAa,SAAS,GAAG;KACxC,UAAU,sBAAsB;KAChC,WAAW,GACT,iJACA,gDACA,UAAU,QACV,eAAe,eAAe,IAC9B,WACI,GACA,cAAc,YACd,gBAAgB,wFACjB,GACC,GACA,oCACA,gBAAgB,0DACjB,CACJ;;MAEA,sBAAsB,SAAS,MAC9B,oBAAC;OACC,MAAM;OACN,WAAU;QACV;MAEJ,qBAAC;OAAK,WAAW,GACf,2BACA,sBAAsB,SAAS,MAAM,YACtC;;QACE,SAAS,QACR,oBAAC,SAAS;SAAK,WAAU;SAAmB;UAAc;QAE3D,SAAS;QACT,mBACC,oBAAC;SACC,WAAW,GACT,gBACA,UAAU,OACV,WACI,cAAc,cACd,gEACL;mBAEA;UACI;;QAEJ;MACN,CAAC,gBAAgB,YAChB,oBAAC,SAAI,WAAW,GAAG,0CAA0C,cAAc,UAAU,GAAI;;OAhDtF,SAAS,GAkDP;KAEX;IACE,EACL,YAAY,OACX,oBAAC;GAAI,WAAU;aACZ;IACG,GACJ;GACA"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\nimport { useGlassmorphicDefault } from \"./card\";\n\ntype DesignTabsSize = \"sm\" | \"md\";\ntype DesignTabsGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nexport type DesignCategoryTabItem = {\n  id: string,\n  label: string,\n  count?: number,\n  badgeCount?: number,\n  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>,\n};\n\nexport type DesignCategoryTabsProps = Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  categories: DesignCategoryTabItem[],\n  selectedCategory: string,\n  onSelect: (id: string) => void | Promise<void>,\n  showBadge?: boolean,\n  size?: DesignTabsSize,\n  glassmorphic?: boolean,\n  gradient?: DesignTabsGradient,\n  /** Renders inside the tab bar after the tab buttons (not a tab). */\n  trailing?: ReactNode,\n};\n\ntype TabSizeClass = {\n  button: string,\n  badge: string,\n};\n\ntype GradientClass = {\n  activeText: string,\n  activeBadge: string,\n  underline: string,\n};\n\ntype SliderMetrics = {\n  left: number,\n  width: number,\n};\n\nconst sliderTransition = \"transform 200ms ease-out, width 200ms ease-out\";\n\nconst tabSizeClasses = new Map<DesignTabsSize, TabSizeClass>([\n  [\"sm\", { button: \"px-3 py-2 text-xs\", badge: \"text-[10px] px-1.5 py-0.5\" }],\n  [\"md\", { button: \"px-4 py-3 text-sm\", badge: \"text-xs px-1.5 py-0.5\" }],\n]);\n\nconst gradientClasses = new Map<DesignTabsGradient, GradientClass>([\n  [\n    \"blue\",\n    {\n      activeText: \"text-blue-700 dark:text-blue-400\",\n      activeBadge: \"bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400\",\n      underline: \"bg-blue-700 dark:bg-blue-400\",\n    },\n  ],\n  [\n    \"cyan\",\n    {\n      activeText: \"text-cyan-700 dark:text-cyan-300\",\n      activeBadge: \"bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300\",\n      underline: \"bg-cyan-600 dark:bg-cyan-400\",\n    },\n  ],\n  [\n    \"purple\",\n    {\n      activeText: \"text-purple-700 dark:text-purple-300\",\n      activeBadge: \"bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300\",\n      underline: \"bg-purple-600 dark:bg-purple-400\",\n    },\n  ],\n  [\n    \"green\",\n    {\n      activeText: \"text-emerald-700 dark:text-emerald-300\",\n      activeBadge: \"bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300\",\n      underline: \"bg-emerald-600 dark:bg-emerald-400\",\n    },\n  ],\n  [\n    \"orange\",\n    {\n      activeText: \"text-amber-700 dark:text-amber-300\",\n      activeBadge: \"bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300\",\n      underline: \"bg-amber-600 dark:bg-amber-400\",\n    },\n  ],\n  [\n    \"default\",\n    {\n      activeText: \"text-foreground\",\n      activeBadge: \"bg-foreground/10 text-foreground\",\n      underline: \"bg-foreground/80\",\n    },\n  ],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport function DesignCategoryTabs({\n  categories,\n  selectedCategory,\n  onSelect,\n  showBadge = true,\n  size = \"sm\",\n  glassmorphic: glassmorphicProp,\n  gradient = \"blue\",\n  trailing,\n  className,\n  ...props\n}: DesignCategoryTabsProps) {\n  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);\n  const sizeClass = getMapValueOrThrow(tabSizeClasses, size, \"tabSizeClasses\");\n  const gradientClass = getMapValueOrThrow(gradientClasses, gradient, \"gradientClasses\");\n  const [loadingCategoryId, setLoadingCategoryId] = useState<string | null>(null);\n  const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics | null>(null);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const tabListRef = useRef<HTMLDivElement | null>(null);\n  const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>());\n\n  const handleSelect = (categoryId: string) => {\n    const result = onSelect(categoryId);\n    if (result && typeof (result as Promise<void>).then === \"function\") {\n      setLoadingCategoryId(categoryId);\n      runAsynchronouslyWithAlert(\n        Promise.resolve(result).finally(() => setLoadingCategoryId(null))\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const updatePrefersReducedMotion = () => setPrefersReducedMotion(mediaQuery.matches);\n\n    updatePrefersReducedMotion();\n    mediaQuery.addEventListener(\"change\", updatePrefersReducedMotion);\n\n    return () => mediaQuery.removeEventListener(\"change\", updatePrefersReducedMotion);\n  }, []);\n\n  useEffect(() => {\n    const tabList = tabListRef.current;\n    const selectedButton = tabButtonRefs.current.get(selectedCategory);\n\n    if (!tabList || !selectedButton) {\n      setSliderMetrics(null);\n      return;\n    }\n\n    const updateSliderMetrics = () => {\n      setSliderMetrics({\n        left: selectedButton.offsetLeft,\n        width: selectedButton.offsetWidth,\n      });\n    };\n\n    updateSliderMetrics();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n    const resizeObserver = new ResizeObserver(updateSliderMetrics);\n    resizeObserver.observe(tabList);\n    resizeObserver.observe(selectedButton);\n\n    return () => resizeObserver.disconnect();\n  }, [categories, selectedCategory]);\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 items-center gap-2\",\n        glassmorphic\n          ? \"rounded-xl bg-zinc-100/90 p-1 ring-1 ring-black/[0.06] backdrop-blur-sm dark:bg-white/[0.04] dark:ring-white/[0.06]\"\n          : \"border-b border-gray-300 dark:border-gray-800\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        ref={tabListRef}\n        className={cn(\n          \"relative flex min-h-0 min-w-0 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden\",\n        )}\n      >\n        {glassmorphic && sliderMetrics != null && (\n          <div\n            className=\"pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-background shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:ring-white/[0.06]\"\n            style={{\n              transition: prefersReducedMotion ? undefined : sliderTransition,\n              transform: `translateX(${sliderMetrics.left}px)`,\n              width: sliderMetrics.width,\n            }}\n          />\n        )}\n        {!glassmorphic && sliderMetrics != null && (\n          <div\n            className={cn(\n              \"pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none\",\n              gradientClass.underline\n            )}\n            style={{\n              transition: prefersReducedMotion ? undefined : sliderTransition,\n              transform: `translateX(${sliderMetrics.left}px)`,\n              width: sliderMetrics.width,\n            }}\n          />\n        )}\n        {categories.map((category) => {\n          const isActive = selectedCategory === category.id;\n          const badgeValue = category.badgeCount ?? category.count;\n          const shouldShowBadge = showBadge && badgeValue !== undefined;\n\n          return (\n            <button\n              key={category.id}\n              ref={(element) => {\n                if (element) {\n                  tabButtonRefs.current.set(category.id, element);\n                } else {\n                  tabButtonRefs.current.delete(category.id);\n                }\n              }}\n              onClick={() => handleSelect(category.id)}\n              disabled={loadingCategoryId !== null}\n              className={cn(\n                \"font-medium transition-all duration-150 hover:transition-none relative z-10 flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap\",\n                \"hover:text-gray-900 dark:hover:text-gray-100\",\n                sizeClass.button,\n                glassmorphic ? \"rounded-lg\" : \"\",\n                isActive\n                  ? gradientClass.activeText\n                  : cn(\n                    \"text-gray-700 dark:text-gray-400\",\n                    glassmorphic && \"rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                  )\n              )}\n            >\n              {loadingCategoryId === category.id && (\n                <Spinner\n                  size={12}\n                  className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n                />\n              )}\n              <span className={cn(\n                \"flex items-center gap-2\",\n                loadingCategoryId === category.id && \"invisible\"\n              )}>\n                {category.icon && (\n                  <category.icon className=\"h-4 w-4 shrink-0\" aria-hidden />\n                )}\n                {category.label}\n                {shouldShowBadge && (\n                  <span\n                    className={cn(\n                      \"rounded-full\",\n                      sizeClass.badge,\n                      isActive\n                        ? gradientClass.activeBadge\n                        : \"bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400\"\n                    )}\n                  >\n                    {badgeValue}\n                  </span>\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n      {trailing != null ? (\n        <div className=\"flex shrink-0 items-center\">\n          {trailing}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexclave/dashboard-ui-components",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "repository": "https://github.com/hexclave/hexclave",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -50,8 +50,8 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.0",
-    "@hexclave/shared": "1.0.10",
-    "@hexclave/ui": "1.0.10"
+    "@hexclave/shared": "1.0.12",
+    "@hexclave/ui": "1.0.12"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",