@a4ui/core 0.22.0 → 0.23.0

package/README.md

@@ -190,11 +190,11 @@ full list):
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 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`                                                                                                                                                                                  |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `CalendarHeatmap`                                                                                                                                       |
 | Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                          |
-| Feedback       | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                               |
+| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                            |
 | Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`                                                                                                                                                                                         |
-| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`                                                                                                                                                                           |
+| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                           |
 | 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` |
 
@@ -254,15 +254,23 @@ ships **in the package**, so it works from `node_modules` without visiting the d
 - **Typed API + examples** — every export has JSDoc with an `@example` in the
   shipped `.d.ts` (`node_modules/@a4ui/core/dist/index.d.ts`), so editor
   autocomplete and agents get the props and usage inline.
-- **`llms.txt`** — a machine-readable summary of every component:
-  https://a4ui.pages.dev/llms.txt
+- **`llms.txt`** — a machine-readable summary of every component **plus the
+  "Spatial Glass" recipe**: https://a4ui.pages.dev/llms.txt
+- **[Spatial Glass guide](./SPATIAL-GLASS.md)** — how to get the A4ui _look_
+  (Aurora backdrop, glass surfaces, the cursor light, tasteful motion, Expandable),
+  not just wire up components. Read this before building a page.
 
 Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
 
-> This project uses **@a4ui/core** (SolidJS design system). Import components as
-> named exports from `@a4ui/core`; import `@a4ui/core/styles.css` once in the app
-> entry; add `@a4ui/core/preset` to `tailwind.config` (optional). Props are typed
-> with JSDoc/`@example` in the package's `.d.ts`. Full component list:
+> This project uses **@a4ui/core** (SolidJS "Spatial Glass" design system). Import
+> components as named exports from `@a4ui/core`; import `@a4ui/core/styles.css`
+> once in the app entry; add `@a4ui/core/preset` to `tailwind.config` (optional).
+> Props are typed with JSDoc/`@example` in the package's `.d.ts`.
+> **For the A4ui look, follow the Spatial Glass recipe** (in `llms.txt` and
+> https://a4ui.pages.dev/#/guide-spatial-glass): put an `<Aurora/>` backdrop
+> behind a transparent root, use `<Card glass>` surfaces (glass reads only over a
+> colored backdrop), keep `pointerGlow` on for the cursor light, add restrained
+> motion, and use `Expandable` for galleries. Full component list + recipe:
 > https://a4ui.pages.dev/llms.txt
 
 ## Develop

package/dist/NumberInput-enx_0iVh.js

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

package/dist/commerce/ConditionScale.d.ts

@@ -0,0 +1,45 @@
+import { JSX } from 'solid-js';
+export interface ConditionTier {
+    /** Minimum score (inclusive) at which this tier applies. */
+    min: number;
+    label: string;
+}
+export interface ConditionScaleProps {
+    /** Current score. */
+    value: number;
+    /** Top of the scale. Defaults to 10. */
+    max?: number;
+    /** Bottom of the scale. Defaults to 1. */
+    min?: number;
+    /** Tier labels, highest `min` first or any order — component sorts. Defaults to a sensible New→Poor scale. */
+    tiers?: ConditionTier[];
+    /** Show numeric value (e.g. "8.5 / 10"). Defaults to true. */
+    showValue?: boolean;
+    class?: string;
+}
+/**
+ * Horizontal grading meter (e.g. a pre-owned item's 1–10 condition score)
+ * with a marker at the current value, the resolved tier label, and endpoint
+ * labels under the track.
+ *
+ * @example
+ * ```tsx
+ * <ConditionScale value={8} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ConditionScale
+ *   value={62}
+ *   min={0}
+ *   max={100}
+ *   tiers={[
+ *     { min: 90, label: 'Like New' },
+ *     { min: 70, label: 'Lightly Used' },
+ *     { min: 40, label: 'Worn' },
+ *     { min: 0, label: 'Heavily Worn' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ConditionScale(props: ConditionScaleProps): JSX.Element;

package/dist/commerce/FacetSidebar.d.ts

@@ -0,0 +1,55 @@
+import { JSX } from 'solid-js';
+import { FacetOption } from './FilterGroup';
+export interface FacetSection {
+    key: string;
+    title: string;
+    options: FacetOption[];
+    /** Collapsible section. Defaults to true. */
+    collapsible?: boolean;
+    /** Open by default. Defaults to true. */
+    defaultOpen?: boolean;
+}
+export interface FacetPrice {
+    min: number;
+    max: number;
+    value: [number, number];
+}
+export interface FacetSidebarProps {
+    sections: FacetSection[];
+    /** Selected values per section key. */
+    selected: Record<string, string[]>;
+    onChange: (key: string, values: string[]) => void;
+    /** Optional price range facet. */
+    price?: FacetPrice;
+    onPriceChange?: (range: [number, number]) => void;
+    /** Result count shown in the header. */
+    resultCount?: number;
+    onClearAll?: () => void;
+    class?: string;
+}
+/**
+ * Full faceted-filter sidebar panel: composes {@link FilterGroup} checkbox
+ * sections (each optionally collapsible) with a min/max price range, a row of
+ * removable active-filter chips, a result count, and a clear-all action.
+ * Fully controlled — the caller owns `selected` and `price` state.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = createSignal<Record<string, string[]>>({ type: ['mug'] })
+ * const [price, setPrice] = createSignal<[number, number]>([0, 100])
+ * <FacetSidebar
+ *   class="w-64"
+ *   sections={[
+ *     { key: 'type', title: 'Type', options: [{ value: 'mug', label: 'Mug', count: 4 }, { value: 'plate', label: 'Plate', count: 2 }] },
+ *     { key: 'color', title: 'Color', options: [{ value: 'blue', label: 'Blue', count: 3 }, { value: 'green', label: 'Green', count: 1 }] },
+ *   ]}
+ *   selected={selected()}
+ *   onChange={(key, values) => setSelected({ ...selected(), [key]: values })}
+ *   price={{ min: 0, max: 100, value: price() }}
+ *   onPriceChange={setPrice}
+ *   resultCount={6}
+ *   onClearAll={() => { setSelected({}); setPrice([0, 100]) }}
+ * />
+ * ```
+ */
+export declare function FacetSidebar(props: FacetSidebarProps): JSX.Element;

package/dist/commerce/PriceBlock.d.ts

@@ -0,0 +1,50 @@
+import { JSX } from 'solid-js';
+/** Text size of a {@link PriceBlock}'s main amount. Defaults to `'lg'`. */
+export type PriceBlockSize = 'md' | 'lg';
+export interface PriceBlockCoupon {
+    code: string;
+    /** Flat amount off (currency units). If omitted, no reduction is computed. */
+    amount?: number;
+    /** Optional label override. */
+    label?: string;
+}
+export interface PriceBlockFinancing {
+    /** Number of monthly installments. */
+    months: number;
+    /** Annual APR as a decimal, e.g. 0.1 for 10%. Omit/0 = interest-free split. */
+    apr?: number;
+}
+export interface PriceBlockProps {
+    amount: number;
+    /** Original price; struck through and used for the savings badge when > amount. */
+    compareAt?: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Coupon; renders a chip and the after-coupon price. */
+    coupon?: PriceBlockCoupon;
+    /** Financing estimate; renders "As low as $X/mo". */
+    financing?: PriceBlockFinancing;
+    /** Extra note under the price (e.g. a wire-transfer discount line). */
+    note?: JSX.Element;
+    /** Text size of the main price. Defaults to `'lg'`. */
+    size?: PriceBlockSize;
+    class?: string;
+}
+/**
+ * Full price display: main amount, optional struck-through compare-at price
+ * with a savings badge, a coupon chip with the after-coupon price, and an
+ * optional financing estimate ("As low as $X/mo").
+ *
+ * @example
+ * ```tsx
+ * <PriceBlock
+ *   amount={249}
+ *   compareAt={329}
+ *   coupon={{ code: 'SAVE50', amount: 50 }}
+ *   financing={{ months: 12, apr: 0.1 }}
+ * />
+ * ```
+ */
+export declare function PriceBlock(props: PriceBlockProps): JSX.Element;