@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/utils/transitions.js

@@ -1,5 +1,11 @@
 /**
- * Safe transition utilities that guard against NaN values
+ * Animation and transition utilities for polished UX
+ *
+ * Duration guidelines (research-backed):
+ * - Micro-interactions: 150-200ms (instant feel)
+ * - UI transitions: 200-300ms (smooth without slow)
+ * - Page transitions: 300-400ms (noticeable but fast)
+ * - Complex animations: 400-600ms (elaborate sequences)
  *
  * The standard Svelte slide transition can produce "Invalid keyframe value for property height: NaNpx"
  * when the element hasn't been measured yet (e.g., during SSR hydration or when mounted in an unmeasured container).
@@ -7,7 +13,27 @@
  * These utilities wrap Svelte's transitions with guards against invalid values.
  */
 import { slide as svelteSlide } from 'svelte/transition';
-import { cubicOut } from 'svelte/easing';
+import { backOut, cubicInOut, cubicOut, quintOut } from 'svelte/easing';
+// Duration constants
+export const DURATION = {
+    instant: 100,
+    micro: 150,
+    fast: 200,
+    normal: 300,
+    slow: 400,
+    elaborate: 600,
+};
+// Common easing functions
+export const EASING = {
+    /** Standard ease-out for most UI (deceleration) */
+    out: cubicOut,
+    /** Ease in-out for page transitions */
+    inOut: cubicInOut,
+    /** Bouncy ease-out for celebration/success */
+    bounce: backOut,
+    /** Smooth for scroll-linked animations */
+    smooth: quintOut,
+};
 /**
  * A safe version of Svelte's slide transition that guards against NaN height values.
  *
@@ -40,11 +66,127 @@ export function bloom(_node, { duration = 200, delay = 0, origin = 'top right' }
         easing: cubicOut,
         css: (t) => {
             const scale = 0.95 + 0.05 * t;
-            return `
-        transform: scale(${scale});
-        transform-origin: ${origin};
-        opacity: ${t};
+            return `
+        transform: scale(${scale});
+        transform-origin: ${origin};
+        opacity: ${t};
       `;
         },
     };
 }
+/**
+ * Fade with slight scale - more polished than plain fade
+ */
+export function fadeScale(node, { delay = 0, duration = DURATION.normal, easing = EASING.out, start = 0.95, } = {}) {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        delay,
+        duration,
+        easing,
+        css: t => `
+      transform: ${transform} scale(${start + (1 - start) * t});
+      opacity: ${opacity * t};
+    `,
+    };
+}
+/**
+ * Slide up with fade - great for form fields appearing
+ */
+export function slideUp(node, { delay = 0, duration = DURATION.normal, easing = EASING.out, distance = 20, } = {}) {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        delay,
+        duration,
+        easing,
+        css: t => `
+      transform: ${transform} translateY(${(1 - t) * distance}px);
+      opacity: ${opacity * t};
+    `,
+    };
+}
+/**
+ * Slide in from left - for progress/step animations
+ */
+export function slideInLeft(node, { delay = 0, duration = DURATION.normal, easing = EASING.out, distance = 30, } = {}) {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        delay,
+        duration,
+        easing,
+        css: t => `
+      transform: ${transform} translateX(${(1 - t) * -distance}px);
+      opacity: ${opacity * t};
+    `,
+    };
+}
+/**
+ * Pop in - for success states and celebrations
+ */
+export function popIn(node, { delay = 0, duration = DURATION.normal, easing = EASING.bounce, } = {}) {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const transform = style.transform === 'none' ? '' : style.transform;
+    return {
+        delay,
+        duration,
+        easing,
+        css: t => `
+      transform: ${transform} scale(${t * 1});
+      opacity: ${opacity * t};
+    `,
+    };
+}
+/**
+ * Stagger delay calculator for list animations
+ */
+export function staggerDelay(index, base = 50, max = 500) {
+    return Math.min(index * base, max);
+}
+/**
+ * Cross-fade between two elements (for step transitions)
+ * Returns [outParams, inParams] for use with Svelte's transition directive
+ */
+export function crossFadeParams(durationMs = DURATION.normal) {
+    const outParams = { duration: durationMs * 0.4 };
+    const inParams = { delay: durationMs * 0.2, duration: durationMs * 0.6 };
+    return [outParams, inParams];
+}
+/**
+ * Reduced motion check - respects user preferences
+ * SSR-safe: returns false on the server
+ */
+export function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Get duration based on reduced motion preference
+ * Returns 0 if user prefers reduced motion, otherwise returns the given duration
+ */
+export function getAnimationDuration(duration) {
+    if (prefersReducedMotion()) {
+        return 0;
+    }
+    return duration;
+}
+/**
+ * CSS animation class helper - for Tailwind-based animations
+ */
+export const ANIMATION_CLASSES = {
+    fadeIn: 'animate-in fade-in duration-300',
+    fadeOut: 'animate-out fade-out duration-200',
+    slideUp: 'animate-in slide-in-from-bottom-2 duration-300',
+    slideDown: 'animate-in slide-in-from-top-2 duration-300',
+    scaleIn: 'animate-in zoom-in-95 duration-200',
+    scaleOut: 'animate-out zoom-out-95 duration-150',
+    spin: 'animate-spin',
+    pulse: 'animate-pulse',
+    bounce: 'animate-bounce',
+};

package/dist/utils/utils/utils.d.ts

@@ -1,2 +1,2 @@
-// Re-export everything from the consolidated barrel
-export * from '../utils';
+// Re-export everything from the consolidated barrel
+export * from '../utils';

package/dist/utils/utils/utils.js

@@ -1,3 +1,3 @@
-// Re-export everything from the consolidated barrel
-// This file is kept for backward compatibility with the nested utils/utils/utils path
-export * from '../utils.js';
+// Re-export everything from the consolidated barrel
+// This file is kept for backward compatibility with the nested utils/utils/utils path
+export * from '../utils.js';