@a4ui/core 0.15.0 → 0.16.0

package/src/ui/TiltCard.tsx

@@ -1,12 +1,12 @@
 // TiltCard — tilts its wrapped content in 3D toward the cursor on hover, like
-// a card catching the light. The outer element sets the CSS perspective; the
-// inner element (which actually rotates) gets `transform-style: preserve-3d`
-// so nested content keeps its own depth. Motion's `animate` drives the
-// rotate/scale as a spring. No-op (static) under reduced motion.
+// 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 { animate, motionReduced } from '../lib/motion'
+import { motionReduced } from '../lib/motion'
 
 export interface TiltCardProps {
   children: JSX.Element
@@ -15,12 +15,54 @@ export interface TiltCardProps {
   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, springing back flat on pointerleave.
+ * `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}>
@@ -33,46 +75,13 @@ export function TiltCard(props: TiltCardProps): JSX.Element {
   let inner!: HTMLDivElement
 
   onMount(() => {
-    if (motionReduced()) return
-
-    let controls: ReturnType<typeof animate> | undefined
-
-    const handlePointerMove = (event: PointerEvent): void => {
-      const rect = root.getBoundingClientRect()
-      const nx = (event.clientX - rect.left) / rect.width - 0.5
-      const ny = (event.clientY - rect.top) / rect.height - 0.5
-      const max = props.max ?? 10
-
-      controls?.stop()
-      controls = animate(
-        inner,
-        { rotateX: ny * -2 * max, rotateY: nx * 2 * max, scale: 1.02 },
-        { type: 'spring', stiffness: 300, damping: 20 },
-      )
-    }
-
-    const handlePointerLeave = (): void => {
-      controls?.stop()
-      controls = animate(
-        inner,
-        { rotateX: 0, rotateY: 0, scale: 1 },
-        { type: 'spring', stiffness: 300, damping: 20 },
-      )
-    }
-
-    root.addEventListener('pointermove', handlePointerMove)
-    root.addEventListener('pointerleave', handlePointerLeave)
-
-    onCleanup(() => {
-      root.removeEventListener('pointermove', handlePointerMove)
-      root.removeEventListener('pointerleave', handlePointerLeave)
-      controls?.stop()
-    })
+    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} class="will-change-transform" style={{ 'transform-style': 'preserve-3d' }}>
+      <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
-};