@a4ui/core 0.8.1 → 0.10.0

package/README.md

@@ -111,18 +111,28 @@ mode switch — a theme recolors underneath either mode.
 
 ## Components
 
-75+ components across six categories (this is a sample — see the
+90+ components across eight categories (this is a sample — see the
 **[docs site](https://a4uikit.github.io/a4ui/)** 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`        |
+| 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)                                      |
+
+Domain-specific sets ship as **subpath entries** so the base package stays lean —
+e.g. commerce and chart components import from their own paths:
+
+```tsx
+import { ProductCard, CartSummary } from '@a4ui/core/commerce'
+import { DonutChart, Sparkline } from '@a4ui/core/charts'
+```
 
 ## Why A4ui
 

package/dist/Checkbox-DQcDOBLd.js

@@ -0,0 +1,168 @@
+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
+};

package/dist/charts/BarChart.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface BarDatum {
+    label: string;
+    value: number;
+}
+export interface BarChartProps {
+    data: BarDatum[];
+    /** Height of the plot area in px. Default 160. */
+    height?: number;
+    /** Fill color token. Default 'primary'. */
+    tone?: 'primary' | 'accent';
+    class?: string;
+}
+/**
+ * Vertical bar chart rendered with flexbox: each bar's height is `value /
+ * max` of the plot area, filled with a theme token, with its label truncated
+ * beneath it and its raw value available via a native tooltip.
+ *
+ * @example
+ * ```tsx
+ * <BarChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 30 }]} tone="accent" />
+ * ```
+ */
+export declare function BarChart(props: BarChartProps): JSX.Element;

package/dist/charts/DonutChart.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export type DonutTone = 'primary' | 'accent' | 'destructive' | 'emit' | 'received' | 'net';
+export interface DonutSegment {
+    label: string;
+    value: number;
+    tone?: DonutTone;
+}
+export interface DonutChartProps {
+    data: DonutSegment[];
+    /** Overall SVG width/height in px. Default 160. */
+    size?: number;
+    /** Ring stroke width in px. Default 20. */
+    thickness?: number;
+    /** Show the summed total in the center. Default true. */
+    showTotal?: boolean;
+    class?: string;
+}
+/**
+ * SVG donut chart: one arc per segment, sized by `value / total` of the
+ * circle's circumference, starting at 12 o'clock and running clockwise.
+ * Segment colors come from each datum's `tone`, or cycle through the
+ * `--data-*` series tokens by index when omitted.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     { label: 'Sent', value: 62, tone: 'emit' },
+ *     { label: 'Received', value: 38, tone: 'received' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function DonutChart(props: DonutChartProps): JSX.Element;

package/dist/charts/Sparkline.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface SparklineProps {
+    data: number[];
+    /** SVG viewBox width in px. Default 120. */
+    width?: number;
+    /** SVG viewBox height in px. Default 32. */
+    height?: number;
+    /** Stroke color token. Default 'primary'. */
+    tone?: 'primary' | 'accent' | 'destructive';
+    /** Fill the area under the line faintly. Default false. */
+    area?: boolean;
+    class?: string;
+}
+/**
+ * Minimal inline trend line: an SVG polyline scaled to fit `width`×`height`,
+ * stroked with a theme token so it recolors with the active palette. Pass
+ * `area` for a faint fill under the line.
+ *
+ * @example
+ * ```tsx
+ * <Sparkline data={[3, 5, 4, 8, 6, 9, 7]} tone="accent" area />
+ * ```
+ */
+export declare function Sparkline(props: SparklineProps): JSX.Element;

package/dist/charts/index.d.ts

@@ -0,0 +1,3 @@
+export { Sparkline, type SparklineProps } from './Sparkline';
+export { BarChart, type BarDatum, type BarChartProps } from './BarChart';
+export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart';

package/dist/charts.js

@@ -0,0 +1,194 @@
+import { insert as w, createComponent as k, effect as $, setAttribute as a, template as x, className as A, setStyleProperty as E } from "solid-js/web";
+import { Show as P, For as z } from "solid-js";
+import { c as N } from "./cn-B6yFEsav.js";
+var D = /* @__PURE__ */ x("<svg><path stroke=none></svg>", !1, !0, !1), K = /* @__PURE__ */ x("<svg><polyline fill=none stroke-width=2 stroke-linecap=round stroke-linejoin=round></svg>", !1, !0, !1), H = /* @__PURE__ */ x("<svg preserveAspectRatio=none role=img>"), I = /* @__PURE__ */ x("<svg><circle r=2></svg>", !1, !0, !1);
+const F = 2;
+function R(i, s, f) {
+  if (i.length === 0) return [];
+  if (i.length === 1)
+    return [{
+      x: s / 2,
+      y: f / 2
+    }];
+  const m = Math.min(...i), g = Math.max(...i) - m || 1, v = Math.max(f - F * 2, 0), o = s / (i.length - 1);
+  return i.map((r, e) => ({
+    x: e * o,
+    y: F + v - (r - m) / g * v
+  }));
+}
+function _(i) {
+  const s = () => i.width ?? 120, f = () => i.height ?? 32, m = () => i.tone ?? "primary", h = () => R(i.data, s(), f()), g = () => h().map((o) => `${o.x},${o.y}`).join(" "), v = () => {
+    const o = h();
+    if (o.length === 0) return "";
+    const r = o.map((l) => `${l.x},${l.y}`).join(" L "), e = o[0], n = o[o.length - 1];
+    return `M ${e.x},${f()} L ${r} L ${n.x},${f()} Z`;
+  };
+  return (() => {
+    var o = H();
+    return w(o, k(P, {
+      get when() {
+        return h().length > 0;
+      },
+      get children() {
+        return [k(P, {
+          get when() {
+            return i.area;
+          },
+          get children() {
+            var r = D();
+            return $((e) => {
+              var n = v(), l = `hsl(var(--${m()}) / 0.15)`;
+              return n !== e.e && a(r, "d", e.e = n), l !== e.t && a(r, "fill", e.t = l), e;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
+          }
+        }), k(P, {
+          get when() {
+            return h().length > 1;
+          },
+          get fallback() {
+            return (() => {
+              var r = I();
+              return $((e) => {
+                var t, c;
+                var n = (t = h()[0]) == null ? void 0 : t.x, l = (c = h()[0]) == null ? void 0 : c.y, u = `hsl(var(--${m()}))`;
+                return n !== e.e && a(r, "cx", e.e = n), l !== e.t && a(r, "cy", e.t = l), u !== e.a && a(r, "fill", e.a = u), e;
+              }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+              }), r;
+            })();
+          },
+          get children() {
+            var r = K();
+            return $((e) => {
+              var n = g(), l = `hsl(var(--${m()}))`;
+              return n !== e.e && a(r, "points", e.e = n), l !== e.t && a(r, "stroke", e.t = l), e;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
+          }
+        })];
+      }
+    })), $((r) => {
+      var e = N("overflow-visible", i.class), n = s(), l = f(), u = `0 0 ${s()} ${f()}`;
+      return e !== r.e && a(o, "class", r.e = e), n !== r.t && a(o, "width", r.t = n), l !== r.a && a(o, "height", r.a = l), u !== r.o && a(o, "viewBox", r.o = u), r;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), o;
+  })();
+}
+var X = /* @__PURE__ */ x("<div>"), Y = /* @__PURE__ */ x('<div class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1"><div></div><span class="w-full truncate text-center text-xs text-muted-foreground">');
+function p(i) {
+  const s = () => i.height ?? 160, f = () => i.tone ?? "primary", m = () => Math.max(...i.data.map((g) => g.value), 0) || 1, h = () => f() === "accent" ? "bg-accent" : "bg-primary";
+  return (() => {
+    var g = X();
+    return w(g, k(z, {
+      get each() {
+        return i.data;
+      },
+      children: (v) => (() => {
+        var o = Y(), r = o.firstChild, e = r.nextSibling;
+        return w(e, () => v.label), $((n) => {
+          var l = `${v.label}: ${v.value}`, u = N("w-full rounded-t transition-all", h()), t = `${Math.max(v.value / m() * 100, 0)}%`;
+          return l !== n.e && a(r, "title", n.e = l), u !== n.t && A(r, n.t = u), t !== n.a && E(r, "height", n.a = t), n;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), o;
+      })()
+    })), $((v) => {
+      var o = N("flex w-full items-end gap-2", i.class), r = `${s()}px`;
+      return o !== v.e && A(g, v.e = o), r !== v.t && E(g, "height", v.t = r), v;
+    }, {
+      e: void 0,
+      t: void 0
+    }), g;
+  })();
+}
+var Z = /* @__PURE__ */ x('<div class="absolute inset-0 flex items-center justify-center text-lg font-semibold tabular-nums text-foreground">'), q = /* @__PURE__ */ x("<div><svg role=img><g><circle fill=none stroke=hsl(var(--muted))>"), G = /* @__PURE__ */ x("<svg><circle fill=none stroke-linecap=butt><title></svg>", !1, !0, !1);
+const J = {
+  primary: "--primary",
+  accent: "--accent",
+  destructive: "--destructive",
+  emit: "--data-emit",
+  received: "--data-received",
+  net: "--data-net"
+}, O = ["--data-emit", "--data-received", "--data-net"];
+function Q(i, s) {
+  return i.tone ? J[i.tone] : O[s % O.length];
+}
+function tt(i) {
+  const s = () => i.size ?? 160, f = () => i.thickness ?? 20, m = () => i.showTotal ?? !0, h = () => s() / 2, g = () => Math.max(s() / 2 - f() / 2, 0), v = () => 2 * Math.PI * g(), o = () => i.data.reduce((e, n) => e + n.value, 0), r = () => {
+    const e = o() || 1;
+    let n = 0;
+    return i.data.map((l, u) => {
+      const c = l.value / e * v(), y = n;
+      return n += c, {
+        segment: l,
+        index: u,
+        arcLength: c,
+        offset: y
+      };
+    });
+  };
+  return (() => {
+    var e = q(), n = e.firstChild, l = n.firstChild, u = l.firstChild;
+    return w(l, k(z, {
+      get each() {
+        return r();
+      },
+      children: (t) => (() => {
+        var c = G(), y = c.firstChild;
+        return w(y, () => `${t.segment.label}: ${t.segment.value}`), $((d) => {
+          var b = h(), C = h(), M = g(), L = `hsl(var(${Q(t.segment, t.index)}))`, j = f(), S = `${t.arcLength} ${Math.max(v() - t.arcLength, 0)}`, T = -t.offset;
+          return b !== d.e && a(c, "cx", d.e = b), C !== d.t && a(c, "cy", d.t = C), M !== d.a && a(c, "r", d.a = M), L !== d.o && a(c, "stroke", d.o = L), j !== d.i && a(c, "stroke-width", d.i = j), S !== d.n && a(c, "stroke-dasharray", d.n = S), T !== d.s && a(c, "stroke-dashoffset", d.s = T), d;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0,
+          n: void 0,
+          s: void 0
+        }), c;
+      })()
+    }), null), w(e, k(P, {
+      get when() {
+        return m();
+      },
+      get children() {
+        var t = Z();
+        return w(t, o), t;
+      }
+    }), null), $((t) => {
+      var c = N("relative inline-flex items-center justify-center", i.class), y = `${s()}px`, d = `${s()}px`, b = s(), C = s(), M = `0 0 ${s()} ${s()}`, L = `rotate(-90 ${h()} ${h()})`, j = h(), S = h(), T = g(), B = f();
+      return c !== t.e && A(e, t.e = c), y !== t.t && E(e, "width", t.t = y), d !== t.a && E(e, "height", t.a = d), b !== t.o && a(n, "width", t.o = b), C !== t.i && a(n, "height", t.i = C), M !== t.n && a(n, "viewBox", t.n = M), L !== t.s && a(l, "transform", t.s = L), j !== t.h && a(u, "cx", t.h = j), S !== t.r && a(u, "cy", t.r = S), T !== t.d && a(u, "r", t.d = T), B !== t.l && a(u, "stroke-width", t.l = B), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0
+    }), e;
+  })();
+}
+export {
+  p as BarChart,
+  tt as DonutChart,
+  _ as Sparkline
+};

package/dist/cn-B6yFEsav.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function m(...r) {
+  return t(o(r));
+}
+export {
+  m as c
+};

package/dist/commerce/CartLine.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+export interface CartLineProps {
+    title: string;
+    /** Unit price. */
+    price: number;
+    quantity: number;
+    image?: string;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    onQuantityChange?: (quantity: number) => void;
+    onRemove?: () => void;
+    class?: string;
+}
+/**
+ * One line item in a shopping cart: thumbnail, title with unit price, a
+ * {@link QuantityStepper}, the line total, and an optional remove action.
+ *
+ * @example
+ * ```tsx
+ * <CartLine
+ *   title="Wireless Mouse"
+ *   price={29.99}
+ *   quantity={2}
+ *   image="/mouse.jpg"
+ *   onQuantityChange={setQty}
+ *   onRemove={() => removeLine(id)}
+ * />
+ * ```
+ */
+export declare function CartLine(props: CartLineProps): JSX.Element;

package/dist/commerce/CartSummary.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+export interface CartSummaryItem {
+    label: string;
+    amount: number;
+}
+export interface CartSummaryProps {
+    /** Itemized rows, e.g. Subtotal, Shipping, Tax. */
+    lines: CartSummaryItem[];
+    total: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Label for the checkout button. Defaults to `'Checkout'`. */
+    checkoutLabel?: string;
+    onCheckout?: () => void;
+    class?: string;
+}
+/**
+ * Order summary panel listing itemized amounts (subtotal, shipping, tax,
+ * ...), a bold total, and an optional full-width checkout button.
+ *
+ * @example
+ * ```tsx
+ * <CartSummary
+ *   lines={[{ label: 'Subtotal', amount: 59.98 }, { label: 'Shipping', amount: 4.99 }]}
+ *   total={64.97}
+ *   onCheckout={() => goToCheckout()}
+ * />
+ * ```
+ */
+export declare function CartSummary(props: CartSummaryProps): JSX.Element;

package/dist/commerce/FilterGroup.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface FacetOption {
+    value: string;
+    label: string;
+    count?: number;
+}
+export interface FilterGroupProps {
+    title: string;
+    options: FacetOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    class?: string;
+}
+/**
+ * Titled group of checkbox facet options (e.g. size, color, brand), each with
+ * an optional result count, for faceted search/filter sidebars.
+ *
+ * @example
+ * ```tsx
+ * <FilterGroup
+ *   title="Size"
+ *   options={[{ value: 'sm', label: 'Small', count: 12 }, { value: 'md', label: 'Medium', count: 8 }]}
+ *   selected={selected()}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export declare function FilterGroup(props: FilterGroupProps): JSX.Element;

package/dist/commerce/PriceTag.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+/** Text size of a {@link PriceTag}'s main amount. Defaults to `'md'`. */
+export type PriceTagSize = 'sm' | 'md' | 'lg';
+export interface PriceTagProps {
+    amount: number;
+    /** Original price; shown struck-through when greater than `amount`. */
+    compareAt?: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Text size of the main price. Defaults to `'md'`. */
+    size?: PriceTagSize;
+    class?: string;
+}
+/**
+ * Formatted price display with an optional struck-through compare-at price
+ * and a discount-percent badge when the item is on sale.
+ *
+ * @example
+ * ```tsx
+ * <PriceTag amount={29.99} compareAt={39.99} currency="USD" />
+ * ```
+ */
+export declare function PriceTag(props: PriceTagProps): JSX.Element;

package/dist/commerce/ProductCard.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface ProductCardProps {
+    title: string;
+    price: number;
+    compareAt?: number;
+    image: string;
+    /** Rating from 0-5; renders a readonly {@link Rating} when present. */
+    rating?: number;
+    /** Small overlay label shown over the image top-left, e.g. `'New'`. */
+    badge?: string;
+    currency?: string;
+    locale?: string;
+    onAddToCart?: () => void;
+    class?: string;
+}
+/**
+ * Card summarizing a single product: image, title, optional rating, price
+ * (with compare-at/discount), and an optional "Add to cart" button.
+ *
+ * @example
+ * ```tsx
+ * <ProductCard
+ *   title="Wireless Headphones"
+ *   price={79.99}
+ *   compareAt={99.99}
+ *   image="/headphones.jpg"
+ *   rating={4}
+ *   badge="New"
+ *   onAddToCart={() => addToCart(sku)}
+ * />
+ * ```
+ */
+export declare function ProductCard(props: ProductCardProps): JSX.Element;

package/dist/commerce/ProductGrid.d.ts

@@ -0,0 +1,16 @@
+import { JSX, ParentProps } from 'solid-js';
+export interface ProductGridProps extends ParentProps {
+    class?: string;
+}
+/**
+ * Responsive grid wrapper: 2 columns by default, 3 at `sm`, 4 at `lg`.
+ * Typically used to lay out a list of {@link ProductCard}s.
+ *
+ * @example
+ * ```tsx
+ * <ProductGrid>
+ *   <For each={products()}>{(p) => <ProductCard {...p} />}</For>
+ * </ProductGrid>
+ * ```
+ */
+export declare function ProductGrid(props: ProductGridProps): JSX.Element;