@hexclave/dashboard-ui-components 1.0.3 → 1.0.5

package/dist/esm/components/button.d.ts

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

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Spinner, Tooltip, TooltipContent, TooltipTrigger, cn } from "@hexclave/ui";
+import { Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@hexclave/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
@@ -47,7 +47,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 			runAsynchronouslyWithAlert(Promise.resolve(result).finally(() => setLoadingOptionId(null)));
 		}
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
 		className: cn("inline-flex items-center gap-1 p-1 rounded-xl", glassmorphic ? "bg-foreground/[0.04] backdrop-blur-sm" : "bg-black/[0.08] dark:bg-white/[0.04]", className),
 		children: options.map((option) => {
 			const isActive = selected === option.id;
@@ -77,7 +77,7 @@ function DesignPillToggle({ options, selected, onSelect, size = "md", glassmorph
 			}, option.id);
 			return pill;
 		})
-	});
+	}) });
 }
 
 //#endregion

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexclave/dashboard-ui-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "repository": "https://github.com/hexclave/hexclave",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,6 +8,7 @@
   "files": [
     "README.md",
     "dist",
+    "src",
     "CHANGELOG.md",
     "LICENSE"
   ],
@@ -49,8 +50,8 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.0",
     "class-variance-authority": "^0.7.0",
-    "@hexclave/ui": "1.0.3",
-    "@hexclave/shared": "1.0.3"
+    "@hexclave/shared": "1.0.5",
+    "@hexclave/ui": "1.0.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/components/alert.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { CheckCircle, Info, WarningCircle, XCircle } from "@phosphor-icons/react";
+import { cn } from "@hexclave/ui";
+
+type DesignAlertVariant = "default" | "success" | "error" | "warning" | "info";
+
+const variantIconMap = new Map<DesignAlertVariant, React.ElementType>([
+  ["default", Info],
+  ["success", CheckCircle],
+  ["error", XCircle],
+  ["warning", WarningCircle],
+  ["info", Info],
+]);
+
+type VariantStyles = {
+  container: string,
+  icon: string,
+  title: string,
+};
+
+const variantStyles = new Map<DesignAlertVariant, VariantStyles>([
+  [
+    "default",
+    {
+      container: "bg-background border-border",
+      icon: "text-foreground",
+      title: "text-foreground",
+    },
+  ],
+  [
+    "success",
+    {
+      container: "bg-green-500/[0.06] border-green-500/30",
+      icon: "text-green-500",
+      title: "text-green-600 dark:text-green-400",
+    },
+  ],
+  [
+    "error",
+    {
+      container: "bg-red-500/[0.06] border-red-500/30",
+      icon: "text-red-500",
+      title: "text-red-600 dark:text-red-400",
+    },
+  ],
+  [
+    "warning",
+    {
+      container: "bg-amber-500/[0.08] border-amber-500/40",
+      icon: "text-amber-600 dark:text-amber-400",
+      title: "text-amber-700 dark:text-amber-300",
+    },
+  ],
+  [
+    "info",
+    {
+      container: "bg-blue-500/[0.06] border-blue-500/30",
+      icon: "text-blue-500",
+      title: "text-blue-600 dark:text-blue-400",
+    },
+  ],
+]);
+
+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 type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: DesignAlertVariant,
+  title?: React.ReactNode,
+  description?: React.ReactNode,
+  glassmorphic?: boolean,
+};
+
+export function DesignAlert({
+  variant = "default",
+  title,
+  description,
+  glassmorphic = false,
+  className,
+  children,
+  ...props
+}: DesignAlertProps) {
+  const styles = getMapValueOrThrow(variantStyles, variant, "variantStyles");
+  const Icon = getMapValueOrThrow(variantIconMap, variant, "variantIconMap");
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "relative w-full rounded-2xl border p-4 text-sm",
+        "flex gap-3 items-start",
+        styles.container,
+        glassmorphic && "backdrop-blur-xl",
+        className
+      )}
+      {...props}
+    >
+      <Icon className={cn("h-4 w-4 mt-0.5 flex-shrink-0", styles.icon)} />
+      <div className="min-w-0">
+        {title && (
+          <h5 className={cn("mb-1 font-medium leading-none tracking-tight", styles.title)}>
+            {title}
+          </h5>
+        )}
+        {description && (
+          <div className="text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed">
+            {description}
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/analytics-chart/analytics-chart-pie.tsx

@@ -0,0 +1,369 @@
+import { MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
+import { cn } from "@hexclave/ui";
+import { type DesignChartConfig, DesignChartContainer } from "../chart-container";
+import { type CSSProperties, type Ref, useEffect, useMemo, useState } from "react";
+import { Cell, Pie, PieChart } from "recharts";
+import { TrendPill } from "./default-analytics-chart-tooltip";
+import { formatDelta } from "./format";
+import type { AnalyticsChartStrings } from "./strings";
+import {
+  cssIdent,
+  type AnalyticsChartPieProps,
+  type AnalyticsChartSeries,
+  type FormatKind,
+  type Point,
+} from "./types";
+
+type SegmentColors = {
+  primary: { light: string[], dark: string[] },
+  compare: { light: string[], dark: string[] },
+};
+
+type AnalyticsChartPieBodyProps = {
+  wrapperRef: Ref<HTMLDivElement>,
+  primarySegmentSeries: readonly AnalyticsChartSeries[],
+  compareSegmentSeries: readonly AnalyticsChartSeries[],
+  aggregatedPrimarySegments: number[],
+  aggregatedCompareSegments: number[],
+  aggregatedPrimaryTotal: number,
+  aggregatedCompareTotal: number,
+  segmentColors: SegmentColors,
+  showPrimary: boolean,
+  showCompare: boolean,
+  xFormatKind: FormatKind,
+  yFormatKind: FormatKind,
+  hoverKey: string | null,
+  setHoverKey: (k: string | null) => void,
+  zoomRange: [number, number] | null,
+  onResetZoom: () => void,
+  visibleStart: number,
+  visibleEnd: number,
+  fullData: Point[],
+  strings: AnalyticsChartStrings,
+  fmtValue: (value: number, kind: FormatKind) => string,
+  pie: AnalyticsChartPieProps | undefined,
+};
+
+const DEFAULT_PIE_CLASSNAME = "aspect-square h-[220px] w-[220px] sm:h-[240px] sm:w-[240px]";
+
+export function AnalyticsChartPie({
+  wrapperRef,
+  primarySegmentSeries,
+  compareSegmentSeries,
+  aggregatedPrimarySegments,
+  aggregatedCompareSegments,
+  aggregatedPrimaryTotal,
+  aggregatedCompareTotal,
+  segmentColors,
+  showPrimary,
+  showCompare,
+  xFormatKind,
+  yFormatKind,
+  hoverKey,
+  setHoverKey,
+  zoomRange,
+  onResetZoom,
+  visibleStart,
+  visibleEnd,
+  fullData,
+  strings,
+  fmtValue,
+  pie,
+}: AnalyticsChartPieBodyProps) {
+  const innerRadius = pie?.innerRadius ?? 60;
+  const outerRadius = pie?.outerRadius ?? 84;
+  const compareInnerRadius = pie?.compareInnerRadius ?? 36;
+  const compareOuterRadius = pie?.compareOuterRadius ?? 52;
+  const containerClassName = pie?.className ?? DEFAULT_PIE_CLASSNAME;
+  const showDateRange = pie?.showDateRange ?? true;
+  const centerTextMaxWidth = Math.max(64, innerRadius * 2 - 28);
+  const segmentTransitionStyle: CSSProperties = {
+    transition: "opacity 180ms ease-out",
+  };
+
+  const canonicalSeries = primarySegmentSeries.length > 0
+    ? primarySegmentSeries
+    : compareSegmentSeries;
+  const usePrimaryForCanonical = primarySegmentSeries.length > 0;
+
+  const compareValueByKey = useMemo(() => {
+    const m = new Map<string, number>();
+    compareSegmentSeries.forEach((s, sIdx) => {
+      m.set(s.key, aggregatedCompareSegments[sIdx] ?? 0);
+    });
+    return m;
+  }, [compareSegmentSeries, aggregatedCompareSegments]);
+  const primaryValueByKey = useMemo(() => {
+    const m = new Map<string, number>();
+    primarySegmentSeries.forEach((s, sIdx) => {
+      m.set(s.key, aggregatedPrimarySegments[sIdx] ?? 0);
+    });
+    return m;
+  }, [primarySegmentSeries, aggregatedPrimarySegments]);
+
+  const canonicalTotal = usePrimaryForCanonical
+    ? aggregatedPrimaryTotal
+    : aggregatedCompareTotal;
+
+  const legendRows = useMemo(
+    () =>
+      canonicalSeries
+        .map((s, sIdx) => {
+          const value = usePrimaryForCanonical
+            ? (aggregatedPrimarySegments[sIdx] ?? 0)
+            : (aggregatedCompareSegments[sIdx] ?? 0);
+          const prevValue = usePrimaryForCanonical
+            ? (compareValueByKey.get(s.key) ?? 0)
+            : (primaryValueByKey.get(s.key) ?? 0);
+          return {
+            key: s.key,
+            label: s.label,
+            sIdx,
+            value,
+            prevValue,
+            pct: canonicalTotal > 0 ? value / canonicalTotal : 0,
+            fill: segmentColors.primary.light[sIdx],
+            fillDark: segmentColors.primary.dark[sIdx],
+            fillCompare: segmentColors.compare.light[sIdx],
+            fillCompareDark: segmentColors.compare.dark[sIdx],
+          };
+        })
+        .sort((a, b) => b.value - a.value),
+    [
+      canonicalSeries,
+      usePrimaryForCanonical,
+      aggregatedPrimarySegments,
+      aggregatedCompareSegments,
+      compareValueByKey,
+      primaryValueByKey,
+      canonicalTotal,
+      segmentColors,
+    ],
+  );
+
+  const chartConfig = useMemo<DesignChartConfig>(() => {
+    const config: DesignChartConfig = {};
+    canonicalSeries.forEach((s, sIdx) => {
+      config[cssIdent(s.key)] = {
+        label: s.label,
+        theme: {
+          light: segmentColors.primary.light[sIdx],
+          dark: segmentColors.primary.dark[sIdx],
+        },
+      };
+      config[`compare-${cssIdent(s.key)}`] = {
+        label: s.label,
+        theme: {
+          light: segmentColors.compare.light[sIdx],
+          dark: segmentColors.compare.dark[sIdx],
+        },
+      };
+    });
+    return config;
+  }, [canonicalSeries, segmentColors]);
+
+  const activeRow = hoverKey != null
+    ? legendRows.find((r) => r.key === hoverKey) ?? null
+    : null;
+  const [centerDisplayKey, setCenterDisplayKey] = useState<string | null>(null);
+  const [centerDisplayVisible, setCenterDisplayVisible] = useState(true);
+  const centerDisplayRow = centerDisplayKey != null
+    ? legendRows.find((r) => r.key === centerDisplayKey) ?? null
+    : null;
+  useEffect(() => {
+    const nextKey = activeRow?.key ?? null;
+    if (nextKey === centerDisplayKey) {
+      return;
+    }
+
+    setCenterDisplayVisible(false);
+    const timeoutId = window.setTimeout(() => {
+      setCenterDisplayKey(nextKey);
+      setCenterDisplayVisible(true);
+    }, 120);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeRow?.key, centerDisplayKey]);
+
+  const activeDelta = activeRow
+    ? formatDelta(activeRow.value, activeRow.prevValue)
+    : formatDelta(aggregatedPrimaryTotal, aggregatedCompareTotal);
+
+  const windowDays = visibleEnd - visibleStart + 1;
+  const startLabel = fmtValue(fullData[visibleStart]!.ts, xFormatKind);
+  const endLabel = fmtValue(fullData[visibleEnd]!.ts, xFormatKind);
+
+  const outerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.value, fill: r.fill }));
+  const innerData = legendRows.map((r) => ({ name: cssIdent(r.key), hoverKey: r.key, value: r.prevValue, fill: r.fillCompare }));
+  const activeIdx = hoverKey != null ? legendRows.findIndex((r) => r.key === hoverKey) : -1;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="relative flex h-full min-h-0 w-full min-w-0 flex-1 flex-col select-none"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {zoomRange && (
+        <div className="absolute right-2 top-2 z-20">
+          <button
+            type="button"
+            onClick={onResetZoom}
+            className="inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-wider text-blue-600 ring-1 ring-blue-500/30 transition-colors duration-150 hover:bg-blue-500/15 hover:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:text-blue-300 dark:ring-blue-400/30"
+          >
+            <MagnifyingGlassMinusIcon weight="bold" className="size-3" aria-hidden="true" />
+            <span>{strings.resetZoom}</span>
+          </button>
+        </div>
+      )}
+
+      <div className="flex h-full min-h-0 w-full flex-1 flex-wrap content-center items-center justify-center gap-x-10 gap-y-6">
+        <div className="flex shrink-0 flex-col items-center gap-3">
+          <div className="relative">
+            <DesignChartContainer config={chartConfig} className={containerClassName}>
+              <PieChart
+                role="img"
+                aria-label={strings.pieAriaLabel({
+                  segmentCount: canonicalSeries.length,
+                  windowDays,
+                })}
+              >
+                {showPrimary && (
+                  <Pie
+                    data={outerData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    paddingAngle={1}
+                    startAngle={90}
+                    endAngle={-270}
+                    isAnimationActive={false}
+                    stroke="none"
+                  >
+                    {outerData.map((d, i) => {
+                      const inactive = activeIdx >= 0 && activeIdx !== i;
+                      return (
+                        <Cell
+                          key={`outer-${d.name}`}
+                          fill={`var(--color-${d.name})`}
+                          opacity={inactive ? 0.22 : 1}
+                          style={segmentTransitionStyle}
+                          onMouseEnter={() => setHoverKey(d.hoverKey)}
+                          onMouseLeave={() => setHoverKey(null)}
+                        />
+                      );
+                    })}
+                  </Pie>
+                )}
+                {showCompare && (
+                  <Pie
+                    data={innerData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={compareInnerRadius}
+                    outerRadius={compareOuterRadius}
+                    paddingAngle={1}
+                    startAngle={90}
+                    endAngle={-270}
+                    isAnimationActive={false}
+                    stroke="none"
+                  >
+                    {innerData.map((d, i) => {
+                      const inactive = activeIdx >= 0 && activeIdx !== i;
+                      return (
+                        <Cell
+                          key={`inner-${d.name}`}
+                          fill={`var(--color-compare-${d.name})`}
+                          opacity={inactive ? 0.22 : 0.95}
+                          style={segmentTransitionStyle}
+                          onMouseEnter={() => setHoverKey(d.hoverKey)}
+                          onMouseLeave={() => setHoverKey(null)}
+                        />
+                      );
+                    })}
+                  </Pie>
+                )}
+              </PieChart>
+            </DesignChartContainer>
+
+            <div
+              className={cn(
+                "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center transition-opacity duration-200 ease-out",
+                centerDisplayVisible ? "opacity-100" : "opacity-35",
+              )}
+            >
+              <span className="block truncate font-mono text-[9px] uppercase tracking-wider text-muted-foreground" style={{ maxWidth: centerTextMaxWidth }}>
+                {centerDisplayRow ? centerDisplayRow.label : strings.pieTotalCenter}
+              </span>
+              <span className="mt-0.5 block truncate font-mono text-xl font-semibold leading-none tabular-nums text-foreground" style={{ maxWidth: centerTextMaxWidth }}>
+                {fmtValue(centerDisplayRow ? centerDisplayRow.value : canonicalTotal, yFormatKind)}
+              </span>
+            </div>
+          </div>
+
+          {(showDateRange || showCompare) && (
+            <div className="flex items-center gap-2 text-center">
+              {showDateRange && (
+                <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/80">
+                  {startLabel} – {endLabel}
+                </span>
+              )}
+              {showCompare && (
+                <TrendPill delta={activeDelta} size="sm" label={strings.pieVsPrev} />
+              )}
+            </div>
+          )}
+        </div>
+
+        <ul className="flex min-w-[200px] max-w-[300px] flex-col gap-1">
+          {legendRows.map((r) => {
+            const isActive = hoverKey === r.key;
+            const dimmed = hoverKey != null && !isActive;
+            const rowDelta = formatDelta(r.value, r.prevValue);
+            return (
+              <li key={r.key}>
+                <button
+                  type="button"
+                  onMouseEnter={() => setHoverKey(r.key)}
+                  onMouseLeave={() => setHoverKey(null)}
+                  onFocus={() => setHoverKey(r.key)}
+                  onBlur={() => setHoverKey(null)}
+                  className={cn(
+                    "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-[background-color,opacity] duration-200 ease-out hover:bg-foreground/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20",
+                    isActive && "bg-foreground/[0.05]",
+                    dimmed && "opacity-50",
+                  )}
+                >
+                  <span
+                    className="size-2.5 shrink-0 rounded-[3px] bg-[var(--c-l)] dark:bg-[var(--c-d)]"
+                    style={{ "--c-l": r.fill, "--c-d": r.fillDark } as CSSProperties}
+                  />
+                  <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-foreground">
+                    {r.label}
+                  </span>
+                  <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground">
+                    {(r.pct * 100).toFixed(1)}%
+                  </span>
+                  <span className="shrink-0 min-w-[48px] text-right font-mono text-[11px] font-semibold tabular-nums text-foreground">
+                    {fmtValue(r.value, yFormatKind)}
+                  </span>
+                  {showCompare && (
+                    <span className="shrink-0">
+                      <TrendPill delta={rowDelta} size="sm" />
+                    </span>
+                  )}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}