@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,244 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, useRef, useMemo, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Hook to detect dark mode preference
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        setIsDark(mediaQuery.matches);
+        const handler = (e) => setIsDark(e.matches);
+        mediaQuery.addEventListener("change", handler);
+        return () => mediaQuery.removeEventListener("change", handler);
+    }, []);
+    return isDark;
+};
+/**
+ * GlassSurface Component
+ * Creates a realistic chromatic aberration glass effect using SVG filters.
+ * Works as a wrapper for any content.
+ */
+const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness = 50, opacity = 0.93, blur = 11, displace = 0.7, backgroundOpacity = 0.1, backgroundColor, saturation = 1.8, distortionScale = -180, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode = "difference", frosted = false, className = "", style = {}, }) => {
+    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();
+    /**
+     * 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="#0000"/>
+            <stop offset="100%" stop-color="red"/>
+          </linearGradient>
+          <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#0000"/>
+            <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 || (isDarkMode ? "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} saturate(${saturation})`,
+                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
+                ...(hasCustomShadow
+                    ? {}
+                    : {
+                        boxShadow: isDarkMode
+                            ? `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 0 1px 1px color-mix(in oklch, white, transparent 40%) inset,
+               0 0 12px 1px color-mix(in oklch, white, transparent 70%) inset,
+               0 8px 24px -12px rgba(0, 0, 0, 0.08),
+               0 4px 12px -4px rgba(0, 0, 0, 0.03)`,
+                    }),
+            };
+        }
+        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 = isDarkMode ? "1.2" : "1.1";
+            const filterStr = `blur(${effectiveBlur}) saturate(${fallbackSaturate}) brightness(${fallbackBrightness})`;
+            if (isDarkMode) {
+                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, isDarkMode, backgroundOpacity, filterId, saturation, hasCustomShadow, supportsBackdrop]);
+    const focusVisibleClasses = isDarkMode
+        ? "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";
+    return (jsxs("div", { ref: containerRef, 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", id: "redchannel", 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", id: "greenchannel", 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", id: "bluechannel", 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 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})` } })) })] }));
+};
+
+export { GlassSurface };

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

@@ -0,0 +1,52 @@
+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;
+    /**
+     * 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

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

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

@@ -0,0 +1,31 @@
+import React from "react";
+import type { OverlayProps } from "./Overlay.types";
+/**
+ * Shared Overlay Component
+ *
+ * Provides consistent overlay behavior (backdrop, portal, animations, escape key, scroll lock)
+ * across Modal, Drawer, CommandPalette, and other overlay-based components.
+ *
+ * Features:
+ * - Portal rendering to document.body
+ * - Configurable positioning (center, top, bottom, left, right, none)
+ * - Customizable animations
+ * - Body scroll lock when open
+ * - Escape key to close
+ * - Click outside to close
+ * - Accessible by default
+ *
+ * @example
+ * ```tsx
+ * <Overlay
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   position="center"
+ * >
+ *   <div className="bg-white rounded-lg p-6">
+ *     Modal content
+ *   </div>
+ * </Overlay>
+ * ```
+ */
+export declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/Overlay/Overlay.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useOverlay } from '../../../hooks/useOverlay.js';
+import { useFocusTrap } from '../../../hooks/useFocusTrap.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { overlayTheme, overlayPositionVariants } from './Overlay.theme.js';
+
+/**
+ * Default overlay backdrop animation variants
+ */
+const defaultOverlayAnimations = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: { duration: 0.2, ease: "easeOut" },
+    },
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.15, ease: "easeIn" },
+    },
+};
+/**
+ * Default content animation variants (center position)
+ */
+const defaultContentAnimations = {
+    initial: { opacity: 0, scale: 0.95, y: 20 },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+            delay: 0.05,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        y: 20,
+        transition: { duration: 0.2, ease: "easeIn" },
+    },
+};
+/**
+ * Shared Overlay Component
+ *
+ * Provides consistent overlay behavior (backdrop, portal, animations, escape key, scroll lock)
+ * across Modal, Drawer, CommandPalette, and other overlay-based components.
+ *
+ * Features:
+ * - Portal rendering to document.body
+ * - Configurable positioning (center, top, bottom, left, right, none)
+ * - Customizable animations
+ * - Body scroll lock when open
+ * - Escape key to close
+ * - Click outside to close
+ * - Accessible by default
+ *
+ * @example
+ * ```tsx
+ * <Overlay
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   position="center"
+ * >
+ *   <div className="bg-white rounded-lg p-6">
+ *     Modal content
+ *   </div>
+ * </Overlay>
+ * ```
+ */
+const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClick = true, closeOnEsc = true, enableScrollLock = true, position = "center", overlayClassName, contentClassName, contentStyle, animations, animationDuration, portalTarget, role, ariaLabelledBy, ariaDescribedBy, ariaModal, enableFocusTrap = true, children, }, ref) => {
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    // When reduced motion is preferred, skip all animation durations
+    const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
+    // Ref for focus trap container
+    const focusTrapRef = useRef(null);
+    useFocusTrap(focusTrapRef, enableFocusTrap && isOpen);
+    // Use overlay hook for behavior (escape key, scroll lock, click handling)
+    const { handleOverlayClick } = useOverlay({
+        isOpen,
+        onClose,
+        closeOnEsc,
+        closeOnOverlayClick,
+        enableScrollLock,
+    });
+    // Merge custom animations with defaults
+    const overlayAnimations = (animations === null || animations === void 0 ? void 0 : animations.overlay) || defaultOverlayAnimations;
+    const contentAnimations = (animations === null || animations === void 0 ? void 0 : animations.content) || defaultContentAnimations;
+    // Apply custom animation durations if provided
+    const finalOverlayAnimations = { ...overlayAnimations };
+    const finalContentAnimations = { ...contentAnimations };
+    if (animationDuration) {
+        if (animationDuration.enter && finalOverlayAnimations.animate) {
+            finalOverlayAnimations.animate.transition = {
+                ...finalOverlayAnimations.animate.transition,
+                duration: animationDuration.enter,
+            };
+        }
+        if (animationDuration.exit && finalOverlayAnimations.exit) {
+            finalOverlayAnimations.exit.transition = {
+                ...finalOverlayAnimations.exit.transition,
+                duration: animationDuration.exit,
+            };
+        }
+    }
+    // Determine portal target
+    const target = portalTarget !== undefined
+        ? portalTarget
+        : isClient
+            ? document.body
+            : null;
+    // Don't render if no portal target available (SSR or first render)
+    if (!target) {
+        return null;
+    }
+    // Detect dark mode from document
+    const isDarkMode = isClient &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
+    const content = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { className: cn(isDarkMode && "dark", overlayTheme.backdrop, overlayPositionVariants[position], overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, children: [jsx("div", { className: overlayTheme.pattern, style: {
+                        backgroundImage: "url(/overlay-dots.svg)",
+                        backgroundRepeat: "repeat",
+                        backgroundSize: "540px 540px",
+                    } }), jsx(motion.div, { ref: (node) => {
+                        // Merge external ref and focus trap ref
+                        focusTrapRef.current = node;
+                        if (typeof ref === "function")
+                            ref(node);
+                        else if (ref)
+                            ref.current = node;
+                    }, className: cn(overlayTheme.content, contentClassName), style: contentStyle, variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", transition: instantTransition, onClick: (e) => e.stopPropagation(), ...(role ? { role } : {}), ...(ariaModal ? { "aria-modal": true } : {}), ...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}), ...(ariaDescribedBy
+                        ? { "aria-describedby": ariaDescribedBy }
+                        : {}), children: children })] })) }));
+    return createPortal(content, target);
+});
+Overlay.displayName = "Overlay";
+
+export { Overlay };

package/dist/components/effects/Overlay/Overlay.theme.d.ts

@@ -0,0 +1,13 @@
+import type { OverlayPosition } from "./Overlay.types";
+export declare const overlayTheme: {
+    /** Full-screen backdrop with blur */
+    backdrop: string;
+    /** Dots / pattern layer behind content */
+    pattern: string;
+    /** Content wrapper (sits above pattern) */
+    content: string;
+};
+/**
+ * Position variant classes for overlay content placement.
+ */
+export declare const overlayPositionVariants: Record<OverlayPosition, string>;

package/dist/components/effects/Overlay/Overlay.theme.js

@@ -0,0 +1,22 @@
+const overlayTheme = {
+    /** Full-screen backdrop with blur */
+    backdrop: "fixed inset-0 bg-[var(--overlay-bg)] z-50 ",
+    // backdrop-blur-[var(--overlay-blur)]
+    /** Dots / pattern layer behind content */
+    pattern: "absolute inset-0 w-full h-full z-0 pointer-events-none",
+    /** Content wrapper (sits above pattern) */
+    content: "relative z-10",
+};
+/**
+ * Position variant classes for overlay content placement.
+ */
+const overlayPositionVariants = {
+    center: "flex items-center justify-center",
+    top: "flex items-start justify-center px-4",
+    bottom: "flex items-end justify-center px-4",
+    left: "flex items-center justify-start",
+    right: "flex items-center justify-end",
+    none: "",
+};
+
+export { overlayPositionVariants, overlayTheme };

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Variants } from 'motion/react';
+/**
+ * Overlay positioning options
+ */
+export type OverlayPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'none';
+/**
+ * Custom animation variants for overlay and content
+ */
+export interface OverlayAnimations {
+    /** Animation variants for the overlay backdrop */
+    overlay?: Variants;
+    /** Animation variants for the content container */
+    content?: Variants;
+}
+/**
+ * Overlay component props
+ */
+export interface OverlayProps {
+    /** Whether the overlay is currently open */
+    isOpen: boolean;
+    /** Callback to close the overlay */
+    onClose: () => void;
+    /** Whether clicking the overlay backdrop should close it (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape should close the overlay (default: true) */
+    closeOnEsc?: boolean;
+    /** Whether to lock body scroll when overlay is open (default: true) */
+    enableScrollLock?: boolean;
+    /** Position of the content within the overlay (default: 'center') */
+    position?: OverlayPosition;
+    /** Additional class name for the overlay backdrop */
+    overlayClassName?: string;
+    /** Additional class name for the content container */
+    contentClassName?: string;
+    /** Inline styles for the content container (useful for dynamic positioning) */
+    contentStyle?: React.CSSProperties;
+    /** Custom animation variants for overlay and content */
+    animations?: OverlayAnimations;
+    /** Animation duration overrides */
+    animationDuration?: {
+        /** Enter animation duration in seconds (default: 0.2) */
+        enter?: number;
+        /** Exit animation duration in seconds (default: 0.15) */
+        exit?: number;
+    };
+    /** Target element for portal rendering (default: document.body) */
+    portalTarget?: Element | null;
+    /** ARIA role for the content container (e.g. 'dialog', 'alertdialog') */
+    role?: string;
+    /** ID of the element that labels the content */
+    ariaLabelledBy?: string;
+    /** ID of the element that describes the content */
+    ariaDescribedBy?: string;
+    /** Whether the content is a modal (adds aria-modal="true") */
+    ariaModal?: boolean;
+    /** Whether to trap focus within the content (default: true) */
+    enableFocusTrap?: boolean;
+    /** Overlay content */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export { Overlay } from "./Overlay";
+export { overlayTheme, overlayPositionVariants } from "./Overlay.theme";
+export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay.types";

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { SpotlightBorderProps } from "./SpotlightBorder.types";
+/**
+ * SpotlightBorder Component
+ * Adds an interactive WebGL border effect around its children.
+ * The border illuminates near the mouse cursor and supports a soft outer glow.
+ * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
+ *
+ * @example
+ * ```tsx
+ * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
+ *   <div className="p-6 bg-gray-900">
+ *     <h3>Premium Card</h3>
+ *   </div>
+ * </SpotlightBorder>
+ * ```
+ */
+export declare const SpotlightBorder: React.FC<SpotlightBorderProps>;