@hexclave/dashboard-ui-components 1.0.14 → 1.0.15

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

@@ -5,8 +5,6 @@ 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";
@@ -15,6 +13,8 @@ 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/button.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/components/button.d.ts
 declare const designButtonVariants: (props?: ({
-  variant?: "plain" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
   size?: "sm" | "lg" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type DesignOriginalButtonProps = {
@@ -36,7 +36,7 @@ declare const DesignButton: React.FC<{
 } & {
   asChild?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-  variant?: "plain" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
   size?: "sm" | "lg" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string> & {
   ref?: React.Ref<HTMLButtonElement> | undefined;

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 { 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 { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing.js";
+import { DataGridToolbar } from "./data-grid-toolbar.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 { DEFAULT_COL_WIDTH, clampColumnWidth } from "./data-grid-sizing.js";
 import { createDefaultDataGridState } from "./state.js";
+import { DEFAULT_COL_WIDTH, clampColumnWidth } from "./data-grid-sizing.js";
 
 //#region src/components/data-grid/use-url-state.ts
 function serializeWidths(widths, columns) {

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

@@ -86,7 +86,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 		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),
+			className: cn("pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-white dark: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)`,

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 { 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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"}
+{"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-white dark: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.js

@@ -101,10 +101,10 @@ function DesignCategoryTabs({ categories, selectedCategory, onSelect, showBadge
 		...props,
 		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"),
+			className: cn("relative flex min-h-0 min-w-0 flex-1 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]",
+					className: "pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-white shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:bg-background dark:ring-white/[0.06]",
 					style: {
 						transition: prefersReducedMotion ? void 0 : sliderTransition,
 						transform: `translateX(${sliderMetrics.left}px)`,

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 { 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":";;;;;;;;;AA8CA,MAAM,mBAAmB;AAEzB,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;CAC/E,MAAM,CAAC,eAAe,oBAAoB,SAA+B,KAAK;CAC9E,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,gBAAgB,uBAAO,IAAI,KAAgC,CAAC;CAElE,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,iBAAgB;AACd,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY;EAC9E,MAAM,aAAa,OAAO,WAAW,mCAAmC;EACxE,MAAM,mCAAmC,wBAAwB,WAAW,QAAQ;AAEpF,8BAA4B;AAC5B,aAAW,iBAAiB,UAAU,2BAA2B;AAEjE,eAAa,WAAW,oBAAoB,UAAU,2BAA2B;IAChF,EAAE,CAAC;AAEN,iBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,MAAM,iBAAiB,cAAc,QAAQ,IAAI,iBAAiB;AAElE,MAAI,CAAC,WAAW,CAAC,gBAAgB;AAC/B,oBAAiB,KAAK;AACtB;;EAGF,MAAM,4BAA4B;AAChC,oBAAiB;IACf,MAAM,eAAe;IACrB,OAAO,eAAe;IACvB,CAAC;;AAGJ,uBAAqB;AAErB,MAAI,OAAO,mBAAmB,YAAa;EAC3C,MAAM,iBAAiB,IAAI,eAAe,oBAAoB;AAC9D,iBAAe,QAAQ,QAAQ;AAC/B,iBAAe,QAAQ,eAAe;AAEtC,eAAa,eAAe,YAAY;IACvC,CAAC,YAAY,iBAAiB,CAAC;AAElC,QACE,qBAAC;EACC,WAAW,GACT,0CACA,eACI,wHACA,iDACJ,UACD;EACD,GAAI;aAEJ,qBAAC;GACC,KAAK;GACL,WAAW,GACT,6GACD;;IAEA,gBAAgB,iBAAiB,QAChC,oBAAC;KACC,WAAU;KACV,OAAO;MACL,YAAY,uBAAuB,SAAY;MAC/C,WAAW,cAAc,cAAc,KAAK;MAC5C,OAAO,cAAc;MACtB;MACD;IAEH,CAAC,gBAAgB,iBAAiB,QACjC,oBAAC;KACC,WAAW,GACT,oFACA,cAAc,UACf;KACD,OAAO;MACL,YAAY,uBAAuB,SAAY;MAC/C,WAAW,cAAc,cAAc,KAAK;MAC5C,OAAO,cAAc;MACtB;MACD;IAEH,WAAW,KAAK,aAAa;KAC5B,MAAM,WAAW,qBAAqB,SAAS;KAC/C,MAAM,aAAa,SAAS,cAAc,SAAS;KACnD,MAAM,kBAAkB,aAAa,eAAe;AAEpD,YACE,qBAAC;MAEC,MAAM,YAAY;AAChB,WAAI,QACF,eAAc,QAAQ,IAAI,SAAS,IAAI,QAAQ;WAE/C,eAAc,QAAQ,OAAO,SAAS,GAAG;;MAG7C,eAAe,aAAa,SAAS,GAAG;MACxC,UAAU,sBAAsB;MAChC,WAAW,GACT,sJACA,gDACA,UAAU,QACV,eAAe,eAAe,IAC9B,WACI,cAAc,aACd,GACA,oCACA,gBAAgB,0DACjB,CACJ;iBAEA,sBAAsB,SAAS,MAC9B,oBAAC;OACC,MAAM;OACN,WAAU;QACV,EAEJ,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;QAlDF,SAAS,GAmDP;MAEX;;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 flex-1 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-white shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:bg-background 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.14",
+  "version": "1.0.15",
   "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.14",
-    "@hexclave/ui": "1.0.14"
+    "@hexclave/shared": "1.0.15",
+    "@hexclave/ui": "1.0.15"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/components/pill-toggle.tsx

@@ -143,7 +143,7 @@ export function DesignPillToggle({
       {sliderMetrics != null && (
         <div
           className={cn(
-            "pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-background shadow-sm ring-1",
+            "pointer-events-none absolute inset-y-1 left-0 z-0 rounded-lg bg-white dark: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

package/src/components/tabs.tsx

@@ -192,12 +192,12 @@ export function DesignCategoryTabs({
       <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",
+          "relative flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden",
         )}
       >
         {glassmorphic && sliderMetrics != null && (
           <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]"
+            className="pointer-events-none absolute inset-y-0 left-0 z-0 rounded-lg bg-white shadow-sm ring-1 ring-black/[0.12] motion-reduce:transition-none dark:bg-background dark:ring-white/[0.06]"
             style={{
               transition: prefersReducedMotion ? undefined : sliderTransition,
               transform: `translateX(${sliderMetrics.left}px)`,