@a4ui/core 0.8.1 → 0.10.0

package/dist/commerce/QuantityStepper.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'solid-js';
+export interface QuantityStepperProps {
+    value: number;
+    onChange: (value: number) => void;
+    /** Minimum allowed value. Defaults to `0`. */
+    min?: number;
+    /** Maximum allowed value. Defaults to `Number.MAX_SAFE_INTEGER`. */
+    max?: number;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Bordered "−"/value/"+" control for adjusting an integer quantity, clamped to
+ * `[min, max]`.
+ *
+ * @example
+ * ```tsx
+ * <QuantityStepper value={qty()} onChange={setQty} min={1} max={10} />
+ * ```
+ */
+export declare function QuantityStepper(props: QuantityStepperProps): JSX.Element;

package/dist/commerce/index.d.ts

@@ -0,0 +1,7 @@
+export { PriceTag, type PriceTagProps } from './PriceTag';
+export { QuantityStepper, type QuantityStepperProps } from './QuantityStepper';
+export { ProductCard, type ProductCardProps } from './ProductCard';
+export { ProductGrid, type ProductGridProps } from './ProductGrid';
+export { CartLine, type CartLineProps } from './CartLine';
+export { CartSummary, type CartSummaryProps, type CartSummaryItem } from './CartSummary';
+export { FilterGroup, type FilterGroupProps, type FacetOption } from './FilterGroup';

package/dist/commerce.js

@@ -0,0 +1,282 @@
+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 { 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 = {
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+};
+function A(e) {
+  const r = (c) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(c), a = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
+  return (() => {
+    var c = q(), d = c.firstChild;
+    return n(d, () => r(e.amount)), n(c, u(v, {
+      get when() {
+        return a();
+      },
+      get children() {
+        return [(() => {
+          var i = j();
+          return n(i, () => r(e.compareAt)), i;
+        })(), u(S, {
+          tone: "danger",
+          get children() {
+            return ["-", T(() => t()), "%"];
+          }
+        })];
+      }
+    }), null), f((i) => {
+      var l = h("inline-flex items-center gap-2", e.class), m = h("font-bold text-foreground", M[e.size ?? "md"]);
+      return l !== i.e && b(c, i.e = l), m !== i.t && b(d, i.t = m), i;
+    }, {
+      e: void 0,
+      t: void 0
+    }), c;
+  })();
+}
+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">');
+function D(e) {
+  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));
+  return (() => {
+    var i = P(), l = i.firstChild, m = l.nextSibling, g = m.nextSibling;
+    return l.$$click = c, n(l, u(N, {
+      class: "h-4 w-4"
+    })), n(m, () => e.value), g.$$click = d, n(g, u(R, {
+      class: "h-4 w-4"
+    })), f((o) => {
+      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();
+      return x !== o.e && b(i, o.e = x), _ !== o.t && (l.disabled = o.t = _), y !== o.a && (g.disabled = o.a = y), o;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), i;
+  })();
+}
+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 te(e) {
+  return u(E, {
+    get class() {
+      return h("overflow-hidden p-4", e.class);
+    },
+    get children() {
+      return [(() => {
+        var r = z(), a = r.firstChild;
+        return n(r, u(v, {
+          get when() {
+            return e.badge;
+          },
+          get children() {
+            return u(S, {
+              class: "absolute left-2 top-2",
+              get children() {
+                return e.badge;
+              }
+            });
+          }
+        }), null), f((t) => {
+          var c = e.image, d = e.title;
+          return c !== t.e && $(a, "src", t.e = c), d !== t.t && $(a, "alt", t.t = d), t;
+        }, {
+          e: void 0,
+          t: void 0
+        }), r;
+      })(), (() => {
+        var r = B(), a = r.firstChild;
+        return n(a, () => e.title), n(r, u(v, {
+          get when() {
+            return e.rating !== void 0;
+          },
+          get children() {
+            return u(F, {
+              get value() {
+                return e.rating;
+              },
+              readonly: !0,
+              max: 5
+            });
+          }
+        }), null), n(r, u(A, {
+          get amount() {
+            return e.price;
+          },
+          get compareAt() {
+            return e.compareAt;
+          },
+          get currency() {
+            return e.currency;
+          },
+          get locale() {
+            return e.locale;
+          }
+        }), null), n(r, u(v, {
+          get when() {
+            return e.onAddToCart;
+          },
+          get children() {
+            return u(k, {
+              class: "w-full",
+              onClick: () => {
+                var t;
+                return (t = e.onAddToCart) == null ? void 0 : t.call(e);
+              },
+              children: "Add to cart"
+            });
+          }
+        }), null), r;
+      })()];
+    }
+  });
+}
+var G = /* @__PURE__ */ s("<div>");
+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 le(e) {
+  const r = () => e.price * e.quantity, a = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(t);
+  return (() => {
+    var t = O(), c = t.firstChild, d = c.firstChild, i = c.nextSibling;
+    return n(t, u(v, {
+      get when() {
+        return e.image;
+      },
+      get children() {
+        var l = L();
+        return f((m) => {
+          var g = e.image, o = e.title;
+          return g !== m.e && $(l, "src", m.e = g), o !== m.t && $(l, "alt", m.t = o), m;
+        }, {
+          e: void 0,
+          t: void 0
+        }), l;
+      }
+    }), c), n(d, () => e.title), n(c, u(A, {
+      get amount() {
+        return e.price;
+      },
+      get currency() {
+        return e.currency;
+      },
+      get locale() {
+        return e.locale;
+      },
+      size: "sm"
+    }), null), n(t, u(D, {
+      get value() {
+        return e.quantity;
+      },
+      onChange: (l) => {
+        var m;
+        return (m = e.onQuantityChange) == null ? void 0 : m.call(e, l);
+      },
+      min: 1
+    }), i), n(i, () => a(r())), n(t, u(v, {
+      get when() {
+        return e.onRemove;
+      },
+      get children() {
+        var l = Q();
+        return l.$$click = () => {
+          var m;
+          return (m = e.onRemove) == null ? void 0 : m.call(e);
+        }, n(l, u(U, {
+          class: "h-4 w-4"
+        })), l;
+      }
+    }), null), f(() => b(t, h("flex flex-wrap items-center gap-4", e.class))), t;
+  })();
+}
+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 re(e) {
+  const r = (a) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(a);
+  return (() => {
+    var a = X(), t = a.firstChild, c = t.nextSibling, d = c.firstChild, i = d.nextSibling;
+    return n(a, u(w, {
+      get each() {
+        return e.lines;
+      },
+      children: (l) => (() => {
+        var m = Z(), g = m.firstChild, o = g.nextSibling;
+        return n(g, () => l.label), n(o, () => r(l.amount)), m;
+      })()
+    }), t), n(i, () => r(e.total)), n(a, u(v, {
+      get when() {
+        return e.onCheckout;
+      },
+      get children() {
+        return u(k, {
+          class: "mt-4 w-full",
+          onClick: () => {
+            var l;
+            return (l = e.onCheckout) == null ? void 0 : l.call(e);
+          },
+          get children() {
+            return e.checkoutLabel ?? "Checkout";
+          }
+        });
+      }
+    }), null), f(() => b(a, h("rounded-xl border border-border bg-card p-5", e.class))), a;
+  })();
+}
+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 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);
+  };
+  return (() => {
+    var a = H(), t = a.firstChild, c = t.nextSibling;
+    return n(t, () => e.title), n(c, u(w, {
+      get each() {
+        return e.options;
+      },
+      children: (d) => (() => {
+        var i = K();
+        return n(i, u(I, {
+          get checked() {
+            return e.selected.includes(d.value);
+          },
+          onChange: (l) => r(d.value, l),
+          get label() {
+            return d.label;
+          }
+        }), null), n(i, u(v, {
+          get when() {
+            return d.count != null;
+          },
+          get children() {
+            var l = J();
+            return n(l, () => d.count), l;
+          }
+        }), null), i;
+      })()
+    })), f(() => b(a, h("space-y-2", e.class))), a;
+  })();
+}
+export {
+  le as CartLine,
+  re as CartSummary,
+  ae as FilterGroup,
+  A as PriceTag,
+  te as ProductCard,
+  ne as ProductGrid,
+  D as QuantityStepper
+};

package/dist/elements.css

@@ -1505,6 +1505,10 @@ html.calm .tile-glass {
   margin-left: auto;
   margin-right: auto;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .-ml-2 {
   margin-left: -0.5rem;
 }
@@ -1538,6 +1542,12 @@ html.calm .tile-glass {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
 .block {
   display: block;
 }
@@ -1568,6 +1578,9 @@ html.calm .tile-glass {
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .size-3 {
   width: 0.75rem;
   height: 0.75rem;
@@ -1635,6 +1648,9 @@ html.calm .tile-glass {
 .h-\[65vh\] {
   height: 65vh;
 }
+.h-auto {
+  height: auto;
+}
 .h-full {
   height: 100%;
 }
@@ -1665,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;
 }
@@ -1680,6 +1699,9 @@ html.calm .tile-glass {
 .w-1\.5 {
   width: 0.375rem;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-11 {
   width: 2.75rem;
 }
@@ -1764,12 +1786,24 @@ html.calm .tile-glass {
 .min-w-40 {
   min-width: 10rem;
 }
+.min-w-56 {
+  min-width: 14rem;
+}
 .min-w-\[1\.5rem\] {
   min-width: 1.5rem;
 }
 .min-w-\[10rem\] {
   min-width: 10rem;
 }
+.min-w-\[2\.5rem\] {
+  min-width: 2.5rem;
+}
+.min-w-\[4rem\] {
+  min-width: 4rem;
+}
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
 .max-w-\[520px\] {
   max-width: 520px;
 }
@@ -1879,6 +1913,9 @@ html.calm .tile-glass {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1900,6 +1937,9 @@ html.calm .tile-glass {
 .items-start {
   align-items: flex-start;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -1952,6 +1992,11 @@ html.calm .tile-glass {
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
 }
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1980,6 +2025,9 @@ html.calm .tile-glass {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -2023,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;
 }
@@ -2163,6 +2215,9 @@ html.calm .tile-glass {
 .bg-primary\/15 {
   background-color: hsl(var(--primary) / 0.15);
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .bg-primary\/25 {
   background-color: hsl(var(--primary) / 0.25);
 }
@@ -2266,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;
@@ -2519,6 +2578,9 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(2 132 199 / var(--tw-text-opacity, 1));
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .accent-foreground {
   accent-color: hsl(var(--foreground) / 1);
 }
@@ -2736,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);
 }
@@ -2749,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);
 }
@@ -2776,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;
@@ -2923,6 +2996,12 @@ html.calm .tile-glass {
     padding-right: 1.5rem;
   }
 }
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
   display: none;
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.8.1";
+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';
@@ -13,6 +13,10 @@ export { Checkbox } from './ui/Checkbox';
 export { DateField } from './ui/DateField';
 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';