@a4ui/core 0.14.1 → 0.16.0

package/README.md

@@ -1,6 +1,6 @@
 # A4ui
 
-[![A4ui](https://a4ui.pages.dev/og.png)](https://a4ui.pages.dev/)
+[![A4ui — glass cards, charts, ring progress and gradient title on the starfield backdrop](https://a4ui.pages.dev/hero.png)](https://a4ui.pages.dev/)
 
 [![npm](https://img.shields.io/npm/v/@a4ui/core.svg)](https://www.npmjs.com/package/@a4ui/core)
 [![license](https://img.shields.io/npm/l/@a4ui/core.svg)](./LICENSE)
@@ -118,17 +118,17 @@ import { Button, Card } from '@a4ui/core' // just these two
 Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
 `@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
 
-| Part                                                  | gzip                     | Notes                                                                                                                                                                                                                                                                                                                                                                                                 |
-| ----------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **First component** (e.g. `Button` + the `cn` helper) | ~10–11 kB                | One-time baseline (includes `tailwind-merge`). Shared by every component.                                                                                                                                                                                                                                                                                                                             |
-| **Typical extra primitive**                           | ~0.1–0.5 kB              | `Button` alone 10.7 kB → `Button + Card + Badge + Input` 11.1 kB. Heavier ones (`DataGrid`, `Calendar`, `Combobox`, `Tour`) cost more via their Kobalte/behavior deps.                                                                                                                                                                                                                                |
-| **Whole barrel** (`@a4ui/core`, all 75+ used)         | ~53.0 kB                 | Only if you literally import everything — the realistic ceiling.                                                                                                                                                                                                                                                                                                                                      |
-| `@a4ui/core/commerce`                                 | ~3.0 kB                  | ProductCard, CartSummary, PriceTag…                                                                                                                                                                                                                                                                                                                                                                   |
-| `@a4ui/core/charts`                                   | ~2.5 kB                  | Sparkline, BarChart, DonutChart (native SVG).                                                                                                                                                                                                                                                                                                                                                         |
-| `@a4ui/core/styles.css`                               | ~5.3 kB                  | Tokens + motion keyframes (needs the Tailwind preset for utilities).                                                                                                                                                                                                                                                                                                                                  |
-| `@a4ui/core/full.css`                                 | ~14.1 kB                 | Every utility precompiled — for **no-Tailwind** apps. With Tailwind, your own purge ships far less.                                                                                                                                                                                                                                                                                                   |
-| `@a4ui/core/elements` (Web Components)                | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla.                                                                                                                                                                                                                                                                                                                                   |
-| `motion` (the animation engine)                       | ~45 kB                   | **External / opt-in** — pulled in **only** if you import an animated component (`Stat`, `HoldToConfirm`, `Curtain`, `Parallax`, `ScrambleText`, `FillText`, `TextReveal`, `NotificationStack`, `MultiStateBadge`, `Expandable`, `Ripple`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). CSS-only ones (`LoadingDots`, `NowPlaying`, `Typewriter`) and static UIs never load it. |
+| Part                                                  | gzip                     | Notes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **First component** (e.g. `Button` + the `cn` helper) | ~10–11 kB                | One-time baseline (includes `tailwind-merge`). Shared by every component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| **Typical extra primitive**                           | ~0.1–0.5 kB              | `Button` alone 10.7 kB → `Button + Card + Badge + Input` 11.1 kB. Heavier ones (`DataGrid`, `Calendar`, `Combobox`, `Tour`) cost more via their Kobalte/behavior deps.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **Whole barrel** (`@a4ui/core`, all 75+ used)         | ~53.0 kB                 | Only if you literally import everything — the realistic ceiling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `@a4ui/core/commerce`                                 | ~3.0 kB                  | ProductCard, CartSummary, PriceTag…                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `@a4ui/core/charts`                                   | ~2.5 kB                  | Sparkline, BarChart, DonutChart (native SVG).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `@a4ui/core/styles.css`                               | ~5.3 kB                  | Tokens + motion keyframes (needs the Tailwind preset for utilities).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `@a4ui/core/full.css`                                 | ~14.1 kB                 | Every utility precompiled — for **no-Tailwind** apps. With Tailwind, your own purge ships far less.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `@a4ui/core/elements` (Web Components)                | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `motion` (the animation engine)                       | ~45 kB                   | **External / opt-in** — pulled in **only** if you import an animated component (`Stat`, `HoldToConfirm`, `Curtain`, `Parallax`, `ScrambleText`, `FillText`, `TextReveal`, `NotificationStack`, `MultiStateBadge`, `Expandable`, `Magnetic`, `ScrollProgress`, `GradientText`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). Engine-free ones (`LoadingDots`, `NowPlaying`, `Typewriter`, `Spotlight`, `Ripple`, `TiltCard` — CSS/WAAPI) and static UIs never load it; that's also why `<Button ripple>` and `<Card tilt spotlight>` cost nothing. |
 
 **Performance note (Lighthouse / Cloudflare):** because `motion` is external and
 everything is tree-shaken, a page that uses only static components ships ~10–15 kB
@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
 **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
 full list):
 
-| Category       | Representative components                                                                                                                                                                                |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`                                                                                                              |
-| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                       |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap`                                                                                                           |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                   |
-| Feedback       | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                        |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`                                                                                                                  |
-| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`                                                                                                    |
-| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                         |
-| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `Ripple`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
+| Category       | Representative components                                                                                                                                                                                                                                                       |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`                                                                                                                                                                                     |
+| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                              |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap`                                                                                                                                                                                  |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                          |
+| Feedback       | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                               |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`                                                                                                                                                                                         |
+| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`                                                                                                                                                                           |
+| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                |
+| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
 
 Domain-specific sets ship as **subpath entries** so the base package stays lean —
 e.g. commerce and chart components import from their own paths:

package/dist/Checkbox-B5Gb3h5J.js

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

package/dist/commerce.js

@@ -1,7 +1,7 @@
 import { insert as n, createComponent as c, memo as A, effect as v, className as b, template as o, delegateEvents as y, setAttribute as x } from "solid-js/web";
 import { Show as g, For as C } from "solid-js";
 import { c as h } from "./cn-B6yFEsav.js";
-import { B as T, C as N, R as E, a as S, b as I } from "./Checkbox-DQcDOBLd.js";
+import { B as T, C as N, R as E, a as S, b as I } from "./Checkbox-B5Gb3h5J.js";
 import { Minus as R, Plus as F, Trash2 as U } from "lucide-solid";
 var j = /* @__PURE__ */ o('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ o("<div><span>");
 const B = {

package/dist/elements.css

@@ -2379,6 +2379,9 @@ html.calm .tile-glass {
 .p-6 {
   padding: 1.5rem;
 }
+.p-8 {
+  padding: 2rem;
+}
 .px-0\.5 {
   padding-left: 0.125rem;
   padding-right: 0.125rem;
@@ -2692,6 +2695,9 @@ html.calm .tile-glass {
 .accent-primary {
   accent-color: hsl(var(--primary) / 1);
 }
+.opacity-0 {
+  opacity: 0;
+}
 .opacity-25 {
   opacity: 0.25;
 }