flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/core/Pill/Pill.js

@@ -0,0 +1,150 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { CheckIcon } from '@heroicons/react/16/solid';
+import { pillTheme } from './Pill.theme.js';
+import { pillTapVariant } from './Pill.animations.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Pill component - Simplified selectable chip for filters and tags
+ *
+ * A focused alternative to Badge without icons, avatars, or dismissible functionality.
+ * Perfect for filter chips, tag selection, and simple category pills.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill
+ *   variant="primary"
+ *   selected={selected}
+ *   onSelect={setSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   variant="primary"
+ *   selected={filters.includes('design')}
+ *   onSelect={(selected) => {
+ *     setFilters(selected
+ *       ? [...filters, 'design']
+ *       : filters.filter(f => f !== 'design')
+ *     );
+ *   }}
+ * >
+ *   Design
+ * </Pill>
+ * ```
+ */
+var Pill = React__default.forwardRef(function (_a, ref) {
+    // ========== State Management ==========
+    var _b, _c, _d, _e;
+    var children = _a.children, _f = _a.variant, variant = _f === void 0 ? 'filled' : _f, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, iconStart = _a.iconStart, _j = _a.selected, selected = _j === void 0 ? false : _j, onSelect = _a.onSelect, _k = _a.readOnly, readOnly = _k === void 0 ? false : _k, className = _a.className, _l = _a.theme, theme = _l === void 0 ? {} : _l, onClick = _a.onClick, props = __rest(_a, ["children", "variant", "color", "size", "iconStart", "selected", "onSelect", "readOnly", "className", "theme", "onClick"]);
+    // Internal selected state (synced with controlled prop)
+    var _m = useState(selected), isSelected = _m[0], setIsSelected = _m[1];
+    // Sync internal state with controlled prop
+    useEffect(function () {
+        setIsSelected(selected);
+    }, [selected]);
+    // Check for reduced motion preference
+    var shouldReduceMotion = useReducedMotion();
+    // ========== Derived State ==========
+    var isSelectable = Boolean(onSelect);
+    var isClickable = Boolean(onClick);
+    var isInteractive = (isSelectable || isClickable) && !readOnly;
+    // ========== Development Warnings ==========
+    useEffect(function () {
+        if (process.env.NODE_ENV !== 'production') {
+            if (selected !== undefined && !onSelect) {
+                // eslint-disable-next-line no-console
+                console.warn('[Pill] Component has "selected" prop but missing "onSelect" handler. The pill will not be interactive.');
+            }
+        }
+    }, [selected, onSelect]);
+    // ========== Event Handlers ==========
+    /**
+     * Handle pill click - toggles selection if selectable
+     */
+    var handleClick = useCallback(function (e) {
+        // Don't do anything if read-only
+        if (readOnly) {
+            e.preventDefault();
+            return;
+        }
+        // Toggle selection if selectable
+        if (onSelect) {
+            var newSelected = !isSelected;
+            setIsSelected(newSelected);
+            onSelect(newSelected);
+        }
+        // Call user's onClick handler if provided
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [readOnly, onSelect, isSelected, onClick]);
+    /**
+     * Handle keyboard interactions (Enter/Space to toggle)
+     */
+    var handleKeyDown = useCallback(function (e) {
+        if (readOnly || !isSelectable)
+            return;
+        // Toggle on Enter or Space
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            var newSelected = !isSelected;
+            setIsSelected(newSelected);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
+        }
+    }, [readOnly, isSelectable, isSelected, onSelect]);
+    // ========== Theme Merging ==========
+    var mergedTheme = {
+        baseStyle: theme.baseStyle || pillTheme.baseStyle,
+        variantStyle: ((_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || pillTheme.variants[variant],
+        colorStyle: ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c[color]) || pillTheme.colors[color],
+        sizeStyle: ((_d = theme.sizes) === null || _d === void 0 ? void 0 : _d[size]) || pillTheme.sizes[size],
+        iconSizeStyle: ((_e = theme.iconSizes) === null || _e === void 0 ? void 0 : _e[size]) || pillTheme.iconSizes[size],
+    };
+    // ========== Icon Rendering ==========
+    /**
+     * Renders the start icon or check icon based on selection state
+     * - When selected: Shows CheckIcon (replaces iconStart)
+     * - When not selected: Shows iconStart if provided
+     * - Otherwise: null
+     */
+    var renderStartIcon = useCallback(function () {
+        // Selected state: show check icon
+        if (isSelected && isSelectable) {
+            return (React__default.createElement(CheckIcon, { className: cn('flex-shrink-0 -ml-0.5', mergedTheme.iconSizeStyle), "aria-hidden": "true" }));
+        }
+        // Unselected state: show iconStart if provided
+        if (iconStart) {
+            return (React__default.createElement("span", { className: cn('flex-shrink-0', mergedTheme.iconSizeStyle), "aria-hidden": "true" }, iconStart));
+        }
+        return null;
+    }, [isSelected, isSelectable, iconStart, mergedTheme.iconSizeStyle]);
+    // ========== Render ==========
+    return (React__default.createElement(motion.span, __assign({ ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.variantStyle, mergedTheme.colorStyle, mergedTheme.sizeStyle, 
+        // Conditional cursor styling - only show pointer for interactive pills
+        isInteractive ? 'cursor-pointer' : 'cursor-default', className // User overrides (highest priority)
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-variant": variant, "data-color": color, "data-size": size, "data-selected": isSelected ? 'true' : 'false', "data-readonly": !isInteractive ? 'true' : 'false', "data-selectable": isSelectable ? 'true' : 'false', 
+        // Accessibility attributes
+        role: isSelectable && !readOnly ? 'button' : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
+        // Animation
+        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : undefined }, props),
+        renderStartIcon(),
+        children));
+});
+Pill.displayName = 'Pill';
+
+export { Pill };

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

@@ -1,4 +1,4 @@
-import { PillTheme } from './Pill.types';
+import { PillTheme } from "./Pill.types";
 /**
  * Default theme for Pill component
  *

package/dist/components/core/Pill/Pill.theme.js

@@ -0,0 +1,65 @@
+/**
+ * Default theme for Pill component
+ *
+ * Separates visual variants from semantic colors following new convention.
+ * All styles can be overridden via className prop (shadcn approach).
+ */
+var pillTheme = {
+    /**
+     * Base pill container style
+     * - Always rounded-full (pill shape)
+     * - Flexbox for centering content
+     * - Smooth transitions for interactions
+     * - Non-selectable text
+     * - Cursor styling is conditionally applied in component based on interactivity
+     */
+    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap  transition-all duration-300 focus:outline-none focus-visible:ring focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    /**
+     * Visual style variants (appearance treatment)
+     */
+    variants: {
+        filled: "ring-1",
+        outline: "bg-transparent ring-2",
+        soft: "ring-1 ring-transparent",
+    },
+    /**
+     * Semantic colors with selection states
+     * Uses data-attributes for state styling:
+     * - data-[selected=true]: Lighter fill background with check icon
+     * - data-[readonly=false]:hover: Hover state (only applies when not read-only)
+     */
+    colors: {
+        neutral: "bg-[var(--color-background)] text-[var(--color-text-primary)] ring-[var(--color-border)] data-[readonly=false]:hover:bg-neutral-100 data-[selected=true]:bg-neutral-100 data-[selected=true]:ring-[var(--color-border)]",
+        primary: "bg-[var(--color-primary-50)] text-[var(--color-primary)] ring-[var(--color-primary)]/30 data-[readonly=false]:hover:bg-[var(--color-primary-100)] data-[selected=true]:bg-[var(--color-primary-300)] data-[selected=true]:ring-[var(--color-primary)]/30",
+        success: "bg-[var(--color-success-50)] text-[var(--color-success-700)] ring-[var(--color-success)]/20 data-[readonly=false]:hover:bg-[var(--color-success-100)] data-[selected=true]:bg-[var(--color-success-200)] data-[selected=true]:ring-[var(--color-success)]/30",
+        warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] ring-[var(--color-warning)]/20 data-[readonly=false]:hover:bg-[var(--color-warning-100)] data-[selected=true]:bg-[var(--color-warning-200)] data-[selected=true]:ring-[var(--color-warning)]/30",
+        danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] ring-[var(--color-danger)]/20 data-[readonly=false]:hover:bg-[var(--color-danger-100)] data-[selected=true]:bg-[var(--color-danger-200)] data-[selected=true]:ring-[var(--color-danger)]/30",
+    },
+    /**
+     * Size variants
+     * Defines padding, text size, and spacing for different pill sizes
+     * Matches Badge pill variant sizing for consistency
+     */
+    sizes: {
+        /** Small pill - matches Badge sm with pill=true */
+        sm: "text-xs px-2 py-0.5 gap-0.5",
+        /** Medium pill (default) - matches Badge md with pill=true */
+        md: "text-sm px-2.5 py-0.5 gap-1",
+        /** Large pill - matches Badge lg with pill=true */
+        lg: "text-sm px-3 py-1 gap-1.5",
+    },
+    /**
+     * Icon sizes for iconStart and CheckIcon
+     * Matches Badge icon sizing pattern
+     */
+    iconSizes: {
+        /** Small icon size */
+        sm: "size-3",
+        /** Medium icon size (default) */
+        md: "size-3.5",
+        /** Large icon size */
+        lg: "size-4",
+    },
+};
+
+export { pillTheme };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 /**
  * Pill component props
  *
@@ -21,7 +21,7 @@ import React from 'react';
  * </Pill>
  * ```
  */
-export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange' | 'onSelect' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
+export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange" | "onSelect" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> {
     /** Content to display inside the pill */
     children: React.ReactNode;
     /** Visual style variant (filled, outline, soft) */
@@ -56,15 +56,15 @@ export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, '
 /**
  * Pill visual variants (appearance)
  */
-export type PillVariant = 'filled' | 'outline' | 'soft';
+export type PillVariant = "filled" | "outline" | "soft";
 /**
  * Pill semantic colors (intent)
  */
-export type PillColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type PillColor = "neutral" | "primary" | "success" | "warning" | "danger";
 /**
  * Pill size variants
  */
-export type PillSize = 'sm' | 'md' | 'lg';
+export type PillSize = "sm" | "md" | "lg";
 /**
  * Theme overrides for Pill component
  *

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { PopoverContext } from './PopoverContext.js';

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

@@ -1,14 +1,12 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 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 { useSelectPortal } from '../../../hooks/useSelectPortal.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';
 
 /**
  * PopoverContent component displays the content of the popover

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';

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>>;
-export { ProgressiveBlur };
+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,225 @@
-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 { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.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';
+var 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: {},
+};
+var 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,
+    },
+};
+var CURVE_FUNCTIONS = {
+    linear: function (p) { return p; },
+    bezier: function (p) { return p * p * (3 - 2 * p); },
+    "ease-in": function (p) { return p * p; },
+    "ease-out": function (p) { return 1 - Math.pow(1 - p, 2); },
+    "ease-in-out": function (p) { return (p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2); },
+};
+var mergeConfigs = function () {
+    var configs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        configs[_i] = arguments[_i];
+    }
+    return configs.reduce(function (acc, config) { return (__assign(__assign({}, acc), config)); }, {});
+};
+var getGradientDirection = function (position) {
+    var directions = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return directions[position] || "to bottom";
+};
+var debounce = function (fn, wait) {
+    var t;
+    return function () {
+        var a = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            a[_i] = arguments[_i];
+        }
+        clearTimeout(t);
+        t = setTimeout(function () { return fn.apply(void 0, a); }, wait);
+    };
+};
+var useResponsiveDimension = function (responsive, config, key) {
+    var _a = useState(config[key]), val = _a[0], setVal = _a[1];
+    useEffect(function () {
+        if (!responsive)
+            return;
+        var calc = function () {
+            var w = window.innerWidth;
+            var v = config[key];
+            var cap = function (s) { return s.charAt(0).toUpperCase() + s.slice(1); };
+            var 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);
+        };
+        var deb = debounce(calc, 100);
+        calc();
+        window.addEventListener("resize", deb);
+        return function () { return window.removeEventListener("resize", deb); };
+    }, [responsive, config, key]);
+    return responsive ? val : config[key];
+};
+var useIntersectionObserver = function (ref, shouldObserve) {
+    if (shouldObserve === void 0) { shouldObserve = false; }
+    var _a = useState(!shouldObserve), isVisible = _a[0], setIsVisible = _a[1];
+    useEffect(function () {
+        if (!shouldObserve || !ref.current)
+            return;
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            return setIsVisible(entry.isIntersecting);
+        }, { threshold: 0.1 });
+        observer.observe(ref.current);
+        return function () { return observer.disconnect(); };
+    }, [ref, shouldObserve]);
+    return isVisible;
+};
+var ProgressiveBlurBase = function (props) {
+    var containerRef = useRef(null);
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var config = useMemo(function () {
+        var presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+        return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
+    }, [props]);
+    var responsiveHeight = useResponsiveDimension(config.responsive, config, "height");
+    var responsiveWidth = useResponsiveDimension(config.responsive, config, "width");
+    var isVisible = useIntersectionObserver(containerRef, config.animated === "scroll");
+    var blurDivs = useMemo(function () {
+        var divs = [];
+        var increment = 100 / config.divCount;
+        var currentStrength = isHovered && config.hoverIntensity
+            ? config.strength * config.hoverIntensity
+            : config.strength;
+        var curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+        for (var i = 1; i <= config.divCount; i++) {
+            var progress = i / config.divCount;
+            progress = curveFunc(progress);
+            var blurValue = void 0;
+            if (config.exponential) {
+                blurValue =
+                    Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+            }
+            else {
+                blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+            }
+            var p1 = math.round((increment * i - increment) * 10) / 10;
+            var p2 = math.round(increment * i * 10) / 10;
+            var p3 = math.round((increment * i + increment) * 10) / 10;
+            var p4 = math.round((increment * i + increment * 2) * 10) / 10;
+            var gradient = "transparent ".concat(p1, "%, black ").concat(p2, "%");
+            if (p3 <= 100)
+                gradient += ", black ".concat(p3, "%");
+            if (p4 <= 100)
+                gradient += ", transparent ".concat(p4, "%");
+            var direction = getGradientDirection(config.position);
+            var divStyle = {
+                maskImage: "linear-gradient(".concat(direction, ", ").concat(gradient, ")"),
+                WebkitMaskImage: "linear-gradient(".concat(direction, ", ").concat(gradient, ")"),
+                backdropFilter: "blur(".concat(blurValue.toFixed(3), "rem)"),
+                opacity: config.opacity,
+                transition: config.animated && config.animated !== "scroll"
+                    ? "backdrop-filter ".concat(config.duration, " ").concat(config.easing)
+                    : undefined,
+            };
+            divs.push(React__default.createElement("div", { key: i, className: "absolute inset-0", style: divStyle }));
+        }
+        return divs;
+    }, [config, isHovered]);
+    var containerStyle = useMemo(function () {
+        var isVertical = ["top", "bottom"].includes(config.position);
+        var isHorizontal = ["left", "right"].includes(config.position);
+        var isPageTarget = config.target === "page";
+        var baseStyle = __assign({ position: isPageTarget ? "fixed" : "absolute", pointerEvents: config.hoverIntensity ? "auto" : "none", opacity: isVisible ? 1 : 0, transition: config.animated
+                ? "opacity ".concat(config.duration, " ").concat(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]);
+    var _b = config, hoverIntensity = _b.hoverIntensity, animated = _b.animated, onAnimationComplete = _b.onAnimationComplete, duration = _b.duration;
+    useEffect(function () {
+        if (isVisible && animated === "scroll" && onAnimationComplete) {
+            var t_1 = setTimeout(function () { return onAnimationComplete(); }, parseFloat(duration) * 1000);
+            return function () { return clearTimeout(t_1); };
+        }
+    }, [isVisible, animated, onAnimationComplete, duration]);
+    return (React__default.createElement("div", { ref: containerRef, className: "gradual-blur relative isolate ".concat(config.target === "page" ? "gradual-blur-page" : "gradual-blur-parent", " ").concat(config.className), style: containerStyle, onMouseEnter: hoverIntensity ? function () { return setIsHovered(true); } : undefined, onMouseLeave: hoverIntensity ? function () { return setIsHovered(false); } : undefined },
+        React__default.createElement("div", { className: "relative w-full h-full" }, blurDivs),
+        props.children && React__default.createElement("div", { className: "relative" }, props.children)));
+};
+var ProgressiveBlur = React__default.memo(ProgressiveBlurBase);
+ProgressiveBlur.displayName = "ProgressiveBlur";
+ProgressiveBlur.PRESETS = PRESETS;
+ProgressiveBlur.CURVE_FUNCTIONS = CURVE_FUNCTIONS;
+var injectStyles = function () {
+    if (typeof document === "undefined")
+        return;
+    var id = "gradual-blur-styles";
+    if (document.getElementById(id))
+        return;
+    var 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 };
+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 { ProgressiveBlur } from './ProgressiveBlur';
-export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from './ProgressiveBlur.types';
+export { default as ProgressiveBlur } from "./ProgressiveBlur";
+export type { ProgressiveBlurProps } from "./ProgressiveBlur";