@a4ui/core 0.14.1 → 0.16.0

package/src/ui/Ripple.tsx

@@ -1,15 +1,13 @@
-// Material-style click ripple: a wrapper that spawns an expanding, fading
-// circle from the pointer's down position on every `pointerdown` — Motion's
-// `animate` drives the scale/opacity tween since each ripple is a one-shot
-// spawn-then-discard element, not a persistent CSS transition. `x`/`y` are
-// animated to a constant -50% alongside `scale` so Motion (which owns the
-// element's `transform` once it's animating any transform sub-property)
-// composes `translate(-50%,-50%) scale(...)` itself rather than clobbering a
-// translate we'd otherwise have set by hand via inline style.
-import { createSignal, For, onCleanup, type JSX } from 'solid-js'
+// Material-style click ripple: an expanding, fading circle from the pointer's
+// down position on every `pointerdown`. The tween is driven by the native Web
+// Animations API (el.animate) — each ripple is a one-shot spawn-then-discard
+// element, so there's nothing for a JS animation engine to add. Being
+// engine-free is deliberate: it lets <Button ripple> bake this in without
+// pulling the `motion` package into every Button consumer's bundle.
+import { type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
-import { animate, motionReduced } from '../lib/motion'
+import { motionReduced } from '../lib/motion'
 
 export interface RippleProps {
   children: JSX.Element
@@ -20,14 +18,58 @@ export interface RippleProps {
   class?: string
 }
 
-interface RippleInstance {
-  id: number
-  x: number
-  y: number
-  size: number
-}
+/**
+ * Spawns one Material-style ripple inside `container` at the pointer's
+ * position, expanding to cover the container and fading out, then removes
+ * itself. The container must be `position: relative; overflow: hidden`.
+ * Engine-free (Web Animations API); no-op under reduced motion. This is the
+ * primitive behind {@link Ripple} and `<Button ripple>`.
+ */
+export function spawnRipple(
+  container: HTMLElement,
+  event: PointerEvent,
+  opts: { color?: string; opacity?: number } = {},
+): void {
+  if (motionReduced()) return
+  const rect = container.getBoundingClientRect()
+  const x = event.clientX - rect.left
+  const y = event.clientY - rect.top
+  // Diameter = 2× the distance to the farthest corner, so the circle always
+  // covers the whole container from wherever the press landed.
+  const size =
+    2 *
+    Math.max(
+      Math.hypot(x, y),
+      Math.hypot(rect.width - x, y),
+      Math.hypot(x, rect.height - y),
+      Math.hypot(rect.width - x, rect.height - y),
+    )
 
-let nextRippleId = 0
+  const el = document.createElement('span')
+  el.setAttribute('aria-hidden', 'true')
+  Object.assign(el.style, {
+    position: 'absolute',
+    left: `${x}px`,
+    top: `${y}px`,
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: '9999px',
+    background: opts.color ?? 'currentColor',
+    pointerEvents: 'none',
+    transform: 'translate(-50%,-50%) scale(0)',
+  })
+  container.appendChild(el)
+
+  const animation = el.animate(
+    [
+      { transform: 'translate(-50%,-50%) scale(0)', opacity: String(opts.opacity ?? 0.3) },
+      { transform: 'translate(-50%,-50%) scale(1)', opacity: '0' },
+    ],
+    { duration: 600, easing: 'ease-out' },
+  )
+  const done = (): void => el.remove()
+  animation.finished.then(done).catch(done)
+}
 
 /**
  * Wraps `children` in a `position: relative; overflow: hidden` layer that
@@ -37,59 +79,23 @@ let nextRippleId = 0
  * itself once its animation finishes. A no-op under reduced motion: children
  * still render, but no ripple ever spawns.
  *
+ * Buttons don't need the wrapper — use `<Button ripple>` instead.
+ *
  * @example
  * ```tsx
  * <Ripple color="white" opacity={0.25}>
- *   <button class="rounded-lg bg-primary px-4 py-2 text-primary-foreground">Save</button>
+ *   <div class="rounded-lg bg-primary px-4 py-2 text-primary-foreground">Save</div>
  * </Ripple>
  * ```
  */
 export function Ripple(props: RippleProps): JSX.Element {
-  const [ripples, setRipples] = createSignal<RippleInstance[]>([])
-  const active = new Set<ReturnType<typeof animate>>()
-
   let containerEl: HTMLSpanElement | undefined
 
-  const remove = (id: number): void => {
-    setRipples((current) => current.filter((ripple) => ripple.id !== id))
-  }
-
-  const spawnAnimation = (el: HTMLSpanElement, id: number, opacity: number): void => {
-    const controls = animate(
-      el,
-      { x: ['-50%', '-50%'], y: ['-50%', '-50%'], scale: [0, 1], opacity: [opacity, 0] },
-      { duration: 0.6, ease: 'easeOut' },
-    )
-    active.add(controls)
-    controls.finished
-      .then(() => {
-        active.delete(controls)
-        remove(id)
-      })
-      .catch(() => {})
-  }
-
   const handlePointerDown = (event: PointerEvent): void => {
-    if (motionReduced() || !containerEl) return
-
-    const rect = containerEl.getBoundingClientRect()
-    const x = event.clientX - rect.left
-    const y = event.clientY - rect.top
-    const maxDist = Math.max(
-      Math.hypot(x, y),
-      Math.hypot(rect.width - x, y),
-      Math.hypot(x, rect.height - y),
-      Math.hypot(rect.width - x, rect.height - y),
-    )
-
-    setRipples((current) => [...current, { id: nextRippleId++, x, y, size: maxDist * 2 }])
+    if (!containerEl) return
+    spawnRipple(containerEl, event, { color: props.color, opacity: props.opacity })
   }
 
-  onCleanup(() => {
-    active.forEach((controls) => controls.stop())
-    active.clear()
-  })
-
   return (
     <span
       ref={containerEl}
@@ -97,23 +103,6 @@ export function Ripple(props: RippleProps): JSX.Element {
       onPointerDown={handlePointerDown}
     >
       {props.children}
-      <span aria-hidden="true" class="pointer-events-none absolute inset-0">
-        <For each={ripples()}>
-          {(ripple) => (
-            <span
-              ref={(el) => spawnAnimation(el, ripple.id, props.opacity ?? 0.3)}
-              class="absolute rounded-full"
-              style={{
-                left: `${ripple.x}px`,
-                top: `${ripple.y}px`,
-                width: `${ripple.size}px`,
-                height: `${ripple.size}px`,
-                background: props.color ?? 'currentColor',
-              }}
-            />
-          )}
-        </For>
-      </span>
     </span>
   )
 }

package/src/ui/ScrollProgress.tsx

@@ -0,0 +1,61 @@
+// ScrollProgress — a thin bar pinned to the top of the viewport that fills
+// left-to-right as the page scrolls, a common reading-progress indicator.
+// Driven by Motion's `scroll` progress callback (0..1). Renders a static,
+// unfilled bar under reduced motion (no scroll subscription).
+import { onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced, scroll } from '../lib/motion'
+
+export interface ScrollProgressProps {
+  /** Bar height in px. @default 3 */
+  height?: number
+  /** Bar color (CSS color). @default 'hsl(var(--primary))' */
+  color?: string
+  class?: string
+}
+
+/**
+ * Renders a fixed bar at the top of the viewport whose fill tracks how far
+ * the page has been scrolled. Subscribes to Motion's `scroll` on mount and
+ * scales the inner bar horizontally; respects `prefers-reduced-motion`
+ * (renders a static, empty bar instead).
+ *
+ * @example
+ * ```tsx
+ * <ScrollProgress height={4} color="hsl(var(--accent))" />
+ * ```
+ */
+export function ScrollProgress(props: ScrollProgressProps): JSX.Element {
+  let bar!: HTMLDivElement
+
+  onMount(() => {
+    bar.style.transform = 'scaleX(0)'
+
+    if (motionReduced()) return
+
+    const stop = scroll((progress: number) => {
+      bar.style.transform = `scaleX(${progress})`
+    })
+
+    onCleanup(() => stop())
+  })
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn('fixed top-0 left-0 z-[9999] w-full', props.class)}
+      style={{ height: `${props.height ?? 3}px` }}
+    >
+      <div
+        ref={bar}
+        class="origin-left will-change-transform"
+        style={{
+          height: '100%',
+          width: '100%',
+          'background-color': props.color ?? 'hsl(var(--primary))',
+        }}
+      />
+    </div>
+  )
+}

package/src/ui/Spotlight.tsx

@@ -0,0 +1,94 @@
+// Spotlight — a soft radial glow that follows the cursor inside the wrapped
+// element, like a light hovering over the surface. This is a plain CSS
+// follow (the overlay's `background` is written directly on pointermove)
+// rather than a Motion tween: a radial-gradient position update has no
+// transform to spring, so there's nothing for an animation engine to add.
+// Engine-free, which lets <Card spotlight> bake it in for free. Only the
+// fade in/out on enter/leave uses a CSS `transition: opacity`. No-op (no
+// glow, children still render) under reduced motion.
+import { onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface SpotlightProps {
+  children: JSX.Element
+  /** Glow color (CSS color). @default 'hsl(var(--primary))' */
+  color?: string
+  /** Glow radius in px. @default 180 */
+  size?: number
+  class?: string
+}
+
+/**
+ * Appends a cursor-following radial-glow overlay inside `el` (which must be
+ * `position: relative; overflow: hidden`) and binds the pointer handlers.
+ * Returns a cleanup that unbinds and removes the overlay. Engine-free; no-op
+ * under reduced motion. This is the primitive behind {@link Spotlight} and
+ * `<Card spotlight>`.
+ */
+export function attachSpotlight(el: HTMLElement, opts: { color?: string; size?: number } = {}): () => void {
+  if (motionReduced()) return () => {}
+
+  const overlay = document.createElement('span')
+  overlay.setAttribute('aria-hidden', 'true')
+  overlay.className = 'pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300'
+  el.appendChild(overlay)
+
+  const size = opts.size ?? 180
+  const color = opts.color ?? 'hsl(var(--primary))'
+
+  const paint = (x: number, y: number): void => {
+    overlay.style.background = `radial-gradient(${size}px circle at ${x}px ${y}px, color-mix(in srgb, ${color} 30%, transparent), transparent 70%)`
+  }
+  const handlePointerMove = (event: PointerEvent): void => {
+    const rect = el.getBoundingClientRect()
+    paint(event.clientX - rect.left, event.clientY - rect.top)
+  }
+  const handlePointerEnter = (): void => {
+    overlay.style.opacity = '1'
+  }
+  const handlePointerLeave = (): void => {
+    overlay.style.opacity = '0'
+  }
+
+  el.addEventListener('pointermove', handlePointerMove)
+  el.addEventListener('pointerenter', handlePointerEnter)
+  el.addEventListener('pointerleave', handlePointerLeave)
+  return () => {
+    el.removeEventListener('pointermove', handlePointerMove)
+    el.removeEventListener('pointerenter', handlePointerEnter)
+    el.removeEventListener('pointerleave', handlePointerLeave)
+    overlay.remove()
+  }
+}
+
+/**
+ * Wraps `children` in a `position: relative; overflow: hidden` layer with a
+ * radial glow that tracks the cursor, fading in on pointerenter and out on
+ * pointerleave. Children render below the (pointer-transparent) glow.
+ * Respects `prefers-reduced-motion` (renders children with no glow at all).
+ *
+ * A4ui's own `Card` can do this without the wrapper — `<Card spotlight>`.
+ *
+ * @example
+ * ```tsx
+ * <Spotlight color="hsl(var(--primary))" size={220}>
+ *   <div class="rounded-2xl border border-border p-8">Hover for glow</div>
+ * </Spotlight>
+ * ```
+ */
+export function Spotlight(props: SpotlightProps): JSX.Element {
+  let root!: HTMLDivElement
+
+  onMount(() => {
+    const cleanup = attachSpotlight(root, { color: props.color, size: props.size })
+    onCleanup(cleanup)
+  })
+
+  return (
+    <div ref={root} class={cn('relative overflow-hidden', props.class)}>
+      {props.children}
+    </div>
+  )
+}

package/src/ui/TiltCard.tsx

@@ -0,0 +1,89 @@
+// TiltCard — tilts its wrapped content in 3D toward the cursor on hover, like
+// a card catching the light. The tilt is a direct transform smoothed by a CSS
+// transition (engine-free — no `motion` dependency), which keeps it cheap
+// enough for <Card tilt> to bake in without growing every Card consumer's
+// bundle. No-op (static) under reduced motion.
+import { onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface TiltCardProps {
+  children: JSX.Element
+  /** Max tilt in degrees. @default 10 */
+  max?: number
+  class?: string
+}
+
+/**
+ * Binds a cursor-following 3D tilt: pointer moves over `listenEl` rotate
+ * `animEl` toward the cursor (clamped to `max` degrees) with a slight lift,
+ * easing back flat on pointerleave. Returns a cleanup that unbinds and clears
+ * the transform. Engine-free (CSS transitions); no-op under reduced motion.
+ * This is the primitive behind {@link TiltCard} and `<Card tilt>` — pass the
+ * same element twice to tilt the element the pointer is over.
+ */
+export function attachTilt(
+  listenEl: HTMLElement,
+  animEl: HTMLElement,
+  opts: { max?: number } = {},
+): () => void {
+  if (motionReduced()) return () => {}
+  animEl.style.willChange = 'transform'
+
+  const move = (event: PointerEvent): void => {
+    const rect = listenEl.getBoundingClientRect()
+    const nx = (event.clientX - rect.left) / rect.width - 0.5
+    const ny = (event.clientY - rect.top) / rect.height - 0.5
+    const max = opts.max ?? 10
+    animEl.style.transition = 'transform 0.15s ease-out'
+    animEl.style.transform = `perspective(800px) rotateX(${(ny * -2 * max).toFixed(2)}deg) rotateY(${(nx * 2 * max).toFixed(2)}deg) scale(1.02)`
+  }
+  const leave = (): void => {
+    animEl.style.transition = 'transform 0.4s ease'
+    animEl.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)'
+  }
+
+  listenEl.addEventListener('pointermove', move)
+  listenEl.addEventListener('pointerleave', leave)
+  return () => {
+    listenEl.removeEventListener('pointermove', move)
+    listenEl.removeEventListener('pointerleave', leave)
+    animEl.style.transform = ''
+    animEl.style.transition = ''
+    animEl.style.willChange = ''
+  }
+}
+
+/**
+ * Wraps `children` in a card that tilts in 3D toward the cursor: as the
+ * pointer moves within its bounds, the card rotates on both axes (clamped to
+ * `max` degrees) and lifts slightly, easing back flat on pointerleave.
+ * Respects `prefers-reduced-motion` (renders static).
+ *
+ * A4ui's own `Card` can do this without the wrapper — `<Card tilt>`.
+ *
+ * @example
+ * ```tsx
+ * <TiltCard max={12}>
+ *   <div class="rounded-2xl border border-border bg-card p-6">Card content</div>
+ * </TiltCard>
+ * ```
+ */
+export function TiltCard(props: TiltCardProps): JSX.Element {
+  let root!: HTMLDivElement
+  let inner!: HTMLDivElement
+
+  onMount(() => {
+    const cleanup = attachTilt(root, inner, { max: props.max })
+    onCleanup(cleanup)
+  })
+
+  return (
+    <div ref={root} class={cn('inline-block', props.class)} style={{ perspective: '800px' }}>
+      <div ref={inner} style={{ 'transform-style': 'preserve-3d' }}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/dist/Checkbox-DQcDOBLd.js

@@ -1,168 +0,0 @@
-import { spread as g, mergeProps as m, insert as i, template as d, createComponent as v, effect as h, setAttribute as x, className as y, delegateEvents as E } from "solid-js/web";
-import { splitProps as f, createSignal as S, Show as L, For as p } from "solid-js";
-import { c } from "./cn-B6yFEsav.js";
-import { Star as C } from "lucide-solid";
-var B = /* @__PURE__ */ d("<span>");
-const R = {
-  neutral: "bg-muted text-muted-foreground ring-border",
-  success: "bg-emerald-500/15 text-emerald-600 ring-emerald-500/30",
-  warning: "bg-amber-500/15 text-amber-600 ring-amber-500/30",
-  danger: "bg-rose-500/15 text-rose-600 ring-rose-500/30",
-  info: "bg-sky-500/15 text-sky-600 ring-sky-500/30"
-}, T = "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 q(r) {
-  const [e, n] = f(r, ["tone", "class", "children"]);
-  return (() => {
-    var t = B();
-    return g(t, m({
-      get class() {
-        return c(T, R[e.tone ?? "neutral"], e.class);
-      }
-    }, n), !1, !0), i(t, () => e.children), t;
-  })();
-}
-var D = /* @__PURE__ */ d("<button>");
-const N = {
-  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"
-}, G = "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 z(r) {
-  const [e, n] = f(r, ["variant", "class", "type", "children"]);
-  return (() => {
-    var t = D();
-    return g(t, m({
-      get type() {
-        return e.type ?? "button";
-      },
-      get class() {
-        return c(G, N[e.variant ?? "primary"], e.class);
-      }
-    }, n), !1, !0), i(t, () => e.children), t;
-  })();
-}
-var $ = /* @__PURE__ */ d("<div>"), H = /* @__PURE__ */ d("<h2>");
-function J(r) {
-  const [e, n] = f(r, ["class", "children", "glass", "glow"]), t = () => (e.glow ?? e.glass) === !0;
-  return (() => {
-    var u = $();
-    return g(u, m({
-      get class() {
-        return c(e.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", t() && "glow-edge", e.class);
-      }
-    }, n), !1, !0), i(u, () => e.children), u;
-  })();
-}
-function K(r) {
-  const [e, n] = f(r, ["class", "children"]);
-  return (() => {
-    var t = $();
-    return g(t, m({
-      get class() {
-        return c("flex flex-col space-y-1.5 p-6", e.class);
-      }
-    }, n), !1, !0), i(t, () => e.children), t;
-  })();
-}
-function Q(r) {
-  const [e, n] = f(r, ["class", "children"]);
-  return (() => {
-    var t = H();
-    return g(t, m({
-      get class() {
-        return c("text-lg font-semibold leading-none tracking-tight", e.class);
-      }
-    }, n), !1, !0), i(t, () => e.children), t;
-  })();
-}
-function W(r) {
-  const [e, n] = f(r, ["class", "children"]);
-  return (() => {
-    var t = $();
-    return g(t, m({
-      get class() {
-        return c("p-6 pt-0", e.class);
-      }
-    }, n), !1, !0), i(t, () => e.children), t;
-  })();
-}
-var M = /* @__PURE__ */ d("<div role=radiogroup>"), O = /* @__PURE__ */ d("<div role=img>"), P = /* @__PURE__ */ d('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
-function X(r) {
-  const [e, n] = S(0), t = () => r.max ?? 5, u = () => Array.from({
-    length: t()
-  }, (s, a) => a + 1), A = () => e() > 0 ? e() : r.value, b = (s) => {
-    var a;
-    r.readonly || (a = r.onChange) == null || a.call(r, s);
-  }, k = (s) => c("h-5 w-5 transition-colors", s <= A() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
-  return v(L, {
-    get when() {
-      return !r.readonly;
-    },
-    get fallback() {
-      return (() => {
-        var s = O();
-        return i(s, v(p, {
-          get each() {
-            return u();
-          },
-          children: (a) => v(C, {
-            get class() {
-              return k(a);
-            },
-            "aria-hidden": "true"
-          })
-        })), h((a) => {
-          var o = c("inline-flex items-center gap-1", r.class), l = `Rating ${r.value} of ${t()}`;
-          return o !== a.e && y(s, a.e = o), l !== a.t && x(s, "aria-label", a.t = l), a;
-        }, {
-          e: void 0,
-          t: void 0
-        }), s;
-      })();
-    },
-    get children() {
-      var s = M();
-      return s.addEventListener("mouseleave", () => n(0)), i(s, v(p, {
-        get each() {
-          return u();
-        },
-        children: (a) => (() => {
-          var o = P();
-          return o.$$keydown = (l) => {
-            l.key === "ArrowRight" || l.key === "ArrowUp" ? (l.preventDefault(), b(Math.min(r.value + 1, t()))) : (l.key === "ArrowLeft" || l.key === "ArrowDown") && (l.preventDefault(), b(Math.max(r.value - 1, 0)));
-          }, o.$$click = () => b(a), o.addEventListener("blur", () => n(0)), o.addEventListener("focus", () => n(a)), o.addEventListener("mouseenter", () => n(a)), i(o, v(C, {
-            get class() {
-              return k(a);
-            },
-            "aria-hidden": "true"
-          })), h((l) => {
-            var w = r.value === a, _ = `Rate ${a} of ${t()}`;
-            return w !== l.e && x(o, "aria-checked", l.e = w), _ !== l.t && x(o, "aria-label", l.t = _), l;
-          }, {
-            e: void 0,
-            t: void 0
-          }), o;
-        })()
-      })), h(() => y(s, c("inline-flex items-center gap-1", r.class))), s;
-    }
-  });
-}
-E(["click", "keydown"]);
-var U = /* @__PURE__ */ d('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
-function Y(r) {
-  return (() => {
-    var e = U(), n = e.firstChild;
-    return n.addEventListener("change", (t) => r.onChange(t.currentTarget.checked)), i(e, () => r.label, null), h(() => y(e, c("inline-flex items-center gap-2 text-sm text-foreground", r.class))), h(() => n.checked = r.checked), e;
-  })();
-}
-export {
-  q as B,
-  J as C,
-  X as R,
-  z as a,
-  Y as b,
-  W as c,
-  K as d,
-  Q as e
-};