@mohasinac/appkit 2.7.49 → 2.7.52

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

@@ -81,41 +81,49 @@
   gap: 0.625rem;
 }
 
-.appkit-button--primary {
+/* Filled variants — colour rules use a chained-class selector (specificity
+   (0,2,0)) so they beat single-class Tailwind text utilities (0,1,0). This
+   guarantees contrast-safe foregrounds even when call-sites add a stray
+   `text-*` className. Tailwind utilities still apply for non-color props
+   like `text-xs` (font-size). See plan §4 "Defensive layer" + the global
+   sweep request 2026-05-18. */
+
+.appkit-button.appkit-button--primary {
   background: var(--appkit-color-primary-700);
   color: var(--appkit-color-text-on-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
-.appkit-button--primary:hover:not(:disabled) {
+.appkit-button.appkit-button--primary:hover:not(:disabled) {
   background: var(--appkit-color-primary-800);
 }
 
-.dark .appkit-button--primary {
+.dark .appkit-button.appkit-button--primary {
   background: var(--appkit-color-secondary);
+  color: var(--appkit-color-text-on-primary);
 }
 
-.dark .appkit-button--primary:hover:not(:disabled) {
+.dark .appkit-button.appkit-button--primary:hover:not(:disabled) {
   background: var(--appkit-color-secondary-400);
 }
 
-.appkit-button--secondary {
+.appkit-button.appkit-button--secondary {
   background: var(--appkit-color-surface);
   border-color: var(--appkit-color-primary-700);
   color: var(--appkit-color-primary-700);
 }
 
-.appkit-button--secondary:hover:not(:disabled) {
+.appkit-button.appkit-button--secondary:hover:not(:disabled) {
   background: color-mix(in srgb, var(--appkit-color-primary-700) 8%, transparent);
 }
 
-.dark .appkit-button--secondary {
+.dark .appkit-button.appkit-button--secondary {
   background: transparent;
   border-color: var(--appkit-color-secondary);
   color: var(--appkit-color-secondary);
 }
 
-.dark .appkit-button--secondary:hover:not(:disabled) {
+.dark .appkit-button.appkit-button--secondary:hover:not(:disabled) {
   background: color-mix(in srgb, var(--appkit-color-secondary) 12%, transparent);
 }
 
@@ -156,21 +164,21 @@
   background: rgba(30, 41, 59, 0.5);
 }
 
-.appkit-button--danger {
+.appkit-button.appkit-button--danger {
   background: var(--appkit-color-error);
   color: var(--appkit-color-text-on-primary);
 }
 
-.appkit-button--danger:hover:not(:disabled) {
+.appkit-button.appkit-button--danger:hover:not(:disabled) {
   background: var(--appkit-color-error-hover);
 }
 
-.appkit-button--warning {
+.appkit-button.appkit-button--warning {
   background: var(--appkit-color-warning);
   color: var(--appkit-color-text-on-primary);
 }
 
-.appkit-button--warning:hover:not(:disabled) {
+.appkit-button.appkit-button--warning:hover:not(:disabled) {
   background: var(--appkit-color-amber-400);
 }
 

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

@@ -0,0 +1,28 @@
+/**
+ * ClaimCouponButton — surfaced anywhere a user wins or earns a coupon
+ * (SpinWheel "YOU WON" panel, raffle winner page, prize-draw reveal modal,
+ * promotional inserts).
+ *
+ * Behaviour:
+ *   1. If the visitor is not signed in, opens the standard LoginRequiredModal —
+ *      no coupon is copied or saved. The wallet is per-user, so anonymous
+ *      claims would be lost.
+ *   2. POST `/api/user/coupons/claim` to persist the claim into the user's
+ *      wallet (idempotent — second claim is a no-op).
+ *   3. Copy the code to the clipboard so the user can paste it at checkout.
+ *
+ * No more cart deep-link — the wallet ("My Coupons" page) is the single home
+ * for claimed coupons, and the user applies them from there at checkout.
+ */
+import React from "react";
+export interface ClaimCouponButtonProps {
+    couponCode: string;
+    /** Optional server-side claim handler — overrides the default wallet POST. */
+    onClaim?: (code: string) => Promise<void> | void;
+    /** Override the button label. */
+    label?: string;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    source?: "manual" | "promo" | "spin" | "raffle" | "prize-draw";
+}
+export declare function ClaimCouponButton({ couponCode, onClaim, label, className, size, source, }: ClaimCouponButtonProps): React.JSX.Element;

package/dist/ui/components/ClaimCouponButton.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ClaimCouponButton — surfaced anywhere a user wins or earns a coupon
+ * (SpinWheel "YOU WON" panel, raffle winner page, prize-draw reveal modal,
+ * promotional inserts).
+ *
+ * Behaviour:
+ *   1. If the visitor is not signed in, opens the standard LoginRequiredModal —
+ *      no coupon is copied or saved. The wallet is per-user, so anonymous
+ *      claims would be lost.
+ *   2. POST `/api/user/coupons/claim` to persist the claim into the user's
+ *      wallet (idempotent — second claim is a no-op).
+ *   3. Copy the code to the clipboard so the user can paste it at checkout.
+ *
+ * No more cart deep-link — the wallet ("My Coupons" page) is the single home
+ * for claimed coupons, and the user applies them from there at checkout.
+ */
+import { useCallback, useState } from "react";
+import { Button } from "./Button";
+import { LoginRequiredModal } from "./LoginRequiredModal";
+import { useSession } from "../../react/contexts/SessionContext";
+import { useToast } from "./Toast";
+async function postClaim(couponCode, source) {
+    if (typeof fetch === "undefined")
+        return false;
+    try {
+        const res = await fetch("/api/user/coupons/claim", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify({ couponCode, source }),
+        });
+        return res.ok;
+    }
+    catch {
+        return false;
+    }
+}
+async function copyToClipboard(text) {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        return false;
+    }
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+export function ClaimCouponButton({ couponCode, onClaim, label, className, size = "md", source = "manual", }) {
+    const { user, loading } = useSession();
+    const { showToast } = useToast();
+    const [busy, setBusy] = useState(false);
+    const [claimed, setClaimed] = useState(false);
+    const [loginOpen, setLoginOpen] = useState(false);
+    const handleClick = useCallback(async () => {
+        if (busy || !couponCode)
+            return;
+        if (loading)
+            return;
+        if (!user) {
+            setLoginOpen(true);
+            return;
+        }
+        setBusy(true);
+        try {
+            const ok = onClaim != null
+                ? (await Promise.resolve(onClaim(couponCode)), true)
+                : await postClaim(couponCode, source);
+            if (!ok) {
+                showToast("Could not save coupon. Please try again.", "error");
+                return;
+            }
+            await copyToClipboard(couponCode);
+            setClaimed(true);
+            showToast(`${couponCode} saved to your coupons.`, "success");
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [busy, couponCode, loading, onClaim, showToast, source, user]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "primary", size: size, onClick: handleClick, disabled: busy || !couponCode || loading, className: className, children: busy
+                    ? "Saving…"
+                    : claimed
+                        ? "Saved to My Coupons"
+                        : (label ?? "Claim coupon") }), _jsx(LoginRequiredModal, { isOpen: loginOpen, onClose: () => setLoginOpen(false), message: "Sign in to save coupons to your wallet." })] }));
+}

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

@@ -3,6 +3,11 @@ export interface ListingToolbarSortOption {
     value: string;
     label: string;
 }
+export interface ListingToolbarToggle {
+    label: string;
+    active: boolean;
+    onChange: (next: boolean) => void;
+}
 export interface ListingToolbarLabels {
     search?: string;
     filters?: string;
@@ -48,10 +53,12 @@ export interface ListingToolbarProps {
     bulkTotalCount?: number;
     onBulkSelectAll?: () => void;
     onBulkClear?: () => void;
+    /** Pill-style filter toggles rendered between view controls and extra */
+    toggles?: ListingToolbarToggle[];
     /** Any extra action buttons placed after the view toggle */
     extra?: React.ReactNode;
     /** Overridable text labels for i18n */
     labels?: ListingToolbarLabels;
     className?: string;
 }
-export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, toggles, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingToolbar.js

@@ -18,7 +18,7 @@ const DEFAULT_LABELS = {
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
 const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white";
 const VIEW_BTN_INACTIVE = "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400";
-export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, extra, labels, className = "", }) {
+export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const handleKeyDown = (e) => {
         if (onSearchKeyDown) {
@@ -31,5 +31,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-500 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), extra] })] }) }));
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-500 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
+                                    : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface QuickCreateModalProps<T = unknown> {
+    isOpen: boolean;
+    title: string;
+    onSave: () => Promise<T> | T;
+    onSaved?: (doc: T) => void;
+    onCancel: () => void;
+    children: React.ReactNode;
+    fullPageHref?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+    isSaving?: boolean;
+    saveDisabled?: boolean;
+}
+export declare function QuickCreateModal<T = unknown>({ isOpen, title, onSave, onSaved, onCancel, children, fullPageHref, saveLabel, cancelLabel, isSaving, saveDisabled, }: QuickCreateModalProps<T>): React.ReactPortal | null;

package/dist/ui/components/QuickCreateModal.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import { Button } from "./Button";
+import { Div } from "./Div";
+import { Heading } from "./Typography";
+import { Row } from "./Layout";
+export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, children, fullPageHref, saveLabel = "Save", cancelLabel = "Cancel", isSaving = false, saveDisabled = false, }) {
+    const [busy, setBusy] = React.useState(false);
+    const titleId = React.useId();
+    const panelRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handler = (e) => {
+            if (e.key === "Escape" && !busy)
+                onCancel();
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [isOpen, onCancel, busy]);
+    const handleSave = async () => {
+        if (saveDisabled || busy)
+            return;
+        setBusy(true);
+        try {
+            const doc = await onSave();
+            onSaved?.(doc);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (!isOpen || typeof document === "undefined")
+        return null;
+    const saving = busy || isSaving;
+    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx("a", { href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
+}

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

@@ -0,0 +1,84 @@
+.appkit-quick-create-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-modal, 1000);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.appkit-quick-create-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.45);
+}
+
+.appkit-quick-create-modal__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--appkit-color-surface, #ffffff);
+  color: var(--appkit-color-foreground, inherit);
+  width: 100%;
+  max-width: 560px;
+  margin: auto;
+  max-height: 92vh;
+  border-radius: 0.75rem;
+  box-shadow: var(--appkit-shadow-lg, 0 20px 40px rgb(0 0 0 / 0.25));
+  outline: none;
+}
+
+.appkit-quick-create-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.appkit-quick-create-modal__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 1.25rem;
+}
+
+.appkit-quick-create-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__full-link {
+  font-size: 0.875rem;
+  color: var(--appkit-color-primary, #6366f1);
+  text-decoration: underline;
+}
+
+.appkit-quick-create-modal__actions {
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .appkit-quick-create-modal {
+    align-items: flex-end;
+  }
+  .appkit-quick-create-modal__panel {
+    max-width: 100%;
+    margin: 0;
+    border-radius: 0.75rem 0.75rem 0 0;
+    max-height: 92vh;
+  }
+}
+
+[data-theme="dark"] .appkit-quick-create-modal__panel {
+  background: var(--appkit-color-surface-dark, #1e293b);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * StickyBottomBar — fixed-bottom action bar that sits above the mobile
+ * BottomNavLayout (when present) and below any modals.
+ *
+ * Reads `--bottom-nav-height` written by `BottomNavLayout` (4rem when the
+ * navbar is rendered below `lg`, 0px otherwise). Falls back to 0px when the
+ * variable is unset so the bar still pins to the viewport bottom on routes
+ * that don't render a bottom nav.
+ *
+ * z-index sits above the navbar (`z-40`) but below modal overlays.
+ */
+import React from "react";
+export interface StickyBottomBarProps {
+    children: React.ReactNode;
+    /** Optional extra className appended to the bar wrapper. */
+    className?: string;
+    /** Hide on `lg` and up. Defaults to `true` — matches BottomNavLayout's responsive scope. */
+    mobileOnly?: boolean;
+    /** Test id passthrough. */
+    "data-testid"?: string;
+}
+export declare function StickyBottomBar({ children, className, mobileOnly, "data-testid": testId, }: StickyBottomBarProps): React.JSX.Element;

package/dist/ui/components/StickyBottomBar.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BAR_STYLE = {
+    bottom: "var(--bottom-nav-height, 0px)",
+    zIndex: 45,
+};
+export function StickyBottomBar({ children, className, mobileOnly = true, "data-testid": testId, }) {
+    return (_jsx("div", { 
+        // eslint-disable-next-line lir/no-inline-static-style
+        style: BAR_STYLE, "data-testid": testId, className: [
+            "fixed left-0 right-0",
+            mobileOnly ? "lg:hidden" : "",
+            "bg-white/95 dark:bg-slate-950/95 backdrop-blur-md",
+            "border-t border-zinc-200 dark:border-slate-800",
+            "shadow-2xl pb-safe",
+            className ?? "",
+        ]
+            .filter(Boolean)
+            .join(" "), children: children }));
+}

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

@@ -0,0 +1,11 @@
+export interface VacationBannerProps {
+    storeName?: string;
+    message?: string;
+    returnDate?: Date | string;
+    className?: string;
+}
+/**
+ * S-STORE-6-A — Vacation-mode banner shown on product detail + checkout
+ * pages when the seller has paused new orders.
+ */
+export declare function VacationBanner({ storeName, message, returnDate, className, }: VacationBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/VacationBanner.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert } from "./Alert";
+/**
+ * S-STORE-6-A — Vacation-mode banner shown on product detail + checkout
+ * pages when the seller has paused new orders.
+ */
+export function VacationBanner({ storeName, message, returnDate, className, }) {
+    const formattedDate = returnDate &&
+        new Date(returnDate).toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+    return (_jsx(Alert, { variant: "warning", className: className, children: _jsxs("div", { className: "text-sm", children: [_jsx("strong", { children: storeName ? `${storeName} is on vacation` : "Store is on vacation" }), message ? _jsxs("span", { children: [" \u2014 ", message] }) : null, formattedDate ? _jsxs("span", { children: [" Returns ", formattedDate, "."] }) : null, _jsx("div", { className: "text-xs opacity-80 mt-1", children: "New orders are paused; you can still wishlist items." })] }) }));
+}

package/dist/ui/components/__tests__/BulkActionBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/__tests__/BulkActionBar.test.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { BulkActionBar } from "../BulkActionBar";
+const actions = [
+    { id: "publish", label: "Publish", onClick: vi.fn() },
+    { id: "delete", label: "Delete", variant: "danger", onClick: vi.fn() },
+];
+describe("BulkActionBar", () => {
+    it("renders nothing when selectedCount is 0", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 0, actions: actions }));
+        expect(screen.queryByTestId("bulk-action-bar")).toBeNull();
+    });
+    it("renders the bar when selectedCount > 0", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 3, actions: actions }));
+        expect(screen.getByTestId("bulk-action-bar")).toBeTruthy();
+    });
+    it("shows the selected count in the count pill", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 5, actions: actions }));
+        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("5");
+    });
+    it("calls onClearSelection when the count pill button is clicked", () => {
+        const onClear = vi.fn();
+        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, onClearSelection: onClear }));
+        fireEvent.click(screen.getByRole("button", { name: /clear selection/i }));
+        expect(onClear).toHaveBeenCalledOnce();
+    });
+    it("renders no action buttons when actions array is empty", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: [] }));
+        expect(screen.queryByRole("button", { name: /apply/i })).toBeNull();
+    });
+    it("renders the picker trigger and apply button when actions are provided", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        // Apply button must exist
+        expect(screen.getByRole("button", { name: /apply/i })).toBeTruthy();
+        // Picker trigger has aria-haspopup="listbox"
+        expect(screen.getByRole("button", { expanded: false })).toBeTruthy();
+    });
+    it("opens the action picker on trigger click", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        const trigger = screen.getByRole("button", { expanded: false });
+        fireEvent.click(trigger);
+        // Trigger now has aria-expanded="true"
+        expect(screen.getByRole("button", { expanded: true })).toBeTruthy();
+    });
+    it("selects an action when an option is clicked and closes the picker", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        // Open picker
+        const trigger = screen.getByRole("button", { expanded: false });
+        fireEvent.click(trigger);
+        // Trigger is expanded
+        expect(trigger.getAttribute("aria-expanded")).toBe("true");
+        // Click Delete option
+        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
+        // Picker should close — aria-expanded returns to false
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    });
+    it("calls the selected action's onClick when Apply is clicked", () => {
+        const publishFn = vi.fn();
+        const actionsWithFns = [
+            { id: "publish", label: "Publish", onClick: publishFn },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
+        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+        expect(publishFn).toHaveBeenCalledOnce();
+    });
+    it("executes the newly selected action when a different option is chosen then Apply clicked", () => {
+        const publishFn = vi.fn();
+        const deleteFn = vi.fn();
+        const actionsWithFns = [
+            { id: "publish", label: "Publish", onClick: publishFn },
+            { id: "delete", label: "Delete", variant: "danger", onClick: deleteFn },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
+        // Select Delete via picker
+        fireEvent.click(screen.getByRole("button", { expanded: false }));
+        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
+        // Apply
+        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+        expect(deleteFn).toHaveBeenCalledOnce();
+        expect(publishFn).not.toHaveBeenCalled();
+    });
+    it("disables the apply button when the selected action is disabled", () => {
+        const disabledActions = [
+            { id: "archive", label: "Archive", onClick: vi.fn(), disabled: true },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: disabledActions }));
+        const applyBtn = screen.getByRole("button", { name: /apply/i });
+        expect(applyBtn.disabled).toBe(true);
+    });
+    it("uses custom labels", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, labels: { apply: "Run", selected: "chosen" } }));
+        expect(screen.getByRole("button", { name: /run/i })).toBeTruthy();
+        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("chosen");
+    });
+});

package/dist/ui/components/__tests__/ListingToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};