@raydenui/ui 0.9.6 → 0.10.0

package/dist/motion/Collapse.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapse = Collapse;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MotionProvider_1 = require("./MotionProvider.cjs");
+/** Disclosure region. Supply an external trigger with aria-expanded and aria-controls. */
+function Collapse({ open, motion = true, children, style, ...props }) {
+    const { preset, tokens } = (0, MotionProvider_1.useRaydenMotion)(motion);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (element) => {
+            if (!element)
+                return;
+            if (!open && element.contains(document.activeElement)) {
+                const trigger = element.id
+                    ? Array.from(document.querySelectorAll("[aria-controls]")).find((candidate) => candidate.getAttribute("aria-controls")?.split(/\s+/).includes(element.id))
+                    : undefined;
+                if (trigger)
+                    trigger.focus({ preventScroll: true });
+                else
+                    document.activeElement?.blur();
+            }
+            element.toggleAttribute("inert", !open);
+        }, "data-rayden-collapse": "", "data-rayden-motion": preset, "data-state": open ? "open" : "closed", "aria-hidden": !open || props["aria-hidden"], style: {
+            "--rayden-motion-duration": `${open ? tokens.duration.normal : Math.round(tokens.duration.normal * 0.75)}ms`,
+            "--rayden-motion-ease": open ? tokens.ease.enter : tokens.ease.exit,
+            ...style,
+        }, children: (0, jsx_runtime_1.jsx)("div", { "data-rayden-collapse-inner": "", children: children }) }));
+}

package/dist/motion/Collapse.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRaydenMotion } from "./MotionProvider.js";
+/** Disclosure region. Supply an external trigger with aria-expanded and aria-controls. */
+export function Collapse({ open, motion = true, children, style, ...props }) {
+    const { preset, tokens } = useRaydenMotion(motion);
+    return (_jsx("div", { ...props, ref: (element) => {
+            if (!element)
+                return;
+            if (!open && element.contains(document.activeElement)) {
+                const trigger = element.id
+                    ? Array.from(document.querySelectorAll("[aria-controls]")).find((candidate) => candidate.getAttribute("aria-controls")?.split(/\s+/).includes(element.id))
+                    : undefined;
+                if (trigger)
+                    trigger.focus({ preventScroll: true });
+                else
+                    document.activeElement?.blur();
+            }
+            element.toggleAttribute("inert", !open);
+        }, "data-rayden-collapse": "", "data-rayden-motion": preset, "data-state": open ? "open" : "closed", "aria-hidden": !open || props["aria-hidden"], style: {
+            "--rayden-motion-duration": `${open ? tokens.duration.normal : Math.round(tokens.duration.normal * 0.75)}ms`,
+            "--rayden-motion-ease": open ? tokens.ease.enter : tokens.ease.exit,
+            ...style,
+        }, children: _jsx("div", { "data-rayden-collapse-inner": "", children: children }) }));
+}

package/dist/motion/MotionProvider.cjs

@@ -0,0 +1,43 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReducedMotionPreference = useReducedMotionPreference;
+exports.MotionProvider = MotionProvider;
+exports.useRaydenMotion = useRaydenMotion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const presets_1 = require("./presets.cjs");
+const MotionContext = (0, react_1.createContext)("calm");
+const query = "(prefers-reduced-motion: reduce)";
+function subscribe(callback) {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const media = window.matchMedia(query);
+    media.addEventListener("change", callback);
+    return () => media.removeEventListener("change", callback);
+}
+function snapshot() {
+    return typeof window === "undefined" || !window.matchMedia || window.matchMedia(query).matches;
+}
+/** The server conservatively disables motion; hydration adopts the user's preference. */
+function useReducedMotionPreference() {
+    return (0, react_1.useSyncExternalStore)(subscribe, snapshot, () => true);
+}
+/** Context-only scope: nested scopes and React portals inherit without mutating document root. */
+function MotionProvider({ preset, children }) {
+    const inherited = (0, react_1.useContext)(MotionContext);
+    return (0, jsx_runtime_1.jsx)(MotionContext.Provider, { value: preset ?? inherited, children: children });
+}
+/** Passing false disables this element's motion. OS reduced motion always wins. */
+function useRaydenMotion(option = true) {
+    const inherited = (0, react_1.useContext)(MotionContext);
+    const prefersReduced = useReducedMotionPreference();
+    const requestedPreset = typeof option === "string" ? option : inherited;
+    const preset = prefersReduced || option === false ? "reduced" : requestedPreset;
+    return {
+        requestedPreset,
+        preset,
+        reducedMotion: preset === "reduced",
+        tokens: presets_1.motionPresets[preset],
+    };
+}

package/dist/motion/MotionProvider.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useSyncExternalStore } from "react";
+import { motionPresets } from "./presets.js";
+const MotionContext = createContext("calm");
+const query = "(prefers-reduced-motion: reduce)";
+function subscribe(callback) {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const media = window.matchMedia(query);
+    media.addEventListener("change", callback);
+    return () => media.removeEventListener("change", callback);
+}
+function snapshot() {
+    return typeof window === "undefined" || !window.matchMedia || window.matchMedia(query).matches;
+}
+/** The server conservatively disables motion; hydration adopts the user's preference. */
+export function useReducedMotionPreference() {
+    return useSyncExternalStore(subscribe, snapshot, () => true);
+}
+/** Context-only scope: nested scopes and React portals inherit without mutating document root. */
+export function MotionProvider({ preset, children }) {
+    const inherited = useContext(MotionContext);
+    return _jsx(MotionContext.Provider, { value: preset ?? inherited, children: children });
+}
+/** Passing false disables this element's motion. OS reduced motion always wins. */
+export function useRaydenMotion(option = true) {
+    const inherited = useContext(MotionContext);
+    const prefersReduced = useReducedMotionPreference();
+    const requestedPreset = typeof option === "string" ? option : inherited;
+    const preset = prefersReduced || option === false ? "reduced" : requestedPreset;
+    return {
+        requestedPreset,
+        preset,
+        reducedMotion: preset === "reduced",
+        tokens: motionPresets[preset],
+    };
+}

package/dist/motion/Pressable.cjs

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pressable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MotionProvider_1 = require("./MotionProvider.cjs");
+/** Native button semantics, focus and activation are retained; only press feedback is added. */
+exports.Pressable = (0, react_1.forwardRef)(function Pressable({ motion = true, type = "button", disabled, style, onPointerDown, onPointerUp, onPointerCancel, onPointerLeave, onKeyDown, onKeyUp, onBlur, ...props }, ref) {
+    const [pressed, setPressed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (disabled)
+            setPressed(false);
+    }, [disabled]);
+    const { preset, tokens } = (0, MotionProvider_1.useRaydenMotion)(motion);
+    return ((0, jsx_runtime_1.jsx)("button", { ...props, ref: ref, type: type, disabled: disabled, "data-rayden-motion": preset, "data-rayden-pressable": "", "data-pressed": pressed && !disabled, style: {
+            "--rayden-press-scale": tokens.scale.press,
+            "--rayden-motion-fast": `${tokens.duration.fast}ms`,
+            "--rayden-motion-ease": tokens.ease.standard,
+            ...style,
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            if (!event.defaultPrevented && !disabled && event.button === 0)
+                setPressed(true);
+        }, onPointerUp: (event) => {
+            setPressed(false);
+            onPointerUp?.(event);
+        }, onPointerCancel: (event) => {
+            setPressed(false);
+            onPointerCancel?.(event);
+        }, onPointerLeave: (event) => {
+            setPressed(false);
+            onPointerLeave?.(event);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented && !disabled && (event.key === " " || event.key === "Enter"))
+                setPressed(true);
+        }, onKeyUp: (event) => {
+            if (event.key === " " || event.key === "Enter")
+                setPressed(false);
+            onKeyUp?.(event);
+        }, onBlur: (event) => {
+            setPressed(false);
+            onBlur?.(event);
+        } }));
+});

package/dist/motion/Pressable.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, } from "react";
+import { useRaydenMotion } from "./MotionProvider.js";
+/** Native button semantics, focus and activation are retained; only press feedback is added. */
+export const Pressable = forwardRef(function Pressable({ motion = true, type = "button", disabled, style, onPointerDown, onPointerUp, onPointerCancel, onPointerLeave, onKeyDown, onKeyUp, onBlur, ...props }, ref) {
+    const [pressed, setPressed] = useState(false);
+    useEffect(() => {
+        if (disabled)
+            setPressed(false);
+    }, [disabled]);
+    const { preset, tokens } = useRaydenMotion(motion);
+    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled, "data-rayden-motion": preset, "data-rayden-pressable": "", "data-pressed": pressed && !disabled, style: {
+            "--rayden-press-scale": tokens.scale.press,
+            "--rayden-motion-fast": `${tokens.duration.fast}ms`,
+            "--rayden-motion-ease": tokens.ease.standard,
+            ...style,
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            if (!event.defaultPrevented && !disabled && event.button === 0)
+                setPressed(true);
+        }, onPointerUp: (event) => {
+            setPressed(false);
+            onPointerUp?.(event);
+        }, onPointerCancel: (event) => {
+            setPressed(false);
+            onPointerCancel?.(event);
+        }, onPointerLeave: (event) => {
+            setPressed(false);
+            onPointerLeave?.(event);
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented && !disabled && (event.key === " " || event.key === "Enter"))
+                setPressed(true);
+        }, onKeyUp: (event) => {
+            if (event.key === " " || event.key === "Enter")
+                setPressed(false);
+            onKeyUp?.(event);
+        }, onBlur: (event) => {
+            setPressed(false);
+            onBlur?.(event);
+        } }));
+});

package/dist/motion/Reveal.cjs

@@ -0,0 +1,19 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reveal = Reveal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const presence_1 = require("./presence.cjs");
+/** Presence for non-interactive content; exiting content is inert immediately. */
+function Reveal({ present = true, motion = true, recipe = "appear.fadeUp", children, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const state = (0, presence_1.useMotionPresence)(present, ref, motion, recipe);
+    if (!state.present)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (element) => {
+            ref.current = element;
+            // DOM attribute works in both React 18 and 19 (React 18 lacks boolean inert support).
+            element?.toggleAttribute("inert", !present);
+        }, "data-rayden-motion": state.preset, "data-state": present ? "open" : "closed", "aria-hidden": !present || props["aria-hidden"], children: children }));
+}

package/dist/motion/Reveal.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useMotionPresence } from "./presence.js";
+/** Presence for non-interactive content; exiting content is inert immediately. */
+export function Reveal({ present = true, motion = true, recipe = "appear.fadeUp", children, ...props }) {
+    const ref = useRef(null);
+    const state = useMotionPresence(present, ref, motion, recipe);
+    if (!state.present)
+        return null;
+    return (_jsx("div", { ...props, ref: (element) => {
+            ref.current = element;
+            // DOM attribute works in both React 18 and 19 (React 18 lacks boolean inert support).
+            element?.toggleAttribute("inert", !present);
+        }, "data-rayden-motion": state.preset, "data-state": present ? "open" : "closed", "aria-hidden": !present || props["aria-hidden"], children: children }));
+}

package/dist/motion/SharedLayout.cjs

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedLayout = SharedLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MotionProvider_1 = require("./MotionProvider.cjs");
+const useBrowserLayoutEffect = typeof window === "undefined" ? react_1.useEffect : react_1.useLayoutEffect;
+/** FLIP animation of this persistent element's geometry when layoutKey changes. Not cross-tree presence. */
+function SharedLayout({ layoutKey, motion = true, children, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const previous = (0, react_1.useRef)(null);
+    const animation = (0, react_1.useRef)(null);
+    const { preset, tokens } = (0, MotionProvider_1.useRaydenMotion)(motion);
+    useBrowserLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Continue interrupted movement from its current visual position, not the old target.
+        let last = previous.current;
+        if (animation.current && last) {
+            const matrix = new DOMMatrixReadOnly(getComputedStyle(element).transform);
+            last = new DOMRect(last.x + matrix.m41, last.y + matrix.m42, last.width * matrix.a, last.height * matrix.d);
+        }
+        animation.current?.cancel();
+        animation.current = null;
+        const next = element.getBoundingClientRect();
+        previous.current = next;
+        if (!last || preset === "reduced" || !next.width || !next.height || !element.animate)
+            return;
+        const running = element.animate([
+            {
+                transform: `translate(${last.x - next.x}px, ${last.y - next.y}px) scale(${last.width / next.width}, ${last.height / next.height})`,
+                transformOrigin: "0 0",
+            },
+            { transform: "none", transformOrigin: "0 0" },
+        ], { duration: tokens.duration.normal, easing: tokens.ease.standard });
+        animation.current = running;
+        running.onfinish = () => {
+            previous.current = element.getBoundingClientRect();
+            animation.current = null;
+        };
+    }, [layoutKey, preset, tokens]);
+    (0, react_1.useEffect)(() => () => animation.current?.cancel(), []);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, "data-rayden-motion": preset, children: children }));
+}

package/dist/motion/SharedLayout.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { useRaydenMotion } from "./MotionProvider.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** FLIP animation of this persistent element's geometry when layoutKey changes. Not cross-tree presence. */
+export function SharedLayout({ layoutKey, motion = true, children, ...props }) {
+    const ref = useRef(null);
+    const previous = useRef(null);
+    const animation = useRef(null);
+    const { preset, tokens } = useRaydenMotion(motion);
+    useBrowserLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Continue interrupted movement from its current visual position, not the old target.
+        let last = previous.current;
+        if (animation.current && last) {
+            const matrix = new DOMMatrixReadOnly(getComputedStyle(element).transform);
+            last = new DOMRect(last.x + matrix.m41, last.y + matrix.m42, last.width * matrix.a, last.height * matrix.d);
+        }
+        animation.current?.cancel();
+        animation.current = null;
+        const next = element.getBoundingClientRect();
+        previous.current = next;
+        if (!last || preset === "reduced" || !next.width || !next.height || !element.animate)
+            return;
+        const running = element.animate([
+            {
+                transform: `translate(${last.x - next.x}px, ${last.y - next.y}px) scale(${last.width / next.width}, ${last.height / next.height})`,
+                transformOrigin: "0 0",
+            },
+            { transform: "none", transformOrigin: "0 0" },
+        ], { duration: tokens.duration.normal, easing: tokens.ease.standard });
+        animation.current = running;
+        running.onfinish = () => {
+            previous.current = element.getBoundingClientRect();
+            animation.current = null;
+        };
+    }, [layoutKey, preset, tokens]);
+    useEffect(() => () => animation.current?.cancel(), []);
+    return (_jsx("div", { ...props, ref: ref, "data-rayden-motion": preset, children: children }));
+}

package/dist/motion/index.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMotionRecipe = exports.motionRecipes = exports.motionPresets = exports.SharedLayout = exports.Collapse = exports.Reveal = exports.Pressable = exports.useReducedMotionPreference = exports.useRaydenMotion = exports.MotionProvider = void 0;
+var MotionProvider_1 = require("./MotionProvider.cjs");
+Object.defineProperty(exports, "MotionProvider", { enumerable: true, get: function () { return MotionProvider_1.MotionProvider; } });
+Object.defineProperty(exports, "useRaydenMotion", { enumerable: true, get: function () { return MotionProvider_1.useRaydenMotion; } });
+Object.defineProperty(exports, "useReducedMotionPreference", { enumerable: true, get: function () { return MotionProvider_1.useReducedMotionPreference; } });
+var Pressable_1 = require("./Pressable.cjs");
+Object.defineProperty(exports, "Pressable", { enumerable: true, get: function () { return Pressable_1.Pressable; } });
+var Reveal_1 = require("./Reveal.cjs");
+Object.defineProperty(exports, "Reveal", { enumerable: true, get: function () { return Reveal_1.Reveal; } });
+var Collapse_1 = require("./Collapse.cjs");
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return Collapse_1.Collapse; } });
+var SharedLayout_1 = require("./SharedLayout.cjs");
+Object.defineProperty(exports, "SharedLayout", { enumerable: true, get: function () { return SharedLayout_1.SharedLayout; } });
+var presets_1 = require("./presets.cjs");
+Object.defineProperty(exports, "motionPresets", { enumerable: true, get: function () { return presets_1.motionPresets; } });
+Object.defineProperty(exports, "motionRecipes", { enumerable: true, get: function () { return presets_1.motionRecipes; } });
+Object.defineProperty(exports, "getMotionRecipe", { enumerable: true, get: function () { return presets_1.getMotionRecipe; } });

package/dist/motion/index.js

@@ -0,0 +1,6 @@
+export { MotionProvider, useRaydenMotion, useReducedMotionPreference } from "./MotionProvider.js";
+export { Pressable } from "./Pressable.js";
+export { Reveal } from "./Reveal.js";
+export { Collapse } from "./Collapse.js";
+export { SharedLayout } from "./SharedLayout.js";
+export { motionPresets, motionRecipes, getMotionRecipe } from "./presets.js";

package/dist/motion/presence.cjs

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMotionPresence = useMotionPresence;
+const react_1 = require("react");
+const MotionProvider_1 = require("./MotionProvider.cjs");
+/** Internal presence controller. Cancelled animations never complete an obsolete exit. */
+function useMotionPresence(open, ref, motion = true, recipe = "appear.fadeUp", ready = true) {
+    const { preset, tokens } = (0, MotionProvider_1.useRaydenMotion)(motion);
+    const [retained, setRetained] = (0, react_1.useState)(open);
+    const animation = (0, react_1.useRef)(null);
+    const present = open || retained;
+    (0, react_1.useEffect)(() => {
+        const element = ref.current;
+        if (!ready || !element)
+            return;
+        const currentStyle = animation.current ? getComputedStyle(element) : null;
+        const from = currentStyle
+            ? { opacity: currentStyle.opacity, transform: currentStyle.transform }
+            : null;
+        animation.current?.cancel();
+        animation.current = null;
+        setRetained(open);
+        if (preset === "reduced" || typeof element.animate !== "function")
+            return;
+        if (!open)
+            setRetained(true);
+        const hidden = {
+            opacity: 0,
+            transform: recipe === "appear.fade"
+                ? "none"
+                : recipe === "appear.scale" || recipe === "overlay.pop"
+                    ? `scale(${tokens.scale.enter})`
+                    : `translateY(${tokens.distance.short}px)`,
+        };
+        const shown = { opacity: 1, transform: "none" };
+        const running = element.animate([from ?? (open ? hidden : shown), open ? shown : hidden], {
+            duration: open ? tokens.duration.normal : Math.round(tokens.duration.normal * 0.75),
+            easing: open ? tokens.ease.enter : tokens.ease.exit,
+            fill: "both",
+        });
+        animation.current = running;
+        running.onfinish = () => {
+            animation.current = null;
+            running.cancel();
+            if (!open)
+                setRetained(false);
+        };
+        return () => {
+            // Keep the current animation until the next effect can sample its visual state.
+            running.onfinish = null;
+        };
+    }, [open, ready, preset, recipe, tokens, ref]);
+    (0, react_1.useEffect)(() => () => {
+        animation.current?.cancel();
+    }, []);
+    return { present, preset };
+}

package/dist/motion/presence.js

@@ -0,0 +1,55 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { useRaydenMotion } from "./MotionProvider.js";
+/** Internal presence controller. Cancelled animations never complete an obsolete exit. */
+export function useMotionPresence(open, ref, motion = true, recipe = "appear.fadeUp", ready = true) {
+    const { preset, tokens } = useRaydenMotion(motion);
+    const [retained, setRetained] = useState(open);
+    const animation = useRef(null);
+    const present = open || retained;
+    useEffect(() => {
+        const element = ref.current;
+        if (!ready || !element)
+            return;
+        const currentStyle = animation.current ? getComputedStyle(element) : null;
+        const from = currentStyle
+            ? { opacity: currentStyle.opacity, transform: currentStyle.transform }
+            : null;
+        animation.current?.cancel();
+        animation.current = null;
+        setRetained(open);
+        if (preset === "reduced" || typeof element.animate !== "function")
+            return;
+        if (!open)
+            setRetained(true);
+        const hidden = {
+            opacity: 0,
+            transform: recipe === "appear.fade"
+                ? "none"
+                : recipe === "appear.scale" || recipe === "overlay.pop"
+                    ? `scale(${tokens.scale.enter})`
+                    : `translateY(${tokens.distance.short}px)`,
+        };
+        const shown = { opacity: 1, transform: "none" };
+        const running = element.animate([from ?? (open ? hidden : shown), open ? shown : hidden], {
+            duration: open ? tokens.duration.normal : Math.round(tokens.duration.normal * 0.75),
+            easing: open ? tokens.ease.enter : tokens.ease.exit,
+            fill: "both",
+        });
+        animation.current = running;
+        running.onfinish = () => {
+            animation.current = null;
+            running.cancel();
+            if (!open)
+                setRetained(false);
+        };
+        return () => {
+            // Keep the current animation until the next effect can sample its visual state.
+            running.onfinish = null;
+        };
+    }, [open, ready, preset, recipe, tokens, ref]);
+    useEffect(() => () => {
+        animation.current?.cancel();
+    }, []);
+    return { present, preset };
+}

package/dist/motion/presets.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.motionRecipes = exports.motionPresets = void 0;
+exports.getMotionRecipe = getMotionRecipe;
+const ease = {
+    enter: "cubic-bezier(0.16, 1, 0.3, 1)",
+    exit: "cubic-bezier(0.4, 0, 1, 1)",
+    standard: "cubic-bezier(0.25, 1, 0.5, 1)",
+};
+exports.motionPresets = {
+    calm: {
+        duration: { instant: 0, fast: 100, normal: 220, slow: 280 },
+        ease,
+        distance: { micro: 2, short: 6 },
+        scale: { press: 0.98, enter: 0.98 },
+    },
+    snappy: {
+        duration: { instant: 0, fast: 80, normal: 140, slow: 180 },
+        ease,
+        distance: { micro: 2, short: 4 },
+        scale: { press: 0.97, enter: 0.98 },
+    },
+    playful: {
+        duration: { instant: 0, fast: 120, normal: 260, slow: 340 },
+        ease,
+        distance: { micro: 4, short: 12 },
+        scale: { press: 0.95, enter: 0.94 },
+    },
+    reduced: {
+        duration: { instant: 0, fast: 0, normal: 0, slow: 0 },
+        ease,
+        distance: { micro: 0, short: 0 },
+        scale: { press: 1, enter: 1 },
+    },
+};
+exports.motionRecipes = {
+    "appear.fade": {
+        primitive: "Reveal",
+        purpose: "Reveal content without displacement",
+        reducedMotion: "Immediate visibility",
+        engine: "waapi",
+    },
+    "appear.fadeUp": {
+        primitive: "Reveal",
+        purpose: "Introduce newly available content",
+        reducedMotion: "Immediate visibility",
+        engine: "waapi",
+    },
+    "appear.scale": {
+        primitive: "Reveal",
+        purpose: "Introduce a compact surface",
+        reducedMotion: "Immediate visibility",
+        engine: "waapi",
+    },
+    "overlay.pop": {
+        primitive: "Modal",
+        purpose: "Open or dismiss a dialog panel",
+        reducedMotion: "Immediate open and close with focus preserved",
+        engine: "waapi",
+    },
+    "selection.slideIndicator": {
+        primitive: "SharedLayout",
+        purpose: "Track tab selection",
+        reducedMotion: "Immediate selection indicator",
+        engine: "waapi",
+    },
+    "selection.sharedPill": {
+        primitive: "SharedLayout",
+        purpose: "Track segmented or pill selection",
+        reducedMotion: "Immediate selection indicator",
+        engine: "waapi",
+    },
+    "disclosure.collapse": {
+        primitive: "Collapse",
+        purpose: "Expand optional content",
+        reducedMotion: "Immediate disclosure",
+        engine: "css",
+    },
+    "feedback.press": {
+        primitive: "Pressable",
+        purpose: "Acknowledge pointer and keyboard press",
+        reducedMotion: "Native focus and active state without scaling",
+        engine: "css",
+    },
+};
+function getMotionRecipe(name, preset = "calm") {
+    return { name, ...exports.motionRecipes[name], preset, tokens: exports.motionPresets[preset] };
+}