@mohasinac/appkit 2.7.56 → 2.7.58

package/dist/ui/components/Layout.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildSurfaceClasses } from "./surface-tokens";
 /**
  * Layout Primitives — Container, Stack, Row, Grid
  *
@@ -142,26 +143,27 @@ const JUSTIFY_MAP = {
     around: "appkit-justify--around",
     evenly: "appkit-justify--evenly",
 };
-export function Container({ size = "2xl", as, className = "", children, ...props }) {
+export function Container({ size = "2xl", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
-    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], className]
+    return (_jsx(Tag, { className: ["appkit-container", CONTAINER_MAP[size], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className]
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Stack({ gap = "md", centered = false, align = "stretch", as, className = "", children, ...props }) {
+export function Stack({ gap = "md", centered = false, align = "stretch", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-stack",
         GAP_MAP[gap],
         centered ? "appkit-stack--centered" : "",
         !centered && align !== "stretch" ? ITEMS_MAP[align] : "",
+        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Row({ gap = "md", centered = false, align = "center", justify = "start", wrap = false, as, className = "", children, ...props }) {
+export function Row({ gap = "md", centered = false, align = "center", justify = "start", wrap = false, as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-row",
@@ -169,17 +171,17 @@ export function Row({ gap = "md", centered = false, align = "center", justify =
         !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
         GAP_MAP[gap],
         wrap ? "appkit-row--wrap" : "",
+        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Grid({ cols, gap = "md", as, className = "", children, ...props }) {
+export function Grid({ cols, gap = "md", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
-    // When cols is omitted callers supply grid-cols-* themselves via className.
     const baseClass = cols !== undefined ? GRID_MAP[cols] : "appkit-grid";
-    const classes = [baseClass, GAP_MAP[gap], className]
+    const classes = [baseClass, GAP_MAP[gap], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));

package/dist/ui/components/ListingToolbar.js

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

package/dist/ui/components/Modal.js

@@ -2,8 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Heading } from "./Typography";
 import { Button } from "./Button";
+import { SPRING_GENTLE } from "../../tokens/motion";
 const SIZE_CLASSES = {
     sm: "appkit-modal__panel--sm",
     md: "appkit-modal__panel--md",
@@ -61,12 +63,13 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
             first.focus();
         }
     };
-    if (!visible || typeof document === "undefined") {
+    const reduced = useReducedMotion();
+    if (typeof document === "undefined") {
         return null;
     }
-    return createPortal(_jsxs("div", { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
-                    .filter(Boolean)
-                    .join(" "), "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] }), document.body);
+    return createPortal(_jsx(AnimatePresence, { children: visible && (_jsxs(motion.div, { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs(motion.div, { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
+                        .filter(Boolean)
+                        .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }), document.body);
 }
 export function ModalFooter({ children, className = "", }) {
     return (_jsx("div", { className: [

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

@@ -0,0 +1,75 @@
+import React from "react";
+import type { HTMLMotionProps } from "motion/react";
+export declare const AnimatePresence: ({ children, custom, initial, onExitComplete, presenceAffectsLayout, mode, propagate, anchorX, anchorY, root }: React.PropsWithChildren<import("framer-motion").AnimatePresenceProps>) => import("react/jsx-runtime").JSX.Element | null;
+export interface FadeInProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    delay?: number;
+    duration?: number;
+    children: React.ReactNode;
+}
+export declare function FadeIn({ delay, duration, children, ...props }: FadeInProps): import("react/jsx-runtime").JSX.Element;
+export interface SlideUpProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    delay?: number;
+    distance?: number;
+    children: React.ReactNode;
+}
+export declare function SlideUp({ delay, distance, children, ...props }: SlideUpProps): import("react/jsx-runtime").JSX.Element;
+export interface SlideInProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    direction?: "left" | "right" | "up" | "down";
+    delay?: number;
+    distance?: number;
+    children: React.ReactNode;
+}
+export declare function SlideIn({ direction, delay, distance, children, ...props }: SlideInProps): import("react/jsx-runtime").JSX.Element;
+export interface ScaleInProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    delay?: number;
+    children: React.ReactNode;
+}
+export declare function ScaleIn({ delay, children, ...props }: ScaleInProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapseProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    isOpen: boolean;
+    children: React.ReactNode;
+}
+export declare function Collapse({ isOpen, children, ...props }: CollapseProps): import("react/jsx-runtime").JSX.Element;
+export interface PressScaleProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    scale?: number;
+    children: React.ReactNode;
+}
+export declare function PressScale({ scale, children, ...props }: PressScaleProps): import("react/jsx-runtime").JSX.Element;
+export interface HoverLiftProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    lift?: number;
+    children: React.ReactNode;
+}
+export declare function HoverLift({ lift, children, ...props }: HoverLiftProps): import("react/jsx-runtime").JSX.Element;
+export interface AnimatedListProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    staggerDelay?: number;
+    children: React.ReactNode;
+}
+export declare function AnimatedList({ staggerDelay, children, ...props }: AnimatedListProps): import("react/jsx-runtime").JSX.Element;
+export interface AnimatedDivProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    delay?: number;
+    children?: React.ReactNode;
+}
+export declare function AnimatedDiv({ delay, children, ...props }: AnimatedDivProps): import("react/jsx-runtime").JSX.Element;
+export type AnimatedStackProps = AnimatedDivProps;
+export declare function AnimatedStack({ delay, children, className, ...props }: AnimatedStackProps): import("react/jsx-runtime").JSX.Element;
+export type AnimatedRowProps = AnimatedDivProps;
+export declare function AnimatedRow({ delay, children, className, ...props }: AnimatedRowProps): import("react/jsx-runtime").JSX.Element;
+export interface DraggableProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    axis?: "x" | "y" | boolean;
+    constraints?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    } | React.RefObject<HTMLElement | null>;
+    dragElastic?: number;
+    children: React.ReactNode;
+}
+export declare function Draggable({ axis, constraints, dragElastic, children, ...props }: DraggableProps): import("react/jsx-runtime").JSX.Element;
+export interface SwipeableProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    threshold?: number;
+    children: React.ReactNode;
+}
+export declare function Swipeable({ onSwipeLeft, onSwipeRight, threshold, children, ...props }: SwipeableProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Motion.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { motion, useReducedMotion, AnimatePresence as MotionAnimatePresence, } from "motion/react";
+import { MOTION_PRESETS, SPRING_SNAPPY, EASE_OUT } from "../../tokens/motion";
+// Re-export AnimatePresence for consumer convenience
+export const AnimatePresence = MotionAnimatePresence;
+// ── Reduced motion helper ────────────────────────────────────────────────────
+function useMotionProps(props) {
+    const reduced = useReducedMotion();
+    if (!reduced)
+        return props;
+    const { initial, animate, exit, whileHover, whileTap, whileInView, transition, ...rest } = props;
+    return { ...rest, initial: false, animate: false };
+}
+export function FadeIn({ delay = 0, duration = 0.3, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function SlideUp({ delay = 0, distance = 20, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0, y: distance },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: distance },
+        transition: { ...SPRING_SNAPPY, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+const SLIDE_OFFSETS = {
+    left: { x: -24, y: 0 },
+    right: { x: 24, y: 0 },
+    up: { x: 0, y: -20 },
+    down: { x: 0, y: 20 },
+};
+export function SlideIn({ direction = "left", delay = 0, distance, children, ...props }) {
+    const offset = SLIDE_OFFSETS[direction];
+    const scale = distance ? distance / Math.max(Math.abs(offset.x || 1), Math.abs(offset.y || 1)) : 1;
+    const motionProps = useMotionProps({
+        initial: { opacity: 0, x: offset.x * scale, y: offset.y * scale },
+        animate: { opacity: 1, x: 0, y: 0 },
+        exit: { opacity: 0, x: offset.x * scale, y: offset.y * scale },
+        transition: { ...SPRING_SNAPPY, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function ScaleIn({ delay = 0, children, ...props }) {
+    const motionProps = useMotionProps({
+        ...MOTION_PRESETS.scaleIn,
+        transition: { ...MOTION_PRESETS.scaleIn.transition, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function Collapse({ isOpen, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(MotionAnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: reduced ? false : { height: 0, opacity: 0, overflow: "hidden" }, animate: { height: "auto", opacity: 1, overflow: "hidden" }, exit: { height: 0, opacity: 0, overflow: "hidden" }, transition: EASE_OUT, ...props, children: children })) }));
+}
+export function PressScale({ scale = 0.97, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { whileTap: reduced ? undefined : { scale }, transition: { duration: 0.1 }, ...props, children: children }));
+}
+export function HoverLift({ lift = 2, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { whileHover: reduced ? undefined : { y: -lift }, transition: SPRING_SNAPPY, ...props, children: children }));
+}
+export function AnimatedList({ staggerDelay = 0.05, children, ...props }) {
+    const reduced = useReducedMotion();
+    const items = React.Children.toArray(children);
+    return (_jsx(motion.div, { ...props, children: items.map((child, i) => (_jsx(motion.div, { initial: reduced ? false : { opacity: 0, y: 16 }, animate: { opacity: 1, y: 0 }, transition: { ...EASE_OUT, delay: i * staggerDelay }, children: child }, React.isValidElement(child) ? (child.key ?? i) : i))) }));
+}
+export function AnimatedDiv({ delay = 0, children, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return _jsx(motion.div, { ...motionProps, children: children });
+}
+export function AnimatedStack({ delay = 0, children, className, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return (_jsx(motion.div, { ...motionProps, className: ["flex flex-col gap-4", className].filter(Boolean).join(" "), children: children }));
+}
+export function AnimatedRow({ delay = 0, children, className, ...props }) {
+    const motionProps = useMotionProps({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2, delay },
+        ...props,
+    });
+    return (_jsx(motion.div, { ...motionProps, className: ["flex flex-row gap-4", className].filter(Boolean).join(" "), children: children }));
+}
+export function Draggable({ axis, constraints, dragElastic = 0.1, children, ...props }) {
+    const reduced = useReducedMotion();
+    const drag = reduced ? false : (axis === true ? true : axis || true);
+    return (_jsx(motion.div, { drag: drag, dragConstraints: constraints, dragElastic: dragElastic, ...props, children: children }));
+}
+export function Swipeable({ onSwipeLeft, onSwipeRight, threshold = 50, children, ...props }) {
+    const reduced = useReducedMotion();
+    return (_jsx(motion.div, { drag: reduced ? false : "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 0.2, onDragEnd: (_e, info) => {
+            if (info.offset.x < -threshold)
+                onSwipeLeft?.();
+            if (info.offset.x > threshold)
+                onSwipeRight?.();
+        }, ...props, children: children }));
+}

package/dist/ui/components/Select.js

@@ -23,5 +23,5 @@ export function Select({ options, value, onChange, onValueChange, placeholder, l
                             className,
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-400", "data-section": "select-div-594", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
 /**
  * Semantic HTML Wrapper Components
  *
@@ -35,7 +36,7 @@ import React from "react";
  * Use for thematically grouped content that would appear in an outline.
  * Prefer this over a plain `<div data-section="semantic-div-596">` when the block has a heading.
  */
-export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+export interface SectionProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
 export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
@@ -43,24 +44,24 @@ export declare const Section: React.ForwardRefExoticComponent<SectionProps & Rea
  * Semantic `<article>` element.
  * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.
  */
-export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
+export interface ArticleProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children?: React.ReactNode;
 }
-export declare function Article({ className, children, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Article({ className, surface, padding, rounded, border, shadow, children, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<main>` element.
  * Wraps the primary content of the document. Should appear only once per page.
  */
-export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+export interface MainProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function Main({ className, children, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
+export declare function Main({ className, surface, padding, rounded, border, shadow, children, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<aside>` element.
  * Use for supplementary content tangentially related to the main content:
  * sidebars, callout boxes, related-link panels.
  */
-export interface AsideProps extends React.HTMLAttributes<HTMLElement> {
+export interface AsideProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
 export declare const Aside: React.ForwardRefExoticComponent<AsideProps & React.RefAttributes<HTMLElement>>;
@@ -95,18 +96,18 @@ export declare function Nav({ className, children, ...props }: NavProps): import
  * </Article>
  * ```
  */
-export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {
+export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockHeader({ className, children, ...props }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockHeader({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<footer>` element for block-level component footers.
  * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
  */
-export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {
+export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     children: React.ReactNode;
 }
-export declare function BlockFooter({ className, children, ...props }: BlockFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlockFooter({ className, surface, padding, rounded, border, shadow, children, ...props }: BlockFooterProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Semantic `<ul>` (unordered list) element.
  *
@@ -144,11 +145,77 @@ export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
 }
 export declare function Li({ className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Aliases for `BlockHeader` and `BlockFooter`.
- * Use when importing from the standard `<Header>` / `<Footer>` names.
- */
 export type HeaderProps = BlockHeaderProps;
 export declare const Header: typeof BlockHeader;
 export type FooterProps = BlockFooterProps;
 export declare const Footer: typeof BlockFooter;
+type TableVariant = "default" | "striped" | "bordered";
+type TableSize = "sm" | "md" | "lg";
+export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "border">, SurfaceProps {
+    variant?: TableVariant;
+    size?: TableSize;
+    stickyHeader?: boolean;
+    children: React.ReactNode;
+}
+export declare function Table({ variant, size, stickyHeader, className, surface, padding, rounded, border, shadow, children, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export interface TheadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+export declare function Thead({ className, children, ...props }: TheadProps): import("react/jsx-runtime").JSX.Element;
+export interface TbodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    children: React.ReactNode;
+}
+export declare function Tbody({ className, children, ...props }: TbodyProps): import("react/jsx-runtime").JSX.Element;
+export interface TrProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    hover?: boolean;
+    children: React.ReactNode;
+}
+export declare function Tr({ hover, className, children, ...props }: TrProps): import("react/jsx-runtime").JSX.Element;
+type CellAlign = "left" | "center" | "right";
+export interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: CellAlign;
+    children?: React.ReactNode;
+}
+export declare function Th({ align, className, children, ...props }: ThProps): import("react/jsx-runtime").JSX.Element;
+export interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: CellAlign;
+    children?: React.ReactNode;
+}
+export declare function Td({ align, className, children, ...props }: TdProps): import("react/jsx-runtime").JSX.Element;
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+    color?: "default" | "primary" | "error" | "success";
+    children: React.ReactNode;
+}
+export declare function Code({ color, className, children, ...props }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export interface PreProps extends React.HTMLAttributes<HTMLPreElement>, SurfaceProps {
+    children: React.ReactNode;
+}
+export declare function Pre({ className, surface, padding, rounded, border, shadow, children, ...props }: PreProps): import("react/jsx-runtime").JSX.Element;
+export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement>, SurfaceProps {
+    color?: "default" | "primary" | "info" | "warning";
+    children: React.ReactNode;
+}
+export declare function Blockquote({ color, className, surface, padding, rounded, border, shadow, children, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
+export interface FigureProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
+    children: React.ReactNode;
+}
+export declare function Figure({ className, surface, padding, rounded, border, shadow, children, ...props }: FigureProps): import("react/jsx-runtime").JSX.Element;
+export interface FigcaptionProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Figcaption({ className, children, ...props }: FigcaptionProps): import("react/jsx-runtime").JSX.Element;
+type DlVariant = "stacked" | "inline";
+export interface DlProps extends React.HTMLAttributes<HTMLDListElement>, SurfaceProps {
+    variant?: DlVariant;
+    children: React.ReactNode;
+}
+export declare function Dl({ variant, className, surface, padding, rounded, border, shadow, children, ...props }: DlProps): import("react/jsx-runtime").JSX.Element;
+export interface DtProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Dt({ className, children, ...props }: DtProps): import("react/jsx-runtime").JSX.Element;
+export interface DdProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Dd({ className, children, ...props }: DdProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Semantic.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, children: children })));
+import { buildSurfaceClasses } from "./surface-tokens";
+export const Section = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("section", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
 Section.displayName = "Section";
-export function Article({ className = "", children, ...props }) {
-    return (_jsx("article", { className: className, ...props, children: children }));
+export function Article({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("article", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function Main({ className = "", children, ...props }) {
-    return (_jsx("main", { className: className, ...props, children: children }));
+export function Main({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("main", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export const Aside = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("aside", { className: className, ref: ref, ...props, children: children })));
+export const Aside = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("aside", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ref: ref, ...props, children: children })));
 Aside.displayName = "Aside";
 export function Nav({ className = "", children, ...props }) {
     return (_jsx("nav", { className: className, ...props, children: children }));
 }
-export function BlockHeader({ className = "", children, ...props }) {
-    return (_jsx("header", { className: className, ...props, children: children }));
+export function BlockHeader({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("header", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
-export function BlockFooter({ className = "", children, ...props }) {
-    return (_jsx("footer", { className: className, ...props, children: children }));
+export function BlockFooter({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("footer", { className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
 }
 export function Ul({ className = "", children, ...props }) {
     return (_jsx("ul", { className: className, ...props, children: children }));
@@ -30,3 +31,67 @@ export function Li({ className = "", children, ...props }) {
 }
 export const Header = BlockHeader;
 export const Footer = BlockFooter;
+const TABLE_VARIANT_MAP = {
+    default: "appkit-table--default",
+    striped: "appkit-table--striped",
+    bordered: "appkit-table--bordered",
+};
+const TABLE_SIZE_MAP = {
+    sm: "appkit-table--sm",
+    md: "appkit-table--md",
+    lg: "appkit-table--lg",
+};
+export function Table({ variant = "default", size = "md", stickyHeader = false, className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("table", { className: ["appkit-table", TABLE_VARIANT_MAP[variant], TABLE_SIZE_MAP[size], stickyHeader ? "appkit-table--sticky-header" : "", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Thead({ className = "", children, ...props }) {
+    return (_jsx("thead", { className: ["appkit-thead", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Tbody({ className = "", children, ...props }) {
+    return (_jsx("tbody", { className: ["appkit-tbody", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Tr({ hover = false, className = "", children, ...props }) {
+    return (_jsx("tr", { className: ["appkit-tr", hover ? "appkit-tr--hover" : "", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Th({ align, className = "", children, ...props }) {
+    return (_jsx("th", { className: ["appkit-th", align ? `text-${align}` : "", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Td({ align, className = "", children, ...props }) {
+    return (_jsx("td", { className: ["appkit-td", align ? `text-${align}` : "", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+const CODE_COLOR_MAP = {
+    default: "appkit-code--default",
+    primary: "appkit-code--primary",
+    error: "appkit-code--error",
+    success: "appkit-code--success",
+};
+export function Code({ color = "default", className = "", children, ...props }) {
+    return (_jsx("code", { className: ["appkit-code", CODE_COLOR_MAP[color], className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Pre({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("pre", { className: ["appkit-pre", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+}
+const BLOCKQUOTE_COLOR_MAP = {
+    default: "appkit-blockquote--default",
+    primary: "appkit-blockquote--primary",
+    info: "appkit-blockquote--info",
+    warning: "appkit-blockquote--warning",
+};
+export function Blockquote({ color = "default", className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("blockquote", { className: ["appkit-blockquote", BLOCKQUOTE_COLOR_MAP[color], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Figure({ className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("figure", { className: ["appkit-figure", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Figcaption({ className = "", children, ...props }) {
+    return (_jsx("figcaption", { className: ["appkit-figcaption", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Dl({ variant = "stacked", className = "", surface, padding, rounded, border, shadow, children, ...props }) {
+    return (_jsx("dl", { className: ["appkit-dl", variant === "inline" ? "appkit-dl--inline" : "appkit-dl--stacked", buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Dt({ className = "", children, ...props }) {
+    return (_jsx("dt", { className: ["appkit-dt", className].filter(Boolean).join(" "), ...props, children: children }));
+}
+export function Dd({ className = "", children, ...props }) {
+    return (_jsx("dd", { className: ["appkit-dd", className].filter(Boolean).join(" "), ...props, children: children }));
+}