@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/tokens/tokens.css

@@ -212,6 +212,7 @@
   --appkit-color-deviantart: #05CC47;
   --appkit-color-whatsapp:   #25D366;
   --appkit-color-youtube:    #FF0000;
+  --appkit-gradient-instagram: linear-gradient(to bottom right, #a855f7, #ec4899, #fb923c);
 }
 
 /* --- Colour — Semantic (light mode defaults) ------------------------------ */
@@ -245,9 +246,31 @@
   --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
 }
 
-/* --- Colour — Brand (dark mode overrides) --------------------------------- */
+/* --- Gradients — default-light defaults (overridden at runtime by ThemeProvider) - */
+:root {
+  --appkit-gradient-brand:            linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary));
+  --appkit-gradient-brand-tri:        linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary), var(--appkit-color-accent));
+  --appkit-gradient-accent:           linear-gradient(to right, var(--appkit-color-cobalt-500), var(--appkit-color-secondary-500));
+  --appkit-gradient-accent-divider:   linear-gradient(to right, transparent, var(--appkit-color-primary), transparent);
+  --appkit-gradient-page-header:      linear-gradient(to bottom right, var(--appkit-color-primary-50), transparent 60%, transparent);
+  --appkit-gradient-section-warm:     linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface));
+  --appkit-gradient-section-cool:     linear-gradient(to bottom right, var(--appkit-color-primary-50), var(--appkit-color-info-surface));
+  --appkit-gradient-section-mesh:     radial-gradient(ellipse at top, var(--appkit-color-primary-50), var(--appkit-color-surface), var(--appkit-color-secondary-50));
+  --appkit-gradient-accent-banner:    linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary));
+  --appkit-gradient-promotion:        linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning));
+  --appkit-gradient-spotlight:        linear-gradient(to bottom right, var(--appkit-color-info-surface), var(--appkit-color-bg), var(--appkit-color-info-surface));
+  --appkit-gradient-whatsapp-card:    linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success));
+  --appkit-gradient-glass:            linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent));
+  --appkit-gradient-card-indigo:      linear-gradient(to bottom right, var(--appkit-color-primary-50), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-teal:        linear-gradient(to bottom right, var(--appkit-color-secondary-50), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-amber:       linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-rose:        linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-logo:             linear-gradient(to right, var(--appkit-color-primary-700) 0%, var(--appkit-color-primary-500) 55%, var(--appkit-color-secondary-400) 100%);
+}
+
+/* --- Theme — Dark ([data-theme="dark"]) ----------------------------------- */
 /* Dark mode: both primary & secondary become Hot Pink (Beyblade 2 dominant colour) */
-.dark {
+[data-theme="dark"] {
   --appkit-color-primary:          #e91e8c;
   --appkit-color-primary-50:       #fdf0f8;
   --appkit-color-primary-100:      #fce2f2;
@@ -273,10 +296,7 @@
   --appkit-color-secondary-800:    #900f56;
   --appkit-color-secondary-900:    #771249;
   --appkit-color-secondary-950:    #480525;
-}
 
-/* --- Colour — Semantic (dark mode overrides) ------------------------------ */
-.dark {
   --appkit-color-bg:               #020617;    /* slate-950 */
   --appkit-color-surface:          #0f172a;    /* slate-900 */
   --appkit-color-surface-elevated: rgba(15, 23, 42, 0.9);
@@ -301,9 +321,91 @@
   --appkit-color-info-surface:     rgba(12, 74, 110, 0.25);
 
   --appkit-color-focus-ring:       #f063b9;    /* primary-400 in dark = hot pink */
-  /* Dark-mode glow: use hot pink instead of cobalt */
   --appkit-shadow-glow:            0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22);
   --appkit-shadow-glow-pink:       0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28);
+
+  /* Dark-mode gradient overrides */
+  --appkit-gradient-brand:           linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-primary-400));
+  --appkit-gradient-brand-tri:       linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary), var(--appkit-color-info));
+  --appkit-gradient-accent:          linear-gradient(to right, var(--appkit-color-info), var(--appkit-color-primary));
+  --appkit-gradient-accent-divider:  linear-gradient(to right, transparent, var(--appkit-color-primary), transparent);
+  --appkit-gradient-page-header:     linear-gradient(to bottom right, rgba(233,30,140,0.10), transparent 60%, transparent);
+  --appkit-gradient-section-cool:    linear-gradient(to bottom right, rgba(56,189,248,0.10), transparent);
+  --appkit-gradient-section-mesh:    radial-gradient(ellipse at top, rgba(233,30,140,0.10), var(--appkit-color-surface), rgba(56,189,248,0.08));
+  --appkit-gradient-accent-banner:   linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info));
+  --appkit-gradient-spotlight:       linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-bg), rgba(56,189,248,0.10));
+  --appkit-gradient-card-indigo:     linear-gradient(to bottom right, rgba(233,30,140,0.10), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-teal:       linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-surface), var(--appkit-color-surface));
+}
+
+/* --- Theme — Cobalt Night ([data-theme="cobalt-night"]) ------------------- */
+/* Cobalt Night: keeps the cobalt primary but pairs it with a deep-blue dark surface */
+[data-theme="cobalt-night"] {
+  --appkit-color-primary:          #5992ff;
+  --appkit-color-primary-500:      #5992ff;
+  --appkit-color-primary-600:      #3570fc;
+  --appkit-color-secondary:        #84e122;
+  --appkit-color-secondary-500:    #84e122;
+
+  --appkit-color-bg:               #111e58;    /* primary-950 */
+  --appkit-color-surface:          #1536b4;    /* primary-800 */
+  --appkit-color-surface-elevated: rgba(21, 54, 180, 0.9);
+  --appkit-color-surface-input:    rgba(24, 49, 142, 0.6);
+
+  --appkit-color-border:           #1343de;    /* primary-700 */
+  --appkit-color-border-subtle:    rgba(24, 49, 142, 0.6);
+
+  --appkit-color-text:             #eef5ff;    /* primary-50 */
+  --appkit-color-text-muted:       #bcd4ff;    /* primary-200 */
+  --appkit-color-text-faint:       #8eb9ff;    /* primary-300 */
+
+  --appkit-color-success:          #4ade80;
+  --appkit-color-success-surface:  rgba(20, 83, 45, 0.3);
+  --appkit-color-warning:          #fbbf24;
+  --appkit-color-warning-surface:  rgba(120, 53, 15, 0.3);
+  --appkit-color-error:            #f87171;
+  --appkit-color-error-surface:    rgba(127, 29, 29, 0.3);
+  --appkit-color-info:             #38bdf8;
+  --appkit-color-info-surface:     rgba(12, 74, 110, 0.3);
+
+  --appkit-color-focus-ring:       #8eb9ff;
+  --appkit-shadow-glow:            0 0 0 1px rgba(89,146,255,0.18), 0 4px 16px -4px rgba(89,146,255,0.30);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(89,146,255,0.18), 0 4px 20px -4px rgba(89,146,255,0.30);
+}
+
+/* --- Theme — Sunset ([data-theme="sunset"]) ------------------------------- */
+/* Sunset: warm amber primary on a deep-rose body — daytime warm palette */
+[data-theme="sunset"] {
+  --appkit-color-primary:          #f59e0b;    /* amber-500 */
+  --appkit-color-primary-500:      #f59e0b;
+  --appkit-color-primary-600:      #d97706;
+  --appkit-color-secondary:        #f43f5e;    /* rose-500 */
+  --appkit-color-secondary-500:    #f43f5e;
+
+  --appkit-color-bg:               #fff7ed;    /* orange-50 */
+  --appkit-color-surface:          #ffffff;
+  --appkit-color-surface-elevated: #ffffff;
+  --appkit-color-surface-input:    #fffbeb;    /* amber-50 */
+
+  --appkit-color-border:           #fed7aa;    /* orange-200 */
+  --appkit-color-border-subtle:    #ffedd5;    /* orange-100 */
+
+  --appkit-color-text:             #431407;    /* orange-950 */
+  --appkit-color-text-muted:       #9a3412;    /* orange-800 */
+  --appkit-color-text-faint:       #c2410c;    /* orange-700 */
+
+  --appkit-color-success:          #16a34a;
+  --appkit-color-success-surface:  #f0fdf4;
+  --appkit-color-warning:          #d97706;
+  --appkit-color-warning-surface:  #fef3c7;
+  --appkit-color-error:            #dc2626;
+  --appkit-color-error-surface:    #fef2f2;
+  --appkit-color-info:             #0284c7;
+  --appkit-color-info-surface:     #f0f9ff;
+
+  --appkit-color-focus-ring:       #f59e0b;
+  --appkit-shadow-glow:            0 0 0 1px rgba(245,158,11,0.18), 0 4px 16px -4px rgba(245,158,11,0.30);
+  --appkit-shadow-glow-pink:       0 0 0 1px rgba(244,63,94,0.18), 0 4px 20px -4px rgba(244,63,94,0.30);
 }
 
 /* --- Typography ----------------------------------------------------------- */

package/dist/ui/DataTable.js

@@ -100,7 +100,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     if (data.length === 0) {
         if (emptyState)
             return _jsx(_Fragment, { children: emptyState });
-        return (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: "appkit-data-table__empty", children: _jsxs(Div, { className: "text-center px-4", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
+        return (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: "appkit-data-table__empty", children: _jsxs(Div, { className: "text-center", padding: "x-md", children: [emptyIcon ?? (_jsx("svg", { className: "mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) })), _jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle ?? noDataTitle }), _jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage ?? noDataDescription })] }) }) }));
     }
     const renderViewToggle = () => {
         if (!showViewToggle)
@@ -136,7 +136,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                     : "none"
                                                 : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
                                             // audit-inline-style-ok: dynamic CSS
-                                            style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                            style: { width: col.width }, onClick: () => col.sortable && handleSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? ("↑") : ("↓")) : (_jsx(Span, { className: "opacity-30", children: "\u2195" })) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                         "appkit-data-table__row",
                                         striped && index % 2 === 1
                                             ? "appkit-data-table__row--striped"
@@ -163,7 +163,7 @@ function DataTableTableView({ columns, paginatedData, keyExtractor, selectable,
                                             : "none"
                                         : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, 
                                     // audit-inline-style-ok: dynamic CSS
-                                    style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { className: "text-zinc-400 dark:text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                    style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
                                 "appkit-data-table__row",
                                 striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
                                 onRowClick ? "appkit-data-table__row--clickable" : "",
@@ -175,10 +175,10 @@ function SelectableCard({ id, selectable, selected, onToggle, children, listMode
     return (_jsxs(Div, { className: "relative group h-full", children: [_jsx(Div, { className: [
                     "absolute z-10",
                     listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2",
-                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx(Div, { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", children: _jsxs(Div, { className: "relative flex items-center justify-center", children: [_jsx("input", { type: "checkbox", className: [
+                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx(Row, { className: "w-6 h-6", surface: "default", align: "center", justify: "center", rounded: "md", shadow: "md", children: _jsxs(Row, { className: "relative", align: "center", justify: "center", children: [_jsx("input", { type: "checkbox", className: [
                                     "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
                                     selected
                                         ? "border-2 border-primary bg-primary"
                                         : "border-2 border-zinc-500 dark:border-slate-400 bg-transparent group-hover:border-primary",
-                                ].join(" "), checked: selected, onChange: (e) => onToggle(id, e.target.checked), "aria-label": "Select item" }), selected && (_jsx("svg", { className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }))] }) }) }), selected && (_jsx(Div, { className: "absolute inset-0 z-[var(--appkit-z-raised)] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none", "aria-hidden": "true" })), children] }));
+                                ].join(" "), checked: selected, onChange: (e) => onToggle(id, e.target.checked), "aria-label": "Select item" }), selected && (_jsx("svg", { className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }))] }) }) }), selected && (_jsx(Div, { className: "absolute inset-0 z-[var(--appkit-z-raised)] ring-2 ring-primary ring-offset-0 pointer-events-none", rounded: "xl", "aria-hidden": "true" })), children] }));
 }

package/dist/ui/components/Anchor.d.ts

@@ -0,0 +1,40 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+/**
+ * Anchor — primitive for **external** links, `mailto:`, and `tel:` URLs.
+ *
+ * Internal Next.js routes go through `<TextLink>` (which wraps `next-intl`'s
+ * `Link`). This primitive is the only place a raw `<a>` is allowed at a
+ * consumer call site — the variant catalogue forbids `<a>` everywhere else.
+ *
+ * The audit will steer call sites to `<TextLink>` vs `<Anchor>` based on the
+ * `href` shape (`http(s)://…`, `mailto:`, `tel:`, `#fragment` → `Anchor`;
+ * everything else → `TextLink`).
+ */
+export type AnchorTone = "default" | "muted" | "brand" | "accent" | "danger" | "success" | "inverse";
+export type AnchorUnderline = "none" | "hover" | "always";
+export type AnchorSize = "xs" | "sm" | "base" | "lg";
+export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    children: ReactNode;
+    /** Colour tone. Defaults to `"brand"`. */
+    tone?: AnchorTone;
+    /** Underline behaviour. Defaults to `"hover"`. */
+    underline?: AnchorUnderline;
+    /** Typography size. */
+    size?: AnchorSize;
+    /**
+     * Treat as an external link. Default is auto-detected from the href shape:
+     *   - `http(s)://` → external
+     *   - `mailto:` / `tel:` / `sms:` → external (but no rel/target rewrite)
+     *   - `#fragment` → same-page
+     * Pass `external={false}` to render an in-app anchor (e.g. `<a href="#…">`).
+     */
+    external?: boolean;
+    /**
+     * Escape hatch for behaviour-coupled utility classes (layout overrides,
+     * state-driven classes like `group`, structural card-link styling).
+     * Variant slots (tone/underline) own the visual styling; this extends them.
+     */
+    className?: string;
+}
+export declare function Anchor({ href, children, tone, underline, size, external, rel, target, className, ...rest }: AnchorProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Anchor.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANCHOR_SIZE_CLS = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+};
+const TONE_CLS = {
+    default: "text-[var(--appkit-color-text)]",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    brand: "text-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary-600)]",
+    accent: "text-[var(--appkit-color-secondary)] hover:text-[var(--appkit-color-secondary-600)]",
+    danger: "text-[var(--appkit-color-error)] hover:text-[var(--appkit-color-error-hover)]",
+    success: "text-[var(--appkit-color-success)]",
+    inverse: "text-[var(--appkit-color-text-on-primary)]",
+};
+const UNDERLINE_CLS = {
+    none: "no-underline",
+    hover: "no-underline hover:underline underline-offset-2",
+    always: "underline underline-offset-2",
+};
+const PROTOCOL_RX = /^(?:https?:|mailto:|tel:|sms:)/i;
+function isExternalShape(href) {
+    return PROTOCOL_RX.test(href);
+}
+function isHttpProtocol(href) {
+    return /^https?:/i.test(href);
+}
+export function Anchor({ href, children, tone = "brand", underline = "hover", size, external, rel, target, className, ...rest }) {
+    const resolvedExternal = external ?? isExternalShape(href);
+    const isHttp = isHttpProtocol(href);
+    const computedTarget = target ?? (resolvedExternal && isHttp ? "_blank" : undefined);
+    const computedRel = rel ??
+        (resolvedExternal && isHttp ? "noopener noreferrer" : undefined);
+    return (_jsx("a", { href: href, target: computedTarget, rel: computedRel, 
+        // audit-variant-ok: Anchor is the catalogued primitive for external
+        // links. Tone + underline come from typed enums; className is the
+        // escape hatch for behaviour-coupled utility classes only.
+        className: `${TONE_CLS[tone]} ${UNDERLINE_CLS[underline]} ${size ? ANCHOR_SIZE_CLS[size] : ""} transition-colors${className ? ` ${className}` : ""}`, ...rest, children: children }));
+}

package/dist/ui/components/Badge.d.ts

@@ -25,10 +25,14 @@ declare const BADGE_CLASSES: {
     readonly secondary: "appkit-badge appkit-badge--secondary";
 };
 export type BadgeVariant = keyof typeof BADGE_CLASSES;
+/** Catalogue size enum for Badge. */
+export type BadgeSize = "xs" | "sm" | "md";
 export interface BadgeProps {
     children: React.ReactNode;
     variant?: BadgeVariant;
+    /** Size preset — defaults to `"sm"`. */
+    size?: BadgeSize;
     className?: string;
 }
-export declare function Badge({ children, variant, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ children, variant, size, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Badge.js

@@ -30,6 +30,11 @@ const BADGE_CLASSES = {
     primary: "appkit-badge appkit-badge--primary",
     secondary: "appkit-badge appkit-badge--secondary",
 };
-export function Badge({ children, variant = "default", className = "", }) {
-    return (_jsx(Span, { className: `${BADGE_CLASSES[variant]} ${className}`, children: children }));
+const BADGE_SIZE_CLASS = {
+    xs: "appkit-badge--size-xs",
+    sm: "appkit-badge--size-sm",
+    md: "appkit-badge--size-md",
+};
+export function Badge({ children, variant = "default", size = "sm", className = "", }) {
+    return (_jsx(Span, { className: `${BADGE_CLASSES[variant]} ${BADGE_SIZE_CLASS[size]} ${className}`, children: children }));
 }

package/dist/ui/components/BaseListingCard.js

@@ -49,6 +49,7 @@ function BaseListingCardInfo({ variant = "grid", className = "", children, }) {
 function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2 left-2", className = "", }) {
     return (_jsx("button", { type: "button", "aria-label": label ?? (selected ? "Deselect" : "Select"), "aria-checked": selected, role: "checkbox", onClick: (e) => {
             e.stopPropagation();
+            // audit-unknown-ok: TS structural escape — MouseEvent
             onSelect?.(e);
         }, className: [
             "absolute z-10 h-4 w-4 rounded flex items-center justify-center",
@@ -70,7 +71,7 @@ function BaseListingCardIconOverlay({ groupIcon, sublistingIcon, position = "top
         const isMediaUrl = icon.startsWith("/media/") || icon.startsWith("http");
         if (isMediaUrl) {
             return (
-            // eslint-disable-next-line @next/next/no-img-element, lir/no-raw-media-elements
+            // eslint-disable-next-line @next/next/no-img-element
             _jsx("img", { src: icon, alt: "", className: "w-5 h-5 rounded-full border border-white/80 shadow-sm bg-white dark:bg-zinc-900 object-cover" }, key));
         }
         return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-white/95 dark:bg-zinc-900/95 shadow-sm leading-none", children: icon }, key));

package/dist/ui/components/Button.d.ts

@@ -22,11 +22,35 @@ declare const UI_BUTTON: {
         readonly lg: "appkit-button--lg";
     };
 };
+type ButtonGap = "none" | "xs" | "sm" | "md" | "lg";
+type ButtonTextSize = "xs" | "sm" | "base" | "lg";
+type ButtonRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+type ButtonPaddingX = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+type ButtonTextColor = "default" | "muted" | "faint" | "primary";
+type ButtonBorder = "none" | "default" | "subtle" | "strong";
+type ButtonPaddingY = "none" | "xs" | "sm" | "md" | "lg";
+type ButtonWeight = "normal" | "medium" | "semibold" | "bold";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof typeof UI_BUTTON.variants;
     size?: keyof typeof UI_BUTTON.sizes;
     isLoading?: boolean;
     children?: React.ReactNode;
+    /** Gap between flex children (icon + label). Defaults to no extra gap. */
+    gap?: ButtonGap;
+    /** Override text size separately from button `size`. Use sparingly — for small chip-buttons in card grids. */
+    textSize?: ButtonTextSize;
+    /** Override horizontal padding separately from button `size` (use for chip / icon-only buttons). */
+    paddingX?: ButtonPaddingX;
+    /** Override vertical padding separately from button `size`. */
+    paddingY?: ButtonPaddingY;
+    /** Override font weight separately from default semibold. */
+    weight?: ButtonWeight;
+    /** Override text colour separately from `variant`. Use for ghost-style buttons that need a muted label. */
+    textColor?: ButtonTextColor;
+    /** Border override. */
+    border?: ButtonBorder;
+    /** Border radius override. */
+    rounded?: ButtonRounded;
     /** Render as the child element (e.g. next/link) with button styling applied */
     asChild?: boolean;
     /**
@@ -36,5 +60,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     action?: ActionDef;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, asChild, action, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, asChild, action, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -4,6 +4,8 @@ import React, { useCallback, useState } from "react";
 import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
+import { surfaceError } from "../../client/api/surface-error";
+import { useToastSafe } from "./Toast";
 function spawnRipple(host, clientX, clientY) {
     const rect = host.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);
@@ -38,6 +40,62 @@ const UI_BUTTON = {
         lg: "appkit-button--lg",
     },
 };
+const BUTTON_GAP_MAP = {
+    none: "",
+    xs: "gap-1",
+    sm: "gap-1.5",
+    md: "gap-2",
+    lg: "gap-3",
+};
+const BUTTON_TEXT_SIZE_MAP = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+};
+const BUTTON_ROUNDED_MAP = {
+    none: "",
+    default: "rounded",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+};
+const BUTTON_PADDING_X_MAP = {
+    none: "",
+    xs: "px-2",
+    sm: "px-3",
+    md: "px-4",
+    lg: "px-5",
+    xl: "px-6",
+};
+const BUTTON_TEXT_COLOR_MAP = {
+    default: "",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    faint: "text-[var(--appkit-color-text-faint)]",
+    primary: "text-[var(--appkit-color-primary)]",
+};
+const BUTTON_BORDER_MAP = {
+    none: "",
+    default: "border border-zinc-200 dark:border-slate-700",
+    subtle: "border border-zinc-100 dark:border-slate-800/60",
+    strong: "border border-zinc-300 dark:border-slate-600",
+};
+const BUTTON_PADDING_Y_MAP = {
+    none: "",
+    xs: "py-1",
+    sm: "py-2",
+    md: "py-3",
+    lg: "py-4",
+};
+const BUTTON_WEIGHT_MAP = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+};
 // Map ActionKind → Button variant (caller can override via explicit variant prop)
 const ACTION_KIND_VARIANT = {
     primary: "primary",
@@ -47,14 +105,47 @@ const ACTION_KIND_VARIANT = {
     link: "ghost",
     chip: "outline",
 };
-export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, asChild = false, action, ...props }) {
+export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, asChild = false, action, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
     // Resolve defaults from action registry
     const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
     const resolvedChildren = children ?? (action ? action.label : undefined);
     const resolvedAriaLabel = props["aria-label"] ?? (action ? (action.ariaLabel ?? action.label) : undefined);
-    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], className);
+    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], gap ? BUTTON_GAP_MAP[gap] : "", textSize ? BUTTON_TEXT_SIZE_MAP[textSize] : "", paddingX ? BUTTON_PADDING_X_MAP[paddingX] : "", paddingY ? BUTTON_PADDING_Y_MAP[paddingY] : "", weight ? BUTTON_WEIGHT_MAP[weight] : "", textColor ? BUTTON_TEXT_COLOR_MAP[textColor] : "", border ? BUTTON_BORDER_MAP[border] : "", rounded ? BUTTON_ROUNDED_MAP[rounded] : "", className);
     const userOnClick = props.onClick;
+    const toast = useToastSafe();
+    // Wrap the user's onClick so async rejections never escape silently. Errors
+    // route through surfaceError (toast / inline / report). Sync errors re-throw
+    // so framework error boundaries still see them; only Promise rejections are
+    // intercepted (we can't await sync handlers from inside React's event path).
+    const wrapAsync = useCallback((fn) => (event) => {
+        if (!fn)
+            return;
+        // audit-unknown-ok: ReactElement props — generic component props
+        let returned;
+        try {
+            returned = fn(event);
+        }
+        catch (err) {
+            // Sync throw: route through surfaceError if possible, else re-throw
+            if (toast) {
+                surfaceError(err, { showToast: toast.showToast });
+                return;
+            }
+            throw err;
+        }
+        if (returned && typeof returned.then === "function") {
+            // audit-unknown-ok: error-handler entry point — accepts thrown values of any shape
+            returned.catch((err) => {
+                if (toast) {
+                    surfaceError(err, { showToast: toast.showToast });
+                    return;
+                }
+                // No toast provider mounted — let the error bubble.
+                console.error("[Button] unhandled async onClick rejection", err);
+            });
+        }
+    }, [toast]);
     const handleClick = useCallback((event) => {
         if (!disabled && !isLoading) {
             spawnRipple(event.currentTarget, event.clientX, event.clientY);
@@ -64,13 +155,14 @@ export function Button({ variant, size = "md", className = "", isLoading = false
             setConfirmOpen(true);
             return;
         }
-        userOnClick?.(event);
-    }, [disabled, isLoading, action, userOnClick]);
+        wrapAsync(userOnClick)(event);
+    }, [disabled, isLoading, action, userOnClick, wrapAsync]);
     const handleConfirm = useCallback((event) => {
         setConfirmOpen(false);
-        userOnClick?.(event);
-    }, [userOnClick]);
+        wrapAsync(userOnClick)(event);
+    }, [userOnClick, wrapAsync]);
     if (asChild && React.isValidElement(resolvedChildren)) {
+        // audit-unknown-ok: ReactElement props — generic component props
         const child = resolvedChildren;
         return React.cloneElement(child, {
             ...props,
@@ -88,10 +180,10 @@ export function Button({ variant, size = "md", className = "", isLoading = false
                     background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
                 }, onClick: (e) => { if (e.target === e.currentTarget)
                     setConfirmOpen(false); }, children: _jsxs("div", { style: {
-                        background: "var(--appkit-surface, #fff)",
+                        background: "var(--appkit-color-surface)",
                         borderRadius: "var(--appkit-radius-lg, 12px)",
                         padding: "1.5rem",
                         maxWidth: "380px", width: "calc(100% - 2rem)",
                         boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
-                    }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-muted, #6b7280)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body)] }));
+                    }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body)] }));
 }

package/dist/ui/components/Card.d.ts

@@ -1,19 +1,22 @@
 import React from "react";
 import type { SurfaceProps } from "./surface-tokens";
 type CardAnimate = "hoverLift" | "pressScale" | "hoverScale" | "both";
-type CardVariant = "flat" | "outlined" | "elevated" | "default" | "primary" | "bordered" | "interactive" | "glass" | "gradient-indigo" | "gradient-teal" | "gradient-amber" | "gradient-rose" | "stat-indigo" | "stat-teal" | "stat-amber" | "stat-rose" | "stat-emerald";
+type CardVariant = "flat" | "outlined" | "elevated" | "default" | "primary" | "bordered" | "interactive" | "glass" | "gradient-indigo" | "gradient-teal" | "gradient-amber" | "gradient-rose" | "stat-indigo" | "stat-teal" | "stat-amber" | "stat-rose" | "stat-emerald" | "chat-bubble" | "chat-bubble-mine" | "chat-bubble-theirs";
 type CardPadding = "none" | "sm" | "md" | "lg";
+export type CardSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export interface CardProps extends SurfaceProps {
     children: React.ReactNode;
     variant?: CardVariant;
     padding?: CardPadding;
+    /** Vertical spacing between top-level children — wraps content in a stack. */
+    spacing?: CardSpacing;
     hover?: boolean;
     animate?: CardAnimate;
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Card({ children, variant, padding, hover, animate, surface, rounded, border, shadow, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, padding, spacing, hover, animate, surface, rounded, border, shadow, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export interface CardSectionProps {
     children: React.ReactNode;
     className?: string;

package/dist/ui/components/Card.js

@@ -23,6 +23,9 @@ const UI_CARD = {
         "stat-amber": "appkit-card--stat-amber",
         "stat-rose": "appkit-card--stat-rose",
         "stat-emerald": "appkit-card--stat-emerald",
+        "chat-bubble": "appkit-card--chat-bubble",
+        "chat-bubble-mine": "appkit-card--chat-bubble-mine",
+        "chat-bubble-theirs": "appkit-card--chat-bubble-theirs",
     },
     padding: {
         none: "",
@@ -31,12 +34,21 @@ const UI_CARD = {
         lg: "appkit-card--pad-lg",
     },
 };
-export function Card({ children, variant = "flat", padding = "md", hover = false, animate, surface, rounded, border, shadow, className = "", style, onClick, }) {
+const CARD_SPACING_MAP = {
+    none: "",
+    xs: "space-y-1",
+    sm: "space-y-2",
+    md: "space-y-4",
+    lg: "space-y-6",
+    xl: "space-y-8",
+};
+export function Card({ children, variant = "flat", padding = "md", spacing, hover = false, animate, surface, rounded, border, shadow, className = "", style, onClick, }) {
     const reduced = useReducedMotion();
     const cls = [
         UI_CARD.base,
         UI_CARD.variants[variant],
         UI_CARD.padding[padding],
+        spacing ? CARD_SPACING_MAP[spacing] : "",
         hover ? "appkit-card--hoverable" : "",
         onClick ? "appkit-card--clickable" : "",
         buildSurfaceClasses({ surface, rounded, border, shadow }),

package/dist/ui/components/Card.style.css

@@ -188,3 +188,36 @@
 .dark .appkit-card__footer {
   border-top-color: var(--appkit-color-border);
 }
+
+/* Card — chat-bubble variants (mine/theirs for messages feature) */
+.appkit-card--chat-bubble {
+  display: inline-block;
+  max-width: 80%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  border: 1px solid var(--appkit-color-border);
+  background-color: var(--appkit-color-surface);
+}
+.appkit-card--chat-bubble-mine {
+  display: inline-block;
+  max-width: 80%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem 1rem 0 1rem;
+  background-color: var(--appkit-color-primary);
+  color: var(--appkit-color-text-on-primary);
+  margin-left: auto;
+}
+.appkit-card--chat-bubble-theirs {
+  display: inline-block;
+  max-width: 80%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem 1rem 1rem 0;
+  background-color: var(--appkit-color-surface-elevated);
+  border: 1px solid var(--appkit-color-border);
+}
+
+/* Badge size variants — catalogue tokens. */
+.appkit-badge--size-xs { font-size: 0.625rem; padding: 0.0625rem 0.375rem; }
+.appkit-badge--size-sm { font-size: 0.75rem;  padding: 0.125rem  0.5rem; }
+.appkit-badge--size-md { font-size: 0.875rem; padding: 0.25rem   0.625rem; }
+