@hexclave/dashboard-ui-components 1.0.0

package/dist/esm/components/card.js

@@ -0,0 +1,155 @@
+"use client";
+
+import { Card, cn } from "@hexclave/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/card.tsx
+const DesignCardNestingContext = React.createContext(false);
+/**
+* Returns `true` when the calling component is rendered inside a DesignCard.
+* Useful for deriving a glassmorphic default.
+*/
+function useInsideDesignCard() {
+	return React.useContext(DesignCardNestingContext);
+}
+/**
+* Resolve the effective glassmorphic value.
+* - If the caller passed an explicit boolean → honour it.
+* - Otherwise → fall back to whether we're inside a DesignCard.
+*/
+function useGlassmorphicDefault(explicit) {
+	const insideCard = useInsideDesignCard();
+	return explicit ?? insideCard;
+}
+const hoverTintClasses = new Map([
+	["blue", "group-hover:bg-blue-500/[0.03]"],
+	["purple", "group-hover:bg-purple-500/[0.03]"],
+	["green", "group-hover:bg-emerald-500/[0.03]"],
+	["orange", "group-hover:bg-orange-500/[0.03]"],
+	["default", "group-hover:bg-slate-500/[0.02]"],
+	["cyan", "group-hover:bg-cyan-500/[0.03]"]
+]);
+const demoTintClasses = new Map([
+	["blue", "group-hover/tint:bg-blue-500/[0.02]"],
+	["purple", "group-hover/tint:bg-purple-500/[0.02]"],
+	["green", "group-hover/tint:bg-emerald-500/[0.02]"],
+	["orange", "group-hover/tint:bg-orange-500/[0.02]"],
+	["default", "group-hover/tint:bg-slate-500/[0.015]"],
+	["cyan", "group-hover/tint:bg-cyan-500/[0.02]"]
+]);
+const bodyPaddingClass = "p-5";
+/**
+* General-purpose card for grouping related content: section headers,
+* description blocks, chart-less panels, etc. If the content is a
+* big-number metric, use `DesignMetricCard` instead. If it contains a
+* chart, wrap it in `DesignChartCard`.
+*
+* Two shapes, picked automatically by the props you pass:
+*
+* ```tsx
+* // With a header (title requires icon):
+* <DesignCard title="Recent activity" icon={ActivityIcon}>
+*   ...body...
+* </DesignCard>
+*
+* // Body-only (no header):
+* <DesignCard>
+*   <h2 className="text-2xl font-semibold">Dashboard</h2>
+*   <p className="text-muted-foreground">Overview of your user base</p>
+* </DesignCard>
+* ```
+*
+* Rules:
+* - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the
+*   component already has built-in padding and extra padding will look wrong.
+* - If you set `title`, you MUST also set `icon`. The TS types enforce this,
+*   but writing `title` without `icon` will fail.
+* - Body-only cards (no `title`) automatically go transparent in dark mode.
+*/
+function DesignCard({ title, subtitle, icon: Icon, actions, glassmorphic: glassmorphicProp, gradient = "default", children, className, contentClassName, ...props }) {
+	const glassmorphic = glassmorphicProp ?? true;
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	const hasContent = React.Children.count(children) > 0;
+	const variant = title != null ? subtitle != null ? "header" : "compact" : "bodyOnly";
+	return /* @__PURE__ */ jsx(DesignCardNestingContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: cn("group relative rounded-2xl overflow-hidden", glassmorphic && [
+				"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none",
+				"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
+				"shadow-none"
+			], glassmorphic && variant === "bodyOnly" && "dark:bg-transparent dark:ring-0 dark:shadow-none", className),
+			...props,
+			children: [glassmorphic && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl", variant === "bodyOnly" && "dark:hidden") }), variant !== "bodyOnly" && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl", hoverTintClass) })] }), /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					variant === "header" && /* @__PURE__ */ jsx("div", {
+						className: bodyPaddingClass,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start justify-between gap-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex-1 min-w-0",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [Icon && /* @__PURE__ */ jsx("div", {
+										className: "p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]",
+										children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" })
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-xs font-semibold text-foreground uppercase tracking-wider",
+										children: title
+									})]
+								}), subtitle && /* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground mt-1",
+									children: subtitle
+								})]
+							}), actions && /* @__PURE__ */ jsx("div", {
+								className: "flex-shrink-0",
+								children: actions
+							})]
+						})
+					}),
+					variant === "compact" && /* @__PURE__ */ jsxs("div", {
+						className: "p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 min-w-0",
+							children: [Icon && /* @__PURE__ */ jsx("div", {
+								className: "p-1.5 rounded-lg bg-foreground/[0.04]",
+								children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" })
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-xs font-semibold text-foreground uppercase tracking-wider",
+								children: title
+							})]
+						}), actions && /* @__PURE__ */ jsx("div", {
+							className: "flex-shrink-0",
+							children: actions
+						})]
+					}),
+					hasContent && /* @__PURE__ */ jsx("div", {
+						className: cn(variant === "header" ? "border-t border-black/[0.12] dark:border-white/[0.06]" : "", variant === "compact" ? "px-5 py-4" : "", variant === "bodyOnly" || variant === "header" ? bodyPaddingClass : "", contentClassName),
+						children
+					})
+				]
+			})]
+		})
+	});
+}
+function DesignCardTint({ gradient, className, children, ...props }) {
+	const tintClass = demoTintClasses.get(gradient) ?? "group-hover/tint:bg-slate-500/[0.015]";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none", "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]", "shadow-none overflow-hidden", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" }),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl", tintClass) }),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+export { DesignCard, DesignCardTint, useGlassmorphicDefault, useInsideDesignCard };
+//# sourceMappingURL=card.js.map

package/dist/esm/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card } from \"@stackframe/stack-ui\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\n// ─── Card nesting context ────────────────────────────────────────────────────\n// Components with a `glassmorphic` prop use this to auto-detect whether they\n// sit inside a DesignCard.  When they do, glassmorphic defaults to `true`;\n// when they don't, it defaults to `false`.\n\nconst DesignCardNestingContext = React.createContext(false);\n\n/**\n * Returns `true` when the calling component is rendered inside a DesignCard.\n * Useful for deriving a glassmorphic default.\n */\nexport function useInsideDesignCard(): boolean {\n  return React.useContext(DesignCardNestingContext);\n}\n\n/**\n * Resolve the effective glassmorphic value.\n * - If the caller passed an explicit boolean → honour it.\n * - Otherwise → fall back to whether we're inside a DesignCard.\n */\nexport function useGlassmorphicDefault(explicit: boolean | undefined): boolean {\n  const insideCard = useInsideDesignCard();\n  return explicit ?? insideCard;\n}\n\ntype DesignCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n]);\n\nconst demoTintClasses = new Map<DesignCardGradient, string>([\n  [\"blue\", \"group-hover/tint:bg-blue-500/[0.02]\"],\n  [\"purple\", \"group-hover/tint:bg-purple-500/[0.02]\"],\n  [\"green\", \"group-hover/tint:bg-emerald-500/[0.02]\"],\n  [\"orange\", \"group-hover/tint:bg-orange-500/[0.02]\"],\n  [\"default\", \"group-hover/tint:bg-slate-500/[0.015]\"],\n  [\"cyan\", \"group-hover/tint:bg-cyan-500/[0.02]\"],\n]);\n\nconst bodyPaddingClass = \"p-5\";\n\n// ─── Discriminated props ──────────────────────────────────────────────────\n// - If title is given, icon is required.\n// - The layout is derived automatically:\n//     title + subtitle → \"header\"   (full header block with subtitle)\n//     title only       → \"compact\"  (slim bar with border-b)\n//     no title         → \"bodyOnly\" (just the body)\n\ntype DesignCardBaseProps = {\n  glassmorphic?: boolean,\n  gradient?: DesignCardGradient,\n  contentClassName?: string,\n} & Omit<React.ComponentProps<typeof Card>, \"title\">;\n\ntype WithTitleProps = {\n  title: React.ReactNode,\n  subtitle?: React.ReactNode,\n  icon: React.ElementType,\n  actions?: React.ReactNode,\n};\n\ntype WithoutTitleProps = {\n  title?: never,\n  subtitle?: never,\n  icon?: never,\n  actions?: never,\n};\n\nexport type DesignCardProps = DesignCardBaseProps & (WithTitleProps | WithoutTitleProps);\n\n/**\n * General-purpose card for grouping related content: section headers,\n * description blocks, chart-less panels, etc. If the content is a\n * big-number metric, use `DesignMetricCard` instead. If it contains a\n * chart, wrap it in `DesignChartCard`.\n *\n * Two shapes, picked automatically by the props you pass:\n *\n * ```tsx\n * // With a header (title requires icon):\n * <DesignCard title=\"Recent activity\" icon={ActivityIcon}>\n *   ...body...\n * </DesignCard>\n *\n * // Body-only (no header):\n * <DesignCard>\n *   <h2 className=\"text-2xl font-semibold\">Dashboard</h2>\n *   <p className=\"text-muted-foreground\">Overview of your user base</p>\n * </DesignCard>\n * ```\n *\n * Rules:\n * - DO NOT add padding classes (`p-6`, `p-5`, etc.) to `className` — the\n *   component already has built-in padding and extra padding will look wrong.\n * - If you set `title`, you MUST also set `icon`. The TS types enforce this,\n *   but writing `title` without `icon` will fail.\n * - Body-only cards (no `title`) automatically go transparent in dark mode.\n */\nexport function DesignCard({\n  title,\n  subtitle,\n  icon: Icon,\n  actions,\n  glassmorphic: glassmorphicProp,\n  gradient = \"default\",\n  children,\n  className,\n  contentClassName,\n  ...props\n}: DesignCardProps) {\n  const glassmorphic = glassmorphicProp ?? true;\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n  const hasContent = React.Children.count(children) > 0;\n\n  // Derive layout from which props were provided\n  const variant = title != null\n    ? (subtitle != null ? \"header\" : \"compact\")\n    : \"bodyOnly\";\n\n  return (\n    <DesignCardNestingContext.Provider value={true}>\n      <Card\n        className={cn(\n          \"group relative rounded-2xl overflow-hidden\",\n          glassmorphic && [\n            \"bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl border-0 transition-all duration-150 hover:transition-none\",\n            \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n            \"shadow-none\",\n          ],\n          glassmorphic && variant === \"bodyOnly\" && \"dark:bg-transparent dark:ring-0 dark:shadow-none\",\n          className\n        )}\n        {...props}\n      >\n        {glassmorphic && (\n          <>\n            <div className={cn(\n              \"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\",\n              variant === \"bodyOnly\" && \"dark:hidden\"\n            )} />\n            {variant !== \"bodyOnly\" && (\n              <div\n                className={cn(\n                  \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n                  hoverTintClass\n                )}\n              />\n            )}\n          </>\n        )}\n        <div className=\"relative\">\n          {variant === \"header\" && (\n            <div className={bodyPaddingClass}>\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    {Icon && (\n                      <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n                        <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n                      </div>\n                    )}\n                    <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                      {title}\n                    </span>\n                  </div>\n                  {subtitle && (\n                    <p className=\"text-sm text-muted-foreground mt-1\">\n                      {subtitle}\n                    </p>\n                  )}\n                </div>\n                {actions && (\n                  <div className=\"flex-shrink-0\">\n                    {actions}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n          {variant === \"compact\" && (\n            <div className=\"p-5 flex items-center justify-between gap-4 border-b border-black/[0.12] dark:border-white/[0.06]\">\n              <div className=\"flex items-center gap-2 min-w-0\">\n                {Icon && (\n                  <div className=\"p-1.5 rounded-lg bg-foreground/[0.04]\">\n                    <Icon className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </div>\n                )}\n                <span className=\"text-xs font-semibold text-foreground uppercase tracking-wider\">\n                  {title}\n                </span>\n              </div>\n              {actions && (\n                <div className=\"flex-shrink-0\">\n                  {actions}\n                </div>\n              )}\n            </div>\n          )}\n          {hasContent && (\n            <div\n              className={cn(\n                variant === \"header\" ? \"border-t border-black/[0.12] dark:border-white/[0.06]\" : \"\",\n                variant === \"compact\" ? \"px-5 py-4\" : \"\",\n                variant === \"bodyOnly\" || variant === \"header\" ? bodyPaddingClass : \"\",\n                contentClassName\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Card>\n    </DesignCardNestingContext.Provider>\n  );\n}\n\nexport type DesignCardTintProps = {\n  gradient: DesignCardGradient,\n} & React.ComponentProps<\"div\">\n\nexport function DesignCardTint({\n  gradient,\n  className,\n  children,\n  ...props\n}: DesignCardTintProps) {\n  const tintClass = demoTintClasses.get(gradient) ?? \"group-hover/tint:bg-slate-500/[0.015]\";\n\n  return (\n    <div\n      className={cn(\n        \"group/tint relative rounded-2xl bg-white/90 dark:bg-background/60 dark:backdrop-blur-xl transition-all duration-150 hover:transition-none\",\n        \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n        \"shadow-none overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n      <div\n        className={cn(\n          \"absolute inset-0 transition-colors duration-150 group-hover/tint:transition-none pointer-events-none rounded-2xl\",\n          tintClass\n        )}\n      />\n      <div className=\"relative\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAWA,MAAM,2BAA2B,MAAM,cAAc,MAAM;;;;;AAM3D,SAAgB,sBAA+B;AAC7C,QAAO,MAAM,WAAW,yBAAyB;;;;;;;AAQnD,SAAgB,uBAAuB,UAAwC;CAC7E,MAAM,aAAa,qBAAqB;AACxC,QAAO,YAAY;;AAKrB,MAAM,mBAAmB,IAAI,IAAgC;CAC3D,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC9C,CAAC,QAAQ,iCAAiC;CAC3C,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAgC;CAC1D,CAAC,QAAQ,sCAAsC;CAC/C,CAAC,UAAU,wCAAwC;CACnD,CAAC,SAAS,yCAAyC;CACnD,CAAC,UAAU,wCAAwC;CACnD,CAAC,WAAW,wCAAwC;CACpD,CAAC,QAAQ,sCAAsC;CAChD,CAAC;AAEF,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DzB,SAAgB,WAAW,EACzB,OACA,UACA,MAAM,MACN,SACA,cAAc,kBACd,WAAW,WACX,UACA,WACA,kBACA,GAAG,SACe;CAClB,MAAM,eAAe,oBAAoB;CACzC,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;CACzD,MAAM,aAAa,MAAM,SAAS,MAAM,SAAS,GAAG;CAGpD,MAAM,UAAU,SAAS,OACpB,YAAY,OAAO,WAAW,YAC/B;AAEJ,QACE,oBAAC,yBAAyB;EAAS,OAAO;YACxC,qBAAC;GACC,WAAW,GACT,8CACA,gBAAgB;IACd;IACA;IACA;IACD,EACD,gBAAgB,YAAY,cAAc,oDAC1C,UACD;GACD,GAAI;cAEH,gBACC,4CACE,oBAAC,SAAI,WAAW,GACd,wIACA,YAAY,cAAc,cAC3B,GAAI,EACJ,YAAY,cACX,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD,IAEH,EAEL,qBAAC;IAAI,WAAU;;KACZ,YAAY,YACX,oBAAC;MAAI,WAAW;gBACd,qBAAC;OAAI,WAAU;kBACb,qBAAC;QAAI,WAAU;mBACb,qBAAC;SAAI,WAAU;oBACZ,QACC,oBAAC;UAAI,WAAU;oBACb,oBAAC,QAAK,WAAU,8DAA8D;WAC1E,EAER,oBAAC;UAAK,WAAU;oBACb;WACI;UACH,EACL,YACC,oBAAC;SAAE,WAAU;mBACV;UACC;SAEF,EACL,WACC,oBAAC;QAAI,WAAU;kBACZ;SACG;QAEJ;OACF;KAEP,YAAY,aACX,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;kBACZ,QACC,oBAAC;QAAI,WAAU;kBACb,oBAAC,QAAK,WAAU,sCAAsC;SAClD,EAER,oBAAC;QAAK,WAAU;kBACb;SACI;QACH,EACL,WACC,oBAAC;OAAI,WAAU;iBACZ;QACG;OAEJ;KAEP,cACC,oBAAC;MACC,WAAW,GACT,YAAY,WAAW,0DAA0D,IACjF,YAAY,YAAY,cAAc,IACtC,YAAY,cAAc,YAAY,WAAW,mBAAmB,IACpE,iBACD;MAEA;OACG;;KAEJ;IACD;GAC2B;;AAQxC,SAAgB,eAAe,EAC7B,UACA,WACA,UACA,GAAG,SACmB;CACtB,MAAM,YAAY,gBAAgB,IAAI,SAAS,IAAI;AAEnD,QACE,qBAAC;EACC,WAAW,GACT,6IACA,sGACA,+BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,oHACA,UACD,GACD;GACF,oBAAC;IAAI,WAAU;IACZ;KACG;;GACF"}

package/dist/esm/components/chart-card.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/chart-card.d.ts
+type DesignChartCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignChartCardProps = {
+  gradient?: DesignChartCardGradient;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "title">;
+/**
+ * Card chrome (title + description + border) for a chart. Wrap every
+ * `AnalyticsChart` in this so the chart has context. Also used around raw
+ * Recharts components paired with `DesignChartContainer` for non-time-series
+ * fallbacks.
+ *
+ * ```tsx
+ * // Time-series chart (preferred):
+ * <DesignChartCard title="Signups" description="Last 30 days">
+ *   <AnalyticsChart data={data} state={state} onChange={setState} />
+ * </DesignChartCard>
+ *
+ * // Non-time-series fallback (static ranking, distribution, etc.):
+ * <DesignChartCard title="Top referrers" description="This month">
+ *   <DesignChartContainer config={chartConfig} maxHeight={300}>
+ *     <Recharts.BarChart data={data}>
+ *       <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+ *       <Recharts.XAxis dataKey="name" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+ *       <Recharts.Tooltip content={<DesignChartTooltipContent />} />
+ *       <Recharts.Bar dataKey="count" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+ *     </Recharts.BarChart>
+ *   </DesignChartContainer>
+ * </DesignChartCard>
+ * ```
+ *
+ * `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:
+ * `{ count: { label: "Count", color: getDesignChartColor(0) } }`.
+ */
+declare function DesignChartCard({
+  gradient,
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: DesignChartCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignChartCard, DesignChartCardProps };
+//# sourceMappingURL=chart-card.d.ts.map

package/dist/esm/components/chart-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.d.ts","names":[],"sources":["../../../src/components/chart-card.tsx"],"mappings":";;;;KAKK,uBAAA;AAAA,KAWO,oBAAA;EACV,QAAA,GAAW,uBAAA;EACX,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;AAAA,IAClB,IAAA,CAAK,KAAA,CAAM,cAAA;;;AAJf;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;iBAAgB,eAAA,CAAA;EACd,QAAA;EACA,KAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/chart-card.tsx
+const hoverTintClasses = new Map([
+	["blue", "group-hover:bg-blue-500/[0.03]"],
+	["cyan", "group-hover:bg-cyan-500/[0.03]"],
+	["purple", "group-hover:bg-purple-500/[0.03]"],
+	["green", "group-hover:bg-emerald-500/[0.03]"],
+	["orange", "group-hover:bg-orange-500/[0.03]"],
+	["default", "group-hover:bg-slate-500/[0.02]"]
+]);
+/**
+* Card chrome (title + description + border) for a chart. Wrap every
+* `AnalyticsChart` in this so the chart has context. Also used around raw
+* Recharts components paired with `DesignChartContainer` for non-time-series
+* fallbacks.
+*
+* ```tsx
+* // Time-series chart (preferred):
+* <DesignChartCard title="Signups" description="Last 30 days">
+*   <AnalyticsChart data={data} state={state} onChange={setState} />
+* </DesignChartCard>
+*
+* // Non-time-series fallback (static ranking, distribution, etc.):
+* <DesignChartCard title="Top referrers" description="This month">
+*   <DesignChartContainer config={chartConfig} maxHeight={300}>
+*     <Recharts.BarChart data={data}>
+*       <Recharts.CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+*       <Recharts.XAxis dataKey="name" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+*       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />
+*       <Recharts.Tooltip content={<DesignChartTooltipContent />} />
+*       <Recharts.Bar dataKey="count" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />
+*     </Recharts.BarChart>
+*   </DesignChartContainer>
+* </DesignChartCard>
+* ```
+*
+* `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:
+* `{ count: { label: "Count", color: getDesignChartColor(0) } }`.
+*/
+function DesignChartCard({ gradient = "default", title, description, className, children, ...props }) {
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper {
+          z-index: 9999 !important;
+          overflow: visible !important;
+        }
+        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper > * {
+          overflow: visible !important;
+        }
+      ` } }), /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none design-chart-card-tooltip-escape", "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]", "shadow-sm hover:shadow-md hover:z-10", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl overflow-hidden" }),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden", hoverTintClass) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative h-full flex flex-col p-4",
+				children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+					className: "mb-3",
+					children: [title && /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-semibold text-foreground",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground mt-0.5",
+						children: description
+					})]
+				}), children]
+			})
+		]
+	})] });
+}
+
+//#endregion
+export { DesignChartCard };
+//# sourceMappingURL=chart-card.js.map

package/dist/esm/components/chart-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-card.js","names":[],"sources":["../../../src/components/chart-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignChartCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignChartCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n]);\n\nexport type DesignChartCardProps = {\n  gradient?: DesignChartCardGradient,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n} & Omit<React.ComponentProps<\"div\">, \"title\">;\n\n/**\n * Card chrome (title + description + border) for a chart. Wrap every\n * `AnalyticsChart` in this so the chart has context. Also used around raw\n * Recharts components paired with `DesignChartContainer` for non-time-series\n * fallbacks.\n *\n * ```tsx\n * // Time-series chart (preferred):\n * <DesignChartCard title=\"Signups\" description=\"Last 30 days\">\n *   <AnalyticsChart data={data} state={state} onChange={setState} />\n * </DesignChartCard>\n *\n * // Non-time-series fallback (static ranking, distribution, etc.):\n * <DesignChartCard title=\"Top referrers\" description=\"This month\">\n *   <DesignChartContainer config={chartConfig} maxHeight={300}>\n *     <Recharts.BarChart data={data}>\n *       <Recharts.CartesianGrid strokeDasharray=\"3 3\" stroke=\"hsl(var(--border))\" />\n *       <Recharts.XAxis dataKey=\"name\" tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />\n *       <Recharts.YAxis tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }} />\n *       <Recharts.Tooltip content={<DesignChartTooltipContent />} />\n *       <Recharts.Bar dataKey=\"count\" fill={getDesignChartColor(0)} radius={[4, 4, 0, 0]} />\n *     </Recharts.BarChart>\n *   </DesignChartContainer>\n * </DesignChartCard>\n * ```\n *\n * `chartConfig` for `DesignChartContainer` maps each `dataKey` to its label and color:\n * `{ count: { label: \"Count\", color: getDesignChartColor(0) } }`.\n */\nexport function DesignChartCard({\n  gradient = \"default\",\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: DesignChartCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: `\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper {\n          z-index: 9999 !important;\n          overflow: visible !important;\n        }\n        .design-chart-card-tooltip-escape .recharts-tooltip-wrapper > * {\n          overflow: visible !important;\n        }\n      ` }} />\n      <div\n        className={cn(\n          \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none design-chart-card-tooltip-escape\",\n          \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n          \"shadow-sm hover:shadow-md hover:z-10\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl overflow-hidden\" />\n        <div\n          className={cn(\n            \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden\",\n            hoverTintClass\n          )}\n        />\n        <div className=\"relative h-full flex flex-col p-4\">\n          {(title || description) && (\n            <div className=\"mb-3\">\n              {title && <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>}\n              {description && <p className=\"text-xs text-muted-foreground mt-0.5\">{description}</p>}\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAqC;CAChE,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCF,SAAgB,gBAAgB,EAC9B,WAAW,WACX,OACA,aACA,WACA,UACA,GAAG,SACoB;CACvB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,4CACE,oBAAC,WAAM,yBAAyB,EAAE,QAAQ;;;;;;;;SAQvC,GAAI,EACP,qBAAC;EACC,WAAW,GACT,oKACA,sGACA,wCACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yJAAyJ;GACxK,oBAAC,SACC,WAAW,GACT,+HACA,eACD,GACD;GACF,qBAAC;IAAI,WAAU;gBACX,SAAS,gBACT,qBAAC;KAAI,WAAU;gBACZ,SAAS,oBAAC;MAAG,WAAU;gBAAyC;OAAW,EAC3E,eAAe,oBAAC;MAAE,WAAU;gBAAwC;OAAgB;MACjF,EAEP;KACG;;GACF,IACL"}

package/dist/esm/components/chart-container.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+
+//#region src/components/chart-container.d.ts
+declare const THEMES: {
+  readonly light: "";
+  readonly dark: ".dark";
+};
+type DesignChartConfig = { [k in string]: {
+  label?: React$1.ReactNode;
+  icon?: React$1.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+}) };
+type ChartContextProps = {
+  config: DesignChartConfig;
+};
+declare function useDesignChart(): ChartContextProps;
+declare function DesignChartStyle({
+  id,
+  config
+}: {
+  id: string;
+  config: DesignChartConfig;
+}): react_jsx_runtime0.JSX.Element | null;
+declare const DesignChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  maxHeight?: number;
+  config: DesignChartConfig;
+  children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Helper to extract item config from a Recharts payload object.
+ */
+declare function getPayloadConfigFromPayload(config: DesignChartConfig, payload: unknown, key: string): ({
+  label?: React$1.ReactNode;
+  icon?: React$1.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+//#endregion
+export { DesignChartConfig, DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart };
+//# sourceMappingURL=chart-container.d.ts.map

package/dist/esm/components/chart-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.d.ts","names":[],"sources":["../../../src/components/chart-container.tsx"],"mappings":";;;;;cAMM,MAAA;EAAA,SAA8C,KAAA;EAAA,SAAA,IAAA;AAAA;AAAA,KAExC,iBAAA;EAER,KAAA,GAAQ,OAAA,CAAM,SAAA;EACd,IAAA,GAAO,OAAA,CAAM,aAAA;AAAA;EAET,KAAA;EAAgB,KAAA;AAAA;EAChB,KAAA;EAAe,KAAA,EAAO,MAAA,cAAoB,MAAA;AAAA;AAAA,KAI7C,iBAAA;EACH,MAAA,EAAQ,iBAAA;AAAA;AAAA,iBAKM,cAAA,CAAA,GAAc,iBAAA;AAAA,iBAQd,gBAAA,CAAA;EAAmB,EAAA;EAAI;AAAA;EAAY,EAAA;EAAY,MAAA,EAAQ,iBAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAiC7E,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,eAAA,CAAA,cAAA,IAAA,OAAA,CAAA,cAAA,CAAA,cAAA;;UAIrB,iBAAA;YACE,OAAA,CAAM,cAAA,QACP,iBAAA,CAAkB,mBAAA;AAAA;;;;iBA+Cf,2BAAA,CACd,MAAA,EAAQ,iBAAA,EACR,OAAA,WACA,GAAA;UA/GU,OAAA,CAAM,SAAA;SACP,OAAA,CAAM,aAAA;AAAA;;;;;SAGa,MAAA,cAAoB,MAAA;AAAA"}

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

@@ -0,0 +1,70 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+
+//#region src/components/chart-container.tsx
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+const ChartContext = React$1.createContext(null);
+function useDesignChart() {
+	const context = React$1.useContext(ChartContext);
+	if (!context) throw new Error("useDesignChart must be used within a <DesignChartContainer />");
+	return context;
+}
+function DesignChartStyle({ id, config }) {
+	const colorConfig = Object.entries(config).filter(([_, cfg]) => cfg.theme || cfg.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+}
+const DesignChartContainer = React$1.forwardRef(({ id, className, children, config, maxHeight, ...props }, ref) => {
+	const uniqueId = React$1.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-chart": chartId,
+			ref,
+			className: cn("flex aspect-video justify-center text-xs", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-white/[0.06]", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-black/[0.12] dark:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-white/[0.12]", "[&_.recharts-dot[stroke='#fff']]:stroke-transparent", "[&_.recharts-layer]:outline-none", "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-white/[0.06]", "[&_.recharts-radial-bar-background-sector]:fill-black/[0.04] dark:[&_.recharts-radial-bar-background-sector]:fill-white/[0.04]", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-black/[0.04] dark:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-white/[0.04]", "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-white/[0.06]", "[&_.recharts-sector[stroke='#fff']]:stroke-transparent", "[&_.recharts-sector]:outline-none", "[&_.recharts-surface]:outline-none", className),
+			...props,
+			style: {
+				...props.style,
+				maxHeight
+			},
+			children: [/* @__PURE__ */ jsx(DesignChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				maxHeight,
+				children
+			})]
+		})
+	});
+});
+DesignChartContainer.displayName = "DesignChartContainer";
+/**
+* Helper to extract item config from a Recharts payload object.
+*/
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+//#endregion
+export { DesignChartContainer, DesignChartStyle, getPayloadConfigFromPayload, useDesignChart };
+//# sourceMappingURL=chart-container.js.map

package/dist/esm/components/chart-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.js","names":["React"],"sources":["../../../src/components/chart-container.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"@stackframe/stack-ui\";\n\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type DesignChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode,\n    icon?: React.ComponentType,\n  } & (\n    | { color?: string, theme?: never }\n    | { color?: never, theme: Record<keyof typeof THEMES, string> }\n  )\n};\n\ntype ChartContextProps = {\n  config: DesignChartConfig,\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nexport function useDesignChart() {\n  const context = React.useContext(ChartContext);\n  if (!context) {\n    throw new Error(\"useDesignChart must be used within a <DesignChartContainer />\");\n  }\n  return context;\n}\n\nexport function DesignChartStyle({ id, config }: { id: string, config: DesignChartConfig }) {\n  const colorConfig = Object.entries(config).filter(\n    ([_, cfg]) => cfg.theme || cfg.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n              .map(([key, itemConfig]) => {\n                const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n                return color ? `  --color-${key}: ${color};` : null;\n              })\n              .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n}\n\nexport const DesignChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    maxHeight?: number,\n    config: DesignChartConfig,\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"],\n  }\n>(({ id, className, children, config, maxHeight, ...props }, ref) => {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs\",\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground\",\n          \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-white/[0.06]\",\n          \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-black/[0.12] dark:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-white/[0.12]\",\n          \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-layer]:outline-none\",\n          \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-white/[0.06]\",\n          \"[&_.recharts-radial-bar-background-sector]:fill-black/[0.04] dark:[&_.recharts-radial-bar-background-sector]:fill-white/[0.04]\",\n          \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-black/[0.04] dark:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-white/[0.04]\",\n          \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-black/[0.06] dark:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-white/[0.06]\",\n          \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n          \"[&_.recharts-sector]:outline-none\",\n          \"[&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n        style={{\n          ...props.style,\n          maxHeight,\n        }}\n      >\n        <DesignChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer maxHeight={maxHeight}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n});\nDesignChartContainer.displayName = \"DesignChartContainer\";\n\n/**\n * Helper to extract item config from a Recharts payload object.\n */\nexport function getPayloadConfigFromPayload(\n  config: DesignChartConfig,\n  payload: unknown,\n  key: string,\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n"],"mappings":";;;;;;;;AAMA,MAAM,SAAS;CAAE,OAAO;CAAI,MAAM;CAAS;AAgB3C,MAAM,eAAeA,QAAM,cAAwC,KAAK;AAExE,SAAgB,iBAAiB;CAC/B,MAAM,UAAUA,QAAM,WAAW,aAAa;AAC9C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,gEAAgE;AAElF,QAAO;;AAGT,SAAgB,iBAAiB,EAAE,IAAI,UAAqD;CAC1F,MAAM,cAAc,OAAO,QAAQ,OAAO,CAAC,QACxC,CAAC,GAAG,SAAS,IAAI,SAAS,IAAI,MAChC;AAED,KAAI,CAAC,YAAY,OACf,QAAO;AAGT,QACE,oBAAC,WACC,yBAAyB,EACvB,QAAQ,OAAO,QAAQ,OAAO,CAC3B,KACE,CAAC,OAAO,YAAY;EAC/B,OAAO,eAAe,GAAG;EACzB,YACa,KAAK,CAAC,KAAK,gBAAgB;EAC1B,MAAM,QAChB,WAAW,QAAQ,UACnB,WAAW;AACD,SAAO,QAAQ,aAAa,IAAI,IAAI,MAAM,KAAK;GAC/C,CACD,KAAK,KAAK,CAAC;;EAGf,CACA,KAAK,KAAK,EACd,GACD;;AAIN,MAAa,uBAAuBA,QAAM,YASvC,EAAE,IAAI,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACnE,MAAM,WAAWA,QAAM,OAAO;CAC9B,MAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,MAAM,GAAG;AAEzD,QACE,oBAAC,aAAa;EAAS,OAAO,EAAE,QAAQ;YACtC,qBAAC;GACC,cAAY;GACP;GACL,WAAW,GACT,4CACA,gEACA,kJACA,wIACA,uDACA,oCACA,kIACA,kIACA,4IACA,0IACA,0DACA,qCACA,sCACA,UACD;GACD,GAAI;GACJ,OAAO;IACL,GAAG,MAAM;IACT;IACD;cAED,oBAAC;IAAiB,IAAI;IAAiB;KAAU,EACjD,oBAAC,kBAAkB;IAA+B;IAC/C;KACqC;IACpC;GACgB;EAE1B;AACF,qBAAqB,cAAc;;;;AAKnC,SAAgB,4BACd,QACA,SACA,KACA;AACA,KAAI,OAAO,YAAY,YAAY,YAAY,KAC7C;CAGF,MAAM,iBACJ,aAAa,WACb,OAAO,QAAQ,YAAY,YAC3B,QAAQ,YAAY,OAChB,QAAQ,UACR;CAEN,IAAI,iBAAyB;AAE7B,KACE,OAAO,WACP,OAAO,QAAQ,SAAiC,SAEhD,kBAAiB,QAAQ;UAEzB,kBACA,OAAO,kBACP,OAAO,eAAe,SAAwC,SAE9D,kBAAiB,eACf;AAIJ,QAAO,kBAAkB,SACrB,OAAO,kBACP,OAAO"}

package/dist/esm/components/chart-legend.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+
+//#region src/components/chart-legend.d.ts
+declare const DesignChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
+  hideIcon?: boolean;
+  nameKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DesignChartLegendContent };
+//# sourceMappingURL=chart-legend.d.ts.map

package/dist/esm/components/chart-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.d.ts","names":[],"sources":["../../../src/components/chart-legend.tsx"],"mappings":";;;;cAOa,wBAAA,EAAwB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,eAAA,CAAA,cAAA,IAAA,OAAA,CAAA,cAAA,CAAA,cAAA,IAAA,IAAA,CAAA,iBAAA,CAAA,WAAA"}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { getPayloadConfigFromPayload, useDesignChart } from "./chart-container.js";
+
+//#region src/components/chart-legend.tsx
+const DesignChartLegendContent = React$1.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+	const { config } = useDesignChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex flex-wrap items-center justify-center gap-2", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.map((item) => {
+			const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.dataKey || "value"}`);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 rounded-full bg-foreground/[0.03] ring-1 ring-foreground/[0.06] px-3 py-1.5 text-xs", "transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.05]"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
+					className: "h-2 w-2 shrink-0 rounded-full",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: itemConfig?.label || item.value
+				})]
+			}, item.value);
+		})
+	});
+});
+DesignChartLegendContent.displayName = "DesignChartLegendContent";
+
+//#endregion
+export { DesignChartLegendContent };
+//# sourceMappingURL=chart-legend.js.map

package/dist/esm/components/chart-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.js","names":["React"],"sources":["../../../src/components/chart-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"@stackframe/stack-ui\";\nimport { useDesignChart, getPayloadConfigFromPayload } from \"./chart-container\";\n\nexport const DesignChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean,\n      nameKey?: string,\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useDesignChart();\n\n    if (!payload?.length) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-center justify-center gap-2\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 rounded-full bg-foreground/[0.03] ring-1 ring-foreground/[0.06] px-3 py-1.5 text-xs\",\n                \"transition-colors duration-150 hover:transition-none hover:bg-foreground/[0.05]\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <span\n                  className=\"h-2 w-2 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              <span className=\"font-medium text-foreground\">\n                {itemConfig?.label || item.value}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\nDesignChartLegendContent.displayName = \"DesignChartLegendContent\";\n"],"mappings":";;;;;;;;AAOA,MAAa,2BAA2BA,QAAM,YAS1C,EAAE,WAAW,WAAW,OAAO,SAAS,gBAAgB,UAAU,WAClE,QACG;CACH,MAAM,EAAE,WAAW,gBAAgB;AAEnC,KAAI,CAAC,SAAS,OACZ,QAAO;AAGT,QACE,oBAAC;EACM;EACL,WAAW,GACT,oDACA,kBAAkB,QAAQ,SAAS,QACnC,UACD;YAEA,QAAQ,KAAK,SAAS;GAErB,MAAM,aAAa,4BAA4B,QAAQ,MAD3C,GAAG,WAAW,KAAK,WAAW,UACuB;AAEjE,UACE,qBAAC;IAEC,WAAW,GACT,iHACA,kFACD;eAEA,YAAY,QAAQ,CAAC,WACpB,oBAAC,WAAW,SAAO,GAEnB,oBAAC;KACC,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;MACtC,EAEJ,oBAAC;KAAK,WAAU;eACb,YAAY,SAAS,KAAK;MACtB;MAhBF,KAAK,MAiBN;IAER;GACE;EAGX;AACD,yBAAyB,cAAc"}

package/dist/esm/components/chart-theme.d.ts

@@ -0,0 +1,26 @@
+//#region src/components/chart-theme.d.ts
+type DesignChartColorEntry = {
+  light: string;
+  dark: string;
+};
+/**
+ * Design-system-consistent chart colors that work in light and dark mode.
+ * Maps to the gradient system used across the dashboard design components.
+ */
+declare const DESIGN_CHART_COLORS: readonly DesignChartColorEntry[];
+type DesignChartColorName = "blue" | "cyan" | "purple" | "green" | "orange" | "red";
+/**
+ * Get a chart color by index (wraps around) or by name.
+ */
+declare function getDesignChartColor(indexOrName: number | DesignChartColorName, mode?: "light" | "dark"): string;
+/**
+ * Recharts-compatible grid/axis styling constants that match the design system.
+ */
+declare const DESIGN_CHART_GRID_COLOR = "hsl(0 0% 50% / 0.12)";
+declare const DESIGN_CHART_AXIS_TICK_STYLE: {
+  readonly fill: "hsl(0 0% 50% / 0.5)";
+  readonly fontSize: 11;
+};
+//#endregion
+export { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignChartColorEntry, DesignChartColorName, getDesignChartColor };
+//# sourceMappingURL=chart-theme.d.ts.map

package/dist/esm/components/chart-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme.d.ts","names":[],"sources":["../../../src/components/chart-theme.tsx"],"mappings":";KAEY,qBAAA;EACV,KAAA;EACA,IAAA;AAAA;;;AAOF;;cAAa,mBAAA,WAA8B,qBAAA;AAAA,KAS/B,oBAAA;;AAAZ;;iBAcgB,mBAAA,CACd,WAAA,WAAsB,oBAAA,EACtB,IAAA;;;AAFF;cAaa,uBAAA;AAAA,cACA,4BAAA;EAAA,SAGH,IAAA;EAAA,SAAA,QAAA;AAAA"}

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

@@ -0,0 +1,59 @@
+"use client";
+
+//#region src/components/chart-theme.tsx
+/**
+* Design-system-consistent chart colors that work in light and dark mode.
+* Maps to the gradient system used across the dashboard design components.
+*/
+const DESIGN_CHART_COLORS = [
+	{
+		light: "hsl(221, 83%, 53%)",
+		dark: "hsl(217, 91%, 60%)"
+	},
+	{
+		light: "hsl(192, 91%, 36%)",
+		dark: "hsl(188, 94%, 43%)"
+	},
+	{
+		light: "hsl(271, 91%, 65%)",
+		dark: "hsl(270, 95%, 75%)"
+	},
+	{
+		light: "hsl(160, 84%, 39%)",
+		dark: "hsl(160, 84%, 45%)"
+	},
+	{
+		light: "hsl(38, 92%, 50%)",
+		dark: "hsl(38, 92%, 50%)"
+	},
+	{
+		light: "hsl(0, 84%, 60%)",
+		dark: "hsl(0, 84%, 65%)"
+	}
+];
+const colorNameIndexMap = new Map([
+	["blue", 0],
+	["cyan", 1],
+	["purple", 2],
+	["green", 3],
+	["orange", 4],
+	["red", 5]
+]);
+/**
+* Get a chart color by index (wraps around) or by name.
+*/
+function getDesignChartColor(indexOrName, mode = "dark") {
+	return DESIGN_CHART_COLORS[typeof indexOrName === "string" ? colorNameIndexMap.get(indexOrName) ?? 0 : indexOrName % DESIGN_CHART_COLORS.length][mode];
+}
+/**
+* Recharts-compatible grid/axis styling constants that match the design system.
+*/
+const DESIGN_CHART_GRID_COLOR = "hsl(0 0% 50% / 0.12)";
+const DESIGN_CHART_AXIS_TICK_STYLE = {
+	fill: "hsl(0 0% 50% / 0.5)",
+	fontSize: 11
+};
+
+//#endregion
+export { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, getDesignChartColor };
+//# sourceMappingURL=chart-theme.js.map