@enact-ui/animate 0.1.0 → 0.2.0

package/dist/presets/micro-interactions.js

@@ -0,0 +1,856 @@
+// Copyright (c) 2026 Amsterdam Data Labs
+import { getMotionStyle, msToSeconds } from "./motion-styles";
+/**
+ * Checks if the user prefers reduced motion.
+ * Returns true if reduced motion is preferred, false otherwise.
+ *
+ * @returns Whether reduced motion is preferred
+ */
+function prefersReducedMotion() {
+    if (typeof window === "undefined")
+        return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+ * Returns empty props for reduced motion scenarios.
+ * Animations are disabled while maintaining component functionality.
+ */
+function getReducedMotionProps() {
+    return {};
+}
+// =============================================================================
+// BUTTON PRESS PRESET
+// =============================================================================
+/**
+ * Button Press Micro-Interaction
+ *
+ * Creates a subtle press effect where the element scales down slightly when clicked
+ * and springs back to its original size on release. Provides tactile feedback for
+ * interactive elements.
+ *
+ * @ai-hint Use buttonPress for clickable elements like buttons, cards, or list items
+ * that need tactile feedback. Best for primary actions and interactive controls.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { buttonPress } from "@enact-ui/animate";
+ *
+ * function Button({ children }) {
+ *   const props = buttonPress.getProps("standard");
+ *   return <motion.button {...props}>{children}</motion.button>;
+ * }
+ * ```
+ */
+export const buttonPress = {
+    name: "buttonPress",
+    description: "Scale down slightly on press, spring back on release",
+    useCase: ["buttons", "clickable cards", "list items", "interactive elements", "call-to-action"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const scaleAmount = style === "subtle" ? 0.98 : style === "playful" ? 0.92 : 0.95;
+        return {
+            whileTap: {
+                scale: scaleAmount,
+            },
+            whileHover: {
+                scale: style === "subtle" ? 1.01 : 1.02,
+            },
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness,
+                damping: config.spring.damping,
+                mass: config.spring.mass,
+            },
+        };
+    },
+};
+// =============================================================================
+// CARD HOVER PRESET
+// =============================================================================
+/**
+ * Card Hover Micro-Interaction
+ *
+ * Creates a subtle lift effect with shadow enhancement when hovering over card-like
+ * elements. Provides visual depth and indicates interactivity.
+ *
+ * @ai-hint Use cardHover for cards, tiles, or panels that are clickable or expandable.
+ * Creates a "lifting" effect that suggests the element can be interacted with.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { cardHover } from "@enact-ui/animate";
+ *
+ * function Card({ children }) {
+ *   const props = cardHover.getProps("standard");
+ *   return <motion.article {...props}>{children}</motion.article>;
+ * }
+ * ```
+ */
+export const cardHover = {
+    name: "cardHover",
+    description: "Subtle lift with shadow enhancement on hover",
+    useCase: ["cards", "tiles", "panels", "content blocks", "media items", "product listings"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const liftAmount = style === "subtle" ? -2 : style === "playful" ? -8 : -4;
+        const shadowIntensity = style === "subtle" ? 0.08 : style === "playful" ? 0.2 : 0.12;
+        return {
+            whileHover: {
+                y: liftAmount,
+                boxShadow: `0 ${Math.abs(liftAmount) * 2}px ${Math.abs(liftAmount) * 4}px rgba(0, 0, 0, ${shadowIntensity})`,
+            },
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness,
+                damping: config.spring.damping,
+                mass: config.spring.mass,
+            },
+        };
+    },
+};
+// =============================================================================
+// ICON SPIN PRESET
+// =============================================================================
+/**
+ * Icon Spin Micro-Interaction
+ *
+ * Performs a full 360-degree rotation, ideal for refresh icons, loading indicators,
+ * or interactive feedback on icon clicks.
+ *
+ * @ai-hint Use iconSpin for refresh buttons, sync icons, or loading states.
+ * Good for indicating an action is in progress or for playful icon interactions.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { iconSpin } from "@enact-ui/animate";
+ *
+ * function RefreshButton() {
+ *   const props = iconSpin.getProps("standard");
+ *   return (
+ *     <motion.button {...props}>
+ *       <RefreshIcon />
+ *     </motion.button>
+ *   );
+ * }
+ * ```
+ */
+export const iconSpin = {
+    name: "iconSpin",
+    description: "360 degree rotation animation",
+    useCase: ["refresh buttons", "sync icons", "loading indicators", "settings icons", "interactive icons"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        return {
+            whileTap: {
+                rotate: 360,
+            },
+            whileHover: {
+                rotate: style === "playful" ? 15 : 5,
+            },
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness * 0.8,
+                damping: config.spring.damping,
+                mass: config.spring.mass,
+            },
+        };
+    },
+};
+// =============================================================================
+// PULSE PRESET
+// =============================================================================
+/**
+ * Pulse Micro-Interaction
+ *
+ * Creates a breathing/pulsing scale animation. Can be used for attention-grabbing
+ * elements, loading states, or to indicate something is active/live.
+ *
+ * @ai-hint Use pulse for notifications, live indicators, or elements needing attention.
+ * The breathing effect draws the eye without being too distracting.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { pulse } from "@enact-ui/animate";
+ *
+ * function LiveIndicator() {
+ *   const props = pulse.getProps("standard");
+ *   return <motion.span {...props} className="live-dot" />;
+ * }
+ * ```
+ */
+export const pulse = {
+    name: "pulse",
+    description: "Scale pulse animation with breathing effect",
+    useCase: ["notifications", "live indicators", "attention grabbers", "status badges", "loading states"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const scaleRange = style === "subtle" ? 1.03 : style === "playful" ? 1.12 : 1.06;
+        return {
+            initial: {
+                scale: 1,
+            },
+            animate: {
+                scale: [1, scaleRange, 1],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.slow),
+                repeat: Infinity,
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// SHAKE PRESET
+// =============================================================================
+/**
+ * Shake Micro-Interaction
+ *
+ * Horizontal shake animation commonly used for error states, invalid input,
+ * or to indicate that an action cannot be completed.
+ *
+ * @ai-hint Use shake for error states, invalid form inputs, or denied actions.
+ * The horizontal movement mimics the "no" head shake gesture.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { shake } from "@enact-ui/animate";
+ *
+ * function FormInput({ error }) {
+ *   const props = error ? shake.getProps("standard") : {};
+ *   return <motion.input {...props} />;
+ * }
+ * ```
+ */
+export const shake = {
+    name: "shake",
+    description: "Horizontal shake animation for error states",
+    useCase: ["error states", "invalid inputs", "denied actions", "form validation", "authentication failures"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const shakeDistance = style === "subtle" ? 4 : style === "playful" ? 12 : 8;
+        return {
+            initial: {
+                x: 0,
+            },
+            animate: {
+                x: [0, -shakeDistance, shakeDistance, -shakeDistance, shakeDistance, 0],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.fast),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// WIGGLE PRESET
+// =============================================================================
+/**
+ * Wiggle Micro-Interaction
+ *
+ * Playful rotation wiggle animation. Great for drawing attention to elements
+ * in a fun, non-intrusive way. Often used in gamified interfaces or
+ * celebratory moments.
+ *
+ * @ai-hint Use wiggle for playful interfaces, gamification, or to draw attention
+ * to elements in a fun way. Works well for icons, badges, or decorative elements.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { wiggle } from "@enact-ui/animate";
+ *
+ * function AchievementBadge() {
+ *   const props = wiggle.getProps("playful");
+ *   return <motion.div {...props}><BadgeIcon /></motion.div>;
+ * }
+ * ```
+ */
+export const wiggle = {
+    name: "wiggle",
+    description: "Playful rotation wiggle animation",
+    useCase: ["playful interfaces", "gamification", "attention indicators", "celebration elements", "decorative icons"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const wiggleAngle = style === "subtle" ? 3 : style === "playful" ? 12 : 6;
+        return {
+            whileHover: {
+                rotate: [0, -wiggleAngle, wiggleAngle, -wiggleAngle, wiggleAngle, 0],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.normal),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// HEARTBEAT PRESET
+// =============================================================================
+/**
+ * Heartbeat Micro-Interaction
+ *
+ * Double-pulse heartbeat pattern that creates a realistic heartbeat effect.
+ * Perfect for health apps, like buttons, or emphasizing something "alive".
+ *
+ * @ai-hint Use heartbeat for health/fitness apps, like/love buttons, or to indicate
+ * something is active/alive. The double-pulse mimics a real heartbeat rhythm.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { heartbeat } from "@enact-ui/animate";
+ *
+ * function LikeButton({ isLiked }) {
+ *   const props = isLiked ? heartbeat.getProps("playful") : {};
+ *   return <motion.button {...props}><HeartIcon /></motion.button>;
+ * }
+ * ```
+ */
+export const heartbeat = {
+    name: "heartbeat",
+    description: "Double-pulse heartbeat pattern animation",
+    useCase: ["like buttons", "health apps", "love reactions", "favorite indicators", "activity monitors"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const pulseScale = style === "subtle" ? 1.1 : style === "playful" ? 1.3 : 1.2;
+        return {
+            initial: {
+                scale: 1,
+            },
+            animate: {
+                scale: [1, pulseScale, 1, pulseScale * 0.95, 1],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.slow * 1.5),
+                repeat: Infinity,
+                repeatDelay: msToSeconds(config.duration.normal),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// RUBBER BAND PRESET
+// =============================================================================
+/**
+ * Rubber Band Micro-Interaction
+ *
+ * Elastic stretch and snap back animation inspired by the classic rubber band effect.
+ * Creates a bouncy, playful feel that's perfect for attention-grabbing elements.
+ *
+ * @ai-hint Use rubberBand for emphasis animations, attention grabbers, or playful
+ * interfaces. The elastic effect creates a memorable, tactile impression.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { rubberBand } from "@enact-ui/animate";
+ *
+ * function BouncyButton({ children }) {
+ *   const props = rubberBand.getProps("playful");
+ *   return <motion.button {...props}>{children}</motion.button>;
+ * }
+ * ```
+ */
+export const rubberBand = {
+    name: "rubberBand",
+    description: "Elastic stretch and snap back animation",
+    useCase: ["emphasis animations", "attention grabbers", "playful buttons", "celebration effects", "interactive feedback"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const stretchX = style === "subtle" ? 1.05 : style === "playful" ? 1.25 : 1.15;
+        const stretchY = style === "subtle" ? 0.95 : style === "playful" ? 0.75 : 0.85;
+        return {
+            whileTap: {
+                scaleX: [1, stretchX, 0.95, 1.05, 1],
+                scaleY: [1, stretchY, 1.05, 0.95, 1],
+            },
+            whileHover: {
+                scaleX: 1.02,
+                scaleY: 0.98,
+            },
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness * 0.6,
+                damping: config.spring.damping * 0.5,
+                mass: config.spring.mass,
+            },
+        };
+    },
+};
+// =============================================================================
+// SCALE PRESET (Micro-Interaction)
+// =============================================================================
+/**
+ * Scale Micro-Interaction
+ *
+ * Creates a scale animation effect for selection feedback. The element scales up
+ * briefly when activated, providing satisfying tactile feedback for toggles,
+ * checkboxes, and selection states.
+ *
+ * @ai-hint Use scale for checkboxes, toggles, radio buttons, or any selection
+ * feedback. The scale effect provides clear visual confirmation of state change.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { scale } from "@enact-ui/animate";
+ *
+ * function Checkbox({ isSelected }) {
+ *   const props = isSelected ? scale.getProps("standard") : {};
+ *   return <motion.div {...props}>{isSelected && <Check />}</motion.div>;
+ * }
+ * ```
+ */
+export const scale = {
+    name: "scale",
+    description: "Scale up animation for selection feedback",
+    useCase: ["checkboxes", "toggles", "radio buttons", "selection states", "activation feedback"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const scaleAmount = style === "subtle" ? 1.05 : style === "playful" ? 1.2 : 1.1;
+        return {
+            initial: {
+                scale: 0.8,
+                opacity: 0,
+            },
+            animate: {
+                scale: [0.8, scaleAmount, 1],
+                opacity: 1,
+            },
+            transition: {
+                type: "spring",
+                stiffness: config.spring.stiffness,
+                damping: config.spring.damping,
+                mass: config.spring.mass,
+            },
+        };
+    },
+};
+// =============================================================================
+// SHIMMER PRESET
+// =============================================================================
+/**
+ * Shimmer Micro-Interaction
+ *
+ * Creates a gradient shimmer effect that slides across the element.
+ * Perfect for loading skeletons, progress indicators, or placeholder content.
+ *
+ * @ai-hint Use shimmer for skeleton loading states, progress bars, or placeholder
+ * content. Creates a polished "loading" appearance that indicates content is coming.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { shimmer } from "@enact-ui/animate";
+ *
+ * function SkeletonCard() {
+ *   const props = shimmer.getProps("standard");
+ *   return (
+ *     <motion.div
+ *       {...props}
+ *       className="h-20 bg-gray-200 rounded overflow-hidden relative"
+ *       style={{
+ *         background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+ *         backgroundSize: "200% 100%",
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const shimmer = {
+    name: "shimmer",
+    description: "Gradient shimmer effect that slides across the element",
+    useCase: ["skeleton loading", "placeholder content", "progress indicators", "loading states", "content placeholders"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const duration = style === "subtle" ? 2 : style === "playful" ? 1.2 : 1.5;
+        return {
+            initial: {
+                backgroundPosition: "200% 0",
+            },
+            animate: {
+                backgroundPosition: ["-200% 0", "200% 0"],
+            },
+            transition: {
+                duration,
+                repeat: Infinity,
+                ease: config.easing.exit,
+                repeatDelay: 0.5,
+            },
+        };
+    },
+};
+// =============================================================================
+// GLOW PULSE PRESET
+// =============================================================================
+/**
+ * Glow Pulse Micro-Interaction
+ *
+ * Creates a glowing pulse effect using box-shadow. Perfect for AI-generated
+ * content indicators, special items, or elements that need extra emphasis.
+ *
+ * @ai-hint Use glowPulse for AI content indicators, featured items, or elements
+ * needing premium emphasis. The glow effect creates a "magical" or "special" feel.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { glowPulse } from "@enact-ui/animate";
+ *
+ * function AIGeneratedBadge() {
+ *   const props = glowPulse.getProps("standard");
+ *   return <motion.span {...props} className="ai-badge">AI</motion.span>;
+ * }
+ * ```
+ */
+export const glowPulse = {
+    name: "glowPulse",
+    description: "Glowing pulse effect for emphasis and AI indicators",
+    useCase: ["AI content indicators", "featured items", "premium elements", "special badges", "magical effects"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const glowIntensity = style === "subtle" ? 8 : style === "playful" ? 20 : 12;
+        const glowColor = "rgba(99, 102, 241, 0.6)"; // Indigo glow
+        return {
+            initial: {
+                boxShadow: `0 0 0 rgba(99, 102, 241, 0)`,
+            },
+            animate: {
+                boxShadow: [`0 0 0 rgba(99, 102, 241, 0)`, `0 0 ${glowIntensity}px ${glowColor}`, `0 0 0 rgba(99, 102, 241, 0)`],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.slow * 1.5),
+                repeat: Infinity,
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// PROGRESS FILL PRESET
+// =============================================================================
+/**
+ * Progress Fill Micro-Interaction
+ *
+ * Animates width from 0% to the target value. Perfect for progress bars,
+ * completion indicators, and skill bars.
+ *
+ * Note: This preset returns a function that takes the target percentage
+ * and returns animation props. Use with scaleX transform for best performance.
+ *
+ * @ai-hint Use progressFill for progress bars, skill meters, or completion
+ * indicators. Animates smoothly from 0 to the target percentage.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { progressFill } from "@enact-ui/animate";
+ *
+ * function ProgressBar({ value }: { value: number }) {
+ *   const props = progressFill.getProps("standard");
+ *   return (
+ *     <div className="h-2 bg-gray-200 rounded overflow-hidden">
+ *       <motion.div
+ *         {...props}
+ *         className="h-full bg-blue-500 origin-left"
+ *         style={{ width: `${value}%` }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const progressFill = {
+    name: "progressFill",
+    description: "Animated fill from 0% to target width for progress bars",
+    useCase: ["progress bars", "completion indicators", "skill bars", "loading progress", "data visualization"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const duration = style === "subtle" ? 0.6 : style === "playful" ? 1.2 : 0.8;
+        return {
+            initial: {
+                scaleX: 0,
+            },
+            animate: {
+                scaleX: 1,
+            },
+            transition: {
+                duration,
+                ease: config.easing.exit,
+            },
+        };
+    },
+};
+// =============================================================================
+// PRESET COLLECTION
+// =============================================================================
+/**
+ * All available micro-interaction presets indexed by name.
+ *
+ * @ai-hint Use this collection to iterate over all presets or to access
+ * presets by name dynamically. Each preset adapts to the motion style.
+ *
+ * @example
+ * ```tsx
+ * import { microInteractions } from "@enact-ui/animate";
+ *
+ * // Get a specific preset by name
+ * const pressProps = microInteractions.buttonPress.getProps("standard");
+ *
+ * // List all available presets
+ * Object.keys(microInteractions).forEach(name => {
+ *   console.log(microInteractions[name].description);
+ * });
+ * ```
+ */
+// =============================================================================
+// CHECKMARK DRAW PRESET
+// =============================================================================
+/**
+ * Checkmark Draw Micro-Interaction
+ *
+ * Animated checkmark draw effect, commonly used for success states,
+ * completed tasks, or confirmation feedback.
+ *
+ * @ai-hint Use checkmarkDraw for success confirmations, completed checkboxes,
+ * or any "done" state indication. The drawing animation provides satisfying feedback.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { checkmarkDraw } from "@enact-ui/animate";
+ *
+ * function SuccessIcon() {
+ *   const props = checkmarkDraw.getProps("standard");
+ *   return <motion.svg {...props}><path d="M5 13l4 4L19 7" /></motion.svg>;
+ * }
+ * ```
+ */
+export const checkmarkDraw = {
+    name: "checkmarkDraw",
+    description: "Animated checkmark draw effect for success states",
+    useCase: ["success confirmations", "completed tasks", "checkboxes", "form submissions", "achievement unlocks"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const duration = style === "subtle" ? config.duration.fast : style === "playful" ? config.duration.slow : config.duration.normal;
+        return {
+            initial: {
+                pathLength: 0,
+                opacity: 0,
+            },
+            animate: {
+                pathLength: 1,
+                opacity: 1,
+            },
+            transition: {
+                duration: msToSeconds(duration),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// SUCCESS FLASH PRESET
+// =============================================================================
+/**
+ * Success Flash Micro-Interaction
+ *
+ * Brief highlight flash animation for success feedback. Creates a quick
+ * visual confirmation without being distracting.
+ *
+ * @ai-hint Use successFlash for brief success highlights, toast notifications,
+ * or inline success messages. The flash draws attention without lingering.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { successFlash } from "@enact-ui/animate";
+ *
+ * function SuccessMessage() {
+ *   const props = successFlash.getProps("standard");
+ *   return <motion.div {...props}>Saved!</motion.div>;
+ * }
+ * ```
+ */
+export const successFlash = {
+    name: "successFlash",
+    description: "Brief success highlight flash animation",
+    useCase: ["success toasts", "inline confirmations", "save indicators", "completion feedback", "achievement notifications"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const scale = style === "subtle" ? 1.02 : style === "playful" ? 1.08 : 1.05;
+        return {
+            initial: {
+                scale: 1,
+                backgroundColor: "transparent",
+            },
+            animate: {
+                scale: [1, scale, 1],
+                backgroundColor: ["transparent", "var(--color-surface-success-subtle)", "transparent"],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.fast),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// BADGE POP PRESET
+// =============================================================================
+/**
+ * Badge Pop Micro-Interaction
+ *
+ * Pop animation for badge count changes. Provides satisfying feedback
+ * when numbers update, drawing attention to the change.
+ *
+ * @ai-hint Use badgePop for notification badges, count indicators, or any
+ * numeric value that changes. The pop effect highlights the update.
+ *
+ * @example
+ * ```tsx
+ * import { motion } from "motion/react";
+ * import { badgePop } from "@enact-ui/animate";
+ *
+ * function NotificationBadge({ count }) {
+ *   const props = badgePop.getProps("standard");
+ *   return <motion.span {...props} key={count}>{count}</motion.span>;
+ * }
+ * ```
+ */
+export const badgePop = {
+    name: "badgePop",
+    description: "Pop animation for badge count changes",
+    useCase: ["notification badges", "count indicators", "numeric updates", "inventory changes", "score updates"],
+    getProps: (style) => {
+        if (prefersReducedMotion())
+            return getReducedMotionProps();
+        const config = getMotionStyle(style);
+        const scale = style === "subtle" ? 1.15 : style === "playful" ? 1.4 : 1.25;
+        return {
+            initial: {
+                scale: 0,
+                opacity: 0,
+            },
+            animate: {
+                scale: [0, scale, 1],
+                opacity: [0, 1, 1],
+            },
+            transition: {
+                duration: msToSeconds(config.duration.fast),
+                ease: config.easing.interactive,
+            },
+        };
+    },
+};
+// =============================================================================
+// PRESET COLLECTION
+// =============================================================================
+export const microInteractions = {
+    buttonPress,
+    cardHover,
+    iconSpin,
+    pulse,
+    scale,
+    shake,
+    wiggle,
+    heartbeat,
+    rubberBand,
+    shimmer,
+    glowPulse,
+    progressFill,
+    checkmarkDraw,
+    successFlash,
+    badgePop,
+};
+/**
+ * Gets a micro-interaction preset by name.
+ *
+ * @param name - The name of the preset to retrieve
+ * @returns The micro-interaction preset, or undefined if not found
+ *
+ * @example
+ * ```ts
+ * const preset = getMicroInteraction("buttonPress");
+ * if (preset) {
+ *   const props = preset.getProps("standard");
+ * }
+ * ```
+ */
+export function getMicroInteraction(name) {
+    return microInteractions[name];
+}
+/**
+ * Gets all micro-interaction preset names.
+ *
+ * @returns Array of all preset names
+ *
+ * @example
+ * ```ts
+ * const names = getMicroInteractionNames();
+ * // ["buttonPress", "cardHover", "iconSpin", ...]
+ * ```
+ */
+export function getMicroInteractionNames() {
+    return Object.keys(microInteractions);
+}
+/**
+ * Finds micro-interaction presets suitable for a given use case.
+ *
+ * @param useCase - The use case to search for (case-insensitive)
+ * @returns Array of presets that match the use case
+ *
+ * @ai-hint Use this function to find appropriate presets based on your component's
+ * purpose. It searches the useCase arrays of all presets for matches.
+ *
+ * @example
+ * ```ts
+ * const errorPresets = findPresetsForUseCase("error");
+ * // Returns [shake] preset since it includes "error states" in its use cases
+ *
+ * const buttonPresets = findPresetsForUseCase("button");
+ * // Returns [buttonPress, rubberBand] presets
+ * ```
+ */
+export function findPresetsForUseCase(useCase) {
+    const searchTerm = useCase.toLowerCase();
+    return Object.values(microInteractions).filter((preset) => preset.useCase.some((uc) => uc.toLowerCase().includes(searchTerm)));
+}
+//# sourceMappingURL=micro-interactions.js.map