flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/core/Popover/PopoverContent.js

@@ -1,28 +1,29 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';
 import { useClickOutside } from '../../../utils/useClickOutside.js';
 import { popoverTransitions, popoverBackdropVariants, popoverContentVariants } from './Popover.animations.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 
 /**
  * PopoverContent component displays the content of the popover
  */
-var PopoverContent = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className; _a.animation; var _c = _a.portal, portal = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "animation", "portal"]);
-    var _d = usePopoverContext(), isOpen = _d.isOpen, onOpenChange = _d.onOpenChange, triggerRef = _d.triggerRef, contentRef = _d.contentRef, placement = _d.placement, offset = _d.offset, triggerType = _d.triggerType, closeOnClickOutside = _d.closeOnClickOutside, closeOnEsc = _d.closeOnEsc, preventClose = _d.preventClose, hasBackdrop = _d.hasBackdrop, theme = _d.theme;
-    var shouldReduceMotion = useReducedMotion();
-    var localRef = useRef(null);
-    var _e = useState({
-        top: 0,
-        left: 0,
-    }), position = _e[0], setPosition = _e[1];
+const PopoverContent = React__default.forwardRef(({ children, className, animation = true, portal = true, ...props }, ref) => {
+    const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme } = usePopoverContext();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
+    const { position, cssVariables, contentRef: portalContentRef} = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement: placement, // PopoverPlacement matches SelectPlacement now
+        offset: offset || 8,
+        autoWidth: true,
+    });
     // Use our custom hook for detecting clicks outside
-    useClickOutside(localRef, function (e) {
+    useClickOutside(localRef, (e) => {
         var _a;
         // Skip if clicking on the trigger element (triggering will be handled by the trigger itself)
         if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
@@ -33,116 +34,19 @@ var PopoverContent = React__default.forwardRef(function (_a, ref) {
         }
     });
     // Close the popover when pressing escape
-    useEffect(function () {
-        var handleKeyDown = function (e) {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
             if (closeOnEsc && e.key === "Escape" && !preventClose) {
                 onOpenChange(false);
             }
         };
         document.addEventListener("keydown", handleKeyDown);
-        return function () {
+        return () => {
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [closeOnEsc, onOpenChange, preventClose]);
-    // Position the popover based on the trigger element
-    useEffect(function () {
-        if (!triggerRef.current || !localRef.current)
-            return;
-        var updatePosition = function () {
-            if (!triggerRef.current || !localRef.current)
-                return;
-            var targetRect = triggerRef.current.getBoundingClientRect();
-            var contentRect = localRef.current.getBoundingClientRect();
-            var top = 0;
-            var left = 0;
-            // Default offset
-            var offsetValue = offset || 8;
-            switch (placement) {
-                case "top":
-                    top = targetRect.top - contentRect.height - offsetValue;
-                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
-                    break;
-                case "top-start":
-                    top = targetRect.top - contentRect.height - offsetValue;
-                    left = targetRect.left;
-                    break;
-                case "top-end":
-                    top = targetRect.top - contentRect.height - offsetValue;
-                    left = targetRect.right - contentRect.width;
-                    break;
-                case "bottom":
-                    top = targetRect.bottom + offsetValue;
-                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
-                    break;
-                case "bottom-start":
-                    top = targetRect.bottom + offsetValue;
-                    left = targetRect.left;
-                    break;
-                case "bottom-end":
-                    top = targetRect.bottom + offsetValue;
-                    left = targetRect.right - contentRect.width;
-                    break;
-                case "left":
-                    top = targetRect.top + targetRect.height / 2 - contentRect.height / 2;
-                    left = targetRect.left - contentRect.width - offsetValue;
-                    break;
-                case "left-start":
-                    top = targetRect.top;
-                    left = targetRect.left - contentRect.width - offsetValue;
-                    break;
-                case "left-end":
-                    top = targetRect.bottom - contentRect.height;
-                    left = targetRect.left - contentRect.width - offsetValue;
-                    break;
-                case "right":
-                    top = targetRect.top + targetRect.height / 2 - contentRect.height / 2;
-                    left = targetRect.right + offsetValue;
-                    break;
-                case "right-start":
-                    top = targetRect.top;
-                    left = targetRect.right + offsetValue;
-                    break;
-                case "right-end":
-                    top = targetRect.bottom - contentRect.height;
-                    left = targetRect.right + offsetValue;
-                    break;
-                default:
-                    top = targetRect.bottom + offsetValue;
-                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
-            }
-            // Adjust position to ensure it doesn't go off-screen
-            var windowWidth = window.innerWidth;
-            var windowHeight = window.innerHeight;
-            // Prevent going off the right edge
-            if (left + contentRect.width > windowWidth) {
-                left = windowWidth - contentRect.width - 10;
-            }
-            // Prevent going off the left edge
-            if (left < 10) {
-                left = 10;
-            }
-            // Prevent going off the bottom edge
-            if (top + contentRect.height > windowHeight) {
-                top = windowHeight - contentRect.height - 10;
-            }
-            // Prevent going off the top edge
-            if (top < 10) {
-                top = 10;
-            }
-            setPosition({ top: top, left: left });
-        };
-        // Run immediately to position correctly on first render
-        updatePosition();
-        // Update position on scroll and resize
-        window.addEventListener("scroll", updatePosition, true);
-        window.addEventListener("resize", updatePosition);
-        return function () {
-            window.removeEventListener("scroll", updatePosition, true);
-            window.removeEventListener("resize", updatePosition);
-        };
-    }, [triggerRef, placement, offset, isOpen]);
-    // Combine refs
-    var handleRef = useCallback(function (el) {
+    // Combine refs - merge localRef, external ref, context contentRef, and portal contentRef
+    const handleRef = useCallback((el) => {
         localRef.current = el;
         if (typeof ref === "function") {
             ref(el);
@@ -153,24 +57,30 @@ var PopoverContent = React__default.forwardRef(function (_a, ref) {
         if (contentRef) {
             contentRef.current = el;
         }
-    }, [ref, contentRef]);
+        // Also set the portal contentRef for positioning
+        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [ref, contentRef, portalContentRef]);
     // Extract DOM props to avoid type conflicts
+    const { 
     // HTML event props that conflict with Framer Motion
-    props.onDrag; props.onDragStart; props.onDragEnd; props.onAnimationStart; props.onAnimationEnd; var domProps = __rest(props, ["onDrag", "onDragStart", "onDragEnd", "onAnimationStart", "onAnimationEnd"]);
+    onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
     // Create a backdrop portal
-    var renderBackdrop = hasBackdrop && isOpen && typeof document !== 'undefined';
-    var backdrop = renderBackdrop ? (createPortal(React__default.createElement(motion.div, { key: "backdrop", variants: shouldReduceMotion ? {} : popoverBackdropVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.backdrop, className: cn("fixed inset-0 z-[9998]", theme.backdropStyle), onClick: function (e) {
+    const renderBackdrop = hasBackdrop && isOpen && typeof document !== 'undefined';
+    const backdrop = renderBackdrop ? (createPortal(React__default.createElement(motion.div, { key: "backdrop", variants: shouldReduceMotion ? {} : popoverBackdropVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.backdrop, className: cn("fixed inset-0 z-[9998]", theme.backdropStyle), onClick: (e) => {
             e.stopPropagation();
             if (!preventClose) {
                 onOpenChange(false);
             }
         } }), document.body)) : null;
-    var popoverContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(React__default.Fragment, null,
+    const popoverContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(React__default.Fragment, null,
         backdrop,
-        React__default.createElement(motion.div, __assign({ ref: handleRef, className: cn("fixed z-50", theme.baseStyle, theme.contentStyle, "popover-content", className), style: {
-                top: "".concat(position.top, "px"),
-                left: "".concat(position.left, "px"),
-            }, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion ? {} : popoverContentVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, "data-backdrop": hasBackdrop ? "true" : "false", onClick: function (e) { return e.stopPropagation(); } }, domProps), children)))));
+        React__default.createElement(motion.div, { ref: handleRef, className: cn("fixed z-50", theme.baseStyle, theme.contentStyle, "popover-content", className), style: {
+                ...cssVariables,
+                top: `${position.top}px`,
+                left: `${position.left}px`,
+            }, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion ? {} : popoverContentVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, "data-backdrop": hasBackdrop ? "true" : "false", onClick: (e) => e.stopPropagation(), ...domProps }, children)))));
     // Use portal if specified
     return portal && typeof document !== 'undefined'
         ? createPortal(popoverContent, document.body)
@@ -178,4 +88,4 @@ var PopoverContent = React__default.forwardRef(function (_a, ref) {
 });
 PopoverContent.displayName = "PopoverContent";
 
-export { PopoverContent as default };
+export { PopoverContent };

package/dist/components/core/Popover/PopoverContext.js

@@ -1,10 +1,10 @@
 import { createContext, useContext } from 'react';
 
 // Create context
-var PopoverContext = createContext(undefined);
+const PopoverContext = createContext(undefined);
 // Custom hook for consuming context
-var usePopoverContext = function () {
-    var context = useContext(PopoverContext);
+const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
     if (context === undefined) {
         throw new Error("usePopoverContext must be used within a Popover component");
     }

package/dist/components/core/Popover/PopoverTrigger.js

@@ -1,16 +1,15 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';
 
-var PopoverTrigger = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var context = usePopoverContext();
+const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    var _a;
+    const context = usePopoverContext();
     // Create trigger events based on triggerType
-    var getTriggerEvents = function () {
+    const getTriggerEvents = () => {
         if (context.triggerType === "click") {
             return {
-                onClick: function (e) {
+                onClick: (e) => {
                     var _a, _b;
                     e.preventDefault();
                     context.onOpenChange(!context.isOpen);
@@ -21,13 +20,13 @@ var PopoverTrigger = React__default.forwardRef(function (_a, ref) {
         }
         if (context.triggerType === "hover") {
             return {
-                onMouseEnter: function (e) {
+                onMouseEnter: (e) => {
                     var _a, _b;
                     context.onOpenChange(true);
                     // Call the original onMouseEnter if it exists
                     (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
-                onMouseLeave: function (e) {
+                onMouseLeave: (e) => {
                     var _a, _b;
                     if (!context.preventClose) {
                         context.onOpenChange(false);
@@ -48,7 +47,7 @@ var PopoverTrigger = React__default.forwardRef(function (_a, ref) {
             else if (typeof ref === "object")
                 ref.current = node;
         }
-        var childRef = children.ref;
+        const childRef = children.ref;
         if (childRef) {
             if (typeof childRef === "function")
                 childRef(node);
@@ -56,9 +55,19 @@ var PopoverTrigger = React__default.forwardRef(function (_a, ref) {
                 childRef.current = node;
         }
     }
-    var triggerEvents = getTriggerEvents();
-    var childElement = children;
-    return React__default.cloneElement(childElement, __assign(__assign({ ref: setRef, "aria-expanded": context.isOpen, "aria-haspopup": true, "aria-controls": context.isOpen ? "popover-content" : undefined, className: cn(childElement.props.className, className, "popover-trigger"), "data-state": context.isOpen ? "open" : "closed", "data-trigger-type": context.triggerType }, triggerEvents), props));
+    const triggerEvents = getTriggerEvents();
+    const childElement = children;
+    return React__default.cloneElement(childElement, {
+        ref: setRef,
+        "aria-expanded": context.isOpen,
+        "aria-haspopup": true,
+        "aria-controls": context.isOpen ? "popover-content" : undefined,
+        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className, "popover-trigger"),
+        "data-state": context.isOpen ? "open" : "closed",
+        "data-trigger-type": context.triggerType,
+        ...triggerEvents,
+        ...props,
+    });
 });
 PopoverTrigger.displayName = "PopoverTrigger";
 

package/dist/components/core/Popover/index.d.ts

@@ -1,6 +1,5 @@
-import Popover from './Popover';
+import { Popover } from './Popover';
 import { PopoverContext, usePopoverContext } from './PopoverContext';
 import { PopoverRootProps as PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
 export { Popover, PopoverContext, usePopoverContext };
 export type { PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };
-export default Popover;

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.d.ts

@@ -1,4 +1,31 @@
-import React from 'react';
-import { ProgressiveBlurProps } from './ProgressiveBlur.types';
-declare const ProgressiveBlur: React.ForwardRefExoticComponent<ProgressiveBlurProps & React.RefAttributes<HTMLDivElement>>;
+import React, { CSSProperties, PropsWithChildren } from "react";
+export type ProgressiveBlurProps = PropsWithChildren<{
+    position?: "top" | "bottom" | "left" | "right";
+    strength?: number;
+    height?: string;
+    width?: string;
+    divCount?: number;
+    exponential?: boolean;
+    zIndex?: number;
+    animated?: boolean | "scroll";
+    duration?: string;
+    easing?: string;
+    opacity?: number;
+    curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
+    responsive?: boolean;
+    mobileHeight?: string;
+    tabletHeight?: string;
+    desktopHeight?: string;
+    mobileWidth?: string;
+    tabletWidth?: string;
+    desktopWidth?: string;
+    preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+    gpuOptimized?: boolean;
+    hoverIntensity?: number;
+    target?: "parent" | "page";
+    onAnimationComplete?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}>;
+declare const ProgressiveBlur: React.NamedExoticComponent<ProgressiveBlurProps>;
 export default ProgressiveBlur;

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.js

@@ -1,35 +1,219 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default from 'react';
-import { progressiveBlurTheme } from './ProgressiveBlur.theme.js';
-import { cn } from '../../../utils/cn.js';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import * as math from 'mathjs';
 
-var ProgressiveBlur = React__default.forwardRef(function (_a, ref) {
-    var position = _a.position, _b = _a.blurIntensity, blurIntensity = _b === void 0 ? 8 : _b, blurLevels = _a.blurLevels, _c = _a.size, size = _c === void 0 ? "40px" : _c, className = _a.className, theme = _a.theme, props = __rest(_a, ["position", "blurIntensity", "blurLevels", "size", "className", "theme"]);
-    // Normalize position to array
-    var positions = Array.isArray(position) ? position : [position];
-    // Generate blur levels array
-    var levels = blurLevels || [
-        blurIntensity * 0.25, // 2px
-        blurIntensity * 0.5, // 4px
-        blurIntensity * 0.75, // 6px
-        blurIntensity, // 8px
-    ];
-    return (React__default.createElement(React__default.Fragment, null, positions.map(function (pos) {
-        var _a;
-        var isVertical = pos === 'top' || pos === 'bottom';
-        var sizeStyle = isVertical ? { height: size } : { width: size };
-        return (React__default.createElement("div", __assign({ key: pos, ref: positions.length === 1 ? ref : undefined, className: cn(progressiveBlurTheme.baseStyle, progressiveBlurTheme.positions[pos], theme === null || theme === void 0 ? void 0 : theme.baseStyle, (_a = theme === null || theme === void 0 ? void 0 : theme.positions) === null || _a === void 0 ? void 0 : _a[pos], className), style: sizeStyle }, props), levels.map(function (blur, index) {
-            var opacity = 1 - (index * 0.15); // Progressive opacity
-            return (React__default.createElement("div", { key: index, className: "absolute inset-0", style: {
-                    backdropFilter: "blur(".concat(blur, "px)"),
-                    WebkitBackdropFilter: "blur(".concat(blur, "px)"),
-                    maskImage: progressiveBlurTheme.gradients[pos],
-                    WebkitMaskImage: progressiveBlurTheme.gradients[pos],
-                    opacity: opacity,
-                } }));
-        })));
-    })));
-});
-ProgressiveBlur.displayName = 'ProgressiveBlur';
+const DEFAULT_CONFIG = {
+    position: "bottom",
+    strength: 2,
+    height: "6rem",
+    divCount: 5,
+    exponential: false,
+    zIndex: 1000,
+    animated: false,
+    duration: "0.3s",
+    easing: "ease-out",
+    opacity: 1,
+    curve: "linear",
+    responsive: false,
+    target: "parent",
+    className: "",
+    style: {},
+};
+const PRESETS = {
+    top: { position: "top", height: "6rem" },
+    bottom: { position: "bottom", height: "6rem" },
+    left: { position: "left", height: "6rem" },
+    right: { position: "right", height: "6rem" },
+    subtle: { height: "4rem", strength: 1, opacity: 0.8, divCount: 3 },
+    intense: { height: "10rem", strength: 4, divCount: 8, exponential: true },
+    smooth: { height: "8rem", curve: "bezier", divCount: 10 },
+    sharp: { height: "5rem", curve: "linear", divCount: 4 },
+    header: { position: "top", height: "8rem", curve: "ease-out" },
+    footer: { position: "bottom", height: "8rem", curve: "ease-out" },
+    sidebar: { position: "left", height: "6rem", strength: 2.5 },
+    "page-header": {
+        position: "top",
+        height: "10rem",
+        target: "page",
+        strength: 3,
+    },
+    "page-footer": {
+        position: "bottom",
+        height: "10rem",
+        target: "page",
+        strength: 3,
+    },
+};
+const CURVE_FUNCTIONS = {
+    linear: (p) => p,
+    bezier: (p) => p * p * (3 - 2 * p),
+    "ease-in": (p) => p * p,
+    "ease-out": (p) => 1 - Math.pow(1 - p, 2),
+    "ease-in-out": (p) => (p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2),
+};
+const mergeConfigs = (...configs) => {
+    return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+const getGradientDirection = (position) => {
+    const directions = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return directions[position] || "to bottom";
+};
+const debounce = (fn, wait) => {
+    let t;
+    return (...a) => {
+        clearTimeout(t);
+        t = setTimeout(() => fn(...a), wait);
+    };
+};
+const useResponsiveDimension = (responsive, config, key) => {
+    const [val, setVal] = useState(config[key]);
+    useEffect(() => {
+        if (!responsive)
+            return;
+        const calc = () => {
+            const w = window.innerWidth;
+            let v = config[key];
+            const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+            const k = cap(key);
+            if (w <= 480 && config["mobile" + k])
+                v = config["mobile" + k];
+            else if (w <= 768 && config["tablet" + k])
+                v = config["tablet" + k];
+            else if (w <= 1024 && config["desktop" + k])
+                v = config["desktop" + k];
+            setVal(v);
+        };
+        const deb = debounce(calc, 100);
+        calc();
+        window.addEventListener("resize", deb);
+        return () => window.removeEventListener("resize", deb);
+    }, [responsive, config, key]);
+    return responsive ? val : config[key];
+};
+const useIntersectionObserver = (ref, shouldObserve = false) => {
+    const [isVisible, setIsVisible] = useState(!shouldObserve);
+    useEffect(() => {
+        if (!shouldObserve || !ref.current)
+            return;
+        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), { threshold: 0.1 });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [ref, shouldObserve]);
+    return isVisible;
+};
+const ProgressiveBlurBase = (props) => {
+    const containerRef = useRef(null);
+    const [isHovered, setIsHovered] = useState(false);
+    const config = useMemo(() => {
+        const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+        return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
+    }, [props]);
+    const responsiveHeight = useResponsiveDimension(config.responsive, config, "height");
+    const responsiveWidth = useResponsiveDimension(config.responsive, config, "width");
+    const isVisible = useIntersectionObserver(containerRef, config.animated === "scroll");
+    const blurDivs = useMemo(() => {
+        const divs = [];
+        const increment = 100 / config.divCount;
+        const currentStrength = isHovered && config.hoverIntensity
+            ? config.strength * config.hoverIntensity
+            : config.strength;
+        const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+        for (let i = 1; i <= config.divCount; i++) {
+            let progress = i / config.divCount;
+            progress = curveFunc(progress);
+            let blurValue;
+            if (config.exponential) {
+                blurValue =
+                    Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+            }
+            else {
+                blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+            }
+            const p1 = math.round((increment * i - increment) * 10) / 10;
+            const p2 = math.round(increment * i * 10) / 10;
+            const p3 = math.round((increment * i + increment) * 10) / 10;
+            const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+            let gradient = `transparent ${p1}%, black ${p2}%`;
+            if (p3 <= 100)
+                gradient += `, black ${p3}%`;
+            if (p4 <= 100)
+                gradient += `, transparent ${p4}%`;
+            const direction = getGradientDirection(config.position);
+            const divStyle = {
+                maskImage: `linear-gradient(${direction}, ${gradient})`,
+                WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+                backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+                opacity: config.opacity,
+                transition: config.animated && config.animated !== "scroll"
+                    ? `backdrop-filter ${config.duration} ${config.easing}`
+                    : undefined,
+            };
+            divs.push(React__default.createElement("div", { key: i, className: "absolute inset-0", style: divStyle }));
+        }
+        return divs;
+    }, [config, isHovered]);
+    const containerStyle = useMemo(() => {
+        const isVertical = ["top", "bottom"].includes(config.position);
+        const isHorizontal = ["left", "right"].includes(config.position);
+        const isPageTarget = config.target === "page";
+        const baseStyle = {
+            position: isPageTarget ? "fixed" : "absolute",
+            pointerEvents: config.hoverIntensity ? "auto" : "none",
+            opacity: isVisible ? 1 : 0,
+            transition: config.animated
+                ? `opacity ${config.duration} ${config.easing}`
+                : undefined,
+            zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+            ...config.style,
+        };
+        if (isVertical) {
+            baseStyle.height = responsiveHeight;
+            baseStyle.width = responsiveWidth || "100%";
+            baseStyle[config.position] = 0;
+            baseStyle.left = 0;
+            baseStyle.right = 0;
+        }
+        else if (isHorizontal) {
+            baseStyle.width = responsiveWidth || responsiveHeight;
+            baseStyle.height = "100%";
+            baseStyle[config.position] = 0;
+            baseStyle.top = 0;
+            baseStyle.bottom = 0;
+        }
+        return baseStyle;
+    }, [config, responsiveHeight, responsiveWidth, isVisible]);
+    const { hoverIntensity, animated, onAnimationComplete, duration } = config;
+    useEffect(() => {
+        if (isVisible && animated === "scroll" && onAnimationComplete) {
+            const t = setTimeout(() => onAnimationComplete(), parseFloat(duration) * 1000);
+            return () => clearTimeout(t);
+        }
+    }, [isVisible, animated, onAnimationComplete, duration]);
+    return (React__default.createElement("div", { ref: containerRef, className: `gradual-blur relative isolate ${config.target === "page" ? "gradual-blur-page" : "gradual-blur-parent"} ${config.className}`, style: containerStyle, onMouseEnter: hoverIntensity ? () => setIsHovered(true) : undefined, onMouseLeave: hoverIntensity ? () => setIsHovered(false) : undefined },
+        React__default.createElement("div", { className: "relative w-full h-full" }, blurDivs),
+        props.children && React__default.createElement("div", { className: "relative" }, props.children)));
+};
+const ProgressiveBlur = React__default.memo(ProgressiveBlurBase);
+ProgressiveBlur.displayName = "ProgressiveBlur";
+ProgressiveBlur.PRESETS = PRESETS;
+ProgressiveBlur.CURVE_FUNCTIONS = CURVE_FUNCTIONS;
+const injectStyles = () => {
+    if (typeof document === "undefined")
+        return;
+    const id = "gradual-blur-styles";
+    if (document.getElementById(id))
+        return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.textContent = `.gradual-blur{pointer-events:none;transition:opacity .3s ease-out}.gradual-blur-inner{pointer-events:none}`;
+    document.head.appendChild(el);
+};
+if (typeof document !== "undefined") {
+    injectStyles();
+}
 
 export { ProgressiveBlur as default };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.theme.d.ts

@@ -6,10 +6,4 @@ export declare const progressiveBlurTheme: {
         readonly left: "left-0 top-0 bottom-0";
         readonly right: "right-0 top-0 bottom-0";
     };
-    readonly gradients: {
-        readonly top: "linear-gradient(to bottom, black, transparent)";
-        readonly bottom: "linear-gradient(to top, black, transparent)";
-        readonly left: "linear-gradient(to right, black, transparent)";
-        readonly right: "linear-gradient(to left, black, transparent)";
-    };
 };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.types.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export type ProgressiveBlurPosition = 'top' | 'bottom' | 'left' | 'right';
+import React from "react";
+export type ProgressiveBlurPosition = "top" | "bottom" | "left" | "right";
 export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Position(s) where the blur effect should be applied
@@ -16,6 +16,12 @@ export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElemen
      * If provided, overrides blurIntensity
      */
     blurLevels?: number[];
+    /**
+     * Number of blur layers to generate for the gradient effect
+     * Higher numbers result in smoother gradients but may impact performance
+     * @default 8
+     */
+    layers?: number;
     /**
      * Size of the blur region (height for top/bottom, width for left/right)
      * @default "40px"

package/dist/components/core/ProgressiveBlur/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ProgressiveBlur } from './ProgressiveBlur';
-export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from './ProgressiveBlur.types';
+export { default as ProgressiveBlur } from "./ProgressiveBlur";
+export type { ProgressiveBlurProps } from "./ProgressiveBlur";