@jiwambe/components 0.3.4 → 0.3.6

package/dist/components/LineGraph/LineGraph.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from "recharts";
+import { Typography } from "../Typography/Typography.js";
+import { Stack } from "../Stack/Stack.js";
+import { LineGraphSkeleton } from "./LineGraphSkeleton.js";
+import { LineGraphLegend } from "./LineGraphLegend.js";
+import { LineGraphTooltip } from "./LineGraphTooltip.js";
+import { validateSeries, getSeriesColor } from "./lineGraphUtils.js";
+function LineGraph({
+  series,
+  title,
+  description,
+  xAxisLabel,
+  yAxisLabel,
+  xTickFormatter,
+  yTickFormatter,
+  tooltipValueFormatter,
+  height = 320,
+  loading = false,
+  showGrid = true,
+  legendPosition = "bottom",
+  interactiveLegend = true,
+  onDataPointClick,
+  className = ""
+}) {
+  const [hiddenIds, setHiddenIds] = useState([]);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    validateSeries(series);
+  }, [series]);
+  const chartData = useMemo(() => {
+    if (!series.length) return [];
+    return series[0].data.map((point) => {
+      const entry = { x: point.x };
+      series.forEach((s) => {
+        const p = s.data.find((dp) => dp.x === point.x);
+        if (p) {
+          entry[s.id] = p.y;
+        }
+      });
+      return entry;
+    });
+  }, [series]);
+  const handleToggle = (id) => {
+    setHiddenIds(
+      (prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+  const [colors, setColors] = useState({
+    grid: "#e5e5e5",
+    // Fallback neutral-200
+    tick: "#737373"
+    // Fallback text-secondary (neutral-500)
+  });
+  useEffect(() => {
+    if (!mounted) return;
+    const style = getComputedStyle(document.documentElement);
+    const grid = style.getPropertyValue("--color-neutral-200").trim();
+    const tick = style.getPropertyValue("--color-text-secondary").trim();
+    setColors({
+      grid: grid || "#e5e5e5",
+      tick: tick || "#737373"
+    });
+  }, [mounted]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(LineGraphSkeleton, { height, showTitle: !!title });
+  }
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("div", { style: { height, width: "100%" }, className });
+  }
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      role: "figure",
+      "aria-label": title ?? "Line graph",
+      className: ["flex flex-col w-full min-w-0", className].filter(Boolean).join(" "),
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs(Stack, { spacing: "space-0-25", className: "mb-space-6", children: [
+          title && /* @__PURE__ */ jsx(Typography, { variant: "title-md", as: "h3", children: title }),
+          description && /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-secondary", children: description })
+        ] }),
+        legendPosition === "top" && /* @__PURE__ */ jsx("div", { className: "mb-space-4", children: /* @__PURE__ */ jsx(
+          LineGraphLegend,
+          {
+            series,
+            hiddenIds,
+            onToggle: handleToggle,
+            interactive: interactiveLegend
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "w-full min-w-0", style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart, { data: chartData, margin: { top: 10, right: 10, left: 10, bottom: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              stroke: colors.grid,
+              strokeDasharray: "3 3",
+              vertical: false,
+              display: showGrid ? "block" : "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: "x",
+              tickFormatter: xTickFormatter,
+              tick: { fill: colors.tick, fontSize: 12 },
+              axisLine: false,
+              tickLine: false,
+              dy: 10,
+              label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -5 } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tickFormatter: yTickFormatter,
+              tick: { fill: colors.tick, fontSize: 12 },
+              axisLine: false,
+              tickLine: false,
+              dx: -10,
+              label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft" } : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(
+                LineGraphTooltip,
+                {
+                  tooltipValueFormatter: tooltipValueFormatter || ((val) => yTickFormatter ? yTickFormatter(val) : val.toLocaleString())
+                }
+              ),
+              cursor: { stroke: colors.grid, strokeWidth: 1 }
+            }
+          ),
+          series.map((s, idx) => {
+            const color = getSeriesColor(s, idx);
+            const isHidden = hiddenIds.includes(s.id) || s.hidden;
+            return /* @__PURE__ */ jsx(
+              Line,
+              {
+                type: "monotone",
+                dataKey: s.id,
+                name: s.label,
+                stroke: color,
+                strokeWidth: 2,
+                strokeDasharray: s.dashed ? "5 5" : void 0,
+                dot: false,
+                activeDot: { r: 5, fill: color, stroke: "#fff", strokeWidth: 2 },
+                hide: isHidden,
+                onClick: onDataPointClick ? (data) => onDataPointClick(data.payload, s) : void 0
+              },
+              s.id
+            );
+          })
+        ] }) }) }),
+        legendPosition === "bottom" && /* @__PURE__ */ jsx(
+          LineGraphLegend,
+          {
+            series,
+            hiddenIds,
+            onToggle: handleToggle,
+            interactive: interactiveLegend
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LineGraph
+};
+//# sourceMappingURL=LineGraph.js.map

package/dist/components/LineGraph/LineGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraph.js","sources":["../../../src/components/LineGraph/LineGraph.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useMemo, useEffect } from 'react';\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport { Typography } from '../Typography/Typography';\nimport { Stack } from '../Stack/Stack';\nimport { LineGraphSkeleton } from './LineGraphSkeleton';\nimport { LineGraphLegend } from './LineGraphLegend';\nimport { LineGraphTooltip } from './LineGraphTooltip';\nimport { getSeriesColor, validateSeries } from './lineGraphUtils';\nimport type { LineGraphDataPoint, LineGraphSeries } from './types';\nexport type { LineGraphDataPoint, LineGraphSeries };\n\nexport interface LineGraphProps {\n  /** One or more data series to render */\n  series: LineGraphSeries[];\n  /** Chart title — rendered above the graph */\n  title?: string;\n  /** Subtitle / description rendered below the title */\n  description?: string;\n  /** X-axis label */\n  xAxisLabel?: string;\n  /** Y-axis label */\n  yAxisLabel?: string;\n  /** Custom formatter for X-axis tick labels */\n  xTickFormatter?: (value: string | number) => string;\n  /** Custom formatter for Y-axis tick labels */\n  yTickFormatter?: (value: number) => string;\n  /** Custom formatter for tooltip Y values */\n  tooltipValueFormatter?: (value: number, seriesLabel: string) => string;\n  /** Fixed chart height in px. @default 320 */\n  height?: number;\n  /** Show skeleton loading state */\n  loading?: boolean;\n  /** Show horizontal gridlines. @default true */\n  showGrid?: boolean;\n  /** Position of the legend. @default 'bottom' */\n  legendPosition?: 'top' | 'bottom' | 'none';\n  /** Allow toggling series visibility by clicking legend items. @default true */\n  interactiveLegend?: boolean;\n  /** Called when a data point is clicked */\n  onDataPointClick?: (point: LineGraphDataPoint, series: LineGraphSeries) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * LineGraph component for visualizing one or more data series.\n * Built with recharts and integrated with Jiwambe design tokens.\n */\nexport function LineGraph({\n  series,\n  title,\n  description,\n  xAxisLabel,\n  yAxisLabel,\n  xTickFormatter,\n  yTickFormatter,\n  tooltipValueFormatter,\n  height = 320,\n  loading = false,\n  showGrid = true,\n  legendPosition = 'bottom',\n  interactiveLegend = true,\n  onDataPointClick,\n  className = '',\n}: LineGraphProps) {\n  // State for legend interactivity (toggled-off series IDs)\n  const [hiddenIds, setHiddenIds] = useState<string[]>([]);\n  const [mounted, setMounted] = useState(false);\n\n  // Monitor props to reset hidden IDs if needed or validate\n  useEffect(() => {\n    setMounted(true);\n    validateSeries(series);\n  }, [series]);\n\n  // Transform series data into recharts' expected format: [{ x: '...', series1: ..., series2: ... }]\n  const chartData = useMemo(() => {\n    if (!series.length) return [];\n    \n    // Use the first series as the source of truth for X-axis keys\n    return series[0].data.map((point) => {\n      const entry: any = { x: point.x };\n      series.forEach((s) => {\n        const p = s.data.find((dp) => dp.x === point.x);\n        if (p) {\n          entry[s.id] = p.y;\n        }\n      });\n      return entry;\n    });\n  }, [series]);\n\n  const handleToggle = (id: string) => {\n    setHiddenIds((prev) => \n      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]\n    );\n  };\n\n  // Resolve axis/grid colors from CSS variables at runtime\n  const [colors, setColors] = useState({\n    grid: '#e5e5e5', // Fallback neutral-200\n    tick: '#737373', // Fallback text-secondary (neutral-500)\n  });\n\n  useEffect(() => {\n    if (!mounted) return;\n    // This ensures we have the correct values on the client side\n    const style = getComputedStyle(document.documentElement);\n    const grid = style.getPropertyValue('--color-neutral-200').trim();\n    const tick = style.getPropertyValue('--color-text-secondary').trim();\n    \n    setColors({\n      grid: grid || '#e5e5e5',\n      tick: tick || '#737373',\n    });\n  }, [mounted]);\n\n  if (loading) {\n    return <LineGraphSkeleton height={height} showTitle={!!title} />;\n  }\n\n  // Pre-hydration or no client mount: render shell to avoid layout shift\n  if (!mounted) {\n    return <div style={{ height, width: '100%' }} className={className} />;\n  }\n\n  return (\n    <figure\n      role=\"figure\"\n      aria-label={title ?? 'Line graph'}\n      className={['flex flex-col w-full min-w-0', className].filter(Boolean).join(' ')}\n    >\n      {/* Header */}\n      {(title || description) && (\n        <Stack spacing=\"space-0-25\" className=\"mb-space-6\">\n          {title && (\n            <Typography variant=\"title-md\" as=\"h3\">\n              {title}\n            </Typography>\n          )}\n          {description && (\n            <Typography variant=\"text-xs\" className=\"text-text-secondary\">\n              {description}\n            </Typography>\n          )}\n        </Stack>\n      )}\n\n      {/* Legend Top */}\n      {legendPosition === 'top' && (\n        <div className=\"mb-space-4\">\n          <LineGraphLegend\n            series={series}\n            hiddenIds={hiddenIds}\n            onToggle={handleToggle}\n            interactive={interactiveLegend}\n          />\n        </div>\n      )}\n\n      {/* Chart */}\n      <div className=\"w-full min-w-0\" style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height={height}>\n          <LineChart data={chartData} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>\n            <CartesianGrid\n              stroke={colors.grid}\n              strokeDasharray=\"3 3\"\n              vertical={false}\n              display={showGrid ? 'block' : 'none'}\n            />\n            <XAxis\n              dataKey=\"x\"\n              tickFormatter={xTickFormatter}\n              tick={{ fill: colors.tick, fontSize: 12 }}\n              axisLine={false}\n              tickLine={false}\n              dy={10}\n              label={xAxisLabel ? { value: xAxisLabel, position: 'insideBottom', offset: -5 } : undefined}\n            />\n            <YAxis\n              tickFormatter={yTickFormatter}\n              tick={{ fill: colors.tick, fontSize: 12 }}\n              axisLine={false}\n              tickLine={false}\n              dx={-10}\n              label={yAxisLabel ? { value: yAxisLabel, angle: -90, position: 'insideLeft' } : undefined}\n            />\n            <Tooltip\n              content={\n                <LineGraphTooltip\n                  tooltipValueFormatter={tooltipValueFormatter || ((val) => yTickFormatter ? yTickFormatter(val) : val.toLocaleString())}\n                />\n              }\n              cursor={{ stroke: colors.grid, strokeWidth: 1 }}\n            />\n            {series.map((s, idx) => {\n              const color = getSeriesColor(s, idx);\n              const isHidden = hiddenIds.includes(s.id) || s.hidden;\n\n              return (\n                <Line\n                  key={s.id}\n                  type=\"monotone\"\n                  dataKey={s.id}\n                  name={s.label}\n                  stroke={color}\n                  strokeWidth={2}\n                  strokeDasharray={s.dashed ? '5 5' : undefined}\n                  dot={false}\n                  activeDot={{ r: 5, fill: color, stroke: '#fff', strokeWidth: 2 }}\n                  hide={isHidden}\n                  onClick={onDataPointClick ? (data: any) => onDataPointClick(data.payload, s) : undefined}\n                />\n              );\n            })}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n\n      {/* Legend Bottom */}\n      {legendPosition === 'bottom' && (\n        <LineGraphLegend\n          series={series}\n          hiddenIds={hiddenIds}\n          onToggle={handleToggle}\n          interactive={interactiveLegend}\n        />\n      )}\n    </figure>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA0DO;AAAmB;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACS;AACC;AACC;AACM;AACG;AACpB;AAEF;AAEE;AACA;AAGA;AACE;AACA;AAAqB;AAIvB;AACE;AAGA;AACE;AACA;AACE;AACA;AACE;AAAgB;AAClB;AAEF;AAAO;AACR;AAGH;AACE;AAAA;AACuE;AAAA;AAKzE;AAAqC;AAC7B;AAAA;AACA;AAAA;AAGR;AACE;AAEA;AACA;AACA;AAEA;AAAU;AACM;AACA;AACf;AAGH;AACE;AAA8D;AAIhE;AACE;AAAoE;AAGtE;AACE;AAAC;AAAA;AACM;AACgB;AAC0D;AAG7E;AAEG;AAGC;AAKA;AAEJ;AAME;AAAC;AAAA;AACC;AACA;AACU;AACG;AAAA;AAEjB;AAOI;AAAA;AAAC;AAAA;AACgB;AACC;AACN;AACoB;AAAA;AAAA;AAEhC;AAAC;AAAA;AACS;AACO;AACsB;AAC3B;AACA;AACN;AAC8E;AAAA;AAAA;AAEpF;AAAC;AAAA;AACgB;AACsB;AAC3B;AACA;AACN;AAC4E;AAAA;AAAA;AAElF;AAAC;AAAA;AAEG;AAAC;AAAA;AACsG;AAAe;AAAA;AAG5E;AAAE;AAAA;AAG9C;AACA;AAEA;AACE;AAAC;AAAA;AAEM;AACM;AACH;AACA;AACK;AACuB;AAC/B;AACwD;AACvD;AACyE;AAAA;AAVxE;AAAA;AAaZ;AAGP;AAIE;AAAC;AAAA;AACC;AACA;AACU;AACG;AAAA;AAAA;AACf;AAAA;AAIR;;;;"}

package/dist/components/LineGraph/LineGraph.test.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=LineGraph.test.d.ts.map

package/dist/components/LineGraph/LineGraph.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraph.test.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraph.test.tsx"],"names":[],"mappings":"AAKA,OAAO,2BAA2B,CAAC"}

package/dist/components/LineGraph/LineGraphLegend.d.ts

@@ -0,0 +1,17 @@
+import { LineGraphSeries } from './types';
+export interface LineGraphLegendProps {
+    /** One or more series to render in the legend */
+    series: LineGraphSeries[];
+    /** IDs of series currently hidden */
+    hiddenIds: string[];
+    /** Fired when a series is toggled */
+    onToggle?: (id: string) => void;
+    /** Whether the legend is interactive. @default true */
+    interactive?: boolean;
+}
+/**
+ * Custom legend component for the LineGraph.
+ * Renders a list of items with colored dots/squares and series labels.
+ */
+export declare function LineGraphLegend({ series, hiddenIds, onToggle, interactive, }: LineGraphLegendProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LineGraphLegend.d.ts.map

package/dist/components/LineGraph/LineGraphLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphLegend.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraphLegend.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,qCAAqC;IACrC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,EACT,QAAQ,EACR,WAAkB,GACnB,EAAE,oBAAoB,2CA6CtB"}

package/dist/components/LineGraph/LineGraphLegend.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Typography } from "../Typography/Typography.js";
+import { Stack } from "../Stack/Stack.js";
+import { getSeriesColor } from "./lineGraphUtils.js";
+function LineGraphLegend({
+  series,
+  hiddenIds,
+  onToggle,
+  interactive = true
+}) {
+  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: "space-4", justifyContent: "center", className: "flex-wrap pt-space-4", children: series.map((s, idx) => {
+    const isHidden = hiddenIds.includes(s.id);
+    const color = getSeriesColor(s, idx);
+    const content = /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: "space-2", alignItems: "center", className: "py-space-1", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-3 h-3 rounded-rad-xs shrink-0",
+          style: { backgroundColor: color },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "text-xs",
+          className: ["font-semibold", isHidden ? "text-text-disabled opacity-40" : "text-text-secondary"].filter(Boolean).join(" "),
+          children: s.label
+        }
+      )
+    ] });
+    if (interactive && onToggle) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: [
+            "cursor-pointer transition-opacity border-none bg-transparent p-0",
+            isHidden ? "opacity-50" : "hover:opacity-80"
+          ].filter(Boolean).join(" "),
+          onClick: () => onToggle(s.id),
+          "aria-pressed": !isHidden,
+          "aria-label": `Toggle ${s.label}`,
+          children: content
+        },
+        s.id
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { children: content }, s.id);
+  }) });
+}
+export {
+  LineGraphLegend
+};
+//# sourceMappingURL=LineGraphLegend.js.map

package/dist/components/LineGraph/LineGraphLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphLegend.js","sources":["../../../src/components/LineGraph/LineGraphLegend.tsx"],"sourcesContent":["'use client';\n\nimport { Typography } from '../Typography/Typography';\nimport { Stack } from '../Stack/Stack';\nimport { getSeriesColor } from './lineGraphUtils';\nimport type { LineGraphSeries } from './types';\n\nexport interface LineGraphLegendProps {\n  /** One or more series to render in the legend */\n  series: LineGraphSeries[];\n  /** IDs of series currently hidden */\n  hiddenIds: string[];\n  /** Fired when a series is toggled */\n  onToggle?: (id: string) => void;\n  /** Whether the legend is interactive. @default true */\n  interactive?: boolean;\n}\n\n/**\n * Custom legend component for the LineGraph.\n * Renders a list of items with colored dots/squares and series labels.\n */\nexport function LineGraphLegend({\n  series,\n  hiddenIds,\n  onToggle,\n  interactive = true,\n}: LineGraphLegendProps) {\n  return (\n    <Stack direction=\"row\" spacing=\"space-4\" justifyContent=\"center\" className=\"flex-wrap pt-space-4\">\n      {series.map((s, idx) => {\n        const isHidden = hiddenIds.includes(s.id);\n        const color = getSeriesColor(s, idx);\n        \n        const content = (\n          <Stack direction=\"row\" spacing=\"space-2\" alignItems=\"center\" className=\"py-space-1\">\n            <div\n              className=\"w-3 h-3 rounded-rad-xs shrink-0\"\n              style={{ backgroundColor: color }}\n              aria-hidden=\"true\"\n            />\n            <Typography\n              variant=\"text-xs\"\n              className={['font-semibold', isHidden ? 'text-text-disabled opacity-40' : 'text-text-secondary'].filter(Boolean).join(' ')}\n            >\n              {s.label}\n            </Typography>\n          </Stack>\n        );\n\n        if (interactive && onToggle) {\n          return (\n            <button\n              key={s.id}\n              type=\"button\"\n              className={[\n                'cursor-pointer transition-opacity border-none bg-transparent p-0',\n                isHidden ? 'opacity-50' : 'hover:opacity-80',\n              ].filter(Boolean).join(' ')}\n              onClick={() => onToggle(s.id)}\n              aria-pressed={!isHidden}\n              aria-label={`Toggle ${s.label}`}\n            >\n              {content}\n            </button>\n          );\n        }\n\n        return <div key={s.id}>{content}</div>;\n      })}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;;AAsBO;AAAyB;AAC9B;AACA;AACA;AAEF;AACE;AAGM;AACA;AAEA;AAEI;AAAA;AAAC;AAAA;AACW;AACgB;AACd;AAAA;AAAA;AAEd;AAAC;AAAA;AACS;AACiH;AAEtH;AAAA;AAAA;AAKT;AACE;AACE;AAAC;AAAA;AAEM;AACM;AACT;AAC0B;AACF;AACE;AACb;AACc;AAE5B;AAAA;AAVM;AAAA;AAeb;AAAgC;AAIxC;;;;"}

package/dist/components/LineGraph/LineGraphSkeleton.d.ts

@@ -0,0 +1,12 @@
+export interface LineGraphSkeletonProps {
+    /** Chart height in px. @default 320 */
+    height?: number;
+    /** Whether to show the title block. @default true */
+    showTitle?: boolean;
+}
+/**
+ * Loading skeleton for the LineGraph component.
+ * Mirrors the structure of a rendered chart.
+ */
+export declare function LineGraphSkeleton({ height, showTitle }: LineGraphSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LineGraphSkeleton.d.ts.map

package/dist/components/LineGraph/LineGraphSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraphSkeleton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAY,EAAE,SAAgB,EAAE,EAAE,sBAAsB,2CAqB3F"}

package/dist/components/LineGraph/LineGraphSkeleton.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { Stack } from "../Stack/Stack.js";
+function LineGraphSkeleton({ height = 320, showTitle = true }) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: "space-4", className: "w-full", children: [
+    showTitle && /* @__PURE__ */ jsxs(Stack, { spacing: "space-1", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "40%", height: "1.5rem", radius: "xs" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "1rem", radius: "xs" })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: `${height}px`, radius: "md" }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: "space-4", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "1.25rem", radius: "rounded" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "6rem", height: "1.25rem", radius: "rounded" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "1.25rem", radius: "rounded" })
+    ] })
+  ] });
+}
+export {
+  LineGraphSkeleton
+};
+//# sourceMappingURL=LineGraphSkeleton.js.map

package/dist/components/LineGraph/LineGraphSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphSkeleton.js","sources":["../../../src/components/LineGraph/LineGraphSkeleton.tsx"],"sourcesContent":["import { Skeleton } from '../Skeleton/Skeleton';\nimport { Stack } from '../Stack/Stack';\n\nexport interface LineGraphSkeletonProps {\n  /** Chart height in px. @default 320 */\n  height?: number;\n  /** Whether to show the title block. @default true */\n  showTitle?: boolean;\n}\n\n/**\n * Loading skeleton for the LineGraph component.\n * Mirrors the structure of a rendered chart.\n */\nexport function LineGraphSkeleton({ height = 320, showTitle = true }: LineGraphSkeletonProps) {\n  return (\n    <Stack spacing=\"space-4\" className=\"w-full\">\n      {showTitle && (\n        <Stack spacing=\"space-1\">\n          <Skeleton width=\"40%\" height=\"1.5rem\" radius=\"xs\" />\n          <Skeleton width=\"60%\" height=\"1rem\" radius=\"xs\" />\n        </Stack>\n      )}\n      \n      {/* Main chart area skeleton */}\n      <Skeleton width=\"100%\" height={`${height}px`} radius=\"md\" />\n\n      {/* Legend placeholder */}\n      <Stack direction=\"row\" spacing=\"space-4\" justifyContent=\"center\">\n        <Skeleton width=\"5rem\" height=\"1.25rem\" radius=\"rounded\" />\n        <Skeleton width=\"6rem\" height=\"1.25rem\" radius=\"rounded\" />\n        <Skeleton width=\"5rem\" height=\"1.25rem\" radius=\"rounded\" />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,kBAAkB,EAAE,SAAS,KAAK,YAAY,QAAgC;AAC5F,SACE,qBAAC,OAAA,EAAM,SAAQ,WAAU,WAAU,UAChC,UAAA;AAAA,IAAA,aACC,qBAAC,OAAA,EAAM,SAAQ,WACb,UAAA;AAAA,MAAA,oBAAC,YAAS,OAAM,OAAM,QAAO,UAAS,QAAO,MAAK;AAAA,0BACjD,UAAA,EAAS,OAAM,OAAM,QAAO,QAAO,QAAO,KAAA,CAAK;AAAA,IAAA,GAClD;AAAA,IAIF,oBAAC,YAAS,OAAM,QAAO,QAAQ,GAAG,MAAM,MAAM,QAAO,KAAA,CAAK;AAAA,yBAGzD,OAAA,EAAM,WAAU,OAAM,SAAQ,WAAU,gBAAe,UACtD,UAAA;AAAA,MAAA,oBAAC,YAAS,OAAM,QAAO,QAAO,WAAU,QAAO,WAAU;AAAA,0BACxD,UAAA,EAAS,OAAM,QAAO,QAAO,WAAU,QAAO,WAAU;AAAA,0BACxD,UAAA,EAAS,OAAM,QAAO,QAAO,WAAU,QAAO,UAAA,CAAU;AAAA,IAAA,EAAA,CAC3D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/LineGraph/LineGraphTooltip.d.ts

@@ -0,0 +1,12 @@
+export interface LineGraphTooltipProps {
+    active?: boolean;
+    payload?: any[];
+    label?: string | number;
+    /** Custom formatter for tooltip Y values. */
+    tooltipValueFormatter?: (value: number, seriesLabel: string) => string;
+}
+/**
+ * Custom tooltip content for the LineGraph.
+ */
+export declare function LineGraphTooltip({ active, payload, label, tooltipValueFormatter, }: LineGraphTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=LineGraphTooltip.d.ts.map

package/dist/components/LineGraph/LineGraphTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/LineGraphTooltip.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;CACxE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,KAAK,EACL,qBAAqB,GACtB,EAAE,qBAAqB,kDA0CvB"}

package/dist/components/LineGraph/LineGraphTooltip.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "../Typography/Typography.js";
+import { Stack } from "../Stack/Stack.js";
+import { formatAxisTick } from "./lineGraphUtils.js";
+function LineGraphTooltip({
+  active,
+  payload,
+  label,
+  tooltipValueFormatter
+}) {
+  if (!active || !(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-fill-bg-primary border border-border-light rounded-rad-md elevation-low px-space-3 py-space-2 min-w-[12rem]", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-secondary font-semibold mb-space-2", children: formatAxisTick(label || "") }),
+    /* @__PURE__ */ jsx(Stack, { spacing: "space-1", children: payload.map((item, index) => {
+      const color = item.color || "var(--color-neutral-400)";
+      const value = item.value;
+      const formattedValue = tooltipValueFormatter ? tooltipValueFormatter(value, item.name || "") : value.toLocaleString();
+      return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: "space-2", alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: "space-2", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-2 h-2 rounded-full shrink-0",
+              style: { backgroundColor: color },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-secondary", children: item.name })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-primary font-bold", children: formattedValue })
+      ] }, item.dataKey || index);
+    }) })
+  ] });
+}
+export {
+  LineGraphTooltip
+};
+//# sourceMappingURL=LineGraphTooltip.js.map

package/dist/components/LineGraph/LineGraphTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraphTooltip.js","sources":["../../../src/components/LineGraph/LineGraphTooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Typography } from '../Typography/Typography';\nimport { Stack } from '../Stack/Stack';\nimport { formatAxisTick } from './lineGraphUtils';\n\nexport interface LineGraphTooltipProps {\n  active?: boolean;\n  payload?: any[];\n  label?: string | number;\n  /** Custom formatter for tooltip Y values. */\n  tooltipValueFormatter?: (value: number, seriesLabel: string) => string;\n}\n\n/**\n * Custom tooltip content for the LineGraph.\n */\nexport function LineGraphTooltip({\n  active,\n  payload,\n  label,\n  tooltipValueFormatter,\n}: LineGraphTooltipProps) {\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className=\"bg-fill-bg-primary border border-border-light rounded-rad-md elevation-low px-space-3 py-space-2 min-w-[12rem]\">\n      {/* X-axis label row */}\n      <Typography variant=\"text-xs\" className=\"text-text-secondary font-semibold mb-space-2\">\n        {formatAxisTick(label || '')}\n      </Typography>\n\n      {/* Series data rows */}\n      <Stack spacing=\"space-1\">\n        {payload.map((item, index) => {\n          const color = item.color || 'var(--color-neutral-400)';\n          const value = item.value as number;\n          const formattedValue = tooltipValueFormatter\n            ? tooltipValueFormatter(value, item.name || '')\n            : value.toLocaleString();\n\n          return (\n            <Stack key={item.dataKey || index} direction=\"row\" spacing=\"space-2\" alignItems=\"center\" justifyContent=\"space-between\">\n              <Stack direction=\"row\" spacing=\"space-2\" alignItems=\"center\">\n                <div\n                  className=\"w-2 h-2 rounded-full shrink-0\"\n                  style={{ backgroundColor: color }}\n                  aria-hidden=\"true\"\n                />\n                <Typography variant=\"text-xs\" className=\"text-text-secondary\">\n                  {item.name}\n                </Typography>\n              </Stack>\n              <Typography variant=\"text-xs\" className=\"text-text-primary font-bold\">\n                {formattedValue}\n              </Typography>\n            </Stack>\n          );\n        })}\n      </Stack>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAiBO;AAA0B;AAC/B;AACA;AACA;AAEF;AACE;AACE;AAAO;AAGT;AAGI;AAEA;AAKI;AACA;AACA;AAIA;AAEI;AACE;AAAA;AAAC;AAAA;AACW;AACgB;AACd;AAAA;AAAA;AAId;AACF;AAGA;AACF;AAGN;AAGN;;;;"}

package/dist/components/LineGraph/lineGraphUtils.d.ts

@@ -0,0 +1,33 @@
+import { LineGraphSeries } from './types';
+/**
+ * Predefined color palette for chart series based on Jiwambe design tokens.
+ */
+export declare const SERIES_COLORS: string[];
+/**
+ * Returns the color for a given series, falling back to the palette if not provided.
+ */
+export declare function getSeriesColor(series: LineGraphSeries, index: number): string;
+/**
+ * Formats a value for an axis tick if no custom formatter is provided.
+ */
+export declare function formatAxisTick(value: string | number): string;
+/**
+ * Validates that all series have consistent X-axis keys.
+ * Warnings are logged to the console in development.
+ */
+export declare function validateSeries(series: LineGraphSeries[]): void;
+/**
+ * Transforms an array of grouped series data into a flattened array of objects
+ * required by recharts BarChart.
+ *
+ * E.g., merges two series with {x: 'Jan', y: 100} and {x: 'Jan', y: 200}
+ * into a single object {x: 'Jan', [series1Id]: 100, [series2Id]: 200}
+ */
+export declare function transformToBarChartData(series: Array<{
+    id: string;
+    data: Array<{
+        x: string | number;
+        y: number;
+    }>;
+}>): Record<string, string | number>[];
+//# sourceMappingURL=lineGraphUtils.d.ts.map

package/dist/components/LineGraph/lineGraphUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineGraphUtils.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/lineGraphUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,aAAa,UAOzB,CAAC;AAEF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAG7E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK7D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAa9D;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,KAAK,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;QAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAAE,CAAC,GAC5E,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,CA2BnC"}

package/dist/components/LineGraph/lineGraphUtils.js

@@ -0,0 +1,62 @@
+const SERIES_COLORS = [
+  "var(--color-green-500)",
+  "var(--color-neutral-400)",
+  // Closest equivalent for blue in the current palette
+  "var(--color-yellow-500)",
+  "var(--color-red-500)",
+  "var(--color-neutral-600)",
+  "var(--color-green-300)"
+];
+function getSeriesColor(series, index) {
+  if (series.color) return series.color;
+  return SERIES_COLORS[index % SERIES_COLORS.length];
+}
+function formatAxisTick(value) {
+  if (typeof value === "number") {
+    return value.toLocaleString();
+  }
+  return String(value);
+}
+function validateSeries(series) {
+  if (series.length < 2) return;
+  const firstSeriesKeys = series[0].data.map((p) => p.x).join(",");
+  for (let i = 1; i < series.length; i++) {
+    const currentKeys = series[i].data.map((p) => p.x).join(",");
+    if (currentKeys !== firstSeriesKeys) {
+      console.warn(
+        `Jiwambe LineGraph: Series "${series[i].label}" (index ${i}) has different X-axis points than the first series. This may cause rendering artifacts.`
+      );
+    }
+  }
+}
+function transformToBarChartData(series) {
+  const dataMap = /* @__PURE__ */ new Map();
+  series.forEach((s) => {
+    s.data.forEach((point) => {
+      let entry = dataMap.get(point.x);
+      if (!entry) {
+        entry = { x: point.x };
+        dataMap.set(point.x, entry);
+      }
+      entry[s.id] = point.y;
+    });
+  });
+  const allIds = series.map((s) => s.id);
+  const result = Array.from(dataMap.values());
+  result.forEach((entry) => {
+    allIds.forEach((id) => {
+      if (!(id in entry)) {
+        entry[id] = void 0;
+      }
+    });
+  });
+  return result;
+}
+export {
+  SERIES_COLORS,
+  formatAxisTick,
+  getSeriesColor,
+  transformToBarChartData,
+  validateSeries
+};
+//# sourceMappingURL=lineGraphUtils.js.map

package/dist/components/LineGraph/lineGraphUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineGraphUtils.js","sources":["../../../src/components/LineGraph/lineGraphUtils.ts"],"sourcesContent":["/**\n * Predefined color palette for chart series based on Jiwambe design tokens.\n */\nexport const SERIES_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-neutral-400)', // Closest equivalent for blue in the current palette\n  'var(--color-yellow-500)',\n  'var(--color-red-500)',\n  'var(--color-neutral-600)',\n  'var(--color-green-300)',\n];\n\nimport type { LineGraphSeries } from './types';\n\n/**\n * Returns the color for a given series, falling back to the palette if not provided.\n */\nexport function getSeriesColor(series: LineGraphSeries, index: number): string {\n  if (series.color) return series.color;\n  return SERIES_COLORS[index % SERIES_COLORS.length];\n}\n\n/**\n * Formats a value for an axis tick if no custom formatter is provided.\n */\nexport function formatAxisTick(value: string | number): string {\n  if (typeof value === 'number') {\n    return value.toLocaleString();\n  }\n  return String(value);\n}\n\n/**\n * Validates that all series have consistent X-axis keys.\n * Warnings are logged to the console in development.\n */\nexport function validateSeries(series: LineGraphSeries[]): void {\n  if (series.length < 2) return;\n\n  const firstSeriesKeys = series[0].data.map((p: any) => p.x).join(',');\n  \n  for (let i = 1; i < series.length; i++) {\n    const currentKeys = series[i].data.map((p: any) => p.x).join(',');\n    if (currentKeys !== firstSeriesKeys) {\n      console.warn(\n        `Jiwambe LineGraph: Series \"${series[i].label}\" (index ${i}) has different X-axis points than the first series. This may cause rendering artifacts.`\n      );\n    }\n  }\n}\n\n/**\n * Transforms an array of grouped series data into a flattened array of objects\n * required by recharts BarChart.\n * \n * E.g., merges two series with {x: 'Jan', y: 100} and {x: 'Jan', y: 200}\n * into a single object {x: 'Jan', [series1Id]: 100, [series2Id]: 200}\n */\nexport function transformToBarChartData(\n  series: Array<{ id: string; data: Array<{ x: string | number; y: number }> }>\n): Record<string, string | number>[] {\n  const dataMap = new Map<string | number, Record<string, string | number>>();\n  \n  series.forEach(s => {\n    s.data.forEach(point => {\n      let entry = dataMap.get(point.x);\n      if (!entry) {\n        entry = { x: point.x };\n        dataMap.set(point.x, entry);\n      }\n      entry[s.id] = point.y;\n    });\n  });\n\n  // Ensure all keys exist on all objects (missing keys -> undefined)\n  const allIds = series.map(s => s.id);\n  const result = Array.from(dataMap.values());\n  \n  result.forEach(entry => {\n    allIds.forEach(id => {\n      if (!(id in entry)) {\n        entry[id] = undefined as any;\n      }\n    });\n  });\n\n  return result;\n}\n"],"names":[],"mappings":"AAGO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,SAAS,eAAe,QAAyB,OAAuB;AAC7E,MAAI,OAAO,MAAO,QAAO,OAAO;AAChC,SAAO,cAAc,QAAQ,cAAc,MAAM;AACnD;AAKO,SAAS,eAAe,OAAgC;AAC7D,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,MAAM,eAAA;AAAA,EACf;AACA,SAAO,OAAO,KAAK;AACrB;AAMO,SAAS,eAAe,QAAiC;AAC9D,MAAI,OAAO,SAAS,EAAG;AAEvB,QAAM,kBAAkB,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,MAAW,EAAE,CAAC,EAAE,KAAK,GAAG;AAEpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,cAAc,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,MAAW,EAAE,CAAC,EAAE,KAAK,GAAG;AAChE,QAAI,gBAAgB,iBAAiB;AACnC,cAAQ;AAAA,QACN,8BAA8B,OAAO,CAAC,EAAE,KAAK,YAAY,CAAC;AAAA,MAAA;AAAA,IAE9D;AAAA,EACF;AACF;AASO,SAAS,wBACd,QACmC;AACnC,QAAM,8BAAc,IAAA;AAEpB,SAAO,QAAQ,CAAA,MAAK;AAClB,MAAE,KAAK,QAAQ,CAAA,UAAS;AACtB,UAAI,QAAQ,QAAQ,IAAI,MAAM,CAAC;AAC/B,UAAI,CAAC,OAAO;AACV,gBAAQ,EAAE,GAAG,MAAM,EAAA;AACnB,gBAAQ,IAAI,MAAM,GAAG,KAAK;AAAA,MAC5B;AACA,YAAM,EAAE,EAAE,IAAI,MAAM;AAAA,IACtB,CAAC;AAAA,EACH,CAAC;AAGD,QAAM,SAAS,OAAO,IAAI,CAAA,MAAK,EAAE,EAAE;AACnC,QAAM,SAAS,MAAM,KAAK,QAAQ,QAAQ;AAE1C,SAAO,QAAQ,CAAA,UAAS;AACtB,WAAO,QAAQ,CAAA,OAAM;AACnB,UAAI,EAAE,MAAM,QAAQ;AAClB,cAAM,EAAE,IAAI;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;"}

package/dist/components/LineGraph/types.d.ts

@@ -0,0 +1,21 @@
+export interface LineGraphDataPoint {
+    /** X-axis value — can be a date string, label, or number */
+    x: string | number;
+    /** Y-axis numeric value */
+    y: number;
+}
+export interface LineGraphSeries {
+    /** Unique identifier for this series */
+    id: string;
+    /** Display label shown in legend and tooltip */
+    label: string;
+    /** Data points for this series. x must be consistent across all series. */
+    data: LineGraphDataPoint[];
+    /** Optional override color. Must be a valid CSS color or Jiwambe variable. */
+    color?: string;
+    /** Render this series as dashed */
+    dashed?: boolean;
+    /** Hide this series from the chart but keep it in the legend */
+    hidden?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/LineGraph/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LineGraph/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,2BAA2B;IAC3B,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/Link/Link.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Link.test.d.ts.map

package/dist/components/Link/Link.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.test.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.test.tsx"],"names":[],"mappings":""}

package/dist/components/List/List.d.ts

@@ -3,9 +3,11 @@ import { ListProps, ListItemProps } from '../../types/list';
  * Semantic list component. Renders a <ul> or <ol> with consistent
  * marker styling and item spacing using design system tokens.
  *
- * For marker="disc" and marker="decimal", the list uses block layout and
- * margin on items (not flex/gap) so list-style-position: outside and markers
- * render reliably. For marker="none", flex + gap is used.
+ * For marker="disc" and marker="decimal", the root list uses inline block
+ * layout and list-style so markers show even with Tailwind preflight; vertical
+ * spacing uses item margins from the plugin. For marker="none", inline flex,
+ * column direction, and gap replace Tailwind utility classes so spacing works
+ * without extra consumer CSS.
  *
  * Use indent (e.g. indent="space-list-indent" for 27px) and itemPadding="none"
  * for legal/body-copy lists.

package/dist/components/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAuB1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAe,EACf,OAAmB,EACnB,MAAM,EACN,WAAuB,EACvB,SAAc,EACd,KAAK,EACL,QAAQ,GACT,EAAE,SAAS,2CA+BX;yBAvCe,IAAI;sDAkDjB,aAAa"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAiE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAe,EACf,OAAmB,EACnB,MAAM,EACN,WAAuB,EACvB,SAAc,EACd,KAAK,EACL,QAAQ,GACT,EAAE,SAAS,2CA6BX;yBArCe,IAAI;sDAgDjB,aAAa"}