@dev-dga/react 0.11.0 → 0.12.1

package/dist/chunk-O7BBEN7E.cjs

@@ -0,0 +1,503 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkFQLVTLUIcjs = require('./chunk-FQLVTLUI.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/Charts/Charts.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var CATEGORICAL = [1, 2, 3, 4, 5, 6].map((n) => `var(--ddga-chart-${n})`);
+var BRAND_PIE = [
+  "var(--ddga-sa-600)",
+  "var(--ddga-sa-400)",
+  "var(--ddga-sa-200)",
+  "var(--ddga-success-600)",
+  "var(--ddga-sa-800)",
+  "var(--ddga-sa-flag)"
+];
+var BRAND_LINE = ["var(--ddga-sa-flag)", "var(--ddga-sa-600)", "var(--ddga-sa-200)"];
+var BRAND_BAR = ["var(--ddga-sa-600)", "var(--ddga-sa-400)", "var(--ddga-gray-200)"];
+function paletteColor(palette, i, override, brandRamp = BRAND_PIE) {
+  if (override) return override;
+  const ramp = palette === "brand" ? brandRamp : CATEGORICAL;
+  return ramp[i % ramp.length];
+}
+function niceScale(max, tickCount = 8) {
+  const safeMax = max > 0 ? max : 1;
+  const rawStep = safeMax / tickCount;
+  const pow = Math.pow(10, Math.floor(Math.log10(rawStep)));
+  const n = rawStep / pow;
+  const step = (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * pow;
+  const niceMax = Math.ceil(safeMax / step) * step;
+  const ticks = [];
+  for (let v = 0; v <= niceMax + step / 1e3; v += step) ticks.push(Math.round(v * 1e3) / 1e3);
+  return { max: niceMax, ticks };
+}
+function polar(cx, cy, r, a) {
+  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+}
+function slicePath(cx, cy, rOuter, rInner, a0, a1) {
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, rOuter, a0);
+  const [x1, y1] = polar(cx, cy, rOuter, a1);
+  if (rInner <= 0) {
+    return `M ${cx} ${cy} L ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} Z`;
+  }
+  const [xi0, yi0] = polar(cx, cy, rInner, a1);
+  const [xi1, yi1] = polar(cx, cy, rInner, a0);
+  return `M ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} L ${xi0} ${yi0} A ${rInner} ${rInner} 0 ${large} 0 ${xi1} ${yi1} Z`;
+}
+function linePath(pts, smooth) {
+  if (pts.length === 0) return "";
+  if (!smooth || pts.length < 3) return `M ${pts.map((p) => `${p.x} ${p.y}`).join(" L ")}`;
+  let d = `M ${pts[0].x} ${pts[0].y}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = _nullishCoalesce(pts[i - 1], () => ( pts[i]));
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = _nullishCoalesce(pts[i + 2], () => ( p2));
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${c1x} ${c1y} ${c2x} ${c2y} ${p2.x} ${p2.y}`;
+  }
+  return d;
+}
+function ChartLegend({ items }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "ddga-charts__legend", "data-slot": "chart-legend", children: items.map((it, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "ddga-charts__legend-item", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: "ddga-charts__mark",
+        style: { backgroundColor: it.color },
+        "aria-hidden": "true"
+      }
+    ),
+    it.label
+  ] }, i)) });
+}
+function DataTable({
+  caption,
+  rowHeader,
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "ddga-charts__sr-only", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "caption", { children: caption }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { scope: "col", children: rowHeader }),
+      columns.map((c, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { scope: "col", children: c }, i))
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: rows.map((r, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { scope: "row", children: r.label }),
+      r.values.map((v, j) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: v }, j))
+    ] }, i)) })
+  ] });
+}
+var AXIS_TEXT = "var(--ddga-charts-axis)";
+var GRID = "var(--ddga-charts-grid)";
+function PieChart({
+  data,
+  donut = false,
+  size = 240,
+  palette = "categorical",
+  legend = true,
+  title = "Pie chart",
+  className,
+  ...props
+}) {
+  const total = data.reduce((s, d) => s + Math.max(0, d.value), 0) || 1;
+  const cx = size / 2;
+  const cy = size / 2;
+  const rOuter = size / 2;
+  const rInner = donut ? size / 4 : 0;
+  const colors = data.map((d, i) => paletteColor(palette, i, d.color));
+  const fracs = data.map((d) => Math.max(0, d.value) / total);
+  const slices = data.map((_, i) => {
+    const startFrac = fracs.slice(0, i).reduce((s, f) => s + f, 0);
+    const a0 = -Math.PI / 2 + startFrac * Math.PI * 2;
+    const a1 = a0 + fracs[i] * Math.PI * 2;
+    return { i, a0, a1 };
+  });
+  const legendItems = data.map((d, i) => ({ label: d.label, color: colors[i] }));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "figure",
+    {
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-charts", "ddga-charts--pie", className),
+      "data-slot": "chart",
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: "ddga-charts__plot",
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            role: "img",
+            "aria-label": title,
+            children: slices.length === 1 ? rInner > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
+              {
+                d: `${slicePath(cx, cy, rOuter, rInner, 0, Math.PI)} ${slicePath(cx, cy, rOuter, rInner, Math.PI, Math.PI * 2)}`,
+                fill: colors[0]
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx, cy, r: rOuter, fill: colors[0] }) : slices.map(({ a0, a1, i }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: slicePath(cx, cy, rOuter, rInner, a0, a1), fill: colors[i] }, i))
+          }
+        ),
+        legend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLegend, { items: legendItems }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DataTable,
+          {
+            caption: title,
+            rowHeader: "Segment",
+            columns: ["Value", "Share"],
+            rows: data.map((d) => ({
+              label: d.label,
+              values: [d.value, `${Math.round(Math.max(0, d.value) / total * 100)}%`]
+            }))
+          }
+        )
+      ]
+    }
+  );
+}
+function useCartesianLayout(yMaxData, yMaxProp, width, height, hasX, hasY) {
+  const dir = _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, _chunkFQLVTLUIcjs.DgaContext), 'optionalAccess', _2 => _2.dir]), () => ( "ltr"));
+  const rtl = dir === "rtl";
+  const { max: yMax, ticks } = niceScale(_nullishCoalesce(yMaxProp, () => ( yMaxData)));
+  const insetAxis = hasY ? 64 : 46;
+  const insetOpp = 12;
+  const top = 10;
+  const bottom = hasX ? 46 : 26;
+  const plotLeft = rtl ? insetOpp : insetAxis;
+  const plotRight = width - (rtl ? insetAxis : insetOpp);
+  const plotTop = top;
+  const plotBottom = height - bottom;
+  const plotW = plotRight - plotLeft;
+  const plotH = plotBottom - plotTop;
+  const xAt = (t) => rtl ? plotRight - t * plotW : plotLeft + t * plotW;
+  const yAt = (v) => plotBottom - Math.max(0, v) / yMax * plotH;
+  return { rtl, yMax, ticks, plotLeft, plotRight, plotTop, plotBottom, plotW, plotH, xAt, yAt };
+}
+function Gridlines({
+  ticks,
+  yAt,
+  plotLeft,
+  plotRight,
+  rtl,
+  labelX
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { "aria-hidden": "true", children: ticks.map((t, i) => {
+    const y = yAt(t);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: plotLeft, x2: plotRight, y1: y, y2: y, stroke: GRID, strokeWidth: 1 }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "text",
+        {
+          x: labelX,
+          y: y + 4,
+          fill: AXIS_TEXT,
+          fontSize: 14,
+          textAnchor: rtl ? "start" : "end",
+          children: t
+        }
+      )
+    ] }, i);
+  }) });
+}
+function XLabels({
+  categories,
+  centerT,
+  xAt,
+  y
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { "aria-hidden": "true", children: categories.map((c, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", { x: xAt(centerT(i)), y, fill: AXIS_TEXT, fontSize: 14, textAnchor: "middle", children: c }, i)) });
+}
+function AxisTitles({
+  xAxisLabel,
+  yAxisLabel,
+  width,
+  height,
+  plotLeft,
+  plotRight,
+  plotTop,
+  plotBottom,
+  rtl
+}) {
+  const midX = (plotLeft + plotRight) / 2;
+  const midY = (plotTop + plotBottom) / 2;
+  const yTitleX = rtl ? width - 10 : 12;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { "aria-hidden": "true", children: [
+    xAxisLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "text",
+      {
+        x: midX,
+        y: height - 6,
+        fill: AXIS_TEXT,
+        fontSize: 14,
+        fontWeight: 500,
+        textAnchor: "middle",
+        children: xAxisLabel
+      }
+    ),
+    yAxisLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "text",
+      {
+        x: yTitleX,
+        y: midY,
+        fill: AXIS_TEXT,
+        fontSize: 14,
+        fontWeight: 500,
+        textAnchor: "middle",
+        transform: `rotate(-90 ${yTitleX} ${midY})`,
+        children: yAxisLabel
+      }
+    )
+  ] });
+}
+function LineChart({
+  series,
+  categories,
+  palette = "brand",
+  legend = true,
+  title = "Line chart",
+  xAxisLabel,
+  yAxisLabel,
+  yMax: yMaxProp,
+  width = 520,
+  height = 280,
+  area = true,
+  curve = "smooth",
+  className,
+  ...props
+}) {
+  const gid = _react.useId.call(void 0, );
+  const n = categories.length;
+  const yMaxData = Math.max(0, ...series.flatMap((s) => s.data));
+  const L = useCartesianLayout(yMaxData, yMaxProp, width, height, !!xAxisLabel, !!yAxisLabel);
+  const centerT = (i) => n <= 1 ? 0.5 : i / (n - 1);
+  const colors = series.map((s, i) => paletteColor(palette, i, s.color, BRAND_LINE));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "figure",
+    {
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-charts", "ddga-charts--line", className),
+      "data-slot": "chart",
+      ...props,
+      children: [
+        legend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLegend, { items: series.map((s, i) => ({ label: s.label, color: colors[i] })) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "svg",
+          {
+            className: "ddga-charts__plot",
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": title,
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                Gridlines,
+                {
+                  ticks: L.ticks,
+                  yAt: L.yAt,
+                  plotLeft: L.plotLeft,
+                  plotRight: L.plotRight,
+                  rtl: L.rtl,
+                  labelX: L.rtl ? L.plotRight + 8 : L.plotLeft - 8
+                }
+              ),
+              series.map((s, si) => {
+                const pts = s.data.map((v, i) => ({ x: L.xAt(centerT(i)), y: L.yAt(v) }));
+                const color = colors[si];
+                const path = linePath(pts, curve === "smooth");
+                return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
+                  area && pts.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "linearGradient", { id: `${gid}-${si}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+                    ] }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "path",
+                      {
+                        d: `${path} L ${pts[pts.length - 1].x} ${L.plotBottom} L ${pts[0].x} ${L.plotBottom} Z`,
+                        fill: `url(#${gid}-${si})`
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "path",
+                    {
+                      d: path,
+                      fill: "none",
+                      stroke: color,
+                      strokeWidth: 2,
+                      strokeLinejoin: "round",
+                      strokeLinecap: "round"
+                    }
+                  )
+                ] }, si);
+              }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XLabels, { categories, centerT, xAt: L.xAt, y: L.plotBottom + 20 }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                AxisTitles,
+                {
+                  xAxisLabel,
+                  yAxisLabel,
+                  width,
+                  height,
+                  plotLeft: L.plotLeft,
+                  plotRight: L.plotRight,
+                  plotTop: L.plotTop,
+                  plotBottom: L.plotBottom,
+                  rtl: L.rtl
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DataTable,
+          {
+            caption: title,
+            rowHeader: "Series",
+            columns: categories,
+            rows: series.map((s) => ({ label: s.label, values: s.data }))
+          }
+        )
+      ]
+    }
+  );
+}
+function BarChart({
+  series,
+  categories,
+  palette = "brand",
+  legend = true,
+  title = "Bar chart",
+  xAxisLabel,
+  yAxisLabel,
+  yMax: yMaxProp,
+  width = 520,
+  height = 280,
+  stacked = true,
+  className,
+  ...props
+}) {
+  const n = categories.length;
+  const stackTotals = categories.map(
+    (_, ci) => series.reduce((s, ser) => s + Math.max(0, _nullishCoalesce(ser.data[ci], () => ( 0))), 0)
+  );
+  const groupedMax = Math.max(0, ...series.flatMap((s) => s.data));
+  const yMaxData = stacked ? Math.max(0, ...stackTotals) : groupedMax;
+  const L = useCartesianLayout(yMaxData, yMaxProp, width, height, !!xAxisLabel, !!yAxisLabel);
+  const centerT = (i) => (i + 0.5) / n;
+  const band = L.plotW / n;
+  const colors = series.map((s, i) => paletteColor(palette, i, s.color, BRAND_BAR));
+  const barW = Math.min(32, band * 0.54);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "figure",
+    {
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-charts", "ddga-charts--bar", className),
+      "data-slot": "chart",
+      ...props,
+      children: [
+        legend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChartLegend, { items: series.map((s, i) => ({ label: s.label, color: colors[i] })) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "svg",
+          {
+            className: "ddga-charts__plot",
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": title,
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                Gridlines,
+                {
+                  ticks: L.ticks,
+                  yAt: L.yAt,
+                  plotLeft: L.plotLeft,
+                  plotRight: L.plotRight,
+                  rtl: L.rtl,
+                  labelX: L.rtl ? L.plotRight + 8 : L.plotLeft - 8
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { children: categories.map((_, ci) => {
+                const cxp = L.xAt(centerT(ci));
+                if (stacked) {
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { children: series.map((s, si) => {
+                    const v = Math.max(0, _nullishCoalesce(s.data[ci], () => ( 0)));
+                    const h = v / L.yMax * L.plotH;
+                    const below = series.slice(0, si).reduce((sum, ser) => sum + Math.max(0, _nullishCoalesce(ser.data[ci], () => ( 0))), 0);
+                    const y = L.plotBottom - (below + v) / L.yMax * L.plotH;
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "rect",
+                      {
+                        x: cxp - barW / 2,
+                        y,
+                        width: barW,
+                        height: h,
+                        fill: colors[si]
+                      },
+                      si
+                    );
+                  }) }, ci);
+                }
+                const subW = barW / series.length;
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { children: series.map((s, si) => {
+                  const v = Math.max(0, _nullishCoalesce(s.data[ci], () => ( 0)));
+                  const h = v / L.yMax * L.plotH;
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "rect",
+                    {
+                      x: cxp - barW / 2 + si * subW,
+                      y: L.plotBottom - h,
+                      width: subW,
+                      height: h,
+                      fill: colors[si]
+                    },
+                    si
+                  );
+                }) }, ci);
+              }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XLabels, { categories, centerT, xAt: L.xAt, y: L.plotBottom + 20 }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                AxisTitles,
+                {
+                  xAxisLabel,
+                  yAxisLabel,
+                  width,
+                  height,
+                  plotLeft: L.plotLeft,
+                  plotRight: L.plotRight,
+                  plotTop: L.plotTop,
+                  plotBottom: L.plotBottom,
+                  rtl: L.rtl
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DataTable,
+          {
+            caption: title,
+            rowHeader: "Series",
+            columns: categories,
+            rows: series.map((s) => ({ label: s.label, values: s.data }))
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+
+
+exports.PieChart = PieChart; exports.LineChart = LineChart; exports.BarChart = BarChart;
+//# sourceMappingURL=chunk-O7BBEN7E.cjs.map

package/dist/chunk-O7BBEN7E.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-O7BBEN7E.cjs","../src/components/Charts/Charts.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-O7BBEN7E.cjs","sourcesContent":[null,"'use client';\n\nimport { useContext, useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport { DgaContext } from '../../providers/DgaContext';\n\n/** One category/series datum. */\nexport interface ChartSeries {\n  /** Series name shown in the legend + data table. */\n  label: string;\n  /** One value per category (same length/order as `categories`). */\n  data: number[];\n  /** Override the palette colour for this series (any CSS colour). */\n  color?: string;\n}\n\n/** One pie/donut slice. */\nexport interface ChartSlice {\n  label: string;\n  value: number;\n  color?: string;\n}\n\ntype Palette = 'categorical' | 'brand';\n\nconst CATEGORICAL = [1, 2, 3, 4, 5, 6].map((n) => `var(--ddga-chart-${n})`);\n// SDGA brand ramps differ per chart type.\nconst BRAND_PIE = [\n  'var(--ddga-sa-600)',\n  'var(--ddga-sa-400)',\n  'var(--ddga-sa-200)',\n  'var(--ddga-success-600)',\n  'var(--ddga-sa-800)',\n  'var(--ddga-sa-flag)',\n];\nconst BRAND_LINE = ['var(--ddga-sa-flag)', 'var(--ddga-sa-600)', 'var(--ddga-sa-200)'];\nconst BRAND_BAR = ['var(--ddga-sa-600)', 'var(--ddga-sa-400)', 'var(--ddga-gray-200)'];\n\nfunction paletteColor(\n  palette: Palette,\n  i: number,\n  override?: string,\n  brandRamp: string[] = BRAND_PIE,\n): string {\n  if (override) return override;\n  const ramp = palette === 'brand' ? brandRamp : CATEGORICAL;\n  return ramp[i % ramp.length];\n}\n\n/** 0 → niceMax scale with ~`tickCount` round steps (SDGA charts show 0–800 step 100). */\nfunction niceScale(max: number, tickCount = 8): { max: number; ticks: number[] } {\n  const safeMax = max > 0 ? max : 1;\n  const rawStep = safeMax / tickCount;\n  const pow = Math.pow(10, Math.floor(Math.log10(rawStep)));\n  const n = rawStep / pow;\n  const step = (n <= 1 ? 1 : n <= 2 ? 2 : n <= 5 ? 5 : 10) * pow;\n  const niceMax = Math.ceil(safeMax / step) * step;\n  const ticks: number[] = [];\n  for (let v = 0; v <= niceMax + step / 1000; v += step) ticks.push(Math.round(v * 1000) / 1000);\n  return { max: niceMax, ticks };\n}\n\nfunction polar(cx: number, cy: number, r: number, a: number): [number, number] {\n  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];\n}\n\n/** Annulus (or full pie when rInner=0) slice between two angles. */\nfunction slicePath(\n  cx: number,\n  cy: number,\n  rOuter: number,\n  rInner: number,\n  a0: number,\n  a1: number,\n): string {\n  const large = a1 - a0 > Math.PI ? 1 : 0;\n  const [x0, y0] = polar(cx, cy, rOuter, a0);\n  const [x1, y1] = polar(cx, cy, rOuter, a1);\n  if (rInner <= 0) {\n    return `M ${cx} ${cy} L ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} Z`;\n  }\n  const [xi0, yi0] = polar(cx, cy, rInner, a1);\n  const [xi1, yi1] = polar(cx, cy, rInner, a0);\n  return `M ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} L ${xi0} ${yi0} A ${rInner} ${rInner} 0 ${large} 0 ${xi1} ${yi1} Z`;\n}\n\nfunction linePath(pts: { x: number; y: number }[], smooth: boolean): string {\n  if (pts.length === 0) return '';\n  if (!smooth || pts.length < 3) return `M ${pts.map((p) => `${p.x} ${p.y}`).join(' L ')}`;\n  let d = `M ${pts[0].x} ${pts[0].y}`;\n  for (let i = 0; i < pts.length - 1; i++) {\n    const p0 = pts[i - 1] ?? pts[i];\n    const p1 = pts[i];\n    const p2 = pts[i + 1];\n    const p3 = pts[i + 2] ?? p2;\n    const c1x = p1.x + (p2.x - p0.x) / 6;\n    const c1y = p1.y + (p2.y - p0.y) / 6;\n    const c2x = p2.x - (p3.x - p1.x) / 6;\n    const c2y = p2.y - (p3.y - p1.y) / 6;\n    d += ` C ${c1x} ${c1y} ${c2x} ${c2y} ${p2.x} ${p2.y}`;\n  }\n  return d;\n}\n\ninterface LegendItem {\n  label: string;\n  color: string;\n}\n\nfunction ChartLegend({ items }: { items: LegendItem[] }) {\n  return (\n    <ul className=\"ddga-charts__legend\" data-slot=\"chart-legend\">\n      {items.map((it, i) => (\n        <li key={i} className=\"ddga-charts__legend-item\">\n          <span\n            className=\"ddga-charts__mark\"\n            style={{ backgroundColor: it.color }}\n            aria-hidden=\"true\"\n          />\n          {it.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** Visually-hidden data table — the accessible fallback for the `role=\"img\"` plot. */\nfunction DataTable({\n  caption,\n  rowHeader,\n  columns,\n  rows,\n}: {\n  caption: string;\n  rowHeader: string;\n  columns: string[];\n  rows: { label: string; values: (number | string)[] }[];\n}) {\n  return (\n    <table className=\"ddga-charts__sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">{rowHeader}</th>\n          {columns.map((c, i) => (\n            <th key={i} scope=\"col\">\n              {c}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r, i) => (\n          <tr key={i}>\n            <th scope=\"row\">{r.label}</th>\n            {r.values.map((v, j) => (\n              <td key={j}>{v}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\nconst AXIS_TEXT = 'var(--ddga-charts-axis)';\nconst GRID = 'var(--ddga-charts-grid)';\n\ninterface CommonChartProps extends Omit<React.ComponentProps<'figure'>, 'children'> {\n  /** Colour set: DGA categorical (default) or the monochrome brand-green sequence. */\n  palette?: Palette;\n  /** Show the legend. @default true */\n  legend?: boolean;\n  /** Accessible name for the chart (also the data-table caption). */\n  title?: string;\n}\n\n// ─────────────────────────── PieChart ───────────────────────────\n\nexport interface PieChartProps extends CommonChartProps {\n  data: ChartSlice[];\n  /** Render a donut (50% hole) instead of a full pie. */\n  donut?: boolean;\n  /** Disk diameter in px. @default 240 */\n  size?: number;\n}\n\nexport function PieChart({\n  data,\n  donut = false,\n  size = 240,\n  palette = 'categorical',\n  legend = true,\n  title = 'Pie chart',\n  className,\n  ...props\n}: PieChartProps) {\n  const total = data.reduce((s, d) => s + Math.max(0, d.value), 0) || 1;\n  const cx = size / 2;\n  const cy = size / 2;\n  const rOuter = size / 2;\n  const rInner = donut ? size / 4 : 0;\n  const colors = data.map((d, i) => paletteColor(palette, i, d.color));\n\n  const fracs = data.map((d) => Math.max(0, d.value) / total);\n  const slices = data.map((_, i) => {\n    const startFrac = fracs.slice(0, i).reduce((s, f) => s + f, 0);\n    const a0 = -Math.PI / 2 + startFrac * Math.PI * 2;\n    const a1 = a0 + fracs[i] * Math.PI * 2;\n    return { i, a0, a1 };\n  });\n\n  const legendItems: LegendItem[] = data.map((d, i) => ({ label: d.label, color: colors[i] }));\n\n  return (\n    <figure\n      className={cn('ddga-charts', 'ddga-charts--pie', className)}\n      data-slot=\"chart\"\n      {...props}\n    >\n      <svg\n        className=\"ddga-charts__plot\"\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        role=\"img\"\n        aria-label={title}\n      >\n        {slices.length === 1 ? (\n          rInner > 0 ? (\n            <path\n              d={`${slicePath(cx, cy, rOuter, rInner, 0, Math.PI)} ${slicePath(cx, cy, rOuter, rInner, Math.PI, Math.PI * 2)}`}\n              fill={colors[0]}\n            />\n          ) : (\n            <circle cx={cx} cy={cy} r={rOuter} fill={colors[0]} />\n          )\n        ) : (\n          slices.map(({ a0, a1, i }) => (\n            <path key={i} d={slicePath(cx, cy, rOuter, rInner, a0, a1)} fill={colors[i]} />\n          ))\n        )}\n      </svg>\n      {legend && <ChartLegend items={legendItems} />}\n      <DataTable\n        caption={title}\n        rowHeader=\"Segment\"\n        columns={['Value', 'Share']}\n        rows={data.map((d) => ({\n          label: d.label,\n          values: [d.value, `${Math.round((Math.max(0, d.value) / total) * 100)}%`],\n        }))}\n      />\n    </figure>\n  );\n}\n\n// ─────────────────────── Line & Bar shared layout ───────────────────────\n\ninterface CartesianProps extends CommonChartProps {\n  series: ChartSeries[];\n  categories: string[];\n  /** X-axis title. */\n  xAxisLabel?: string;\n  /** Y-axis title (rotated). */\n  yAxisLabel?: string;\n  /** Force the Y-axis maximum (default: auto, rounded to a nice value). */\n  yMax?: number;\n  /** viewBox width / height. Charts scale responsively to their container. */\n  width?: number;\n  height?: number;\n}\n\nfunction useCartesianLayout(\n  yMaxData: number,\n  yMaxProp: number | undefined,\n  width: number,\n  height: number,\n  hasX: boolean,\n  hasY: boolean,\n) {\n  const dir = useContext(DgaContext)?.dir ?? 'ltr';\n  const rtl = dir === 'rtl';\n  const { max: yMax, ticks } = niceScale(yMaxProp ?? yMaxData);\n  const insetAxis = hasY ? 64 : 46;\n  const insetOpp = 12;\n  const top = 10;\n  const bottom = hasX ? 46 : 26;\n  const plotLeft = rtl ? insetOpp : insetAxis;\n  const plotRight = width - (rtl ? insetAxis : insetOpp);\n  const plotTop = top;\n  const plotBottom = height - bottom;\n  const plotW = plotRight - plotLeft;\n  const plotH = plotBottom - plotTop;\n  const xAt = (t: number) => (rtl ? plotRight - t * plotW : plotLeft + t * plotW);\n  const yAt = (v: number) => plotBottom - (Math.max(0, v) / yMax) * plotH;\n  return { rtl, yMax, ticks, plotLeft, plotRight, plotTop, plotBottom, plotW, plotH, xAt, yAt };\n}\n\nfunction Gridlines({\n  ticks,\n  yAt,\n  plotLeft,\n  plotRight,\n  rtl,\n  labelX,\n}: {\n  ticks: number[];\n  yAt: (v: number) => number;\n  plotLeft: number;\n  plotRight: number;\n  rtl: boolean;\n  labelX: number;\n}) {\n  return (\n    <g aria-hidden=\"true\">\n      {ticks.map((t, i) => {\n        const y = yAt(t);\n        return (\n          <g key={i}>\n            <line x1={plotLeft} x2={plotRight} y1={y} y2={y} stroke={GRID} strokeWidth={1} />\n            <text\n              x={labelX}\n              y={y + 4}\n              fill={AXIS_TEXT}\n              fontSize={14}\n              textAnchor={rtl ? 'start' : 'end'}\n            >\n              {t}\n            </text>\n          </g>\n        );\n      })}\n    </g>\n  );\n}\n\nfunction XLabels({\n  categories,\n  centerT,\n  xAt,\n  y,\n}: {\n  categories: string[];\n  centerT: (i: number) => number;\n  xAt: (t: number) => number;\n  y: number;\n}) {\n  return (\n    <g aria-hidden=\"true\">\n      {categories.map((c, i) => (\n        <text key={i} x={xAt(centerT(i))} y={y} fill={AXIS_TEXT} fontSize={14} textAnchor=\"middle\">\n          {c}\n        </text>\n      ))}\n    </g>\n  );\n}\n\nfunction AxisTitles({\n  xAxisLabel,\n  yAxisLabel,\n  width,\n  height,\n  plotLeft,\n  plotRight,\n  plotTop,\n  plotBottom,\n  rtl,\n}: {\n  xAxisLabel?: string;\n  yAxisLabel?: string;\n  width: number;\n  height: number;\n  plotLeft: number;\n  plotRight: number;\n  plotTop: number;\n  plotBottom: number;\n  rtl: boolean;\n}) {\n  const midX = (plotLeft + plotRight) / 2;\n  const midY = (plotTop + plotBottom) / 2;\n  const yTitleX = rtl ? width - 10 : 12;\n  return (\n    <g aria-hidden=\"true\">\n      {xAxisLabel && (\n        <text\n          x={midX}\n          y={height - 6}\n          fill={AXIS_TEXT}\n          fontSize={14}\n          fontWeight={500}\n          textAnchor=\"middle\"\n        >\n          {xAxisLabel}\n        </text>\n      )}\n      {yAxisLabel && (\n        <text\n          x={yTitleX}\n          y={midY}\n          fill={AXIS_TEXT}\n          fontSize={14}\n          fontWeight={500}\n          textAnchor=\"middle\"\n          transform={`rotate(-90 ${yTitleX} ${midY})`}\n        >\n          {yAxisLabel}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ─────────────────────────── LineChart ───────────────────────────\n\nexport interface LineChartProps extends CartesianProps {\n  /** Draw a soft area gradient under each line. @default true */\n  area?: boolean;\n  /** A smooth Catmull-Rom curve (SDGA \"Gradual\" default) or straight segments. */\n  curve?: 'linear' | 'smooth';\n}\n\nexport function LineChart({\n  series,\n  categories,\n  palette = 'brand',\n  legend = true,\n  title = 'Line chart',\n  xAxisLabel,\n  yAxisLabel,\n  yMax: yMaxProp,\n  width = 520,\n  height = 280,\n  area = true,\n  curve = 'smooth',\n  className,\n  ...props\n}: LineChartProps) {\n  const gid = useId();\n  const n = categories.length;\n  const yMaxData = Math.max(0, ...series.flatMap((s) => s.data));\n  const L = useCartesianLayout(yMaxData, yMaxProp, width, height, !!xAxisLabel, !!yAxisLabel);\n  const centerT = (i: number) => (n <= 1 ? 0.5 : i / (n - 1));\n  const colors = series.map((s, i) => paletteColor(palette, i, s.color, BRAND_LINE));\n\n  return (\n    <figure\n      className={cn('ddga-charts', 'ddga-charts--line', className)}\n      data-slot=\"chart\"\n      {...props}\n    >\n      {legend && (\n        <ChartLegend items={series.map((s, i) => ({ label: s.label, color: colors[i] }))} />\n      )}\n      <svg\n        className=\"ddga-charts__plot\"\n        viewBox={`0 0 ${width} ${height}`}\n        role=\"img\"\n        aria-label={title}\n        preserveAspectRatio=\"xMidYMid meet\"\n      >\n        <Gridlines\n          ticks={L.ticks}\n          yAt={L.yAt}\n          plotLeft={L.plotLeft}\n          plotRight={L.plotRight}\n          rtl={L.rtl}\n          labelX={L.rtl ? L.plotRight + 8 : L.plotLeft - 8}\n        />\n        {series.map((s, si) => {\n          const pts = s.data.map((v, i) => ({ x: L.xAt(centerT(i)), y: L.yAt(v) }));\n          const color = colors[si];\n          const path = linePath(pts, curve === 'smooth');\n          return (\n            <g key={si}>\n              {area && pts.length > 0 && (\n                <>\n                  <defs>\n                    <linearGradient id={`${gid}-${si}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor={color} stopOpacity={0.28} />\n                      <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n                    </linearGradient>\n                  </defs>\n                  <path\n                    d={`${path} L ${pts[pts.length - 1].x} ${L.plotBottom} L ${pts[0].x} ${L.plotBottom} Z`}\n                    fill={`url(#${gid}-${si})`}\n                  />\n                </>\n              )}\n              <path\n                d={path}\n                fill=\"none\"\n                stroke={color}\n                strokeWidth={2}\n                strokeLinejoin=\"round\"\n                strokeLinecap=\"round\"\n              />\n            </g>\n          );\n        })}\n        <XLabels categories={categories} centerT={centerT} xAt={L.xAt} y={L.plotBottom + 20} />\n        <AxisTitles\n          xAxisLabel={xAxisLabel}\n          yAxisLabel={yAxisLabel}\n          width={width}\n          height={height}\n          plotLeft={L.plotLeft}\n          plotRight={L.plotRight}\n          plotTop={L.plotTop}\n          plotBottom={L.plotBottom}\n          rtl={L.rtl}\n        />\n      </svg>\n      <DataTable\n        caption={title}\n        rowHeader=\"Series\"\n        columns={categories}\n        rows={series.map((s) => ({ label: s.label, values: s.data }))}\n      />\n    </figure>\n  );\n}\n\n// ─────────────────────────── BarChart ───────────────────────────\n\nexport interface BarChartProps extends CartesianProps {\n  /** Stack series into one column per category (default). `false` groups them side by side. */\n  stacked?: boolean;\n}\n\nexport function BarChart({\n  series,\n  categories,\n  palette = 'brand',\n  legend = true,\n  title = 'Bar chart',\n  xAxisLabel,\n  yAxisLabel,\n  yMax: yMaxProp,\n  width = 520,\n  height = 280,\n  stacked = true,\n  className,\n  ...props\n}: BarChartProps) {\n  const n = categories.length;\n  const stackTotals = categories.map((_, ci) =>\n    series.reduce((s, ser) => s + Math.max(0, ser.data[ci] ?? 0), 0),\n  );\n  const groupedMax = Math.max(0, ...series.flatMap((s) => s.data));\n  const yMaxData = stacked ? Math.max(0, ...stackTotals) : groupedMax;\n  const L = useCartesianLayout(yMaxData, yMaxProp, width, height, !!xAxisLabel, !!yAxisLabel);\n  const centerT = (i: number) => (i + 0.5) / n;\n  const band = L.plotW / n;\n  const colors = series.map((s, i) => paletteColor(palette, i, s.color, BRAND_BAR));\n  const barW = Math.min(32, band * 0.54);\n\n  return (\n    <figure\n      className={cn('ddga-charts', 'ddga-charts--bar', className)}\n      data-slot=\"chart\"\n      {...props}\n    >\n      {legend && (\n        <ChartLegend items={series.map((s, i) => ({ label: s.label, color: colors[i] }))} />\n      )}\n      <svg\n        className=\"ddga-charts__plot\"\n        viewBox={`0 0 ${width} ${height}`}\n        role=\"img\"\n        aria-label={title}\n        preserveAspectRatio=\"xMidYMid meet\"\n      >\n        <Gridlines\n          ticks={L.ticks}\n          yAt={L.yAt}\n          plotLeft={L.plotLeft}\n          plotRight={L.plotRight}\n          rtl={L.rtl}\n          labelX={L.rtl ? L.plotRight + 8 : L.plotLeft - 8}\n        />\n        <g>\n          {categories.map((_, ci) => {\n            const cxp = L.xAt(centerT(ci));\n            if (stacked) {\n              return (\n                <g key={ci}>\n                  {series.map((s, si) => {\n                    const v = Math.max(0, s.data[ci] ?? 0);\n                    const h = (v / L.yMax) * L.plotH;\n                    const below = series\n                      .slice(0, si)\n                      .reduce((sum, ser) => sum + Math.max(0, ser.data[ci] ?? 0), 0);\n                    const y = L.plotBottom - ((below + v) / L.yMax) * L.plotH;\n                    return (\n                      <rect\n                        key={si}\n                        x={cxp - barW / 2}\n                        y={y}\n                        width={barW}\n                        height={h}\n                        fill={colors[si]}\n                      />\n                    );\n                  })}\n                </g>\n              );\n            }\n            const subW = barW / series.length;\n            return (\n              <g key={ci}>\n                {series.map((s, si) => {\n                  const v = Math.max(0, s.data[ci] ?? 0);\n                  const h = (v / L.yMax) * L.plotH;\n                  return (\n                    <rect\n                      key={si}\n                      x={cxp - barW / 2 + si * subW}\n                      y={L.plotBottom - h}\n                      width={subW}\n                      height={h}\n                      fill={colors[si]}\n                    />\n                  );\n                })}\n              </g>\n            );\n          })}\n        </g>\n        <XLabels categories={categories} centerT={centerT} xAt={L.xAt} y={L.plotBottom + 20} />\n        <AxisTitles\n          xAxisLabel={xAxisLabel}\n          yAxisLabel={yAxisLabel}\n          width={width}\n          height={height}\n          plotLeft={L.plotLeft}\n          plotRight={L.plotRight}\n          plotTop={L.plotTop}\n          plotBottom={L.plotBottom}\n          rtl={L.rtl}\n        />\n      </svg>\n      <DataTable\n        caption={title}\n        rowHeader=\"Series\"\n        columns={categories}\n        rows={series.map((s) => ({ label: s.label, values: s.data }))}\n      />\n    </figure>\n  );\n}\n"]}

package/dist/{chunk-BBGCS5PZ.cjs → chunk-ODNO43HV.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkFEUMA5IScjs = require('./chunk-FEUMA5IS.cjs');
+var _chunkU24PBXZAcjs = require('./chunk-U24PBXZA.cjs');
 
 
-var _chunkN4FHLSNVcjs = require('./chunk-N4FHLSNV.cjs');
+var _chunk3UT22WQMcjs = require('./chunk-3UT22WQM.cjs');
 
 
 var _chunkNH3KGR65cjs = require('./chunk-NH3KGR65.cjs');
@@ -164,7 +164,7 @@ function TagInput({
               className: "ddga-tag-input__item",
               role: "listitem",
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkFEUMA5IScjs.Badge,
+                _chunkU24PBXZAcjs.Tag,
                 {
                   variant: chipVariant,
                   size: chipSize,
@@ -200,8 +200,8 @@ function TagInput({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "tag-input-live", className: "ddga-sr-only", role: "status", "aria-live": "polite", children: announcement }),
-    hasErrorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3UT22WQMcjs.FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3UT22WQMcjs.FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
@@ -209,4 +209,4 @@ function TagInput({
 
 
 exports.tagInputVariants = tagInputVariants; exports.TagInput = TagInput;
-//# sourceMappingURL=chunk-BBGCS5PZ.cjs.map
+//# sourceMappingURL=chunk-ODNO43HV.cjs.map

package/dist/chunk-ODNO43HV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-ODNO43HV.cjs","../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-ODNO43HV.cjs","sourcesContent":[null,"'use client';\n\nimport { useRef, useState, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFieldA11y, FieldMessage } from '../../field';\nimport { Tag, type TagProps } from '../Tag';\n\n// ─── 1. Variants (cva) ─── //\n\n// Applied to the *control* (the bordered box), not the raw <input> — the box\n// owns the border, sizing, focus ring and disabled/error styling so the chips\n// and the text input wrap inside the field. Mirrors Input's box, but the box\n// grows vertically as chips wrap (min-block-size, not a fixed height).\nconst tagInputVariants = cva('ddga-tag-input', {\n  variants: {\n    size: {\n      sm: 'ddga-tag-input--sm',\n      md: 'ddga-tag-input--md',\n      lg: 'ddga-tag-input--lg',\n    },\n    error: {\n      true: 'ddga-tag-input--error',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ─── 2. Types ─── //\n\n// We own `value` / `defaultValue` (string[] tags, not strings), `onChange`\n// (fires with the tag array), and the design-system `size` variant — so they\n// are stripped from the native input props the rest are spread onto.\ntype NativeInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'onChange' | 'size'\n>;\n\ninterface TagInputProps\n  extends NativeInputProps, Omit<VariantProps<typeof tagInputVariants>, 'error'> {\n  /** Controlled tag list. */\n  value?: string[];\n  /** Uncontrolled initial tag list. */\n  defaultValue?: string[];\n  /** Fires with the full accepted tag set after every add/remove. */\n  onChange?: (tags: string[]) => void;\n  /** Visible field label, associated to the text input. */\n  label?: ReactNode;\n  /** Hint shown below the field. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the field when invalid. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid: sets `aria-invalid` and error styling. */\n  error?: boolean;\n  /** Caps the number of tags. Adds beyond the cap are no-ops. */\n  max?: number;\n  /** Allow the same tag more than once. Off → duplicates are rejected. */\n  allowDuplicates?: boolean;\n  /** Make duplicate detection case-sensitive. Default: case-insensitive. */\n  caseSensitive?: boolean;\n  /** Consumer gate run on each candidate tag. Return false to reject (draft kept). */\n  validate?: (tag: string, tags: string[]) => boolean;\n  /** Characters that commit the draft and split a paste. Newline always splits a paste. */\n  delimiters?: string[];\n  /** Tag variant used for the chips. */\n  chipVariant?: TagProps['variant'];\n  /** Accessible name for each chip's remove button. */\n  removeLabel?: (tag: string) => string;\n  /** Live-region text announced on add/remove (screen readers). */\n  formatAnnouncement?: (tag: string, action: 'add' | 'remove') => string;\n}\n\n// ─── 3. Component ─── //\n\nfunction TagInput({\n  id: externalId,\n  value,\n  defaultValue,\n  onChange,\n  label,\n  helperText,\n  errorMessage,\n  error,\n  size,\n  disabled,\n  required,\n  placeholder,\n  max,\n  allowDuplicates = false,\n  caseSensitive = false,\n  validate,\n  delimiters = [','],\n  chipVariant = 'secondary',\n  removeLabel = (tag) => `Remove ${tag}`,\n  formatAnnouncement = (tag, action) => `${tag} ${action === 'add' ? 'added' : 'removed'}`,\n  className,\n  ...props\n}: TagInputProps) {\n  const isControlled = value !== undefined;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(defaultValue ?? []);\n  const tags = isControlled ? value : uncontrolledTags;\n\n  const [draft, setDraft] = useState('');\n  const [announcement, setAnnouncement] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =\n    useFieldA11y({\n      name: 'TagInput',\n      id: externalId,\n      label,\n      error,\n      errorMessage,\n      helperText,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'],\n    });\n\n  const commit = (next: string[]) => {\n    if (!isControlled) setUncontrolledTags(next);\n    onChange?.(next);\n  };\n\n  const norm = (t: string) => (caseSensitive ? t : t.toLowerCase());\n\n  // Run raw fragments through the full accept pipeline (trim → drop-empty →\n  // max cap → dedup → validate), appending the survivors. Only ever appends,\n  // so the accepted set is `next.slice(current.length)`.\n  const accept = (raw: string[], current: string[]): string[] => {\n    let next = current;\n    for (const fragment of raw) {\n      const trimmed = fragment.trim();\n      if (!trimmed) continue;\n      if (max !== undefined && next.length >= max) break;\n      if (!allowDuplicates && next.some((t) => norm(t) === norm(trimmed))) continue;\n      if (validate && !validate(trimmed, next)) continue;\n      next = [...next, trimmed];\n    }\n    return next;\n  };\n\n  const announceAdded = (added: string[]) => {\n    if (added.length > 0) {\n      setAnnouncement(added.map((t) => formatAnnouncement(t, 'add')).join(', '));\n    }\n  };\n\n  const commitDraft = () => {\n    const next = accept([draft], tags);\n    if (next.length > tags.length) {\n      commit(next);\n      announceAdded(next.slice(tags.length));\n      setDraft('');\n    }\n    // Rejected (dup / max / validate / empty): keep the draft so it can be fixed.\n  };\n\n  // Build a paste splitter from the delimiter chars + newlines. `-` is escaped\n  // too (trailing in the class) so a delimiter like `-` can't form an invalid\n  // character-class range (e.g. `['|','-']` → `[|-…]` would throw).\n  const splitPaste = (text: string): string[] => {\n    const escaped = delimiters.map((d) => d.replace(/[.*+?^${}()|[\\]\\\\-]/g, '\\\\$&'));\n    const pattern = new RegExp(`[${escaped.join('')}\\\\n\\\\r]`);\n    return text.split(pattern);\n  };\n\n  const removeTag = (index: number) => {\n    const removed = tags[index];\n    commit(tags.filter((_, i) => i !== index));\n    setAnnouncement(formatAnnouncement(removed, 'remove'));\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    if (event.key === 'Enter') {\n      // Always swallow Enter so it adds a tag instead of submitting the form.\n      event.preventDefault();\n      if (draft.trim()) commitDraft();\n    } else if (delimiters.includes(event.key)) {\n      event.preventDefault();\n      if (draft.trim()) commitDraft();\n    } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {\n      event.preventDefault();\n      removeTag(tags.length - 1);\n    }\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    const text = event.clipboardData.getData('text');\n    const fragments = splitPaste(text);\n    // No delimiter in the pasted text → let it type normally into the draft.\n    if (fragments.length <= 1) return;\n    event.preventDefault();\n    const next = accept(fragments, tags);\n    if (next.length > tags.length) {\n      commit(next);\n      announceAdded(next.slice(tags.length));\n      // Clear any in-progress draft so it isn't left stranded after the paste.\n      setDraft('');\n    }\n  };\n\n  // Clicking the box chrome (not a chip button or the input) focuses the input.\n  const handleBoxMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    const target = event.target as HTMLElement;\n    if (target === inputRef.current || target.closest('button')) return;\n    event.preventDefault();\n    inputRef.current?.focus();\n  };\n\n  const chipSize: TagProps['size'] = size === 'lg' ? 'md' : 'sm';\n\n  return (\n    <div data-slot=\"tag-input-field\" className=\"ddga-field\">\n      {label && (\n        <label htmlFor={fieldId} className=\"ddga-tag-input__label\">\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"ddga-tag-input__required\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        data-slot=\"tag-input-control\"\n        className={cn(tagInputVariants({ size, error: hasError }), className)}\n        data-disabled={disabled || undefined}\n        onMouseDown={disabled ? undefined : handleBoxMouseDown}\n      >\n        {tags.length > 0 && (\n          <ul data-slot=\"tag-input-list\" className=\"ddga-tag-input__list\" role=\"list\">\n            {tags.map((tag, index) => (\n              <li\n                // Tags can repeat (allowDuplicates) so the value alone is not a\n                // stable key; pair it with the index.\n                key={`${tag}-${index}`}\n                data-slot=\"tag-input-item\"\n                className=\"ddga-tag-input__item\"\n                // `display:contents` on the list/item can drop the implicit\n                // list semantics in some engines; re-assert them explicitly.\n                role=\"listitem\"\n              >\n                <Tag\n                  variant={chipVariant}\n                  size={chipSize}\n                  // Controlled-open: the chip never self-hides — removal flows\n                  // through onChange so controlled consumers stay the source of truth.\n                  open\n                  dismissible={!disabled}\n                  onDismiss={() => removeTag(index)}\n                  closeLabel={removeLabel(tag)}\n                >\n                  {tag}\n                </Tag>\n              </li>\n            ))}\n          </ul>\n        )}\n        <input\n          // Spread consumer props first, then our a11y contract + handlers so\n          // they cannot be clobbered.\n          {...props}\n          {...controlProps}\n          ref={inputRef}\n          data-slot=\"tag-input\"\n          className=\"ddga-tag-input__field\"\n          type=\"text\"\n          value={draft}\n          disabled={disabled}\n          // `aria-required` (not native `required`): the input holds the draft,\n          // not the committed tags, so native `required` would block form\n          // submit whenever the draft is empty even though tags exist.\n          aria-required={required || undefined}\n          placeholder={tags.length === 0 ? placeholder : undefined}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n        />\n      </div>\n      <div data-slot=\"tag-input-live\" className=\"ddga-sr-only\" role=\"status\" aria-live=\"polite\">\n        {announcement}\n      </div>\n      {hasErrorMessage && (\n        <FieldMessage id={errorId} variant=\"error\">\n          {errorMessage}\n        </FieldMessage>\n      )}\n      {hasHelper && (\n        <FieldMessage id={helperId} variant=\"helper\">\n          {helperText}\n        </FieldMessage>\n      )}\n    </div>\n  );\n}\n\n// ─── 4. Exports ─── //\n\nexport { TagInput, tagInputVariants };\nexport type { TagInputProps };\n"]}

package/dist/chunk-ORRYZCLQ.cjs

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-ORRYZCLQ.cjs.map

package/dist/chunk-ORRYZCLQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-ORRYZCLQ.cjs"],"names":[],"mappings":"AAAA","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-ORRYZCLQ.cjs"}