@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -1,250 +0,0 @@
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import { cn } from '../../../utils/cn.js';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-
-/**
- * GlassSurface Component
- * Creates a realistic chromatic aberration glass effect using SVG filters.
- * Works as a wrapper for any content.
- */
-const GlassSurface = React__default.forwardRef(({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", backdropBrightness = 1, frosted = false, className = "", style = {}, }, forwardedRef) => {
-    const uniqueId = useId().replace(/:/g, "-");
-    const filterId = `glass-filter-${uniqueId}`;
-    const redGradId = `red-grad-${uniqueId}`;
-    const blueGradId = `blue-grad-${uniqueId}`;
-    const noiseFilterId = `noise-filter-${uniqueId}`;
-    const [svgSupported, setSvgSupported] = useState(false);
-    const containerRef = useRef(null);
-    const feImageRef = useRef(null);
-    const redChannelRef = useRef(null);
-    const greenChannelRef = useRef(null);
-    const blueChannelRef = useRef(null);
-    const gaussianBlurRef = useRef(null);
-    const isDarkMode = useDarkMode();
-    const resolvedDark = colorScheme === "auto" ? isDarkMode : colorScheme === "dark";
-    // Theme-aware defaults: user-provided props always win
-    // Note: brightness/opacity control the displacement map center fill, NOT visual brightness.
-    // brightness=50 + opacity=1 = neutral center (no displacement), only edges refract.
-    // On light backgrounds, high displacement pulls in black out-of-bounds pixels → gray artifacts.
-    const brightness = brightnessProp !== null && brightnessProp !== void 0 ? brightnessProp : 50;
-    const opacity = opacityProp !== null && opacityProp !== void 0 ? opacityProp : (resolvedDark ? 0.93 : 1);
-    const blur = blurProp !== null && blurProp !== void 0 ? blurProp : 11;
-    const displace = displaceProp !== null && displaceProp !== void 0 ? displaceProp : 0.7;
-    const backgroundOpacity = backgroundOpacityProp !== null && backgroundOpacityProp !== void 0 ? backgroundOpacityProp : (resolvedDark ? 0.1 : 0);
-    const saturation = saturationProp !== null && saturationProp !== void 0 ? saturationProp : (resolvedDark ? 1.8 : 1.4);
-    const distortionScale = distortionScaleProp !== null && distortionScaleProp !== void 0 ? distortionScaleProp : (resolvedDark ? -180 : -40);
-    const mixBlendMode = mixBlendModeProp !== null && mixBlendModeProp !== void 0 ? mixBlendModeProp : (resolvedDark ? "difference" : "multiply");
-    /**
-     * Generates the SVG displacement map as a Data URI
-     */
-    const generateDisplacementMap = () => {
-        var _a;
-        const rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const actualWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
-        const actualHeight = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
-        // Don't generate if size is 0
-        if (actualWidth === 0 || actualHeight === 0)
-            return "";
-        const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
-        const svgContent = `
-      <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" stop-color="#000"/>
-            <stop offset="100%" stop-color="red"/>
-          </linearGradient>
-          <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stop-color="#000"/>
-            <stop offset="100%" stop-color="blue"/>
-          </linearGradient>
-        </defs>
-        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" fill="black" />
-        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${redGradId})" />
-        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${blueGradId})" style="mix-blend-mode: ${mixBlendMode}" />
-        <rect x="${edgeSize}" y="${edgeSize}" width="${actualWidth - edgeSize * 2}" height="${actualHeight - edgeSize * 2}" rx="${borderRadius}" fill="hsl(0 0% ${brightness}% / ${opacity})" style="filter:blur(${blur}px)" />
-      </svg>
-    `;
-        return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
-    };
-    const updateDisplacementMap = () => {
-        const dataUri = generateDisplacementMap();
-        if (feImageRef.current && dataUri) {
-            feImageRef.current.setAttribute("href", dataUri);
-        }
-    };
-    // Detect SVG Filter support (backwards compatibility for Safari/Firefox)
-    const supportsSVGFilters = () => {
-        if (typeof window === "undefined" || typeof document === "undefined")
-            return false;
-        const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
-        const isFirefox = /Firefox/.test(navigator.userAgent);
-        if (isWebkit || isFirefox)
-            return false;
-        const div = document.createElement("div");
-        div.style.backdropFilter = `url(#${filterId})`;
-        return div.style.backdropFilter !== "";
-    };
-    const supportsBackdrop = useMemo(() => { var _a; return typeof CSS !== 'undefined' && ((_a = CSS.supports) === null || _a === void 0 ? void 0 : _a.call(CSS, 'backdrop-filter', 'blur(1px)')); }, []);
-    useEffect(() => {
-        setSvgSupported(supportsSVGFilters());
-    }, []);
-    // Update filter attributes when props change
-    useEffect(() => {
-        updateDisplacementMap();
-        const scale = distortionScale;
-        if (redChannelRef.current) {
-            redChannelRef.current.setAttribute("scale", (scale + redOffset).toString());
-            redChannelRef.current.setAttribute("xChannelSelector", xChannel);
-            redChannelRef.current.setAttribute("yChannelSelector", yChannel);
-        }
-        if (greenChannelRef.current) {
-            greenChannelRef.current.setAttribute("scale", (scale + greenOffset).toString());
-            greenChannelRef.current.setAttribute("xChannelSelector", xChannel);
-            greenChannelRef.current.setAttribute("yChannelSelector", yChannel);
-        }
-        if (blueChannelRef.current) {
-            blueChannelRef.current.setAttribute("scale", (scale + blueOffset).toString());
-            blueChannelRef.current.setAttribute("xChannelSelector", xChannel);
-            blueChannelRef.current.setAttribute("yChannelSelector", yChannel);
-        }
-        if (gaussianBlurRef.current) {
-            gaussianBlurRef.current.setAttribute("stdDeviation", displace.toString());
-        }
-    }, [
-        borderRadius,
-        borderWidth,
-        brightness,
-        opacity,
-        blur,
-        displace,
-        distortionScale,
-        redOffset,
-        greenOffset,
-        blueOffset,
-        xChannel,
-        yChannel,
-        mixBlendMode,
-    ]);
-    // Ref to hold the latest updateDisplacementMap to avoid stale closures in ResizeObserver
-    const updateRef = useRef(updateDisplacementMap);
-    updateRef.current = updateDisplacementMap;
-    // ResizeObserver to handle dimension changes
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            // Use requestAnimationFrame for smoother updates
-            requestAnimationFrame(() => updateRef.current());
-        });
-        resizeObserver.observe(containerRef.current);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    // Check if user is providing custom shadow via className
-    const hasCustomShadow = className === null || className === void 0 ? void 0 : className.includes("shadow");
-    const containerStyles = useMemo(() => {
-        const baseStyles = {
-            ...style,
-            width: typeof width === "number" ? `${width}px` : width,
-            height: typeof height === "number" ? `${height}px` : height,
-            borderRadius: `${borderRadius}px`,
-        };
-        // Default blur for frosted effect
-        const frostedBlur = frosted ? "blur(12px)" : "";
-        if (svgSupported) {
-            // Determine background color: use prop if provided, otherwise auto-detect based on theme
-            const bgColor = backgroundColor || (resolvedDark ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
-            // Convert color to rgba if needed to apply opacity
-            const getBackgroundWithOpacity = () => {
-                // If backgroundOpacity is 0, return transparent
-                if (backgroundOpacity === 0)
-                    return "transparent";
-                // If color already has alpha channel (rgba, hsla), use as-is
-                if (bgColor.includes("rgba") || bgColor.includes("hsla")) {
-                    return bgColor;
-                }
-                // For named colors, hex, rgb, hsl - wrap in color-mix for opacity
-                return `color-mix(in srgb, ${bgColor}, transparent ${(1 - backgroundOpacity) * 100}%)`;
-            };
-            return {
-                ...baseStyles,
-                background: getBackgroundWithOpacity(),
-                backdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
-                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
-                ...(!resolvedDark && { border: "1px solid rgba(0, 0, 0, 0.06)" }),
-                ...(hasCustomShadow
-                    ? {}
-                    : {
-                        boxShadow: resolvedDark
-                            ? `0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
-               0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
-               0px 4px 16px rgba(17, 17, 26, 0.05),
-               0px 8px 24px rgba(17, 17, 26, 0.05),
-               0px 16px 56px rgba(17, 17, 26, 0.05)`
-                            : `0 8px 24px -12px rgba(0, 0, 0, 0.08),
-               0 4px 12px -4px rgba(0, 0, 0, 0.04)`,
-                    }),
-            };
-        }
-        else {
-            // Fallback for Safari/Firefox or when SVG filters aren't supported
-            const baseBlur = "12px";
-            // Increase blur significantly for frosted mode in fallback
-            const effectiveBlur = frosted ? "20px" : baseBlur;
-            const fallbackSaturate = "1.8";
-            const fallbackBrightness = resolvedDark ? "1.2" : "1.1";
-            const filterStr = `blur(${effectiveBlur}) saturate(${fallbackSaturate}) brightness(${fallbackBrightness})`;
-            if (resolvedDark) {
-                return {
-                    ...baseStyles,
-                    background: supportsBackdrop
-                        ? "rgba(255, 255, 255, 0.1)"
-                        : "rgba(0, 0, 0, 0.4)",
-                    backdropFilter: supportsBackdrop ? filterStr : undefined,
-                    WebkitBackdropFilter: supportsBackdrop ? filterStr : undefined,
-                    border: "1px solid rgba(255, 255, 255, 0.2)",
-                    ...(hasCustomShadow
-                        ? {}
-                        : {
-                            boxShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)`,
-                        }),
-                };
-            }
-            else {
-                return {
-                    ...baseStyles,
-                    background: supportsBackdrop
-                        ? "rgba(255, 255, 255, 0.25)"
-                        : "rgba(255, 255, 255, 0.4)",
-                    backdropFilter: supportsBackdrop ? filterStr : undefined,
-                    WebkitBackdropFilter: supportsBackdrop ? filterStr : undefined,
-                    border: "1px solid rgba(255, 255, 255, 0.3)",
-                    ...(hasCustomShadow
-                        ? {}
-                        : {
-                            boxShadow: supportsBackdrop
-                                ? `0 8px 32px 0 rgba(31, 38, 135, 0.2), 0 2px 16px 0 rgba(31, 38, 135, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 0 rgba(255, 255, 255, 0.2)`
-                                : `inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 0 rgba(255, 255, 255, 0.3)`,
-                        }),
-                };
-            }
-        }
-    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, resolvedDark, backgroundOpacity, filterId, backdropBrightness, saturation, hasCustomShadow, supportsBackdrop]);
-    const focusVisibleClasses = resolvedDark
-        ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
-        : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
-    const mergedRef = useCallback((node) => {
-        containerRef.current = node;
-        if (typeof forwardedRef === "function")
-            forwardedRef(node);
-        else if (forwardedRef)
-            forwardedRef.current = node;
-    }, [forwardedRef]);
-    return (jsxs("div", { ref: mergedRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
-});
-GlassSurface.displayName = "GlassSurface";
-
-export { GlassSurface };

package/dist/components/effects/GlassSurface/GlassSurface.types.d.ts

@@ -1,66 +0,0 @@
-import React from "react";
-export type GlassChannel = "R" | "G" | "B";
-export type GlassMixBlendMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-darker" | "plus-lighter";
-export interface GlassSurfaceProps {
-    /** Content to be wrapped by the glass effect */
-    children?: React.ReactNode;
-    /** Width of the component. If not provided, it will expand to fill parent or fit content. */
-    width?: number | string;
-    /** Height of the component. If not provided, it will expand to fill parent or fit content. */
-    height?: number | string;
-    /** Border radius for the glass effect in pixels */
-    borderRadius?: number;
-    /** Width of the refraction border (multiplier) */
-    borderWidth?: number;
-    /** Brightness of the inner glass area (0-100) */
-    brightness?: number;
-    /** Opacity of the inner glass area (0-1) */
-    opacity?: number;
-    /** Blur intensity for the inner glass area */
-    blur?: number;
-    /** Standard deviation for final displacement blur */
-    displace?: number;
-    /** Background opacity (for theme fallback) */
-    backgroundOpacity?: number;
-    /** Background color (CSS color value, e.g., 'white', '#fff', 'rgb(255,255,255)') */
-    backgroundColor?: string;
-    /** Saturation enhancement for the backdrop-filter */
-    saturation?: number;
-    /** Base displacement intensity for the chromatic aberration */
-    distortionScale?: number;
-    /** Red channel displacement offset */
-    redOffset?: number;
-    /** Green channel displacement offset */
-    greenOffset?: number;
-    /** Blue channel displacement offset */
-    blueOffset?: number;
-    /** SVG color channel used for X displacement */
-    xChannel?: GlassChannel;
-    /** SVG color channel used for Y displacement */
-    yChannel?: GlassChannel;
-    /** Blend mode for the internal gradient layers */
-    mixBlendMode?: GlassMixBlendMode;
-    /**
-     * Color scheme for the glass effect. Controls theme-aware defaults.
-     * - 'auto': detects system preference (default)
-     * - 'dark': force dark mode defaults
-     * - 'light': force light mode defaults
-     * @default 'auto'
-     */
-    colorScheme?: "auto" | "dark" | "light";
-    /**
-     * Brightness multiplier for the backdrop-filter chain.
-     * Values > 1 brighten, < 1 darken. Only applies when SVG filters are supported.
-     * @default 1
-     */
-    backdropBrightness?: number;
-    /**
-     * Enable frosted glass effect with noise texture
-     * @default false
-     */
-    frosted?: boolean;
-    /** Additional CSS class names */
-    className?: string;
-    /** Inline styles for the container */
-    style?: React.CSSProperties;
-}

package/dist/components/effects/GlassSurface/index.d.ts

@@ -1,2 +0,0 @@
-export { GlassSurface } from "./GlassSurface";
-export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface.types";

package/dist/components/effects/GodRays/GodRays.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type { GodRaysProps } from "./GodRays.types";
-/**
- * Animated volumetric light-ray burst radiating from center. WebGL2-
- * powered; falls back to a static CSS conic-style gradient when WebGL2 is
- * unavailable or the user prefers reduced motion.
- */
-export declare const GodRays: React.FC<GodRaysProps>;

package/dist/components/effects/GodRays/GodRays.js

@@ -1,68 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useMemo, useRef } from 'react';
-import { useReducedMotion } from 'motion/react';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { cn } from '../../../utils/cn.js';
-import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
-import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
-import { godRaysFragmentShader } from './GodRays.shaders.js';
-import { GOD_RAYS_MAX_COLORS } from './GodRays.types.js';
-
-const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
-const DEFAULT_COLOR_BACK = "var(--color-background)";
-const DEFAULT_COLOR_BLOOM = "var(--color-primary-100)";
-function useWebgl2Supported(disabled) {
-    return useMemo(() => {
-        if (disabled || typeof document === "undefined")
-            return false;
-        try {
-            return !!document.createElement("canvas").getContext("webgl2");
-        }
-        catch (_a) {
-            return false;
-        }
-    }, [disabled]);
-}
-/**
- * Animated volumetric light-ray burst radiating from center. WebGL2-
- * powered; falls back to a static CSS conic-style gradient when WebGL2 is
- * unavailable or the user prefers reduced motion.
- */
-const GodRays = ({ colorBack = DEFAULT_COLOR_BACK, colorBloom = DEFAULT_COLOR_BLOOM, colors = DEFAULT_COLORS, spotty = 0.3, midSize = 0.4, midIntensity = 0.5, density = 0.5, intensity = 0.5, bloom = 0.5, speed = 1, className, style, ...props }) => {
-    var _a, _b, _c;
-    const isClient = useIsClient();
-    const shouldReduceMotion = useReducedMotion();
-    const isDark = useDarkMode();
-    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
-    const safeColors = colors.length > 0 ? colors.slice(0, GOD_RAYS_MAX_COLORS) : DEFAULT_COLORS;
-    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeColors.join("|"), isDark]);
-    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorBack, isDark]);
-    const resolvedBloom = useMemo(() => resolveShaderColor(colorBloom), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorBloom, isDark]);
-    const uniformsRef = useRef({});
-    for (let i = 0; i < GOD_RAYS_MAX_COLORS; i++) {
-        uniformsRef.current[`u_colors[${i}]`] =
-            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
-    }
-    uniformsRef.current.u_colorsCount = resolvedColors.length;
-    uniformsRef.current.u_colorBack = resolvedBack;
-    uniformsRef.current.u_colorBloom = resolvedBloom;
-    uniformsRef.current.u_spotty = spotty;
-    uniformsRef.current.u_midSize = midSize;
-    uniformsRef.current.u_midIntensity = midIntensity;
-    uniformsRef.current.u_density = density;
-    uniformsRef.current.u_intensity = intensity;
-    uniformsRef.current.u_bloom = bloom;
-    uniformsRef.current.u_speed = speed;
-    const fallbackGradient = `radial-gradient(circle, ${(_c = safeColors[safeColors.length - 1]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, ${colorBack} 70%)`;
-    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: godRaysFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
-};
-
-export { GodRays };

package/dist/components/effects/GodRays/GodRays.shaders.d.ts

@@ -1,10 +0,0 @@
-/**
- * GodRays fragment shader — adapted from paper-design/shaders' `god-rays.ts`
- * (https://github.com/paper-design/shaders, Apache License 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
- * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
- * instead of pre-generated noise-texture sampling.
- */
-export declare const godRaysFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorBloom;\nuniform vec4 u_colors[5];\nuniform float u_colorsCount;\n\nuniform float u_density;\nuniform float u_spotty;\nuniform float u_midSize;\nuniform float u_midIntensity;\nuniform float u_intensity;\nuniform float u_bloom;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\nfloat hash11(float p) {\n  return randomR(vec2(p, p * 0.7919));\n}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat raysShape(vec2 uv, float r, float freq, float intensity, float radius) {\n  float a = atan(uv.y, uv.x);\n  vec2 left = vec2(a * freq, r);\n  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);\n  float n_left = pow(valueNoise(left), intensity);\n  float n_right = pow(valueNoise(right), intensity);\n  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));\n  return shape;\n}\n\nvoid main() {\n  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n\n  float t = .2 * u_speed * iTime;\n  float radius = length(shape_uv);\n  float spots = 6.5 * abs(u_spotty);\n  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);\n\n  float midSize = 10. * abs(u_midSize);\n  float ms_lo = 0.02 * midSize;\n  float ms_hi = max(midSize, 1e-6);\n  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));\n  middleShape = pow(middleShape, 5.0);\n\n  vec3 accumColor = vec3(0.0);\n  float accumAlpha = 0.0;\n\n  for (int i = 0; i < 5; i++) {\n    if (i >= int(u_colorsCount)) break;\n\n    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);\n\n    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;\n    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;\n    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);\n    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;\n\n    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);\n    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);\n    ray += (1. + 4. * ray) * middleShape;\n    ray = clamp(ray, 0.0, 1.0);\n\n    float srcAlpha = u_colors[i].a * ray;\n    vec3 srcColor = u_colors[i].rgb * srcAlpha;\n\n    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;\n    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;\n\n    vec3 addBlendColor = accumColor + srcColor;\n    float addBlendAlpha = accumAlpha + srcAlpha;\n\n    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);\n    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);\n  }\n\n  float overlayAlpha = u_colorBloom.a;\n  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;\n\n  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;\n  accumColor = mix(accumColor, colorWithOverlay, u_bloom);\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n\n  vec3 color = accumColor + (1. - accumAlpha) * bgColor;\n  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;\n  color = clamp(color, 0., 1.);\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/GodRays/GodRays.shaders.js

@@ -1,128 +0,0 @@
-import 'react/jsx-runtime';
-import 'react';
-import { glslDeclarePI, glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
-
-/**
- * GodRays fragment shader — adapted from paper-design/shaders' `god-rays.ts`
- * (https://github.com/paper-design/shaders, Apache License 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
- * fit/scale/rotation engine; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
- * instead of pre-generated noise-texture sampling.
- */
-const godRaysFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform float iTime;
-uniform vec2 iResolution;
-
-uniform vec4 u_colorBack;
-uniform vec4 u_colorBloom;
-uniform vec4 u_colors[5];
-uniform float u_colorsCount;
-
-uniform float u_density;
-uniform float u_spotty;
-uniform float u_midSize;
-uniform float u_midIntensity;
-uniform float u_intensity;
-uniform float u_bloom;
-uniform float u_speed;
-
-out vec4 fragColor;
-
-${glslDeclarePI}
-${glslRotate2}
-${glslHashFloat}
-
-float hash11(float p) {
-  return randomR(vec2(p, p * 0.7919));
-}
-
-float valueNoise(vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  float a = randomR(i);
-  float b = randomR(i + vec2(1.0, 0.0));
-  float c = randomR(i + vec2(0.0, 1.0));
-  float d = randomR(i + vec2(1.0, 1.0));
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  float x1 = mix(a, b, u.x);
-  float x2 = mix(c, d, u.x);
-  return mix(x1, x2, u.y);
-}
-
-float raysShape(vec2 uv, float r, float freq, float intensity, float radius) {
-  float a = atan(uv.y, uv.x);
-  vec2 left = vec2(a * freq, r);
-  vec2 right = vec2(fract(a / TWO_PI) * TWO_PI * freq, r);
-  float n_left = pow(valueNoise(left), intensity);
-  float n_right = pow(valueNoise(right), intensity);
-  float shape = mix(n_right, n_left, smoothstep(-.15, .15, uv.x));
-  return shape;
-}
-
-void main() {
-  vec2 shape_uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
-
-  float t = .2 * u_speed * iTime;
-  float radius = length(shape_uv);
-  float spots = 6.5 * abs(u_spotty);
-  float intensity = 4. - 3. * clamp(u_intensity, 0., 1.);
-
-  float midSize = 10. * abs(u_midSize);
-  float ms_lo = 0.02 * midSize;
-  float ms_hi = max(midSize, 1e-6);
-  float middleShape = pow(u_midIntensity, 0.3) * (1. - smoothstep(ms_lo, ms_hi, 3.0 * radius));
-  middleShape = pow(middleShape, 5.0);
-
-  vec3 accumColor = vec3(0.0);
-  float accumAlpha = 0.0;
-
-  for (int i = 0; i < 5; i++) {
-    if (i >= int(u_colorsCount)) break;
-
-    vec2 rotatedUV = rotate(shape_uv, float(i) + 1.0);
-
-    float r1 = radius * (1.0 + 0.4 * float(i)) - 3.0 * t;
-    float r2 = 0.5 * radius * (1.0 + spots) - 2.0 * t;
-    float density = 6. * u_density + step(.5, u_density) * pow(4.5 * (u_density - .5), 4.);
-    float f = mix(1.0, 3.0 + 0.5 * float(i), hash11(float(i) * 15.)) * density;
-
-    float ray = raysShape(rotatedUV, r1, 5.0 * f, intensity, radius);
-    ray *= raysShape(rotatedUV, r2, 4.0 * f, intensity, radius);
-    ray += (1. + 4. * ray) * middleShape;
-    ray = clamp(ray, 0.0, 1.0);
-
-    float srcAlpha = u_colors[i].a * ray;
-    vec3 srcColor = u_colors[i].rgb * srcAlpha;
-
-    vec3 alphaBlendColor = accumColor + (1.0 - accumAlpha) * srcColor;
-    float alphaBlendAlpha = accumAlpha + (1.0 - accumAlpha) * srcAlpha;
-
-    vec3 addBlendColor = accumColor + srcColor;
-    float addBlendAlpha = accumAlpha + srcAlpha;
-
-    accumColor = mix(alphaBlendColor, addBlendColor, u_bloom);
-    accumAlpha = mix(alphaBlendAlpha, addBlendAlpha, u_bloom);
-  }
-
-  float overlayAlpha = u_colorBloom.a;
-  vec3 overlayColor = u_colorBloom.rgb * overlayAlpha;
-
-  vec3 colorWithOverlay = accumColor + accumAlpha * overlayColor;
-  accumColor = mix(accumColor, colorWithOverlay, u_bloom);
-
-  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
-
-  vec3 color = accumColor + (1. - accumAlpha) * bgColor;
-  float opacity = accumAlpha + (1. - accumAlpha) * u_colorBack.a;
-  color = clamp(color, 0., 1.);
-  opacity = clamp(opacity, 0., 1.);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-
-export { godRaysFragmentShader };

package/dist/components/effects/GodRays/GodRays.types.d.ts

@@ -1,25 +0,0 @@
-import type React from "react";
-export declare const GOD_RAYS_MAX_COLORS = 5;
-export interface GodRaysProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Background CSS color. Default: 'var(--color-background)'. */
-    colorBack?: string;
-    /** Additive highlight/bloom overlay color. Default: 'var(--color-primary-100)'. */
-    colorBloom?: string;
-    /** Ray colors, up to 5. Default: a 3-stop primary ramp. */
-    colors?: string[];
-    /** How fragmented/spotty the rays look, 0-1+. Default: 0.3. */
-    spotty?: number;
-    /** Central glow size. Default: 0.4. */
-    midSize?: number;
-    /** Central glow intensity, 0-1. Default: 0.5. */
-    midIntensity?: number;
-    /** Ray density. Default: 0.5. */
-    density?: number;
-    /** Ray sharpness, 0-1. Default: 0.5. */
-    intensity?: number;
-    /** Additive-vs-alpha blend for overlapping rays, 0-1. Default: 0.5. */
-    bloom?: number;
-    /** Animation speed multiplier. Default: 1. */
-    speed?: number;
-    className?: string;
-}

package/dist/components/effects/GodRays/GodRays.types.js

@@ -1,3 +0,0 @@
-const GOD_RAYS_MAX_COLORS = 5;
-
-export { GOD_RAYS_MAX_COLORS };

package/dist/components/effects/GodRays/index.d.ts

@@ -1,2 +0,0 @@
-export { GodRays } from "./GodRays";
-export type { GodRaysProps } from "./GodRays.types";

package/dist/components/effects/GridPattern/GridPattern.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import type { GridPatternProps } from "./GridPattern.types";
-/**
- * GridPattern renders an SVG-based grid background pattern.
- *
- * Use it as an absolute-positioned decorative background inside a container
- * with `position: relative`. The pattern is fully non-interactive
- * (`pointer-events: none`) and sits at `z-index: 0` by default.
- *
- * @example
- * ```tsx
- * <div className="relative overflow-hidden h-96">
- *   <GridPattern size={48} color="var(--color-border)" fade animated />
- *   <div className="relative z-10">Your content here</div>
- * </div>
- * ```
- */
-export declare const GridPattern: React.ForwardRefExoticComponent<GridPatternProps & React.RefAttributes<HTMLDivElement>>;