@hexclave/dashboard-ui-components 1.0.3 → 1.0.6

package/src/components/tabs.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn, Spinner } from "@hexclave/ui";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { useGlassmorphicDefault } from "./card";
+
+type DesignTabsSize = "sm" | "md";
+type DesignTabsGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+
+export type DesignCategoryTabItem = {
+  id: string,
+  label: string,
+  count?: number,
+  badgeCount?: number,
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>,
+};
+
+export type DesignCategoryTabsProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+  categories: DesignCategoryTabItem[],
+  selectedCategory: string,
+  onSelect: (id: string) => void | Promise<void>,
+  showBadge?: boolean,
+  size?: DesignTabsSize,
+  glassmorphic?: boolean,
+  gradient?: DesignTabsGradient,
+  /** Renders inside the tab bar after the tab buttons (not a tab). */
+  trailing?: ReactNode,
+};
+
+type TabSizeClass = {
+  button: string,
+  badge: string,
+};
+
+type GradientClass = {
+  activeText: string,
+  activeBadge: string,
+  underline: string,
+};
+
+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" }],
+]);
+
+const gradientClasses = new Map<DesignTabsGradient, GradientClass>([
+  [
+    "blue",
+    {
+      activeText: "text-blue-700 dark:text-blue-400",
+      activeBadge: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400",
+      underline: "bg-blue-700 dark:bg-blue-400",
+    },
+  ],
+  [
+    "cyan",
+    {
+      activeText: "text-cyan-700 dark:text-cyan-300",
+      activeBadge: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300",
+      underline: "bg-cyan-600 dark:bg-cyan-400",
+    },
+  ],
+  [
+    "purple",
+    {
+      activeText: "text-purple-700 dark:text-purple-300",
+      activeBadge: "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300",
+      underline: "bg-purple-600 dark:bg-purple-400",
+    },
+  ],
+  [
+    "green",
+    {
+      activeText: "text-emerald-700 dark:text-emerald-300",
+      activeBadge: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
+      underline: "bg-emerald-600 dark:bg-emerald-400",
+    },
+  ],
+  [
+    "orange",
+    {
+      activeText: "text-amber-700 dark:text-amber-300",
+      activeBadge: "bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
+      underline: "bg-amber-600 dark:bg-amber-400",
+    },
+  ],
+  [
+    "default",
+    {
+      activeText: "text-foreground",
+      activeBadge: "bg-foreground/10 text-foreground",
+      underline: "bg-foreground/80",
+    },
+  ],
+]);
+
+function getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {
+  const value = map.get(key);
+  if (!value) {
+    throw new Error(`Missing ${mapName} entry for key "${String(key)}"`);
+  }
+  return value;
+}
+
+export function DesignCategoryTabs({
+  categories,
+  selectedCategory,
+  onSelect,
+  showBadge = true,
+  size = "sm",
+  glassmorphic: glassmorphicProp,
+  gradient = "blue",
+  trailing,
+  className,
+  ...props
+}: DesignCategoryTabsProps) {
+  const glassmorphic = useGlassmorphicDefault(glassmorphicProp);
+  const sizeClass = getMapValueOrThrow(tabSizeClasses, size, "tabSizeClasses");
+  const gradientClass = getMapValueOrThrow(gradientClasses, gradient, "gradientClasses");
+  const [loadingCategoryId, setLoadingCategoryId] = useState<string | null>(null);
+
+  const handleSelect = (categoryId: string) => {
+    const result = onSelect(categoryId);
+    if (result && typeof (result as Promise<void>).then === "function") {
+      setLoadingCategoryId(categoryId);
+      runAsynchronouslyWithAlert(
+        Promise.resolve(result).finally(() => setLoadingCategoryId(null))
+      );
+    }
+  };
+
+  return (
+    <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}
+    >
+      <div
+        className={cn(
+          "flex min-h-0 min-w-0 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden",
+        )}
+      >
+        {categories.map((category) => {
+          const isActive = selectedCategory === category.id;
+          const badgeValue = category.badgeCount ?? category.count;
+          const shouldShowBadge = showBadge && badgeValue !== undefined;
+
+          return (
+            <button
+              key={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",
+                "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]",
+                  )
+              )}
+            >
+              {loadingCategoryId === category.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",
+                loadingCategoryId === category.id && "invisible"
+              )}>
+                {category.icon && (
+                  <category.icon className="h-4 w-4 shrink-0" aria-hidden />
+                )}
+                {category.label}
+                {shouldShowBadge && (
+                  <span
+                    className={cn(
+                      "rounded-full",
+                      sizeClass.badge,
+                      isActive
+                        ? gradientClass.activeBadge
+                        : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                    )}
+                  >
+                    {badgeValue}
+                  </span>
+                )}
+              </span>
+              {!glassmorphic && isActive && (
+                <div className={cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline)} />
+              )}
+            </button>
+          );
+        })}
+      </div>
+      {trailing != null ? (
+        <div className="flex shrink-0 items-center">
+          {trailing}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,71 @@
+export { DesignAlert } from "./components/alert";
+export type { DesignAlertProps } from "./components/alert";
+
+export { DesignBadge } from "./components/badge";
+export type { DesignBadgeColor, DesignBadgeSize, DesignBadgeContentMode, DesignBadgeProps } from "./components/badge";
+
+export { DesignButton } from "./components/button";
+export type { DesignOriginalButtonProps, DesignButtonProps } from "./components/button";
+
+export { DesignCard, DesignCardTint, useInsideDesignCard, useGlassmorphicDefault } from "./components/card";
+export type { DesignCardProps, DesignCardTintProps } from "./components/card";
+
+export { CursorBlastEffect } from "./components/cursor-blast-effect";
+export type { CursorBlastEffectProps } from "./components/cursor-blast-effect";
+
+export {
+  DesignDialog,
+  DesignDialogClose,
+  DesignDialogDescription,
+  DesignDialogRoot,
+  DesignDialogTitle,
+  DesignDialogTrigger,
+  designDialogGlassmorphicOverlayClass,
+  designDialogGlassmorphicSurfaceClass,
+} from "./components/dialog";
+export type { DesignDialogProps, DesignDialogSize, DesignDialogVariant } from "./components/dialog";
+
+export { DesignEditMode, useDesignEditMode } from "./components/edit-mode";
+
+export { DesignInput } from "./components/input";
+export type { DesignInputProps } from "./components/input";
+
+export { DesignPillToggle } from "./components/pill-toggle";
+export type { DesignPillToggleOption, DesignPillToggleProps } from "./components/pill-toggle";
+
+export { DesignSeparator } from "./components/separator";
+export type { DesignSeparatorProps } from "./components/separator";
+
+export { DesignSkeleton } from "./components/skeleton";
+export type { DesignSkeletonProps } from "./components/skeleton";
+
+export { DesignTable, DesignTableHeader, DesignTableBody, DesignTableRow, DesignTableHead, DesignTableCell } from "./components/table";
+
+export { DesignCategoryTabs } from "./components/tabs";
+export type { DesignCategoryTabItem, DesignCategoryTabsProps } from "./components/tabs";
+
+export { DESIGN_CHART_COLORS, getDesignChartColor, DESIGN_CHART_GRID_COLOR, DESIGN_CHART_AXIS_TICK_STYLE } from "./components/chart-theme";
+export type { DesignChartColorEntry, DesignChartColorName } from "./components/chart-theme";
+
+export { DesignChartContainer, DesignChartStyle, useDesignChart, getPayloadConfigFromPayload } from "./components/chart-container";
+export type { DesignChartConfig } from "./components/chart-container";
+
+export { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip";
+
+export { DesignChartLegendContent } from "./components/chart-legend";
+
+export { DesignChartCard } from "./components/chart-card";
+export type { DesignChartCardProps } from "./components/chart-card";
+
+export { DesignMetricCard } from "./components/metric-card";
+export type { DesignMetricCardProps, DesignMetricCardTrend } from "./components/metric-card";
+
+export { DesignProgressBar } from "./components/progress-bar";
+export type { DesignProgressBarProps } from "./components/progress-bar";
+
+export { DesignEmptyState } from "./components/empty-state";
+export type { DesignEmptyStateProps } from "./components/empty-state";
+
+export * from "./components/analytics-chart";
+
+export * from "./components/data-grid";