@a4ui/core 0.10.0 → 0.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,31 +1,43 @@
1
1
  import { JSX } from 'solid-js';
2
+ /** Corner-ribbon colour intent. */
3
+ export type ProductBadgeTone = 'sale' | 'new' | 'featured';
2
4
  export interface ProductCardProps {
3
5
  title: string;
4
6
  price: number;
5
7
  compareAt?: number;
6
8
  image: string;
9
+ /** Brand name — shown as a small eyebrow above the title. */
10
+ brand?: string;
11
+ /** Category — shown as a small tag under the title. */
12
+ category?: string;
7
13
  /** Rating from 0-5; renders a readonly {@link Rating} when present. */
8
14
  rating?: number;
9
- /** Small overlay label shown over the image top-left, e.g. `'New'`. */
15
+ /** Corner-ribbon label over the image top-right corner, e.g. `'Sale'`, `'New'`. */
10
16
  badge?: string;
17
+ /** Ribbon colour. Inferred from `badge` text when omitted (sale/new → featured). */
18
+ badgeTone?: ProductBadgeTone;
11
19
  currency?: string;
12
20
  locale?: string;
13
21
  onAddToCart?: () => void;
14
22
  class?: string;
15
23
  }
16
24
  /**
17
- * Card summarizing a single product: image, title, optional rating, price
18
- * (with compare-at/discount), and an optional "Add to cart" button.
25
+ * Card summarizing a single product: image with a corner ribbon, brand, title,
26
+ * category, optional rating, price (with compare-at/discount), and an optional
27
+ * "Add to cart" button. Frosted glass with edge glow.
19
28
  *
20
29
  * @example
21
30
  * ```tsx
22
31
  * <ProductCard
23
32
  * title="Wireless Headphones"
33
+ * brand="Acme"
34
+ * category="Audio"
24
35
  * price={79.99}
25
36
  * compareAt={99.99}
26
37
  * image="/headphones.jpg"
27
38
  * rating={4}
28
- * badge="New"
39
+ * badge="Sale"
40
+ * badgeTone="sale"
29
41
  * onAddToCart={() => addToCart(sku)}
30
42
  * />
31
43
  * ```
@@ -1,6 +1,6 @@
1
1
  export { PriceTag, type PriceTagProps } from './PriceTag';
2
2
  export { QuantityStepper, type QuantityStepperProps } from './QuantityStepper';
3
- export { ProductCard, type ProductCardProps } from './ProductCard';
3
+ export { ProductCard, type ProductCardProps, type ProductBadgeTone } from './ProductCard';
4
4
  export { ProductGrid, type ProductGridProps } from './ProductGrid';
5
5
  export { CartLine, type CartLineProps } from './CartLine';
6
6
  export { CartSummary, type CartSummaryProps, type CartSummaryItem } from './CartSummary';
package/dist/commerce.js CHANGED
@@ -1,57 +1,57 @@
1
- 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";
2
- import { Show as v, For as w } from "solid-js";
1
+ 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";
2
+ import { Show as g, For as C } from "solid-js";
3
3
  import { c as h } from "./cn-B6yFEsav.js";
4
- import { B as S, C as E, R as F, a as k, b as I } from "./Checkbox-DQcDOBLd.js";
5
- import { Minus as N, Plus as R, Trash2 as U } from "lucide-solid";
6
- var j = /* @__PURE__ */ s('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ s("<div><span>");
7
- const M = {
4
+ import { B as T, C as N, R as E, a as S, b as I } from "./Checkbox-DQcDOBLd.js";
5
+ import { Minus as R, Plus as F, Trash2 as U } from "lucide-solid";
6
+ var j = /* @__PURE__ */ o('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ o("<div><span>");
7
+ const B = {
8
8
  sm: "text-sm",
9
9
  md: "text-lg",
10
10
  lg: "text-2xl"
11
11
  };
12
- function A(e) {
13
- const r = (c) => new Intl.NumberFormat(e.locale ?? "en-US", {
12
+ function k(e) {
13
+ const r = (u) => new Intl.NumberFormat(e.locale ?? "en-US", {
14
14
  style: "currency",
15
15
  currency: e.currency ?? "USD"
16
- }).format(c), a = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
16
+ }).format(u), l = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
17
17
  return (() => {
18
- var c = q(), d = c.firstChild;
19
- return n(d, () => r(e.amount)), n(c, u(v, {
18
+ var u = q(), d = u.firstChild;
19
+ return n(d, () => r(e.amount)), n(u, c(g, {
20
20
  get when() {
21
- return a();
21
+ return l();
22
22
  },
23
23
  get children() {
24
24
  return [(() => {
25
25
  var i = j();
26
26
  return n(i, () => r(e.compareAt)), i;
27
- })(), u(S, {
27
+ })(), c(T, {
28
28
  tone: "danger",
29
29
  get children() {
30
- return ["-", T(() => t()), "%"];
30
+ return ["-", A(() => t()), "%"];
31
31
  }
32
32
  })];
33
33
  }
34
- }), null), f((i) => {
35
- var l = h("inline-flex items-center gap-2", e.class), m = h("font-bold text-foreground", M[e.size ?? "md"]);
36
- return l !== i.e && b(c, i.e = l), m !== i.t && b(d, i.t = m), i;
34
+ }), null), v((i) => {
35
+ var a = h("inline-flex items-center gap-2", e.class), m = h("font-bold text-foreground", B[e.size ?? "md"]);
36
+ return a !== i.e && b(u, i.e = a), m !== i.t && b(d, i.t = m), i;
37
37
  }, {
38
38
  e: void 0,
39
39
  t: void 0
40
- }), c;
40
+ }), u;
41
41
  })();
42
42
  }
43
- var P = /* @__PURE__ */ s('<div><button type=button aria-label="Decrease quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40"></button><span class="grid min-w-[2.5rem] place-items-center tabular-nums"></span><button type=button aria-label="Increase quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40">');
44
- function D(e) {
45
- const r = () => e.min ?? 0, a = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (i) => Math.min(a(), Math.max(r(), i)), c = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
43
+ var M = /* @__PURE__ */ o('<div><button type=button aria-label="Decrease quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40"></button><span class="grid min-w-[2.5rem] place-items-center tabular-nums"></span><button type=button aria-label="Increase quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40">');
44
+ function P(e) {
45
+ const r = () => e.min ?? 0, l = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (i) => Math.min(l(), Math.max(r(), i)), u = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
46
46
  return (() => {
47
- var i = P(), l = i.firstChild, m = l.nextSibling, g = m.nextSibling;
48
- return l.$$click = c, n(l, u(N, {
47
+ var i = M(), a = i.firstChild, m = a.nextSibling, f = m.nextSibling;
48
+ return a.$$click = u, n(a, c(R, {
49
49
  class: "h-4 w-4"
50
- })), n(m, () => e.value), g.$$click = d, n(g, u(R, {
50
+ })), n(m, () => e.value), f.$$click = d, n(f, c(F, {
51
51
  class: "h-4 w-4"
52
- })), f((o) => {
53
- var x = h("inline-flex items-stretch rounded-md border border-input", e.class), _ = e.disabled || e.value <= r(), y = e.disabled || e.value >= a();
54
- return x !== o.e && b(i, o.e = x), _ !== o.t && (l.disabled = o.t = _), y !== o.a && (g.disabled = o.a = y), o;
52
+ })), v((s) => {
53
+ var $ = h("inline-flex items-stretch rounded-md border border-input", e.class), _ = e.disabled || e.value <= r(), w = e.disabled || e.value >= l();
54
+ return $ !== s.e && b(i, s.e = $), _ !== s.t && (a.disabled = s.t = _), w !== s.a && (f.disabled = s.a = w), s;
55
55
  }, {
56
56
  e: void 0,
57
57
  t: void 0,
@@ -59,43 +59,67 @@ function D(e) {
59
59
  }), i;
60
60
  })();
61
61
  }
62
- C(["click"]);
63
- 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">');
64
- function te(e) {
65
- return u(E, {
62
+ y(["click"]);
63
+ var D = /* @__PURE__ */ o("<span>"), L = /* @__PURE__ */ o('<div class="relative aspect-square overflow-hidden rounded-lg bg-muted"><img loading=lazy class="h-full w-full object-cover">', !0, !1, !1), z = /* @__PURE__ */ o('<span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">'), G = /* @__PURE__ */ o('<span class="w-fit rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">'), O = /* @__PURE__ */ o('<div class="mt-3 flex flex-1 flex-col gap-1.5"><p class="line-clamp-1 font-medium text-foreground">');
64
+ const Q = {
65
+ sale: "bg-destructive text-destructive-foreground",
66
+ new: "bg-primary text-primary-foreground",
67
+ featured: "bg-accent text-accent-foreground"
68
+ };
69
+ function X(e, r) {
70
+ if (r) return r;
71
+ const l = (e ?? "").toLowerCase();
72
+ return /sale|off|%|deal/.test(l) ? "sale" : /new/.test(l) ? "new" : "featured";
73
+ }
74
+ function ue(e) {
75
+ return c(N, {
76
+ glass: !0,
77
+ glow: !0,
66
78
  get class() {
67
- return h("overflow-hidden p-4", e.class);
79
+ return h("flex h-full flex-col overflow-hidden p-4", e.class);
68
80
  },
69
81
  get children() {
70
82
  return [(() => {
71
- var r = z(), a = r.firstChild;
72
- return n(r, u(v, {
83
+ var r = L(), l = r.firstChild;
84
+ return n(r, c(g, {
73
85
  get when() {
74
86
  return e.badge;
75
87
  },
76
88
  get children() {
77
- return u(S, {
78
- class: "absolute left-2 top-2",
79
- get children() {
80
- return e.badge;
81
- }
82
- });
89
+ var t = D();
90
+ return n(t, () => e.badge), v(() => b(t, h("absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md", Q[X(e.badge, e.badgeTone)]))), t;
83
91
  }
84
- }), null), f((t) => {
85
- var c = e.image, d = e.title;
86
- return c !== t.e && $(a, "src", t.e = c), d !== t.t && $(a, "alt", t.t = d), t;
92
+ }), null), v((t) => {
93
+ var u = e.image, d = e.title;
94
+ return u !== t.e && x(l, "src", t.e = u), d !== t.t && x(l, "alt", t.t = d), t;
87
95
  }, {
88
96
  e: void 0,
89
97
  t: void 0
90
98
  }), r;
91
99
  })(), (() => {
92
- var r = B(), a = r.firstChild;
93
- return n(a, () => e.title), n(r, u(v, {
100
+ var r = O(), l = r.firstChild;
101
+ return n(r, c(g, {
102
+ get when() {
103
+ return e.brand;
104
+ },
105
+ get children() {
106
+ var t = z();
107
+ return n(t, () => e.brand), t;
108
+ }
109
+ }), l), n(l, () => e.title), n(r, c(g, {
110
+ get when() {
111
+ return e.category;
112
+ },
113
+ get children() {
114
+ var t = G();
115
+ return n(t, () => e.category), t;
116
+ }
117
+ }), null), n(r, c(g, {
94
118
  get when() {
95
119
  return e.rating !== void 0;
96
120
  },
97
121
  get children() {
98
- return u(F, {
122
+ return c(E, {
99
123
  get value() {
100
124
  return e.rating;
101
125
  },
@@ -103,7 +127,7 @@ function te(e) {
103
127
  max: 5
104
128
  });
105
129
  }
106
- }), null), n(r, u(A, {
130
+ }), null), n(r, c(k, {
107
131
  get amount() {
108
132
  return e.price;
109
133
  },
@@ -116,13 +140,13 @@ function te(e) {
116
140
  get locale() {
117
141
  return e.locale;
118
142
  }
119
- }), null), n(r, u(v, {
143
+ }), null), n(r, c(g, {
120
144
  get when() {
121
145
  return e.onAddToCart;
122
146
  },
123
147
  get children() {
124
- return u(k, {
125
- class: "w-full",
148
+ return c(S, {
149
+ class: "mt-auto w-full",
126
150
  onClick: () => {
127
151
  var t;
128
152
  return (t = e.onAddToCart) == null ? void 0 : t.call(e);
@@ -135,36 +159,36 @@ function te(e) {
135
159
  }
136
160
  });
137
161
  }
138
- var G = /* @__PURE__ */ s("<div>");
139
- function ne(e) {
162
+ var Z = /* @__PURE__ */ o("<div>");
163
+ function ce(e) {
140
164
  return (() => {
141
- var r = G();
142
- 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;
165
+ var r = Z();
166
+ return n(r, () => e.children), v(() => b(r, h("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), r;
143
167
  })();
144
168
  }
145
- 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">');
146
- function le(e) {
147
- const r = () => e.price * e.quantity, a = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
169
+ var H = /* @__PURE__ */ o('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), J = /* @__PURE__ */ o('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), K = /* @__PURE__ */ o('<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">');
170
+ function ie(e) {
171
+ const r = () => e.price * e.quantity, l = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
148
172
  style: "currency",
149
173
  currency: e.currency ?? "USD"
150
174
  }).format(t);
151
175
  return (() => {
152
- var t = O(), c = t.firstChild, d = c.firstChild, i = c.nextSibling;
153
- return n(t, u(v, {
176
+ var t = K(), u = t.firstChild, d = u.firstChild, i = u.nextSibling;
177
+ return n(t, c(g, {
154
178
  get when() {
155
179
  return e.image;
156
180
  },
157
181
  get children() {
158
- var l = L();
159
- return f((m) => {
160
- var g = e.image, o = e.title;
161
- return g !== m.e && $(l, "src", m.e = g), o !== m.t && $(l, "alt", m.t = o), m;
182
+ var a = H();
183
+ return v((m) => {
184
+ var f = e.image, s = e.title;
185
+ return f !== m.e && x(a, "src", m.e = f), s !== m.t && x(a, "alt", m.t = s), m;
162
186
  }, {
163
187
  e: void 0,
164
188
  t: void 0
165
- }), l;
189
+ }), a;
166
190
  }
167
- }), c), n(d, () => e.title), n(c, u(A, {
191
+ }), u), n(d, () => e.title), n(u, c(k, {
168
192
  get amount() {
169
193
  return e.price;
170
194
  },
@@ -175,108 +199,108 @@ function le(e) {
175
199
  return e.locale;
176
200
  },
177
201
  size: "sm"
178
- }), null), n(t, u(D, {
202
+ }), null), n(t, c(P, {
179
203
  get value() {
180
204
  return e.quantity;
181
205
  },
182
- onChange: (l) => {
206
+ onChange: (a) => {
183
207
  var m;
184
- return (m = e.onQuantityChange) == null ? void 0 : m.call(e, l);
208
+ return (m = e.onQuantityChange) == null ? void 0 : m.call(e, a);
185
209
  },
186
210
  min: 1
187
- }), i), n(i, () => a(r())), n(t, u(v, {
211
+ }), i), n(i, () => l(r())), n(t, c(g, {
188
212
  get when() {
189
213
  return e.onRemove;
190
214
  },
191
215
  get children() {
192
- var l = Q();
193
- return l.$$click = () => {
216
+ var a = J();
217
+ return a.$$click = () => {
194
218
  var m;
195
219
  return (m = e.onRemove) == null ? void 0 : m.call(e);
196
- }, n(l, u(U, {
220
+ }, n(a, c(U, {
197
221
  class: "h-4 w-4"
198
- })), l;
222
+ })), a;
199
223
  }
200
- }), null), f(() => b(t, h("flex flex-wrap items-center gap-4", e.class))), t;
224
+ }), null), v(() => b(t, h("flex flex-wrap items-center gap-4", e.class))), t;
201
225
  })();
202
226
  }
203
- C(["click"]);
204
- 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">');
205
- function re(e) {
206
- const r = (a) => new Intl.NumberFormat(e.locale ?? "en-US", {
227
+ y(["click"]);
228
+ var V = /* @__PURE__ */ o('<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>'), W = /* @__PURE__ */ o('<div class="flex items-center justify-between py-1 text-sm"><span class=text-muted-foreground></span><span class="tabular-nums text-foreground">');
229
+ function de(e) {
230
+ const r = (l) => new Intl.NumberFormat(e.locale ?? "en-US", {
207
231
  style: "currency",
208
232
  currency: e.currency ?? "USD"
209
- }).format(a);
233
+ }).format(l);
210
234
  return (() => {
211
- var a = X(), t = a.firstChild, c = t.nextSibling, d = c.firstChild, i = d.nextSibling;
212
- return n(a, u(w, {
235
+ var l = V(), t = l.firstChild, u = t.nextSibling, d = u.firstChild, i = d.nextSibling;
236
+ return n(l, c(C, {
213
237
  get each() {
214
238
  return e.lines;
215
239
  },
216
- children: (l) => (() => {
217
- var m = Z(), g = m.firstChild, o = g.nextSibling;
218
- return n(g, () => l.label), n(o, () => r(l.amount)), m;
240
+ children: (a) => (() => {
241
+ var m = W(), f = m.firstChild, s = f.nextSibling;
242
+ return n(f, () => a.label), n(s, () => r(a.amount)), m;
219
243
  })()
220
- }), t), n(i, () => r(e.total)), n(a, u(v, {
244
+ }), t), n(i, () => r(e.total)), n(l, c(g, {
221
245
  get when() {
222
246
  return e.onCheckout;
223
247
  },
224
248
  get children() {
225
- return u(k, {
249
+ return c(S, {
226
250
  class: "mt-4 w-full",
227
251
  onClick: () => {
228
- var l;
229
- return (l = e.onCheckout) == null ? void 0 : l.call(e);
252
+ var a;
253
+ return (a = e.onCheckout) == null ? void 0 : a.call(e);
230
254
  },
231
255
  get children() {
232
256
  return e.checkoutLabel ?? "Checkout";
233
257
  }
234
258
  });
235
259
  }
236
- }), null), f(() => b(a, h("rounded-xl border border-border bg-card p-5", e.class))), a;
260
+ }), null), v(() => b(l, h("card glow-edge rounded-xl p-5 text-card-foreground", e.class))), l;
237
261
  })();
238
262
  }
239
- 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">');
240
- function ae(e) {
241
- const r = (a, t) => {
242
- const c = e.selected.slice(), d = c.indexOf(a);
243
- t ? d === -1 && c.push(a) : d !== -1 && c.splice(d, 1), e.onChange(c);
263
+ var Y = /* @__PURE__ */ o('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), p = /* @__PURE__ */ o('<span class="text-xs text-muted-foreground">'), ee = /* @__PURE__ */ o('<div class="flex items-center justify-between gap-2">');
264
+ function me(e) {
265
+ const r = (l, t) => {
266
+ const u = e.selected.slice(), d = u.indexOf(l);
267
+ t ? d === -1 && u.push(l) : d !== -1 && u.splice(d, 1), e.onChange(u);
244
268
  };
245
269
  return (() => {
246
- var a = H(), t = a.firstChild, c = t.nextSibling;
247
- return n(t, () => e.title), n(c, u(w, {
270
+ var l = Y(), t = l.firstChild, u = t.nextSibling;
271
+ return n(t, () => e.title), n(u, c(C, {
248
272
  get each() {
249
273
  return e.options;
250
274
  },
251
275
  children: (d) => (() => {
252
- var i = K();
253
- return n(i, u(I, {
276
+ var i = ee();
277
+ return n(i, c(I, {
254
278
  get checked() {
255
279
  return e.selected.includes(d.value);
256
280
  },
257
- onChange: (l) => r(d.value, l),
281
+ onChange: (a) => r(d.value, a),
258
282
  get label() {
259
283
  return d.label;
260
284
  }
261
- }), null), n(i, u(v, {
285
+ }), null), n(i, c(g, {
262
286
  get when() {
263
287
  return d.count != null;
264
288
  },
265
289
  get children() {
266
- var l = J();
267
- return n(l, () => d.count), l;
290
+ var a = p();
291
+ return n(a, () => d.count), a;
268
292
  }
269
293
  }), null), i;
270
294
  })()
271
- })), f(() => b(a, h("space-y-2", e.class))), a;
295
+ })), v(() => b(l, h("space-y-2", e.class))), l;
272
296
  })();
273
297
  }
274
298
  export {
275
- le as CartLine,
276
- re as CartSummary,
277
- ae as FilterGroup,
278
- A as PriceTag,
279
- te as ProductCard,
280
- ne as ProductGrid,
281
- D as QuantityStepper
299
+ ie as CartLine,
300
+ de as CartSummary,
301
+ me as FilterGroup,
302
+ k as PriceTag,
303
+ ue as ProductCard,
304
+ ce as ProductGrid,
305
+ P as QuantityStepper
282
306
  };
package/dist/elements.css CHANGED
@@ -1315,6 +1315,25 @@ video {
1315
1315
  padding: 1.5px;
1316
1316
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / 1), hsl(var(--accent) / 0.55) 42%, transparent 72%);
1317
1317
  }
1318
+ .a4-field {
1319
+ transition: box-shadow .16s ease, border-color .16s ease;
1320
+ }
1321
+ .a4-field:focus, .a4-field:focus-within {
1322
+ outline: none;
1323
+ border-color: hsl(var(--ring));
1324
+ box-shadow: 0 0 0 3px hsl(var(--ring) / 0.22), 0 0 16px -2px hsl(var(--ring) / 0.55);
1325
+ }
1326
+ .a4-field[aria-invalid="true"], .a4-field[data-invalid] {
1327
+ border-color: hsl(var(--destructive));
1328
+ box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.18);
1329
+ }
1330
+ .a4-field[aria-invalid="true"]:focus, .a4-field[data-invalid]:focus {
1331
+ outline: none;
1332
+ box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.3), 0 0 16px -2px hsl(var(--destructive) / 0.6);
1333
+ }
1334
+ [data-theme='light'] .a4-field:focus, [data-theme='light'] .a4-field:focus-within {
1335
+ box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3), 0 0 18px -2px hsl(var(--ring) / 0.65);
1336
+ }
1318
1337
  .bg-glass {
1319
1338
  background: hsl(var(--card) / 0.72);
1320
1339
  backdrop-filter: blur(14px) saturate(160%);
@@ -1418,6 +1437,9 @@ html.calm .tile-glass {
1418
1437
  .-right-1 {
1419
1438
  right: -0.25rem;
1420
1439
  }
1440
+ .-right-9 {
1441
+ right: -2.25rem;
1442
+ }
1421
1443
  .-top-1 {
1422
1444
  top: -0.25rem;
1423
1445
  }
@@ -1463,6 +1485,9 @@ html.calm .tile-glass {
1463
1485
  .top-3 {
1464
1486
  top: 0.75rem;
1465
1487
  }
1488
+ .top-3\.5 {
1489
+ top: 0.875rem;
1490
+ }
1466
1491
  .top-\[14vh\] {
1467
1492
  top: 14vh;
1468
1493
  }
@@ -1542,6 +1567,9 @@ html.calm .tile-glass {
1542
1567
  .mt-6 {
1543
1568
  margin-top: 1.5rem;
1544
1569
  }
1570
+ .mt-auto {
1571
+ margin-top: auto;
1572
+ }
1545
1573
  .line-clamp-1 {
1546
1574
  overflow: hidden;
1547
1575
  display: -webkit-box;
@@ -1765,6 +1793,9 @@ html.calm .tile-glass {
1765
1793
  .w-\[18px\] {
1766
1794
  width: 18px;
1767
1795
  }
1796
+ .w-fit {
1797
+ width: fit-content;
1798
+ }
1768
1799
  .w-full {
1769
1800
  width: 100%;
1770
1801
  }
@@ -2528,6 +2559,10 @@ html.calm .tile-glass {
2528
2559
  --tw-text-opacity: 1;
2529
2560
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
2530
2561
  }
2562
+ .text-destructive-foreground {
2563
+ --tw-text-opacity: 1;
2564
+ color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
2565
+ }
2531
2566
  .text-emerald-500 {
2532
2567
  --tw-text-opacity: 1;
2533
2568
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
@@ -2841,10 +2876,6 @@ html.calm .tile-glass {
2841
2876
  .hover\:\[animation-play-state\:paused\]:hover {
2842
2877
  animation-play-state: paused;
2843
2878
  }
2844
- .focus\:border-ring:focus {
2845
- --tw-border-opacity: 1;
2846
- border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
2847
- }
2848
2879
  .focus\:bg-muted:focus {
2849
2880
  --tw-bg-opacity: 1;
2850
2881
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.10.0";
1
+ export declare const A4UI_VERSION = "0.10.2";
2
2
  export { cn } from './lib/cn';
3
3
  export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
4
4
  export { useEffects, isCalm, setEffects } from './lib/effects';