@mohasinac/appkit 2.7.49 → 2.7.50

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/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/index.d.ts

@@ -50,6 +50,10 @@ export type { StatusBadgeProps, StatusBadgeStatus, BadgeOrderStatus, BadgePaymen
 export { StatusBadge } from "./components/StatusBadge";
 export type { ModalProps } from "./components/Modal";
 export { Modal, ModalFooter } from "./components/Modal";
+export type { QuickCreateModalProps } from "./components/QuickCreateModal";
+export { QuickCreateModal } from "./components/QuickCreateModal";
+export type { VacationBannerProps } from "./components/VacationBanner";
+export { VacationBanner } from "./components/VacationBanner";
 export type { UnsavedChangesModalProps, UnsavedChangesLabels, } from "./components/UnsavedChangesModal";
 export { UnsavedChangesModal } from "./components/UnsavedChangesModal";
 export type { LoginRequiredModalProps } from "./components/LoginRequiredModal";
@@ -187,6 +191,10 @@ export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from ".
 export { BulkActionBar } from "./components/BulkActionBar";
 export type { BulkActionsBarProps, BulkAction } from "./components/BulkActionsBar";
 export { BulkActionsBar } from "./components/BulkActionsBar";
+export type { StickyBottomBarProps } from "./components/StickyBottomBar";
+export { StickyBottomBar } from "./components/StickyBottomBar";
+export type { ClaimCouponButtonProps } from "./components/ClaimCouponButton";
+export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
 export { FlowDiagram } from "./components/FlowDiagram";
 export type { BaseListingCardRootProps, BaseListingCardHeroProps, BaseListingCardInfoProps, BaseListingCardCheckboxProps, } from "./components/BaseListingCard";

package/dist/ui/index.js

@@ -29,6 +29,8 @@ export { Progress, IndeterminateProgress } from "./components/Progress";
 export { Pagination } from "./components/Pagination";
 export { StatusBadge } from "./components/StatusBadge";
 export { Modal, ModalFooter } from "./components/Modal";
+export { QuickCreateModal } from "./components/QuickCreateModal";
+export { VacationBanner } from "./components/VacationBanner";
 export { UnsavedChangesModal } from "./components/UnsavedChangesModal";
 export { LoginRequiredModal } from "./components/LoginRequiredModal";
 export { Drawer } from "./components/Drawer";
@@ -99,6 +101,8 @@ export { DetailViewShell } from "./components/DetailViewShell";
 export { StackedViewShell } from "./components/StackedViewShell";
 export { BulkActionBar } from "./components/BulkActionBar";
 export { BulkActionsBar } from "./components/BulkActionsBar";
+export { StickyBottomBar } from "./components/StickyBottomBar";
+export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
 export { default as ImageGallery } from "./components/ImageGallery";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.49",
+  "version": "2.7.50",
   "license": "MIT",
   "publishConfig": {
     "access": "public"