@astralui/core 0.1.2 → 0.1.4

package/README.md

@@ -14,6 +14,9 @@ dependency-free UI components. No CSS-in-JS runtime: just CSS variables +
 - 🖌️ **Per-brand theming** - `AstralThemeProvider` generates a brand palette from a single hex and injects per-scheme overrides at runtime (with live preview).
 - 🧩 **Components** - `AstralModal`, `AstralDrawer`, `AstralSelect`, `AstralMenu`, `AstralPinInput`, `AstralToaster` + `notifications`, `DateInput`, `Spinner`.
 - 🌌 **Backgrounds** - `SpaceBackground` (animated starfield) and `GridBackground` (masked technical grid) for auth screens, heroes, and splash pages.
+- 📊 **Charts** - dependency-free, prop-driven `Sparkline`, `Delta`, `Donut`, `FunnelBars`, `StackedBars` (pure SVG + CSS, theme-aware).
+- 🔐 **Auth surface** - `AuthShell` / `AuthCard` + `au-auth-*` classes for sign-in / sign-up / verify / onboarding screens.
+- ❓ **ConfirmModal** - a confirmation/alert dialog (with a `danger` variant) built on `AstralModal`.
 
 ## Install
 
@@ -92,6 +95,12 @@ notifications.update({ id: 'x', message: 'Done', color: 'green', loading: false,
 | `notifications` + `AstralToaster` | Toast system. |
 | `SpaceBackground` | Animated cosmic backdrop with a twinkling starfield (wrap your content as children). |
 | `GridBackground` | Subtle technical grid with a brand-tinted glow, edge-masked. |
+| `Sparkline` / `Delta` | Inline KPI sparkline; period-over-period delta badge. |
+| `Donut` / `FunnelBars` / `StackedBars` | Interactive, linked-hover charts (pure SVG + CSS). |
+| `AuthShell` / `AuthCard` | Centered auth/onboarding layout on a cosmic or wash backdrop. |
+| `ConfirmModal` | Confirmation dialog (supports a `danger` variant). |
+| `Avatar` | Image avatar with an initials fallback (brand gradient). |
+| `StatusBadge` | Status pill (dot + label), prop-driven color + `filled`. |
 | `generateColors(hex)` | 10-shade palette from one color. |
 
 ## Token reference

package/dist/index.cjs

@@ -613,6 +613,312 @@ function GridBackground({ children, className, style, fixed }) {
   const s = fixed ? { position: "fixed", inset: 0, ...style } : style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("astral-grid-bg", className), style: s, children });
 }
+function chartColor(c) {
+  if (c.startsWith("var(") || c.startsWith("#") || c.startsWith("rgb") || c.startsWith("hsl")) return c;
+  return `var(--astral-color-${c.replace(".", "-")})`;
+}
+function Sparkline({ points, color }) {
+  if (!points || points.length < 2 || points.every((p) => p === 0)) return null;
+  const w = 100, h = 28;
+  const max = Math.max(...points), min = Math.min(...points);
+  const range = max - min || 1;
+  const step = w / (points.length - 1);
+  const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(1)},${(h - (p - min) / range * h).toFixed(1)}`).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "au-spark", viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: chartColor(color), strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Delta({ current, previous }) {
+  if (previous == null || previous === 0) return null;
+  const pct = Math.round((current - previous) / previous * 100);
+  if (pct === 0) return null;
+  const up = pct > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `au-delta ${up ? "up" : "down"}`, children: [
+    up ? "\u25B2" : "\u25BC",
+    " ",
+    Math.abs(pct),
+    "%"
+  ] });
+}
+function Donut({ data, centerValue, centerLabel }) {
+  const [hovered, setHovered] = react.useState(null);
+  const total = data.reduce((s, d) => s + d.value, 0) || 1;
+  const c = 75, r = 58, sw = 18, circ = 2 * Math.PI * r;
+  let offset = 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-donut", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-donut-ring", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: 150, height: 150, viewBox: "0 0 150 150", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: c, cy: c, r, fill: "none", stroke: "var(--au-surface-2)", strokeWidth: sw }),
+        data.map((d, i) => {
+          const dash = d.value / total * circ;
+          const el = /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: c,
+              cy: c,
+              r,
+              fill: "none",
+              stroke: chartColor(d.color),
+              strokeWidth: hovered === i ? sw + 4 : sw,
+              strokeDasharray: `${dash} ${circ - dash}`,
+              strokeDashoffset: -offset,
+              transform: `rotate(-90 ${c} ${c})`,
+              style: {
+                opacity: hovered == null || hovered === i ? 1 : 0.28,
+                transition: "opacity .15s, stroke-width .15s",
+                cursor: "pointer"
+              },
+              onMouseEnter: () => setHovered(i),
+              onMouseLeave: () => setHovered(null)
+            },
+            i
+          );
+          offset += dash;
+          return el;
+        })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-donut-ctr", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: centerValue }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: centerLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-donut-legend", children: data.map((d, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `au-dl ${hovered === i ? "on" : hovered != null ? "off" : ""}`,
+        onMouseEnter: () => setHovered(i),
+        onMouseLeave: () => setHovered(null),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot", style: { background: chartColor(d.color) } }),
+          /* @__PURE__ */ jsxRuntime.jsx("b", { children: d.value.toLocaleString() }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dll", children: d.name })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function FunnelBars({ data }) {
+  const [hov, setHov] = react.useState(null);
+  const max = Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-funnel", children: data.map((d, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `au-fbar ${hov === i ? "on" : hov != null ? "off" : ""}`,
+      onMouseEnter: () => setHov(i),
+      onMouseLeave: () => setHov(null),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-fbar-label", children: d.stage }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-fbar-track", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-fbar-fill", style: { width: `${d.value / max * 100}%`, background: chartColor(d.color) } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-fbar-val", children: d.value.toLocaleString() })
+      ]
+    },
+    d.stage
+  )) });
+}
+function StackedBars({ rows, series }) {
+  const [hovSeries, setHovSeries] = react.useState(null);
+  const [hovSeg, setHovSeg] = react.useState(null);
+  const max = Math.max(...rows.map((r) => r.values.reduce((a, b) => a + b, 0)), 1);
+  const anyHover = hovSeries != null || hovSeg != null;
+  const active = (row, s) => hovSeries != null ? s === hovSeries : hovSeg != null ? hovSeg.row === row && hovSeg.s === s : true;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "au-usage", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-usage-legend", children: series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `au-ulg ${hovSeries === si ? "on" : hovSeries != null ? "off" : ""}`,
+        onMouseEnter: () => setHovSeries(si),
+        onMouseLeave: () => setHovSeries(null),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot", style: { background: chartColor(s.color) } }),
+          s.label
+        ]
+      },
+      si
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-usage-rows", children: rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `au-urow ${hovSeg?.row === i ? "on" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-urow-label", title: r.label, children: r.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-utrack", children: r.values.map((v, si) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "au-useg",
+          onMouseEnter: () => setHovSeg({ row: i, s: si }),
+          onMouseLeave: () => setHovSeg(null),
+          style: {
+            width: `${v / max * 100}%`,
+            background: chartColor(series[si].color),
+            opacity: anyHover && !active(i, si) ? 0.2 : 1,
+            filter: anyHover && active(i, si) ? "brightness(1.2)" : void 0
+          }
+        },
+        si
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-unums", children: r.values.map((v, si) => /* @__PURE__ */ jsxRuntime.jsx(
+        "b",
+        {
+          style: {
+            color: chartColor(series[si].color),
+            opacity: anyHover && !active(i, si) ? 0.28 : 1,
+            textShadow: anyHover && active(i, si) ? `0 0 10px ${chartColor(series[si].color)}` : void 0
+          },
+          children: v.toLocaleString()
+        },
+        si
+      )) })
+    ] }, i)) })
+  ] });
+}
+function AuthShell({ children, backdrop = "space", topLeft, topRight, className, style }) {
+  const cls2 = `au-auth${backdrop === "space" ? " astral-space-bg" : ""}${className ? " " + className : ""}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls2, style, children: [
+    backdrop === "space" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "astral-stars", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-auth-bg", "aria-hidden": "true" }),
+    topLeft,
+    topRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-auth-lang", children: topRight }) : null,
+    children
+  ] });
+}
+function AuthCard({ children, banner, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `au-auth-card${className ? " " + className : ""}`, style, children: [
+    banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "au-auth-banner", children: banner }) : null,
+    children
+  ] });
+}
+function ConfirmModal({
+  opened,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  danger,
+  loading,
+  width = 420,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AstralModal, { opened, onClose, title, width, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "clay-form", children: [
+    message != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, lineHeight: 1.55, color: "var(--au-dim)" }, children: message }),
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "clay-actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "au-btn", onClick: onClose, disabled: loading, children: cancelLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: `au-btn ${danger ? "solidred" : "primary"}`,
+          onClick: onConfirm,
+          disabled: loading,
+          children: [
+            loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-spinner", style: { width: 14, height: 14 } }) : null,
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function Avatar({ url, name, size = 36, radius = "50%", className = "", overlay = false, color }) {
+  const [broken, setBroken] = react.useState(false);
+  react.useEffect(() => {
+    setBroken(false);
+  }, [url]);
+  if (overlay) {
+    if (!url || broken) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: url,
+        alt: name || "",
+        className,
+        referrerPolicy: "no-referrer",
+        onError: () => setBroken(true),
+        style: { position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: radius, objectFit: "cover" }
+      }
+    );
+  }
+  if (url && !broken) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: url,
+        alt: name || "",
+        className,
+        width: size,
+        height: size,
+        referrerPolicy: "no-referrer",
+        loading: "lazy",
+        onError: () => setBroken(true),
+        style: { width: size, height: size, borderRadius: radius, objectFit: "cover", display: "block", flex: "0 0 auto" }
+      }
+    );
+  }
+  const initials = (name || "").trim().slice(0, 2).toUpperCase() || "-";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      "aria-hidden": true,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: radius,
+        flex: "0 0 auto",
+        display: "inline-grid",
+        placeItems: "center",
+        color: "#fff",
+        fontWeight: 700,
+        fontSize: Math.max(9, Math.round(size * 0.4)),
+        lineHeight: 1,
+        background: color ?? "linear-gradient(135deg, var(--astral-color-violet-6), var(--astral-color-violet-8))"
+      },
+      children: initials
+    }
+  );
+}
+var COLOR_MAP = {
+  offline: "#3b82f6",
+  online: "#16a34a",
+  active: "#16a34a",
+  suspended: "#eab308",
+  banned: "#ef4444",
+  creating: "#06b6d4",
+  verification_needed: "#EF8E2E",
+  signup_failed: "#ef4444",
+  untested: "#9ca3af",
+  failed: "#ef4444",
+  idle: "#9ca3af",
+  starting: "#06b6d4",
+  running: "#16a34a",
+  stopping: "#eab308",
+  stopped: "#EF8E2E",
+  error: "#ef4444",
+  draft: "#9ca3af",
+  scheduled: "#3b82f6",
+  paused: "#eab308",
+  completed: "#16a34a",
+  skipped: "#EF8E2E",
+  in_campaign: "#8b5cf6",
+  in_progress: "#3b82f6",
+  pending: "#9ca3af",
+  replied: "#8b5cf6",
+  success: "#16a34a"
+};
+var FILLED = /* @__PURE__ */ new Set(["running", "active", "online"]);
+function StatusBadge({ status, label, color, filled }) {
+  const c = color ?? COLOR_MAP[status] ?? "#9ca3af";
+  const isFilled = filled ?? FILLED.has(status);
+  const text = label ?? status;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `au-sbadge${isFilled ? " filled" : ""}`,
+      style: { "--au-sb": c },
+      title: typeof text === "string" ? text : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "au-sbadge-dot" }),
+        text
+      ]
+    }
+  );
+}
 
 exports.AstralDrawer = AstralDrawer;
 exports.AstralMenu = AstralMenu;
@@ -621,12 +927,23 @@ exports.AstralPinInput = AstralPinInput;
 exports.AstralSelect = AstralSelect;
 exports.AstralThemeProvider = AstralThemeProvider;
 exports.AstralToaster = AstralToaster;
+exports.AuthCard = AuthCard;
+exports.AuthShell = AuthShell;
+exports.Avatar = Avatar;
 exports.ColorSchemeProvider = ColorSchemeProvider;
+exports.ConfirmModal = ConfirmModal;
 exports.DateInput = DateInput;
+exports.Delta = Delta;
+exports.Donut = Donut;
+exports.FunnelBars = FunnelBars;
 exports.GridBackground = GridBackground;
 exports.SpaceBackground = SpaceBackground;
+exports.Sparkline = Sparkline;
 exports.Spinner = Spinner2;
+exports.StackedBars = StackedBars;
+exports.StatusBadge = StatusBadge;
 exports.buildOrgCss = buildOrgCss;
+exports.chartColor = chartColor;
 exports.dateTimeToInputStr = dateTimeToInputStr;
 exports.dateToInputStr = dateToInputStr;
 exports.generateColors = generateColors;