@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/sparkline.js

@@ -1,4 +1,17 @@
-// src/components/ui/sparkline.tsx
+"use client";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "./chunk-NOFXVRWL.js";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/sparkline.tsx
 import {
   Area,
   AreaChart,
@@ -8,328 +21,7 @@ import {
   LineChart,
   XAxis
 } from "recharts";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/chart.tsx
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
-function formatChartValue(value, type) {
-  if (Array.isArray(value)) {
-    return value.join(", ");
-  }
-  if (typeof value !== "number") {
-    return value == null ? "" : String(value);
-  }
-  switch (type) {
-    case "currency":
-      return `\u20A6${value.toLocaleString("en-NG")}`;
-    case "percentage":
-      return `${value.toLocaleString("en-NG", {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1
-      })}%`;
-    default:
-      return value.toLocaleString("en-NG");
-  }
-}
-var THEMES = { light: "", dark: ".dark" };
-var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React.createContext(null);
-function useChart() {
-  const context = React.useContext(ChartContext);
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-  return context;
-}
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx2(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "chart",
-      "data-chart": chartId,
-      className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx2(
-          RechartsPrimitive.ResponsiveContainer,
-          {
-            initialDimension,
-            children
-          }
-        )
-      ]
-    }
-  ) });
-}
-var ChartStyle = ({ id, config }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme ?? config2.color
-  );
-  if (!colorConfig.length) {
-    return null;
-  }
-  const styleContent = 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");
-  return /* @__PURE__ */ jsx2("style", { children: styleContent });
-};
-var ChartTooltip = RechartsPrimitive.Tooltip;
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  formatter,
-  color,
-  nameKey,
-  valueType = "number",
-  size = "md"
-}) {
-  const { config } = useChart();
-  if (!active || !payload?.length) {
-    return null;
-  }
-  const [item] = payload.filter((entry) => entry.type !== "none");
-  if (!item) {
-    return null;
-  }
-  const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
-  const itemConfig = getPayloadConfigFromPayload(config, item, key);
-  const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
-  const metricLabel = itemConfig?.label ?? item.name;
-  const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
-  const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
-  return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
-    metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
-      !hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn(chartTooltipDotVariants({ size })),
-          style: { backgroundColor: dotColor }
-        }
-      )),
-      /* @__PURE__ */ jsx2("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
-    ] }),
-    /* @__PURE__ */ jsx2("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
-    periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx2("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
-  ] });
-}
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
-});
-function getPayloadConfigFromPayload(config, payload, key) {
-  if (typeof payload !== "object" || payload === null) {
-    return void 0;
-  }
-  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];
-}
-
-// src/components/ui/sparkline.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SPARKLINE_LAYOUT = {
   sm: {
     width: 72,
@@ -385,7 +77,7 @@ function SparklineEndDot({
   if (cx == null || cy == null || index !== lastIndex) {
     return null;
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "circle",
     {
       cx,
@@ -412,8 +104,8 @@ function SparklineBarShape({
     return null;
   }
   const markerY = typeof value === "number" && value < 0 ? y + height : y;
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
       "rect",
       {
         x,
@@ -425,7 +117,7 @@ function SparklineBarShape({
         fill: "var(--color-value)"
       }
     ),
-    index === lastIndex ? /* @__PURE__ */ jsx3(
+    index === lastIndex ? /* @__PURE__ */ jsx(
       "circle",
       {
         cx: x + width / 2,
@@ -464,8 +156,8 @@ function Sparkline({
     value: { label, color }
   };
   const showDot = showMarker && data.length >= 2;
-  const endDot = showDot ? /* @__PURE__ */ jsx3(SparklineEndDot, { lastIndex, radius: layout.dotRadius }) : false;
-  const barShape = showDot ? /* @__PURE__ */ jsx3(
+  const endDot = showDot ? /* @__PURE__ */ jsx(SparklineEndDot, { lastIndex, radius: layout.dotRadius }) : false;
+  const barShape = showDot ? /* @__PURE__ */ jsx(
     SparklineBarShape,
     {
       lastIndex,
@@ -479,16 +171,16 @@ function Sparkline({
     stroke: "var(--color-surface)",
     strokeWidth: 2
   } : false;
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx3(
+  const tooltipNode = tooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       cursor: false,
-      content: /* @__PURE__ */ jsx3(ChartTooltipContent, { size: "xs", valueType })
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { size: "xs", valueType })
     }
   ) : null;
   const ariaLabel = props["aria-label"] ?? `${label} sparkline, trend ${resolvedTrend}`;
   if (data.length < 2) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ...props,
@@ -499,7 +191,7 @@ function Sparkline({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     ChartContainer,
     {
       ...props,
@@ -508,9 +200,9 @@ function Sparkline({
       config,
       className: cn("aspect-auto w-full", className),
       style: { height: layout.height, ...style },
-      children: type === "bar" ? /* @__PURE__ */ jsxs2(BarChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
+      children: type === "bar" ? /* @__PURE__ */ jsxs(BarChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
         tooltipNode,
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx(
           Bar,
           {
             dataKey: "value",
@@ -521,10 +213,10 @@ function Sparkline({
             isAnimationActive: false
           }
         )
-      ] }) : type === "area" ? /* @__PURE__ */ jsxs2(AreaChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx3(XAxis, { dataKey: "x", hide: true }) : null,
+      ] }) : type === "area" ? /* @__PURE__ */ jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
+        tooltip ? /* @__PURE__ */ jsx(XAxis, { dataKey: "x", hide: true }) : null,
         tooltipNode,
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx(
           Area,
           {
             type: "monotone",
@@ -540,10 +232,10 @@ function Sparkline({
             isAnimationActive: false
           }
         )
-      ] }) : /* @__PURE__ */ jsxs2(LineChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx3(XAxis, { dataKey: "x", hide: true }) : null,
+      ] }) : /* @__PURE__ */ jsxs(LineChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
+        tooltip ? /* @__PURE__ */ jsx(XAxis, { dataKey: "x", hide: true }) : null,
         tooltipNode,
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx(
           Line,
           {
             type: "monotone",

package/dist/sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ui/sparkline.tsx","../src/lib/cn.ts","../src/components/ui/chart.tsx","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tArea,\n\tAreaChart,\n\tBar,\n\tBarChart,\n\tLine,\n\tLineChart,\n\tXAxis,\n} from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartValueType,\n} from \"./chart\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Small inline trend lines for KPI cards and dense tables — no axes, no\n * gridlines. Composed from recharts plot primitives (`Line`/`Area`/`Bar`) so it\n * shares one charting engine with `line-chart`/`bar-chart` and gets hover\n * tooltips for free via the shared `ChartTooltip`/`ChartTooltipContent`.\n *\n * Sizing follows the same convention as the other charts: `size` sets the height\n * (plus stroke/dot scale) and the width is parent-driven — the component is\n * `w-full`, so constrain it with a wrapper (the SPARKLINE_LAYOUT widths are the\n * recommended container sizes) or let it fill a KPI card.\n *\n * Sentiment colour is driven by the data direction — `status-success` for an\n * upward series, `status-danger` for downward, `text-secondary` for flat — and\n * can be overridden with `trend`. The area fill reuses the line colour at 14 %.\n *\n * Tokens:\n * - Stroke / fill — up: `var(--color-status-success)`, down:\n *   `var(--color-status-danger)`, flat: `var(--color-fg-secondary)` (fed through\n *   `ChartConfig` as `--color-value`)\n * - Area fill: the same colour at `0.14` opacity\n * - End-point dot ring: `var(--color-surface)` (separates the dot from the line)\n *\n * @example\n * // KPI card trend — colour follows the metric's sentiment automatically\n * <Sparkline data={[40, 44, 42, 55, 58, 62, 70]} type=\"area\" />\n *\n * @example\n * // Interactive — hover tooltip with currency formatting and month captions\n * <Sparkline data={values} tooltip label=\"Revenue\" valueType=\"currency\" labels={months} />\n *\n * @example\n * // Dense table cell — fixed-width wrapper, bar render, no marker\n * <span className=\"inline-block w-[72px]\">\n *   <Sparkline data={values} type=\"bar\" size=\"sm\" showMarker={false} />\n * </span>\n */\n\n/** Sparkline sizes line up with the three shared `ComponentSize` values. */\ntype SparklineSize = ComponentSize;\n\n/** Render style for the series. */\ntype SparklineType = \"line\" | \"bar\" | \"area\";\n\n/** Sentiment of the series — drives the stroke/fill colour. */\ntype SparklineTrend = \"up\" | \"down\" | \"flat\";\n\ntype SparklineLayout = {\n\t/** Recommended container width in px (width is parent-driven). */\n\twidth: number;\n\t/** Plot height in px. */\n\theight: number;\n\t/** Line/area stroke width in px. */\n\tstrokeWidth: number;\n\t/** Radius of the end-point dot. */\n\tdotRadius: number;\n\t/** Outer margin — keeps the stroke, peaks, and end dot from clipping. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Corner radius for bars. */\n\tbarRadius: number;\n\t/** Cap on bar thickness so stretched sparklines keep thin bars. */\n\tmaxBarSize: number;\n};\n\nconst SPARKLINE_LAYOUT: Record<SparklineSize, SparklineLayout> = {\n\tsm: {\n\t\twidth: 72,\n\t\theight: 24,\n\t\tstrokeWidth: 1.5,\n\t\tdotRadius: 2,\n\t\tmargin: { top: 4, right: 4, bottom: 2, left: 2 },\n\t\tbarRadius: 1,\n\t\tmaxBarSize: 6,\n\t},\n\tmd: {\n\t\twidth: 104,\n\t\theight: 32,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 2.5,\n\t\tmargin: { top: 5, right: 5, bottom: 2, left: 2 },\n\t\tbarRadius: 2,\n\t\tmaxBarSize: 8,\n\t},\n\tlg: {\n\t\twidth: 144,\n\t\theight: 44,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3,\n\t\tmargin: { top: 6, right: 6, bottom: 3, left: 3 },\n\t\tbarRadius: 2,\n\t\tmaxBarSize: 10,\n\t},\n};\n\nconst TREND_COLOR: Record<SparklineTrend, string> = {\n\tup: \"var(--color-status-success)\",\n\tdown: \"var(--color-status-danger)\",\n\tflat: \"var(--color-fg-secondary)\",\n};\n\n/**\n * Derive sentiment from the series: compare the last value to the first and\n * read flat when the change is a small fraction of the overall range.\n */\nfunction resolveTrend(data: number[]): SparklineTrend {\n\tif (data.length < 2) return \"flat\";\n\tconst first = data[0];\n\tconst last = data[data.length - 1];\n\tconst min = Math.min(...data);\n\tconst max = Math.max(...data);\n\tconst range = max - min || 1;\n\tconst delta = last - first;\n\tif (Math.abs(delta) / range < 0.05) return \"flat\";\n\treturn delta > 0 ? \"up\" : \"down\";\n}\n\n/**\n * Custom dot passed to recharts as `dot={<SparklineEndDot ... />}`. recharts\n * clones it for every point, injecting `cx`/`cy`/`index`; we only paint the\n * latest point so the series carries a single end-point marker.\n */\nfunction SparklineEndDot({\n\tcx,\n\tcy,\n\tindex,\n\tlastIndex,\n\tradius,\n}: {\n\tcx?: number;\n\tcy?: number;\n\tindex?: number;\n\tlastIndex?: number;\n\tradius?: number;\n}) {\n\tif (cx == null || cy == null || index !== lastIndex) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<circle\n\t\t\tcx={cx}\n\t\t\tcy={cy}\n\t\t\tr={radius}\n\t\t\tfill=\"var(--color-value)\"\n\t\t\tstroke=\"var(--color-surface)\"\n\t\t\tstrokeWidth={2}\n\t\t/>\n\t);\n}\n\n/**\n * Bars do not support `dot`, so the marker is rendered as part of a custom bar\n * shape. Only the latest bar receives the end-point marker.\n */\nfunction SparklineBarShape({\n\tx,\n\ty,\n\twidth,\n\theight,\n\tindex,\n\tvalue,\n\tlastIndex,\n\tradius,\n\tdotRadius,\n}: {\n\tx?: number;\n\ty?: number;\n\twidth?: number;\n\theight?: number;\n\tindex?: number;\n\tvalue?: number;\n\tlastIndex?: number;\n\tradius: number;\n\tdotRadius: number;\n}) {\n\tif (x == null || y == null || width == null || height == null) {\n\t\treturn null;\n\t}\n\n\tconst markerY = typeof value === \"number\" && value < 0 ? y + height : y;\n\n\treturn (\n\t\t<g>\n\t\t\t<rect\n\t\t\t\tx={x}\n\t\t\t\ty={y}\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\trx={radius}\n\t\t\t\try={radius}\n\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t/>\n\t\t\t{index === lastIndex ? (\n\t\t\t\t<circle\n\t\t\t\t\tcx={x + width / 2}\n\t\t\t\t\tcy={markerY}\n\t\t\t\t\tr={dotRadius}\n\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\tstroke=\"var(--color-surface)\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</g>\n\t);\n}\n\ntype SparklineDatum = { x: string; value: number };\n\ntype SparklineProps = Omit<\n\tReact.ComponentProps<typeof ChartContainer>,\n\t\"config\" | \"children\"\n> & {\n\t/** The series to plot. Needs at least two points to draw a trend. */\n\tdata: number[];\n\t/** Render style. Defaults to `line`. */\n\ttype?: SparklineType;\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: SparklineSize;\n\t/** Override the auto-detected sentiment colour. */\n\ttrend?: SparklineTrend;\n\t/** Show the filled marker on the latest value. Default true. */\n\tshowMarker?: boolean;\n\t/** Enable the hover tooltip. Default false. */\n\ttooltip?: boolean;\n\t/** Series name shown in the tooltip, e.g. \"Revenue\". */\n\tlabel?: string;\n\t/** Per-point captions for the tooltip (e.g. months). Indexed by data point. */\n\tlabels?: string[];\n\t/** Value formatting for the tooltip. Defaults to `number`. */\n\tvalueType?: ChartValueType;\n};\n\nfunction Sparkline({\n\tdata,\n\ttype = \"line\",\n\tsize,\n\ttrend,\n\tshowMarker = true,\n\ttooltip = false,\n\tlabel = \"Value\",\n\tlabels,\n\tvalueType = \"number\",\n\tclassName,\n\tstyle,\n\t...props\n}: SparklineProps) {\n\tconst layout = SPARKLINE_LAYOUT[useComponentSize(size)];\n\tconst resolvedTrend = trend ?? resolveTrend(data);\n\tconst color = TREND_COLOR[resolvedTrend];\n\n\tconst chartData: SparklineDatum[] = data.map((value, i) => ({\n\t\tx: labels?.[i] ?? `${i + 1}`,\n\t\tvalue,\n\t}));\n\tconst lastIndex = data.length - 1;\n\n\tconst config = {\n\t\tvalue: { label, color },\n\t} satisfies ChartConfig;\n\n\tconst showDot = showMarker && data.length >= 2;\n\tconst endDot = showDot ? (\n\t\t<SparklineEndDot lastIndex={lastIndex} radius={layout.dotRadius} />\n\t) : (\n\t\tfalse\n\t);\n\tconst barShape = showDot ? (\n\t\t<SparklineBarShape\n\t\t\tlastIndex={lastIndex}\n\t\t\tradius={layout.barRadius}\n\t\t\tdotRadius={layout.dotRadius}\n\t\t/>\n\t) : undefined;\n\tconst activeDot = tooltip\n\t\t? {\n\t\t\t\tr: layout.dotRadius + 0.5,\n\t\t\t\tfill: \"var(--color-value)\",\n\t\t\t\tstroke: \"var(--color-surface)\",\n\t\t\t\tstrokeWidth: 2,\n\t\t\t}\n\t\t: false;\n\n\tconst tooltipNode = tooltip ? (\n\t\t<ChartTooltip\n\t\t\tcursor={false}\n\t\t\tcontent={<ChartTooltipContent size=\"xs\" valueType={valueType} />}\n\t\t/>\n\t) : null;\n\n\tconst ariaLabel =\n\t\t(props[\"aria-label\"] as string | undefined) ??\n\t\t`${label} sparkline, trend ${resolvedTrend}`;\n\n\tif (data.length < 2) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\trole=\"img\"\n\t\t\t\tclassName={cn(\"w-full\", className)}\n\t\t\t\tstyle={{ height: layout.height, ...style }}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ChartContainer\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\trole=\"img\"\n\t\t\tconfig={config}\n\t\t\tclassName={cn(\"aspect-auto w-full\", className)}\n\t\t\tstyle={{ height: layout.height, ...style }}\n\t\t>\n\t\t\t{type === \"bar\" ? (\n\t\t\t\t<BarChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Bar\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\t\tradius={layout.barRadius}\n\t\t\t\t\t\tmaxBarSize={layout.maxBarSize}\n\t\t\t\t\t\tshape={barShape}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</BarChart>\n\t\t\t) : type === \"area\" ? (\n\t\t\t\t<AreaChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltip ? <XAxis dataKey=\"x\" hide /> : null}\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Area\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tstroke=\"var(--color-value)\"\n\t\t\t\t\t\tstrokeWidth={layout.strokeWidth}\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\t\tfillOpacity={0.14}\n\t\t\t\t\t\tdot={endDot}\n\t\t\t\t\t\tactiveDot={activeDot}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</AreaChart>\n\t\t\t) : (\n\t\t\t\t<LineChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltip ? <XAxis dataKey=\"x\" hide /> : null}\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Line\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tstroke=\"var(--color-value)\"\n\t\t\t\t\t\tstrokeWidth={layout.strokeWidth}\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tdot={endDot}\n\t\t\t\t\t\tactiveDot={activeDot}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</LineChart>\n\t\t\t)}\n\t\t</ChartContainer>\n\t);\n}\n\nexport { Sparkline, SPARKLINE_LAYOUT };\nexport type { SparklineProps, SparklineSize, SparklineTrend, SparklineType };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport type { TooltipValueType } from \"recharts\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../../lib/cn\";\nimport {\n\ttype ComponentSize,\n\tSizeProvider,\n\tuseComponentSize,\n} from \"./size-context\";\n\n/**\n * Markers use `--color-surface-brand` as a placeholder. Giddaa has no\n * categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each\n * series (its legend marker and tooltip dot) to its own colour once they exist.\n * Until then any series without an explicit colour paints brand-green.\n */\nconst SERIES_COLOR_PLACEHOLDER = \"var(--color-surface-brand)\";\n\n/** How a precise value is formatted in the tooltip and which prefix/suffix it carries. */\nexport type ChartValueType = \"number\" | \"percentage\" | \"currency\";\n\nfunction formatChartValue(\n\tvalue: TooltipValueType | undefined,\n\ttype: ChartValueType,\n) {\n\tif (Array.isArray(value)) {\n\t\treturn value.join(\", \");\n\t}\n\n\tif (typeof value !== \"number\") {\n\t\treturn value == null ? \"\" : String(value);\n\t}\n\n\tswitch (type) {\n\t\tcase \"currency\":\n\t\t\treturn `₦${value.toLocaleString(\"en-NG\")}`;\n\t\tcase \"percentage\":\n\t\t\treturn `${value.toLocaleString(\"en-NG\", {\n\t\t\t\tminimumFractionDigits: 1,\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t})}%`;\n\t\tdefault:\n\t\t\treturn value.toLocaleString(\"en-NG\");\n\t}\n}\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n\tstring,\n\t{\n\t\tlabel?: React.ReactNode;\n\t\ticon?: React.ComponentType;\n\t} & (\n\t\t| { color?: string; theme?: never }\n\t\t| { color?: never; theme: Record<keyof typeof THEMES, string> }\n\t)\n>;\n\ntype ChartContextProps = {\n\tconfig: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n\tconst context = React.useContext(ChartContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useChart must be used within a <ChartContainer />\");\n\t}\n\n\treturn context;\n}\n\n/**\n * Shared chart frame — the chrome that surrounds the plot of any chart type\n * (bar, line, area, pie). These are presentational, domain-free, and size-aware:\n * a `size` flows through `SizeProvider` so the plot and its labels can scale\n * with the card. Compose them with the plot primitives:\n *\n * <ChartCard size=\"md\">\n *   <ChartHeader>\n *     <ChartTitle>Revenue Overview</ChartTitle>\n *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>\n *   </ChartHeader>\n *   <ChartContainer config={config}>{/* recharts plot *\\/}</ChartContainer>\n * </ChartCard>\n */\nconst chartCardVariants = cva(\n\t\"flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-3 p-4\",\n\t\t\t\tmd: \"gap-4 p-5\",\n\t\t\t\tlg: \"gap-5 p-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartCard({\n\tclassName,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"section\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<SizeProvider size={resolvedSize}>\n\t\t\t<section\n\t\t\t\tdata-slot=\"chart-card\"\n\t\t\t\tclassName={cn(chartCardVariants({ size: resolvedSize }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</section>\n\t\t</SizeProvider>\n\t);\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"chart-header\"\n\t\t\tclassName={cn(\"flex min-w-0 flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartTitleVariants = cva(\"min-w-0 font-bold text-fg-primary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-md\",\n\t\t\tmd: \"text-gdt-lg\",\n\t\t\tlg: \"text-gdt-h5\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartTitle({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"h3\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<h3\n\t\t\tdata-slot=\"chart-title\"\n\t\t\tclassName={cn(chartTitleVariants({ size: resolvedSize }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst chartDescriptionVariants = cva(\"min-w-0 font-normal text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nfunction ChartDescription({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<\"p\"> & { size?: ComponentSize }) {\n\tconst resolvedSize = useComponentSize(size);\n\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"chart-description\"\n\t\t\tclassName={cn(\n\t\t\t\tchartDescriptionVariants({ size: resolvedSize }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ChartContainer({\n\tid,\n\tclassName,\n\tchildren,\n\tconfig,\n\tinitialDimension = INITIAL_DIMENSION,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tconfig: ChartConfig;\n\tchildren: React.ComponentProps<\n\t\ttypeof RechartsPrimitive.ResponsiveContainer\n\t>[\"children\"];\n\tinitialDimension?: {\n\t\twidth: number;\n\t\theight: number;\n\t};\n}) {\n\tconst uniqueId = React.useId();\n\tconst chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\n\n\treturn (\n\t\t<ChartContext.Provider value={{ config }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"chart\"\n\t\t\t\tdata-chart={chartId}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ChartStyle id={chartId} config={config} />\n\t\t\t\t<RechartsPrimitive.ResponsiveContainer\n\t\t\t\t\tinitialDimension={initialDimension}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</RechartsPrimitive.ResponsiveContainer>\n\t\t\t</div>\n\t\t</ChartContext.Provider>\n\t);\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n\tconst colorConfig = Object.entries(config).filter(\n\t\t([, config]) => config.theme ?? config.color,\n\t);\n\n\tif (!colorConfig.length) {\n\t\treturn null;\n\t}\n\n\tconst styleContent = Object.entries(THEMES)\n\t\t.map(\n\t\t\t([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n\t.map(([key, itemConfig]) => {\n\t\tconst color =\n\t\t\titemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n\t\t\titemConfig.color;\n\t\treturn color ? `  --color-${key}: ${color};` : null;\n\t})\n\t.join(\"\\n\")}\n}\n`,\n\t\t)\n\t\t.join(\"\\n\");\n\n\treturn <style>{styleContent}</style>;\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Hover tooltip for a chart data point. It surfaces a single precise value with\n * type-appropriate formatting — grouped integers, percentages, or ₦-prefixed\n * currency — sitting on an elevated overlay (bg-surface-overlay, Shadow-2,\n * 1px border-subtle) so users can read exact figures without leaving the chart.\n *\n * Anatomy: series dot · metric label · hero value · period caption.\n */\nconst chartTooltipVariants = cva(\n\t\"flex flex-col bg-surface-overlay border border-line-subtle shadow-2\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"gap-0.5 rounded-md p-2\",\n\t\t\t\tsm: \"gap-0.5 rounded-md p-2.5\",\n\t\t\t\tmd: \"gap-1 rounded-lg p-3\",\n\t\t\t\tlg: \"gap-1 rounded-xl p-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\nconst chartTooltipDotVariants = cva(\"shrink-0 rounded-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"size-1.5\",\n\t\t\tsm: \"size-2\",\n\t\t\tmd: \"size-2.5\",\n\t\t\tlg: \"size-2.5\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst chartTooltipLabelVariants = cva(\"font-medium text-fg-secondary\", {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"text-gdt-xs\",\n\t\t\tsm: \"text-gdt-xs\",\n\t\t\tmd: \"text-gdt-sm\",\n\t\t\tlg: \"text-gdt-sm\",\n\t\t},\n\t},\n\tdefaultVariants: { size: \"md\" },\n});\n\nconst chartTooltipValueVariants = cva(\n\t\"font-extrabold text-fg-primary tabular-nums\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"text-gdt-sm\",\n\t\t\t\tsm: \"text-gdt-md\",\n\t\t\t\tmd: \"text-gdt-lg\",\n\t\t\t\tlg: \"text-gdt-xl\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\" },\n\t},\n);\n\nfunction ChartTooltipContent({\n\tactive,\n\tpayload,\n\tclassName,\n\thideIndicator = false,\n\tlabel,\n\tlabelFormatter,\n\tformatter,\n\tcolor,\n\tnameKey,\n\tvalueType = \"number\",\n\tsize = \"md\",\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n\tReact.ComponentProps<\"div\"> & {\n\t\thideIndicator?: boolean;\n\t\tnameKey?: string;\n\t\tvalueType?: ChartValueType;\n\t} & VariantProps<typeof chartTooltipVariants> &\n\tOmit<\n\t\tRechartsPrimitive.DefaultTooltipContentProps<\n\t\t\tTooltipValueType,\n\t\t\tTooltipNameType\n\t\t>,\n\t\t\"accessibilityLayer\"\n\t>) {\n\tconst { config } = useChart();\n\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst [item] = payload.filter((entry) => entry.type !== \"none\");\n\n\tif (!item) {\n\t\treturn null;\n\t}\n\n\tconst key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\n\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\tconst dotColor =\n\t\tcolor ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;\n\n\t// Metric label — the short name of the series being read, e.g. \"Total Revenue\".\n\tconst metricLabel = itemConfig?.label ?? item.name;\n\t// Hero value — the precise, formatted figure, the visual focus of the tooltip.\n\tconst heroValue = formatter\n\t\t? formatter(item.value, item.name ?? \"\", item, 0, item.payload)\n\t\t: formatChartValue(item.value, valueType);\n\t// Period caption — the time context for the value, e.g. \"March 2026\".\n\tconst periodCaption = labelFormatter\n\t\t? labelFormatter(label, payload)\n\t\t: ((typeof label === \"string\" ? config[label]?.label : null) ?? label);\n\n\treturn (\n\t\t<div className={cn(chartTooltipVariants({ size }), className)}>\n\t\t\t{metricLabel != null && (\n\t\t\t\t<div className=\"flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0\">\n\t\t\t\t\t{!hideIndicator &&\n\t\t\t\t\t\t(itemConfig?.icon ? (\n\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={cn(chartTooltipDotVariants({ size }))}\n\t\t\t\t\t\t\t\tstyle={{ backgroundColor: dotColor }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t<span className={cn(chartTooltipLabelVariants({ size }))}>\n\t\t\t\t\t\t{metricLabel}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<p className={cn(chartTooltipValueVariants({ size }))}>{heroValue}</p>\n\t\t\t{periodCaption != null && periodCaption !== \"\" && (\n\t\t\t\t<p className=\"text-gdt-xs text-fg-caption-placeholder\">\n\t\t\t\t\t{periodCaption}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/** Marker shape that ties a legend item to its series. */\ntype ChartLegendMarker = \"dot\" | \"square\" | \"line\";\n\nconst chartLegendItemVariants = cva(\n\t\"group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3\",\n\t\t\t\tmd: \"gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5\",\n\t\t\t},\n\t\t\tinteractive: {\n\t\t\t\ttrue: \"cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t\tinactive: {\n\t\t\t\ttrue: \"text-fg-caption-placeholder line-through\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tinteractive: false,\n\t\t\tinactive: false,\n\t\t},\n\t},\n);\n\nconst chartLegendMarkerSizeVariants = cva(\"shrink-0\", {\n\tvariants: {\n\t\tmarker: {\n\t\t\tdot: \"rounded-full\",\n\t\t\tsquare: \"rounded-[2px]\",\n\t\t\tline: \"rounded-full\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"\",\n\t\t\tmd: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{ marker: [\"dot\", \"square\"], size: \"sm\", className: \"size-2\" },\n\t\t{ marker: [\"dot\", \"square\"], size: \"md\", className: \"size-2.5\" },\n\t\t{ marker: \"line\", size: \"sm\", className: \"h-[3px] w-3\" },\n\t\t{ marker: \"line\", size: \"md\", className: \"h-[3px] w-3.5\" },\n\t],\n\tdefaultVariants: { marker: \"dot\", size: \"md\" },\n});\n\n/**\n * A shared legend for all chart types. Each item pairs a series marker with a\n * label and can be toggled to hide or show its series — the inactive state mutes\n * the marker and strikes through the label. Items compose into horizontal rows\n * or vertical columns, in two sizes, with dot, square, or line markers.\n *\n * Toggling: pass `onToggle` to make items interactive. Inactive items are read\n * from each payload entry's `inactive` flag (recharts sets this when wired) or\n * the controlled `inactiveKeys` set.\n */\nfunction ChartLegendContent({\n\tclassName,\n\thideIcon = false,\n\tpayload,\n\tverticalAlign = \"bottom\",\n\tnameKey,\n\tmarker = \"dot\",\n\tsize = \"md\",\n\torientation = \"horizontal\",\n\tinactiveKeys,\n\tonToggle,\n}: React.ComponentProps<\"div\"> & {\n\thideIcon?: boolean;\n\tnameKey?: string;\n\tmarker?: ChartLegendMarker;\n\tsize?: \"sm\" | \"md\";\n\torientation?: \"horizontal\" | \"vertical\";\n\tinactiveKeys?: Iterable<string>;\n\tonToggle?: (key: string) => void;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n\tconst { config } = useChart();\n\n\tif (!payload?.length) {\n\t\treturn null;\n\t}\n\n\tconst inactiveSet = inactiveKeys ? new Set(inactiveKeys) : undefined;\n\tconst interactive = Boolean(onToggle);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\torientation === \"vertical\"\n\t\t\t\t\t? \"flex-col items-start gap-0.5\"\n\t\t\t\t\t: \"flex-row flex-wrap items-center justify-center gap-x-1 gap-y-0.5\",\n\t\t\t\tverticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{payload\n\t\t\t\t.filter((item) => item.type !== \"none\")\n\t\t\t\t.map((item, index) => {\n\t\t\t\t\tconst key = `${nameKey ?? item.dataKey ?? \"value\"}`;\n\t\t\t\t\tconst itemKey = `${item.dataKey ?? item.value ?? index}`;\n\t\t\t\t\tconst itemConfig = getPayloadConfigFromPayload(config, item, key);\n\t\t\t\t\tconst inactive =\n\t\t\t\t\t\t(inactiveSet?.has(key) ?? false) || Boolean(item.inactive);\n\t\t\t\t\tconst markerColor = inactive\n\t\t\t\t\t\t? \"var(--color-fg-caption-placeholder)\"\n\t\t\t\t\t\t: (item.color ?? SERIES_COLOR_PLACEHOLDER);\n\n\t\t\t\t\tconst content = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{itemConfig?.icon && !hideIcon ? (\n\t\t\t\t\t\t\t\t<itemConfig.icon />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\tchartLegendMarkerSizeVariants({ marker, size }),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: markerColor }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{itemConfig?.label ?? item.value}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (interactive) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-pressed={!inactive}\n\t\t\t\t\t\t\t\tonClick={() => onToggle?.(key)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={itemKey}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tchartLegendItemVariants({ size, interactive, inactive }),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t</div>\n\t);\n}\n\n/** The size-scaled layout numbers a cartesian chart needs to build axis props. */\ntype CartesianAxisLayout = {\n\ttickMargin: number;\n\ttickFontSize: number;\n\tyAxisWidth: number;\n};\n\n/**\n * Shared `<XAxis>`/`<YAxis>` props — the giddaa cartesian-axis defaults (no tick\n * or axis lines, a size-scaled tick font, and a reserved value-axis width) that\n * every bar and line chart would otherwise repeat per axis. Spread the result\n * onto the recharts axis, then add the chart-specific props (`dataKey`,\n * `domain`, `ticks`, a `width`/`type` override, …):\n *\n *   const chart = useBarChartLayout();\n *   <XAxis dataKey=\"month\" {...chart.xAxis} />\n *   <YAxis domain={[0, 120]} {...chart.yAxis} />\n */\nfunction cartesianAxisProps(layout: CartesianAxisLayout) {\n\tconst tick = { fontSize: layout.tickFontSize };\n\treturn {\n\t\txAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\ttickMargin: layout.tickMargin,\n\t\t\ttick,\n\t\t},\n\t\tyAxis: {\n\t\t\ttickLine: false,\n\t\t\taxisLine: false,\n\t\t\twidth: layout.yAxisWidth,\n\t\t\ttick,\n\t\t},\n\t} as const;\n}\n\nfunction getPayloadConfigFromPayload(\n\tconfig: ChartConfig,\n\tpayload: unknown,\n\tkey: string,\n) {\n\tif (typeof payload !== \"object\" || payload === null) {\n\t\treturn undefined;\n\t}\n\n\tconst payloadPayload =\n\t\t\"payload\" in payload &&\n\t\ttypeof payload.payload === \"object\" &&\n\t\tpayload.payload !== null\n\t\t\t? payload.payload\n\t\t\t: undefined;\n\n\tlet configLabelKey: string = key;\n\n\tif (\n\t\tkey in payload &&\n\t\ttypeof payload[key as keyof typeof payload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payload[key as keyof typeof payload] as string;\n\t} else if (\n\t\tpayloadPayload &&\n\t\tkey in payloadPayload &&\n\t\ttypeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n\t) {\n\t\tconfigLabelKey = payloadPayload[\n\t\t\tkey as keyof typeof payloadPayload\n\t\t] as string;\n\t}\n\n\treturn configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n\tcartesianAxisProps,\n\tChartCard,\n\tChartContainer,\n\tChartDescription,\n\tChartHeader,\n\tChartLegend,\n\tChartLegendContent,\n\tChartStyle,\n\tChartTitle,\n\tChartTooltip,\n\tChartTooltipContent,\n};\nexport type { CartesianAxisLayout };\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["Fragment","jsx","jsx","config","jsx","jsxs"]}
+{"version":3,"sources":["../src/sparkline.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tArea,\n\tAreaChart,\n\tBar,\n\tBarChart,\n\tLine,\n\tLineChart,\n\tXAxis,\n} from \"recharts\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartTooltip,\n\tChartTooltipContent,\n\ttype ChartValueType,\n} from \"./chart\";\nimport { cn } from \"./lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\n/**\n * Small inline trend lines for KPI cards and dense tables — no axes, no\n * gridlines. Composed from recharts plot primitives (`Line`/`Area`/`Bar`) so it\n * shares one charting engine with `line-chart`/`bar-chart` and gets hover\n * tooltips for free via the shared `ChartTooltip`/`ChartTooltipContent`.\n *\n * Sizing follows the same convention as the other charts: `size` sets the height\n * (plus stroke/dot scale) and the width is parent-driven — the component is\n * `w-full`, so constrain it with a wrapper (the SPARKLINE_LAYOUT widths are the\n * recommended container sizes) or let it fill a KPI card.\n *\n * Sentiment colour is driven by the data direction — `status-success` for an\n * upward series, `status-danger` for downward, `text-secondary` for flat — and\n * can be overridden with `trend`. The area fill reuses the line colour at 14 %.\n *\n * Tokens:\n * - Stroke / fill — up: `var(--color-status-success)`, down:\n *   `var(--color-status-danger)`, flat: `var(--color-fg-secondary)` (fed through\n *   `ChartConfig` as `--color-value`)\n * - Area fill: the same colour at `0.14` opacity\n * - End-point dot ring: `var(--color-surface)` (separates the dot from the line)\n *\n * @example\n * // KPI card trend — colour follows the metric's sentiment automatically\n * <Sparkline data={[40, 44, 42, 55, 58, 62, 70]} type=\"area\" />\n *\n * @example\n * // Interactive — hover tooltip with currency formatting and month captions\n * <Sparkline data={values} tooltip label=\"Revenue\" valueType=\"currency\" labels={months} />\n *\n * @example\n * // Dense table cell — fixed-width wrapper, bar render, no marker\n * <span className=\"inline-block w-[72px]\">\n *   <Sparkline data={values} type=\"bar\" size=\"sm\" showMarker={false} />\n * </span>\n */\n\n/** Sparkline sizes line up with the three shared `ComponentSize` values. */\ntype SparklineSize = ComponentSize;\n\n/** Render style for the series. */\ntype SparklineType = \"line\" | \"bar\" | \"area\";\n\n/** Sentiment of the series — drives the stroke/fill colour. */\ntype SparklineTrend = \"up\" | \"down\" | \"flat\";\n\ntype SparklineLayout = {\n\t/** Recommended container width in px (width is parent-driven). */\n\twidth: number;\n\t/** Plot height in px. */\n\theight: number;\n\t/** Line/area stroke width in px. */\n\tstrokeWidth: number;\n\t/** Radius of the end-point dot. */\n\tdotRadius: number;\n\t/** Outer margin — keeps the stroke, peaks, and end dot from clipping. */\n\tmargin: { top: number; right: number; bottom: number; left: number };\n\t/** Corner radius for bars. */\n\tbarRadius: number;\n\t/** Cap on bar thickness so stretched sparklines keep thin bars. */\n\tmaxBarSize: number;\n};\n\nconst SPARKLINE_LAYOUT: Record<SparklineSize, SparklineLayout> = {\n\tsm: {\n\t\twidth: 72,\n\t\theight: 24,\n\t\tstrokeWidth: 1.5,\n\t\tdotRadius: 2,\n\t\tmargin: { top: 4, right: 4, bottom: 2, left: 2 },\n\t\tbarRadius: 1,\n\t\tmaxBarSize: 6,\n\t},\n\tmd: {\n\t\twidth: 104,\n\t\theight: 32,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 2.5,\n\t\tmargin: { top: 5, right: 5, bottom: 2, left: 2 },\n\t\tbarRadius: 2,\n\t\tmaxBarSize: 8,\n\t},\n\tlg: {\n\t\twidth: 144,\n\t\theight: 44,\n\t\tstrokeWidth: 2,\n\t\tdotRadius: 3,\n\t\tmargin: { top: 6, right: 6, bottom: 3, left: 3 },\n\t\tbarRadius: 2,\n\t\tmaxBarSize: 10,\n\t},\n};\n\nconst TREND_COLOR: Record<SparklineTrend, string> = {\n\tup: \"var(--color-status-success)\",\n\tdown: \"var(--color-status-danger)\",\n\tflat: \"var(--color-fg-secondary)\",\n};\n\n/**\n * Derive sentiment from the series: compare the last value to the first and\n * read flat when the change is a small fraction of the overall range.\n */\nfunction resolveTrend(data: number[]): SparklineTrend {\n\tif (data.length < 2) return \"flat\";\n\tconst first = data[0];\n\tconst last = data[data.length - 1];\n\tconst min = Math.min(...data);\n\tconst max = Math.max(...data);\n\tconst range = max - min || 1;\n\tconst delta = last - first;\n\tif (Math.abs(delta) / range < 0.05) return \"flat\";\n\treturn delta > 0 ? \"up\" : \"down\";\n}\n\n/**\n * Custom dot passed to recharts as `dot={<SparklineEndDot ... />}`. recharts\n * clones it for every point, injecting `cx`/`cy`/`index`; we only paint the\n * latest point so the series carries a single end-point marker.\n */\nfunction SparklineEndDot({\n\tcx,\n\tcy,\n\tindex,\n\tlastIndex,\n\tradius,\n}: {\n\tcx?: number;\n\tcy?: number;\n\tindex?: number;\n\tlastIndex?: number;\n\tradius?: number;\n}) {\n\tif (cx == null || cy == null || index !== lastIndex) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<circle\n\t\t\tcx={cx}\n\t\t\tcy={cy}\n\t\t\tr={radius}\n\t\t\tfill=\"var(--color-value)\"\n\t\t\tstroke=\"var(--color-surface)\"\n\t\t\tstrokeWidth={2}\n\t\t/>\n\t);\n}\n\n/**\n * Bars do not support `dot`, so the marker is rendered as part of a custom bar\n * shape. Only the latest bar receives the end-point marker.\n */\nfunction SparklineBarShape({\n\tx,\n\ty,\n\twidth,\n\theight,\n\tindex,\n\tvalue,\n\tlastIndex,\n\tradius,\n\tdotRadius,\n}: {\n\tx?: number;\n\ty?: number;\n\twidth?: number;\n\theight?: number;\n\tindex?: number;\n\tvalue?: number;\n\tlastIndex?: number;\n\tradius: number;\n\tdotRadius: number;\n}) {\n\tif (x == null || y == null || width == null || height == null) {\n\t\treturn null;\n\t}\n\n\tconst markerY = typeof value === \"number\" && value < 0 ? y + height : y;\n\n\treturn (\n\t\t<g>\n\t\t\t<rect\n\t\t\t\tx={x}\n\t\t\t\ty={y}\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\trx={radius}\n\t\t\t\try={radius}\n\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t/>\n\t\t\t{index === lastIndex ? (\n\t\t\t\t<circle\n\t\t\t\t\tcx={x + width / 2}\n\t\t\t\t\tcy={markerY}\n\t\t\t\t\tr={dotRadius}\n\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\tstroke=\"var(--color-surface)\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</g>\n\t);\n}\n\ntype SparklineDatum = { x: string; value: number };\n\ntype SparklineProps = Omit<\n\tReact.ComponentProps<typeof ChartContainer>,\n\t\"config\" | \"children\"\n> & {\n\t/** The series to plot. Needs at least two points to draw a trend. */\n\tdata: number[];\n\t/** Render style. Defaults to `line`. */\n\ttype?: SparklineType;\n\t/** Explicit size; otherwise inherited from the nearest `SizeProvider`. */\n\tsize?: SparklineSize;\n\t/** Override the auto-detected sentiment colour. */\n\ttrend?: SparklineTrend;\n\t/** Show the filled marker on the latest value. Default true. */\n\tshowMarker?: boolean;\n\t/** Enable the hover tooltip. Default false. */\n\ttooltip?: boolean;\n\t/** Series name shown in the tooltip, e.g. \"Revenue\". */\n\tlabel?: string;\n\t/** Per-point captions for the tooltip (e.g. months). Indexed by data point. */\n\tlabels?: string[];\n\t/** Value formatting for the tooltip. Defaults to `number`. */\n\tvalueType?: ChartValueType;\n};\n\nfunction Sparkline({\n\tdata,\n\ttype = \"line\",\n\tsize,\n\ttrend,\n\tshowMarker = true,\n\ttooltip = false,\n\tlabel = \"Value\",\n\tlabels,\n\tvalueType = \"number\",\n\tclassName,\n\tstyle,\n\t...props\n}: SparklineProps) {\n\tconst layout = SPARKLINE_LAYOUT[useComponentSize(size)];\n\tconst resolvedTrend = trend ?? resolveTrend(data);\n\tconst color = TREND_COLOR[resolvedTrend];\n\n\tconst chartData: SparklineDatum[] = data.map((value, i) => ({\n\t\tx: labels?.[i] ?? `${i + 1}`,\n\t\tvalue,\n\t}));\n\tconst lastIndex = data.length - 1;\n\n\tconst config = {\n\t\tvalue: { label, color },\n\t} satisfies ChartConfig;\n\n\tconst showDot = showMarker && data.length >= 2;\n\tconst endDot = showDot ? (\n\t\t<SparklineEndDot lastIndex={lastIndex} radius={layout.dotRadius} />\n\t) : (\n\t\tfalse\n\t);\n\tconst barShape = showDot ? (\n\t\t<SparklineBarShape\n\t\t\tlastIndex={lastIndex}\n\t\t\tradius={layout.barRadius}\n\t\t\tdotRadius={layout.dotRadius}\n\t\t/>\n\t) : undefined;\n\tconst activeDot = tooltip\n\t\t? {\n\t\t\t\tr: layout.dotRadius + 0.5,\n\t\t\t\tfill: \"var(--color-value)\",\n\t\t\t\tstroke: \"var(--color-surface)\",\n\t\t\t\tstrokeWidth: 2,\n\t\t\t}\n\t\t: false;\n\n\tconst tooltipNode = tooltip ? (\n\t\t<ChartTooltip\n\t\t\tcursor={false}\n\t\t\tcontent={<ChartTooltipContent size=\"xs\" valueType={valueType} />}\n\t\t/>\n\t) : null;\n\n\tconst ariaLabel =\n\t\t(props[\"aria-label\"] as string | undefined) ??\n\t\t`${label} sparkline, trend ${resolvedTrend}`;\n\n\tif (data.length < 2) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\trole=\"img\"\n\t\t\t\tclassName={cn(\"w-full\", className)}\n\t\t\t\tstyle={{ height: layout.height, ...style }}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ChartContainer\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\trole=\"img\"\n\t\t\tconfig={config}\n\t\t\tclassName={cn(\"aspect-auto w-full\", className)}\n\t\t\tstyle={{ height: layout.height, ...style }}\n\t\t>\n\t\t\t{type === \"bar\" ? (\n\t\t\t\t<BarChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Bar\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\t\tradius={layout.barRadius}\n\t\t\t\t\t\tmaxBarSize={layout.maxBarSize}\n\t\t\t\t\t\tshape={barShape}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</BarChart>\n\t\t\t) : type === \"area\" ? (\n\t\t\t\t<AreaChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltip ? <XAxis dataKey=\"x\" hide /> : null}\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Area\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tstroke=\"var(--color-value)\"\n\t\t\t\t\t\tstrokeWidth={layout.strokeWidth}\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tfill=\"var(--color-value)\"\n\t\t\t\t\t\tfillOpacity={0.14}\n\t\t\t\t\t\tdot={endDot}\n\t\t\t\t\t\tactiveDot={activeDot}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</AreaChart>\n\t\t\t) : (\n\t\t\t\t<LineChart accessibilityLayer data={chartData} margin={layout.margin}>\n\t\t\t\t\t{tooltip ? <XAxis dataKey=\"x\" hide /> : null}\n\t\t\t\t\t{tooltipNode}\n\t\t\t\t\t<Line\n\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tstroke=\"var(--color-value)\"\n\t\t\t\t\t\tstrokeWidth={layout.strokeWidth}\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tdot={endDot}\n\t\t\t\t\t\tactiveDot={activeDot}\n\t\t\t\t\t\tisAnimationActive={false}\n\t\t\t\t\t/>\n\t\t\t\t</LineChart>\n\t\t\t)}\n\t\t</ChartContainer>\n\t);\n}\n\nexport { Sparkline, SPARKLINE_LAYOUT };\nexport type { SparklineProps, SparklineSize, SparklineTrend, SparklineType };\n"],"mappings":"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","names":[]}

package/dist/stepper.js

@@ -1,41 +1,11 @@
-// src/components/ui/stepper.tsx
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/stepper.tsx
 import { cva } from "class-variance-authority";
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/stepper.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var StepperContext = React.createContext(null);
 function useStepper() {