@stackframe/dashboard-ui-components 2.8.76

package/dist/components/chart-card.js

@@ -0,0 +1,54 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(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]"]
+]);
+function DesignChartCard({ gradient = "default", title, description, className, children, ...props }) {
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _stackframe_stack_ui.cn)("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden", hoverTintClass) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative h-full flex flex-col p-4",
+				children: [(title || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-3",
+					children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-sm font-semibold text-foreground",
+						children: title
+					}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground mt-0.5",
+						children: description
+					})]
+				}), children]
+			})
+		]
+	})] });
+}
+
+//#endregion
+exports.DesignChartCard = DesignChartCard;
+//# sourceMappingURL=chart-card.js.map

package/dist/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\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;AAQF,SAAgB,gBAAgB,EAC9B,WAAW,WACX,OACA,aACA,WACA,UACA,GAAG,SACoB;CACvB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,qFACE,2CAAC,WAAM,yBAAyB,EAAE,QAAQ;;;;;;;;SAQvC,GAAI,EACP,4CAAC;EACC,wCACE,oKACA,sGACA,wCACA,UACD;EACD,GAAI;;GAEJ,2CAAC,SAAI,WAAU,yJAAyJ;GACxK,2CAAC,SACC,wCACE,+HACA,eACD,GACD;GACF,4CAAC;IAAI,WAAU;gBACX,SAAS,gBACT,4CAAC;KAAI,WAAU;gBACZ,SAAS,2CAAC;MAAG,WAAU;gBAAyC;OAAW,EAC3E,eAAe,2CAAC;MAAE,WAAU;gBAAwC;OAAgB;MACjF,EAEP;KACG;;GACF,IACL"}

package/dist/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/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/components/chart-container.js

@@ -0,0 +1,77 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let recharts = require("recharts");
+recharts = require_chunk.__toESM(recharts);
+
+//#region src/components/chart-container.tsx
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+const ChartContext = react.createContext(null);
+function useDesignChart() {
+	const context = react.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__ */ (0, react_jsx_runtime.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.forwardRef(({ id, className, children, config, maxHeight, ...props }, ref) => {
+	const uniqueId = react.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-chart": chartId,
+			ref,
+			className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.jsx)(DesignChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.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
+exports.DesignChartContainer = DesignChartContainer;
+exports.DesignChartStyle = DesignChartStyle;
+exports.getPayloadConfigFromPayload = getPayloadConfigFromPayload;
+exports.useDesignChart = useDesignChart;
+//# sourceMappingURL=chart-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.js","names":["React","RechartsPrimitive"],"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,MAAM,cAAwC,KAAK;AAExE,SAAgB,iBAAiB;CAC/B,MAAM,UAAUA,MAAM,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,2CAAC,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,MAAM,YASvC,EAAE,IAAI,WAAW,UAAU,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACnE,MAAM,WAAWA,MAAM,OAAO;CAC9B,MAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,MAAM,GAAG;AAEzD,QACE,2CAAC,aAAa;EAAS,OAAO,EAAE,QAAQ;YACtC,4CAAC;GACC,cAAY;GACP;GACL,wCACE,4CACA,gEACA,kJACA,wIACA,uDACA,oCACA,kIACA,kIACA,4IACA,0IACA,0DACA,qCACA,sCACA,UACD;GACD,GAAI;GACJ,OAAO;IACL,GAAG,MAAM;IACT;IACD;cAED,2CAAC;IAAiB,IAAI;IAAiB;KAAU,EACjD,2CAACC,SAAkB;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/components/chart-legend.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+
+//#region src/components/chart-legend.d.ts
+declare const DesignChartLegend: typeof RechartsPrimitive.Legend;
+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 { DesignChartLegend, DesignChartLegendContent };
+//# sourceMappingURL=chart-legend.d.ts.map

package/dist/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,iBAAA,SAAiB,iBAAA,CAAA,MAAA;AAAA,cAEjB,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/components/chart-legend.js

@@ -0,0 +1,41 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let recharts = require("recharts");
+recharts = require_chunk.__toESM(recharts);
+let __chart_container_js = require("./chart-container.js");
+
+//#region src/components/chart-legend.tsx
+const DesignChartLegend = recharts.Legend;
+const DesignChartLegendContent = react.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+	const { config } = (0, __chart_container_js.useDesignChart)();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: (0, _stackframe_stack_ui.cn)("flex flex-wrap items-center justify-center gap-2", verticalAlign === "top" ? "pb-3" : "pt-3", className),
+		children: payload.map((item) => {
+			const itemConfig = (0, __chart_container_js.getPayloadConfigFromPayload)(config, item, `${nameKey || item.dataKey || "value"}`);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _stackframe_stack_ui.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__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-2 w-2 shrink-0 rounded-full",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium text-foreground",
+					children: itemConfig?.label || item.value
+				})]
+			}, item.value);
+		})
+	});
+});
+DesignChartLegendContent.displayName = "DesignChartLegendContent";
+
+//#endregion
+exports.DesignChartLegend = DesignChartLegend;
+exports.DesignChartLegendContent = DesignChartLegendContent;
+//# sourceMappingURL=chart-legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.js","names":["RechartsPrimitive","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 DesignChartLegend = RechartsPrimitive.Legend;\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,oBAAoBA,SAAkB;AAEnD,MAAa,2BAA2BC,MAAM,YAS1C,EAAE,WAAW,WAAW,OAAO,SAAS,gBAAgB,UAAU,WAClE,QACG;CACH,MAAM,EAAE,qDAA2B;AAEnC,KAAI,CAAC,SAAS,OACZ,QAAO;AAGT,QACE,2CAAC;EACM;EACL,wCACE,oDACA,kBAAkB,QAAQ,SAAS,QACnC,UACD;YAEA,QAAQ,KAAK,SAAS;GAErB,MAAM,mEAAyC,QAAQ,MAD3C,GAAG,WAAW,KAAK,WAAW,UACuB;AAEjE,UACE,4CAAC;IAEC,wCACE,iHACA,kFACD;eAEA,YAAY,QAAQ,CAAC,WACpB,2CAAC,WAAW,SAAO,GAEnB,2CAAC;KACC,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,OAAO;MACtC,EAEJ,2CAAC;KAAK,WAAU;eACb,YAAY,SAAS,KAAK;MACtB;MAhBF,KAAK,MAiBN;IAER;GACE;EAGX;AACD,yBAAyB,cAAc"}

package/dist/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/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/components/chart-theme.js

@@ -0,0 +1,64 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#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
+exports.DESIGN_CHART_AXIS_TICK_STYLE = DESIGN_CHART_AXIS_TICK_STYLE;
+exports.DESIGN_CHART_COLORS = DESIGN_CHART_COLORS;
+exports.DESIGN_CHART_GRID_COLOR = DESIGN_CHART_GRID_COLOR;
+exports.getDesignChartColor = getDesignChartColor;
+//# sourceMappingURL=chart-theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-theme.js","names":[],"sources":["../../src/components/chart-theme.tsx"],"sourcesContent":["\"use client\";\n\nexport type DesignChartColorEntry = {\n  light: string,\n  dark: string,\n};\n\n/**\n * Design-system-consistent chart colors that work in light and dark mode.\n * Maps to the gradient system used across the dashboard design components.\n */\nexport const DESIGN_CHART_COLORS: readonly DesignChartColorEntry[] = [\n  { light: \"hsl(221, 83%, 53%)\", dark: \"hsl(217, 91%, 60%)\" },   // blue\n  { light: \"hsl(192, 91%, 36%)\", dark: \"hsl(188, 94%, 43%)\" },   // cyan\n  { light: \"hsl(271, 91%, 65%)\", dark: \"hsl(270, 95%, 75%)\" },   // purple\n  { light: \"hsl(160, 84%, 39%)\", dark: \"hsl(160, 84%, 45%)\" },   // emerald/green\n  { light: \"hsl(38, 92%, 50%)\",  dark: \"hsl(38, 92%, 50%)\" },    // amber/orange\n  { light: \"hsl(0, 84%, 60%)\",   dark: \"hsl(0, 84%, 65%)\" },     // red\n] as const;\n\nexport type DesignChartColorName = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\n\nconst colorNameIndexMap = new Map<DesignChartColorName, number>([\n  [\"blue\", 0],\n  [\"cyan\", 1],\n  [\"purple\", 2],\n  [\"green\", 3],\n  [\"orange\", 4],\n  [\"red\", 5],\n]);\n\n/**\n * Get a chart color by index (wraps around) or by name.\n */\nexport function getDesignChartColor(\n  indexOrName: number | DesignChartColorName,\n  mode: \"light\" | \"dark\" = \"dark\",\n): string {\n  const index = typeof indexOrName === \"string\"\n    ? colorNameIndexMap.get(indexOrName) ?? 0\n    : indexOrName % DESIGN_CHART_COLORS.length;\n  return DESIGN_CHART_COLORS[index][mode];\n}\n\n/**\n * Recharts-compatible grid/axis styling constants that match the design system.\n */\nexport const DESIGN_CHART_GRID_COLOR = \"hsl(0 0% 50% / 0.12)\";\nexport const DESIGN_CHART_AXIS_TICK_STYLE = {\n  fill: \"hsl(0 0% 50% / 0.5)\",\n  fontSize: 11,\n} as const;\n"],"mappings":";;;;;;;;;AAWA,MAAa,sBAAwD;CACnE;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAsB;CAC3D;EAAE,OAAO;EAAsB,MAAM;EAAqB;CAC1D;EAAE,OAAO;EAAsB,MAAM;EAAoB;CAC1D;AAID,MAAM,oBAAoB,IAAI,IAAkC;CAC9D,CAAC,QAAQ,EAAE;CACX,CAAC,QAAQ,EAAE;CACX,CAAC,UAAU,EAAE;CACb,CAAC,SAAS,EAAE;CACZ,CAAC,UAAU,EAAE;CACb,CAAC,OAAO,EAAE;CACX,CAAC;;;;AAKF,SAAgB,oBACd,aACA,OAAyB,QACjB;AAIR,QAAO,oBAHO,OAAO,gBAAgB,WACjC,kBAAkB,IAAI,YAAY,IAAI,IACtC,cAAc,oBAAoB,QACJ;;;;;AAMpC,MAAa,0BAA0B;AACvC,MAAa,+BAA+B;CAC1C,MAAM;CACN,UAAU;CACX"}

package/dist/components/chart-tooltip.d.ts

@@ -0,0 +1,41 @@
+import * as React$1 from "react";
+import * as RechartsPrimitive from "recharts";
+import * as recharts_types_component_DefaultTooltipContent0 from "recharts/types/component/DefaultTooltipContent";
+import * as recharts_types_util_types0 from "recharts/types/util/types";
+import * as recharts_types_component_Tooltip0 from "recharts/types/component/Tooltip";
+import * as recharts_types_util_payload_getUniqPayload0 from "recharts/types/util/payload/getUniqPayload";
+
+//#region src/components/chart-tooltip.d.ts
+declare const DesignChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const DesignChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType> & {
+  accessibilityLayer?: boolean;
+  active?: boolean | undefined;
+  includeHidden?: boolean | undefined;
+  allowEscapeViewBox?: recharts_types_util_types0.AllowInDimension;
+  animationDuration?: recharts_types_util_types0.AnimationDuration;
+  animationEasing?: recharts_types_util_types0.AnimationTiming;
+  content?: recharts_types_component_Tooltip0.ContentType<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType> | undefined;
+  coordinate?: Partial<recharts_types_util_types0.Coordinate>;
+  cursor?: boolean | React$1.ReactElement | React$1.SVGProps<SVGElement>;
+  filterNull?: boolean;
+  defaultIndex?: number;
+  isAnimationActive?: boolean;
+  offset?: number;
+  payloadUniqBy?: recharts_types_util_payload_getUniqPayload0.UniqueOption<recharts_types_component_DefaultTooltipContent0.Payload<recharts_types_component_DefaultTooltipContent0.ValueType, recharts_types_component_DefaultTooltipContent0.NameType>> | undefined;
+  position?: Partial<recharts_types_util_types0.Coordinate>;
+  reverseDirection?: recharts_types_util_types0.AllowInDimension;
+  shared?: boolean;
+  trigger?: "hover" | "click";
+  useTranslate3d?: boolean;
+  viewBox?: recharts_types_util_types0.CartesianViewBox;
+  wrapperStyle?: React$1.CSSProperties;
+} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DesignChartTooltip, DesignChartTooltipContent };
+//# sourceMappingURL=chart-tooltip.d.ts.map

package/dist/components/chart-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.d.ts","names":[],"sources":["../../src/components/chart-tooltip.tsx"],"mappings":";;;;;;;;cAOa,kBAAA,SAAkB,iBAAA,CAAA,OAAA;AAAA,cAElB,yBAAA,EAAyB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,0BAAA,CA0JrC,+CAAA,CA1JqC,SAAA,EAAA,+CAAA,CAAA,QAAA;;;;uBAAA,0BAAA,CAAA,gBAAA"}

package/dist/components/chart-tooltip.js

@@ -0,0 +1,89 @@
+"use client";
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let recharts = require("recharts");
+recharts = require_chunk.__toESM(recharts);
+let __chart_container_js = require("./chart-container.js");
+
+//#region src/components/chart-tooltip.tsx
+const DesignChartTooltip = recharts.Tooltip;
+const DesignChartTooltipContent = react.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }, ref) => {
+	const { config } = (0, __chart_container_js.useDesignChart)();
+	const tooltipLabel = react.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = (0, __chart_container_js.getPayloadConfigFromPayload)(config, item, `${labelKey || item.dataKey || item.name || "value"}`);
+		const configEntry = typeof label === "string" ? config[label] : void 0;
+		const value = !labelKey && typeof label === "string" ? configEntry?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _stackframe_stack_ui.cn)("font-medium text-muted-foreground tracking-wide", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _stackframe_stack_ui.cn)("font-medium text-muted-foreground tracking-wide", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: (0, _stackframe_stack_ui.cn)("grid min-w-[8rem] items-start gap-1.5 rounded-xl bg-background/95 px-3.5 py-2.5 text-xs shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]", className),
+		style: { zIndex: 9999 },
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid gap-1.5",
+			children: payload.map((item, index) => {
+				const itemConfig = (0, __chart_container_js.getPayloadConfigFromPayload)(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
+				const indicatorColor = color || item.payload.fill || item.color;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _stackframe_stack_ui.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, _stackframe_stack_ui.cn)("shrink-0 rounded-full", {
+							"h-2 w-2 ring-2 ring-white/20": indicator === "dot",
+							"w-1 rounded-[2px]": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent rounded-[2px]": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor,
+							backgroundColor: indicator === "dot" ? indicatorColor : void 0
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _stackframe_stack_ui.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[11px] text-muted-foreground",
+								children: itemConfig?.label || item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ml-auto font-mono text-xs font-semibold tabular-nums text-foreground",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : item.value
+						})]
+					})] })
+				}, item.dataKey);
+			})
+		})]
+	});
+});
+DesignChartTooltipContent.displayName = "DesignChartTooltipContent";
+
+//#endregion
+exports.DesignChartTooltip = DesignChartTooltip;
+exports.DesignChartTooltipContent = DesignChartTooltipContent;
+//# sourceMappingURL=chart-tooltip.js.map

package/dist/components/chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.js","names":["RechartsPrimitive","React"],"sources":["../../src/components/chart-tooltip.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 DesignChartTooltip = RechartsPrimitive.Tooltip;\n\nexport const DesignChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean,\n      hideIndicator?: boolean,\n      indicator?: \"line\" | \"dot\" | \"dashed\",\n      nameKey?: string,\n      labelKey?: string,\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useDesignChart();\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null;\n      }\n\n      const [item] = payload;\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`;\n      const itemConfig = getPayloadConfigFromPayload(config, item, key);\n      const configEntry = typeof label === \"string\" ? config[label as keyof typeof config] : undefined;\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? configEntry?.label ?? label\n          : itemConfig?.label;\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium text-muted-foreground tracking-wide\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        );\n      }\n\n      if (!value) {\n        return null;\n      }\n\n      return <div className={cn(\"font-medium text-muted-foreground tracking-wide\", labelClassName)}>{value}</div>;\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ]);\n\n    if (!active || !payload?.length) {\n      return null;\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-xl bg-background/95 px-3.5 py-2.5 text-xs shadow-lg backdrop-blur-xl ring-1 ring-foreground/[0.08]\",\n          className\n        )}\n        style={{ zIndex: 9999 }}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color || item.payload.fill || item.color;\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-full\",\n                            {\n                              \"h-2 w-2 ring-2 ring-white/20\": indicator === \"dot\",\n                              \"w-1 rounded-[2px]\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent rounded-[2px]\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                              backgroundColor: indicator === \"dot\" ? indicatorColor : undefined,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-[11px] text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"ml-auto font-mono text-xs font-semibold tabular-nums text-foreground\">\n                          {typeof item.value === \"number\" ? item.value.toLocaleString() : item.value}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\nDesignChartTooltipContent.displayName = \"DesignChartTooltipContent\";\n"],"mappings":";;;;;;;;;;;;;AAOA,MAAa,qBAAqBA,SAAkB;AAEpD,MAAa,4BAA4BC,MAAM,YAY3C,EACE,QACA,SACA,WACA,YAAY,OACZ,YAAY,OACZ,gBAAgB,OAChB,OACA,gBACA,gBACA,WACA,OACA,SACA,YAEF,QACG;CACH,MAAM,EAAE,qDAA2B;CAEnC,MAAM,eAAeA,MAAM,cAAc;AACvC,MAAI,aAAa,CAAC,SAAS,OACzB,QAAO;EAGT,MAAM,CAAC,QAAQ;EAEf,MAAM,mEAAyC,QAAQ,MAD3C,GAAG,YAAY,KAAK,WAAW,KAAK,QAAQ,UACS;EACjE,MAAM,cAAc,OAAO,UAAU,WAAW,OAAO,SAAgC;EACvF,MAAM,QACJ,CAAC,YAAY,OAAO,UAAU,WAC1B,aAAa,SAAS,QACtB,YAAY;AAElB,MAAI,eACF,QACE,2CAAC;GAAI,wCAAc,mDAAmD,eAAe;aAClF,eAAe,OAAO,QAAQ;IAC3B;AAIV,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,2CAAC;GAAI,wCAAc,mDAAmD,eAAe;aAAG;IAAY;IAC1G;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,UAAU,CAAC,SAAS,OACvB,QAAO;CAGT,MAAM,YAAY,QAAQ,WAAW,KAAK,cAAc;AAExD,QACE,4CAAC;EACM;EACL,wCACE,oJACA,UACD;EACD,OAAO,EAAE,QAAQ,MAAM;aAEtB,CAAC,YAAY,eAAe,MAC7B,2CAAC;GAAI,WAAU;aACZ,QAAQ,KAAK,MAAM,UAAU;IAE5B,MAAM,mEAAyC,QAAQ,MAD3C,GAAG,WAAW,KAAK,QAAQ,KAAK,WAAW,UACU;IACjE,MAAM,iBAAiB,SAAS,KAAK,QAAQ,QAAQ,KAAK;AAE1D,WACE,2CAAC;KAEC,wCACE,uGACA,cAAc,SAAS,eACxB;eAEA,aAAa,KAAK,UAAU,UAAa,KAAK,OAC7C,UAAU,KAAK,OAAO,KAAK,MAAM,MAAM,OAAO,KAAK,QAAQ,GAE3D,qFACG,YAAY,OACX,2CAAC,WAAW,SAAO,GAEnB,CAAC,iBACC,2CAAC;MACC,wCACE,yBACA;OACE,gCAAgC,cAAc;OAC9C,qBAAqB,cAAc;OACnC,iEACE,cAAc;OAChB,UAAU,aAAa,cAAc;OACtC,CACF;MACD,OACE;OACE,cAAc;OACd,kBAAkB;OAClB,iBAAiB,cAAc,QAAQ,iBAAiB;OACzD;OAEH,EAGN,4CAAC;MACC,wCACE,4CACA,YAAY,cAAc,eAC3B;iBAED,4CAAC;OAAI,WAAU;kBACZ,YAAY,eAAe,MAC5B,2CAAC;QAAK,WAAU;kBACb,YAAY,SAAS,KAAK;SACtB;QACH,EACL,KAAK,SAAS,QACb,2CAAC;OAAK,WAAU;iBACb,OAAO,KAAK,UAAU,WAAW,KAAK,MAAM,gBAAgB,GAAG,KAAK;QAChE;OAEL,IACL;OArDA,KAAK,QAuDN;KAER;IACE;GACF;EAGX;AACD,0BAA0B,cAAc"}

package/dist/components/cursor-blast-effect.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/cursor-blast-effect.d.ts
+type CursorBlastEffectProps = {
+  /** Lifetime of each blast animation in ms. Default: 720 */blastLifetimeMs?: number; /** Maximum number of concurrent active blasts. Default: 18 */
+  maxActiveBlasts?: number; /** Minimum rapid clicks in the time window to trigger a blast. Default: 3 */
+  rageClickThreshold?: number; /** Time window (ms) for counting rage clicks. Default: 600 */
+  rageClickWindowMs?: number; /** Max distance (px) between clicks to count as same-spot rage clicking. Default: 60 */
+  rageClickRadiusPx?: number;
+  /**
+   * When provided, the blast effect is scoped to this container element.
+   * Clicks are only detected within the container and blasts are positioned
+   * relative to the container rather than the viewport.
+   */
+  containerRef?: React.RefObject<HTMLElement | null>;
+};
+declare function CursorBlastEffect({
+  blastLifetimeMs,
+  maxActiveBlasts,
+  rageClickThreshold,
+  rageClickWindowMs,
+  rageClickRadiusPx,
+  containerRef
+}?: CursorBlastEffectProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { CursorBlastEffect, CursorBlastEffectProps };
+//# sourceMappingURL=cursor-blast-effect.d.ts.map

package/dist/components/cursor-blast-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cursor-blast-effect.d.ts","names":[],"sources":["../../src/components/cursor-blast-effect.tsx"],"mappings":";;;KA6BY,sBAAA;6DAEV,eAAA,WAFU;EAIV,eAAA;EAEA,kBAAA,WAJA;EAMA,iBAAA,WAFA;EAIA,iBAAA;EAAA;;;;;EAMA,YAAA,GAAe,KAAA,CAAM,SAAA,CAAU,WAAA;AAAA;AAAA,iBAGjB,iBAAA,CAAA;EACd,eAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EACA,iBAAA;EACA;AAAA,IACC,sBAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}