fancy-ui-svelte 0.5.0 → 0.7.0

package/dist/utils/animation.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Animation Utilities
+ *
+ * Helpers for creating smooth animations, spring physics, and easing functions.
+ * Used across many FancyUI components for consistent animation behavior.
+ */
+export interface SpringConfig {
+    /** Stiffness of the spring (default: 100) */
+    stiffness: number;
+    /** Damping ratio (default: 10) */
+    damping: number;
+    /** Mass of the object (default: 1) */
+    mass: number;
+}
+export interface AnimationOptions {
+    /** Duration in milliseconds */
+    duration: number;
+    /** Easing function */
+    easing?: (t: number) => number;
+    /** Delay before starting in milliseconds */
+    delay?: number;
+}
+/**
+ * Pre-configured spring settings for common use cases
+ */
+export declare const springPresets: Record<string, SpringConfig>;
+/**
+ * Linear easing (no easing)
+ */
+export declare function linear(t: number): number;
+/**
+ * Ease in (accelerating)
+ */
+export declare function easeIn(t: number): number;
+/**
+ * Ease out (decelerating)
+ */
+export declare function easeOut(t: number): number;
+/**
+ * Ease in-out (accelerate then decelerate)
+ */
+export declare function easeInOut(t: number): number;
+/**
+ * Cubic ease in
+ */
+export declare function easeInCubic(t: number): number;
+/**
+ * Cubic ease out
+ */
+export declare function easeOutCubic(t: number): number;
+/**
+ * Cubic ease in-out
+ */
+export declare function easeInOutCubic(t: number): number;
+/**
+ * Bounce ease out
+ */
+export declare function easeOutBounce(t: number): number;
+/**
+ * Elastic ease out
+ */
+export declare function easeOutElastic(t: number): number;
+/**
+ * Back ease out (overshoots then settles)
+ */
+export declare function easeOutBack(t: number): number;
+/**
+ * Interpolate between two values
+ */
+export declare function lerp(start: number, end: number, t: number): number;
+/**
+ * Clamp a value between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Map a value from one range to another
+ */
+export declare function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;
+/**
+ * Calculate spring physics for a single step
+ */
+export declare function springStep(current: number, target: number, velocity: number, config: SpringConfig, deltaTime: number): {
+    position: number;
+    velocity: number;
+};
+/**
+ * Check if a spring animation is at rest
+ */
+export declare function isSpringAtRest(current: number, target: number, velocity: number, threshold?: number): boolean;
+/**
+ * Create a staggered delay for list animations
+ */
+export declare function staggerDelay(index: number, baseDelay?: number): number;
+/**
+ * Calculate animation progress based on elapsed time
+ */
+export declare function getProgress(elapsed: number, duration: number): number;
+/**
+ * Get duration value from CSS custom property or fallback
+ */
+export declare function getDurationFromCSS(property: "--animation-fast" | "--animation-normal" | "--animation-slow" | "--animation-slower", fallback?: number): number;
+/**
+ * Debounce an animation frame callback
+ */
+export declare function rafDebounce<T extends (...args: unknown[]) => void>(fn: T): T;
+/**
+ * Throttle function calls to animation frames
+ */
+export declare function rafThrottle<T extends (...args: unknown[]) => void>(fn: T): T;

package/dist/utils/animation.js

@@ -0,0 +1,198 @@
+/**
+ * Animation Utilities
+ *
+ * Helpers for creating smooth animations, spring physics, and easing functions.
+ * Used across many FancyUI components for consistent animation behavior.
+ */
+// =============================================================================
+// Spring Presets
+// =============================================================================
+/**
+ * Pre-configured spring settings for common use cases
+ */
+export const springPresets = {
+    /** Default balanced spring */
+    default: { stiffness: 100, damping: 10, mass: 1 },
+    /** Gentle, slow spring */
+    gentle: { stiffness: 50, damping: 14, mass: 1 },
+    /** Wobbly, bouncy spring */
+    wobbly: { stiffness: 180, damping: 12, mass: 1 },
+    /** Stiff, snappy spring */
+    stiff: { stiffness: 210, damping: 20, mass: 1 },
+    /** Very slow, heavy spring */
+    slow: { stiffness: 50, damping: 20, mass: 1 },
+    /** Quick, responsive spring */
+    quick: { stiffness: 300, damping: 25, mass: 1 },
+};
+// =============================================================================
+// Easing Functions
+// =============================================================================
+/**
+ * Linear easing (no easing)
+ */
+export function linear(t) {
+    return t;
+}
+/**
+ * Ease in (accelerating)
+ */
+export function easeIn(t) {
+    return t * t;
+}
+/**
+ * Ease out (decelerating)
+ */
+export function easeOut(t) {
+    return t * (2 - t);
+}
+/**
+ * Ease in-out (accelerate then decelerate)
+ */
+export function easeInOut(t) {
+    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+/**
+ * Cubic ease in
+ */
+export function easeInCubic(t) {
+    return t * t * t;
+}
+/**
+ * Cubic ease out
+ */
+export function easeOutCubic(t) {
+    return 1 - Math.pow(1 - t, 3);
+}
+/**
+ * Cubic ease in-out
+ */
+export function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+/**
+ * Bounce ease out
+ */
+export function easeOutBounce(t) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t < 1 / d1) {
+        return n1 * t * t;
+    }
+    else if (t < 2 / d1) {
+        return n1 * (t -= 1.5 / d1) * t + 0.75;
+    }
+    else if (t < 2.5 / d1) {
+        return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    }
+    else {
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    }
+}
+/**
+ * Elastic ease out
+ */
+export function easeOutElastic(t) {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+}
+/**
+ * Back ease out (overshoots then settles)
+ */
+export function easeOutBack(t) {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+}
+// =============================================================================
+// Animation Helpers
+// =============================================================================
+/**
+ * Interpolate between two values
+ */
+export function lerp(start, end, t) {
+    return start + (end - start) * t;
+}
+/**
+ * Clamp a value between min and max
+ */
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Map a value from one range to another
+ */
+export function mapRange(value, inMin, inMax, outMin, outMax) {
+    return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+}
+/**
+ * Calculate spring physics for a single step
+ */
+export function springStep(current, target, velocity, config, deltaTime) {
+    const { stiffness, damping, mass } = config;
+    // Spring force: F = -kx - cv
+    const springForce = -stiffness * (current - target);
+    const dampingForce = -damping * velocity;
+    const acceleration = (springForce + dampingForce) / mass;
+    const newVelocity = velocity + acceleration * deltaTime;
+    const newPosition = current + newVelocity * deltaTime;
+    return { position: newPosition, velocity: newVelocity };
+}
+/**
+ * Check if a spring animation is at rest
+ */
+export function isSpringAtRest(current, target, velocity, threshold = 0.001) {
+    return Math.abs(current - target) < threshold && Math.abs(velocity) < threshold;
+}
+/**
+ * Create a staggered delay for list animations
+ */
+export function staggerDelay(index, baseDelay = 50) {
+    return index * baseDelay;
+}
+/**
+ * Calculate animation progress based on elapsed time
+ */
+export function getProgress(elapsed, duration) {
+    return clamp(elapsed / duration, 0, 1);
+}
+/**
+ * Get duration value from CSS custom property or fallback
+ */
+export function getDurationFromCSS(property, fallback = 300) {
+    if (typeof window === "undefined")
+        return fallback;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(property).trim();
+    const parsed = parseInt(value, 10);
+    return isNaN(parsed) ? fallback : parsed;
+}
+/**
+ * Debounce an animation frame callback
+ */
+export function rafDebounce(fn) {
+    let frameId = null;
+    return ((...args) => {
+        if (frameId !== null) {
+            cancelAnimationFrame(frameId);
+        }
+        frameId = requestAnimationFrame(() => {
+            fn(...args);
+            frameId = null;
+        });
+    });
+}
+/**
+ * Throttle function calls to animation frames
+ */
+export function rafThrottle(fn) {
+    let frameId = null;
+    let lastArgs = null;
+    return ((...args) => {
+        lastArgs = args;
+        if (frameId === null) {
+            frameId = requestAnimationFrame(() => {
+                fn(...lastArgs);
+                frameId = null;
+            });
+        }
+    });
+}

package/dist/utils/color.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Color Utilities
+ *
+ * Helpers for color manipulation, gradients, and OKLCH color space operations.
+ * Supports dynamic color effects in beam, glow, and gradient components.
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface OKLCH {
+    l: number;
+    c: number;
+    h: number;
+}
+export interface RGBA extends RGB {
+    a: number;
+}
+/**
+ * Parse a hex color to RGB
+ */
+export declare function hexToRgb(hex: string): RGB | null;
+/**
+ * Convert RGB to hex
+ */
+export declare function rgbToHex(rgb: RGB): string;
+/**
+ * Parse an HSL string to HSL object
+ */
+export declare function parseHsl(hsl: string): HSL | null;
+/**
+ * Convert HSL to CSS string
+ */
+export declare function hslToString(hsl: HSL): string;
+/**
+ * Parse an OKLCH string to OKLCH object
+ */
+export declare function parseOklch(oklch: string): OKLCH | null;
+/**
+ * Convert OKLCH to CSS string
+ */
+export declare function oklchToString(oklch: OKLCH): string;
+/**
+ * Convert RGB to HSL
+ */
+export declare function rgbToHsl(rgb: RGB): HSL;
+/**
+ * Convert HSL to RGB
+ */
+export declare function hslToRgb(hsl: HSL): RGB;
+/**
+ * Lighten a color by a percentage
+ */
+export declare function lighten(hsl: HSL, amount: number): HSL;
+/**
+ * Darken a color by a percentage
+ */
+export declare function darken(hsl: HSL, amount: number): HSL;
+/**
+ * Saturate a color by a percentage
+ */
+export declare function saturate(hsl: HSL, amount: number): HSL;
+/**
+ * Desaturate a color by a percentage
+ */
+export declare function desaturate(hsl: HSL, amount: number): HSL;
+/**
+ * Shift hue by degrees
+ */
+export declare function shiftHue(hsl: HSL, degrees: number): HSL;
+/**
+ * Get complementary color
+ */
+export declare function complementary(hsl: HSL): HSL;
+/**
+ * Interpolate between two colors
+ */
+export declare function interpolateColor(from: HSL, to: HSL, t: number): HSL;
+/**
+ * Generate a linear gradient CSS string
+ */
+export declare function linearGradient(angle: number, ...colors: string[]): string;
+/**
+ * Generate a radial gradient CSS string
+ */
+export declare function radialGradient(shape: "circle" | "ellipse", ...colors: string[]): string;
+/**
+ * Generate a conic gradient CSS string
+ */
+export declare function conicGradient(fromAngle: number, ...colors: string[]): string;
+/**
+ * Generate rainbow gradient colors
+ */
+export declare function getRainbowColors(count?: number): HSL[];
+/**
+ * Generate a gradient from theme CSS variables
+ */
+export declare function getThemeGradient(startVar: string, endVar: string, angle?: number): string;
+/**
+ * Get a CSS variable value
+ */
+export declare function getCssVariable(name: string): string;
+/**
+ * Set a CSS variable
+ */
+export declare function setCssVariable(name: string, value: string): void;
+/**
+ * Generate a random color
+ */
+export declare function randomColor(): HSL;
+/**
+ * Check if a color is light or dark
+ */
+export declare function isLightColor(hsl: HSL): boolean;
+/**
+ * Get contrasting text color (black or white)
+ */
+export declare function getContrastColor(hsl: HSL): "black" | "white";
+/**
+ * Add alpha to a color string
+ */
+export declare function withAlpha(color: string, alpha: number): string;