@mohasinac/appkit 2.7.57 → 2.7.58

package/dist/ui/components/SideDrawer.js

@@ -2,11 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useCallback } from "react";
 import { useTranslations } from "next-intl";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button } from "./Button";
 import { Row } from "./Layout";
 import { Heading, Span } from "./Typography";
 import { useSwipe } from "../../react";
 import { Text } from "./Typography";
+import { SPRING_SNAPPY } from "../../tokens/motion";
 const UI_SIDE_DRAWER = {
     backdrop: "appkit-side-drawer__backdrop",
     root: "appkit-side-drawer",
@@ -142,11 +144,11 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
             : { onSwipeRight: () => attemptClose() }),
         minSwipeDistance: 60,
     });
-    if (!isOpen)
-        return null;
+    const reduced = useReducedMotion();
     const positionClass = side === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true" }), _jsxs("div", { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
-                            UI_SIDE_DRAWER.header,
-                            UI_SIDE_DRAWER.headerMode[mode],
-                        ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] }));
+    const slideX = side === "left" ? "-100%" : "100%";
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
+                                UI_SIDE_DRAWER.header,
+                                UI_SIDE_DRAWER.headerMode[mode],
+                            ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }));
 }

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

@@ -21,4 +21,4 @@ export interface SideModalProps {
  *  - backdrop click closes panel
  *  - role="dialog" + aria-modal + aria-labelledby
  */
-export declare function SideModal({ isOpen, onClose, title, side, children, className, }: SideModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SideModal({ isOpen, onClose, title, side, children, className, }: SideModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SideModal.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button, Div, Heading } from "..";
+import { SPRING_SNAPPY } from "../../tokens/motion";
 /**
  * SideModal — slides in from the right (or left) on desktop (60 vw),
  * full-screen drawer on mobile (< sm breakpoint).
@@ -48,13 +50,13 @@ export function SideModal({ isOpen, onClose, title, side = "right", children, cl
             document.body.style.overflow = "";
         };
     }, [isOpen]);
-    if (!isOpen)
-        return null;
-    return (_jsxs(Div, { className: "appkit-side-modal", "aria-hidden": !isOpen, children: [_jsx(Div, { className: "appkit-side-modal__backdrop", onClick: onClose, "aria-hidden": "true" }), _jsxs(Div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId.current : undefined, className: [
-                    "appkit-side-modal__panel",
-                    `appkit-side-modal__panel--${side}`,
-                    className,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-neutral-900 dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] }));
+    const reduced = useReducedMotion();
+    const slideX = side === "left" ? "-100%" : "100%";
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(Div, { className: "appkit-side-modal", "aria-hidden": !isOpen, children: [_jsx(motion.div, { className: "appkit-side-modal__backdrop", onClick: onClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId.current : undefined, className: [
+                        "appkit-side-modal__panel",
+                        `appkit-side-modal__panel--${side}`,
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-neutral-900 dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
 }

package/dist/ui/components/StackedViewShell.js

@@ -33,5 +33,10 @@ export function StackedViewShell({ title, labels = {},
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 portal, renderHeader, sections = [], isEmpty = false, renderEmpty, overlays, className = "", }) {
     const displayTitle = title ?? labels?.title;
-    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, isEmpty && renderEmpty ? (renderEmpty()) : (_jsx(_Fragment, { children: sections.map((slot, i) => (_jsx(React.Fragment, { children: resolveSlot(slot) }, i))) })), overlays] }));
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, isEmpty && renderEmpty ? (renderEmpty()) : (_jsx(_Fragment, { children: sections.map((slot, i) => {
+                    const resolved = resolveSlot(slot);
+                    if (resolved == null)
+                        return null;
+                    return _jsx(React.Fragment, { children: resolved }, i);
+                }) })), overlays] }));
 }

package/dist/ui/components/Toast.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button } from "./Button";
 import { Text } from "./Typography";
+import { SPRING_SNAPPY } from "../../tokens/motion";
 const ToastContext = React.createContext(undefined);
 function buildToastId() {
     return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
@@ -47,14 +49,15 @@ export function ToastProvider({ children, position = "top-right", }) {
     }, [hideToast]);
     return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": "toast-container", className: [UI_TOAST.container, UI_TOAST.positions[position]]
                     .filter(Boolean)
-                    .join(" "), "data-section": "toast-div-623", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) })] }));
+                    .join(" "), "data-section": "toast-div-623", children: _jsx(AnimatePresence, { mode: "popLayout", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) }) })] }));
 }
 function ToastRow({ toast, onClose, }) {
+    const reduced = useReducedMotion();
     const iconMap = {
         success: _jsx("span", { "aria-hidden": "true", children: "\u2713" }),
         error: _jsx("span", { "aria-hidden": "true", children: "!" }),
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
     };
-    return (_jsxs("div", { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), toast.action && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => { toast.action.onClick(); onClose(toast.id); }, className: "min-h-0 shrink-0 px-2 py-1 font-semibold underline", children: toast.action.label })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
+    return (_jsxs(motion.div, { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), layout: true, initial: reduced ? false : { opacity: 0, x: 24, scale: 0.95 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 24, scale: 0.95 }, transition: SPRING_SNAPPY, "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), toast.action && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => { toast.action.onClick(); onClose(toast.id); }, className: "min-h-0 shrink-0 px-2 py-1 font-semibold underline", children: toast.action.label })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

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

@@ -1,19 +1,59 @@
 import React from "react";
+declare const TYPOGRAPHY: {
+    readonly headingLevel: {
+        readonly 1: "appkit-heading--h1";
+        readonly 2: "appkit-heading--h2";
+        readonly 3: "appkit-heading--h3";
+        readonly 4: "appkit-heading--h4";
+        readonly 5: "appkit-heading--h5";
+        readonly 6: "appkit-heading--h6";
+    };
+    readonly textSize: {
+        readonly xs: "appkit-text--xs";
+        readonly sm: "appkit-text--sm";
+        readonly base: "appkit-text--base";
+        readonly lg: "appkit-text--lg";
+        readonly xl: "appkit-text--xl";
+    };
+    readonly textWeight: {
+        readonly normal: "appkit-font--normal";
+        readonly medium: "appkit-font--medium";
+        readonly semibold: "appkit-font--semibold";
+        readonly bold: "appkit-font--bold";
+    };
+    readonly colorVariant: {
+        readonly primary: "appkit-color--primary";
+        readonly secondary: "appkit-color--secondary";
+        readonly muted: "appkit-color--muted";
+        readonly faint: "appkit-color--faint";
+        readonly error: "appkit-color--error";
+        readonly danger: "appkit-color--error";
+        readonly success: "appkit-color--success";
+        readonly warning: "appkit-color--warning";
+        readonly info: "appkit-color--info";
+        readonly none: "";
+        readonly inherit: "";
+        readonly accent: "appkit-color--accent";
+    };
+};
+export type ColorVariant = keyof typeof TYPOGRAPHY.colorVariant;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: "primary" | "secondary" | "muted" | "none";
+    color?: ColorVariant;
     children: React.ReactNode;
 }
-export declare function Heading({ level, variant, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ level, variant, color, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     variant?: "primary" | "secondary" | "muted" | "error" | "success" | "none";
+    color?: ColorVariant;
     size?: "xs" | "sm" | "base" | "lg" | "xl";
     weight?: "normal" | "medium" | "semibold" | "bold";
     /** Override the rendered element. Defaults to `p`. */
     as?: React.ElementType;
     children: React.ReactNode;
 }
-export declare function Text({ variant, size, weight, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function Text({ variant, color, size, weight, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
     children: React.ReactNode;
@@ -42,9 +82,10 @@ export declare function Caption({ variant, className, children, ...props }: Capt
 interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Colour variant. "inherit" (default) applies no colour class. */
     variant?: "inherit" | "primary" | "secondary" | "muted" | "error" | "success" | "accent";
+    color?: ColorVariant;
     size?: "xs" | "sm" | "base" | "lg" | "xl";
     weight?: "normal" | "medium" | "semibold" | "bold";
     children?: React.ReactNode;
 }
-export declare function Span({ variant, size, weight, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
+export declare function Span({ variant, color, size, weight, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Typography.js

@@ -25,30 +25,36 @@ const TYPOGRAPHY = {
         primary: "appkit-color--primary",
         secondary: "appkit-color--secondary",
         muted: "appkit-color--muted",
+        faint: "appkit-color--faint",
         error: "appkit-color--error",
+        danger: "appkit-color--error",
         success: "appkit-color--success",
+        warning: "appkit-color--warning",
+        info: "appkit-color--info",
         none: "",
         inherit: "",
         accent: "appkit-color--accent",
     },
 };
-export function Heading({ level = 1, variant = "primary", className = "", children, ...props }) {
+export function Heading({ level = 1, variant = "primary", color, className = "", children, ...props }) {
     const Tag = `h${level}`;
+    const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
             "appkit-heading",
             TYPOGRAPHY.headingLevel[level],
-            TYPOGRAPHY.colorVariant[variant],
+            TYPOGRAPHY.colorVariant[resolvedColor],
             className,
         ]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Text({ variant = "primary", size = "base", weight = "normal", className = "", as: Tag = "p", children, ...props }) {
+export function Text({ variant = "primary", color, size = "base", weight = "normal", className = "", as: Tag = "p", children, ...props }) {
+    const resolvedColor = color ?? variant;
     return (_jsx(Tag, { className: [
             "appkit-text",
             TYPOGRAPHY.textSize[size],
             TYPOGRAPHY.textWeight[weight],
-            TYPOGRAPHY.colorVariant[variant],
+            TYPOGRAPHY.colorVariant[resolvedColor],
             className,
         ]
             .filter(Boolean)
@@ -67,34 +73,13 @@ export function Caption({ variant = "default", className = "", children, ...prop
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Span({ variant = "inherit", size, weight, className = "", children, ...props }) {
-    const variantClasses = {
-        inherit: "",
-        primary: "appkit-color--primary",
-        secondary: "appkit-color--secondary",
-        muted: "appkit-color--muted",
-        error: "appkit-color--error",
-        success: "appkit-color--success",
-        accent: "appkit-color--accent",
-    };
-    const sizeClasses = {
-        xs: "appkit-text--xs",
-        sm: "appkit-text--sm",
-        base: "appkit-text--base",
-        lg: "appkit-text--lg",
-        xl: "appkit-text--xl",
-    };
-    const weightClasses = {
-        normal: "appkit-font--normal",
-        medium: "appkit-font--medium",
-        semibold: "appkit-font--semibold",
-        bold: "appkit-font--bold",
-    };
+export function Span({ variant = "inherit", color, size, weight, className = "", children, ...props }) {
+    const resolvedColor = color ?? variant;
     const classes = [
         "appkit-span",
-        size ? sizeClasses[size] : "",
-        weight ? weightClasses[weight] : "",
-        variantClasses[variant],
+        size ? TYPOGRAPHY.textSize[size] : "",
+        weight ? TYPOGRAPHY.textWeight[weight] : "",
+        TYPOGRAPHY.colorVariant[resolvedColor],
         className,
     ]
         .filter(Boolean)

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

@@ -107,6 +107,18 @@
   color: var(--appkit-color-secondary);
 }
 
+.appkit-color--faint {
+  color: var(--appkit-color-zinc-400);
+}
+
+.appkit-color--warning {
+  color: var(--appkit-color-warning, #d97706);
+}
+
+.appkit-color--info {
+  color: var(--appkit-color-info, #0284c7);
+}
+
 .dark .appkit-color--primary {
   color: var(--appkit-color-text);
 }
@@ -131,6 +143,18 @@
   color: var(--appkit-color-primary-400);
 }
 
+.dark .appkit-color--faint {
+  color: var(--appkit-color-zinc-600);
+}
+
+.dark .appkit-color--warning {
+  color: var(--appkit-color-warning, #fbbf24);
+}
+
+.dark .appkit-color--info {
+  color: var(--appkit-color-info, #38bdf8);
+}
+
 .appkit-label {
   display: block;
   margin-bottom: 0.375rem;

package/dist/ui/components/VacationBanner.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert } from "./Alert";
+import { Span } from "./Typography";
 /**
  * S-STORE-6-A — Vacation-mode banner shown on product detail + checkout
  * pages when the seller has paused new orders.
@@ -12,5 +13,5 @@ export function VacationBanner({ storeName, message, returnDate, className, }) {
             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." })] }) }));
+    return (_jsx(Alert, { variant: "warning", className: className, children: _jsxs("div", { className: "text-sm", children: [_jsx(Span, { weight: "bold", 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/surface-tokens.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Surface & layout tokens — shared prop maps for all layout primitives.
+ *
+ * These maps power the Bootstrap/MUI-style props (`surface`, `padding`,
+ * `rounded`, `border`, `shadow`) on Stack, Row, Grid, Container, Section,
+ * Article, Main, Aside, Div, BlockHeader, and BlockFooter.
+ */
+export declare const SURFACE_MAP: {
+    readonly none: "";
+    readonly default: "bg-white dark:bg-slate-900";
+    readonly muted: "bg-zinc-50 dark:bg-slate-950";
+    readonly subtle: "bg-zinc-100 dark:bg-slate-900";
+    readonly inset: "bg-zinc-200 dark:bg-slate-800";
+    readonly card: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm";
+    readonly elevated: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-2xl shadow-md";
+    readonly interactive: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all cursor-pointer";
+    readonly glass: "backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 rounded-2xl shadow-lg";
+    readonly form: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm";
+};
+export type SurfaceKey = keyof typeof SURFACE_MAP;
+export declare const PADDING_MAP: {
+    readonly none: "";
+    readonly xs: "p-2";
+    readonly sm: "p-3";
+    readonly md: "p-4";
+    readonly lg: "p-6";
+    readonly xl: "p-8";
+    readonly card: "p-5 sm:p-6 lg:p-8";
+    readonly section: "py-10 sm:py-14 xl:py-20";
+    readonly sectionSm: "py-6 sm:py-10";
+    readonly page: "py-6 sm:py-8 lg:py-10";
+    readonly inline: "px-4 py-3";
+    readonly inlineSm: "px-3 py-2";
+    readonly inlineLg: "px-6 py-4";
+};
+export type PaddingKey = keyof typeof PADDING_MAP;
+export declare const ROUNDED_MAP: {
+    readonly none: "";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly "2xl": "rounded-2xl";
+    readonly full: "rounded-full";
+};
+export type RoundedKey = keyof typeof ROUNDED_MAP;
+export declare const BORDER_MAP: {
+    readonly none: "";
+    readonly default: "border border-zinc-200 dark:border-slate-700";
+    readonly subtle: "border border-zinc-100 dark:border-slate-800/60";
+    readonly strong: "border border-zinc-300 dark:border-slate-600";
+    readonly dashed: "border border-dashed border-zinc-300 dark:border-slate-600";
+};
+export type BorderKey = keyof typeof BORDER_MAP;
+export declare const SHADOW_MAP: {
+    readonly none: "";
+    readonly sm: "shadow-sm";
+    readonly md: "shadow-md";
+    readonly lg: "shadow-lg";
+    readonly xl: "shadow-xl";
+};
+export type ShadowKey = keyof typeof SHADOW_MAP;
+export interface SurfaceProps {
+    surface?: SurfaceKey;
+    padding?: PaddingKey;
+    rounded?: RoundedKey;
+    border?: BorderKey;
+    shadow?: ShadowKey;
+}
+export declare function buildSurfaceClasses(props: SurfaceProps): string;

package/dist/ui/components/surface-tokens.js

@@ -0,0 +1,68 @@
+/**
+ * Surface & layout tokens — shared prop maps for all layout primitives.
+ *
+ * These maps power the Bootstrap/MUI-style props (`surface`, `padding`,
+ * `rounded`, `border`, `shadow`) on Stack, Row, Grid, Container, Section,
+ * Article, Main, Aside, Div, BlockHeader, and BlockFooter.
+ */
+export const SURFACE_MAP = {
+    none: "",
+    default: "bg-white dark:bg-slate-900",
+    muted: "bg-zinc-50 dark:bg-slate-950",
+    subtle: "bg-zinc-100 dark:bg-slate-900",
+    inset: "bg-zinc-200 dark:bg-slate-800",
+    card: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm",
+    elevated: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-2xl shadow-md",
+    interactive: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all cursor-pointer",
+    glass: "backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 rounded-2xl shadow-lg",
+    form: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm",
+};
+export const PADDING_MAP = {
+    none: "",
+    xs: "p-2",
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-6",
+    xl: "p-8",
+    card: "p-5 sm:p-6 lg:p-8",
+    section: "py-10 sm:py-14 xl:py-20",
+    sectionSm: "py-6 sm:py-10",
+    page: "py-6 sm:py-8 lg:py-10",
+    inline: "px-4 py-3",
+    inlineSm: "px-3 py-2",
+    inlineLg: "px-6 py-4",
+};
+export const ROUNDED_MAP = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+};
+export const 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",
+    dashed: "border border-dashed border-zinc-300 dark:border-slate-600",
+};
+export const SHADOW_MAP = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl",
+};
+export function buildSurfaceClasses(props) {
+    return [
+        props.surface ? SURFACE_MAP[props.surface] : "",
+        props.padding ? PADDING_MAP[props.padding] : "",
+        props.rounded ? ROUNDED_MAP[props.rounded] : "",
+        props.border ? BORDER_MAP[props.border] : "",
+        props.shadow ? SHADOW_MAP[props.shadow] : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/ui/forms/FormShell.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from "react";
+import type { ZodType } from "zod";
 export interface FormShellStep {
     id: string;
     label: string;
@@ -32,6 +33,10 @@ export interface FormShellProps {
     onPublish: (values: Record<string, unknown>) => Promise<void>;
     /** Current form values — caller owns state */
     values: Record<string, unknown>;
+    /** Zod schema for auto-validation on publish. Errors are mapped to field names. */
+    schema?: ZodType;
+    /** When true + schema provided, validate on every value change (not just publish). */
+    validateOnChange?: boolean;
     /** Whether any values differ from the persisted state */
     isDirty?: boolean;
     draftId?: string;
@@ -63,4 +68,4 @@ export interface FormShellProviderProps {
     values?: Record<string, unknown>;
 }
 export declare function FormShellProvider({ children, onSaveDraft, isDirty, autoSaveDelayMs, values, }: FormShellProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function FormShell({ steps, onSaveDraft, onPublish, values, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange, isDirty, autoSaveDelayMs, publishLabel, saveDraftLabel, title, className, mobileAccordion, }: FormShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/forms/FormShell.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { Button } from "../components/Button";
-import { Heading, Text } from "../components/Typography";
+import { Heading, Span, Text } from "../components/Typography";
 // ─── Context ──────────────────────────────────────────────────────────────────
 export const FormShellContext = createContext(null);
 export function useFormShell() {
@@ -61,7 +61,7 @@ function ErrorSummary({ errors, visible }) {
     const entries = Object.entries(errors).filter(([, v]) => v);
     if (!visible || entries.length === 0)
         return null;
-    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx("strong", { children: field }), ": ", msg] }) }, field))) })] }));
+    return (_jsxs("div", { className: "appkit-formshell__error-summary", role: "alert", "aria-live": "assertive", children: [_jsxs(Text, { size: "sm", variant: "error", className: "appkit-formshell__error-summary__title", children: ["Please fix ", entries.length, " error", entries.length !== 1 ? "s" : "", " before publishing."] }), _jsx("ul", { className: "appkit-formshell__error-summary__list", children: entries.map(([field, msg]) => (_jsx("li", { children: _jsxs(Text, { size: "sm", variant: "error", children: [_jsx(Span, { weight: "bold", children: field }), ": ", msg] }) }, field))) })] }));
 }
 export function FormShellProvider({ children, onSaveDraft, isDirty = false, autoSaveDelayMs = 2000, values = {}, }) {
     const [errors, setErrors] = useState({});
@@ -122,8 +122,25 @@ export function FormShellProvider({ children, onSaveDraft, isDirty = false, auto
     }), [errors, touched, setFieldError, setFieldTouched, clearFieldError, isDirty]);
     return _jsx(FormShellContext.Provider, { value: ctx, children: children });
 }
+// ─── Schema validation helper ────────────────────────────────────────────────
+function validateSchema(schema, values, setFieldError, setErrors) {
+    const result = schema.safeParse(values);
+    if (result.success) {
+        setErrors({});
+        return true;
+    }
+    const newErrors = {};
+    for (const issue of result.error.issues) {
+        const path = issue.path.join(".");
+        if (path && !newErrors[path]) {
+            newErrors[path] = issue.message;
+        }
+    }
+    setErrors(newErrors);
+    return false;
+}
 // ─── FormShell ────────────────────────────────────────────────────────────────
-export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
+export function FormShell({ steps, onSaveDraft, onPublish, values, schema, validateOnChange = false, isDirty = false, autoSaveDelayMs = 2000, publishLabel = "Publish", saveDraftLabel = "Save Draft", title, className = "", mobileAccordion = true, }) {
     const [errors, setErrors] = useState({});
     const [touched, setTouched] = useState({});
     const [currentStep, setCurrentStep] = useState(0);
@@ -198,8 +215,19 @@ export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = fal
             setIsSubmitting(false);
         }
     }, [onSaveDraft, values]);
+    // Schema-driven live validation on value changes
+    useEffect(() => {
+        if (!schema || !validateOnChange)
+            return;
+        validateSchema(schema, values, setFieldError, setErrors);
+    }, [schema, validateOnChange, values, setFieldError]);
     const handlePublish = useCallback(async () => {
         setShowErrorSummary(true);
+        if (schema) {
+            const valid = validateSchema(schema, values, setFieldError, setErrors);
+            if (!valid)
+                return;
+        }
         if (!isPublishReady)
             return;
         setIsSubmitting(true);
@@ -209,7 +237,7 @@ export function FormShell({ steps, onSaveDraft, onPublish, values, isDirty = fal
         finally {
             setIsSubmitting(false);
         }
-    }, [isPublishReady, onPublish, values]);
+    }, [isPublishReady, onPublish, values, schema, setFieldError]);
     const ctx = useMemo(() => ({
         errors,
         touched,

package/dist/ui/index.d.ts

@@ -10,10 +10,11 @@ export type { FieldCheckboxProps } from "./forms";
 export { FieldCheckbox } from "./forms";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
 export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./columns";
-export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, } from "./components/Semantic";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, } from "./components/Semantic";
+export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
+export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
+export type { ColorVariant } from "./components/Typography";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { FilterChipGroup } from "./components/FilterChipGroup";
 export type { FilterChipGroupProps, FilterChipGroupTab, } from "./components/FilterChipGroup";
@@ -166,6 +167,8 @@ export type { DataTableProps, DataTableColumn } from "./DataTable";
 export { DataTable } from "./DataTable";
 export type { TableConfig, TableViewMode, PaginationConfig, StickyConfig, } from "../contracts";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
+export type { SurfaceKey, PaddingKey, RoundedKey, BorderKey, ShadowKey, SurfaceProps, } from "./components/surface-tokens";
+export { SURFACE_MAP, PADDING_MAP, ROUNDED_MAP, BORDER_MAP, SHADOW_MAP, buildSurfaceClasses, } from "./components/surface-tokens";
 export type { GapKey, ContainerSize, GridCols, ViewPortal, ContainerProps, StackProps, RowProps, GridProps, } from "./components/Layout";
 export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
 export { classNames, mergeTailwindClasses } from "./style.helper";
@@ -203,3 +206,7 @@ export type { FormActionBarProps, FormActionBarBreadcrumb } from "./components/F
 export { FormActionBar } from "./components/FormActionBar";
 export type { ConfirmDeleteModalProps } from "./components/ConfirmDeleteModal";
 export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";
+export type { FadeInProps, SlideUpProps, SlideInProps, ScaleInProps, CollapseProps, PressScaleProps, HoverLiftProps, AnimatedListProps, AnimatedDivProps, AnimatedStackProps, AnimatedRowProps, DraggableProps, SwipeableProps, } from "./components/Motion";
+export { FadeIn, SlideUp, SlideIn, ScaleIn, Collapse, PressScale, HoverLift, AnimatedList, AnimatedDiv, AnimatedStack, AnimatedRow, Draggable, Swipeable, AnimatePresence, } from "./components/Motion";
+export type { MotionPreset } from "../tokens/motion";
+export { MOTION_PRESETS, SPRING_SNAPPY, SPRING_GENTLE, EASE_OUT, } from "../tokens/motion";