@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,64 +0,0 @@
-import { ReactNode } from "react";
-export type FeedItemVariant = "default" | "icon" | "avatar" | "comment-input";
-export interface FeedAvatarConfig {
-    src?: string;
-    alt: string;
-}
-export interface FeedTheme {
-    baseStyle: string;
-    listStyle: string;
-    itemInnerStyle: string;
-    itemContentStyle: string;
-    connectorStyle: string;
-    dotIndicatorStyle: string;
-    iconIndicatorStyle: string;
-    avatarIndicatorStyle: string;
-    contentStyle: string;
-    titleStyle: string;
-    actionTextStyle: string;
-    timestampStyle: string;
-    commentInputWrapperStyle: string;
-    commentInputFooterStyle: string;
-}
-export interface FeedThemeOverrides {
-    baseStyle?: string;
-    listStyle?: string;
-    itemInnerStyle?: string;
-    itemContentStyle?: string;
-    connectorStyle?: string;
-    dotIndicatorStyle?: string;
-    iconIndicatorStyle?: string;
-    avatarIndicatorStyle?: string;
-    contentStyle?: string;
-    titleStyle?: string;
-    actionTextStyle?: string;
-    timestampStyle?: string;
-    commentInputWrapperStyle?: string;
-    commentInputFooterStyle?: string;
-}
-export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
-    theme?: FeedThemeOverrides;
-    className?: string;
-}
-export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit"> {
-    /** Visual variant of the feed item */
-    variant?: FeedItemVariant;
-    /** Name/label of the entity that performed the action */
-    title?: string;
-    /** Timestamp label (e.g. "6d ago") */
-    timestamp?: string;
-    /** Icon element for the "icon" variant indicator */
-    icon?: ReactNode;
-    /** Avatar configuration for avatar/comment-input variants */
-    avatar?: FeedAvatarConfig;
-    /** Body content (action description, comment text, etc.) */
-    children?: ReactNode;
-    /** Placeholder text for the comment-input textarea */
-    placeholder?: string;
-    /** Label for the comment-input submit button */
-    submitLabel?: string;
-    /** Callback when the comment-input form is submitted */
-    onSubmit?: (text: string) => void;
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export { Feed } from "./Feed";
-export type { FeedProps, FeedItemProps, FeedItemVariant, FeedAvatarConfig, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { LoaderProps } from './Loader.types';
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
-export { Loader };

package/dist/components/core/Loader/Loader.js

@@ -1,57 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
-import { loaderTheme } from './Loader.theme.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-const Loader = React__default.forwardRef(({ variant = 'circular', size = 'md', color = 'primary', value, max = 100, showLabel = false, label, className, theme: customTheme, ...props }, ref) => {
-    var _a, _b;
-    // Merge custom theme with default theme
-    const theme = useMemo(() => customTheme ? { ...loaderTheme, ...customTheme } : loaderTheme, [customTheme]);
-    // Calculate percentage for linear variant
-    const percentage = useMemo(() => {
-        if (value === undefined || value === null)
-            return 0;
-        const pct = Math.min(Math.max((value / max) * 100, 0), 100);
-        return Math.round(pct);
-    }, [value, max]);
-    // Determine if this is indeterminate mode (no value provided)
-    const isIndeterminate = value === undefined || value === null;
-    // Get theme values for current size and color
-    const sizeStyles = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || theme.sizes['md'];
-    const colorStyles = ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b[color]) || theme.colors['primary'];
-    // Render circular variant (spinner)
-    if (variant === 'circular') {
-        return (jsx("div", { ref: ref, className: cn(theme.baseStyle, className), role: "status", "aria-label": "loading", ...props, children: jsx("div", { className: cn(theme.circularStyle, theme.animation, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.circular, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.circular) }) }));
-    }
-    // Render linear variant (progress bar)
-    return (jsxs("div", { ref: ref, className: cn(theme.linearContainerStyle, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, "aria-label": isIndeterminate ? "loading" : `${percentage}% complete`, ...props, children: [jsx("div", { className: cn(theme.linearTrackStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.linear), children: isIndeterminate ? (
-                // Indeterminate loading animation
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear, "w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"), style: {
-                        backgroundImage: `linear-gradient(90deg, transparent, currentColor, transparent)`,
-                    } })) : (
-                // Determinate progress bar
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear), style: { width: `${percentage}%` } })) }), showLabel && !isIndeterminate && (jsx("span", { className: theme.linearLabelStyle, children: label || `${percentage}%` }))] }));
-});
-Loader.displayName = 'Loader';
-
-export { Loader };

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

@@ -1,27 +0,0 @@
-import { LoaderSize, LoaderColor } from "./Loader.types";
-/**
- * Internal theme structure for the Loader component
- */
-interface LoaderTheme {
-    baseStyle: string;
-    circularStyle: string;
-    linearContainerStyle: string;
-    linearTrackStyle: string;
-    linearBarStyle: string;
-    linearLabelStyle: string;
-    sizes: Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>;
-    colors: Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>;
-    animation: string;
-}
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-export declare const loaderTheme: LoaderTheme;
-export {};

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

@@ -1,60 +0,0 @@
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-const loaderTheme = {
-    // Base styles for the loader container
-    baseStyle: "inline-flex items-center justify-center",
-    // Circular variant (spinner) styles
-    circularStyle: "rounded-full",
-    // Linear variant container
-    linearContainerStyle: "w-full flex items-center gap-3",
-    // Linear track (background)
-    linearTrackStyle: "flex-1 h-2 rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Linear bar (foreground)
-    linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
-    // Label text for linear variant
-    linearLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
-    // Size variants for both circular and linear
-    sizes: {
-        sm: {
-            circular: "size-4 border-2",
-            linear: "h-1.5",
-        },
-        md: {
-            circular: "size-5 border-[3px]",
-            linear: "h-2",
-        },
-        lg: {
-            circular: "size-6 border-[3px]",
-            linear: "h-3",
-        },
-    },
-    // Color variants using correct CSS variables
-    colors: {
-        primary: {
-            circular: "border-[var(--color-primary)] border-t-transparent",
-            linear: "bg-[var(--color-primary)]",
-        },
-        success: {
-            circular: "border-[var(--color-success)] border-t-transparent",
-            linear: "bg-[var(--color-success)]",
-        },
-        warning: {
-            circular: "border-[var(--color-warning)] border-t-transparent",
-            linear: "bg-[var(--color-warning)]",
-        },
-        danger: {
-            circular: "border-[var(--color-danger)] border-t-transparent",
-            linear: "bg-[var(--color-danger)]",
-        },
-        muted: {
-            circular: "border-[var(--color-text-muted)] border-t-transparent",
-            linear: "bg-[var(--color-text-muted)]",
-        },
-    },
-    // Animation class for circular spinner
-    animation: "animate-[spin_1s_linear_infinite]",
-};
-
-export { loaderTheme };

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

@@ -1,71 +0,0 @@
-/**
- * Loader component props
- * Supports both circular (spinner) and linear (progress bar) variants
- */
-export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The variant of the loader
-     * @default "circular"
-     */
-    variant?: LoaderVariant;
-    /**
-     * The size of the loader
-     * @default "md"
-     */
-    size?: LoaderSize;
-    /**
-     * The color of the loader
-     * @default "primary"
-     */
-    color?: LoaderColor;
-    /**
-     * Current progress value (0-100)
-     * Only applies to linear variant
-     * If not provided, shows indeterminate loading animation
-     */
-    value?: number;
-    /**
-     * Maximum value for progress
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Show percentage label
-     * Only applies to linear variant with value prop
-     * @default false
-     */
-    showLabel?: boolean;
-    /**
-     * Custom label text (overrides percentage)
-     * Only applies to linear variant
-     */
-    label?: string;
-    /**
-     * Custom CSS class to apply to the loader
-     */
-    className?: string;
-    /**
-     * Theme overrides for the loader
-     */
-    theme?: LoaderThemeOverrides;
-}
-export type LoaderVariant = "circular" | "linear";
-export type LoaderSize = "sm" | "md" | "lg";
-export type LoaderColor = "primary" | "success" | "warning" | "danger" | "muted";
-export interface LoaderThemeOverrides {
-    baseStyle?: string;
-    circularStyle?: string;
-    linearContainerStyle?: string;
-    linearTrackStyle?: string;
-    linearBarStyle?: string;
-    linearLabelStyle?: string;
-    sizes?: Partial<Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>>;
-    colors?: Partial<Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>>;
-    animation?: string;
-}

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

@@ -1,2 +0,0 @@
-export { Loader } from './Loader';
-export type { LoaderProps, LoaderVariant, LoaderSize, LoaderColor } from './Loader.types';

package/dist/components/core/Message/MessageContent.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The message content
-     */
-    children: React.ReactNode;
-}
-export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Metric/Metric.js

@@ -1,23 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { metricTheme } from './Metric.theme.js';
-import { Badge } from '../Badge/Badge.js';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/outline';
-
-const Metric = React__default.forwardRef(({ value, label, description, trendValue, trendDirection = "up", trendChart, size = "md", variant = "filled", color = "primary", icon, className, ...props }, ref) => {
-    var _a;
-    const trendIcon = trendDirection === "up" ? (jsx(ArrowTrendingUpIcon, { className: "size-3.5", strokeWidth: 2.5 })) : (jsx(ArrowTrendingDownIcon, { className: "size-3.5", strokeWidth: 2.5 }));
-    const sizeStyles = metricTheme.sizes[size];
-    const variantStyles = metricTheme.variants[variant];
-    const variantColorStyles = metricTheme.variantColors[variant] || "";
-    const iconStyles = ((_a = metricTheme.iconContainerVariantColors[variant]) === null || _a === void 0 ? void 0 : _a[color]) || "";
-    return (jsx("div", { ref: ref, className: cn(metricTheme.baseStyle, variantStyles, variantColorStyles, sizeStyles.container, className), "data-size": size, ...props, children: jsxs("div", { className: "flex flex-col gap-3 ", children: [jsxs("div", { className: cn("flex items-start gap-3", sizeStyles.contentPadding), children: [icon && (jsx("div", { className: cn(metricTheme.iconContainerStyle, iconStyles, sizeStyles.iconContainer), children: icon })), jsxs("div", { className: "flex flex-col flex-1", children: [jsx("div", { className: cn(metricTheme.labelStyle, sizeStyles.label), children: label }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: cn(metricTheme.valueStyle, sizeStyles.value), children: value }), trendValue && (jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: cn("rounded-full p-1 flex flex-shrink-0 w-fit h-fit", trendDirection === "up"
-                                                        ? "bg-[var(--color-success-100)] text-[var(--color-success)] dark:bg-[var(--color-success-100)]/20"
-                                                        : "bg-[var(--color-danger-100)] text-[var(--color-danger)] dark:bg-[var(--color-danger-100)]/20"), children: trendIcon }), jsx(Badge, { color: trendDirection === "up" ? "success" : "danger", variant: "ghost", className: cn("bg-transparent p-0 font-semibold gap-1 ring-0", trendDirection === "up"
-                                                        ? "text-[var(--color-success)]"
-                                                        : "text-[var(--color-danger)]"), children: trendValue })] }))] }), description && (jsx("div", { className: cn(metricTheme.descriptionStyle, sizeStyles.description), children: description }))] })] }), trendChart && (jsx("div", { className: "w-full h-12 flex-shrink-0 -mt-4", children: trendChart }))] }) }));
-});
-Metric.displayName = "Metric";
-
-export { Metric };

package/dist/components/core/Modal/ModalDescription.d.ts

@@ -1,5 +0,0 @@
-import { ModalDescriptionProps } from "./Modal.types";
-export declare const ModalDescription: {
-    ({ children, className, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/components/core/Modal/ModalDescription.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
-
-const ModalDescription = ({ children, className, ...props }) => {
-    const { theme, descriptionId } = useModalContext();
-    return (jsx("p", { id: descriptionId, className: cn(theme.description, className), ...props, children: children }));
-};
-ModalDescription.displayName = "Modal.Description";
-
-export { ModalDescription };

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

@@ -1,7 +0,0 @@
-import React from "react";
-import { PopoverContentProps } from "./Popover.types";
-/**
- * PopoverContent component displays the content of the popover
- */
-declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
-export { PopoverContent };

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

@@ -1,34 +0,0 @@
-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;
-}>;
-export declare const ProgressiveBlur: React.NamedExoticComponent<ProgressiveBlurProps> & {
-    displayName: string;
-    PRESETS: Record<string, Partial<ProgressiveBlurProps>>;
-    CURVE_FUNCTIONS: Record<string, (p: number) => number>;
-};

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

@@ -1,218 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
-
-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 =
-                    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(jsx("div", { className: "absolute inset-0", style: divStyle }, i));
-        }
-        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 (jsxs("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, children: [jsx("div", { className: "relative w-full h-full", children: blurDivs }), props.children && jsx("div", { className: "relative", children: props.children })] }));
-};
-const ProgressiveBlur = Object.assign(React__default.memo(ProgressiveBlurBase), {
-    displayName: "ProgressiveBlur",
-    PRESETS,
-    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 };

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

@@ -1,9 +0,0 @@
-export declare const progressiveBlurTheme: {
-    readonly baseStyle: "absolute pointer-events-none z-10";
-    readonly positions: {
-        readonly top: "top-0 left-0 right-0";
-        readonly bottom: "bottom-0 left-0 right-0";
-        readonly left: "left-0 top-0 bottom-0";
-        readonly right: "right-0 top-0 bottom-0";
-    };
-};