@indusaction/cms-design-system 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -733,6 +733,682 @@ var Card = React__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
+var statusColors = {
+  primary: colors.brand.primary,
+  success: colors.semantic.success,
+  warning: colors.semantic.warning,
+  error: colors.semantic.error,
+  info: colors.semantic.info,
+  neutral: colors.neutral.gray600
+};
+var sizeStyles = {
+  small: {
+    padding: spacing.sm,
+    titleSize: fontSize.xs,
+    valueSize: fontSize.md,
+    iconSize: spacing.xl
+  },
+  default: {
+    minHeight: 120,
+    padding: spacing.md,
+    titleSize: fontSize.sm,
+    valueSize: fontSize.xl,
+    iconSize: 40
+  },
+  large: {
+    minHeight: 160,
+    padding: spacing.md,
+    titleSize: fontSize.md,
+    valueSize: fontSize.xxl,
+    iconSize: spacing.xxl
+  }
+};
+var MetricCard = React__default.default.forwardRef(
+  ({
+    title,
+    value,
+    description,
+    variant = "outlined",
+    layout = "vertical",
+    size = "default",
+    status = "primary",
+    color,
+    textColor,
+    icon,
+    prefix,
+    suffix,
+    precision,
+    formatter,
+    groupSeparator = ",",
+    decimalSeparator = ".",
+    loading = false,
+    className,
+    style
+  }, ref) => {
+    const isMissingValue = value == null || typeof value === "number" && !Number.isFinite(value);
+    const displayValue = isMissingValue ? "\u2014" : value;
+    const accent = color ?? statusColors[status];
+    const dimensions = sizeStyles[size];
+    const isSolid = variant === "solid";
+    const isTinted = variant === "tinted";
+    const lightPreset = color == null && ["success", "warning", "error"].includes(status);
+    const foreground = textColor ?? (isSolid && !lightPreset ? colors.neutral.white : colors.neutral.gray800);
+    const tintedBackground = `color-mix(in srgb, ${accent} 12%, ${colors.neutral.white})`;
+    const cardBackground = isSolid ? accent : isTinted ? tintedBackground : colors.neutral.white;
+    const cardBorder = isTinted ? "none" : `1px solid ${variant === "outlined" ? colors.neutral.gray200 : accent}`;
+    const iconBadge = icon ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          width: dimensions.iconSize,
+          height: dimensions.iconSize,
+          borderRadius: "50%",
+          fontSize: fontSize.lg,
+          color: foreground,
+          background: isSolid ? "rgba(255, 255, 255, 0.18)" : isTinted ? `color-mix(in srgb, ${accent} 22%, ${colors.neutral.white})` : colors.brand.primaryLight
+        },
+        children: icon
+      }
+    ) : null;
+    const hasDescription = description != null && description !== false && description !== "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Card,
+      {
+        ref,
+        className,
+        loading,
+        loadingRows: 2,
+        "aria-busy": loading,
+        styles: {
+          body: {
+            boxSizing: "border-box",
+            padding: dimensions.padding
+          }
+        },
+        style: {
+          background: cardBackground,
+          border: cardBorder,
+          color: foreground,
+          minHeight: dimensions.minHeight,
+          minWidth: 0,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: layout === "horizontal" ? "row" : "column",
+              gap: spacing.sm,
+              minWidth: 0
+            },
+            children: [
+              layout === "horizontal" ? iconBadge : null,
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          color: foreground,
+                          fontSize: dimensions.titleSize,
+                          fontWeight: 500,
+                          lineHeight: 1.4,
+                          overflowWrap: "anywhere"
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-end",
+                          justifyContent: "space-between",
+                          gap: spacing.sm,
+                          paddingTop: spacing.xs,
+                          flexWrap: "wrap"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            antd.Statistic,
+                            {
+                              value: displayValue,
+                              prefix: isMissingValue ? void 0 : prefix,
+                              suffix: isMissingValue ? void 0 : suffix,
+                              precision,
+                              formatter: isMissingValue ? void 0 : formatter,
+                              groupSeparator,
+                              decimalSeparator,
+                              style: { flex: 1, minWidth: 0 },
+                              valueStyle: {
+                                color: foreground,
+                                fontSize: dimensions.valueSize,
+                                fontWeight: 600,
+                                lineHeight: 1.5,
+                                overflowWrap: "anywhere"
+                              }
+                            }
+                          ),
+                          layout === "vertical" ? iconBadge : null
+                        ]
+                      }
+                    ),
+                    hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          color: foreground,
+                          marginTop: spacing.xs,
+                          overflowWrap: "anywhere"
+                        },
+                        children: description
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MetricCard.displayName = "MetricCard";
+var defaultPalette = [
+  colors.brand.primary,
+  colors.brand.accent,
+  colors.semantic.success,
+  colors.semantic.warning,
+  colors.semantic.error,
+  colors.neutral.gray500
+];
+var defaultFormatter = (value) => value.toLocaleString("en-IN");
+var truncateLabel = (label, max) => label.length > max ? `${label.slice(0, max - 1)}\u2026` : label;
+function isGroupedData(data) {
+  return data.length > 0 && "values" in data[0];
+}
+function ChartLegend({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": "Chart legend",
+      style: { display: "flex", flexWrap: "wrap", gap: spacing.md, marginBottom: spacing.xs },
+      children: items.map(({ label, color }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          style: { alignItems: "center", color: colors.neutral.gray700, display: "inline-flex", fontSize: fontSize.xs, gap: spacing.xs },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { background: color, borderRadius: "50%", height: 8, width: 8 } }),
+            label
+          ]
+        },
+        label
+      ))
+    }
+  );
+}
+function ChartGrid({
+  padding,
+  width,
+  chartHeight,
+  maxValue,
+  formatValue
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [0, 0.5, 1].map((ratio) => {
+    const y = padding.top + chartHeight * (1 - ratio);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: padding.left, x2: width - padding.right, y1: y, y2: y, stroke: colors.neutral.gray200 }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: padding.left - 8, y: y + 4, textAnchor: "end", fill: colors.neutral.gray500, fontSize: 11, children: formatValue(Math.round(maxValue * ratio)) })
+    ] }, ratio);
+  }) });
+}
+function ChartEmptyState({ height }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: { alignItems: "center", color: colors.neutral.gray500, display: "flex", height, justifyContent: "center" },
+      children: "No data available"
+    }
+  );
+}
+function ColumnChart({
+  data,
+  mode = "basic",
+  seriesColors = defaultPalette,
+  showLegend = true,
+  height = 280,
+  color = colors.brand.primary,
+  ariaLabel = "Column chart",
+  formatValue = defaultFormatter,
+  style
+}) {
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  const grouped = isGroupedData(data);
+  const activeMode = grouped && mode === "basic" ? "stacked" : mode;
+  const W = 640;
+  const pad = { top: 28, right: 20, bottom: 48, left: 48 };
+  const cH = height - pad.top - pad.bottom;
+  const cW = W - pad.left - pad.right;
+  let maxVal = 1;
+  let legendKeys = [];
+  let barContent;
+  if (activeMode === "stacked" && grouped) {
+    const gd = data;
+    legendKeys = [...new Set(gd.flatMap((d) => Object.keys(d.values)))];
+    const totals = gd.map((d) => Object.values(d.values).reduce((s, v) => s + v, 0));
+    maxVal = Math.max(...totals, 1);
+    const slotW = cW / gd.length;
+    const bw = Math.min(56, slotW * 0.58);
+    barContent = gd.map((datum, i) => {
+      const x = pad.left + slotW * i + (slotW - bw) / 2;
+      let curY = pad.top + cH;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label}: ${formatValue(totals[i])}` }),
+        legendKeys.map((series, sIdx) => {
+          const val = datum.values[series] ?? 0;
+          if (val <= 0) return null;
+          const h = val / maxVal * cH;
+          curY -= h;
+          return /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: curY, width: bw, height: h, fill: seriesColors[sIdx % seriesColors.length], children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label} - ${series}: ${formatValue(val)}` }) }, series);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + bw / 2, y: curY - 8, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: formatValue(totals[i]) }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + bw / 2, y: height - 18, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 16) })
+      ] }, datum.id ?? datum.label);
+    });
+  } else if (activeMode === "grouped" && grouped) {
+    const gd = data;
+    legendKeys = [...new Set(gd.flatMap((d) => Object.keys(d.values)))];
+    maxVal = Math.max(...gd.flatMap((d) => Object.values(d.values)), 1);
+    const slotW = cW / gd.length;
+    const n = legendKeys.length;
+    const gap = 2;
+    const subW = Math.min(28, (slotW * 0.75 - (n - 1) * gap) / Math.max(n, 1));
+    const grpW = n * subW + (n - 1) * gap;
+    barContent = gd.map((datum, i) => {
+      const gx = pad.left + slotW * i + (slotW - grpW) / 2;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        legendKeys.map((series, sIdx) => {
+          const val = datum.values[series] ?? 0;
+          const h = Math.max(0, val / maxVal * cH);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label} - ${series}: ${formatValue(val)}` }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: gx + sIdx * (subW + gap), y: pad.top + cH - h, width: subW, height: h, rx: 3, fill: seriesColors[sIdx % seriesColors.length] })
+          ] }, series);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left + slotW * i + slotW / 2, y: height - 18, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 16) })
+      ] }, datum.id ?? datum.label);
+    });
+  } else {
+    const sd = data;
+    maxVal = Math.max(...sd.map((d) => d.value), 1);
+    const slotW = cW / sd.length;
+    const bw = Math.min(56, slotW * 0.58);
+    barContent = sd.map((datum, i) => {
+      const h = Math.max(0, datum.value / maxVal * cH);
+      const x = pad.left + slotW * i + (slotW - bw) / 2;
+      const y = pad.top + cH - h;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label}: ${formatValue(datum.value)}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width: bw, height: h, rx: 4, fill: datum.color ?? color }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + bw / 2, y: y - 8, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: formatValue(datum.value) }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + bw / 2, y: height - 18, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 16) })
+      ] }, datum.id ?? datum.label);
+    });
+  }
+  const hasLegend = showLegend && legendKeys.length > 1;
+  const legendH = hasLegend ? 28 : 0;
+  const svgH = height - legendH;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height, justifyContent: "flex-end", ...style }, children: [
+    hasLegend && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendKeys.map((k, i) => ({ label: k, color: seriesColors[i % seriesColors.length] })) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, role: "img", viewBox: `0 0 ${W} ${height}`, style: { display: "block", height: svgH, maxWidth: "100%", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: ariaLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChartGrid, { padding: pad, width: W, chartHeight: cH, maxValue: maxVal, formatValue }),
+      barContent
+    ] })
+  ] });
+}
+var defaultPalette2 = [
+  colors.brand.primary,
+  colors.brand.accent,
+  colors.semantic.success,
+  colors.semantic.warning,
+  colors.semantic.error,
+  colors.neutral.gray500
+];
+function BarChart({
+  data,
+  mode = "basic",
+  seriesColors = defaultPalette2,
+  showLegend = true,
+  height = 280,
+  color = colors.brand.primary,
+  ariaLabel = "Bar chart",
+  formatValue = defaultFormatter,
+  style
+}) {
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  const grouped = isGroupedData(data);
+  const activeMode = grouped && mode === "basic" ? "stacked" : mode;
+  const W = 640;
+  const pad = { top: 18, right: 70, bottom: 16, left: 145 };
+  const cH = height - pad.top - pad.bottom;
+  const cW = W - pad.left - pad.right;
+  let maxVal = 1;
+  let legendKeys = [];
+  let rowContent;
+  if (activeMode === "stacked" && grouped) {
+    const gd = data;
+    legendKeys = [...new Set(gd.flatMap((d) => Object.keys(d.values)))];
+    const totals = gd.map((d) => Object.values(d.values).reduce((s, v) => s + v, 0));
+    const maxVal2 = Math.max(...totals, 1);
+    const rowH = cH / gd.length;
+    const bh = Math.min(28, rowH * 0.62);
+    rowContent = gd.map((datum, i) => {
+      const y = pad.top + i * rowH + (rowH - bh) / 2;
+      let curX = pad.left;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label}: ${formatValue(totals[i])}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left - 10, y: y + bh / 2 + 4, textAnchor: "end", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 22) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: pad.left, y, width: cW, height: bh, fill: colors.neutral.gray200, rx: 4 }),
+        legendKeys.map((series, sIdx) => {
+          const val = datum.values[series] ?? 0;
+          if (val <= 0) return null;
+          const w = val / maxVal2 * cW;
+          const segX = curX;
+          curX += w;
+          return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: segX, y, width: w, height: bh, fill: seriesColors[sIdx % seriesColors.length], children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label} - ${series}: ${formatValue(val)}` }) }, series);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: curX + 8, y: y + bh / 2 + 4, fill: colors.neutral.gray700, fontSize: 11, children: formatValue(totals[i]) })
+      ] }, datum.id ?? datum.label);
+    });
+  } else if (activeMode === "grouped" && grouped) {
+    const gd = data;
+    legendKeys = [...new Set(gd.flatMap((d) => Object.keys(d.values)))];
+    const maxVal2 = Math.max(...gd.flatMap((d) => Object.values(d.values)), 1);
+    const rowH = cH / gd.length;
+    const n = legendKeys.length;
+    const gap = 2;
+    const subH = Math.min(18, (rowH * 0.75 - (n - 1) * gap) / Math.max(n, 1));
+    const grpH = n * subH + (n - 1) * gap;
+    rowContent = gd.map((datum, i) => {
+      const gy = pad.top + i * rowH + (rowH - grpH) / 2;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left - 10, y: gy + grpH / 2 + 4, textAnchor: "end", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 22) }),
+        legendKeys.map((series, sIdx) => {
+          const val = datum.values[series] ?? 0;
+          const bw = val / maxVal2 * cW;
+          const sy = gy + sIdx * (subH + gap);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label} - ${series}: ${formatValue(val)}` }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: pad.left, y: sy, width: cW, height: subH, fill: colors.neutral.gray200, rx: 2 }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: pad.left, y: sy, width: bw, height: subH, fill: seriesColors[sIdx % seriesColors.length], rx: 2 }),
+            /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left + bw + 6, y: sy + subH / 2 + 4, fill: colors.neutral.gray700, fontSize: 10, children: formatValue(val) })
+          ] }, series);
+        })
+      ] }, datum.id ?? datum.label);
+    });
+  } else {
+    const sd = data;
+    maxVal = Math.max(...sd.map((d) => d.value), 1);
+    const rowH = cH / sd.length;
+    const bh = Math.min(28, rowH * 0.62);
+    rowContent = sd.map((datum, i) => {
+      const y = pad.top + i * rowH + (rowH - bh) / 2;
+      const bw = datum.value / maxVal * cW;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label}: ${formatValue(datum.value)}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left - 10, y: y + bh / 2 + 4, textAnchor: "end", fill: colors.neutral.gray700, fontSize: 11, children: truncateLabel(datum.label, 22) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: pad.left, y, width: cW, height: bh, fill: colors.neutral.gray200, rx: 4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: pad.left, y, width: bw, height: bh, fill: datum.color ?? color, rx: 4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: pad.left + bw + 8, y: y + bh / 2 + 4, fill: colors.neutral.gray700, fontSize: 11, children: formatValue(datum.value) })
+      ] }, datum.id ?? datum.label);
+    });
+  }
+  const hasLegend = showLegend && legendKeys.length > 1;
+  const legendH = hasLegend ? 28 : 0;
+  const svgH = height - legendH;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height, justifyContent: "flex-end", ...style }, children: [
+    hasLegend && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: pad.left }, children: /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendKeys.map((k, i) => ({ label: k, color: seriesColors[i % seriesColors.length] })) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, role: "img", viewBox: `0 0 ${W} ${height}`, style: { display: "block", height: svgH, maxWidth: "100%", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: ariaLabel }),
+      rowContent
+    ] })
+  ] });
+}
+var defaultPalette3 = [
+  colors.brand.primary,
+  colors.brand.accent,
+  colors.semantic.success,
+  colors.semantic.warning,
+  colors.semantic.error,
+  colors.neutral.gray500
+];
+function DonutChart({
+  data,
+  height = 280,
+  centerLabel = "Total",
+  ariaLabel = "Donut chart",
+  showLegend = true,
+  formatValue = defaultFormatter,
+  style
+}) {
+  const usableData = data.filter(({ value }) => value > 0);
+  const total = usableData.reduce((sum, { value }) => sum + value, 0);
+  if (!total) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  const radius = 76;
+  const circumference = 2 * Math.PI * radius;
+  let consumed = 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: spacing.lg, justifyContent: "center", height, minHeight: height, ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, role: "img", viewBox: "0 0 220 220", style: { height: Math.min(height, 220), width: Math.min(height, 220) }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: ariaLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "110", cy: "110", fill: "none", r: radius, stroke: colors.neutral.gray200, strokeWidth: "30" }),
+      usableData.map((datum, index) => {
+        const segment = datum.value / total * circumference;
+        const offset = -consumed;
+        consumed += segment;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: "110",
+            cy: "110",
+            fill: "none",
+            r: radius,
+            stroke: datum.color ?? defaultPalette3[index % defaultPalette3.length],
+            strokeDasharray: `${segment} ${circumference - segment}`,
+            strokeDashoffset: offset,
+            strokeWidth: "30",
+            transform: "rotate(-90 110 110)",
+            children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${datum.label}: ${formatValue(datum.value)}` })
+          },
+          datum.id ?? datum.label
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: "110", y: "102", textAnchor: "middle", fill: colors.neutral.gray500, fontSize: "13", children: centerLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx("text", { x: "110", y: "128", textAnchor: "middle", fill: colors.neutral.gray700, fontSize: "22", fontWeight: "600", children: formatValue(total) })
+    ] }),
+    showLegend ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-label": "Chart legend", style: { display: "grid", gap: spacing.xs }, children: usableData.map((datum, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { alignItems: "center", display: "flex", gap: spacing.xs }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { background: datum.color ?? defaultPalette3[index % defaultPalette3.length], borderRadius: "50%", height: 10, width: 10 } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: colors.neutral.gray700, fontSize: fontSize.xs }, children: [
+        datum.label,
+        ": ",
+        formatValue(datum.value)
+      ] })
+    ] }, datum.id ?? datum.label)) }) : null
+  ] });
+}
+var defaultPalette4 = [
+  colors.brand.primary,
+  colors.brand.accent,
+  colors.semantic.success,
+  colors.semantic.warning,
+  colors.semantic.error,
+  colors.neutral.gray500
+];
+function createSmoothSplinePath(points) {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  if (points.length === 2)
+    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+  let path = `M ${points[0].x} ${points[0].y}`;
+  const tension = 0.2;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i > 0 ? i - 1 : i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2 < points.length ? i + 2 : i + 1];
+    const cp1x = p1.x + (p2.x - p0.x) * tension;
+    const cp1y = p1.y + (p2.y - p0.y) * tension;
+    const cp2x = p2.x - (p3.x - p1.x) * tension;
+    const cp2y = p2.y - (p3.y - p1.y) * tension;
+    path += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
+  }
+  return path;
+}
+function TimeSeriesChart({
+  data,
+  type = "line",
+  smooth = false,
+  height = 280,
+  colors: seriesColors = defaultPalette4,
+  ariaLabel = "Time series chart",
+  showLegend = true,
+  formatValue = defaultFormatter,
+  formatDate = (date) => date,
+  threshold,
+  thresholdLabel,
+  style
+}) {
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  const W = 640;
+  const pad = { top: 28, right: 20, bottom: 48, left: 48 };
+  const cH = height - pad.top - pad.bottom;
+  const cW = W - pad.left - pad.right;
+  const maxVal = Math.max(...data.map(({ value }) => value), threshold ?? 0, 1);
+  const dates = [...new Set(data.map(({ date }) => date))];
+  const seriesGroups = [...new Map(data.map((d) => [d.series ?? "Value", true])).keys()].map((s) => ({
+    series: s,
+    data: data.filter((d) => (d.series ?? "Value") === s)
+  }));
+  const xFor = (date) => pad.left + (dates.length > 1 ? dates.indexOf(date) / (dates.length - 1) * cW : cW / 2);
+  const yFor = (v) => pad.top + cH - v / maxVal * cH;
+  const bottom = pad.top + cH;
+  const dateIdxs = dates.length <= 6 ? dates.map((_, i) => i) : [0, Math.round((dates.length - 1) / 2), dates.length - 1];
+  const hasLegend = showLegend && seriesGroups.length > 1;
+  const legendH = hasLegend ? 28 : 0;
+  const svgH = height - legendH;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height, justifyContent: "flex-end", ...style }, children: [
+    hasLegend && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: seriesGroups.map(({ series: s }, i) => ({ label: s, color: seriesColors[i % seriesColors.length] })) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, role: "img", viewBox: `0 0 ${W} ${height}`, style: { display: "block", height: svgH, maxWidth: "100%", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: ariaLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChartGrid, { padding: pad, width: W, chartHeight: cH, maxValue: maxVal, formatValue }),
+      dateIdxs.map((i) => /* @__PURE__ */ jsxRuntime.jsx("text", { x: xFor(dates[i]), y: height - 18, textAnchor: "middle", fill: colors.neutral.gray700, fontSize: 11, children: formatDate(dates[i]) }, dates[i])),
+      threshold != null && /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: pad.left, x2: W - pad.right, y1: yFor(threshold), y2: yFor(threshold), stroke: colors.semantic.error, strokeDasharray: "5 4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: W - pad.right, y: yFor(threshold) - 6, textAnchor: "end", fill: colors.semantic.error, fontSize: 11, children: thresholdLabel ?? formatValue(threshold) })
+      ] }),
+      seriesGroups.map(({ series: sName, data: sd }, idx) => {
+        const clr = seriesColors[idx % seriesColors.length];
+        const coords = sd.map((d) => ({ x: xFor(d.date), y: yFor(d.value) }));
+        const first = coords[0];
+        const last = coords[coords.length - 1];
+        let pathD;
+        if (type === "step") {
+          pathD = sd.reduce((p, d, i) => {
+            const x = xFor(d.date), y = yFor(d.value);
+            return i === 0 ? `M ${x} ${y}` : `${p} H ${x} V ${y}`;
+          }, "");
+        } else if (smooth) {
+          pathD = createSmoothSplinePath(coords);
+        } else {
+          pathD = coords.map((c, i) => `${i === 0 ? "M" : "L"} ${c.x} ${c.y}`).join(" ");
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          type === "area" && first && last && /* @__PURE__ */ jsxRuntime.jsx("path", { d: `${pathD} L ${last.x} ${bottom} L ${first.x} ${bottom} Z`, fill: clr, fillOpacity: 0.14 }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD, fill: "none", stroke: clr, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }),
+          sd.map((d) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: xFor(d.date), cy: yFor(d.value), fill: clr, r: "3", children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${sName}, ${formatDate(d.date)}: ${formatValue(d.value)}` }) }, d.id ?? `${sName}-${d.date}`))
+        ] }, sName);
+      })
+    ] })
+  ] });
+}
+var LineChart = TimeSeriesChart;
+function BulletChart({
+  data,
+  height = 280,
+  ariaLabel = "Bullet chart",
+  formatValue = defaultFormatter,
+  style
+}) {
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-label": ariaLabel, role: "img", style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: spacing.md, height, minHeight: height, ...style }, children: data.map((datum) => {
+    const max = datum.max ?? Math.max(datum.value, datum.target, ...datum.ranges ?? [], 1);
+    const ranges = datum.ranges ?? [max * 0.6, max * 0.8, max];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: colors.neutral.gray700, display: "flex", fontSize: fontSize.xs, justifyContent: "space-between", marginBottom: spacing.xxs }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: datum.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          formatValue(datum.value),
+          " / ",
+          formatValue(datum.target)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: colors.neutral.gray200, height: 20, overflow: "hidden", position: "relative" }, children: [
+        ranges.map((range, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: ["#F5F5F5", "#E8EBF2", "#D9DFF0"][Math.min(index, 2)], height: "100%", left: index === 0 ? 0 : `${ranges[index - 1] / max * 100}%`, position: "absolute", width: `${(range - (ranges[index - 1] ?? 0)) / max * 100}%` } }, range)),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: colors.brand.primary, height: 8, left: 0, position: "absolute", top: 6, width: `${Math.min(100, datum.value / max * 100)}%` } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": `Target ${formatValue(datum.target)}`, style: { background: colors.neutral.gray700, height: "100%", left: `${Math.min(100, datum.target / max * 100)}%`, position: "absolute", top: 0, width: 2 } })
+      ] })
+    ] }, datum.id ?? datum.label);
+  }) });
+}
+function HistogramChart({
+  data,
+  bins = "auto",
+  height = 280,
+  color,
+  ariaLabel = "Histogram",
+  style
+}) {
+  if (!data.length) return /* @__PURE__ */ jsxRuntime.jsx(ChartEmptyState, { height });
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const binCount = typeof bins === "number" ? Math.max(1, Math.floor(bins)) : Math.max(1, Math.ceil(Math.sqrt(data.length)));
+  const size = max === min ? 1 : (max - min) / binCount;
+  const bucketData = Array.from({ length: binCount }, (_, index) => {
+    const start = min + index * size;
+    const end = index === binCount - 1 ? max : start + size;
+    const count = data.filter(
+      (value) => index === binCount - 1 ? value >= start && value <= end : value >= start && value < end
+    ).length;
+    return { label: `${start.toFixed(0)}\u2013${end.toFixed(0)}`, value: count };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ColumnChart,
+    {
+      ariaLabel,
+      color,
+      data: bucketData,
+      formatValue: defaultFormatter,
+      height,
+      style
+    }
+  );
+}
 var Modal = ({ children, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(antd.Modal, { ...rest, children });
 };
@@ -811,8 +1487,10 @@ var Header = React__default.default.forwardRef(
           gap: spacing.lg,
           flexWrap: "nowrap",
           padding: `${spacing.lg}px ${spacing.xl}px`,
-          background: colors.neutral.white,
+          background: "transparent",
+          border: "none",
           borderBottom: `1px solid ${colors.neutral.gray200}`,
+          boxShadow: "none",
           position: sticky ? "sticky" : void 0,
           top: sticky ? 0 : void 0,
           zIndex: sticky ? 20 : void 0,
@@ -1056,6 +1734,21 @@ function CloseIcon({ size = 14, className, style }) {
     }
   );
 }
+function DownloadIcon({ size = 14, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "64 64 896 896",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M505.7 661a8 8 0 0012.6 0l112-122c4.6-5 1-13-5.7-13H544V224c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v302h-80.6c-6.7 0-10.4 8-5.7 13l112 122zM832 768H192c-17.7 0-32 14.3-32 32v48c0 4.4 3.6 8 8 8h688c4.4 0 8-3.6 8-8v-48c0-17.7-14.3-32-32-32z" })
+    }
+  );
+}
 var { Sider } = antd.Layout;
 var MOBILE_HEADER = spacing.xxl;
 var LOGO_HEIGHT = spacing.xxl + spacing.md;
@@ -1106,7 +1799,6 @@ function SideNavFooter({
     {
       style: {
         flexShrink: 0,
-        borderTop: `1px solid ${colors.neutral.gray200}`,
         padding: collapsed ? spacing.sm : spacing.md,
         display: "flex",
         flexDirection: collapsed ? "column" : "row",
@@ -1227,8 +1919,7 @@ function SideNavPanel({
               flexDirection: collapsed ? "column" : "row",
               alignItems: "center",
               gap: spacing.xs,
-              padding: collapsed ? spacing.sm : spacing.md,
-              borderBottom: `1px solid ${colors.neutral.gray200}`
+              padding: collapsed ? spacing.sm : spacing.md
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1430,7 +2121,6 @@ function SideNav({
               justifyContent: "space-between",
               gap: spacing.xs,
               paddingInline: spacing.md,
-              borderBottom: `1px solid ${colors.neutral.gray200}`,
               background: colors.neutral.white
             },
             children: [
@@ -1639,18 +2329,132 @@ function UnauthorizedPage({
   );
 }
 UnauthorizedPage.displayName = "UnauthorizedPage";
+var FILLED_BG = {
+  success: colors.semantic.success,
+  error: colors.semantic.error,
+  warning: colors.semantic.warning,
+  info: colors.brand.primary
+};
+var InlineAlert = React__default.default.forwardRef(function InlineAlert2({
+  type = "info",
+  showIcon = true,
+  variant = "outlined",
+  style,
+  className,
+  ...rest
+}, ref) {
+  const isFilled = variant === "filled";
+  const alertStyle = {
+    ...isFilled ? {
+      backgroundColor: FILLED_BG[type],
+      borderColor: FILLED_BG[type],
+      color: colors.neutral.white
+    } : void 0,
+    ...style
+  };
+  const alertElement = /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Alert,
+    {
+      ref,
+      type,
+      showIcon,
+      style: alertStyle,
+      className: [
+        isFilled ? "cms-alert-filled" : "cms-alert-outlined",
+        className
+      ].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+  if (isFilled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.ConfigProvider,
+      {
+        theme: {
+          components: {
+            Alert: {
+              colorText: colors.neutral.white,
+              colorTextHeading: colors.neutral.white,
+              colorIcon: colors.neutral.white,
+              colorIconHover: colors.neutral.gray200
+            }
+          }
+        },
+        children: alertElement
+      }
+    );
+  }
+  return alertElement;
+});
+InlineAlert.displayName = "InlineAlert";
+var NotificationContext = React.createContext(null);
+var useNotification = () => {
+  const context = React.useContext(NotificationContext);
+  if (!context) {
+    throw new Error(
+      "useNotification must be used within a <NotificationProvider>. Wrap your component tree with <NotificationProvider>."
+    );
+  }
+  return context;
+};
+var useNotifications = useNotification;
+var toAntNotifyArgs = (config) => ({
+  ...config,
+  btn: config.actions ?? config.btn
+});
+var InternalNotificationProvider = ({
+  children
+}) => {
+  const [messageApi, messageContextHolder] = antd.message.useMessage();
+  const [notificationApi, notificationContextHolder] = antd.notification.useNotification();
+  const value = React.useMemo(
+    () => ({
+      toast: messageApi,
+      notify: {
+        ...notificationApi,
+        open: (config) => notificationApi.open(toAntNotifyArgs(config)),
+        success: (config) => notificationApi.success(toAntNotifyArgs(config)),
+        error: (config) => notificationApi.error(toAntNotifyArgs(config)),
+        info: (config) => notificationApi.info(toAntNotifyArgs(config)),
+        warning: (config) => notificationApi.warning(toAntNotifyArgs(config))
+      }
+    }),
+    [messageApi, notificationApi]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value, children: [
+    messageContextHolder,
+    notificationContextHolder,
+    children
+  ] });
+};
+var NotificationProvider = Object.assign(
+  InternalNotificationProvider,
+  {
+    Alert: InlineAlert
+  }
+);
 
+exports.BarChart = BarChart;
+exports.BulletChart = BulletChart;
 exports.Button = Button;
 exports.Card = Card;
 exports.CloseIcon = CloseIcon;
 exports.CollapseIcon = CollapseIcon;
+exports.ColumnChart = ColumnChart;
+exports.DonutChart = DonutChart;
+exports.DownloadIcon = DownloadIcon;
 exports.Dropdown = Dropdown;
 exports.Header = Header;
+exports.HistogramChart = HistogramChart;
+exports.InlineAlert = InlineAlert;
+exports.LineChart = LineChart;
 exports.Link = Link;
 exports.LogoutIcon = LogoutIcon;
 exports.MenuIcon = MenuIcon;
+exports.MetricCard = MetricCard;
 exports.Modal = Modal;
 exports.NotFoundPage = NotFoundPage;
+exports.NotificationProvider = NotificationProvider;
 exports.SideNav = SideNav;
 exports.Skeleton = Skeleton;
 exports.StatusPage = StatusPage;
@@ -1658,6 +2462,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.ThemeProvider = ThemeProvider;
+exports.TimeSeriesChart = TimeSeriesChart;
 exports.UnauthorizedPage = UnauthorizedPage;
 exports.breakpoints = breakpoints;
 exports.colors = colors;
@@ -1665,5 +2470,7 @@ exports.fontSize = fontSize;
 exports.indusActionLogo = indusActionLogo;
 exports.spacing = spacing;
 exports.theme = theme;
+exports.useNotification = useNotification;
+exports.useNotifications = useNotifications;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map