@hexclave/dashboard-ui-components 1.0.10 → 1.0.11

package/dist/dashboard-ui-components.global.js

@@ -8089,7 +8089,7 @@ attempted value: ${formattedValue}
     description: 'Email sender email. Needs to be specified when using type="standard"',
     exampleValue: "example@your-domain.com"
   } });
-  var emailPasswordSchema = passwordSchema.meta({ openapiField: {
+  var emailPasswordSchema = yupString().max(256).meta({ openapiField: {
     description: 'Email password. Needs to be specified when using type="standard"',
     exampleValue: "your-email-password"
   } });
@@ -17505,6 +17505,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   var Provider = TooltipProvider;
   var Root32 = Tooltip;
   var Trigger2 = TooltipTrigger;
+  var Portal3 = TooltipPortal;
   var Content22 = TooltipContent;
 
   // ../ui/dist/esm/components/ui/card.js
@@ -17559,6 +17560,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   TooltipProvider2.displayName = Provider.displayName;
   var Tooltip2 = Root32;
   var TooltipTrigger2 = Trigger2;
+  var TooltipPortal2 = Portal3;
   var TooltipContent2 = forwardRefIfNeeded(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Content22, {
     ref,
     sideOffset,
@@ -18400,10 +18402,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
 
   // src/components/pill-toggle.tsx
   var import_react22 = __toESM(require_react());
+  var sliderTransition = "transform 200ms ease-out, width 200ms ease-out";
   var sizeClasses = /* @__PURE__ */ new Map([
-    ["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" }]
   ]);
   var gradientClasses = /* @__PURE__ */ new Map([
     ["blue", "ring-blue-500/20 dark:ring-blue-400/20"],
@@ -18434,6 +18437,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const sizeClass = getMapValueOrThrow3(sizeClasses, size4, "sizeClasses");
     const activeRingClass = getMapValueOrThrow3(gradientClasses, gradient, "gradientClasses");
     const [loadingOptionId, setLoadingOptionId] = (0, import_react22.useState)(null);
+    const [sliderMetrics, setSliderMetrics] = (0, import_react22.useState)(null);
+    const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react22.useState)(false);
+    const toggleRef = (0, import_react22.useRef)(null);
+    const optionRefs = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
     const handleClick = (optionId) => {
       const result = onSelect(optionId);
       if (result && typeof result.then === "function") {
@@ -18443,63 +18450,115 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         );
       }
     };
-    return /* @__PURE__ */ jsx(TooltipProvider2, { children: /* @__PURE__ */ jsx(
+    (0, import_react22.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);
+    }, []);
+    (0, import_react22.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(
-          "inline-flex items-center gap-1 p-1 rounded-xl",
+          "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: options.map((option) => {
-          const isActive = selected === option.id;
-          const Icon = option.icon;
-          const pill = /* @__PURE__ */ jsxs(
-            "button",
+        children: [
+          sliderMetrics != null && /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              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]"
-                )
+                "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
               ),
-              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"
+              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,
+                "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]"
+                  )
                 ),
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "flex items-center gap-2",
-                  loadingOptionId === option.id && "invisible"
-                ), children: [
-                  Icon && /* @__PURE__ */ jsx(Icon, { className: sizeClass.icon }),
-                  showLabels && option.label
-                ] })
-              ]
-            },
-            option.id
-          );
-          if (!showLabels) {
-            return /* @__PURE__ */ jsxs(Tooltip2, { delayDuration: 0, children: [
-              /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: pill }),
-              /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent2, { side: "top", children: option.label }) })
-            ] }, option.id);
-          }
-          return pill;
-        })
+                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"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: cn(
+                    "flex items-center gap-2",
+                    loadingOptionId === option.id && "invisible"
+                  ), children: [
+                    Icon && /* @__PURE__ */ jsx(Icon, { className: sizeClass.icon }),
+                    showLabels && option.label
+                  ] })
+                ]
+              },
+              option.id
+            );
+            if (!showLabels) {
+              return /* @__PURE__ */ jsxs(Tooltip2, { delayDuration: 0, children: [
+                /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: pill }),
+                /* @__PURE__ */ jsx(TooltipPortal2, { children: /* @__PURE__ */ jsx(TooltipContent2, { side: "top", children: option.label }) })
+              ] }, option.id);
+            }
+            return pill;
+          })
+        ]
       }
-    ) });
+    );
+    return showLabels ? body : /* @__PURE__ */ jsx(TooltipProvider2, { children: body });
   }
 
   // src/components/separator.tsx
@@ -18603,6 +18662,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
 
   // src/components/tabs.tsx
   var import_react24 = __toESM(require_react());
+  var sliderTransition2 = "transform 200ms ease-out, width 200ms ease-out";
   var tabSizeClasses = /* @__PURE__ */ new Map([
     ["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" }]
@@ -18680,6 +18740,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     const sizeClass = getMapValueOrThrow4(tabSizeClasses, size4, "tabSizeClasses");
     const gradientClass = getMapValueOrThrow4(gradientClasses2, gradient, "gradientClasses");
     const [loadingCategoryId, setLoadingCategoryId] = (0, import_react24.useState)(null);
+    const [sliderMetrics, setSliderMetrics] = (0, import_react24.useState)(null);
+    const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react24.useState)(false);
+    const tabListRef = (0, import_react24.useRef)(null);
+    const tabButtonRefs = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
     const handleSelect = (categoryId) => {
       const result = onSelect(categoryId);
       if (result && typeof result.then === "function") {
@@ -18689,6 +18753,34 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         );
       }
     };
+    (0, import_react24.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);
+    }, []);
+    (0, import_react24.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",
       {
@@ -18699,66 +18791,97 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "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"
               ),
-              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",
+              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 : sliderTransition2,
+                      transform: `translateX(${sliderMetrics.left}px)`,
+                      width: sliderMetrics.width
+                    }
+                  }
+                ),
+                !glassmorphic && sliderMetrics != null && /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    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]"
-                      )
+                      "pointer-events-none absolute bottom-0 left-0 h-0.5 motion-reduce:transition-none",
+                      gradientClass.underline
                     ),
-                    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"
+                    style: {
+                      transition: prefersReducedMotion ? void 0 : sliderTransition2,
+                      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]"
+                        )
                       ),
-                      /* @__PURE__ */ jsxs("span", { className: cn(
-                        "flex items-center gap-2",
-                        loadingCategoryId === category.id && "invisible"
-                      ), children: [
-                        category.icon && /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }),
-                        category.label,
-                        shouldShowBadge && /* @__PURE__ */ jsx(
-                          "span",
+                      children: [
+                        loadingCategoryId === category.id && /* @__PURE__ */ jsx(
+                          Spinner,
                           {
-                            className: cn(
-                              "rounded-full",
-                              sizeClass.badge,
-                              isActive ? gradientClass.activeBadge : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
-                            ),
-                            children: badgeValue
+                            size: 12,
+                            className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
                           }
-                        )
-                      ] }),
-                      !glassmorphic && isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
-                    ]
-                  },
-                  category.id
-                );
-              })
+                        ),
+                        /* @__PURE__ */ jsxs("span", { className: cn(
+                          "flex items-center gap-2",
+                          loadingCategoryId === category.id && "invisible"
+                        ), children: [
+                          category.icon && /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }),
+                          category.label,
+                          shouldShowBadge && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "rounded-full",
+                                sizeClass.badge,
+                                isActive ? gradientClass.activeBadge : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                              ),
+                              children: badgeValue
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    category.id
+                  );
+                })
+              ]
             }
           ),
           trailing != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: trailing }) : null