@a4ui/core 0.31.0 → 0.32.0

package/dist/motion-jYMWmZqB.js

@@ -0,0 +1,119 @@
+import { clsx as M } from "clsx";
+import { twMerge as h } from "tailwind-merge";
+import { animate as a, inView as I } from "motion";
+import { createSignal as i, createEffect as R, untrack as m, onCleanup as C } from "solid-js";
+function N(...e) {
+  return h(M(e));
+}
+const l = "a4ui-effects";
+function p() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function F() {
+  var t;
+  try {
+    if (new URLSearchParams(window.location.search).get("calm") === "1") return !1;
+  } catch {
+  }
+  const e = (t = p()) == null ? void 0 : t.getItem(l);
+  return e === null ? !0 : e === "1";
+}
+function y(e) {
+  typeof document > "u" || document.documentElement.classList.toggle("calm", !e);
+}
+const w = F();
+y(w);
+const [g, U] = i(w);
+function V() {
+  return g;
+}
+function _() {
+  return !g();
+}
+function b(e) {
+  var t;
+  (t = p()) == null || t.setItem(l, e ? "1" : "0"), y(e), U(e);
+}
+const L = "(prefers-reduced-motion: reduce)";
+function T() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(L).matches;
+}
+const E = "a4ui-motion-forced";
+function O() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+var d;
+const [u, Y] = i(((d = O()) == null ? void 0 : d.getItem(E)) === "1");
+typeof document < "u" && document.documentElement.classList.toggle("force-motion", m(u));
+function k() {
+  return u;
+}
+function A(e) {
+  var t;
+  (t = O()) == null || t.setItem(E, e ? "1" : "0"), typeof document < "u" && document.documentElement.classList.toggle("force-motion", e), Y(e);
+}
+function c() {
+  return _() || T() && !u();
+}
+function G(e, t = 600) {
+  const [o, f] = i(0);
+  let n;
+  return R(() => {
+    const r = e();
+    if (n == null || n.stop(), c()) {
+      f(r);
+      return;
+    }
+    const s = m(o);
+    s !== r && (n = a(s, r, {
+      duration: t / 1e3,
+      ease: "easeOut",
+      onUpdate: (S) => f(S)
+    }));
+  }), C(() => n == null ? void 0 : n.stop()), o;
+}
+function P(e, t = {}) {
+  c() || a(
+    e,
+    { opacity: [0, 1], y: [t.y ?? 8, 0] },
+    { duration: t.duration ?? 0.32, delay: t.delay ?? 0, ease: "easeOut" }
+  );
+}
+function Q(e, t = {}) {
+  if (c()) return () => {
+  };
+  e.style.opacity = "0";
+  let o = !1;
+  return I(
+    e,
+    () => {
+      o || (o = !0, a(
+        e,
+        { opacity: [0, 1], y: [t.y ?? 16, 0] },
+        { duration: t.duration ?? 0.5, ease: "easeOut" }
+      ));
+    },
+    { amount: t.amount ?? 0.2 }
+  );
+}
+export {
+  G as a,
+  P as b,
+  N as c,
+  A as d,
+  k as e,
+  _ as i,
+  c as m,
+  T as p,
+  Q as r,
+  b as s,
+  V as u
+};

package/dist/ui/AnimatedBeam.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface AnimatedBeamProps {
+    containerRef: HTMLElement | undefined;
+    fromRef: HTMLElement | undefined;
+    toRef: HTMLElement | undefined;
+    /** Px the curve bows away from a straight line. @default 0 (straight) */
+    curvature?: number;
+    /** Travel from `toRef` to `fromRef` instead of the default direction. */
+    reverse?: boolean;
+    /** Seconds for one travel of the gradient segment. @default 3 */
+    duration?: number;
+    class?: string;
+}
+/**
+ * Renders an animated SVG "beam" connecting two elements: a faint static
+ * base stroke under a traveling gradient segment that loops from `fromRef`
+ * to `toRef` (or the reverse, with `reverse`). Absolutely positioned over
+ * `containerRef`, whose bounds establish the coordinate space both
+ * endpoints are measured against. Static (no travel) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * let container: HTMLDivElement | undefined
+ * let fromEl: HTMLDivElement | undefined
+ * let toEl: HTMLDivElement | undefined
+ *
+ * <div ref={container} class="relative flex items-center justify-between p-8">
+ *   <div ref={fromEl} class="size-10 rounded-full bg-card" />
+ *   <div ref={toEl} class="size-10 rounded-full bg-card" />
+ *   <AnimatedBeam containerRef={container} fromRef={fromEl} toRef={toEl} curvature={40} />
+ * </div>
+ * ```
+ */
+export declare function AnimatedBeam(props: AnimatedBeamProps): JSX.Element;

package/dist/ui/BentoGrid.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+export interface BentoGridProps {
+    children: JSX.Element;
+    class?: string;
+}
+export interface BentoCardProps {
+    children: JSX.Element;
+    /** Number of grid columns to span at `sm`+ (2) and `lg`+ (3). Defaults to 1. */
+    colSpan?: 1 | 2 | 3;
+    /** Number of grid rows to span. Defaults to 1. */
+    rowSpan?: 1 | 2;
+    class?: string;
+}
+/**
+ * Responsive CSS grid for bento-style layouts — 1 column on mobile, 2 at
+ * `sm`, 3 at `lg`. Compose with {@link BentoCard} tiles, using `colSpan`/
+ * `rowSpan` on each tile to create the varied-size bento look.
+ *
+ * @example
+ * ```tsx
+ * <BentoGrid>
+ *   <BentoCard colSpan={2} rowSpan={2}>
+ *     <h3 class="text-lg font-semibold">Overview</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Uptime</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Latency</h3>
+ *   </BentoCard>
+ *   <BentoCard colSpan={3}>
+ *     <h3 class="text-lg font-semibold">Recent activity</h3>
+ *   </BentoCard>
+ * </BentoGrid>
+ * ```
+ */
+export declare function BentoGrid(props: BentoGridProps): JSX.Element;
+/** Glass tile for a {@link BentoGrid}, spanning columns/rows via `colSpan`/`rowSpan`. */
+export declare function BentoCard(props: BentoCardProps): JSX.Element;

package/dist/ui/BorderBeam.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface BorderBeamProps {
+    /** Length of the traveling gradient segment, in px. @default 60 */
+    size?: number;
+    /** Full trip duration around the border, in seconds. @default 6 */
+    duration?: number;
+    /** Animation start offset, in seconds. @default 0 */
+    delay?: number;
+    class?: string;
+}
+/**
+ * Decorative light segment that travels continuously around the border of
+ * its parent. The parent must be `position: relative` (or similar) — this
+ * renders an absolutely-positioned, `pointer-events-none` layer (`inset-0`,
+ * `rounded-[inherit]`) tracking the parent's own box. Purely cosmetic
+ * (`aria-hidden`); under reduced motion the moving beam is replaced with a
+ * static edge glow instead of animating.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-6">
+ *   <BorderBeam />
+ *   <p>Card content</p>
+ * </div>
+ * ```
+ */
+export declare function BorderBeam(props: BorderBeamProps): JSX.Element;

package/dist/ui/Dock.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+export interface DockItem {
+    icon: JSX.Element;
+    label?: string;
+    onClick?: (e: MouseEvent) => void;
+    href?: string;
+}
+export interface DockProps {
+    items: DockItem[];
+    class?: string;
+}
+/**
+ * macOS-style dock: a glass pill of icon buttons that magnify based on
+ * horizontal distance to the cursor. Scale-only transform (`transform-origin:
+ * bottom`), reset to 1× on pointerleave. Respects `prefers-reduced-motion`
+ * (renders static, still fully clickable/keyboard-focusable).
+ *
+ * @example
+ * ```tsx
+ * import { Home, Search, Settings } from 'lucide-solid'
+ *
+ * <Dock
+ *   items={[
+ *     { icon: <Home size={22} />, label: 'Home', onClick: () => {} },
+ *     { icon: <Search size={22} />, label: 'Search', onClick: () => {} },
+ *     { icon: <Settings size={22} />, label: 'Settings', href: '/settings' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Dock(props: DockProps): JSX.Element;

package/dist/ui/Meteors.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface MeteorsProps {
+    /** Number of meteor streaks to render. @default 20 */
+    count?: number;
+    class?: string;
+}
+/**
+ * Decorative full-cover meteor shower: thin diagonal streaks that fall
+ * down-left and fade, looping with staggered delays and varied start
+ * positions/durations. Purely visual — absolute, `pointer-events-none`,
+ * `aria-hidden` — so it layers behind/inside a `relative overflow-hidden`
+ * container without affecting layout or a11y. Under {@link motionReduced} it
+ * swaps the falling streaks for a handful of static, faint dots.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-8">
+ *   <Meteors count={20} />
+ *   <p class="relative">Content sits above the meteors.</p>
+ * </div>
+ * ```
+ */
+export declare function Meteors(props: MeteorsProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/charts/GaugeChart.tsx

@@ -0,0 +1,175 @@
+// GaugeChart — a native SVG radial gauge (no charting library). A single
+// 270° arc (from -135° to +135°, leaving a 90° gap at the bottom) is drawn
+// twice: a static background track and a value arc revealed proportionally
+// to `value` within `[min, max]` via the classic stroke-dasharray/
+// stroke-dashoffset trick (dash length == full path length, offset shifts
+// how much of it is "on" from the arc's start). The value arc's color comes
+// from `tone`, or from the highest `threshold` the value has reached. The
+// sweep animates on mount and on value change (CSS transition on
+// stroke-dashoffset), jumping instantly under `motionReduced()`.
+import { createEffect, createSignal, on, onMount, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+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
+}
+
+// Explicit tone -> CSS custom property name.
+const TONE_TOKENS: Record<GaugeThreshold['tone'], string> = {
+  primary: '--primary',
+  accent: '--accent',
+  destructive: '--destructive',
+  muted: '--muted',
+}
+
+const DEG_TO_RAD = Math.PI / 180
+const START_ANGLE = -135
+const END_ANGLE = 135
+const SWEEP_ANGLE = END_ANGLE - START_ANGLE // 270°
+
+/** Cartesian point on a circle of radius `r` centered at `(cx, cy)`, `angleDeg` measured clockwise from 12 o'clock. */
+function pointOnArc(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {
+  const rad = angleDeg * DEG_TO_RAD
+  return { x: cx + r * Math.sin(rad), y: cy - r * Math.cos(rad) }
+}
+
+/** SVG path `d` for the fixed 270° arc (shared by the track and the value arc). */
+function gaugeArcPath(cx: number, cy: number, r: number): string {
+  const start = pointOnArc(cx, cy, r, START_ANGLE)
+  const end = pointOnArc(cx, cy, r, END_ANGLE)
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 1 1 ${end.x} ${end.y}`
+}
+
+/** Highest threshold whose `value` the gauge has reached, falling back to `tone` when none match. */
+function resolveTone(value: number, tone: 'primary' | 'accent', thresholds?: GaugeThreshold[]): string {
+  if (!thresholds || thresholds.length === 0) return TONE_TOKENS[tone]
+  let resolved = TONE_TOKENS[tone]
+  for (const threshold of [...thresholds].sort((a, b) => a.value - b.value)) {
+    if (value >= threshold.value) resolved = TONE_TOKENS[threshold.tone]
+  }
+  return resolved
+}
+
+/**
+ * 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 function GaugeChart(props: GaugeChartProps): JSX.Element {
+  const size = () => props.size ?? 160
+  const min = () => props.min ?? 0
+  const max = () => props.max ?? 100
+  const tone = () => props.tone ?? 'primary'
+  const thickness = () => size() / 8
+  const center = () => size() / 2
+  const radius = () => Math.max(size() / 2 - thickness() / 2, 0)
+  const totalLength = () => radius() * (SWEEP_ANGLE * DEG_TO_RAD)
+  const arcPath = () => gaugeArcPath(center(), center(), radius())
+
+  const clampedValue = () => Math.min(Math.max(props.value, min()), max())
+  const fraction = () => {
+    const range = max() - min()
+    return range > 0 ? (clampedValue() - min()) / range : 0
+  }
+  const strokeToken = () => resolveTone(clampedValue(), tone(), props.thresholds)
+
+  // Drives the visible sweep; starts at 0 so the mount animation reveals the
+  // arc from empty, then tracks `fraction()` (deferred, so mount handles the
+  // initial reveal and this only reacts to later value changes).
+  const [displayedFraction, setDisplayedFraction] = createSignal(0)
+
+  onMount(() => {
+    if (motionReduced()) {
+      setDisplayedFraction(fraction())
+      return
+    }
+    requestAnimationFrame(() => setDisplayedFraction(fraction()))
+  })
+
+  createEffect(on(fraction, (f) => setDisplayedFraction(f), { defer: true }))
+
+  const dashOffset = () => totalLength() * (1 - displayedFraction())
+  const transition = () => (motionReduced() ? 'none' : 'stroke-dashoffset 700ms ease-out')
+
+  const displayValue = () => Math.round(clampedValue())
+  const ariaLabel = () => `${displayValue()}${props.unit ?? ''}`
+
+  return (
+    <div
+      class={cn('relative inline-flex items-center justify-center', props.class)}
+      style={{ width: `${size()}px`, height: `${size()}px` }}
+      role="meter"
+      aria-valuenow={clampedValue()}
+      aria-valuemin={min()}
+      aria-valuemax={max()}
+      aria-label={ariaLabel()}
+    >
+      <svg width={size()} height={size()} viewBox={`0 0 ${size()} ${size()}`} role="img" aria-hidden="true">
+        <path
+          d={arcPath()}
+          fill="none"
+          stroke="hsl(var(--muted))"
+          stroke-width={thickness()}
+          stroke-linecap="round"
+        />
+        <path
+          d={arcPath()}
+          fill="none"
+          stroke={`hsl(var(${strokeToken()}))`}
+          stroke-width={thickness()}
+          stroke-linecap="round"
+          stroke-dasharray={`${totalLength()} ${totalLength()}`}
+          stroke-dashoffset={dashOffset()}
+          style={{ transition: transition() }}
+        />
+      </svg>
+      <div class="absolute inset-0 flex flex-col items-center justify-center gap-0.5 px-4 text-center">
+        <span class="text-2xl font-semibold tabular-nums text-foreground">
+          {displayValue()}
+          <Show when={props.unit}>
+            <span class="text-base font-medium">{props.unit}</span>
+          </Show>
+        </span>
+        <Show when={props.label}>
+          <span class="text-xs text-muted-foreground">{props.label}</span>
+        </Show>
+      </div>
+    </div>
+  )
+}