fancy-ui-svelte 0.6.0 → 0.7.0

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;

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;
+};