@a4ui/core 0.31.0 → 0.32.0

package/dist/NumberInput-Bnh2u7pp.js

@@ -0,0 +1,381 @@
+import { spread as b, mergeProps as x, insert as d, createComponent as m, template as h, effect as v, className as p, use as $, delegateEvents as C, setAttribute as _ } from "solid-js/web";
+import { splitProps as y, Show as k, onMount as L, onCleanup as E, createSignal as z, For as D } from "solid-js";
+import { c, m as S } from "./motion-jYMWmZqB.js";
+import { Star as B, ChevronDown as V } from "lucide-solid";
+import { NumberField as w } from "@kobalte/core/number-field";
+var X = /* @__PURE__ */ h('<span class="relative flex h-1.5 w-1.5"aria-hidden=true><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current">'), Y = /* @__PURE__ */ h("<span>");
+const F = {
+  neutral: "bg-muted text-muted-foreground ring-border",
+  success: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700",
+  warning: "bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700",
+  danger: "bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700",
+  info: "bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700"
+}, G = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
+function se(e) {
+  const [t, n] = y(e, ["tone", "class", "children", "pulse"]);
+  return (() => {
+    var r = Y();
+    return b(r, x({
+      get class() {
+        return c(G, F[t.tone ?? "neutral"], t.class);
+      }
+    }, n), !1, !0), d(r, m(k, {
+      get when() {
+        return t.pulse;
+      },
+      get children() {
+        return X();
+      }
+    }), null), d(r, () => t.children, null), r;
+  })();
+}
+var O = /* @__PURE__ */ h("<span>");
+function P(e, t, n = {}) {
+  if (S()) return;
+  const r = e.getBoundingClientRect(), i = t.clientX - r.left, a = t.clientY - r.top, o = 2 * Math.max(Math.hypot(i, a), Math.hypot(r.width - i, a), Math.hypot(i, r.height - a), Math.hypot(r.width - i, r.height - a)), g = document.createElement("span");
+  g.setAttribute("aria-hidden", "true"), Object.assign(g.style, {
+    position: "absolute",
+    left: `${i}px`,
+    top: `${a}px`,
+    width: `${o}px`,
+    height: `${o}px`,
+    borderRadius: "9999px",
+    background: n.color ?? "currentColor",
+    pointerEvents: "none",
+    transform: "translate(-50%,-50%) scale(0)"
+  }), e.appendChild(g);
+  const s = g.animate([{
+    transform: "translate(-50%,-50%) scale(0)",
+    opacity: String(n.opacity ?? 0.3)
+  }, {
+    transform: "translate(-50%,-50%) scale(1)",
+    opacity: "0"
+  }], {
+    duration: 600,
+    easing: "ease-out"
+  }), l = () => g.remove();
+  s.finished.then(l).catch(l);
+}
+function ce(e) {
+  let t;
+  const n = (r) => {
+    t && P(t, r, {
+      color: e.color,
+      opacity: e.opacity
+    });
+  };
+  return (() => {
+    var r = O();
+    r.$$pointerdown = n;
+    var i = t;
+    return typeof i == "function" ? $(i, r) : t = r, d(r, () => e.children), v(() => p(r, c("relative inline-block overflow-hidden", e.class))), r;
+  })();
+}
+C(["pointerdown"]);
+var j = /* @__PURE__ */ h("<a>"), H = /* @__PURE__ */ h("<button>");
+const U = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-muted text-foreground hover:bg-muted/70",
+  outline: "border border-border bg-transparent text-foreground hover:bg-muted",
+  ghost: "bg-transparent text-foreground hover:bg-muted"
+}, q = "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50";
+function de(e) {
+  const [t, n] = y(e, ["variant", "class", "type", "children", "ripple", "onPointerDown", "href", "target", "rel"]), r = () => c(q, U[t.variant ?? "primary"], t.ripple && "relative overflow-hidden", t.class), i = (a) => {
+    t.ripple && P(a.currentTarget, a, {
+      opacity: 0.35
+    });
+    const o = t.onPointerDown;
+    typeof o == "function" ? o(a) : o && o[0](o[1], a);
+  };
+  return m(k, {
+    get when() {
+      return t.href !== void 0;
+    },
+    get fallback() {
+      return (() => {
+        var a = H();
+        return a.$$pointerdown = i, b(a, x({
+          get type() {
+            return t.type ?? "button";
+          },
+          get class() {
+            return r();
+          }
+        }, n), !1, !0), d(a, () => t.children), a;
+      })();
+    },
+    get children() {
+      var a = j();
+      return a.$$pointerdown = i, b(a, x({
+        get href() {
+          return t.href;
+        },
+        get target() {
+          return t.target;
+        },
+        get rel() {
+          return t.rel;
+        },
+        get class() {
+          return r();
+        }
+      }, n), !1, !0), d(a, () => t.children), a;
+    }
+  });
+}
+C(["pointerdown"]);
+var J = /* @__PURE__ */ h("<div>");
+function N(e, t = {}) {
+  if (S()) return () => {
+  };
+  const n = document.createElement("span");
+  n.setAttribute("aria-hidden", "true"), n.className = "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300", e.appendChild(n);
+  const r = t.size ?? 180, i = t.color ?? "hsl(var(--primary))", a = (l, u) => {
+    n.style.background = `radial-gradient(${r}px circle at ${l}px ${u}px, color-mix(in srgb, ${i} 30%, transparent), transparent 70%)`;
+  }, o = (l) => {
+    const u = e.getBoundingClientRect();
+    a(l.clientX - u.left, l.clientY - u.top);
+  }, g = () => {
+    n.style.opacity = "1";
+  }, s = () => {
+    n.style.opacity = "0";
+  };
+  return e.addEventListener("pointermove", o), e.addEventListener("pointerenter", g), e.addEventListener("pointerleave", s), () => {
+    e.removeEventListener("pointermove", o), e.removeEventListener("pointerenter", g), e.removeEventListener("pointerleave", s), n.remove();
+  };
+}
+function ue(e) {
+  let t;
+  return L(() => {
+    const n = N(t, {
+      color: e.color,
+      size: e.size
+    });
+    E(n);
+  }), (() => {
+    var n = J(), r = t;
+    return typeof r == "function" ? $(r, n) : t = n, d(n, () => e.children), v(() => p(n, c("relative overflow-hidden", e.class))), n;
+  })();
+}
+var K = /* @__PURE__ */ h("<div style=perspective:800px><div style=transform-style:preserve-3d>");
+function I(e, t, n = {}) {
+  if (S()) return () => {
+  };
+  t.style.willChange = "transform";
+  const r = (a) => {
+    const o = e.getBoundingClientRect(), g = (a.clientX - o.left) / o.width - 0.5, s = (a.clientY - o.top) / o.height - 0.5, l = n.max ?? 10;
+    t.style.transition = "transform 0.15s ease-out", t.style.transform = `perspective(800px) rotateX(${(s * -2 * l).toFixed(2)}deg) rotateY(${(g * 2 * l).toFixed(2)}deg) scale(1.02)`;
+  }, i = () => {
+    t.style.transition = "transform 0.4s ease", t.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
+  };
+  return e.addEventListener("pointermove", r), e.addEventListener("pointerleave", i), () => {
+    e.removeEventListener("pointermove", r), e.removeEventListener("pointerleave", i), t.style.transform = "", t.style.transition = "", t.style.willChange = "";
+  };
+}
+function ge(e) {
+  let t, n;
+  return L(() => {
+    const r = I(t, n, {
+      max: e.max
+    });
+    E(r);
+  }), (() => {
+    var r = K(), i = r.firstChild, a = t;
+    typeof a == "function" ? $(a, r) : t = r;
+    var o = n;
+    return typeof o == "function" ? $(o, i) : n = i, d(i, () => e.children), v(() => p(r, c("inline-block", e.class))), r;
+  })();
+}
+var A = /* @__PURE__ */ h("<div>"), Q = /* @__PURE__ */ h("<h2>");
+function fe(e) {
+  const [t, n] = y(e, ["class", "children", "glass", "glow", "tilt", "spotlight"]), r = () => (t.glow ?? t.glass) === !0;
+  let i;
+  return L(() => {
+    const a = [t.tilt && i ? I(i, i) : null, t.spotlight && i ? N(i) : null].filter((o) => o !== null);
+    E(() => a.forEach((o) => o()));
+  }), (() => {
+    var a = A(), o = i;
+    return typeof o == "function" ? $(o, a) : i = a, b(a, x({
+      get class() {
+        return c(t.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", r() && "glow-edge", t.spotlight && "relative overflow-hidden", t.tilt && "will-change-transform", t.class);
+      }
+    }, n), !1, !0), d(a, () => t.children), a;
+  })();
+}
+function he(e) {
+  const [t, n] = y(e, ["class", "children"]);
+  return (() => {
+    var r = A();
+    return b(r, x({
+      get class() {
+        return c("flex flex-col space-y-1.5 p-6", t.class);
+      }
+    }, n), !1, !0), d(r, () => t.children), r;
+  })();
+}
+function me(e) {
+  const [t, n] = y(e, ["class", "children"]);
+  return (() => {
+    var r = Q();
+    return b(r, x({
+      get class() {
+        return c("text-lg font-semibold leading-none tracking-tight", t.class);
+      }
+    }, n), !1, !0), d(r, () => t.children), r;
+  })();
+}
+function ve(e) {
+  const [t, n] = y(e, ["class", "children"]);
+  return (() => {
+    var r = A();
+    return b(r, x({
+      get class() {
+        return c("p-6 pt-0", t.class);
+      }
+    }, n), !1, !0), d(r, () => t.children), r;
+  })();
+}
+var W = /* @__PURE__ */ h("<div role=radiogroup>"), Z = /* @__PURE__ */ h("<div role=img>"), ee = /* @__PURE__ */ h('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
+function pe(e) {
+  const [t, n] = z(0), r = () => e.max ?? 5, i = () => Array.from({
+    length: r()
+  }, (s, l) => l + 1), a = () => t() > 0 ? t() : e.value, o = (s) => {
+    var l;
+    e.readonly || (l = e.onChange) == null || l.call(e, s);
+  }, g = (s) => c("h-5 w-5 transition-colors", s <= a() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
+  return m(k, {
+    get when() {
+      return !e.readonly;
+    },
+    get fallback() {
+      return (() => {
+        var s = Z();
+        return d(s, m(D, {
+          get each() {
+            return i();
+          },
+          children: (l) => m(B, {
+            get class() {
+              return g(l);
+            },
+            "aria-hidden": "true"
+          })
+        })), v((l) => {
+          var u = c("inline-flex items-center gap-1", e.class), f = `Rating ${e.value} of ${r()}`;
+          return u !== l.e && p(s, l.e = u), f !== l.t && _(s, "aria-label", l.t = f), l;
+        }, {
+          e: void 0,
+          t: void 0
+        }), s;
+      })();
+    },
+    get children() {
+      var s = W();
+      return s.addEventListener("mouseleave", () => n(0)), d(s, m(D, {
+        get each() {
+          return i();
+        },
+        children: (l) => (() => {
+          var u = ee();
+          return u.$$keydown = (f) => {
+            f.key === "ArrowRight" || f.key === "ArrowUp" ? (f.preventDefault(), o(Math.min(e.value + 1, r()))) : (f.key === "ArrowLeft" || f.key === "ArrowDown") && (f.preventDefault(), o(Math.max(e.value - 1, 0)));
+          }, u.$$click = () => o(l), u.addEventListener("blur", () => n(0)), u.addEventListener("focus", () => n(l)), u.addEventListener("mouseenter", () => n(l)), d(u, m(B, {
+            get class() {
+              return g(l);
+            },
+            "aria-hidden": "true"
+          })), v((f) => {
+            var R = e.value === l, T = `Rate ${l} of ${r()}`;
+            return R !== f.e && _(u, "aria-checked", f.e = R), T !== f.t && _(u, "aria-label", f.t = T), f;
+          }, {
+            e: void 0,
+            t: void 0
+          }), u;
+        })()
+      })), v(() => p(s, c("inline-flex items-center gap-1", e.class))), s;
+    }
+  });
+}
+C(["click", "keydown"]);
+var te = /* @__PURE__ */ h('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
+function be(e) {
+  return (() => {
+    var t = te(), n = t.firstChild;
+    return n.addEventListener("change", (r) => e.onChange(r.currentTarget.checked)), d(t, () => e.label, null), v(() => p(t, c("inline-flex items-center gap-2 text-sm text-foreground", e.class))), v(() => n.checked = e.checked), t;
+  })();
+}
+var re = /* @__PURE__ */ h('<div><button type=button class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted"></button><div><div class=overflow-hidden><div class="px-3 py-2 text-sm text-muted-foreground">');
+function xe(e) {
+  return (() => {
+    var t = re(), n = t.firstChild, r = n.nextSibling, i = r.firstChild, a = i.firstChild;
+    return n.$$click = () => e.onOpenChange(!e.open), d(n, () => e.title, null), d(n, m(V, {
+      get class() {
+        return c("h-4 w-4 shrink-0 transition-transform duration-200", e.open && "rotate-180");
+      }
+    }), null), d(a, () => e.children), v((o) => {
+      var g = c(e.class), s = e.open, l = c("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", e.open ? "grid-rows-[1fr]" : "grid-rows-[0fr]");
+      return g !== o.e && p(t, o.e = g), s !== o.t && _(n, "aria-expanded", o.t = s), l !== o.a && p(r, o.a = l), o;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), t;
+  })();
+}
+C(["click"]);
+const M = "grid h-9 w-9 shrink-0 place-items-center border border-input bg-background text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50";
+function ye(e) {
+  return m(w, {
+    get rawValue() {
+      return e.value;
+    },
+    onRawValueChange: (t) => e.onChange(t),
+    get minValue() {
+      return e.min;
+    },
+    get maxValue() {
+      return e.max;
+    },
+    get class() {
+      return c("inline-flex items-stretch", e.class);
+    },
+    get children() {
+      return [m(w.DecrementTrigger, {
+        get class() {
+          return c(M, "rounded-l-md");
+        },
+        "aria-label": "Decrement",
+        children: "−"
+      }), m(w.Input, {
+        get "aria-label"() {
+          return e["aria-label"];
+        },
+        class: "w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
+      }), m(w.IncrementTrigger, {
+        get class() {
+          return c(M, "rounded-r-md");
+        },
+        "aria-label": "Increment",
+        children: "+"
+      })];
+    }
+  });
+}
+export {
+  se as B,
+  fe as C,
+  ye as N,
+  pe as R,
+  ue as S,
+  ge as T,
+  de as a,
+  be as b,
+  xe as c,
+  ve as d,
+  he as e,
+  me as f,
+  ce as g,
+  N as h,
+  I as i,
+  P as s
+};

package/dist/charts/GaugeChart.d.ts

@@ -0,0 +1,43 @@
+import { JSX } from 'solid-js';
+export interface GaugeThreshold {
+    value: number;
+    tone: 'primary' | 'accent' | 'destructive' | 'muted';
+}
+export interface GaugeChartProps {
+    value: number;
+    /** Value mapped to the arc's start (-135°). Default 0. */
+    min?: number;
+    /** Value mapped to the arc's end (+135°). Default 100. */
+    max?: number;
+    label?: JSX.Element;
+    unit?: string;
+    /** Overall SVG width/height in px (square). Default 160. */
+    size?: number;
+    /** Value arc color when `thresholds` are omitted. Default 'primary'. */
+    tone?: 'primary' | 'accent';
+    /** Recolor the value arc once `value` reaches a threshold's `value` (highest match wins). */
+    thresholds?: GaugeThreshold[];
+    class?: string;
+}
+/**
+ * SVG radial gauge: a 270° arc (from -135° to +135°) with a background track
+ * and a value arc filled proportionally to `value` within `[min, max]`,
+ * colored by `tone` or by the highest `threshold` reached. The center shows
+ * the value plus optional `unit`/`label`. The sweep animates on mount and on
+ * value change, jumping instantly under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <GaugeChart
+ *   value={72}
+ *   unit="%"
+ *   label="CPU load"
+ *   thresholds={[
+ *     { value: 0, tone: 'primary' },
+ *     { value: 60, tone: 'accent' },
+ *     { value: 85, tone: 'destructive' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function GaugeChart(props: GaugeChartProps): JSX.Element;

package/dist/charts/LineChart.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+export interface LineSeries {
+    name?: string;
+    tone?: 'primary' | 'accent' | 'muted' | 'foreground';
+    data: number[];
+    area?: boolean;
+}
+export interface LineChartProps {
+    series: LineSeries[];
+    labels?: string[];
+    /** Height of the plot area in px. Default 200. */
+    height?: number;
+    /** Render a small circle at each data point. Default false. */
+    showDots?: boolean;
+    /** Show a crosshair + value tooltip on pointer hover. Default false. */
+    showTooltip?: boolean;
+    class?: string;
+}
+/**
+ * Multi-series SVG line chart scaled to fit its container (responsive
+ * viewBox, `preserveAspectRatio="none"`), with a shared y-scale across all
+ * series. Series with `area: true` also get a faint fill to the baseline.
+ * Assumes equal-length `data` arrays across series; if lengths differ, the
+ * x-axis is built from the longest one.
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   series={[
+ *     { name: 'Revenue', tone: 'primary', data: [4, 6, 5, 9, 8, 12], area: true },
+ *     { name: 'Costs', tone: 'muted', data: [2, 3, 3, 4, 5, 6] },
+ *   ]}
+ *   labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
+ *   showDots
+ *   showTooltip
+ * />
+ * ```
+ */
+export declare function LineChart(props: LineChartProps): JSX.Element;

package/dist/charts/RadarChart.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface RadarSeries {
+    name?: string;
+    tone?: 'primary' | 'accent';
+    values: number[];
+}
+export interface RadarChartProps {
+    axes: string[];
+    series: RadarSeries[];
+    /** Value that reaches the outer edge of the grid. Default: max across all series. */
+    max?: number;
+    /** Overall SVG width/height in px (square). Default 240. */
+    size?: number;
+    class?: string;
+}
+/**
+ * SVG spider/radar chart: a concentric polygon grid with one spoke per axis,
+ * and one translucent-filled polygon per series connecting its values
+ * (normalized by `max`, default the max value across all series). Series
+ * colors come from each datum's `tone`, or cycle through `primary`/`accent`
+ * by index when omitted. Shows a small legend when 2+ series have a `name`.
+ *
+ * @example
+ * ```tsx
+ * <RadarChart
+ *   axes={['Speed', 'Power', 'Range', 'Defense', 'Utility']}
+ *   series={[
+ *     { name: 'Model A', tone: 'primary', values: [80, 60, 90, 40, 70] },
+ *     { name: 'Model B', tone: 'accent', values: [50, 85, 60, 75, 55] },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function RadarChart(props: RadarChartProps): JSX.Element;

package/dist/charts/index.d.ts

@@ -1,3 +1,6 @@
 export { Sparkline, type SparklineProps } from './Sparkline';
 export { BarChart, type BarDatum, type BarChartProps } from './BarChart';
 export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart';
+export { LineChart, type LineSeries, type LineChartProps } from './LineChart';
+export { GaugeChart, type GaugeThreshold, type GaugeChartProps } from './GaugeChart';
+export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart';