@fanvue/ui 1.18.2 → 1.20.0

package/dist/cjs/components/Chart/ChartCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCard.cjs","sources":["../../../../src/components/Chart/ChartCard.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Card } from \"../Card/Card\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Skeleton } from \"../Skeleton/Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../Tooltip/Tooltip\";\n\n/** Props for {@link ChartCard}. */\nexport interface ChartCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Card title text. Pass translated string for i18n. */\n  title: React.ReactNode;\n  /** Large subtitle value (e.g. formatted price or count). */\n  subtitle?: React.ReactNode;\n  /** Tooltip text shown next to the title. Pass translated string for i18n. */\n  tooltip?: React.ReactNode;\n  /** Accessible label for the info tooltip trigger. Override for i18n. @default \"More info\" */\n  tooltipAriaLabel?: string;\n  /** Date range or period label shown below the subtitle. */\n  dateInfo?: React.ReactNode;\n  /** Trend indicator chip config. */\n  trendChip?: {\n    /** Display label (e.g. \"12.5%\"). */\n    label: React.ReactNode;\n    /** Whether the trend is positive (green) or negative (red). */\n    trend: \"positive\" | \"negative\";\n  };\n  /** Show loading skeleton instead of content. @default false */\n  loading?: boolean;\n  /** Chart content rendered below the header. */\n  children?: React.ReactNode;\n}\n\nconst TREND_CLASSES: Record<\"positive\" | \"negative\", string> = {\n  positive: \"bg-success-background text-success-default\",\n  negative: \"bg-error-background text-error-default\",\n};\n\n/**\n * Wraps any chart with a structured header containing title, subtitle,\n * optional trend chip, date range label, info tooltip, and a loading\n * skeleton state.\n *\n * @example\n * ```tsx\n * <ChartCard\n *   title=\"Revenue\"\n *   subtitle=\"$4,523\"\n *   trendChip={{ label: \"+12.5%\", trend: \"positive\" }}\n *   dateInfo=\"Jan 1 – Mar 17\"\n *   tooltip=\"Total revenue for the selected period.\"\n * >\n *   <MyLineChart />\n * </ChartCard>\n * ```\n */\nexport const ChartCard = React.forwardRef<HTMLDivElement, ChartCardProps>(\n  (\n    {\n      className,\n      title,\n      subtitle,\n      tooltip,\n      tooltipAriaLabel = \"More info\",\n      dateInfo,\n      trendChip,\n      loading = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Card ref={ref} variant=\"outlined\" noPadding className={className} {...props}>\n        <div className=\"flex flex-col gap-2 p-4\">\n          {loading ? (\n            <>\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-4 w-32\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-7 w-44\" />\n              <Skeleton animation=\"wave\" variant=\"rounded\" className=\"h-3 w-24\" />\n            </>\n          ) : (\n            <>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"typography-semibold-body-md text-foreground-default\">{title}</span>\n                {tooltip && (\n                  <TooltipProvider>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <IconButton\n                          variant=\"tertiary\"\n                          size=\"24\"\n                          aria-label={tooltipAriaLabel}\n                          icon={<InfoCircleIcon className=\"size-4 text-foreground-tertiary\" />}\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent>{tooltip}</TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                )}\n              </div>\n              {subtitle && (\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"typography-bold-heading-sm text-foreground-default\">\n                    {subtitle}\n                  </span>\n                  {trendChip && (\n                    <span\n                      className={cn(\n                        \"typography-semibold-body-sm rounded-full px-2 py-0.5\",\n                        TREND_CLASSES[trendChip.trend],\n                      )}\n                    >\n                      {trendChip.label}\n                    </span>\n                  )}\n                </div>\n              )}\n              {dateInfo && (\n                <span className=\"typography-regular-body-sm text-foreground-tertiary\">\n                  {dateInfo}\n                </span>\n              )}\n            </>\n          )}\n          <div className=\"mt-auto\">{children}</div>\n        </div>\n      </Card>\n    );\n  },\n);\nChartCard.displayName = \"ChartCard\";\n"],"names":["React","jsx","Card","jsxs","Fragment","Skeleton","TooltipProvider","Tooltip","TooltipTrigger","IconButton","InfoCircleIcon","TooltipContent","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAyD;AAAA,EAC7D,UAAU;AAAA,EACV,UAAU;AACZ;AAoBO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,KAAU,SAAQ,YAAW,WAAS,MAAC,WAAuB,GAAG,OACrE,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAA,UACCA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,QAAAH,+BAACI,SAAAA,YAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,YAAW;AAAA,uCACjEA,SAAAA,UAAA,EAAS,WAAU,QAAO,SAAQ,WAAU,WAAU,WAAA,CAAW;AAAA,MAAA,EAAA,CACpE,IAEAF,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uDAAuD,UAAA,OAAM;AAAA,UAC5E,WACCA,2BAAAA,IAACK,yBAAA,EACC,UAAAH,gCAACI,QAAAA,SAAA,EACC,UAAA;AAAA,YAAAN,2BAAAA,IAACO,QAAAA,gBAAA,EAAe,SAAO,MACrB,UAAAP,2BAAAA;AAAAA,cAACQ,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,MAAMR,2BAAAA,IAACS,eAAAA,gBAAA,EAAe,WAAU,kCAAA,CAAkC;AAAA,cAAA;AAAA,YAAA,GAEtE;AAAA,YACAT,2BAAAA,IAACU,QAAAA,kBAAgB,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC3B,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACC,YACCR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,sDACb,UAAA,UACH;AAAA,UACC,aACCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWW,GAAAA;AAAAA,gBACT;AAAA,gBACA,cAAc,UAAU,KAAK;AAAA,cAAA;AAAA,cAG9B,UAAA,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb,GAEJ;AAAA,QAED,YACCX,2BAAAA,IAAC,QAAA,EAAK,WAAU,uDACb,UAAA,SAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEFA,2BAAAA,IAAC,OAAA,EAAI,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,EAAA,CACrC,EAAA,CACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;"}

package/dist/cjs/components/Chart/ChartCenterLabel.cjs

@@ -0,0 +1,51 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartCenterLabel = React__namespace.forwardRef(
+  ({
+    viewBox,
+    value,
+    subtitle,
+    valueClassName = "fill-foreground-default font-bold text-3xl",
+    ...props
+  }, ref) => {
+    if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "text",
+      {
+        ref,
+        x: viewBox.cx,
+        y: viewBox.cy,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: viewBox.cx, y: viewBox.cy, className: valueClassName, children: value }),
+          /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: viewBox.cx, y: (viewBox.cy || 0) + 24, className: "fill-foreground-tertiary", children: subtitle })
+        ]
+      }
+    );
+  }
+);
+ChartCenterLabel.displayName = "ChartCenterLabel";
+exports.ChartCenterLabel = ChartCenterLabel;
+//# sourceMappingURL=ChartCenterLabel.cjs.map

package/dist/cjs/components/Chart/ChartCenterLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCenterLabel.cjs","sources":["../../../../src/components/Chart/ChartCenterLabel.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/** Props for {@link ChartCenterLabel}. */\nexport interface ChartCenterLabelProps\n  extends Omit<React.SVGAttributes<SVGTextElement>, \"viewBox\"> {\n  /** Recharts viewBox with center coordinates. */\n  viewBox?: { cx?: number; cy?: number; [key: string]: unknown };\n  /** Primary value displayed in the center. */\n  value: React.ReactNode;\n  /** Secondary text below the value. */\n  subtitle: React.ReactNode;\n  /** Custom className for the value tspan. @default \"fill-foreground-default font-bold text-3xl\" */\n  valueClassName?: string;\n}\n\n/**\n * Centered label for radial/pie charts, rendered inside a Recharts `<Label>`.\n *\n * @example\n * ```tsx\n * <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n *   <Label content={({ viewBox }) => (\n *     <ChartCenterLabel viewBox={viewBox} value=\"78%\" subtitle=\"Complete\" />\n *   )} />\n * </PolarRadiusAxis>\n * ```\n */\nexport const ChartCenterLabel = React.forwardRef<SVGTextElement, ChartCenterLabelProps>(\n  (\n    {\n      viewBox,\n      value,\n      subtitle,\n      valueClassName = \"fill-foreground-default font-bold text-3xl\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (!viewBox || !(\"cx\" in viewBox) || !(\"cy\" in viewBox)) return null;\n\n    return (\n      <text\n        ref={ref}\n        x={viewBox.cx}\n        y={viewBox.cy}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        {...props}\n      >\n        <tspan x={viewBox.cx} y={viewBox.cy} className={valueClassName}>\n          {value}\n        </tspan>\n        <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-foreground-tertiary\">\n          {subtitle}\n        </tspan>\n      </text>\n    );\n  },\n);\n\nChartCenterLabel.displayName = \"ChartCenterLabel\";\n"],"names":["React","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,WAAW,EAAE,QAAQ,YAAY,EAAE,QAAQ,SAAU,QAAO;AAEjE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,GAAG,QAAQ;AAAA,QACX,GAAG,QAAQ;AAAA,QACX,YAAW;AAAA,QACX,kBAAiB;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,GAAG,QAAQ,IAAI,WAAW,gBAC7C,UAAA,MAAA,CACH;AAAA,UACAA,2BAAAA,IAAC,SAAA,EAAM,GAAG,QAAQ,IAAI,IAAI,QAAQ,MAAM,KAAK,IAAI,WAAU,4BACxD,UAAA,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,iBAAiB,cAAc;;"}

package/dist/cjs/components/Chart/ChartContainer.cjs

@@ -0,0 +1,64 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const recharts = require("recharts");
+const cn = require("../../utils/cn.cjs");
+const ChartStyle = require("./ChartStyle.cjs");
+const useChart = require("./useChart.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartContainer = React__namespace.forwardRef(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React__namespace.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(useChart.ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "chart",
+        "data-chart": chartId,
+        className: cn.cn(
+          "flex aspect-video justify-center text-xs",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-foreground-tertiary",
+          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-200",
+          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-200",
+          "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-layer]:outline-hidden",
+          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-200",
+          "[&_.recharts-radial-bar-background-sector]:fill-neutral-100",
+          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-100",
+          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-200",
+          "[&_.recharts-sector]:outline-hidden",
+          "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+          "[&_.recharts-surface]:outline-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ChartStyle.ChartStyle, { id: chartId, config }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children })
+        ]
+      }
+    ) });
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+exports.ChartContainer = ChartContainer;
+//# sourceMappingURL=ChartContainer.cjs.map

package/dist/cjs/components/Chart/ChartContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContainer.cjs","sources":["../../../../src/components/Chart/ChartContainer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../../utils/cn\";\nimport { ChartStyle } from \"./ChartStyle\";\nimport type { ChartConfig } from \"./types\";\nimport { ChartContext } from \"./useChart\";\n\n/** Props for {@link ChartContainer}. */\nexport interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Series configuration mapping data keys to labels, colors, and icons. */\n  config: ChartConfig;\n  /**\n   * Recharts chart element(s) to render inside the responsive container.\n   * Typically a single `<AreaChart>`, `<BarChart>`, `<LineChart>`, etc.\n   */\n  children: React.ComponentProps<typeof ResponsiveContainer>[\"children\"];\n}\n\n/**\n * Wraps a Recharts chart with responsive sizing, design-token theming, and\n * accessible config context for tooltips and legends.\n *\n * @example\n * ```tsx\n * <ChartContainer config={chartConfig} className=\"min-h-48\">\n *   <LineChart data={data} accessibilityLayer>\n *     <Line dataKey=\"revenue\" stroke=\"var(--color-revenue)\" />\n *   </LineChart>\n * </ChartContainer>\n * ```\n */\nexport const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...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          ref={ref}\n          data-slot=\"chart\"\n          data-chart={chartId}\n          className={cn(\n            \"flex aspect-video justify-center text-xs\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-foreground-tertiary\",\n            \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-neutral-200\",\n            \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-hidden\",\n            \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-radial-bar-background-sector]:fill-neutral-100\",\n            \"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-neutral-100\",\n            \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-neutral-200\",\n            \"[&_.recharts-sector]:outline-hidden\",\n            \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-surface]:outline-hidden\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={chartId} config={config} />\n          <ResponsiveContainer>{children}</ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    );\n  },\n);\nChartContainer.displayName = \"ChartContainer\";\n"],"names":["React","ChartContext","jsxs","cn","jsx","ChartStyle","ResponsiveContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,IAAI,WAAW,UAAU,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACtD,UAAM,WAAWA,iBAAM,MAAA;AACvB,UAAM,UAAU,SAAS,MAAM,SAAS,QAAQ,MAAM,EAAE,CAAC;AAEzD,0CACGC,SAAAA,aAAa,UAAb,EAAsB,OAAO,EAAE,UAC9B,UAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAACC,WAAAA,YAAA,EAAW,IAAI,SAAS,OAAA,CAAgB;AAAA,UACzCD,+BAACE,SAAAA,uBAAqB,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnC;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;"}

package/dist/cjs/components/Chart/ChartLegend.cjs

@@ -0,0 +1,69 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const recharts = require("recharts");
+const cn = require("../../utils/cn.cjs");
+const chartUtils = require("./chartUtils.cjs");
+const useChart = require("./useChart.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartLegend = recharts.Legend;
+const ChartLegendContent = React__namespace.forwardRef(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart.useChart();
+    if (!payload?.length) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        ),
+        children: chartUtils.filterVisiblePayload(payload).map((item) => {
+          const key = String(nameKey || item.dataKey || "value");
+          const itemConfig = chartUtils.resolveConfigEntry(config, item, key);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground-tertiary",
+              children: [
+                itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: { backgroundColor: item.color }
+                  }
+                ),
+                itemConfig?.label
+              ]
+            },
+            item.value
+          );
+        })
+      }
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegendContent";
+exports.ChartLegend = ChartLegend;
+exports.ChartLegendContent = ChartLegendContent;
+//# sourceMappingURL=ChartLegend.cjs.map

package/dist/cjs/components/Chart/ChartLegend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.cjs","sources":["../../../../src/components/Chart/ChartLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Legend as RechartsLegend } from \"recharts\";\nimport type { LegendPayload } from \"recharts/types/component/DefaultLegendContent\";\nimport { cn } from \"../../utils/cn\";\nimport { filterVisiblePayload, resolveConfigEntry } from \"./chartUtils\";\nimport { useChart } from \"./useChart\";\n\n/** Re-export of Recharts `Legend` — use with `content={<ChartLegendContent />}`. */\nexport const ChartLegend = RechartsLegend;\n\n/** Props for {@link ChartLegendContent}. */\nexport interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend payload data. Passed by Recharts. */\n  payload?: readonly LegendPayload[];\n  /** Vertical alignment — controls padding direction. @default \"bottom\" */\n  verticalAlign?: \"top\" | \"bottom\";\n  /** Hide the color/icon indicator. @default false */\n  hideIcon?: boolean;\n  /** Data key used to resolve the display name from config. */\n  nameKey?: string;\n}\n\n/**\n * Styled legend content for use with `<ChartLegend content={<ChartLegendContent />} />`.\n *\n * Reads chart config from context to resolve labels and icons.\n *\n * @example\n * ```tsx\n * <ChartLegend content={<ChartLegendContent />} />\n * ```\n */\nexport const ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n  ({ className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey }, ref) => {\n    const { config } = useChart();\n\n    if (!payload?.length) return null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className,\n        )}\n      >\n        {filterVisiblePayload(payload).map((item) => {\n          const key = String(nameKey || item.dataKey || \"value\");\n          const itemConfig = resolveConfigEntry(config, item, key);\n\n          return (\n            <div\n              key={item.value}\n              className=\"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground-tertiary\"\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartLegendContent.displayName = \"ChartLegendContent\";\n"],"names":["RechartsLegend","React","useChart","jsx","cn","filterVisiblePayload","resolveConfigEntry","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,SAAAA;AAwBpB,MAAM,qBAAqBC,iBAAM;AAAA,EACtC,CAAC,EAAE,WAAW,WAAW,OAAO,SAAS,gBAAgB,UAAU,QAAA,GAAW,QAAQ;AACpF,UAAM,EAAE,OAAA,IAAWC,kBAAA;AAEnB,QAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,kBAAkB,QAAQ,SAAS;AAAA,UACnC;AAAA,QAAA;AAAA,QAGD,UAAAC,WAAAA,qBAAqB,OAAO,EAAE,IAAI,CAAC,SAAS;AAC3C,gBAAM,MAAM,OAAO,WAAW,KAAK,WAAW,OAAO;AACrD,gBAAM,aAAaC,WAAAA,mBAAmB,QAAQ,MAAM,GAAG;AAEvD,iBACEC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAET,UAAA;AAAA,gBAAA,YAAY,QAAQ,CAAC,0CACnB,WAAW,MAAX,CAAA,CAAgB,IAEjBJ,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,gBAGxC,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAXR,KAAK;AAAA,UAAA;AAAA,QAchB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,mBAAmB,cAAc;;;"}

package/dist/cjs/components/Chart/ChartLoadingOverlay.cjs

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Loader = require("../Loader/Loader.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartLoadingOverlay = React__namespace.forwardRef(
+  ({ loading = false, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("relative", className), ...props, children: [
+      children,
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-surface-container/60", children: /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { show: true, center: true }) })
+    ] });
+  }
+);
+ChartLoadingOverlay.displayName = "ChartLoadingOverlay";
+exports.ChartLoadingOverlay = ChartLoadingOverlay;
+//# sourceMappingURL=ChartLoadingOverlay.cjs.map

package/dist/cjs/components/Chart/ChartLoadingOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLoadingOverlay.cjs","sources":["../../../../src/components/Chart/ChartLoadingOverlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Loader } from \"../Loader/Loader\";\n\n/** Props for {@link ChartLoadingOverlay}. */\nexport interface ChartLoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether to show the loading overlay. @default false */\n  loading?: boolean;\n  /** Chart content to render underneath the overlay. */\n  children: React.ReactNode;\n}\n\n/**\n * A positioned overlay that displays a loading spinner on top of chart content.\n * The children are always rendered to maintain layout dimensions; the overlay\n * covers them with a semi-transparent background and a centered spinner.\n *\n * @example\n * ```tsx\n * <ChartLoadingOverlay loading={isFetching}>\n *   <ChartContainer config={config} className=\"min-h-48\">\n *     <LineChart data={data}>...</LineChart>\n *   </ChartContainer>\n * </ChartLoadingOverlay>\n * ```\n */\nexport const ChartLoadingOverlay = React.forwardRef<HTMLDivElement, ChartLoadingOverlayProps>(\n  ({ loading = false, children, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {children}\n        {loading && (\n          <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-surface-container/60\">\n            <Loader show center />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nChartLoadingOverlay.displayName = \"ChartLoadingOverlay\";\n"],"names":["React","jsxs","cn","jsx","Loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,sBAAsBA,iBAAM;AAAA,EACvC,CAAC,EAAE,UAAU,OAAO,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC3D,WACEC,gCAAC,SAAI,KAAU,WAAWC,MAAG,YAAY,SAAS,GAAI,GAAG,OACtD,UAAA;AAAA,MAAA;AAAA,MACA,WACCC,2BAAAA,IAAC,OAAA,EAAI,WAAU,kFACb,UAAAA,2BAAAA,IAACC,OAAAA,QAAA,EAAO,MAAI,MAAC,QAAM,KAAA,CAAC,EAAA,CACtB;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;;"}

package/dist/cjs/components/Chart/ChartPieLegend.cjs

@@ -0,0 +1,54 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartPieLegend = React__namespace.forwardRef(
+  ({ items, className, ...props }, ref) => {
+    const total = items.reduce((sum, item) => sum + item.value, 0);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex flex-col gap-3", className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        item.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "size-2 shrink-0 rounded-full",
+            style: { backgroundColor: item.color }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm min-w-0 flex-1 truncate text-foreground-secondary", children: item.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-foreground-default tabular-nums", children: item.formattedValue ?? item.value.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-1.5 rounded-full",
+          style: {
+            backgroundColor: item.color,
+            width: total > 0 ? `${item.value / total * 100}%` : "0%"
+          }
+        }
+      )
+    ] }, `${item.color}-${item.value}`)) });
+  }
+);
+ChartPieLegend.displayName = "ChartPieLegend";
+exports.ChartPieLegend = ChartPieLegend;
+//# sourceMappingURL=ChartPieLegend.cjs.map

package/dist/cjs/components/Chart/ChartPieLegend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartPieLegend.cjs","sources":["../../../../src/components/Chart/ChartPieLegend.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single item in a {@link ChartPieLegend}. */\nexport interface ChartPieLegendItem {\n  /** Display label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Numeric value for this slice. Used to calculate the proportional bar width. */\n  value: number;\n  /** Formatted display value (e.g. \"$4,500\"). If omitted, `value.toLocaleString()` is used. */\n  formattedValue?: React.ReactNode;\n  /** Slice color (CSS value). */\n  color: string;\n  /** Optional icon to show instead of the color dot. */\n  icon?: React.ReactNode;\n}\n\n/** Props for {@link ChartPieLegend}. */\nexport interface ChartPieLegendProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Legend items to display. */\n  items: ChartPieLegendItem[];\n}\n\n/**\n * A side legend for pie/donut charts that shows each slice's label,\n * formatted value, and a proportional progress bar.\n *\n * @example\n * ```tsx\n * <ChartPieLegend\n *   items={[\n *     { label: \"Subscriptions\", value: 4500, formattedValue: \"$4,500\", color: \"var(--color-special-chart-teal)\" },\n *     { label: \"Messages\", value: 2100, formattedValue: \"$2,100\", color: \"var(--color-special-chart-sky)\" },\n *     { label: \"Tips\", value: 1200, formattedValue: \"$1,200\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n * />\n * ```\n */\nexport const ChartPieLegend = React.forwardRef<HTMLDivElement, ChartPieLegendProps>(\n  ({ items, className, ...props }, ref) => {\n    const total = items.reduce((sum, item) => sum + item.value, 0);\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-3\", className)} {...props}>\n        {items.map((item) => (\n          <div key={`${item.color}-${item.value}`} className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center gap-2\">\n              {item.icon ?? (\n                <span\n                  className=\"size-2 shrink-0 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n              )}\n              <span className=\"typography-regular-body-sm min-w-0 flex-1 truncate text-foreground-secondary\">\n                {item.label}\n              </span>\n              <span className=\"typography-semibold-body-md text-foreground-default tabular-nums\">\n                {item.formattedValue ?? item.value.toLocaleString()}\n              </span>\n            </div>\n            <div\n              className=\"h-1.5 rounded-full\"\n              style={{\n                backgroundColor: item.color,\n                width: total > 0 ? `${(item.value / total) * 100}%` : \"0%\",\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  },\n);\n\nChartPieLegend.displayName = \"ChartPieLegend\";\n"],"names":["React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,iBAAiBA,iBAAM;AAAA,EAClC,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,UAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,OAAO,CAAC;AAE7D,0CACG,OAAA,EAAI,KAAU,WAAWC,MAAG,uBAAuB,SAAS,GAAI,GAAG,OACjE,gBAAM,IAAI,CAAC,SACVC,2BAAAA,KAAC,OAAA,EAAwC,WAAU,yBACjD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAA,KAAK,QACJC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,UAAM;AAAA,QAAA;AAAA,QAGzCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,gFACb,eAAK,OACR;AAAA,QACAA,2BAAAA,IAAC,UAAK,WAAU,oEACb,eAAK,kBAAkB,KAAK,MAAM,eAAA,EAAe,CACpD;AAAA,MAAA,GACF;AAAA,MACAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,iBAAiB,KAAK;AAAA,YACtB,OAAO,QAAQ,IAAI,GAAI,KAAK,QAAQ,QAAS,GAAG,MAAM;AAAA,UAAA;AAAA,QACxD;AAAA,MAAA;AAAA,IACF,KArBQ,GAAG,KAAK,KAAK,IAAI,KAAK,KAAK,EAsBrC,CACD,GACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;"}

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs

@@ -0,0 +1,65 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartSeriesToggle = React__namespace.forwardRef(
+  ({ className, items, value, onValueChange, ...props }, ref) => {
+    const toggle = (key) => {
+      const next = new Set(value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      onValueChange(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className), ...props, children: items.map((item) => {
+      const isActive = value.has(item.key);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": isActive,
+          className: cn.cn(
+            "typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-foreground-default transition-opacity hover:opacity-100",
+            isActive ? "border-neutral-200 bg-surface-container" : "border-transparent bg-transparent opacity-50"
+          ),
+          onClick: () => toggle(item.key),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "size-2 shrink-0 rounded-full",
+                style: { backgroundColor: item.color }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+          ]
+        },
+        item.key
+      );
+    }) });
+  }
+);
+ChartSeriesToggle.displayName = "ChartSeriesToggle";
+exports.ChartSeriesToggle = ChartSeriesToggle;
+//# sourceMappingURL=ChartSeriesToggle.cjs.map

package/dist/cjs/components/Chart/ChartSeriesToggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSeriesToggle.cjs","sources":["../../../../src/components/Chart/ChartSeriesToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** A single toggleable series in a {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleItem {\n  /** Unique key matching the data series key and ChartConfig key. */\n  key: string;\n  /** Human-readable label. Pass translated string for i18n. */\n  label: React.ReactNode;\n  /** Series color (CSS value). Shown as indicator dot. */\n  color: string;\n}\n\n/** Props for {@link ChartSeriesToggle}. */\nexport interface ChartSeriesToggleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Available series that can be toggled. */\n  items: ChartSeriesToggleItem[];\n  /** Set of currently visible series keys. */\n  value: Set<string>;\n  /** Called when a series is toggled. Receives the updated Set. */\n  onValueChange: (value: Set<string>) => void;\n}\n\n/**\n * Renders a grid of toggleable chips that control which series are visible\n * on a multi-series chart. Each toggle shows a color indicator dot and a label.\n *\n * @example\n * ```tsx\n * const [visible, setVisible] = useState(new Set([\"subscription\", \"message\", \"tip\"]));\n *\n * <ChartSeriesToggle\n *   items={[\n *     { key: \"subscription\", label: \"Subscription\", color: \"var(--color-special-chart-teal)\" },\n *     { key: \"message\", label: \"Message\", color: \"var(--color-special-chart-sky)\" },\n *     { key: \"tip\", label: \"Tip\", color: \"var(--color-special-chart-orange)\" },\n *   ]}\n *   value={visible}\n *   onValueChange={setVisible}\n * />\n * ```\n */\nexport const ChartSeriesToggle = React.forwardRef<HTMLDivElement, ChartSeriesToggleProps>(\n  ({ className, items, value, onValueChange, ...props }, ref) => {\n    const toggle = (key: string) => {\n      const next = new Set(value);\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n      onValueChange(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"grid grid-cols-2 gap-2 sm:grid-cols-3\", className)} {...props}>\n        {items.map((item) => {\n          const isActive = value.has(item.key);\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              aria-pressed={isActive}\n              className={cn(\n                \"typography-regular-body-sm flex items-center gap-2 rounded-full border px-3 py-1.5 text-foreground-default transition-opacity hover:opacity-100\",\n                isActive\n                  ? \"border-neutral-200 bg-surface-container\"\n                  : \"border-transparent bg-transparent opacity-50\",\n              )}\n              onClick={() => toggle(item.key)}\n            >\n              <span\n                className=\"size-2 shrink-0 rounded-full\"\n                style={{ backgroundColor: item.color }}\n              />\n              <span>{item.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nChartSeriesToggle.displayName = \"ChartSeriesToggle\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,oBAAoBA,iBAAM;AAAA,EACrC,CAAC,EAAE,WAAW,OAAO,OAAO,eAAe,GAAG,MAAA,GAAS,QAAQ;AAC7D,UAAM,SAAS,CAAC,QAAgB;AAC9B,YAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,UAAI,KAAK,IAAI,GAAG,GAAG;AACjB,aAAK,OAAO,GAAG;AAAA,MACjB,OAAO;AACL,aAAK,IAAI,GAAG;AAAA,MACd;AACA,oBAAc,IAAI;AAAA,IACpB;AAEA,WACEC,2BAAAA,IAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,yCAAyC,SAAS,GAAI,GAAG,OACnF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,WAAW,MAAM,IAAI,KAAK,GAAG;AACnC,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,WAAWD,GAAAA;AAAAA,YACT;AAAA,YACA,WACI,4CACA;AAAA,UAAA;AAAA,UAEN,SAAS,MAAM,OAAO,KAAK,GAAG;AAAA,UAE9B,UAAA;AAAA,YAAAD,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,KAAK,MAAA;AAAA,cAAM;AAAA,YAAA;AAAA,YAEvCA,2BAAAA,IAAC,QAAA,EAAM,UAAA,KAAK,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAfb,KAAK;AAAA,MAAA;AAAA,IAkBhB,CAAC,EAAA,CACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;"}

package/dist/cjs/components/Chart/ChartStyle.cjs

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const chartUtils = require("./chartUtils.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartStyle = React__namespace.memo(function ChartStyle2({ id, config }) {
+  const colorEntries = Object.entries(config).filter(([, entry]) => entry.theme || entry.color);
+  if (colorEntries.length === 0) return null;
+  const css = Object.entries(chartUtils.THEMES).map(([theme, prefix]) => {
+    const vars = colorEntries.map(([key, entry]) => {
+      const color = entry.theme?.[theme] || entry.color;
+      return color ? `  --color-${key}: ${color};` : null;
+    }).filter(Boolean).join("\n");
+    return `${prefix} [data-chart=${id}] {
+${vars}
+}`;
+  }).join("\n");
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { children: css });
+});
+ChartStyle.displayName = "ChartStyle";
+exports.ChartStyle = ChartStyle;
+//# sourceMappingURL=ChartStyle.cjs.map

package/dist/cjs/components/Chart/ChartStyle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartStyle.cjs","sources":["../../../../src/components/Chart/ChartStyle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { THEMES } from \"./chartUtils\";\nimport type { ChartConfig } from \"./types\";\n\n/** Props for the scoped CSS variable injector used by {@link ChartContainer}. */\nexport interface ChartStyleProps {\n  /** Unique identifier scoped to the chart instance. */\n  id: string;\n  /** Chart configuration mapping data keys to colors and themes. */\n  config: ChartConfig;\n}\n\n/**\n * Injects a scoped `<style>` tag that maps each config entry to a\n * `--color-{key}` CSS custom property, with light/dark theme support.\n *\n * Rendered automatically by {@link ChartContainer} — you rarely need this directly.\n */\nexport const ChartStyle = React.memo(function ChartStyle({ id, config }: ChartStyleProps) {\n  const colorEntries = Object.entries(config).filter(([, entry]) => entry.theme || entry.color);\n\n  if (colorEntries.length === 0) return null;\n\n  const css = Object.entries(THEMES)\n    .map(([theme, prefix]) => {\n      const vars = colorEntries\n        .map(([key, entry]) => {\n          const color = entry.theme?.[theme as keyof typeof entry.theme] || entry.color;\n          return color ? `  --color-${key}: ${color};` : null;\n        })\n        .filter(Boolean)\n        .join(\"\\n\");\n      return `${prefix} [data-chart=${id}] {\\n${vars}\\n}`;\n    })\n    .join(\"\\n\");\n\n  return <style>{css}</style>;\n});\n\nChartStyle.displayName = \"ChartStyle\";\n"],"names":["React","ChartStyle","THEMES","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,aAAaA,iBAAM,KAAK,SAASC,YAAW,EAAE,IAAI,UAA2B;AACxF,QAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAA,EAAG,KAAK,MAAM,MAAM,SAAS,MAAM,KAAK;AAE5F,MAAI,aAAa,WAAW,EAAG,QAAO;AAEtC,QAAM,MAAM,OAAO,QAAQC,WAAAA,MAAM,EAC9B,IAAI,CAAC,CAAC,OAAO,MAAM,MAAM;AACxB,UAAM,OAAO,aACV,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACrB,YAAM,QAAQ,MAAM,QAAQ,KAAiC,KAAK,MAAM;AACxE,aAAO,QAAQ,aAAa,GAAG,KAAK,KAAK,MAAM;AAAA,IACjD,CAAC,EACA,OAAO,OAAO,EACd,KAAK,IAAI;AACZ,WAAO,GAAG,MAAM,gBAAgB,EAAE;AAAA,EAAQ,IAAI;AAAA;AAAA,EAChD,CAAC,EACA,KAAK,IAAI;AAEZ,SAAOC,2BAAAA,IAAC,WAAO,UAAA,IAAA,CAAI;AACrB,CAAC;AAED,WAAW,cAAc;;"}

package/dist/cjs/components/Chart/ChartTooltip.cjs

@@ -0,0 +1,147 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const recharts = require("recharts");
+const cn = require("../../utils/cn.cjs");
+const chartUtils = require("./chartUtils.cjs");
+const useChart = require("./useChart.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ChartTooltip = recharts.Tooltip;
+function TooltipRow({
+  item,
+  itemConfig,
+  indicator,
+  indicatorColor,
+  hideIndicator,
+  nestLabel,
+  tooltipLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    itemConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn.cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+          "h-2.5 w-2.5": indicator === "dot",
+          "w-1": indicator === "line",
+          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+          "my-0.5": nestLabel && indicator === "dashed"
+        }),
+        style: {
+          "--color-bg": indicatorColor,
+          "--color-border": indicatorColor
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn(
+          "flex flex-1 justify-between leading-none",
+          nestLabel ? "items-end" : "items-center"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [
+            nestLabel ? tooltipLabel : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-tertiary", children: itemConfig?.label || item.name })
+          ] }),
+          item.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-foreground-default tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+        ]
+      }
+    )
+  ] });
+}
+const ChartTooltipContent = React__namespace.forwardRef(
+  ({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey
+  }, ref) => {
+    const { config } = useChart.useChart();
+    const tooltipLabel = React__namespace.useMemo(() => {
+      if (hideLabel || !payload?.length) return null;
+      const [item] = payload;
+      const key = String(labelKey || item?.dataKey || item?.name || "value");
+      const itemConfig = chartUtils.resolveConfigEntry(config, item, key);
+      const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+      if (labelFormatter && payload) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      }
+      if (!value) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("font-medium", 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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "grid min-w-32 items-start gap-1.5 rounded-lg border border-neutral-200 bg-surface-container px-2.5 py-1.5 text-xs shadow-float",
+          className
+        ),
+        children: [
+          !nestLabel ? tooltipLabel : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1.5", children: chartUtils.filterVisiblePayload(payload).map((item, index) => {
+            const key = String(nameKey || item.dataKey || item.name || "value");
+            const itemConfig = chartUtils.resolveConfigEntry(config, item, key);
+            const indicatorColor = color || item.payload?.fill || item.color;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn.cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-foreground-tertiary",
+                  indicator === "dot" && "items-center"
+                ),
+                children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxRuntime.jsx(
+                  TooltipRow,
+                  {
+                    item,
+                    itemConfig,
+                    indicator,
+                    indicatorColor,
+                    hideIndicator,
+                    nestLabel,
+                    tooltipLabel
+                  }
+                )
+              },
+              `${item.dataKey ?? item.name ?? index}`
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";
+exports.ChartTooltip = ChartTooltip;
+exports.ChartTooltipContent = ChartTooltipContent;
+//# sourceMappingURL=ChartTooltip.cjs.map