@astralui/core 0.1.2 → 0.1.3

package/dist/index.d.cts

@@ -162,4 +162,90 @@ declare function SpaceBackground({ children, className, style, fixed }: Backgrou
  *  the edges with a radial mask. */
 declare function GridBackground({ children, className, style, fixed }: BackgroundProps): react.JSX.Element;
 
-export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, type ColorScheme, ColorSchemeProvider, DateInput, GridBackground, SpaceBackground, Spinner, type ToastOptions, buildOrgCss, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+/** "violet.6" -> var(--astral-color-violet-6); hex / var() / rgb() pass through. */
+declare function chartColor(c: string): string;
+/** Tiny inline SVG sparkline for KPI cards. */
+declare function Sparkline({ points, color }: {
+    points: number[];
+    color: string;
+}): react.JSX.Element | null;
+/** Period-over-period delta badge; renders nothing when there's no comparison. */
+declare function Delta({ current, previous }: {
+    current: number;
+    previous: number | null | undefined;
+}): react.JSX.Element | null;
+interface DonutDatum {
+    name: string;
+    value: number;
+    color: string;
+}
+/** Interactive donut with a linked side-legend (ring slice <-> legend row hover). */
+declare function Donut({ data, centerValue, centerLabel }: {
+    data: DonutDatum[];
+    centerValue: string;
+    centerLabel: string;
+}): react.JSX.Element;
+interface FunnelDatum {
+    stage: string;
+    value: number;
+    color: string;
+}
+/** Horizontal funnel/pipeline bars; hovering a bar highlights it and dims the rest. */
+declare function FunnelBars({ data }: {
+    data: FunnelDatum[];
+}): react.JSX.Element;
+interface StackedRow {
+    label: string;
+    values: number[];
+}
+interface StackedSeries {
+    label: string;
+    color: string;
+}
+/** Stacked horizontal bars with linked hover: hover a legend series OR a segment
+ *  to highlight it across every row (others dim). Values are always shown. */
+declare function StackedBars({ rows, series }: {
+    rows: StackedRow[];
+    series: StackedSeries[];
+}): react.JSX.Element;
+
+interface AuthShellProps {
+    children: ReactNode;
+    /** 'space' = cosmic starfield (default), 'wash' = brand radial + faint grid. */
+    backdrop?: 'space' | 'wash';
+    /** top-left slot (e.g. a back button) */
+    topLeft?: ReactNode;
+    /** top-right slot (e.g. a language switcher) */
+    topRight?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function AuthShell({ children, backdrop, topLeft, topRight, className, style }: AuthShellProps): react.JSX.Element;
+interface AuthCardProps {
+    children: ReactNode;
+    /** rendered in the branded banner strip at the top of the card (e.g. a logo) */
+    banner?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function AuthCard({ children, banner, className, style }: AuthCardProps): react.JSX.Element;
+
+interface ConfirmModalProps {
+    opened: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: ReactNode;
+    message?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** red confirm button for destructive actions */
+    danger?: boolean;
+    /** show a spinner and disable the buttons while an async action runs */
+    loading?: boolean;
+    width?: number;
+    /** extra content rendered above the actions (e.g. a checkbox) */
+    children?: ReactNode;
+}
+declare function ConfirmModal({ opened, onClose, onConfirm, title, message, confirmLabel, cancelLabel, danger, loading, width, children, }: ConfirmModalProps): react.JSX.Element;
+
+export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };

package/dist/index.d.ts

@@ -162,4 +162,90 @@ declare function SpaceBackground({ children, className, style, fixed }: Backgrou
  *  the edges with a radial mask. */
 declare function GridBackground({ children, className, style, fixed }: BackgroundProps): react.JSX.Element;
 
-export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, type ColorScheme, ColorSchemeProvider, DateInput, GridBackground, SpaceBackground, Spinner, type ToastOptions, buildOrgCss, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+/** "violet.6" -> var(--astral-color-violet-6); hex / var() / rgb() pass through. */
+declare function chartColor(c: string): string;
+/** Tiny inline SVG sparkline for KPI cards. */
+declare function Sparkline({ points, color }: {
+    points: number[];
+    color: string;
+}): react.JSX.Element | null;
+/** Period-over-period delta badge; renders nothing when there's no comparison. */
+declare function Delta({ current, previous }: {
+    current: number;
+    previous: number | null | undefined;
+}): react.JSX.Element | null;
+interface DonutDatum {
+    name: string;
+    value: number;
+    color: string;
+}
+/** Interactive donut with a linked side-legend (ring slice <-> legend row hover). */
+declare function Donut({ data, centerValue, centerLabel }: {
+    data: DonutDatum[];
+    centerValue: string;
+    centerLabel: string;
+}): react.JSX.Element;
+interface FunnelDatum {
+    stage: string;
+    value: number;
+    color: string;
+}
+/** Horizontal funnel/pipeline bars; hovering a bar highlights it and dims the rest. */
+declare function FunnelBars({ data }: {
+    data: FunnelDatum[];
+}): react.JSX.Element;
+interface StackedRow {
+    label: string;
+    values: number[];
+}
+interface StackedSeries {
+    label: string;
+    color: string;
+}
+/** Stacked horizontal bars with linked hover: hover a legend series OR a segment
+ *  to highlight it across every row (others dim). Values are always shown. */
+declare function StackedBars({ rows, series }: {
+    rows: StackedRow[];
+    series: StackedSeries[];
+}): react.JSX.Element;
+
+interface AuthShellProps {
+    children: ReactNode;
+    /** 'space' = cosmic starfield (default), 'wash' = brand radial + faint grid. */
+    backdrop?: 'space' | 'wash';
+    /** top-left slot (e.g. a back button) */
+    topLeft?: ReactNode;
+    /** top-right slot (e.g. a language switcher) */
+    topRight?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function AuthShell({ children, backdrop, topLeft, topRight, className, style }: AuthShellProps): react.JSX.Element;
+interface AuthCardProps {
+    children: ReactNode;
+    /** rendered in the branded banner strip at the top of the card (e.g. a logo) */
+    banner?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function AuthCard({ children, banner, className, style }: AuthCardProps): react.JSX.Element;
+
+interface ConfirmModalProps {
+    opened: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: ReactNode;
+    message?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** red confirm button for destructive actions */
+    danger?: boolean;
+    /** show a spinner and disable the buttons while an async action runs */
+    loading?: boolean;
+    width?: number;
+    /** extra content rendered above the actions (e.g. a checkbox) */
+    children?: ReactNode;
+}
+declare function ConfirmModal({ opened, onClose, onConfirm, title, message, confirmLabel, cancelLabel, danger, loading, width, children, }: ConfirmModalProps): react.JSX.Element;
+
+export { AstralDrawer, AstralMenu, type AstralMenuItem, AstralModal, AstralPinInput, AstralSelect, type AstralSelectOption, type AstralThemeColors, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, type ColorScheme, ColorSchemeProvider, ConfirmModal, type ConfirmModalProps, DateInput, Delta, Donut, type DonutDatum, FunnelBars, type FunnelDatum, GridBackground, SpaceBackground, Sparkline, Spinner, StackedBars, type StackedRow, type StackedSeries, type ToastOptions, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };

package/dist/index.js

@@ -607,7 +607,209 @@ function GridBackground({ children, className, style, fixed }) {
   const s = fixed ? { position: "fixed", inset: 0, ...style } : style ?? {};
   return /* @__PURE__ */ 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__ */ jsx("svg", { className: "au-spark", viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", "aria-hidden": true, children: /* @__PURE__ */ 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__ */ jsxs("span", { className: `au-delta ${up ? "up" : "down"}`, children: [
+    up ? "\u25B2" : "\u25BC",
+    " ",
+    Math.abs(pct),
+    "%"
+  ] });
+}
+function Donut({ data, centerValue, centerLabel }) {
+  const [hovered, setHovered] = 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__ */ jsxs("div", { className: "au-donut", children: [
+    /* @__PURE__ */ jsxs("div", { className: "au-donut-ring", children: [
+      /* @__PURE__ */ jsxs("svg", { width: 150, height: 150, viewBox: "0 0 150 150", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "au-donut-ctr", children: [
+        /* @__PURE__ */ jsx("b", { children: centerValue }),
+        /* @__PURE__ */ jsx("span", { children: centerLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "au-donut-legend", children: data.map((d, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `au-dl ${hovered === i ? "on" : hovered != null ? "off" : ""}`,
+        onMouseEnter: () => setHovered(i),
+        onMouseLeave: () => setHovered(null),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "dot", style: { background: chartColor(d.color) } }),
+          /* @__PURE__ */ jsx("b", { children: d.value.toLocaleString() }),
+          /* @__PURE__ */ jsx("span", { className: "dll", children: d.name })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function FunnelBars({ data }) {
+  const [hov, setHov] = useState(null);
+  const max = Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsx("div", { className: "au-funnel", children: data.map((d, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `au-fbar ${hov === i ? "on" : hov != null ? "off" : ""}`,
+      onMouseEnter: () => setHov(i),
+      onMouseLeave: () => setHov(null),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "au-fbar-label", children: d.stage }),
+        /* @__PURE__ */ jsx("div", { className: "au-fbar-track", children: /* @__PURE__ */ jsx("div", { className: "au-fbar-fill", style: { width: `${d.value / max * 100}%`, background: chartColor(d.color) } }) }),
+        /* @__PURE__ */ jsx("span", { className: "au-fbar-val", children: d.value.toLocaleString() })
+      ]
+    },
+    d.stage
+  )) });
+}
+function StackedBars({ rows, series }) {
+  const [hovSeries, setHovSeries] = useState(null);
+  const [hovSeg, setHovSeg] = 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__ */ jsxs("div", { className: "au-usage", children: [
+    /* @__PURE__ */ jsx("div", { className: "au-usage-legend", children: series.map((s, si) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `au-ulg ${hovSeries === si ? "on" : hovSeries != null ? "off" : ""}`,
+        onMouseEnter: () => setHovSeries(si),
+        onMouseLeave: () => setHovSeries(null),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "dot", style: { background: chartColor(s.color) } }),
+          s.label
+        ]
+      },
+      si
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "au-usage-rows", children: rows.map((r, i) => /* @__PURE__ */ jsxs("div", { className: `au-urow ${hovSeg?.row === i ? "on" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "au-urow-label", title: r.label, children: r.label }),
+      /* @__PURE__ */ jsx("div", { className: "au-utrack", children: r.values.map((v, si) => /* @__PURE__ */ 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__ */ jsx("span", { className: "au-unums", children: r.values.map((v, si) => /* @__PURE__ */ 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__ */ jsxs("div", { className: cls2, style, children: [
+    backdrop === "space" ? /* @__PURE__ */ jsx("div", { className: "astral-stars", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("div", { className: "au-auth-bg", "aria-hidden": "true" }),
+    topLeft,
+    topRight ? /* @__PURE__ */ jsx("div", { className: "au-auth-lang", children: topRight }) : null,
+    children
+  ] });
+}
+function AuthCard({ children, banner, className, style }) {
+  return /* @__PURE__ */ jsxs("div", { className: `au-auth-card${className ? " " + className : ""}`, style, children: [
+    banner ? /* @__PURE__ */ 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__ */ jsx(AstralModal, { opened, onClose, title, width, children: /* @__PURE__ */ jsxs("div", { className: "clay-form", children: [
+    message != null && /* @__PURE__ */ jsx("div", { style: { fontSize: 13, lineHeight: 1.55, color: "var(--au-dim)" }, children: message }),
+    children,
+    /* @__PURE__ */ jsxs("div", { className: "clay-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "au-btn", onClick: onClose, disabled: loading, children: cancelLabel }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `au-btn ${danger ? "solidred" : "primary"}`,
+          onClick: onConfirm,
+          disabled: loading,
+          children: [
+            loading ? /* @__PURE__ */ jsx("span", { className: "au-spinner", style: { width: 14, height: 14 } }) : null,
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
 
-export { AstralDrawer, AstralMenu, AstralModal, AstralPinInput, AstralSelect, AstralThemeProvider, AstralToaster, ColorSchemeProvider, DateInput, GridBackground, SpaceBackground, Spinner2 as Spinner, buildOrgCss, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
+export { AstralDrawer, AstralMenu, AstralModal, AstralPinInput, AstralSelect, AstralThemeProvider, AstralToaster, AuthCard, AuthShell, ColorSchemeProvider, ConfirmModal, DateInput, Delta, Donut, FunnelBars, GridBackground, SpaceBackground, Sparkline, Spinner2 as Spinner, StackedBars, buildOrgCss, chartColor, dateTimeToInputStr, dateToInputStr, generateColors, notifications, useColorScheme, useThemePreview };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map