@mohasinac/appkit 2.7.56 → 2.7.58

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

@@ -1,6 +1,4 @@
 /* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
-/* Pure passthroughs — no default styles. Exists for style contract compliance. */
-/* Consumer themes may add base landmark styles via these hooks. */
 
 .appkit-section {}
 .appkit-article {}
@@ -12,3 +10,264 @@
 .appkit-ul {}
 .appkit-ol {}
 .appkit-li {}
+
+/* --- Table family --------------------------------------------------------- */
+
+.appkit-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.appkit-table--sm .appkit-th,
+.appkit-table--sm .appkit-td { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
+
+.appkit-table--md .appkit-th,
+.appkit-table--md .appkit-td { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
+
+.appkit-table--lg .appkit-th,
+.appkit-table--lg .appkit-td { padding: 0.875rem 1rem; font-size: 1rem; }
+
+.appkit-thead {}
+
+.appkit-th {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-600, #52525b);
+  border-bottom: 1px solid var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.dark .appkit-th {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+  border-bottom-color: var(--appkit-color-slate-700, #334155);
+}
+
+.appkit-td {
+  border-bottom: 1px solid var(--appkit-color-zinc-100, #f4f4f5);
+}
+
+.dark .appkit-td {
+  border-bottom-color: var(--appkit-color-slate-800, #1e293b);
+}
+
+.appkit-table--default .appkit-th {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--default .appkit-th {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+.appkit-table--striped .appkit-tbody .appkit-tr:nth-child(even) {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--striped .appkit-tbody .appkit-tr:nth-child(even) {
+  background: var(--appkit-color-slate-800, #1e293b);
+}
+
+.appkit-table--bordered .appkit-th,
+.appkit-table--bordered .appkit-td {
+  border: 1px solid var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.dark .appkit-table--bordered .appkit-th,
+.dark .appkit-table--bordered .appkit-td {
+  border-color: var(--appkit-color-slate-700, #334155);
+}
+
+.appkit-table--sticky-header .appkit-th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-table--sticky-header .appkit-th {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+.appkit-tr--hover:hover {
+  background: var(--appkit-color-zinc-50, #fafafa);
+}
+
+.dark .appkit-tr--hover:hover {
+  background: var(--appkit-color-slate-800, #1e293b);
+}
+
+/* --- Code / Pre ----------------------------------------------------------- */
+
+.appkit-code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875em;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.appkit-code--default {
+  background: var(--appkit-color-zinc-100, #f4f4f5);
+  color: var(--appkit-color-zinc-800, #27272a);
+}
+
+.dark .appkit-code--default {
+  background: var(--appkit-color-slate-800, #1e293b);
+  color: var(--appkit-color-zinc-200, #e4e4e7);
+}
+
+.appkit-code--primary {
+  background: var(--appkit-color-primary-50, #eef5ff);
+  color: var(--appkit-color-primary-700, #1343de);
+}
+
+.dark .appkit-code--primary {
+  background: var(--appkit-color-primary-950, #111e58);
+  color: var(--appkit-color-primary-300, #8eb9ff);
+}
+
+.appkit-code--error {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.dark .appkit-code--error {
+  background: #1c0a0a;
+  color: #fca5a5;
+}
+
+.appkit-code--success {
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.dark .appkit-code--success {
+  background: #052e16;
+  color: #86efac;
+}
+
+.appkit-pre {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  margin: 0;
+  overflow-x: auto;
+  background: var(--appkit-color-zinc-50, #fafafa);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.dark .appkit-pre {
+  background: var(--appkit-color-slate-900, #0f172a);
+}
+
+/* --- Blockquote ----------------------------------------------------------- */
+
+.appkit-blockquote {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-left: 3px solid;
+  font-style: italic;
+}
+
+.appkit-blockquote--default {
+  border-left-color: var(--appkit-color-zinc-300, #d4d4d8);
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-blockquote--default {
+  border-left-color: var(--appkit-color-slate-600, #475569);
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+.appkit-blockquote--primary {
+  border-left-color: var(--appkit-color-primary);
+  color: var(--appkit-color-primary-700, #1343de);
+}
+
+.dark .appkit-blockquote--primary {
+  color: var(--appkit-color-primary-300, #8eb9ff);
+}
+
+.appkit-blockquote--info {
+  border-left-color: var(--appkit-color-info, #0284c7);
+  color: var(--appkit-color-info, #0284c7);
+}
+
+.dark .appkit-blockquote--info {
+  border-left-color: var(--appkit-color-info, #38bdf8);
+  color: var(--appkit-color-info, #38bdf8);
+}
+
+.appkit-blockquote--warning {
+  border-left-color: var(--appkit-color-warning, #d97706);
+  color: var(--appkit-color-warning, #d97706);
+}
+
+.dark .appkit-blockquote--warning {
+  border-left-color: var(--appkit-color-warning, #fbbf24);
+  color: var(--appkit-color-warning, #fbbf24);
+}
+
+/* --- Figure / Figcaption -------------------------------------------------- */
+
+.appkit-figure {
+  margin: 0;
+}
+
+.appkit-figcaption {
+  font-size: 0.875rem;
+  color: var(--appkit-color-zinc-500, #71717a);
+  margin-top: 0.5rem;
+}
+
+.dark .appkit-figcaption {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+/* --- Dl / Dt / Dd (description list) -------------------------------------- */
+
+.appkit-dl {
+  margin: 0;
+}
+
+.appkit-dl--stacked .appkit-dt {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-700, #3f3f46);
+  margin-bottom: 0.25rem;
+}
+
+.dark .appkit-dl--stacked .appkit-dt {
+  color: var(--appkit-color-zinc-300, #d4d4d8);
+}
+
+.appkit-dl--stacked .appkit-dd {
+  margin: 0 0 1rem 0;
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-dl--stacked .appkit-dd {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}
+
+.appkit-dl--inline {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1rem;
+  align-items: baseline;
+}
+
+.appkit-dl--inline .appkit-dt {
+  font-weight: 600;
+  color: var(--appkit-color-zinc-700, #3f3f46);
+}
+
+.dark .appkit-dl--inline .appkit-dt {
+  color: var(--appkit-color-zinc-300, #d4d4d8);
+}
+
+.appkit-dl--inline .appkit-dd {
+  margin: 0;
+  color: var(--appkit-color-zinc-600, #52525b);
+}
+
+.dark .appkit-dl--inline .appkit-dd {
+  color: var(--appkit-color-zinc-400, #a1a1aa);
+}

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

@@ -24,4 +24,4 @@ export interface SideDrawerProps {
  * </SideDrawer>
  * ```
  */
-export declare function SideDrawer({ isOpen, onClose, title, children, footer, mode, isDirty, side, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SideDrawer({ isOpen, onClose, title, children, footer, mode, isDirty, side, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element;

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/StatsGrid.js

@@ -12,5 +12,5 @@ const variantClass = {
     flat: "appkit-stats-grid--flat",
 };
 export function StatsGrid({ stats, columns = 3, variant = "elevated", className, }) {
-    return (_jsx(Div, { className: classNames("appkit-stats-grid", columnsClass[columns], variantClass[variant], className), children: stats.map((stat, i) => (_jsx(Div, { className: "appkit-stats-grid__item", children: _jsxs(Div, { className: "appkit-stats-grid__item-inner", children: [_jsxs(Div, { children: [_jsx(Text, { className: "appkit-stats-grid__label", children: stat.label }), _jsx(Text, { className: "appkit-stats-grid__value", children: stat.value })] }), stat.icon && (_jsx(Div, { className: classNames("appkit-stats-grid__icon", stat.colorClass ?? "text-zinc-400 dark:text-zinc-500"), children: stat.icon }))] }) }, `${stat.label}-${i}`))) }));
+    return (_jsx(Div, { className: classNames("appkit-stats-grid", columnsClass[columns], variantClass[variant], className), children: stats.map((stat, i) => (_jsx(Div, { className: "appkit-stats-grid__item", children: _jsxs(Div, { className: "appkit-stats-grid__item-inner", children: [_jsxs(Div, { children: [_jsx(Text, { className: "appkit-stats-grid__label", children: stat.label }), _jsx(Text, { className: "appkit-stats-grid__value", children: stat.value })] }), stat.icon && (_jsx(Div, { className: classNames("appkit-stats-grid__icon", stat.colorClass ?? "text-zinc-400 dark:text-zinc-400"), children: stat.icon }))] }) }, `${stat.label}-${i}`))) }));
 }

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." })] }) }));
 }