flikkui 0.1.0-beta.11

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

@@ -0,0 +1,316 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import * as React from 'react';
+import { cn } from '../../../utils/cn.js';
+import { customCursorVariants, reducedMotionSpringConfig, defaultSpringConfig } from './CustomCursor.animations.js';
+import { customCursorTheme } from './CustomCursor.theme.js';
+import { useMotionValue } from '../../../node_modules/framer-motion/dist/es/value/use-motion-value.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/PaperAirplaneIcon.js';
+import { useSpring } from '../../../node_modules/framer-motion/dist/es/value/use-spring.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+
+/**
+ * Context for CustomCursor state management
+ */
+var CustomCursorContext = React.createContext(undefined);
+/**
+ * Hook to access CustomCursor context
+ * @throws Error if used outside CustomCursorProvider
+ */
+var useCustomCursor = function () {
+    var 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>
+ * ```
+ */
+var CustomCursorProvider = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.allowedPointerTypes, allowedPointerTypes = _b === void 0 ? ['mouse'] : _b, props = __rest(_a, ["children", "className", "allowedPointerTypes"]);
+    var _c = React.useState({ x: 0, y: 0 }), cursorPos = _c[0], setCursorPos = _c[1];
+    var _d = React.useState(false), isActive = _d[0], setIsActive = _d[1];
+    var containerRef = React.useRef(null);
+    var cursorRef = React.useRef(null);
+    var allowedPointerTypesSet = React.useMemo(function () { return new Set(allowedPointerTypes); }, [allowedPointerTypes]);
+    React.useImperativeHandle(ref, function () { return containerRef.current; });
+    React.useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var parent = containerRef.current.parentElement;
+        if (!parent)
+            return;
+        // Ensure parent has positioning context for absolute children
+        var computedPosition = getComputedStyle(parent).position;
+        var previousInlinePosition = parent.style.position;
+        var shouldOverridePosition = computedPosition === 'static';
+        if (shouldOverridePosition) {
+            parent.style.position = 'relative';
+        }
+        var handlePointerMove = function (event) {
+            var pointerType = (event.pointerType || 'mouse');
+            if (!allowedPointerTypesSet.has(pointerType))
+                return;
+            var rect = parent.getBoundingClientRect();
+            // Convert viewport coordinates to parent-relative coordinates
+            setCursorPos({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+            setIsActive(true);
+        };
+        var handlePointerLeave = function (event) {
+            var pointerType = (event.pointerType || 'mouse');
+            if (!allowedPointerTypesSet.has(pointerType))
+                return;
+            setIsActive(false);
+        };
+        var handleMouseMove = function (event) {
+            var rect = parent.getBoundingClientRect();
+            setCursorPos({
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            });
+            setIsActive(true);
+        };
+        var handleMouseLeave = function () {
+            setIsActive(false);
+        };
+        var 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 function () {
+            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]);
+    return (React.createElement(CustomCursorContext.Provider, { value: { cursorPos: cursorPos, isActive: isActive, containerRef: containerRef, cursorRef: cursorRef } },
+        React.createElement("div", __assign({ ref: containerRef, "data-slot": "custom-cursor-provider", className: className }, props), 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>
+ * ```
+ */
+var CustomCursor = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, _e = _a.shape, shape = _e === void 0 ? 'arrow' : _e, className = _a.className, style = _a.style, props = __rest(_a, ["children", "size", "color", "variant", "shape", "className", "style"]);
+    var _f = useCustomCursor(), cursorPos = _f.cursorPos, isActive = _f.isActive, containerRef = _f.containerRef, cursorRef = _f.cursorRef;
+    React.useImperativeHandle(ref, function () { return cursorRef.current; });
+    var x = useMotionValue(0);
+    var y = useMotionValue(0);
+    // Hide default cursor when custom cursor is active
+    React.useEffect(function () {
+        var _a;
+        var parentElement = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parentElement || !isActive) {
+            return;
+        }
+        var previousInlineCursor = parentElement.style.cursor;
+        parentElement.style.cursor = 'none';
+        return function () {
+            parentElement.style.cursor = previousInlineCursor;
+        };
+    }, [containerRef, isActive]);
+    // Update cursor position instantly (no spring)
+    React.useEffect(function () {
+        x.set(cursorPos.x);
+        y.set(cursorPos.y);
+    }, [cursorPos, x, y]);
+    // Default content based on shape
+    var defaultContent = shape === 'arrow' ? (React.createElement(ForwardRef, { className: "w-full h-full rotate-180" })) : (React.createElement("div", { className: "w-full h-full" }));
+    return (React.createElement(AnimatePresence, null, isActive && (React.createElement(motion.div, __assign({ 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: __assign({ top: y, left: x }, style), variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true" }, props), children || defaultContent))));
+});
+CustomCursor.displayName = 'CustomCursor';
+/**
+ * Calculate offset based on alignment and element dimensions
+ */
+var calculateOffset = function (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>
+ * ```
+ */
+var CustomCursorFollow = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.sideOffset, sideOffset = _b === void 0 ? 15 : _b, _c = _a.align, align = _c === void 0 ? 'bottom-right' : _c, transition = _a.transition, className = _a.className, style = _a.style, props = __rest(_a, ["children", "sideOffset", "align", "transition", "className", "style"]);
+    var _d = useCustomCursor(), cursorPos = _d.cursorPos, isActive = _d.isActive, cursorRef = _d.cursorRef;
+    var cursorFollowRef = React.useRef(null);
+    var shouldReduceMotion = useReducedMotion();
+    React.useImperativeHandle(ref, function () { return cursorFollowRef.current; });
+    var x = useMotionValue(0);
+    var y = useMotionValue(0);
+    var _e = React.useState({
+        width: 0,
+        height: 0,
+    }), followDimensions = _e[0], setFollowDimensions = _e[1];
+    var _f = React.useState({
+        width: 20,
+        height: 20,
+    }), cursorDimensions = _f[0], setCursorDimensions = _f[1];
+    // Apply spring physics for smooth following
+    var springConfig = shouldReduceMotion
+        ? reducedMotionSpringConfig
+        : transition !== null && transition !== void 0 ? transition : defaultSpringConfig;
+    var springX = useSpring(x, springConfig);
+    var springY = useSpring(y, springConfig);
+    // Track size changes on the follow element
+    React.useEffect(function () {
+        if (!isActive)
+            return;
+        var followElement = cursorFollowRef.current;
+        if (!followElement)
+            return;
+        var updateDimensions = function () {
+            var _a, _b;
+            var rect = followElement.getBoundingClientRect();
+            var width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+            var height = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+            setFollowDimensions(function (prev) {
+                return prev.width === width && prev.height === height
+                    ? prev
+                    : { width: width, height: height };
+            });
+        };
+        updateDimensions();
+        var cleanupFns = [];
+        if (typeof ResizeObserver !== 'undefined') {
+            var observer_1 = new ResizeObserver(updateDimensions);
+            observer_1.observe(followElement);
+            cleanupFns.push(function () { return observer_1.disconnect(); });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', updateDimensions);
+            cleanupFns.push(function () {
+                return window.removeEventListener('resize', updateDimensions);
+            });
+        }
+        return function () {
+            cleanupFns.forEach(function (cleanup) { return cleanup(); });
+        };
+    }, [isActive]);
+    // Track size changes on the main cursor element
+    React.useEffect(function () {
+        if (!isActive)
+            return;
+        var cursorElement = cursorRef.current;
+        if (!cursorElement)
+            return;
+        var updateCursorDimensions = function () {
+            var _a, _b;
+            var rect = cursorElement.getBoundingClientRect();
+            var width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+            var height = (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0;
+            setCursorDimensions(function (prev) {
+                return prev.width === width && prev.height === height
+                    ? prev
+                    : { width: width, height: height };
+            });
+        };
+        updateCursorDimensions();
+        var cleanupFns = [];
+        if (typeof ResizeObserver !== 'undefined') {
+            var observer_2 = new ResizeObserver(updateCursorDimensions);
+            observer_2.observe(cursorElement);
+            cleanupFns.push(function () { return observer_2.disconnect(); });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', updateCursorDimensions);
+            cleanupFns.push(function () {
+                return window.removeEventListener('resize', updateCursorDimensions);
+            });
+        }
+        return function () {
+            cleanupFns.forEach(function (cleanup) { return cleanup(); });
+        };
+    }, [cursorRef, isActive]);
+    var cursorX = cursorPos.x;
+    var cursorY = cursorPos.y;
+    // Calculate and update position with offset using cached dimensions
+    React.useEffect(function () {
+        var offset = calculateOffset(align, sideOffset, followDimensions.width, followDimensions.height);
+        var cursorWidth = cursorDimensions.width;
+        var 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,
+    ]);
+    return (React.createElement(AnimatePresence, null, isActive && (React.createElement(motion.div, __assign({ ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowStyle, className), style: __assign({ top: springY, left: springX }, style), variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true" }, props), children))));
+});
+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,32 @@
+/**
+ * Theme configuration for CustomCursor component
+ * Uses CSS variables for themeable colors and properties
+ */
+var customCursorTheme = {
+    baseStyle: 'pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]',
+    cursorStyle: 'transition-transform duration-150',
+    cursorFollowStyle: 'rounded-lg bg-white shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]',
+    sizes: {
+        sm: 'w-5 h-5',
+        md: 'w-7 h-7',
+        lg: 'w-10 h-10',
+    },
+    colors: {
+        neutral: 'text-[var(--color-background-quaternary)]',
+        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 border border-white/50 shadow-xl rounded-lg 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,88 @@
+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';
+/**
+ * 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;
+    className?: string;
+}
+/**
+ * Theme configuration for CustomCursor
+ */
+export interface CustomCursorTheme {
+    baseStyle: string;
+    cursorStyle: string;
+    cursorFollowStyle: 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-rounded)" />
+ *   <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,40 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * 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-rounded)" />
+ *   <span className="relative z-10">Content</span>
+ * </div>
+ * ```
+ */
+var GlassEffect = function (_a) {
+    var _b = _a.rounded, rounded = _b === void 0 ? 'inherit' : _b, _c = _a.blendModeOuter, blendModeOuter = _c === void 0 ? 'normal' : _c, _d = _a.blendModeInner, blendModeInner = _d === void 0 ? 'normal' : _d, gradientOuter = _a.gradientOuter, gradientInner = _a.gradientInner, classNameOuter = _a.classNameOuter, classNameInner = _a.classNameInner, _e = _a.zIndex, zIndex = _e === void 0 ? 0 : _e;
+    // Calculate inner border radius (slightly smaller than outer)
+    var innerRoundedCalc = rounded === 'inherit'
+        ? 'inherit'
+        : "calc(".concat(rounded, " - 1.5px)");
+    // Default gradients with visible contrast on light backgrounds
+    var defaultGradientOuter = 'linear-gradient(to bottom, #ffffff 0%, #e5e7eb 40%,  #ffffff 100%)';
+    var defaultGradientInner = 'linear-gradient(to bottom, #edeff0 0%, #ffffff 100%)';
+    return (React__default.createElement("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: zIndex,
+            mixBlendMode: blendModeOuter,
+            background: gradientOuter || defaultGradientOuter,
+        } },
+        React__default.createElement("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-rounded)", "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/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>>;