@a4ui/core 0.8.1 → 0.9.0

package/README.md

@@ -115,14 +115,22 @@ mode switch — a theme recolors underneath either mode.
 **[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` |
+
+Domain-specific sets ship as **subpath entries** so the base package stays lean —
+e.g. commerce components import from `@a4ui/core/commerce`:
+
+```tsx
+import { ProductCard, CartSummary } from '@a4ui/core/commerce'
+```
 
 ## Why A4ui
 

package/dist/Checkbox-CC3EGilW.js

@@ -0,0 +1,173 @@
+import { spread as g, mergeProps as f, 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 m, createSignal as S, Show as L, For as p } from "solid-js";
+import { Star as C } from "lucide-solid";
+import { clsx as B } from "clsx";
+import { twMerge as R } from "tailwind-merge";
+function c(...e) {
+  return R(B(e));
+}
+var T = /* @__PURE__ */ d("<span>");
+const D = {
+  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"
+}, N = "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 K(e) {
+  const [r, n] = m(e, ["tone", "class", "children"]);
+  return (() => {
+    var t = T();
+    return g(t, f({
+      get class() {
+        return c(N, D[r.tone ?? "neutral"], r.class);
+      }
+    }, n), !1, !0), i(t, () => r.children), t;
+  })();
+}
+var M = /* @__PURE__ */ d("<button>");
+const G = {
+  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"
+}, H = "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 Q(e) {
+  const [r, n] = m(e, ["variant", "class", "type", "children"]);
+  return (() => {
+    var t = M();
+    return g(t, f({
+      get type() {
+        return r.type ?? "button";
+      },
+      get class() {
+        return c(H, G[r.variant ?? "primary"], r.class);
+      }
+    }, n), !1, !0), i(t, () => r.children), t;
+  })();
+}
+var $ = /* @__PURE__ */ d("<div>"), O = /* @__PURE__ */ d("<h2>");
+function W(e) {
+  const [r, n] = m(e, ["class", "children", "glass", "glow"]), t = () => (r.glow ?? r.glass) === !0;
+  return (() => {
+    var u = $();
+    return g(u, f({
+      get class() {
+        return c(r.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", t() && "glow-edge", r.class);
+      }
+    }, n), !1, !0), i(u, () => r.children), u;
+  })();
+}
+function X(e) {
+  const [r, n] = m(e, ["class", "children"]);
+  return (() => {
+    var t = $();
+    return g(t, f({
+      get class() {
+        return c("flex flex-col space-y-1.5 p-6", r.class);
+      }
+    }, n), !1, !0), i(t, () => r.children), t;
+  })();
+}
+function Y(e) {
+  const [r, n] = m(e, ["class", "children"]);
+  return (() => {
+    var t = O();
+    return g(t, f({
+      get class() {
+        return c("text-lg font-semibold leading-none tracking-tight", r.class);
+      }
+    }, n), !1, !0), i(t, () => r.children), t;
+  })();
+}
+function Z(e) {
+  const [r, n] = m(e, ["class", "children"]);
+  return (() => {
+    var t = $();
+    return g(t, f({
+      get class() {
+        return c("p-6 pt-0", r.class);
+      }
+    }, n), !1, !0), i(t, () => r.children), t;
+  })();
+}
+var P = /* @__PURE__ */ d("<div role=radiogroup>"), U = /* @__PURE__ */ d("<div role=img>"), j = /* @__PURE__ */ d('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
+function ee(e) {
+  const [r, n] = S(0), t = () => e.max ?? 5, u = () => Array.from({
+    length: t()
+  }, (o, a) => a + 1), A = () => r() > 0 ? r() : e.value, b = (o) => {
+    var a;
+    e.readonly || (a = e.onChange) == null || a.call(e, o);
+  }, w = (o) => c("h-5 w-5 transition-colors", o <= A() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
+  return v(L, {
+    get when() {
+      return !e.readonly;
+    },
+    get fallback() {
+      return (() => {
+        var o = U();
+        return i(o, v(p, {
+          get each() {
+            return u();
+          },
+          children: (a) => v(C, {
+            get class() {
+              return w(a);
+            },
+            "aria-hidden": "true"
+          })
+        })), h((a) => {
+          var s = c("inline-flex items-center gap-1", e.class), l = `Rating ${e.value} of ${t()}`;
+          return s !== a.e && y(o, a.e = s), l !== a.t && x(o, "aria-label", a.t = l), a;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })();
+    },
+    get children() {
+      var o = P();
+      return o.addEventListener("mouseleave", () => n(0)), i(o, v(p, {
+        get each() {
+          return u();
+        },
+        children: (a) => (() => {
+          var s = j();
+          return s.$$keydown = (l) => {
+            l.key === "ArrowRight" || l.key === "ArrowUp" ? (l.preventDefault(), b(Math.min(e.value + 1, t()))) : (l.key === "ArrowLeft" || l.key === "ArrowDown") && (l.preventDefault(), b(Math.max(e.value - 1, 0)));
+          }, s.$$click = () => b(a), s.addEventListener("blur", () => n(0)), s.addEventListener("focus", () => n(a)), s.addEventListener("mouseenter", () => n(a)), i(s, v(C, {
+            get class() {
+              return w(a);
+            },
+            "aria-hidden": "true"
+          })), h((l) => {
+            var k = e.value === a, _ = `Rate ${a} of ${t()}`;
+            return k !== l.e && x(s, "aria-checked", l.e = k), _ !== l.t && x(s, "aria-label", l.t = _), l;
+          }, {
+            e: void 0,
+            t: void 0
+          }), s;
+        })()
+      })), h(() => y(o, c("inline-flex items-center gap-1", e.class))), o;
+    }
+  });
+}
+E(["click", "keydown"]);
+var F = /* @__PURE__ */ d('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
+function re(e) {
+  return (() => {
+    var r = F(), n = r.firstChild;
+    return n.addEventListener("change", (t) => e.onChange(t.currentTarget.checked)), i(r, () => e.label, null), h(() => y(r, c("inline-flex items-center gap-2 text-sm text-foreground", e.class))), h(() => n.checked = e.checked), r;
+  })();
+}
+export {
+  K as B,
+  W as C,
+  ee as R,
+  Q as a,
+  re as b,
+  c,
+  Z as d,
+  X as e,
+  Y as f
+};

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;

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';