@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Props for SlidingText component
+ *
+ * Character or word-by-word text animations with entrance/exit transitions and blur effects.
+ *
+ * @example
+ * ```tsx
+ * // Character animation (default)
+ * <SlidingText text="Hello World" mode="character" />
+ *
+ * // Word animation
+ * <SlidingText text="React Components" mode="word" />
+ *
+ * // Horizontal direction
+ * <SlidingText
+ *   text="Slide In"
+ *   direction="horizontal"
+ *   blur={false}
+ * />
+ * ```
+ */
+export interface ISlidingTextProps {
+    /** The text content to animate */
+    text: string;
+    /**
+     * Animation mode
+     * - 'character': Each character animates individually
+     * - 'word': The text animates as a unit
+     * - 'none': No animation
+     */
+    mode?: 'word' | 'character' | 'none';
+    /** Animation direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Delay between each character/word in milliseconds */
+    staggerDelay?: number;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** Enable blur effect during animation */
+    blur?: boolean;
+    /** Animate width changes during animation */
+    widthAnimation?: boolean;
+    /** Initial animation state */
+    initial?: 'initial' | false;
+    /** Trigger animation state */
+    animate?: 'animate';
+    /** Exit animation state */
+    exit?: 'exit';
+    /** Callback when animation completes */
+    onAnimationComplete?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=SlidingText.types.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlidingText.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingText/SlidingText.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IAErC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEtC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAE5B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEjC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

package/dist/react-ui/primitives/waapi/SlidingText/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ISlidingTextProps } from './SlidingText.types';
+/**
+ * SlidingText - Character or word-by-word text animations
+ *
+ * Animated text component with entrance/exit transitions and blur effects.
+ * Supports character-level or word-level animation modes.
+ *
+ * @example
+ * ```tsx
+ * // Character animation (default)
+ * <SlidingText text="Hello World" mode="character" />
+ *
+ * // Word animation
+ * <SlidingText text="React Components" mode="word" />
+ *
+ * // Exit animation
+ * <SlidingText text="Goodbye" exit="exit" />
+ * ```
+ */
+export declare const SlidingText: {
+    ({ text, mode, direction, staggerDelay, duration, easing, blur, widthAnimation, initial, exit, className, style, }: ISlidingTextProps): React.ReactElement;
+    displayName: string;
+};
+export type { ISlidingTextProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingText/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG7D;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW;wHAarB,iBAAiB,GAAG,KAAK,CAAC,YAAY;;CAkGxC,CAAC;AAIF,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/SlidingText/index.js

@@ -0,0 +1,105 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/SlidingText/index.tsx
+/**
+* SlidingText - Character or word-by-word text animations
+*
+* Animated text component with entrance/exit transitions and blur effects.
+* Supports character-level or word-level animation modes.
+*
+* @example
+* ```tsx
+* // Character animation (default)
+* <SlidingText text="Hello World" mode="character" />
+*
+* // Word animation
+* <SlidingText text="React Components" mode="word" />
+*
+* // Exit animation
+* <SlidingText text="Goodbye" exit="exit" />
+* ```
+*/
+const SlidingText = ({ text, mode = "word", direction = "vertical", staggerDelay = 15, duration = 200, easing = "cubic-bezier(0.33, 1, 0.68, 1)", blur = true, widthAnimation = false, initial = "initial", exit, className = "", style }) => {
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const hasTriggeredEnterRef = useRef(false);
+	const [showAnimate, setShowAnimate] = useState(initial !== "initial");
+	useEffect(() => {
+		if (initial === "initial" && !hasTriggeredEnterRef.current) {
+			hasTriggeredEnterRef.current = true;
+			requestAnimationFrame(() => {
+				setShowAnimate(true);
+			});
+		}
+	}, [initial]);
+	const visualState = exit === "exit" ? "exit" : showAnimate ? "animate" : "initial";
+	const elements = mode === "character" ? text.split("") : [text];
+	useLayoutEffect(() => {
+		if (!widthAnimation || !containerRef.current || !contentRef.current) return;
+		const container = containerRef.current;
+		const content = contentRef.current;
+		if (visualState === "initial") container.style.width = "0px";
+		else if (visualState === "animate") if (CSS.supports("interpolate-size", "allow-keywords")) {
+			container.style.width = "auto";
+			container.style.transition = `width ${duration}ms ${easing}`;
+		} else {
+			const targetWidth = content.scrollWidth;
+			container.style.width = `${targetWidth}px`;
+			container.style.transition = `width ${duration}ms ${easing}`;
+			const timer = setTimeout(() => {
+				container.style.width = "auto";
+			}, duration);
+			return () => clearTimeout(timer);
+		}
+		else if (visualState === "exit") {
+			const currentWidth = container.getBoundingClientRect().width;
+			container.style.width = `${currentWidth}px`;
+			container.getBoundingClientRect();
+			container.style.width = "0px";
+			container.style.transition = `width 180ms cubic-bezier(0.32, 0, 0.67, 0)`;
+		}
+	}, [
+		visualState,
+		widthAnimation,
+		duration,
+		easing,
+		text
+	]);
+	const getTransitionStyle = (index) => {
+		const delay = index * staggerDelay;
+		const isExit = visualState === "exit";
+		const currentDuration = isExit ? 180 : duration;
+		const currentEasing = isExit ? "cubic-bezier(0.32, 0, 0.67, 0)" : easing;
+		return {
+			transition: `
+        opacity ${currentDuration}ms ${currentEasing} ${delay}ms,
+        transform ${currentDuration}ms ${currentEasing} ${delay}ms,
+        filter ${currentDuration}ms ${currentEasing} ${delay}ms
+      `,
+			"--blur-amount": blur ? "4px" : "0px",
+			"--offset": direction === "vertical" ? "8px" : "16px"
+		};
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("waapi-sliding-text-container", className),
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: cn("waapi-sliding-text-content", `waapi-direction-${direction}`),
+			children: elements.map((char, index) => /* @__PURE__ */ jsx("span", {
+				className: cn("waapi-sliding-text-token", visualState === "initial" && "enter-from", visualState === "animate" && "enter-to", visualState === "exit" && "exit-active"),
+				style: getTransitionStyle(index),
+				children: char
+			}, index))
+		})
+	});
+};
+SlidingText.displayName = "SlidingText";
+
+//#endregion
+export { SlidingText };

package/dist/react-ui/primitives/waapi/core/animationConstants.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Obtains responsive animation duration for the current device.
+ * Returns 0 if the user prefers reduced motion, 60% on mobile.
+ * @param baseDuration - Base duration in ms
+ * @returns Adjusted duration for the current device
+ */
+export declare const getResponsiveDuration: (baseDuration: number) => number;
+/**
+ * Obtains responsive stagger delay for the current device.
+ * Returns 0 if the user prefers reduced motion, 50% on mobile.
+ * @param baseDelay - Base delay in ms
+ * @returns Adjusted delay for the current device
+ */
+export declare const getResponsiveStagger: (baseDelay: number) => number;
+/** Core timing constants (ms) */
+export declare const TIMING: {
+    readonly ENTER_DURATION: 200;
+    readonly EXIT_DURATION: 180;
+    readonly COLLAPSE_DURATION: 200;
+    readonly FLIP_DURATION: 300;
+    readonly ENTER_STAGGER: 15;
+    readonly EXIT_STAGGER: 0;
+    readonly COLLAPSE_DELAY: 30;
+    readonly FLIP_DELAY_PERCENT: 0.25;
+    readonly MIN_DELTA_PX: 1;
+};
+/** Transform offsets (px/deg) */
+export declare const TRANSFORMS: {
+    readonly OFFSET_Y_ENTER: 8;
+    readonly OFFSET_Y_EXIT: -8;
+    readonly OFFSET_X: 16;
+    readonly SCALE_ENTER: 0.85;
+    readonly SCALE_EXIT: 0.85;
+    readonly ROTATE_EXIT: 0;
+};
+/** Visual effects */
+export declare const EFFECTS: {
+    readonly BLUR_ENTER: 4;
+    readonly BLUR_EXIT: 2;
+};
+/** Research-based easing curves (Material Design + CSS-Tricks + Josh W. Comeau) */
+export declare const EASINGS: {
+    readonly MATERIAL_DECELERATE: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly MATERIAL_ACCELERATE: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly MATERIAL_STANDARD: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly EASE_REORDER: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    readonly EASE_OUT_CUBIC: "cubic-bezier(0.33, 1, 0.68, 1)";
+    readonly EASE_IN_CUBIC: "cubic-bezier(0.32, 0, 0.67, 0)";
+    readonly EASE_IN_OUT: "cubic-bezier(0.42, 0, 0.58, 1)";
+    readonly EASE_OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)";
+    readonly EASE_FLIP: "cubic-bezier(0.2, 0, 0.2, 1)";
+    readonly SPRING_GENTLE: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    readonly SPRING_SNAPPY: "linear(0, 0.006, 0.024 2%, 0.096 4.2%, 0.397 9.3%, 0.861 15.8%, 1.002 18.7%, 1.093 21.4%, 1.143 24%, 1.156, 1.149 28.3%, 1.115 31.5%, 1.022 40%, 0.988 47.1%, 0.984 55.1%, 0.998 72.3%, 1.001 85.4%, 1)";
+};
+/** Responsive animation configurations with accessibility */
+export declare const RESPONSIVE_CONFIGS: {
+    readonly tokenEnter: {
+        readonly duration: number;
+        readonly stagger: number;
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly blur: 4;
+        readonly offsetY: 8;
+        readonly scale: 0.85;
+    };
+    readonly tokenExit: {
+        readonly duration: number;
+        readonly stagger: number;
+        readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly blur: 2;
+        readonly offsetY: -8;
+        readonly scale: 0.85;
+    };
+    readonly collapse: {
+        readonly duration: number;
+        readonly delay: 30;
+        readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly flip: {
+        readonly duration: number;
+        readonly delayPercent: 0.25;
+        readonly easing: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    };
+};
+/** Legacy defaults for backward compatibility */
+export declare const ANIMATION_DEFAULTS: {
+    DURATION_ENTER: 200;
+    DURATION_EXIT: 180;
+    DURATION_FLIP: 300;
+    STAGGER_DELAY: 15;
+    OFFSET_VERTICAL: 8;
+    OFFSET_HORIZONTAL: 16;
+    BLUR_AMOUNT: 4;
+    EASING_ENTER: "cubic-bezier(0.33, 1, 0.68, 1)";
+    EASING_EXIT: "cubic-bezier(0.32, 0, 0.67, 0)";
+    EASING_FLIP: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+    SPRING_EASING: "linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)";
+};
+/** Composite presets for specific use cases */
+export declare const ANIMATION_CONFIGS: {
+    readonly tokenEnter: {
+        readonly duration: 200;
+        readonly stagger: 15;
+        readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly blur: 4;
+        readonly offsetY: 8;
+        readonly scale: 0.85;
+    };
+    readonly tokenExit: {
+        readonly duration: 180;
+        readonly stagger: 0;
+        readonly easing: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly blur: 2;
+        readonly offsetY: -8;
+        readonly scale: 0.85;
+    };
+    readonly collapse: {
+        readonly duration: 200;
+        readonly delay: 30;
+        readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly flip: {
+        readonly duration: 300;
+        readonly delayPercent: 0.25;
+        readonly easing: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    };
+};
+/** High-level animation presets */
+export declare const PRESETS: {
+    newToken: {
+        mode: "character";
+        direction: "vertical";
+        staggerDelay: number;
+        blur: boolean;
+        widthAnimation: boolean;
+        duration: number;
+        initial: "initial";
+    };
+    existingToken: {
+        mode: "none";
+        blur: boolean;
+        widthAnimation: boolean;
+        initial: false;
+    };
+    placeholder: {
+        mode: "word";
+        direction: "vertical";
+        blur: boolean;
+        widthAnimation: boolean;
+        duration: number;
+    };
+    separator: {
+        duration: number;
+        widthAnimation: boolean;
+    };
+};
+//# sourceMappingURL=animationConstants.d.ts.map

package/dist/react-ui/primitives/waapi/core/animationConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationConstants.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/core/animationConstants.ts"],"names":[],"mappings":"AAcA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,cAAc,MAAM,KAAG,MAY5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,KAAG,MAQxD,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,MAAM;;;;;;;;;;CAaT,CAAC;AAEX,iCAAiC;AACjC,eAAO,MAAM,UAAU;;;;;;;CASb,CAAC;AAEX,qBAAqB;AACrB,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,mFAAmF;AACnF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAiBV,CAAC;AAEX,6DAA6D;AAC7D,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC;AAEX,iDAAiD;AACjD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;CAgB9B,CAAC;AAEF,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BpB,CAAC;AAEX,mCAAmC;AACnC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnB,CAAC"}

package/dist/react-ui/primitives/waapi/core/animationConstants.js

@@ -0,0 +1,180 @@
+//#region src/react-ui/primitives/waapi/core/animationConstants.ts
+/**
+* Obtains responsive animation duration for the current device.
+* Returns 0 if the user prefers reduced motion, 60% on mobile.
+* @param baseDuration - Base duration in ms
+* @returns Adjusted duration for the current device
+*/
+const getResponsiveDuration = (baseDuration) => {
+	if (typeof window === "undefined") return baseDuration;
+	if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+	if (window.innerWidth < 768) return Math.round(baseDuration * .6);
+	return baseDuration;
+};
+/**
+* Obtains responsive stagger delay for the current device.
+* Returns 0 if the user prefers reduced motion, 50% on mobile.
+* @param baseDelay - Base delay in ms
+* @returns Adjusted delay for the current device
+*/
+const getResponsiveStagger = (baseDelay) => {
+	if (typeof window === "undefined") return baseDelay;
+	if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
+	return window.innerWidth < 768 ? Math.round(baseDelay * .5) : baseDelay;
+};
+/** Core timing constants (ms) */
+const TIMING = {
+	ENTER_DURATION: 200,
+	EXIT_DURATION: 180,
+	COLLAPSE_DURATION: 200,
+	FLIP_DURATION: 300,
+	ENTER_STAGGER: 15,
+	EXIT_STAGGER: 0,
+	COLLAPSE_DELAY: 30,
+	FLIP_DELAY_PERCENT: .25,
+	MIN_DELTA_PX: 1
+};
+/** Transform offsets (px/deg) */
+const TRANSFORMS = {
+	OFFSET_Y_ENTER: 8,
+	OFFSET_Y_EXIT: -8,
+	OFFSET_X: 16,
+	SCALE_ENTER: .85,
+	SCALE_EXIT: .85,
+	ROTATE_EXIT: 0
+};
+/** Visual effects */
+const EFFECTS = {
+	BLUR_ENTER: 4,
+	BLUR_EXIT: 2
+};
+/** Research-based easing curves (Material Design + CSS-Tricks + Josh W. Comeau) */
+const EASINGS = {
+	MATERIAL_DECELERATE: "cubic-bezier(0, 0, 0.2, 1)",
+	MATERIAL_ACCELERATE: "cubic-bezier(0.4, 0, 1, 1)",
+	MATERIAL_STANDARD: "cubic-bezier(0.4, 0, 0.2, 1)",
+	EASE_REORDER: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+	EASE_OUT_CUBIC: "cubic-bezier(0.33, 1, 0.68, 1)",
+	EASE_IN_CUBIC: "cubic-bezier(0.32, 0, 0.67, 0)",
+	EASE_IN_OUT: "cubic-bezier(0.42, 0, 0.58, 1)",
+	EASE_OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)",
+	EASE_FLIP: "cubic-bezier(0.2, 0, 0.2, 1)",
+	SPRING_GENTLE: `linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)`,
+	SPRING_SNAPPY: `linear(0, 0.006, 0.024 2%, 0.096 4.2%, 0.397 9.3%, 0.861 15.8%, 1.002 18.7%, 1.093 21.4%, 1.143 24%, 1.156, 1.149 28.3%, 1.115 31.5%, 1.022 40%, 0.988 47.1%, 0.984 55.1%, 0.998 72.3%, 1.001 85.4%, 1)`
+};
+/** Responsive animation configurations with accessibility */
+const RESPONSIVE_CONFIGS = {
+	tokenEnter: {
+		get duration() {
+			return getResponsiveDuration(TIMING.ENTER_DURATION);
+		},
+		get stagger() {
+			return getResponsiveStagger(TIMING.ENTER_STAGGER);
+		},
+		easing: EASINGS.MATERIAL_DECELERATE,
+		blur: EFFECTS.BLUR_ENTER,
+		offsetY: TRANSFORMS.OFFSET_Y_ENTER,
+		scale: TRANSFORMS.SCALE_ENTER
+	},
+	tokenExit: {
+		get duration() {
+			return getResponsiveDuration(TIMING.EXIT_DURATION);
+		},
+		get stagger() {
+			return getResponsiveStagger(TIMING.EXIT_STAGGER);
+		},
+		easing: EASINGS.MATERIAL_ACCELERATE,
+		blur: EFFECTS.BLUR_EXIT,
+		offsetY: TRANSFORMS.OFFSET_Y_EXIT,
+		scale: TRANSFORMS.SCALE_EXIT
+	},
+	collapse: {
+		get duration() {
+			return getResponsiveDuration(TIMING.COLLAPSE_DURATION);
+		},
+		delay: TIMING.COLLAPSE_DELAY,
+		easing: EASINGS.MATERIAL_STANDARD
+	},
+	flip: {
+		get duration() {
+			return getResponsiveDuration(TIMING.FLIP_DURATION);
+		},
+		delayPercent: TIMING.FLIP_DELAY_PERCENT,
+		easing: EASINGS.EASE_REORDER
+	}
+};
+/** Legacy defaults for backward compatibility */
+const ANIMATION_DEFAULTS = {
+	DURATION_ENTER: TIMING.ENTER_DURATION,
+	DURATION_EXIT: TIMING.EXIT_DURATION,
+	DURATION_FLIP: TIMING.FLIP_DURATION,
+	STAGGER_DELAY: TIMING.ENTER_STAGGER,
+	OFFSET_VERTICAL: TRANSFORMS.OFFSET_Y_ENTER,
+	OFFSET_HORIZONTAL: TRANSFORMS.OFFSET_X,
+	BLUR_AMOUNT: EFFECTS.BLUR_ENTER,
+	EASING_ENTER: EASINGS.EASE_OUT_CUBIC,
+	EASING_EXIT: EASINGS.EASE_IN_CUBIC,
+	EASING_FLIP: EASINGS.SPRING_GENTLE,
+	SPRING_EASING: EASINGS.SPRING_GENTLE
+};
+/** Composite presets for specific use cases */
+const ANIMATION_CONFIGS = {
+	tokenEnter: {
+		duration: TIMING.ENTER_DURATION,
+		stagger: TIMING.ENTER_STAGGER,
+		easing: EASINGS.MATERIAL_DECELERATE,
+		blur: EFFECTS.BLUR_ENTER,
+		offsetY: TRANSFORMS.OFFSET_Y_ENTER,
+		scale: TRANSFORMS.SCALE_ENTER
+	},
+	tokenExit: {
+		duration: TIMING.EXIT_DURATION,
+		stagger: TIMING.EXIT_STAGGER,
+		easing: EASINGS.MATERIAL_ACCELERATE,
+		blur: EFFECTS.BLUR_EXIT,
+		offsetY: TRANSFORMS.OFFSET_Y_EXIT,
+		scale: TRANSFORMS.SCALE_EXIT
+	},
+	collapse: {
+		duration: TIMING.COLLAPSE_DURATION,
+		delay: TIMING.COLLAPSE_DELAY,
+		easing: EASINGS.MATERIAL_STANDARD
+	},
+	flip: {
+		duration: TIMING.FLIP_DURATION,
+		delayPercent: TIMING.FLIP_DELAY_PERCENT,
+		easing: EASINGS.EASE_REORDER
+	}
+};
+/** High-level animation presets */
+const PRESETS = {
+	newToken: {
+		mode: "character",
+		direction: "vertical",
+		staggerDelay: 15,
+		blur: true,
+		widthAnimation: true,
+		duration: 200,
+		initial: "initial"
+	},
+	existingToken: {
+		mode: "none",
+		blur: false,
+		widthAnimation: false,
+		initial: false
+	},
+	placeholder: {
+		mode: "word",
+		direction: "vertical",
+		blur: true,
+		widthAnimation: false,
+		duration: 150
+	},
+	separator: {
+		duration: 100,
+		widthAnimation: true
+	}
+};
+
+//#endregion
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger };

package/dist/react-ui/primitives/waapi/core/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * WAAPI Core — FLIP animation infrastructure.
+ *
+ * Provides the composable hooks and constants that power
+ * Reorder, Morph, and other WAAPI primitives.
+ *
+ * @module primitives/waapi/core
+ */
+export { TIMING, TRANSFORMS, EFFECTS, EASINGS, RESPONSIVE_CONFIGS, ANIMATION_CONFIGS, ANIMATION_DEFAULTS, PRESETS, getResponsiveDuration, getResponsiveStagger, } from './animationConstants';
+export type { IFLIPDelta, IAnimationTiming, IPositionRect, IElementRegistryAPI, IElementRegistryCallbacks, IPositionCaptureAPI, IPositionCaptureOptions, IFLIPAnimationAPI, IFLIPAnimationOptions, IExitOptions, IEnterOptions, IAnimationOrchestratorConfig, IAnimationOrchestratorAPI, IOrchestratorState, IAnimationEvent, } from './types';
+export type { FLIPBehavior, ExitPositionStrategy, AnimationPhase, } from './types';
+export { useElementRegistry } from './useElementRegistry';
+export { usePositionCapture } from './usePositionCapture';
+export { useFLIPAnimation } from './useFLIPAnimation';
+export { useAnimationOrchestrator } from './useAnimationOrchestrator';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAG9B,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,4BAA4B,EAC5B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,GAChB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/react-ui/primitives/waapi/core/index.js

@@ -0,0 +1,5 @@
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./animationConstants.js";
+import { useElementRegistry } from "./useElementRegistry.js";
+import { usePositionCapture } from "./usePositionCapture.js";
+import { useFLIPAnimation } from "./useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./useAnimationOrchestrator.js";