@hexclave/dashboard-ui-components 1.0.9 → 1.0.11

package/src/components/pill-toggle.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { cn, Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hexclave/ui";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { useEffect, useRef, useState } from "react";
+import { cn, Spinner, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@hexclave/ui";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { useGlassmorphicDefault } from "./card";
 
@@ -29,13 +28,21 @@ export type DesignPillToggleProps = {
 
 type SizeClass = {
   button: string,
+  iconOnlyButton: string,
   icon: string,
 };
 
+type SliderMetrics = {
+  left: number,
+  width: number,
+};
+
+const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
+
 const sizeClasses = new Map<DesignPillToggleSize, SizeClass>([
-  ["sm", { button: "px-3 py-1.5 text-xs", icon: "h-3.5 w-3.5" }],
-  ["md", { button: "px-4 py-2 text-sm", icon: "h-4 w-4" }],
-  ["lg", { button: "px-5 py-2.5 text-sm", icon: "h-4 w-4" }],
+  ["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" }],
 ]);
 
 const gradientClasses = new Map<DesignPillToggleGradient, string>([
@@ -70,6 +77,10 @@ export function DesignPillToggle({
   const activeRingClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
 
   const [loadingOptionId, setLoadingOptionId] = useState<string | null>(null);
+  const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics | null>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const toggleRef = useRef<HTMLDivElement | null>(null);
+  const optionRefs = useRef(new Map<string, HTMLButtonElement>());
 
   const handleClick = (optionId: string) => {
     const result = onSelect(optionId);
@@ -81,79 +92,138 @@ export function DesignPillToggle({
     }
   };
 
-  return (
-    <TooltipProvider>
-      <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
-        )}
-      >
-        {options.map((option) => {
-          const isActive = selected === option.id;
-          const Icon = option.icon;
-
-          const pill = (
-            <button
-              type="button"
-              key={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]"
-                  )
-              )}
-            >
-              {loadingOptionId === option.id && (
-                <Spinner
-                  size={12}
-                  className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-                />
-              )}
-              <span className={cn(
-                "flex items-center gap-2",
-                loadingOptionId === option.id && "invisible"
-              )}>
-                {Icon && <Icon className={sizeClass.icon} />}
-                {showLabels && option.label}
-              </span>
-            </button>
+  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 = (
+    <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
+      )}
+    >
+      {sliderMetrics != null && (
+        <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 ? undefined : sliderTransition,
+            transform: `translateX(${sliderMetrics.left}px)`,
+            width: sliderMetrics.width,
+          }}
+        />
+      )}
+      {options.map((option) => {
+        const isActive = selected === option.id;
+        const Icon = option.icon;
+
+        const pill = (
+          <button
+            type="button"
+            key={option.id}
+            ref={(element) => {
+              if (element) {
+                optionRefs.current.set(option.id, element);
+              } else {
+                optionRefs.current.delete(option.id);
+              }
+            }}
+            onClick={() => handleClick(option.id)}
+            disabled={loadingOptionId !== null}
+            aria-label={showLabels ? undefined : 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]"
+                )
+            )}
+          >
+            {loadingOptionId === option.id && (
+              <Spinner
+                size={12}
+                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+              />
+            )}
+            <span className={cn(
+              "flex items-center gap-2",
+              loadingOptionId === option.id && "invisible"
+            )}>
+              {Icon && <Icon className={sizeClass.icon} />}
+              {showLabels && option.label}
+            </span>
+          </button>
+        );
+
+        if (!showLabels) {
+          return (
+            <Tooltip key={option.id} delayDuration={0}>
+              <TooltipTrigger asChild>
+                {pill}
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent side="top">
+                  {option.label}
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
           );
+        }
 
-          if (!showLabels) {
-            return (
-              <Tooltip key={option.id} delayDuration={0}>
-                <TooltipTrigger asChild>
-                  {pill}
-                </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent side="top">
-                    {option.label}
-                  </TooltipContent>
-                </TooltipPortal>
-              </Tooltip>
-            );
-          }
-
-          return pill;
-        })}
-      </div>
-    </TooltipProvider>
+        return pill;
+      })}
+    </div>
   );
+
+  // Tooltips require a TooltipProvider in scope. Wrap defensively so callers
+  // outside an existing provider (e.g. inside a PageLayout actions slot) work.
+  return showLabels ? body : <TooltipProvider>{body}</TooltipProvider>;
 }

package/src/components/tabs.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { cn, Spinner } from "@hexclave/ui";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
 import { useGlassmorphicDefault } from "./card";
@@ -39,6 +39,13 @@ type GradientClass = {
   underline: string,
 };
 
+type SliderMetrics = {
+  left: number,
+  width: number,
+};
+
+const sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
+
 const tabSizeClasses = new Map<DesignTabsSize, TabSizeClass>([
   ["sm", { button: "px-3 py-2 text-xs", badge: "text-[10px] px-1.5 py-0.5" }],
   ["md", { button: "px-4 py-3 text-sm", badge: "text-xs px-1.5 py-0.5" }],
@@ -119,6 +126,10 @@ export function DesignCategoryTabs({
   const sizeClass = getMapValueOrThrow(tabSizeClasses, size, "tabSizeClasses");
   const gradientClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
   const [loadingCategoryId, setLoadingCategoryId] = useState<string | null>(null);
+  const [sliderMetrics, setSliderMetrics] = useState<SliderMetrics | null>(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const tabListRef = useRef<HTMLDivElement | null>(null);
+  const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>());
 
   const handleSelect = (categoryId: string) => {
     const result = onSelect(categoryId);
@@ -130,6 +141,43 @@ export function DesignCategoryTabs({
     }
   };
 
+  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 (
     <div
       className={cn(
@@ -142,10 +190,34 @@ export function DesignCategoryTabs({
       {...props}
     >
       <div
+        ref={tabListRef}
         className={cn(
-          "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 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]"
+            style={{
+              transition: prefersReducedMotion ? undefined : sliderTransition,
+              transform: `translateX(${sliderMetrics.left}px)`,
+              width: sliderMetrics.width,
+            }}
+          />
+        )}
+        {!glassmorphic && sliderMetrics != null && (
+          <div
+            className={cn(
+              "pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none",
+              gradientClass.underline
+            )}
+            style={{
+              transition: prefersReducedMotion ? undefined : sliderTransition,
+              transform: `translateX(${sliderMetrics.left}px)`,
+              width: sliderMetrics.width,
+            }}
+          />
+        )}
         {categories.map((category) => {
           const isActive = selectedCategory === category.id;
           const badgeValue = category.badgeCount ?? category.count;
@@ -154,18 +226,22 @@ export function DesignCategoryTabs({
           return (
             <button
               key={category.id}
+              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 flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap",
+                "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
-                  ? cn(
-                    gradientClass.activeText,
-                    glassmorphic && "bg-white shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]"
-                  )
+                  ? gradientClass.activeText
                   : cn(
                     "text-gray-700 dark:text-gray-400",
                     glassmorphic && "rounded-lg hover:bg-white/50 dark:hover:bg-white/[0.06]",
@@ -200,9 +276,6 @@ export function DesignCategoryTabs({
                   </span>
                 )}
               </span>
-              {!glassmorphic && isActive && (
-                <div className={cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline)} />
-              )}
             </button>
           );
         })}