@mohasinac/appkit 2.7.57 → 2.7.58

package/dist/tokens/motion.d.ts

@@ -0,0 +1,162 @@
+/**
+ * Motion presets — reusable animation configs for motion/react components.
+ *
+ * All presets respect `prefers-reduced-motion` via the `useReducedMotion` hook
+ * in the consuming component wrappers (Motion.tsx).
+ */
+import type { Transition } from "motion/react";
+export declare const SPRING_SNAPPY: Transition;
+export declare const SPRING_GENTLE: Transition;
+export declare const EASE_OUT: Transition;
+export declare const MOTION_PRESETS: {
+    readonly fadeIn: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+        readonly transition: {
+            readonly duration: 0.2;
+        };
+    };
+    readonly fadeInUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+        readonly transition: Transition;
+    };
+    readonly fadeInDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 20;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -20;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideInLeft: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: -24;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: -24;
+        };
+        readonly transition: Transition;
+    };
+    readonly slideInRight: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly x: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly x: 24;
+        };
+        readonly transition: Transition;
+    };
+    readonly scaleIn: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+        };
+        readonly transition: Transition;
+    };
+    readonly pressScale: {
+        readonly whileTap: {
+            readonly scale: 0.97;
+        };
+        readonly transition: {
+            readonly duration: 0.1;
+        };
+    };
+    readonly hoverLift: {
+        readonly whileHover: {
+            readonly y: -2;
+        };
+        readonly transition: Transition;
+    };
+    readonly hoverScale: {
+        readonly whileHover: {
+            readonly scale: 1.02;
+        };
+        readonly transition: Transition;
+    };
+    readonly stagger: {
+        readonly transition: {
+            readonly staggerChildren: 0.05;
+        };
+    };
+    readonly staggerSlow: {
+        readonly transition: {
+            readonly staggerChildren: 0.1;
+        };
+    };
+};
+export type MotionPreset = keyof typeof MOTION_PRESETS;

package/dist/tokens/motion.js

@@ -0,0 +1,89 @@
+/**
+ * Motion presets — reusable animation configs for motion/react components.
+ *
+ * All presets respect `prefers-reduced-motion` via the `useReducedMotion` hook
+ * in the consuming component wrappers (Motion.tsx).
+ */
+export const SPRING_SNAPPY = {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+};
+export const SPRING_GENTLE = {
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+};
+export const EASE_OUT = {
+    type: "tween",
+    ease: [0.25, 0.46, 0.45, 0.94],
+    duration: 0.3,
+};
+export const MOTION_PRESETS = {
+    fadeIn: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+    },
+    fadeInUp: {
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 16 },
+        transition: EASE_OUT,
+    },
+    fadeInDown: {
+        initial: { opacity: 0, y: -16 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -16 },
+        transition: EASE_OUT,
+    },
+    slideUp: {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 20 },
+        transition: SPRING_SNAPPY,
+    },
+    slideDown: {
+        initial: { opacity: 0, y: -20 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -20 },
+        transition: SPRING_SNAPPY,
+    },
+    slideInLeft: {
+        initial: { opacity: 0, x: -24 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: -24 },
+        transition: SPRING_SNAPPY,
+    },
+    slideInRight: {
+        initial: { opacity: 0, x: 24 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: 24 },
+        transition: SPRING_SNAPPY,
+    },
+    scaleIn: {
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        transition: SPRING_GENTLE,
+    },
+    pressScale: {
+        whileTap: { scale: 0.97 },
+        transition: { duration: 0.1 },
+    },
+    hoverLift: {
+        whileHover: { y: -2 },
+        transition: SPRING_SNAPPY,
+    },
+    hoverScale: {
+        whileHover: { scale: 1.02 },
+        transition: SPRING_SNAPPY,
+    },
+    stagger: {
+        transition: { staggerChildren: 0.05 },
+    },
+    staggerSlow: {
+        transition: { staggerChildren: 0.1 },
+    },
+};

package/dist/ui/DataTable.js

@@ -6,6 +6,7 @@ import { Button } from "./components/Button";
 import { Spinner } from "./components/Spinner";
 import { Pagination } from "./components/Pagination";
 import { Text } from "./components/Typography";
+import { AnimatedList } from "./components/Motion";
 import { GRID_MAP } from "./components/Layout";
 import { Row } from "./components/Layout";
 import { mergeTableConfig, DEFAULT_PAGINATION_CONFIG } from "../contracts";
@@ -109,9 +110,9 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
     const renderCardGrid = (mode) => {
         if (!mobileCardRender)
             return null;
-        return (_jsx("div", { className: mode === "grid"
+        return (_jsx(AnimatedList, { className: mode === "grid"
                 ? `${GRID_MAP[gridCols]} gap-6`
-                : "flex flex-col gap-4", "data-section": "datatable-div-636", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
+                : "flex flex-col gap-4", staggerDelay: 0.03, "data-section": "datatable-div-636", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), listMode: mode === "list", onToggle: (id, checked) => onSelectionChange?.(checked
                     ? [...selectedIds, id]
                     : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) }));
     };

package/dist/ui/components/Accordion.js

@@ -4,6 +4,7 @@ import { createContext, useContext, useMemo, useState } from "react";
 import { Button } from "./Button";
 import { Div } from "./Div";
 import { Span } from "./Typography";
+import { Collapse } from "./Motion";
 const AccordionContext = createContext(null);
 function toArray(value) {
     if (!value)
@@ -53,5 +54,5 @@ export function AccordionItem({ value, title, disabled = false, className = "",
         throw new Error("AccordionItem must be used within Accordion.");
     }
     const isOpen = ctx.openValues.includes(value);
-    return (_jsxs(Div, { className: `appkit-accordion__item ${className}`, children: [_jsxs(Button, { type: "button", disabled: disabled, "aria-expanded": isOpen, onClick: () => ctx.toggle(value), className: "appkit-accordion__trigger", children: [_jsx(Span, { children: title }), _jsx(Span, { className: `appkit-accordion__item-chevron ${isOpen ? "appkit-accordion__item-chevron--open" : ""}`, children: "\u25BE" })] }), isOpen && _jsx(Div, { className: "appkit-accordion__panel", children: children })] }));
+    return (_jsxs(Div, { className: `appkit-accordion__item ${className}`, children: [_jsxs(Button, { type: "button", disabled: disabled, "aria-expanded": isOpen, onClick: () => ctx.toggle(value), className: "appkit-accordion__trigger", children: [_jsx(Span, { children: title }), _jsx(Span, { className: `appkit-accordion__item-chevron ${isOpen ? "appkit-accordion__item-chevron--open" : ""}`, children: "\u25BE" })] }), _jsx(Collapse, { isOpen: isOpen, children: _jsx(Div, { className: "appkit-accordion__panel", children: children }) })] }));
 }

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

@@ -1,16 +1,19 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
+type CardAnimate = "hoverLift" | "pressScale" | "hoverScale" | "both";
 type CardVariant = "flat" | "outlined" | "elevated" | "default" | "primary" | "bordered" | "interactive" | "glass" | "gradient-indigo" | "gradient-teal" | "gradient-amber" | "gradient-rose" | "stat-indigo" | "stat-teal" | "stat-amber" | "stat-rose" | "stat-emerald";
 type CardPadding = "none" | "sm" | "md" | "lg";
-export interface CardProps {
+export interface CardProps extends SurfaceProps {
     children: React.ReactNode;
     variant?: CardVariant;
     padding?: CardPadding;
     hover?: boolean;
+    animate?: CardAnimate;
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Card({ children, variant, padding, hover, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, padding, hover, animate, surface, rounded, border, shadow, className, style, onClick, }: CardProps): import("react/jsx-runtime").JSX.Element;
 export interface CardSectionProps {
     children: React.ReactNode;
     className?: string;

package/dist/ui/components/Card.js

@@ -1,4 +1,8 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { buildSurfaceClasses } from "./surface-tokens";
+import { SPRING_SNAPPY } from "../../tokens/motion";
 const UI_CARD = {
     base: "appkit-card",
     variants: {
@@ -27,17 +31,31 @@ const UI_CARD = {
         lg: "appkit-card--pad-lg",
     },
 };
-export function Card({ children, variant = "flat", padding = "md", hover = false, className = "", style, onClick, }) {
-    return (_jsx("div", { className: [
-            UI_CARD.base,
-            UI_CARD.variants[variant],
-            UI_CARD.padding[padding],
-            hover ? "appkit-card--hoverable" : "",
-            onClick ? "appkit-card--clickable" : "",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
+export function Card({ children, variant = "flat", padding = "md", hover = false, animate, surface, rounded, border, shadow, className = "", style, onClick, }) {
+    const reduced = useReducedMotion();
+    const cls = [
+        UI_CARD.base,
+        UI_CARD.variants[variant],
+        UI_CARD.padding[padding],
+        hover ? "appkit-card--hoverable" : "",
+        onClick ? "appkit-card--clickable" : "",
+        buildSurfaceClasses({ surface, rounded, border, shadow }),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    if (animate && !reduced) {
+        const whileHover = animate === "hoverLift" || animate === "both"
+            ? { y: -2 }
+            : animate === "hoverScale"
+                ? { scale: 1.02 }
+                : undefined;
+        const whileTap = animate === "pressScale" || animate === "both"
+            ? { scale: 0.97 }
+            : undefined;
+        return (_jsx(motion.div, { className: cls, style: style, onClick: onClick, whileHover: whileHover, whileTap: whileTap, transition: SPRING_SNAPPY, "data-section": "card-div-463", children: children }));
+    }
+    return (_jsx("div", { className: cls, style: style, onClick: onClick, "data-section": "card-div-463", children: children }));
 }
 export function CardHeader({ children, className = "" }) {
     return (_jsx("div", { className: ["appkit-card__header", className].filter(Boolean).join(" "), "data-section": "card-div-464", children: children }));

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

@@ -1,20 +1,6 @@
 import React from "react";
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+import type { SurfaceProps } from "./surface-tokens";
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
     children?: React.ReactNode;
 }
-/**
- * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
 export declare const Div: React.ForwardRefExoticComponent<DivProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/components/Div.js

@@ -1,19 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-/**
- * Semantic `<div data-section="div-div-477">` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
-export const Div = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("div", { ref: ref, className: className, ...props, "data-section": "div-div-478", children: children })));
+import { buildSurfaceClasses } from "./surface-tokens";
+export const Div = React.forwardRef(({ className = "", surface, padding, rounded, border, shadow, children, ...props }, ref) => (_jsx("div", { ref: ref, className: [buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className].filter(Boolean).join(" "), ...props, children: children })));
 Div.displayName = "Div";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceProps } from "./surface-tokens";
 /**
  * Layout Primitives — Container, Stack, Row, Grid
  *
@@ -167,24 +168,13 @@ type JustifyContent = keyof typeof JUSTIFY_MAP;
  * <Container size="full" as="main">...</Container>
  * ```
  */
-export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Max-width breakpoint preset.
-     * - `sm`    → `max-w-3xl`       (blog / policy)
-     * - `md`    → `max-w-4xl`       (contact / about)
-     * - `lg`    → `max-w-5xl`       (checkout / help)
-     * - `xl`    → `max-w-6xl`       (product detail / cart)
-     * - `2xl`   → `max-w-7xl`       (main content grids — **default**)
-     * - `full`  → `max-w-screen-2xl` (full-bleed)
-     * - `wide`  → `max-w-screen-2xl` (compact px, no lg step)
-     * - `ultra` → `max-w-[1920px]`  (ultra-wide / 4K displays)
-     */
+export interface ContainerProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     size?: ContainerSize;
     /** Render as a different element (e.g. `"main"`, `"section"`). Defaults to `"div"`. */
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Container({ size, as, className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Container({ size, as, surface, padding, rounded, border, shadow, className, children, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertical flex column. Use instead of `<div className="flex flex-col gap-4" data-section="layout-div-535">`.
  *
@@ -201,7 +191,7 @@ export declare function Container({ size, as, className, children, ...props }: C
  * </Stack>
  * ```
  */
-export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Centers children on both axes (`items-center justify-center`). */
@@ -212,7 +202,7 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, as, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, centered, align, as, surface, padding, rounded, border, shadow, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *
@@ -229,7 +219,7 @@ export declare function Stack({ gap, centered, align, as, className, children, .
  * </Row>
  * ```
  */
-export interface RowProps extends React.HTMLAttributes<HTMLElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Centers children on both axes (`items-center justify-center`). */
@@ -244,7 +234,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Row({ gap, centered, align, justify, wrap, as, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ gap, centered, align, justify, wrap, as, surface, padding, rounded, border, shadow, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
@@ -261,7 +251,7 @@ export declare function Row({ gap, centered, align, justify, wrap, as, className
  * </Grid>
  * ```
  */
-export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+export interface GridProps extends React.HTMLAttributes<HTMLElement>, SurfaceProps {
     /**
      * Column preset.
      * - Numbers `1`–`6` → mobile-first responsive stacks
@@ -280,5 +270,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Grid({ cols, gap, as, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ cols, gap, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export {};

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/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;