@fanvue/ui 1.18.2 → 1.19.0

package/dist/charts.d.ts

@@ -0,0 +1,372 @@
+import { Legend } from 'recharts';
+import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
+import { NameType } from 'recharts/types/component/DefaultTooltipContent';
+import { Payload } from 'recharts/types/component/DefaultTooltipContent';
+import * as React_2 from 'react';
+import { ResponsiveContainer } from 'recharts';
+import { Tooltip } from 'recharts';
+import { ValueType } from 'recharts/types/component/DefaultTooltipContent';
+
+/**
+ * Wraps any chart with a structured header containing title, subtitle,
+ * optional trend chip, date range label, info tooltip, and a loading
+ * skeleton state.
+ *
+ * @example
+ * ```tsx
+ * <ChartCard
+ *   title="Revenue"
+ *   subtitle="$4,523"
+ *   trendChip={{ label: "+12.5%", trend: "positive" }}
+ *   dateInfo="Jan 1 – Mar 17"
+ *   tooltip="Total revenue for the selected period."
+ * >
+ *   <MyLineChart />
+ * </ChartCard>
+ * ```
+ */
+export declare const ChartCard: React_2.ForwardRefExoticComponent<ChartCardProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartCard}. */
+export declare interface ChartCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Card title text. Pass translated string for i18n. */
+    title: React_2.ReactNode;
+    /** Large subtitle value (e.g. formatted price or count). */
+    subtitle?: React_2.ReactNode;
+    /** Tooltip text shown next to the title. Pass translated string for i18n. */
+    tooltip?: React_2.ReactNode;
+    /** Accessible label for the info tooltip trigger. Override for i18n. @default "More info" */
+    tooltipAriaLabel?: string;
+    /** Date range or period label shown below the subtitle. */
+    dateInfo?: React_2.ReactNode;
+    /** Trend indicator chip config. */
+    trendChip?: {
+        /** Display label (e.g. "12.5%"). */
+        label: React_2.ReactNode;
+        /** Whether the trend is positive (green) or negative (red). */
+        trend: "positive" | "negative";
+    };
+    /** Show loading skeleton instead of content. @default false */
+    loading?: boolean;
+    /** Chart content rendered below the header. */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Centered label for radial/pie charts, rendered inside a Recharts `<Label>`.
+ *
+ * @example
+ * ```tsx
+ * <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+ *   <Label content={({ viewBox }) => (
+ *     <ChartCenterLabel viewBox={viewBox} value="78%" subtitle="Complete" />
+ *   )} />
+ * </PolarRadiusAxis>
+ * ```
+ */
+export declare const ChartCenterLabel: React_2.ForwardRefExoticComponent<ChartCenterLabelProps & React_2.RefAttributes<SVGTextElement>>;
+
+/** Props for {@link ChartCenterLabel}. */
+export declare interface ChartCenterLabelProps extends Omit<React_2.SVGAttributes<SVGTextElement>, "viewBox"> {
+    /** Recharts viewBox with center coordinates. */
+    viewBox?: {
+        cx?: number;
+        cy?: number;
+        [key: string]: unknown;
+    };
+    /** Primary value displayed in the center. */
+    value: React_2.ReactNode;
+    /** Secondary text below the value. */
+    subtitle: React_2.ReactNode;
+    /** Custom className for the value tspan. @default "fill-foreground-default font-bold text-3xl" */
+    valueClassName?: string;
+}
+
+/**
+ * Maps data keys to their display configuration (label, color, icon).
+ *
+ * @example
+ * ```ts
+ * const config: ChartConfig = {
+ *   revenue: {
+ *     label: t("chart.revenue"),
+ *     color: "var(--color-special-chart-teal)",
+ *   },
+ *   subscribers: {
+ *     label: t("chart.subscribers"),
+ *     theme: { light: "#2563eb", dark: "#60a5fa" },
+ *   },
+ * };
+ * ```
+ */
+export declare type ChartConfig = Record<string, ChartConfigEntry>;
+
+/**
+ * Configuration for a single data series in a chart.
+ *
+ * Each key in a {@link ChartConfig} record maps to a data key used by Recharts.
+ * Provide a human-readable `label` (supports i18n — pass translated strings)
+ * and either a single `color` or a `theme` map for light/dark mode.
+ */
+export declare type ChartConfigEntry = {
+    /** Human-readable label for this series. Pass a translated string for i18n. */
+    label?: React_2.ReactNode;
+    /** Optional icon component rendered in tooltips and legends. */
+    icon?: React_2.ComponentType;
+    /** Single color for all themes. */
+    color?: string;
+    /** Per-theme color overrides. Takes precedence over `color` when present. */
+    theme?: Record<ChartThemeKey, string>;
+};
+
+/**
+ * Wraps a Recharts chart with responsive sizing, design-token theming, and
+ * accessible config context for tooltips and legends.
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer config={chartConfig} className="min-h-48">
+ *   <LineChart data={data} accessibilityLayer>
+ *     <Line dataKey="revenue" stroke="var(--color-revenue)" />
+ *   </LineChart>
+ * </ChartContainer>
+ * ```
+ */
+export declare const ChartContainer: React_2.ForwardRefExoticComponent<ChartContainerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartContainer}. */
+export declare interface ChartContainerProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Series configuration mapping data keys to labels, colors, and icons. */
+    config: ChartConfig;
+    /**
+     * Recharts chart element(s) to render inside the responsive container.
+     * Typically a single `<AreaChart>`, `<BarChart>`, `<LineChart>`, etc.
+     */
+    children: React_2.ComponentProps<typeof ResponsiveContainer>["children"];
+}
+
+declare type ChartContextValue = {
+    config: ChartConfig;
+};
+
+/** Re-export of Recharts `Legend` — use with `content={<ChartLegendContent />}`. */
+export declare const ChartLegend: typeof Legend;
+
+/**
+ * Styled legend content for use with `<ChartLegend content={<ChartLegendContent />} />`.
+ *
+ * Reads chart config from context to resolve labels and icons.
+ *
+ * @example
+ * ```tsx
+ * <ChartLegend content={<ChartLegendContent />} />
+ * ```
+ */
+export declare const ChartLegendContent: React_2.ForwardRefExoticComponent<ChartLegendContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartLegendContent}. */
+export declare interface ChartLegendContentProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Legend payload data. Passed by Recharts. */
+    payload?: readonly LegendPayload[];
+    /** Vertical alignment — controls padding direction. @default "bottom" */
+    verticalAlign?: "top" | "bottom";
+    /** Hide the color/icon indicator. @default false */
+    hideIcon?: boolean;
+    /** Data key used to resolve the display name from config. */
+    nameKey?: string;
+}
+
+/**
+ * A positioned overlay that displays a loading spinner on top of chart content.
+ * The children are always rendered to maintain layout dimensions; the overlay
+ * covers them with a semi-transparent background and a centered spinner.
+ *
+ * @example
+ * ```tsx
+ * <ChartLoadingOverlay loading={isFetching}>
+ *   <ChartContainer config={config} className="min-h-48">
+ *     <LineChart data={data}>...</LineChart>
+ *   </ChartContainer>
+ * </ChartLoadingOverlay>
+ * ```
+ */
+export declare const ChartLoadingOverlay: React_2.ForwardRefExoticComponent<ChartLoadingOverlayProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartLoadingOverlay}. */
+export declare interface ChartLoadingOverlayProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show the loading overlay. @default false */
+    loading?: boolean;
+    /** Chart content to render underneath the overlay. */
+    children: React_2.ReactNode;
+}
+
+/**
+ * A side legend for pie/donut charts that shows each slice's label,
+ * formatted value, and a proportional progress bar.
+ *
+ * @example
+ * ```tsx
+ * <ChartPieLegend
+ *   items={[
+ *     { label: "Subscriptions", value: 4500, formattedValue: "$4,500", color: "var(--color-special-chart-teal)" },
+ *     { label: "Messages", value: 2100, formattedValue: "$2,100", color: "var(--color-special-chart-sky)" },
+ *     { label: "Tips", value: 1200, formattedValue: "$1,200", color: "var(--color-special-chart-orange)" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ChartPieLegend: React_2.ForwardRefExoticComponent<ChartPieLegendProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** A single item in a {@link ChartPieLegend}. */
+export declare interface ChartPieLegendItem {
+    /** Display label. Pass translated string for i18n. */
+    label: React_2.ReactNode;
+    /** Numeric value for this slice. Used to calculate the proportional bar width. */
+    value: number;
+    /** Formatted display value (e.g. "$4,500"). If omitted, `value.toLocaleString()` is used. */
+    formattedValue?: React_2.ReactNode;
+    /** Slice color (CSS value). */
+    color: string;
+    /** Optional icon to show instead of the color dot. */
+    icon?: React_2.ReactNode;
+}
+
+/** Props for {@link ChartPieLegend}. */
+export declare interface ChartPieLegendProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Legend items to display. */
+    items: ChartPieLegendItem[];
+}
+
+/**
+ * Renders a grid of toggleable chips that control which series are visible
+ * on a multi-series chart. Each toggle shows a color indicator dot and a label.
+ *
+ * @example
+ * ```tsx
+ * const [visible, setVisible] = useState(new Set(["subscription", "message", "tip"]));
+ *
+ * <ChartSeriesToggle
+ *   items={[
+ *     { key: "subscription", label: "Subscription", color: "var(--color-special-chart-teal)" },
+ *     { key: "message", label: "Message", color: "var(--color-special-chart-sky)" },
+ *     { key: "tip", label: "Tip", color: "var(--color-special-chart-orange)" },
+ *   ]}
+ *   value={visible}
+ *   onValueChange={setVisible}
+ * />
+ * ```
+ */
+export declare const ChartSeriesToggle: React_2.ForwardRefExoticComponent<ChartSeriesToggleProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** A single toggleable series in a {@link ChartSeriesToggle}. */
+export declare interface ChartSeriesToggleItem {
+    /** Unique key matching the data series key and ChartConfig key. */
+    key: string;
+    /** Human-readable label. Pass translated string for i18n. */
+    label: React_2.ReactNode;
+    /** Series color (CSS value). Shown as indicator dot. */
+    color: string;
+}
+
+/** Props for {@link ChartSeriesToggle}. */
+export declare interface ChartSeriesToggleProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Available series that can be toggled. */
+    items: ChartSeriesToggleItem[];
+    /** Set of currently visible series keys. */
+    value: Set<string>;
+    /** Called when a series is toggled. Receives the updated Set. */
+    onValueChange: (value: Set<string>) => void;
+}
+
+/**
+ * Injects a scoped `<style>` tag that maps each config entry to a
+ * `--color-{key}` CSS custom property, with light/dark theme support.
+ *
+ * Rendered automatically by {@link ChartContainer} — you rarely need this directly.
+ */
+export declare const ChartStyle: React_2.NamedExoticComponent<ChartStyleProps>;
+
+/** Props for the scoped CSS variable injector used by {@link ChartContainer}. */
+export declare interface ChartStyleProps {
+    /** Unique identifier scoped to the chart instance. */
+    id: string;
+    /** Chart configuration mapping data keys to colors and themes. */
+    config: ChartConfig;
+}
+
+/** Light/dark theme key for chart color resolution. */
+export declare type ChartThemeKey = "light" | "dark";
+
+/** Re-export of Recharts `Tooltip` — use with `content={<ChartTooltipContent />}`. */
+export declare const ChartTooltip: typeof Tooltip;
+
+/**
+ * Styled tooltip content for use with `<ChartTooltip content={<ChartTooltipContent />} />`.
+ *
+ * Reads chart config from context to resolve labels, colors, and icons.
+ * Supports dot/line/dashed indicators. Pass translated `label`s in config for i18n.
+ *
+ * @example
+ * ```tsx
+ * <ChartTooltip
+ *   content={<ChartTooltipContent indicator="line" />}
+ * />
+ * ```
+ */
+export declare const ChartTooltipContent: React_2.ForwardRefExoticComponent<ChartTooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartTooltipContent}. */
+export declare interface ChartTooltipContentProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether the tooltip is currently active/visible. Passed by Recharts. */
+    active?: boolean;
+    /** Tooltip payload data. Passed by Recharts. */
+    payload?: Payload<ValueType, NameType>[];
+    /** Axis label. Passed by Recharts. */
+    label?: string | number;
+    /** Custom label formatter. */
+    labelFormatter?: (label: string | number, payload: Payload<ValueType, NameType>[]) => React_2.ReactNode;
+    /** Custom value formatter. */
+    formatter?: (value: ValueType, name: NameType, item: Payload<ValueType, NameType>, index: number, payload: Payload<ValueType, NameType>[]) => React_2.ReactNode;
+    /** CSS class for the label element. */
+    labelClassName?: string;
+    /** Hide the tooltip header label. @default false */
+    hideLabel?: boolean;
+    /** Hide the color indicator beside each row. @default false */
+    hideIndicator?: boolean;
+    /** Visual style of the color indicator. @default "dot" */
+    indicator?: ChartTooltipIndicator;
+    /**
+     * Data key used to resolve the display name from config.
+     * Useful when the payload `name` differs from the config key.
+     */
+    nameKey?: string;
+    /**
+     * Data key used to resolve the header label from config.
+     * Falls back to the first payload item's `dataKey`.
+     */
+    labelKey?: string;
+    /** Override indicator color for all rows. */
+    color?: string;
+}
+
+/** Indicator shape rendered beside each tooltip row. */
+export declare type ChartTooltipIndicator = "dot" | "line" | "dashed";
+
+/**
+ * Resolves the {@link ChartConfig} entry for a given tooltip/legend payload
+ * item. Recharts wraps the original data point inside `payload.payload` —
+ * this function checks both levels before falling back to a direct `key` lookup.
+ */
+export declare function resolveConfigEntry(config: ChartConfig, payload: unknown, key: string): ChartConfigEntry | undefined;
+
+/** Access the nearest {@link ChartContainer}'s config. Throws if used outside a chart. */
+export declare function useChart(): ChartContextValue;
+
+export { }
+
+
+declare module "vitest" {
+    interface Assertion<T> {
+        toHaveNoViolations(): T;
+    }
+}

package/dist/charts.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { ChartCard } from "./components/Chart/ChartCard.mjs";
+import { ChartCenterLabel } from "./components/Chart/ChartCenterLabel.mjs";
+import { ChartContainer } from "./components/Chart/ChartContainer.mjs";
+import { ChartLegend, ChartLegendContent } from "./components/Chart/ChartLegend.mjs";
+import { ChartLoadingOverlay } from "./components/Chart/ChartLoadingOverlay.mjs";
+import { ChartPieLegend } from "./components/Chart/ChartPieLegend.mjs";
+import { ChartSeriesToggle } from "./components/Chart/ChartSeriesToggle.mjs";
+import { ChartStyle } from "./components/Chart/ChartStyle.mjs";
+import { ChartTooltip, ChartTooltipContent } from "./components/Chart/ChartTooltip.mjs";
+import { resolveConfigEntry } from "./components/Chart/chartUtils.mjs";
+import { useChart } from "./components/Chart/useChart.mjs";
+export {
+  ChartCard,
+  ChartCenterLabel,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartLoadingOverlay,
+  ChartPieLegend,
+  ChartSeriesToggle,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  resolveConfigEntry,
+  useChart
+};
+//# sourceMappingURL=charts.mjs.map

package/dist/charts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/charts.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ChartCard = require("./components/Chart/ChartCard.cjs");
+const ChartCenterLabel = require("./components/Chart/ChartCenterLabel.cjs");
+const ChartContainer = require("./components/Chart/ChartContainer.cjs");
+const ChartLegend = require("./components/Chart/ChartLegend.cjs");
+const ChartLoadingOverlay = require("./components/Chart/ChartLoadingOverlay.cjs");
+const ChartPieLegend = require("./components/Chart/ChartPieLegend.cjs");
+const ChartSeriesToggle = require("./components/Chart/ChartSeriesToggle.cjs");
+const ChartStyle = require("./components/Chart/ChartStyle.cjs");
+const ChartTooltip = require("./components/Chart/ChartTooltip.cjs");
+const chartUtils = require("./components/Chart/chartUtils.cjs");
+const useChart = require("./components/Chart/useChart.cjs");
+exports.ChartCard = ChartCard.ChartCard;
+exports.ChartCenterLabel = ChartCenterLabel.ChartCenterLabel;
+exports.ChartContainer = ChartContainer.ChartContainer;
+exports.ChartLegend = ChartLegend.ChartLegend;
+exports.ChartLegendContent = ChartLegend.ChartLegendContent;
+exports.ChartLoadingOverlay = ChartLoadingOverlay.ChartLoadingOverlay;
+exports.ChartPieLegend = ChartPieLegend.ChartPieLegend;
+exports.ChartSeriesToggle = ChartSeriesToggle.ChartSeriesToggle;
+exports.ChartStyle = ChartStyle.ChartStyle;
+exports.ChartTooltip = ChartTooltip.ChartTooltip;
+exports.ChartTooltipContent = ChartTooltip.ChartTooltipContent;
+exports.resolveConfigEntry = chartUtils.resolveConfigEntry;
+exports.useChart = useChart.useChart;
+//# sourceMappingURL=charts.cjs.map

package/dist/cjs/charts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,88 @@
+"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 Card = require("../Card/Card.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const InfoCircleIcon = require("../Icons/InfoCircleIcon.cjs");
+const Skeleton = require("../Skeleton/Skeleton.cjs");
+const Tooltip = require("../Tooltip/Tooltip.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 TREND_CLASSES = {
+  positive: "bg-success-background text-success-default",
+  negative: "bg-error-background text-error-default"
+};
+const ChartCard = React__namespace.forwardRef(
+  ({
+    className,
+    title,
+    subtitle,
+    tooltip,
+    tooltipAriaLabel = "More info",
+    dateInfo,
+    trendChip,
+    loading = false,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { ref, variant: "outlined", noPadding: true, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+      loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-4 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-7 w-44" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-3 w-24" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-foreground-default", children: title }),
+          tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                variant: "tertiary",
+                size: "24",
+                "aria-label": tooltipAriaLabel,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, { className: "size-4 text-foreground-tertiary" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { children: tooltip })
+          ] }) })
+        ] }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-bold-heading-sm text-foreground-default", children: subtitle }),
+          trendChip && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn.cn(
+                "typography-semibold-body-sm rounded-full px-2 py-0.5",
+                TREND_CLASSES[trendChip.trend]
+              ),
+              children: trendChip.label
+            }
+          )
+        ] }),
+        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-foreground-tertiary", children: dateInfo })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
+    ] }) });
+  }
+);
+ChartCard.displayName = "ChartCard";
+exports.ChartCard = ChartCard;
+//# sourceMappingURL=ChartCard.cjs.map

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