fancy-ui-svelte 0.5.0 → 0.7.0

package/dist/utils/color.js

@@ -0,0 +1,314 @@
+/**
+ * Color Utilities
+ *
+ * Helpers for color manipulation, gradients, and OKLCH color space operations.
+ * Supports dynamic color effects in beam, glow, and gradient components.
+ */
+// =============================================================================
+// Color Parsing
+// =============================================================================
+/**
+ * Parse a hex color to RGB
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Convert RGB to hex
+ */
+export function rgbToHex(rgb) {
+    const toHex = (n) => Math.round(Math.max(0, Math.min(255, n)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+/**
+ * Parse an HSL string to HSL object
+ */
+export function parseHsl(hsl) {
+    const match = hsl.match(/hsl\(\s*(\d+)\s+(\d+)%\s+(\d+)%\s*\)/);
+    if (!match)
+        return null;
+    return {
+        h: parseInt(match[1], 10),
+        s: parseInt(match[2], 10),
+        l: parseInt(match[3], 10),
+    };
+}
+/**
+ * Convert HSL to CSS string
+ */
+export function hslToString(hsl) {
+    return `hsl(${hsl.h} ${hsl.s}% ${hsl.l}%)`;
+}
+/**
+ * Parse an OKLCH string to OKLCH object
+ */
+export function parseOklch(oklch) {
+    const match = oklch.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
+    if (!match)
+        return null;
+    return {
+        l: parseFloat(match[1]),
+        c: parseFloat(match[2]),
+        h: parseFloat(match[3]),
+    };
+}
+/**
+ * Convert OKLCH to CSS string
+ */
+export function oklchToString(oklch) {
+    return `oklch(${oklch.l} ${oklch.c} ${oklch.h})`;
+}
+// =============================================================================
+// Color Conversion
+// =============================================================================
+/**
+ * Convert RGB to HSL
+ */
+export function rgbToHsl(rgb) {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100),
+    };
+}
+/**
+ * Convert HSL to RGB
+ */
+export function hslToRgb(hsl) {
+    const h = hsl.h / 360;
+    const s = hsl.s / 100;
+    const l = hsl.l / 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l;
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+    };
+}
+// =============================================================================
+// Color Manipulation
+// =============================================================================
+/**
+ * Lighten a color by a percentage
+ */
+export function lighten(hsl, amount) {
+    return {
+        ...hsl,
+        l: Math.min(100, hsl.l + amount),
+    };
+}
+/**
+ * Darken a color by a percentage
+ */
+export function darken(hsl, amount) {
+    return {
+        ...hsl,
+        l: Math.max(0, hsl.l - amount),
+    };
+}
+/**
+ * Saturate a color by a percentage
+ */
+export function saturate(hsl, amount) {
+    return {
+        ...hsl,
+        s: Math.min(100, hsl.s + amount),
+    };
+}
+/**
+ * Desaturate a color by a percentage
+ */
+export function desaturate(hsl, amount) {
+    return {
+        ...hsl,
+        s: Math.max(0, hsl.s - amount),
+    };
+}
+/**
+ * Shift hue by degrees
+ */
+export function shiftHue(hsl, degrees) {
+    return {
+        ...hsl,
+        h: (hsl.h + degrees + 360) % 360,
+    };
+}
+/**
+ * Get complementary color
+ */
+export function complementary(hsl) {
+    return shiftHue(hsl, 180);
+}
+/**
+ * Interpolate between two colors
+ */
+export function interpolateColor(from, to, t) {
+    // Handle hue interpolation (shortest path)
+    let hDiff = to.h - from.h;
+    if (Math.abs(hDiff) > 180) {
+        hDiff = hDiff > 0 ? hDiff - 360 : hDiff + 360;
+    }
+    return {
+        h: (from.h + hDiff * t + 360) % 360,
+        s: from.s + (to.s - from.s) * t,
+        l: from.l + (to.l - from.l) * t,
+    };
+}
+// =============================================================================
+// Gradient Generation
+// =============================================================================
+/**
+ * Generate a linear gradient CSS string
+ */
+export function linearGradient(angle, ...colors) {
+    return `linear-gradient(${angle}deg, ${colors.join(", ")})`;
+}
+/**
+ * Generate a radial gradient CSS string
+ */
+export function radialGradient(shape, ...colors) {
+    return `radial-gradient(${shape}, ${colors.join(", ")})`;
+}
+/**
+ * Generate a conic gradient CSS string
+ */
+export function conicGradient(fromAngle, ...colors) {
+    return `conic-gradient(from ${fromAngle}deg, ${colors.join(", ")})`;
+}
+/**
+ * Generate rainbow gradient colors
+ */
+export function getRainbowColors(count = 5) {
+    const colors = [];
+    for (let i = 0; i < count; i++) {
+        colors.push({
+            h: (i * 360) / count,
+            s: 100,
+            l: 63,
+        });
+    }
+    return colors;
+}
+/**
+ * Generate a gradient from theme CSS variables
+ */
+export function getThemeGradient(startVar, endVar, angle = 135) {
+    return `linear-gradient(${angle}deg, var(${startVar}), var(${endVar}))`;
+}
+// =============================================================================
+// Color Utilities
+// =============================================================================
+/**
+ * Get a CSS variable value
+ */
+export function getCssVariable(name) {
+    if (typeof window === "undefined")
+        return "";
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+/**
+ * Set a CSS variable
+ */
+export function setCssVariable(name, value) {
+    if (typeof window === "undefined")
+        return;
+    document.documentElement.style.setProperty(name, value);
+}
+/**
+ * Generate a random color
+ */
+export function randomColor() {
+    return {
+        h: Math.floor(Math.random() * 360),
+        s: 70 + Math.floor(Math.random() * 30),
+        l: 50 + Math.floor(Math.random() * 20),
+    };
+}
+/**
+ * Check if a color is light or dark
+ */
+export function isLightColor(hsl) {
+    return hsl.l > 50;
+}
+/**
+ * Get contrasting text color (black or white)
+ */
+export function getContrastColor(hsl) {
+    return isLightColor(hsl) ? "black" : "white";
+}
+/**
+ * Add alpha to a color string
+ */
+export function withAlpha(color, alpha) {
+    // Handle hex
+    if (color.startsWith("#")) {
+        const rgb = hexToRgb(color);
+        if (rgb) {
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+        }
+    }
+    // Handle hsl
+    if (color.startsWith("hsl(")) {
+        return color.replace("hsl(", "hsla(").replace(")", `, ${alpha})`);
+    }
+    // Handle oklch
+    if (color.startsWith("oklch(")) {
+        return color.replace(")", ` / ${alpha})`);
+    }
+    return color;
+}

package/dist/utils/geometry.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Geometry Utilities
+ *
+ * Helpers for calculating positions, angles, distances, and directions.
+ * Used for hover effects, spotlights, and direction-aware components.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Point, Size {
+}
+export type Direction = "top" | "right" | "bottom" | "left";
+export type Corner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/**
+ * Create a point object
+ */
+export declare function point(x: number, y: number): Point;
+/**
+ * Add two points
+ */
+export declare function addPoints(a: Point, b: Point): Point;
+/**
+ * Subtract point b from point a
+ */
+export declare function subtractPoints(a: Point, b: Point): Point;
+/**
+ * Scale a point by a factor
+ */
+export declare function scalePoint(p: Point, factor: number): Point;
+/**
+ * Get the midpoint between two points
+ */
+export declare function midpoint(a: Point, b: Point): Point;
+/**
+ * Calculate the distance between two points
+ */
+export declare function distance(a: Point, b: Point): number;
+/**
+ * Calculate the squared distance between two points (faster, no sqrt)
+ */
+export declare function distanceSquared(a: Point, b: Point): number;
+/**
+ * Calculate the angle between two points in radians
+ */
+export declare function angle(from: Point, to: Point): number;
+/**
+ * Calculate the angle between two points in degrees
+ */
+export declare function angleDegrees(from: Point, to: Point): number;
+/**
+ * Convert radians to degrees
+ */
+export declare function radToDeg(radians: number): number;
+/**
+ * Convert degrees to radians
+ */
+export declare function degToRad(degrees: number): number;
+/**
+ * Normalize an angle to 0-360 degrees
+ */
+export declare function normalizeAngle(degrees: number): number;
+/**
+ * Get mouse position relative to an element
+ */
+export declare function getRelativeMousePosition(event: MouseEvent, element: HTMLElement): Point;
+/**
+ * Get mouse position as a percentage of element dimensions (0-1)
+ */
+export declare function getRelativeMousePercent(event: MouseEvent, element: HTMLElement): Point;
+/**
+ * Get mouse position centered on element (-0.5 to 0.5)
+ */
+export declare function getRelativeMouseCentered(event: MouseEvent, element: HTMLElement): Point;
+/**
+ * Get the center point of an element
+ */
+export declare function getElementCenter(element: HTMLElement): Point;
+/**
+ * Get the center point of an element relative to itself
+ */
+export declare function getElementLocalCenter(element: HTMLElement): Point;
+/**
+ * Determine which direction mouse entered/exited an element
+ */
+export declare function getEntryDirection(event: MouseEvent, element: HTMLElement): Direction;
+/**
+ * Get the opposite direction
+ */
+export declare function getOppositeDirection(direction: Direction): Direction;
+/**
+ * Get the nearest corner to a point within an element
+ */
+export declare function getNearestCorner(point: Point, size: Size): Corner;
+/**
+ * Check if a point is inside a rectangle
+ */
+export declare function isPointInRect(p: Point, rect: Rect): boolean;
+/**
+ * Get the bounding rect of an element
+ */
+export declare function getRect(element: HTMLElement): Rect;
+/**
+ * Expand a rect by a given amount
+ */
+export declare function expandRect(rect: Rect, amount: number): Rect;
+/**
+ * Calculate rotation transform based on mouse position
+ * Returns rotation values suitable for 3D transforms
+ */
+export declare function calculateTiltTransform(mousePos: Point, elementSize: Size, maxRotation?: number): {
+    rotateX: number;
+    rotateY: number;
+};
+/**
+ * Calculate spotlight position for gradient effects
+ */
+export declare function calculateSpotlightPosition(mousePos: Point, elementSize: Size): {
+    x: string;
+    y: string;
+};

package/dist/utils/geometry.js

@@ -0,0 +1,250 @@
+/**
+ * Geometry Utilities
+ *
+ * Helpers for calculating positions, angles, distances, and directions.
+ * Used for hover effects, spotlights, and direction-aware components.
+ */
+// =============================================================================
+// Point Operations
+// =============================================================================
+/**
+ * Create a point object
+ */
+export function point(x, y) {
+    return { x, y };
+}
+/**
+ * Add two points
+ */
+export function addPoints(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y };
+}
+/**
+ * Subtract point b from point a
+ */
+export function subtractPoints(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+/**
+ * Scale a point by a factor
+ */
+export function scalePoint(p, factor) {
+    return { x: p.x * factor, y: p.y * factor };
+}
+/**
+ * Get the midpoint between two points
+ */
+export function midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+// =============================================================================
+// Distance & Angle Calculations
+// =============================================================================
+/**
+ * Calculate the distance between two points
+ */
+export function distance(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+/**
+ * Calculate the squared distance between two points (faster, no sqrt)
+ */
+export function distanceSquared(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return dx * dx + dy * dy;
+}
+/**
+ * Calculate the angle between two points in radians
+ */
+export function angle(from, to) {
+    return Math.atan2(to.y - from.y, to.x - from.x);
+}
+/**
+ * Calculate the angle between two points in degrees
+ */
+export function angleDegrees(from, to) {
+    return (angle(from, to) * 180) / Math.PI;
+}
+/**
+ * Convert radians to degrees
+ */
+export function radToDeg(radians) {
+    return (radians * 180) / Math.PI;
+}
+/**
+ * Convert degrees to radians
+ */
+export function degToRad(degrees) {
+    return (degrees * Math.PI) / 180;
+}
+/**
+ * Normalize an angle to 0-360 degrees
+ */
+export function normalizeAngle(degrees) {
+    return ((degrees % 360) + 360) % 360;
+}
+// =============================================================================
+// Mouse & Element Positions
+// =============================================================================
+/**
+ * Get mouse position relative to an element
+ */
+export function getRelativeMousePosition(event, element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+}
+/**
+ * Get mouse position as a percentage of element dimensions (0-1)
+ */
+export function getRelativeMousePercent(event, element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: (event.clientX - rect.left) / rect.width,
+        y: (event.clientY - rect.top) / rect.height,
+    };
+}
+/**
+ * Get mouse position centered on element (-0.5 to 0.5)
+ */
+export function getRelativeMouseCentered(event, element) {
+    const percent = getRelativeMousePercent(event, element);
+    return {
+        x: percent.x - 0.5,
+        y: percent.y - 0.5,
+    };
+}
+/**
+ * Get the center point of an element
+ */
+export function getElementCenter(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+    };
+}
+/**
+ * Get the center point of an element relative to itself
+ */
+export function getElementLocalCenter(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.width / 2,
+        y: rect.height / 2,
+    };
+}
+// =============================================================================
+// Direction Detection
+// =============================================================================
+/**
+ * Determine which direction mouse entered/exited an element
+ */
+export function getEntryDirection(event, element) {
+    const rect = element.getBoundingClientRect();
+    const x = event.clientX - rect.left - rect.width / 2;
+    const y = event.clientY - rect.top - rect.height / 2;
+    // Calculate direction based on angle
+    const angleRad = Math.atan2(y, x);
+    const angleDeg = normalizeAngle((angleRad * 180) / Math.PI);
+    if (angleDeg >= 315 || angleDeg < 45)
+        return "right";
+    if (angleDeg >= 45 && angleDeg < 135)
+        return "bottom";
+    if (angleDeg >= 135 && angleDeg < 225)
+        return "left";
+    return "top";
+}
+/**
+ * Get the opposite direction
+ */
+export function getOppositeDirection(direction) {
+    const opposites = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+    };
+    return opposites[direction];
+}
+/**
+ * Get the nearest corner to a point within an element
+ */
+export function getNearestCorner(point, size) {
+    const centerX = size.width / 2;
+    const centerY = size.height / 2;
+    const isTop = point.y < centerY;
+    const isLeft = point.x < centerX;
+    if (isTop && isLeft)
+        return "top-left";
+    if (isTop && !isLeft)
+        return "top-right";
+    if (!isTop && isLeft)
+        return "bottom-left";
+    return "bottom-right";
+}
+// =============================================================================
+// Rect & Bounds
+// =============================================================================
+/**
+ * Check if a point is inside a rectangle
+ */
+export function isPointInRect(p, rect) {
+    return (p.x >= rect.x && p.x <= rect.x + rect.width && p.y >= rect.y && p.y <= rect.y + rect.height);
+}
+/**
+ * Get the bounding rect of an element
+ */
+export function getRect(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+/**
+ * Expand a rect by a given amount
+ */
+export function expandRect(rect, amount) {
+    return {
+        x: rect.x - amount,
+        y: rect.y - amount,
+        width: rect.width + amount * 2,
+        height: rect.height + amount * 2,
+    };
+}
+// =============================================================================
+// Transforms
+// =============================================================================
+/**
+ * Calculate rotation transform based on mouse position
+ * Returns rotation values suitable for 3D transforms
+ */
+export function calculateTiltTransform(mousePos, elementSize, maxRotation = 15) {
+    const centerX = elementSize.width / 2;
+    const centerY = elementSize.height / 2;
+    const percentX = (mousePos.x - centerX) / centerX;
+    const percentY = (mousePos.y - centerY) / centerY;
+    return {
+        rotateX: -percentY * maxRotation,
+        rotateY: percentX * maxRotation,
+    };
+}
+/**
+ * Calculate spotlight position for gradient effects
+ */
+export function calculateSpotlightPosition(mousePos, elementSize) {
+    const percentX = (mousePos.x / elementSize.width) * 100;
+    const percentY = (mousePos.y / elementSize.height) * 100;
+    return {
+        x: `${percentX}%`,
+        y: `${percentY}%`,
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Utilities barrel export
+ */
+export { cn } from "../utils.js";
+export type { WithoutChild, WithoutChildren, WithoutChildrenOrChild, WithElementRef, } from "../utils.js";
+export { type SpringConfig, type AnimationOptions, springPresets, linear, easeIn, easeOut, easeInOut, easeInCubic, easeOutCubic, easeInOutCubic, easeOutBounce, easeOutElastic, easeOutBack, lerp, clamp, mapRange, springStep, isSpringAtRest, staggerDelay, getProgress, getDurationFromCSS, rafDebounce, rafThrottle, } from "./animation.js";
+export { type Point, type Size, type Rect, type Direction, type Corner, point, addPoints, subtractPoints, scalePoint, midpoint, distance, distanceSquared, angle, angleDegrees, radToDeg, degToRad, normalizeAngle, getRelativeMousePosition, getRelativeMousePercent, getRelativeMouseCentered, getElementCenter, getElementLocalCenter, getEntryDirection, getOppositeDirection, getNearestCorner, isPointInRect, getRect, expandRect, calculateTiltTransform, calculateSpotlightPosition, } from "./geometry.js";
+export { type RGB, type HSL, type OKLCH, type RGBA, hexToRgb, rgbToHex, parseHsl, hslToString, parseOklch, oklchToString, rgbToHsl, hslToRgb, lighten, darken, saturate, desaturate, shiftHue, complementary, interpolateColor, linearGradient, radialGradient, conicGradient, getRainbowColors, getThemeGradient, getCssVariable, setCssVariable, randomColor, isLightColor, getContrastColor, withAlpha, } from "./color.js";