@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { MorphingTextProps } from './MorphingText.types';
-/**
- * MorphingText smoothly morphs between different text strings using a blur/fade
- * transition. Two overlapping text layers cross-fade with a Gaussian blur effect
- * to create a seamless morphing appearance.
- *
- * @example
- * ```tsx
- * <MorphingText
- *   texts={["Innovative", "Powerful", "Beautiful"]}
- *   interval={3000}
- *   transitionDuration={800}
- * />
- * ```
- */
-export declare const MorphingText: React.ForwardRefExoticComponent<MorphingTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/MorphingText/MorphingText.js

@@ -1,125 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
-import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-/**
- * MorphingText smoothly morphs between different text strings using a blur/fade
- * transition. Two overlapping text layers cross-fade with a Gaussian blur effect
- * to create a seamless morphing appearance.
- *
- * @example
- * ```tsx
- * <MorphingText
- *   texts={["Innovative", "Powerful", "Beautiful"]}
- *   interval={3000}
- *   transitionDuration={800}
- * />
- * ```
- */
-const MorphingText = React__default.forwardRef(({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }, ref) => {
-    const shouldReduceMotion = useReducedMotion();
-    const isControlled = controlledIndex !== undefined;
-    const [internalIndex, setInternalIndex] = useState(0);
-    const activeIndex = isControlled ? controlledIndex : internalIndex;
-    const measureRefs = useRef([]);
-    const [textRects, setTextRects] = useState([]);
-    const [isPaused, setIsPaused] = useState(false);
-    const intervalRef = useRef(null);
-    const hasReachedEnd = useRef(false);
-    // Clamp activeIndex to valid range
-    const safeIndex = texts.length > 0 ? ((activeIndex % texts.length) + texts.length) % texts.length : 0;
-    const advanceIndex = useCallback(() => {
-        if (isControlled)
-            return;
-        setInternalIndex((prev) => {
-            const nextIndex = prev + 1;
-            if (!loop && nextIndex >= texts.length) {
-                hasReachedEnd.current = true;
-                return prev;
-            }
-            const resolvedNext = nextIndex % texts.length;
-            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(resolvedNext, texts[resolvedNext]);
-            return resolvedNext;
-        });
-    }, [isControlled, loop, texts, onTextChange]);
-    // Auto-cycling interval
-    useEffect(() => {
-        if (isControlled || isPaused || hasReachedEnd.current) {
-            return;
-        }
-        intervalRef.current = setInterval(advanceIndex, interval);
-        return () => {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
-                intervalRef.current = null;
-            }
-        };
-    }, [isControlled, isPaused, interval, advanceIndex]);
-    // Reset hasReachedEnd when loop changes or texts change
-    useEffect(() => {
-        hasReachedEnd.current = false;
-    }, [loop, texts]);
-    useIsomorphicLayoutEffect(() => {
-        const measure = () => {
-            setTextRects(texts.map((_, index) => {
-                var _a, _b, _c;
-                const rect = (_a = measureRefs.current[index]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                return {
-                    width: (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0,
-                    height: (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0,
-                };
-            }));
-        };
-        measure();
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(measure);
-        measureRefs.current.forEach((element) => {
-            if (element)
-                observer.observe(element);
-        });
-        return () => observer.disconnect();
-    }, [texts]);
-    // Fire onTextChange for controlled index changes
-    useEffect(() => {
-        if (isControlled) {
-            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(safeIndex, texts[safeIndex]);
-        }
-    }, [isControlled, safeIndex, texts, onTextChange]);
-    const handleMouseEnter = () => {
-        if (pauseOnHover)
-            setIsPaused(true);
-    };
-    const handleMouseLeave = () => {
-        if (pauseOnHover)
-            setIsPaused(false);
-    };
-    if (texts.length === 0) {
-        return null;
-    }
-    const durationSeconds = transitionDuration / 1000;
-    const currentText = texts[safeIndex];
-    const currentRect = textRects[safeIndex];
-    const measuredSize = (currentRect === null || currentRect === void 0 ? void 0 : currentRect.width) && (currentRect === null || currentRect === void 0 ? void 0 : currentRect.height)
-        ? { width: currentRect.width, height: currentRect.height }
-        : undefined;
-    // Reduced motion: instant swap with no animation
-    if (shouldReduceMotion) {
-        return (jsx("div", { ref: ref, className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsx("span", { children: currentText }) }));
-    }
-    return (jsx("div", { ref: ref, className: cn('relative inline-block align-bottom', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsxs(motion.span, { className: "relative inline-block align-bottom", initial: false, animate: measuredSize, transition: {
-                duration: durationSeconds,
-                ease: 'easeInOut',
-            }, children: [jsx("span", { className: "pointer-events-none invisible absolute left-0 top-0 whitespace-nowrap", "aria-hidden": "true", children: texts.map((text, index) => (jsx("span", { ref: (element) => {
-                            measureRefs.current[index] = element;
-                        }, className: "block w-fit whitespace-nowrap", children: text }, `${text}-${index}`))) }), !measuredSize && (jsx("span", { className: "whitespace-nowrap", children: currentText })), measuredSize && (jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute left-0 top-0 flex whitespace-nowrap", initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' }, transition: {
-                            duration: durationSeconds,
-                            ease: 'easeInOut',
-                        }, children: currentText }, safeIndex) }))] }) }));
-});
-MorphingText.displayName = "MorphingText";
-
-export { MorphingText };

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

@@ -1,18 +0,0 @@
-export interface MorphingTextProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Array of text strings to morph between */
-    texts: string[];
-    /** Time between transitions in ms (default 3000) */
-    interval?: number;
-    /** Transition duration in ms (default 800) */
-    transitionDuration?: number;
-    /** Loop continuously (default true) */
-    loop?: boolean;
-    /** Pause cycling on hover (default false) */
-    pauseOnHover?: boolean;
-    /** Controlled current index (overrides internal state) */
-    currentIndex?: number;
-    /** Callback when the active text changes */
-    onTextChange?: (index: number, text: string) => void;
-    /** Additional class names for the container */
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export { MorphingText } from './MorphingText';
-export type { MorphingTextProps } from './MorphingText.types';

package/dist/components/effects/PageTransition/PageTransition.animations.d.ts

@@ -1,8 +0,0 @@
-import type { PageTransitionDirection } from './PageTransition.types';
-import type { Variants } from 'motion/react';
-export declare const buildCurtainVariants: (direction: PageTransitionDirection, duration: number) => Variants;
-export declare const buildLogoParallaxVariants: (direction: PageTransitionDirection, duration: number) => Variants;
-export declare const buildSplitVariants: (axis: "h" | "v", duration: number) => {
-    panel1: Variants;
-    panel2: Variants;
-};

package/dist/components/effects/PageTransition/PageTransition.animations.js

@@ -1,53 +0,0 @@
-const exitMap = {
-    up: { y: '-100%', x: 0 },
-    down: { y: '100%', x: 0 },
-    left: { x: '-100%', y: 0 },
-    right: { x: '100%', y: 0 },
-};
-const buildCurtainVariants = (direction, duration) => ({
-    covered: { y: 0, x: 0 },
-    exit: {
-        ...exitMap[direction],
-        transition: {
-            duration,
-            ease: [0.76, 0, 0.24, 1],
-        },
-    },
-});
-// Logo is rendered INSIDE the curtain. These are relative offsets that
-// counteract ~30% of the curtain's motion, making the logo appear to
-// move at ~70% of the curtain's speed (parallax lag effect).
-const logoInnerOffsetMap = {
-    up: { y: '30vh', x: 0 },
-    down: { y: '-30vh', x: 0 },
-    left: { x: '30vw', y: 0 },
-    right: { x: '-30vw', y: 0 },
-};
-const buildLogoParallaxVariants = (direction, duration) => ({
-    covered: { y: 0, x: 0 },
-    exit: {
-        ...logoInnerOffsetMap[direction],
-        transition: {
-            duration,
-            ease: [0.76, 0, 0.24, 1],
-        },
-    },
-});
-const buildSplitVariants = (axis, duration) => ({
-    panel1: {
-        covered: {},
-        exit: {
-            [axis === 'h' ? 'y' : 'x']: '-100%',
-            transition: { duration, ease: [0.76, 0, 0.24, 1] },
-        },
-    },
-    panel2: {
-        covered: {},
-        exit: {
-            [axis === 'h' ? 'y' : 'x']: '100%',
-            transition: { duration, ease: [0.76, 0, 0.24, 1] },
-        },
-    },
-});
-
-export { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants };

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { PageTransitionProps } from "./PageTransition.types";
-export declare const PageTransition: React.FC<PageTransitionProps>;

package/dist/components/effects/PageTransition/PageTransition.js

@@ -1,82 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants } from './PageTransition.animations.js';
-
-const PageTransition = ({ children, logo, type = "slide", direction = "up", duration = 0.8, delay = 0.8, color = "bg-[var(--color-primary)]", className, parallax = true, onStart, onComplete, }) => {
-    const [phase, setPhase] = useState("covered");
-    const [completedPanels, setCompletedPanels] = useState(0);
-    // Stable refs for callbacks to avoid stale closures without re-running the effect
-    const onStartRef = useRef(onStart);
-    const onCompleteRef = useRef(onComplete);
-    useEffect(() => { onStartRef.current = onStart; }, [onStart]);
-    useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]);
-    useEffect(() => {
-        if (typeof window === "undefined" || typeof document === "undefined")
-            return;
-        let cancelled = false;
-        const loadPromise = new Promise((resolve) => {
-            if (document.readyState === "complete") {
-                resolve();
-            }
-            else {
-                window.addEventListener("load", () => resolve(), { once: true });
-            }
-        });
-        const delayPromise = new Promise((resolve) => {
-            setTimeout(resolve, delay * 1000);
-        });
-        Promise.all([loadPromise, delayPromise]).then(() => {
-            if (!cancelled) {
-                setPhase("exit");
-                setTimeout(() => {
-                    var _a;
-                    if (!cancelled)
-                        (_a = onStartRef.current) === null || _a === void 0 ? void 0 : _a.call(onStartRef);
-                }, 250);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [delay]);
-    useEffect(() => {
-        var _a;
-        if (type === "split" && completedPanels === 2) {
-            (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
-        }
-    }, [completedPanels, type]);
-    if (type === "split") {
-        const axis = direction === "up" || direction === "down" ? "h" : "v";
-        const splitVars = buildSplitVariants(axis, duration);
-        return (jsxs(Fragment, { children: [children, jsxs("div", { className: "fixed inset-0 z-[9999] pointer-events-none", children: [jsx(motion.div, { className: cn(axis === "h"
-                                ? "absolute inset-x-0 top-0 h-1/2"
-                                : "absolute inset-y-0 left-0 w-1/2", color, className), variants: splitVars.panel1, initial: "covered", animate: phase, onAnimationComplete: (def) => {
-                                if (def === "exit")
-                                    setCompletedPanels((n) => n + 1);
-                            } }), jsx(motion.div, { className: cn(axis === "h"
-                                ? "absolute inset-x-0 bottom-0 h-1/2"
-                                : "absolute inset-y-0 right-0 w-1/2", color, className), variants: splitVars.panel2, initial: "covered", animate: phase, onAnimationComplete: (def) => {
-                                if (def === "exit")
-                                    setCompletedPanels((n) => n + 1);
-                            } }), logo && (jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none select-none", children: logo }))] })] }));
-    }
-    // Default: slide
-    const curtainVariants = buildCurtainVariants(direction, duration);
-    if (type === "slide" && parallax) {
-        const logoVariants = buildLogoParallaxVariants(direction, duration);
-        return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
-                        var _a;
-                        if (def === "exit")
-                            (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
-                    }, children: logo && (jsx(motion.div, { className: "relative z-10 select-none", variants: logoVariants, initial: "covered", animate: phase, children: logo })) })] }));
-    }
-    return (jsxs(Fragment, { children: [children, jsx(motion.div, { className: cn("fixed inset-0 z-[9999] flex items-center justify-center", color, className), style: { willChange: "transform" }, variants: curtainVariants, initial: "covered", animate: phase, onAnimationComplete: (def) => {
-                    var _a;
-                    if (def === "exit")
-                        (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
-                }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
-};
-
-export { PageTransition };

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

@@ -1,15 +0,0 @@
-export type PageTransitionDirection = 'up' | 'down' | 'left' | 'right';
-export type PageTransitionType = 'slide' | 'split';
-export interface PageTransitionProps {
-    children: React.ReactNode;
-    logo?: React.ReactNode;
-    type?: PageTransitionType;
-    direction?: PageTransitionDirection;
-    duration?: number;
-    delay?: number;
-    color?: string;
-    className?: string;
-    parallax?: boolean;
-    onStart?: () => void;
-    onComplete?: () => void;
-}

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

@@ -1,2 +0,0 @@
-export { PageTransition } from './PageTransition';
-export type { PageTransitionProps, PageTransitionDirection } from './PageTransition.types';

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { ParallaxSectionProps } from './ParallaxSection.types';
-/**
- * ParallaxSection
- *
- * A scroll-driven parallax wrapper that translates its children at a configurable
- * rate relative to normal scroll, creating depth and visual interest.
- *
- * Uses `transform: translate3d` for GPU-accelerated, jank-free animation.
- *
- * @example
- * ```tsx
- * <ParallaxSection speed={0.3}>
- *   <img src="/hero-bg.jpg" alt="" className="w-full h-[600px] object-cover" />
- * </ParallaxSection>
- * ```
- *
- * @example
- * ```tsx
- * // Opposite direction
- * <ParallaxSection speed={-0.2} direction="horizontal">
- *   <div className="flex gap-4">{items}</div>
- * </ParallaxSection>
- * ```
- */
-export declare const ParallaxSection: React.ForwardRefExoticComponent<ParallaxSectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/ParallaxSection/ParallaxSection.js

@@ -1,71 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
-import { useReducedMotion, useScroll, useTransform, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * ParallaxSection
- *
- * A scroll-driven parallax wrapper that translates its children at a configurable
- * rate relative to normal scroll, creating depth and visual interest.
- *
- * Uses `transform: translate3d` for GPU-accelerated, jank-free animation.
- *
- * @example
- * ```tsx
- * <ParallaxSection speed={0.3}>
- *   <img src="/hero-bg.jpg" alt="" className="w-full h-[600px] object-cover" />
- * </ParallaxSection>
- * ```
- *
- * @example
- * ```tsx
- * // Opposite direction
- * <ParallaxSection speed={-0.2} direction="horizontal">
- *   <div className="flex gap-4">{items}</div>
- * </ParallaxSection>
- * ```
- */
-const ParallaxSection = React__default.forwardRef(({ speed = 0.5, direction = 'vertical', scrollRef, className, children, style, 
-// Destructure HTML event handlers that conflict with motion's API
-onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
-    const shouldReduceMotion = useReducedMotion();
-    const internalRef = useRef(null);
-    // Track scroll progress of the target element through the viewport.
-    // offset: element bottom enters viewport -> element top exits viewport.
-    const { scrollYProgress } = useScroll({
-        target: internalRef,
-        container: scrollRef,
-        offset: ['start end', 'end start'],
-    });
-    // Map 0-1 scroll progress to a pixel displacement.
-    // At progress 0 (element just entering) the offset is positive (pushed down),
-    // and at progress 1 (element leaving) the offset is negative (pulled up),
-    // scaled by the speed multiplier.  This creates the classic parallax feel.
-    const range = 200 * speed;
-    const yTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
-    const xTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
-    // When reduced motion is preferred, render without any parallax.
-    if (shouldReduceMotion) {
-        return (jsx("div", { ref: (node) => {
-                internalRef.current = node;
-                if (typeof ref === 'function')
-                    ref(node);
-                else if (ref)
-                    ref.current = node;
-            }, className: cn('will-change-transform', className), style: style, ...restProps, children: children }));
-    }
-    const motionStyle = direction === 'vertical'
-        ? { y: yTransform, ...style }
-        : { x: xTransform, ...style };
-    return (jsx(motion.div, { ref: (node) => {
-            internalRef.current = node;
-            if (typeof ref === 'function')
-                ref(node);
-            else if (ref)
-                ref.current = node;
-        }, className: cn('will-change-transform', className), style: motionStyle, ...restProps, children: children }));
-});
-ParallaxSection.displayName = 'ParallaxSection';
-
-export { ParallaxSection };

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

@@ -1,11 +0,0 @@
-import type { RefObject } from 'react';
-export interface ParallaxSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Parallax speed multiplier. Negative = moves opposite direction. (default 0.5) */
-    speed?: number;
-    /** Direction of parallax (default 'vertical') */
-    direction?: 'vertical' | 'horizontal';
-    /** Use scroll container instead of window (ref to container) */
-    scrollRef?: RefObject<HTMLElement>;
-    className?: string;
-    children: React.ReactNode;
-}

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

@@ -1,2 +0,0 @@
-export { ParallaxSection } from './ParallaxSection';
-export type { ParallaxSectionProps } from './ParallaxSection.types';

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

@@ -1,36 +0,0 @@
-import React from "react";
-import type { SpotlightProps } from "./Spotlight.types";
-/**
- * Spotlight Component
- *
- * A mouse-following radial gradient that creates a subtle surface illumination
- * effect. Tracks the mouse position within the parent element and renders a
- * smooth, animated glow that follows the cursor.
- *
- * The parent container should have `position: relative` and `overflow: hidden`.
- *
- * Unlike SpotlightBorder (which highlights borders), this component illuminates
- * the surface area itself with a soft radial gradient.
- *
- * @example
- * ```tsx
- * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-8">
- *   <Spotlight color="var(--color-primary)" intensity={0.2} />
- *   <span className="relative z-10">Hover over me</span>
- * </div>
- * ```
- *
- * @example Custom spring and size
- * ```tsx
- * <div className="relative overflow-hidden bg-slate-800 rounded-xl p-12">
- *   <Spotlight
- *     size={500}
- *     color="#8b5cf6"
- *     intensity={0.25}
- *     springConfig={{ damping: 20, stiffness: 150 }}
- *   />
- *   <h2 className="relative z-10 text-white">Interactive card</h2>
- * </div>
- * ```
- */
-export declare const Spotlight: React.FC<SpotlightProps>;