@a4ui/core 0.9.0 → 0.10.0

package/README.md

@@ -111,7 +111,7 @@ 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):
 
@@ -124,12 +124,14 @@ full list):
 | 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 components import from `@a4ui/core/commerce`:
+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.js

@@ -1,6 +1,7 @@
 import { insert as n, createComponent as u, memo as T, effect as f, className as b, template as s, delegateEvents as C, setAttribute as $ } from "solid-js/web";
 import { Show as v, For as w } from "solid-js";
-import { B as S, c as h, C as E, R as F, a as k, b as I } from "./Checkbox-CC3EGilW.js";
+import { c as h } from "./cn-B6yFEsav.js";
+import { B as S, C as E, R as F, a as k, b as I } from "./Checkbox-DQcDOBLd.js";
 import { Minus as N, Plus as R, Trash2 as U } from "lucide-solid";
 var j = /* @__PURE__ */ s('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ s("<div><span>");
 const M = {
@@ -60,7 +61,7 @@ function D(e) {
 }
 C(["click"]);
 var z = /* @__PURE__ */ s('<div class="relative aspect-square overflow-hidden rounded-lg bg-muted"><img loading=lazy class="h-full w-full object-cover">', !0, !1, !1), B = /* @__PURE__ */ s('<div class="mt-3 space-y-2"><p class="line-clamp-1 font-medium text-foreground">');
-function ee(e) {
+function te(e) {
   return u(E, {
     get class() {
       return h("overflow-hidden p-4", e.class);
@@ -135,14 +136,14 @@ function ee(e) {
   });
 }
 var G = /* @__PURE__ */ s("<div>");
-function te(e) {
+function ne(e) {
   return (() => {
     var r = G();
     return n(r, () => e.children), f(() => b(r, h("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), r;
   })();
 }
 var L = /* @__PURE__ */ s('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), Q = /* @__PURE__ */ s('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), O = /* @__PURE__ */ s('<div><div class="min-w-[8rem] flex-1"><p class="line-clamp-1 font-medium text-foreground"></p></div><span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">');
-function ne(e) {
+function le(e) {
   const r = () => e.price * e.quantity, a = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
     style: "currency",
     currency: e.currency ?? "USD"
@@ -201,7 +202,7 @@ function ne(e) {
 }
 C(["click"]);
 var X = /* @__PURE__ */ s('<div><div class="my-3 border-t border-border"></div><div class="flex items-center justify-between text-base font-bold text-foreground"><span>Total</span><span class=tabular-nums>'), Z = /* @__PURE__ */ s('<div class="flex items-center justify-between py-1 text-sm"><span class=text-muted-foreground></span><span class="tabular-nums text-foreground">');
-function le(e) {
+function re(e) {
   const r = (a) => new Intl.NumberFormat(e.locale ?? "en-US", {
     style: "currency",
     currency: e.currency ?? "USD"
@@ -236,7 +237,7 @@ function le(e) {
   })();
 }
 var H = /* @__PURE__ */ s('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), J = /* @__PURE__ */ s('<span class="text-xs text-muted-foreground">'), K = /* @__PURE__ */ s('<div class="flex items-center justify-between gap-2">');
-function re(e) {
+function ae(e) {
   const r = (a, t) => {
     const c = e.selected.slice(), d = c.indexOf(a);
     t ? d === -1 && c.push(a) : d !== -1 && c.splice(d, 1), e.onChange(c);
@@ -271,11 +272,11 @@ function re(e) {
   })();
 }
 export {
-  ne as CartLine,
-  le as CartSummary,
-  re as FilterGroup,
+  le as CartLine,
+  re as CartSummary,
+  ae as FilterGroup,
   A as PriceTag,
-  ee as ProductCard,
-  te as ProductGrid,
+  te as ProductCard,
+  ne as ProductGrid,
   D as QuantityStepper
 };

package/dist/elements.css

@@ -1648,6 +1648,9 @@ html.calm .tile-glass {
 .h-\[65vh\] {
   height: 65vh;
 }
+.h-auto {
+  height: auto;
+}
 .h-full {
   height: 100%;
 }
@@ -1678,6 +1681,9 @@ html.calm .tile-glass {
 .min-h-4 {
   min-height: 1rem;
 }
+.min-h-9 {
+  min-height: 2.25rem;
+}
 .min-h-\[80px\] {
   min-height: 80px;
 }
@@ -1693,6 +1699,9 @@ html.calm .tile-glass {
 .w-1\.5 {
   width: 0.375rem;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-11 {
   width: 2.75rem;
 }
@@ -1777,6 +1786,9 @@ html.calm .tile-glass {
 .min-w-40 {
   min-width: 10rem;
 }
+.min-w-56 {
+  min-width: 14rem;
+}
 .min-w-\[1\.5rem\] {
   min-width: 1.5rem;
 }
@@ -1925,6 +1937,9 @@ html.calm .tile-glass {
 .items-start {
   align-items: flex-start;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -2010,6 +2025,9 @@ html.calm .tile-glass {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -2053,6 +2071,10 @@ html.calm .tile-glass {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
 .border {
   border-width: 1px;
 }
@@ -2299,6 +2321,10 @@ html.calm .tile-glass {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
 .py-0\.5 {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -2772,6 +2798,10 @@ html.calm .tile-glass {
 .focus-within\:ring-ring\/30:focus-within {
   --tw-ring-color: hsl(var(--ring) / 0.3);
 }
+.hover\:border-primary:hover {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
+}
 .hover\:border-ring\/60:hover {
   border-color: hsl(var(--ring) / 0.6);
 }
@@ -2785,6 +2815,9 @@ html.calm .tile-glass {
 .hover\:bg-muted\/70:hover {
   background-color: hsl(var(--muted) / 0.7);
 }
+.hover\:bg-primary\/5:hover {
+  background-color: hsl(var(--primary) / 0.05);
+}
 .hover\:bg-primary\/50:hover {
   background-color: hsl(var(--primary) / 0.5);
 }
@@ -2812,6 +2845,10 @@ html.calm .tile-glass {
   --tw-border-opacity: 1;
   border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
 }
+.focus\:bg-muted:focus {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.9.0";
+export declare const A4UI_VERSION = "0.10.0";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -15,6 +15,8 @@ export { TimeField, type TimeFieldProps } from './ui/TimeField';
 export { DateTimeField, type DateTimeFieldProps } from './ui/DateTimeField';
 export { DateRangePicker, type DateRange, type DateRangePickerProps } from './ui/DateRangePicker';
 export { FormField, FormLabel, FormControl, FormDescription, FormError, type FormFieldProps } from './ui/Form';
+export { FileUpload, type UploadFile, type FileUploadProps } from './ui/FileUpload';
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps } from './ui/MultiSelect';
 export { Drawer } from './ui/Drawer';
 export { Dropdown, type DropdownItem } from './ui/Dropdown';
 export { Dropzone } from './ui/Dropzone';