@flikk/ui 1.0.0-beta.1

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -0,0 +1,323 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMotionValue, AnimatePresence, motion, useReducedMotion, useSpring } from 'motion/react';
+import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
+import { cn } from '../../../utils/cn.js';
+import { Avatar } from '../../core/Avatar/Avatar.js';
+import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
+import { customCursorTheme } from './CustomCursor.theme.js';
+
+/**
+ * Context for CustomCursor state management
+ */
+const CustomCursorContext = React.createContext(undefined);
+/**
+ * Hook to access CustomCursor context
+ * @throws Error if used outside CustomCursorProvider
+ */
+const useCustomCursor = () => {
+    const context = React.useContext(CustomCursorContext);
+    if (!context) {
+        throw new Error('useCustomCursor must be used within a CustomCursorProvider');
+    }
+    return context;
+};
+/**
+ * CustomCursorProvider - Context provider component
+ * Tracks mouse movement within parent element and manages cursor state
+ *
+ * @example
+ * ```tsx
+ * <CustomCursorProvider>
+ *   <CustomCursor>
+ *     <div className="w-4 h-4 bg-blue-500 rounded-full" />
+ *   </CustomCursor>
+ *   <YourContent />
+ * </CustomCursorProvider>
+ * ```
+ */
+const CustomCursorProvider = React.forwardRef(({ children, className, allowedPointerTypes = ['mouse'], ...props }, ref) => {
+    const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });
+    const [isActive, setIsActive] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const cursorRef = React.useRef(null);
+    const allowedPointerTypesSet = React.useMemo(() => new Set(allowedPointerTypes), [allowedPointerTypes]);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    React.useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const parent = containerRef.current.parentElement;
+        if (!parent)
+            return;
+        // Ensure parent has positioning context for absolute children
+        const computedPosition = getComputedStyle(parent).position;
+        const previousInlinePosition = parent.style.position;
+        const shouldOverridePosition = computedPosition === 'static';
+        if (shouldOverridePosition) {
+            parent.style.position = 'relative';
+        }
+        const handlePointerMove = (event) => {
+            const pointerType = (event.pointerType || 'mouse');
+            if (!allowedPointerTypesSet.has(pointerType))
+                return;
+            const rect = parent.getBoundingClientRect();
+            // Convert viewport coordinates to parent-relative coordinates
+            setCursorPos({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+            setIsActive(true);
+        };
+        const handlePointerLeave = (event) => {
+            const pointerType = (event.pointerType || 'mouse');
+            if (!allowedPointerTypesSet.has(pointerType))
+                return;
+            setIsActive(false);
+        };
+        const handleMouseMove = (event) => {
+            const rect = parent.getBoundingClientRect();
+            setCursorPos({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+            setIsActive(true);
+        };
+        const handleMouseLeave = () => {
+            setIsActive(false);
+        };
+        const supportsPointerEvents = typeof window !== 'undefined' && 'PointerEvent' in window;
+        if (supportsPointerEvents) {
+            parent.addEventListener('pointermove', handlePointerMove);
+            parent.addEventListener('pointerleave', handlePointerLeave);
+        }
+        else {
+            parent.addEventListener('mousemove', handleMouseMove);
+            parent.addEventListener('mouseleave', handleMouseLeave);
+        }
+        return () => {
+            if (supportsPointerEvents) {
+                parent.removeEventListener('pointermove', handlePointerMove);
+                parent.removeEventListener('pointerleave', handlePointerLeave);
+            }
+            else {
+                parent.removeEventListener('mousemove', handleMouseMove);
+                parent.removeEventListener('mouseleave', handleMouseLeave);
+            }
+            if (shouldOverridePosition) {
+                parent.style.position = previousInlinePosition;
+            }
+        };
+    }, [allowedPointerTypesSet]);
+    const contextValue = React.useMemo(() => ({ cursorPos, isActive, containerRef, cursorRef }), [cursorPos, isActive]);
+    return (jsx(CustomCursorContext.Provider, { value: contextValue, children: jsx("div", { ref: containerRef, "data-slot": "custom-cursor-provider", className: className, ...props, children: children }) }));
+});
+CustomCursorProvider.displayName = 'CustomCursorProvider';
+/**
+ * CustomCursor - Main cursor element component
+ * Follows mouse position exactly with instant movement
+ *
+ * @example
+ * ```tsx
+ * <CustomCursor size="md" color="primary" variant="glass">
+ *   <PaperAirplaneIcon />
+ * </CustomCursor>
+ * ```
+ */
+const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary', variant = 'default', shape = 'arrow', className, style, ...props }, ref) => {
+    const { cursorPos, isActive, containerRef, cursorRef } = useCustomCursor();
+    React.useImperativeHandle(ref, () => cursorRef.current);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    // Hide default cursor when custom cursor is active
+    React.useEffect(() => {
+        var _a;
+        const parentElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parentElement || !isActive) {
+            return;
+        }
+        const previousInlineCursor = parentElement.style.cursor;
+        parentElement.style.cursor = 'none';
+        return () => {
+            parentElement.style.cursor = previousInlineCursor;
+        };
+    }, [containerRef, isActive]);
+    // Update cursor position instantly (no spring)
+    React.useEffect(() => {
+        x.set(cursorPos.x);
+        y.set(cursorPos.y);
+    }, [cursorPos, x, y]);
+    // Default content based on shape
+    const defaultContent = shape === 'arrow' ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
+    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorRef, "data-slot": "custom-cursor", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorStyle, customCursorTheme.sizes[size], customCursorTheme.colors[color], customCursorTheme.variants[variant], customCursorTheme.shapes[shape], className), style: { top: y, left: x, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: children || defaultContent })) }));
+});
+CustomCursor.displayName = 'CustomCursor';
+/**
+ * Calculate offset based on alignment and element dimensions
+ */
+const calculateOffset = (align, sideOffset, width, height) => {
+    switch (align) {
+        case 'center':
+            return { x: width / 2, y: height / 2 };
+        case 'top':
+            return { x: width / 2, y: height + sideOffset };
+        case 'top-left':
+            return { x: width + sideOffset, y: height + sideOffset };
+        case 'top-right':
+            return { x: -sideOffset, y: height + sideOffset };
+        case 'bottom':
+            return { x: width / 2, y: -sideOffset };
+        case 'bottom-left':
+            return { x: width + sideOffset, y: -sideOffset };
+        case 'bottom-right':
+            return { x: -sideOffset, y: -sideOffset };
+        case 'left':
+            return { x: width + sideOffset, y: height / 2 };
+        case 'right':
+            return { x: -sideOffset, y: height / 2 };
+        default:
+            return { x: 0, y: 0 };
+    }
+};
+/**
+ * CustomCursorFollow - Smooth following cursor element
+ * Follows the main cursor with spring physics for smooth, laggy movement
+ *
+ * @example
+ * ```tsx
+ * <CustomCursorFollow align="bottom-right" sideOffset={20}>
+ *   <div className="bg-white rounded-lg shadow-lg p-2">
+ *     Tooltip content
+ *   </div>
+ * </CustomCursorFollow>
+ * ```
+ */
+/** Available colors for random selection in user variant */
+const userVariantColors = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+];
+const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = 'bottom-right', transition, variant = 'default', avatar, name, color, className, style, ...props }, ref) => {
+    const { cursorPos, isActive, cursorRef } = useCustomCursor();
+    const cursorFollowRef = React.useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    // Select random color for user variant if not provided (stable across renders)
+    const resolvedColor = React.useMemo(() => {
+        if (color)
+            return color;
+        const randomIndex = Math.floor(Math.random() * userVariantColors.length);
+        return userVariantColors[randomIndex];
+    }, [color]);
+    React.useImperativeHandle(ref, () => cursorFollowRef.current);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const [followDimensions, setFollowDimensions] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    const [cursorDimensions, setCursorDimensions] = React.useState({
+        width: 20,
+        height: 20,
+    });
+    // Apply spring physics for smooth following
+    const springConfig = shouldReduceMotion
+        ? reducedMotionSpringConfig
+        : transition !== null && transition !== void 0 ? transition : defaultSpringConfig;
+    const springX = useSpring(x, springConfig);
+    const springY = useSpring(y, springConfig);
+    // Track size changes on the follow element
+    React.useEffect(() => {
+        if (!isActive)
+            return;
+        const followElement = cursorFollowRef.current;
+        if (!followElement)
+            return;
+        const updateDimensions = () => {
+            var _a, _b;
+            const rect = followElement.getBoundingClientRect();
+            const width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+            const height = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+            setFollowDimensions((prev) => prev.width === width && prev.height === height
+                ? prev
+                : { width, height });
+        };
+        updateDimensions();
+        const cleanupFns = [];
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(updateDimensions);
+            observer.observe(followElement);
+            cleanupFns.push(() => observer.disconnect());
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', updateDimensions);
+            cleanupFns.push(() => window.removeEventListener('resize', updateDimensions));
+        }
+        return () => {
+            cleanupFns.forEach((cleanup) => cleanup());
+        };
+    }, [isActive]);
+    // Track size changes on the main cursor element
+    React.useEffect(() => {
+        if (!isActive)
+            return;
+        const cursorElement = cursorRef.current;
+        if (!cursorElement)
+            return;
+        const updateCursorDimensions = () => {
+            var _a, _b;
+            const rect = cursorElement.getBoundingClientRect();
+            const width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+            const height = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+            setCursorDimensions((prev) => prev.width === width && prev.height === height
+                ? prev
+                : { width, height });
+        };
+        updateCursorDimensions();
+        const cleanupFns = [];
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(updateCursorDimensions);
+            observer.observe(cursorElement);
+            cleanupFns.push(() => observer.disconnect());
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', updateCursorDimensions);
+            cleanupFns.push(() => window.removeEventListener('resize', updateCursorDimensions));
+        }
+        return () => {
+            cleanupFns.forEach((cleanup) => cleanup());
+        };
+    }, [cursorRef, isActive]);
+    const cursorX = cursorPos.x;
+    const cursorY = cursorPos.y;
+    // Calculate and update position with offset using cached dimensions
+    React.useEffect(() => {
+        const offset = calculateOffset(align, sideOffset, followDimensions.width, followDimensions.height);
+        const cursorWidth = cursorDimensions.width;
+        const cursorHeight = cursorDimensions.height;
+        x.set(cursorX - offset.x + cursorWidth / 2);
+        y.set(cursorY - offset.y + cursorHeight / 2);
+    }, [
+        align,
+        cursorDimensions.height,
+        cursorDimensions.width,
+        cursorX,
+        cursorY,
+        followDimensions.height,
+        followDimensions.width,
+        sideOffset,
+        x,
+        y,
+    ]);
+    // Determine content based on variant
+    const renderContent = () => {
+        if (variant === 'user') {
+            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-xs font-medium whitespace-nowrap", children: name }))] }));
+        }
+        return children;
+    };
+    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === 'user' && customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: renderContent() })) }));
+});
+CustomCursorFollow.displayName = 'CustomCursorFollow';
+
+export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor };

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

@@ -0,0 +1,6 @@
+import type { CustomCursorTheme } from "./CustomCursor.types";
+/**
+ * Theme configuration for CustomCursor component
+ * Uses CSS variables for themeable colors and properties
+ */
+export declare const customCursorTheme: CustomCursorTheme;

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

@@ -0,0 +1,43 @@
+/**
+ * Theme configuration for CustomCursor component
+ * Uses CSS variables for themeable colors and properties
+ */
+const customCursorTheme = {
+    baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
+    cursorStyle: "transition-transform duration-150",
+    cursorFollowVariants: {
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
+        user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
+    },
+    cursorFollowColors: {
+        neutral: "bg-[var(--color-background-secondary)]",
+        dark: "bg-[var(--color-text-primary)]",
+        primary: "bg-[var(--color-primary)]",
+        success: "bg-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]",
+        danger: "bg-[var(--color-danger)]",
+    },
+    sizes: {
+        sm: "w-5 h-5",
+        md: "w-7 h-7",
+        lg: "w-10 h-10",
+    },
+    colors: {
+        neutral: "text-[var(--color-background-secondary)]",
+        dark: "text-[var(--color-text-primary)]",
+        primary: "text-[var(--color-primary)]",
+        success: "text-[var(--color-success)]",
+        warning: "text-[var(--color-warning)]",
+        danger: "text-[var(--color-danger)]",
+    },
+    variants: {
+        default: "",
+        glass: "backdrop-blur-md bg-white/30 dark:bg-white/10 border border-white/50 dark:border-white/20 shadow-xl rounded-[var(--radius-base)] p-1",
+    },
+    shapes: {
+        circle: "rounded-full bg-[var(--color-primary)] opacity-50",
+        arrow: "rotate-45",
+    },
+};
+
+export { customCursorTheme };

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import type { HTMLMotionProps, SpringOptions } from 'motion/react';
+/**
+ * Alignment positions for CustomCursorFollow relative to the main cursor
+ */
+export type AlignType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'center';
+/**
+ * Size variants for the custom cursor
+ */
+export type CustomCursorSize = 'sm' | 'md' | 'lg';
+/**
+ * Color variants for the custom cursor
+ */
+export type CustomCursorColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Visual variants for the custom cursor
+ */
+export type CustomCursorVariant = 'default' | 'glass';
+/**
+ * Shape variants for the custom cursor
+ */
+export type CustomCursorShape = 'circle' | 'arrow';
+/**
+ * Variant for CustomCursorFollow component
+ */
+export type CustomCursorFollowVariant = 'default' | 'user';
+/**
+ * Context type for CustomCursor state management
+ */
+export interface CustomCursorContextType {
+    cursorPos: {
+        x: number;
+        y: number;
+    };
+    isActive: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    cursorRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Props for CustomCursorProvider component
+ */
+export type CustomCursorPointerType = 'mouse' | 'pen' | 'touch';
+export interface CustomCursorProviderProps extends React.ComponentProps<'div'> {
+    children: React.ReactNode;
+    className?: string;
+    allowedPointerTypes?: CustomCursorPointerType[];
+}
+/**
+ * Props for CustomCursor component
+ */
+export interface CustomCursorProps extends HTMLMotionProps<'div'> {
+    children?: React.ReactNode;
+    size?: CustomCursorSize;
+    color?: CustomCursorColor;
+    variant?: CustomCursorVariant;
+    shape?: CustomCursorShape;
+    className?: string;
+}
+/**
+ * Props for CustomCursorFollow component
+ */
+export interface CustomCursorFollowProps extends HTMLMotionProps<'div'> {
+    children?: React.ReactNode;
+    sideOffset?: number;
+    align?: AlignType;
+    transition?: SpringOptions;
+    variant?: CustomCursorFollowVariant;
+    className?: string;
+    /** Avatar image URL (used with variant="user") */
+    avatar?: string;
+    /** User name to display (used with variant="user") */
+    name?: string;
+    /** Color for the user pill (used with variant="user"). If not provided, a random color is selected. */
+    color?: CustomCursorColor;
+}
+/**
+ * Theme configuration for CustomCursor
+ */
+export interface CustomCursorTheme {
+    baseStyle: string;
+    cursorStyle: string;
+    cursorFollowStyle: string;
+    cursorFollowVariants: Record<CustomCursorFollowVariant, string>;
+    cursorFollowColors: Record<CustomCursorColor, string>;
+    sizes: Record<CustomCursorSize, string>;
+    colors: Record<CustomCursorColor, string>;
+    variants: Record<CustomCursorVariant, string>;
+    shapes: Record<CustomCursorShape, string>;
+}
+/**
+ * Partial theme overrides for CustomCursor
+ */
+export interface CustomCursorThemeOverrides {
+    baseStyle?: string;
+    cursorStyle?: string;
+    cursorFollowStyle?: string;
+    sizes?: Partial<Record<CustomCursorSize, string>>;
+    colors?: Partial<Record<CustomCursorColor, string>>;
+    variants?: Partial<Record<CustomCursorVariant, string>>;
+    shapes?: Partial<Record<CustomCursorShape, string>>;
+}

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

@@ -0,0 +1,4 @@
+export { CustomCursorProvider, CustomCursor, CustomCursorFollow, useCustomCursor, } from './CustomCursor';
+export { customCursorTheme } from './CustomCursor.theme';
+export { customCursorVariants, defaultSpringConfig, reducedMotionSpringConfig, } from './CustomCursor.animations';
+export type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps, CustomCursorSize, CustomCursorColor, CustomCursorVariant, CustomCursorShape, AlignType, CustomCursorTheme, CustomCursorThemeOverrides, } from './CustomCursor.types';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { GlassEffectProps } from './GlassEffect.types';
+/**
+ * GlassEffect component creates a layered glass morphism effect
+ * Uses hardcoded gradients for consistent visibility on light backgrounds
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden bg-blue-500 rounded-lg">
+ *   <GlassEffect rounded="var(--button-radius)" />
+ *   <span className="relative z-10">Content</span>
+ * </div>
+ * ```
+ */
+export declare const GlassEffect: React.FC<GlassEffectProps>;

package/dist/components/effects/GlassEffect/GlassEffect.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+
+/**
+ * GlassEffect component creates a layered glass morphism effect
+ * Uses hardcoded gradients for consistent visibility on light backgrounds
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden bg-blue-500 rounded-lg">
+ *   <GlassEffect rounded="var(--button-radius)" />
+ *   <span className="relative z-10">Content</span>
+ * </div>
+ * ```
+ */
+const GlassEffect = ({ rounded = 'inherit', blendModeOuter = 'normal', blendModeInner = 'normal', gradientOuter, gradientInner, classNameOuter, classNameInner, zIndex = 0, }) => {
+    // Calculate inner border radius (slightly smaller than outer)
+    const innerRoundedCalc = rounded === 'inherit'
+        ? 'inherit'
+        : `calc(${rounded} - 1.5px)`;
+    // Default gradients with visible contrast on light backgrounds
+    const defaultGradientOuter = 'linear-gradient(to bottom, #ffffff 0%, #e5e7eb 40%,  #ffffff 100%)';
+    const defaultGradientInner = 'linear-gradient(to bottom, #edeff0 0%, #ffffff 100%)';
+    return (jsx("div", { className: cn("absolute inset-0 p-[1.5px] border-[1px] border-[var(--color-border)]", "pointer-events-none", // Don't block clicks
+        classNameOuter), style: {
+            borderRadius: rounded,
+            zIndex,
+            mixBlendMode: blendModeOuter,
+            background: gradientOuter || defaultGradientOuter,
+        }, children: jsx("div", { className: cn("w-full h-full", classNameInner), style: {
+                borderRadius: innerRoundedCalc,
+                mixBlendMode: blendModeInner,
+                background: gradientInner || defaultGradientInner,
+            } }) }));
+};
+
+export { GlassEffect };

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

@@ -0,0 +1,19 @@
+export type BlendMode = 'multiply' | 'overlay' | 'soft-light' | 'hard-light' | 'screen' | 'normal';
+export interface GlassEffectProps {
+    /** Border radius for the glass layers (e.g., "var(--button-radius)", "9999px", "0.5rem") */
+    rounded?: string;
+    /** Blend mode for outer layer (default: "normal") */
+    blendModeOuter?: BlendMode;
+    /** Blend mode for inner layer (default: "normal") */
+    blendModeInner?: BlendMode;
+    /** Custom gradient for outer layer (overrides default) */
+    gradientOuter?: string;
+    /** Custom gradient for inner layer (overrides default) */
+    gradientInner?: string;
+    /** Custom className for outer layer */
+    classNameOuter?: string;
+    /** Custom className for inner layer */
+    classNameInner?: string;
+    /** Z-index for the glass layers (default: 0) */
+    zIndex?: number;
+}

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

@@ -0,0 +1,2 @@
+export { GlassEffect } from './GlassEffect';
+export type { GlassEffectProps, BlendMode } from './GlassEffect.types';

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { GlassSurfaceProps } from "./GlassSurface.types";
+/**
+ * GlassSurface Component
+ * Creates a realistic chromatic aberration glass effect using SVG filters.
+ * Works as a wrapper for any content.
+ */
+export declare const GlassSurface: React.FC<GlassSurfaceProps>;