@a4ui/core 0.18.0 → 0.19.0

package/dist/ui/Button.d.ts

@@ -13,6 +13,16 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
      * costs nothing when off.
      */
     ripple?: boolean;
+    /**
+     * When set, the button renders as an `<a href>` (a link) instead of a
+     * `<button>`, keeping the variant look, focus ring, and ripple. Use for
+     * navigation / router links and `tel:`/`mailto:` CTAs.
+     */
+    href?: string;
+    /** Anchor `target` — only used when `href` is set. */
+    target?: string;
+    /** Anchor `rel` — only used when `href` is set. */
+    rel?: string;
 }
 /**
  * Base button primitive: a plain `<button>` with A4ui's variants, focus ring,

package/package.json

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

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.18.0'
+export const A4UI_VERSION = '0.19.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/Button.tsx

@@ -1,5 +1,5 @@
 import type { JSX, ParentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
 import { spawnRipple } from './Ripple'
@@ -31,6 +31,16 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
    * costs nothing when off.
    */
   ripple?: boolean
+  /**
+   * When set, the button renders as an `<a href>` (a link) instead of a
+   * `<button>`, keeping the variant look, focus ring, and ripple. Use for
+   * navigation / router links and `tel:`/`mailto:` CTAs.
+   */
+  href?: string
+  /** Anchor `target` — only used when `href` is set. */
+  target?: string
+  /** Anchor `rel` — only used when `href` is set. */
+  rel?: string
 }
 
 /**
@@ -44,28 +54,52 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
  * ```
  */
 export function Button(props: ButtonProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['variant', 'class', 'type', 'children', 'ripple', 'onPointerDown'])
+  const [local, rest] = splitProps(props, [
+    'variant',
+    'class',
+    'type',
+    'children',
+    'ripple',
+    'onPointerDown',
+    'href',
+    'target',
+    'rel',
+  ])
+
+  const classes = (): string =>
+    cn(
+      BUTTON_BASE,
+      VARIANT_CLASSES[local.variant ?? 'primary'],
+      local.ripple && 'relative overflow-hidden',
+      local.class,
+    )
 
-  const handlePointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {
+  const handlePointerDown = (event: PointerEvent & { currentTarget: HTMLElement }): void => {
     if (local.ripple) spawnRipple(event.currentTarget, event, { opacity: 0.35 })
     const user = local.onPointerDown
-    if (typeof user === 'function') user(event)
-    else if (user) user[0](user[1], event)
+    if (typeof user === 'function') user(event as never)
+    else if (user) user[0](user[1], event as never)
   }
 
   return (
-    <button
-      type={local.type ?? 'button'}
-      class={cn(
-        BUTTON_BASE,
-        VARIANT_CLASSES[local.variant ?? 'primary'],
-        local.ripple && 'relative overflow-hidden',
-        local.class,
-      )}
-      onPointerDown={handlePointerDown}
-      {...rest}
+    <Show
+      when={local.href !== undefined}
+      fallback={
+        <button type={local.type ?? 'button'} class={classes()} onPointerDown={handlePointerDown} {...rest}>
+          {local.children}
+        </button>
+      }
     >
-      {local.children}
-    </button>
+      <a
+        href={local.href}
+        target={local.target}
+        rel={local.rel}
+        class={classes()}
+        onPointerDown={handlePointerDown}
+        {...(rest as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {local.children}
+      </a>
+    </Show>
   )
 }

package/src/ui/Carousel.tsx

@@ -146,18 +146,24 @@ export function Carousel(props: CarouselProps): JSX.Element {
         </button>
       </div>
 
-      <div class="flex items-center justify-center gap-2">
+      <div class="flex items-center justify-center gap-1">
         <For each={props.slides}>
           {(_, i) => (
+            // 24×24 hit target (a11y target-size) around a small visual dot.
             <button
               type="button"
               aria-label={`Go to slide ${i() + 1}`}
+              aria-current={index() === i() ? 'true' : undefined}
               onClick={() => go(i())}
-              class={cn(
-                'h-2 w-2 rounded-full transition-colors',
-                index() === i() ? 'bg-primary' : 'bg-muted',
-              )}
-            />
+              class="grid h-6 w-6 place-items-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <span
+                class={cn(
+                  'h-2 w-2 rounded-full transition-colors',
+                  index() === i() ? 'bg-primary' : 'bg-muted',
+                )}
+              />
+            </button>
           )}
         </For>
       </div>

package/dist/Checkbox-BZjX1GMG.js

@@ -1,407 +0,0 @@
-import { spread as y, mergeProps as b, insert as f, createComponent as p, template as g, effect as h, className as v, use as $, delegateEvents as k, setAttribute as C } from "solid-js/web";
-import { splitProps as x, Show as P, createSignal as _, createEffect as K, untrack as F, onCleanup as E, onMount as S, For as T } from "solid-js";
-import { c as m } from "./cn-B6yFEsav.js";
-import { animate as L, inView as Q } from "motion";
-import { Star as B } from "lucide-solid";
-var q = /* @__PURE__ */ g('<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">'), J = /* @__PURE__ */ g("<span>");
-const W = {
-  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"
-}, Z = "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 $e(t) {
-  const [e, r] = x(t, ["tone", "class", "children", "pulse"]);
-  return (() => {
-    var n = J();
-    return y(n, b({
-      get class() {
-        return m(Z, W[e.tone ?? "neutral"], e.class);
-      }
-    }, r), !1, !0), f(n, p(P, {
-      get when() {
-        return e.pulse;
-      },
-      get children() {
-        return q();
-      }
-    }), null), f(n, () => e.children, null), n;
-  })();
-}
-const I = "a4ui-effects";
-function Y() {
-  try {
-    return window.localStorage;
-  } catch {
-    return null;
-  }
-}
-function ee() {
-  var e;
-  try {
-    if (new URLSearchParams(window.location.search).get("calm") === "1") return !1;
-  } catch {
-  }
-  const t = (e = Y()) == null ? void 0 : e.getItem(I);
-  return t === null ? !0 : t === "1";
-}
-function N(t) {
-  typeof document > "u" || document.documentElement.classList.toggle("calm", !t);
-}
-const U = ee();
-N(U);
-const [z, te] = _(U);
-function _e() {
-  return z;
-}
-function ne() {
-  return !z();
-}
-function Ee(t) {
-  var e;
-  (e = Y()) == null || e.setItem(I, t ? "1" : "0"), N(t), te(t);
-}
-const re = "(prefers-reduced-motion: reduce)";
-function oe() {
-  return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(re).matches;
-}
-const X = "a4ui-motion-forced";
-function j() {
-  try {
-    return window.localStorage;
-  } catch {
-    return null;
-  }
-}
-var D;
-const [R, ae] = _(((D = j()) == null ? void 0 : D.getItem(X)) === "1");
-typeof document < "u" && document.documentElement.classList.toggle("force-motion", F(R));
-function Ce() {
-  return R;
-}
-function ke(t) {
-  var e;
-  (e = j()) == null || e.setItem(X, t ? "1" : "0"), typeof document < "u" && document.documentElement.classList.toggle("force-motion", t), ae(t);
-}
-function w() {
-  return ne() || oe() && !R();
-}
-function Se(t, e = 600) {
-  const [r, n] = _(0);
-  let o;
-  return K(() => {
-    const a = t();
-    if (o == null || o.stop(), w()) {
-      n(a);
-      return;
-    }
-    const l = F(r);
-    l !== a && (o = L(l, a, {
-      duration: e / 1e3,
-      ease: "easeOut",
-      onUpdate: (u) => n(u)
-    }));
-  }), E(() => o == null ? void 0 : o.stop()), r;
-}
-function Le(t, e = {}) {
-  w() || L(
-    t,
-    { opacity: [0, 1], y: [e.y ?? 8, 0] },
-    { duration: e.duration ?? 0.32, delay: e.delay ?? 0, ease: "easeOut" }
-  );
-}
-function Re(t, e = {}) {
-  if (w()) return () => {
-  };
-  t.style.opacity = "0";
-  let r = !1;
-  return Q(
-    t,
-    () => {
-      r || (r = !0, L(
-        t,
-        { opacity: [0, 1], y: [e.y ?? 16, 0] },
-        { duration: e.duration ?? 0.5, ease: "easeOut" }
-      ));
-    },
-    { amount: e.amount ?? 0.2 }
-  );
-}
-var ie = /* @__PURE__ */ g("<span>");
-function G(t, e, r = {}) {
-  if (w()) return;
-  const n = t.getBoundingClientRect(), o = e.clientX - n.left, a = e.clientY - n.top, l = 2 * Math.max(Math.hypot(o, a), Math.hypot(n.width - o, a), Math.hypot(o, n.height - a), Math.hypot(n.width - o, n.height - a)), u = document.createElement("span");
-  u.setAttribute("aria-hidden", "true"), Object.assign(u.style, {
-    position: "absolute",
-    left: `${o}px`,
-    top: `${a}px`,
-    width: `${l}px`,
-    height: `${l}px`,
-    borderRadius: "9999px",
-    background: r.color ?? "currentColor",
-    pointerEvents: "none",
-    transform: "translate(-50%,-50%) scale(0)"
-  }), t.appendChild(u);
-  const s = u.animate([{
-    transform: "translate(-50%,-50%) scale(0)",
-    opacity: String(r.opacity ?? 0.3)
-  }, {
-    transform: "translate(-50%,-50%) scale(1)",
-    opacity: "0"
-  }], {
-    duration: 600,
-    easing: "ease-out"
-  }), i = () => u.remove();
-  s.finished.then(i).catch(i);
-}
-function Me(t) {
-  let e;
-  const r = (n) => {
-    e && G(e, n, {
-      color: t.color,
-      opacity: t.opacity
-    });
-  };
-  return (() => {
-    var n = ie();
-    n.$$pointerdown = r;
-    var o = e;
-    return typeof o == "function" ? $(o, n) : e = n, f(n, () => t.children), h(() => v(n, m("relative inline-block overflow-hidden", t.class))), n;
-  })();
-}
-k(["pointerdown"]);
-var le = /* @__PURE__ */ g("<button>");
-const se = {
-  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"
-}, ce = "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 Ae(t) {
-  const [e, r] = x(t, ["variant", "class", "type", "children", "ripple", "onPointerDown"]), n = (o) => {
-    e.ripple && G(o.currentTarget, o, {
-      opacity: 0.35
-    });
-    const a = e.onPointerDown;
-    typeof a == "function" ? a(o) : a && a[0](a[1], o);
-  };
-  return (() => {
-    var o = le();
-    return o.$$pointerdown = n, y(o, b({
-      get type() {
-        return e.type ?? "button";
-      },
-      get class() {
-        return m(ce, se[e.variant ?? "primary"], e.ripple && "relative overflow-hidden", e.class);
-      }
-    }, r), !1, !0), f(o, () => e.children), o;
-  })();
-}
-k(["pointerdown"]);
-var ue = /* @__PURE__ */ g("<div>");
-function V(t, e = {}) {
-  if (w()) return () => {
-  };
-  const r = document.createElement("span");
-  r.setAttribute("aria-hidden", "true"), r.className = "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300", t.appendChild(r);
-  const n = e.size ?? 180, o = e.color ?? "hsl(var(--primary))", a = (i, c) => {
-    r.style.background = `radial-gradient(${n}px circle at ${i}px ${c}px, color-mix(in srgb, ${o} 30%, transparent), transparent 70%)`;
-  }, l = (i) => {
-    const c = t.getBoundingClientRect();
-    a(i.clientX - c.left, i.clientY - c.top);
-  }, u = () => {
-    r.style.opacity = "1";
-  }, s = () => {
-    r.style.opacity = "0";
-  };
-  return t.addEventListener("pointermove", l), t.addEventListener("pointerenter", u), t.addEventListener("pointerleave", s), () => {
-    t.removeEventListener("pointermove", l), t.removeEventListener("pointerenter", u), t.removeEventListener("pointerleave", s), r.remove();
-  };
-}
-function Oe(t) {
-  let e;
-  return S(() => {
-    const r = V(e, {
-      color: t.color,
-      size: t.size
-    });
-    E(r);
-  }), (() => {
-    var r = ue(), n = e;
-    return typeof n == "function" ? $(n, r) : e = r, f(r, () => t.children), h(() => v(r, m("relative overflow-hidden", t.class))), r;
-  })();
-}
-var de = /* @__PURE__ */ g("<div style=perspective:800px><div style=transform-style:preserve-3d>");
-function H(t, e, r = {}) {
-  if (w()) return () => {
-  };
-  e.style.willChange = "transform";
-  const n = (a) => {
-    const l = t.getBoundingClientRect(), u = (a.clientX - l.left) / l.width - 0.5, s = (a.clientY - l.top) / l.height - 0.5, i = r.max ?? 10;
-    e.style.transition = "transform 0.15s ease-out", e.style.transform = `perspective(800px) rotateX(${(s * -2 * i).toFixed(2)}deg) rotateY(${(u * 2 * i).toFixed(2)}deg) scale(1.02)`;
-  }, o = () => {
-    e.style.transition = "transform 0.4s ease", e.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
-  };
-  return t.addEventListener("pointermove", n), t.addEventListener("pointerleave", o), () => {
-    t.removeEventListener("pointermove", n), t.removeEventListener("pointerleave", o), e.style.transform = "", e.style.transition = "", e.style.willChange = "";
-  };
-}
-function Te(t) {
-  let e, r;
-  return S(() => {
-    const n = H(e, r, {
-      max: t.max
-    });
-    E(n);
-  }), (() => {
-    var n = de(), o = n.firstChild, a = e;
-    typeof a == "function" ? $(a, n) : e = n;
-    var l = r;
-    return typeof l == "function" ? $(l, o) : r = o, f(o, () => t.children), h(() => v(n, m("inline-block", t.class))), n;
-  })();
-}
-var M = /* @__PURE__ */ g("<div>"), fe = /* @__PURE__ */ g("<h2>");
-function Be(t) {
-  const [e, r] = x(t, ["class", "children", "glass", "glow", "tilt", "spotlight"]), n = () => (e.glow ?? e.glass) === !0;
-  let o;
-  return S(() => {
-    const a = [e.tilt && o ? H(o, o) : null, e.spotlight && o ? V(o) : null].filter((l) => l !== null);
-    E(() => a.forEach((l) => l()));
-  }), (() => {
-    var a = M(), l = o;
-    return typeof l == "function" ? $(l, a) : o = a, y(a, b({
-      get class() {
-        return m(e.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", n() && "glow-edge", e.spotlight && "relative overflow-hidden", e.tilt && "will-change-transform", e.class);
-      }
-    }, r), !1, !0), f(a, () => e.children), a;
-  })();
-}
-function De(t) {
-  const [e, r] = x(t, ["class", "children"]);
-  return (() => {
-    var n = M();
-    return y(n, b({
-      get class() {
-        return m("flex flex-col space-y-1.5 p-6", e.class);
-      }
-    }, r), !1, !0), f(n, () => e.children), n;
-  })();
-}
-function Pe(t) {
-  const [e, r] = x(t, ["class", "children"]);
-  return (() => {
-    var n = fe();
-    return y(n, b({
-      get class() {
-        return m("text-lg font-semibold leading-none tracking-tight", e.class);
-      }
-    }, r), !1, !0), f(n, () => e.children), n;
-  })();
-}
-function Fe(t) {
-  const [e, r] = x(t, ["class", "children"]);
-  return (() => {
-    var n = M();
-    return y(n, b({
-      get class() {
-        return m("p-6 pt-0", e.class);
-      }
-    }, r), !1, !0), f(n, () => e.children), n;
-  })();
-}
-var me = /* @__PURE__ */ g("<div role=radiogroup>"), ge = /* @__PURE__ */ g("<div role=img>"), he = /* @__PURE__ */ g('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
-function Ie(t) {
-  const [e, r] = _(0), n = () => t.max ?? 5, o = () => Array.from({
-    length: n()
-  }, (s, i) => i + 1), a = () => e() > 0 ? e() : t.value, l = (s) => {
-    var i;
-    t.readonly || (i = t.onChange) == null || i.call(t, s);
-  }, u = (s) => m("h-5 w-5 transition-colors", s <= a() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
-  return p(P, {
-    get when() {
-      return !t.readonly;
-    },
-    get fallback() {
-      return (() => {
-        var s = ge();
-        return f(s, p(T, {
-          get each() {
-            return o();
-          },
-          children: (i) => p(B, {
-            get class() {
-              return u(i);
-            },
-            "aria-hidden": "true"
-          })
-        })), h((i) => {
-          var c = m("inline-flex items-center gap-1", t.class), d = `Rating ${t.value} of ${n()}`;
-          return c !== i.e && v(s, i.e = c), d !== i.t && C(s, "aria-label", i.t = d), i;
-        }, {
-          e: void 0,
-          t: void 0
-        }), s;
-      })();
-    },
-    get children() {
-      var s = me();
-      return s.addEventListener("mouseleave", () => r(0)), f(s, p(T, {
-        get each() {
-          return o();
-        },
-        children: (i) => (() => {
-          var c = he();
-          return c.$$keydown = (d) => {
-            d.key === "ArrowRight" || d.key === "ArrowUp" ? (d.preventDefault(), l(Math.min(t.value + 1, n()))) : (d.key === "ArrowLeft" || d.key === "ArrowDown") && (d.preventDefault(), l(Math.max(t.value - 1, 0)));
-          }, c.$$click = () => l(i), c.addEventListener("blur", () => r(0)), c.addEventListener("focus", () => r(i)), c.addEventListener("mouseenter", () => r(i)), f(c, p(B, {
-            get class() {
-              return u(i);
-            },
-            "aria-hidden": "true"
-          })), h((d) => {
-            var A = t.value === i, O = `Rate ${i} of ${n()}`;
-            return A !== d.e && C(c, "aria-checked", d.e = A), O !== d.t && C(c, "aria-label", d.t = O), d;
-          }, {
-            e: void 0,
-            t: void 0
-          }), c;
-        })()
-      })), h(() => v(s, m("inline-flex items-center gap-1", t.class))), s;
-    }
-  });
-}
-k(["click", "keydown"]);
-var pe = /* @__PURE__ */ g('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
-function Ye(t) {
-  return (() => {
-    var e = pe(), r = e.firstChild;
-    return r.addEventListener("change", (n) => t.onChange(n.currentTarget.checked)), f(e, () => t.label, null), h(() => v(e, m("inline-flex items-center gap-2 text-sm text-foreground", t.class))), h(() => r.checked = t.checked), e;
-  })();
-}
-export {
-  $e as B,
-  Be as C,
-  Ie as R,
-  Oe as S,
-  Te as T,
-  Ae as a,
-  Ye as b,
-  Se as c,
-  Fe as d,
-  Le as e,
-  De as f,
-  Pe as g,
-  Ee as h,
-  Me as i,
-  V as j,
-  H as k,
-  ne as l,
-  w as m,
-  ke as n,
-  Ce as o,
-  oe as p,
-  Re as r,
-  G as s,
-  _e as u
-};