@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/components/effects/InteractiveCharacters/hooks/useBlink.d.ts

@@ -0,0 +1,14 @@
+interface UseBlinkOptions {
+    /** Whether blinking is enabled */
+    enabled?: boolean;
+    /** Min time between blinks in ms (default: 2000) */
+    minInterval?: number;
+    /** Max time between blinks in ms (default: 5000) */
+    maxInterval?: number;
+}
+/**
+ * Returns a MotionValue representing eyelid close amount (0 = open, 1 = closed).
+ * Fires periodic natural blinks when enabled.
+ */
+export declare function useBlink({ enabled, minInterval, maxInterval, }?: UseBlinkOptions): import("motion-dom").MotionValue<number>;
+export {};

package/dist/components/effects/InteractiveCharacters/hooks/useBlink.js

@@ -0,0 +1,41 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useMotionValue, useSpring } from 'motion/react';
+
+/**
+ * Returns a MotionValue representing eyelid close amount (0 = open, 1 = closed).
+ * Fires periodic natural blinks when enabled.
+ */
+function useBlink({ enabled = true, minInterval = 2000, maxInterval = 5000, } = {}) {
+    const raw = useMotionValue(0);
+    const blink = useSpring(raw, { stiffness: 600, damping: 30 });
+    const timeoutRef = useRef(undefined);
+    const doBlink = useCallback(() => {
+        // Close eyes
+        raw.set(1);
+        // Open after 120ms
+        setTimeout(() => raw.set(0), 120);
+    }, [raw]);
+    const scheduleNext = useCallback(() => {
+        const delay = minInterval + Math.random() * (maxInterval - minInterval);
+        timeoutRef.current = setTimeout(() => {
+            if (enabled) {
+                doBlink();
+                scheduleNext();
+            }
+        }, delay);
+    }, [enabled, minInterval, maxInterval, doBlink]);
+    useEffect(() => {
+        if (!enabled) {
+            raw.set(0);
+            return;
+        }
+        scheduleNext();
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [enabled, scheduleNext, raw]);
+    return blink;
+}
+
+export { useBlink };

package/dist/components/effects/InteractiveCharacters/hooks/useIdleAnimation.d.ts

@@ -0,0 +1,25 @@
+interface UseIdleAnimationOptions {
+    /** Whether idle animation is active */
+    enabled?: boolean;
+    /** Amplitude of the sway in SVG units (default: 2) */
+    swayAmount?: number;
+    /** Speed multiplier for the sway cycle (default: 1) */
+    swaySpeed?: number;
+    /** Amplitude of the breathing scale oscillation (default: 0.01) */
+    breathAmount?: number;
+    /** Amplitude of head tilt in degrees (default: 3) */
+    headTiltAmount?: number;
+    /** Amplitude of random head nudge in SVG units (default: 1.5) */
+    headNudgeAmount?: number;
+    /** Phase offset in seconds — staggers characters so they don't move in sync */
+    phaseOffset?: number;
+}
+export declare function useIdleAnimation({ enabled, swayAmount, swaySpeed, breathAmount, headTiltAmount, headNudgeAmount, phaseOffset, }?: UseIdleAnimationOptions): {
+    sway: import("motion-dom").MotionValue<number>;
+    bob: import("motion-dom").MotionValue<number>;
+    breath: import("motion-dom").MotionValue<number>;
+    headTilt: import("motion-dom").MotionValue<number>;
+    headX: import("motion-dom").MotionValue<number>;
+    headY: import("motion-dom").MotionValue<number>;
+};
+export {};

package/dist/components/effects/InteractiveCharacters/hooks/useIdleAnimation.js

@@ -0,0 +1,84 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
+
+function useIdleAnimation({ enabled = true, swayAmount = 2, swaySpeed = 1, breathAmount = 0.01, headTiltAmount = 3, headNudgeAmount = 1.5, phaseOffset = 0, } = {}) {
+    const shouldReduceMotion = useReducedMotion();
+    const rafRef = useRef(0);
+    const startTimeRef = useRef(null);
+    const isFirstFrame = useRef(true);
+    const rawSway = useMotionValue(0);
+    const rawBob = useMotionValue(0);
+    const rawBreath = useMotionValue(1);
+    const rawHeadTilt = useMotionValue(0);
+    const rawHeadX = useMotionValue(0);
+    const rawHeadY = useMotionValue(0);
+    const sway = useSpring(rawSway, { stiffness: 40, damping: 15 });
+    const bob = useSpring(rawBob, { stiffness: 40, damping: 15 });
+    const breath = useSpring(rawBreath, { stiffness: 40, damping: 15 });
+    const headTilt = useSpring(rawHeadTilt, { stiffness: 30, damping: 12 });
+    const headX = useSpring(rawHeadX, { stiffness: 35, damping: 14 });
+    const headY = useSpring(rawHeadY, { stiffness: 35, damping: 14 });
+    const animate = useCallback((time) => {
+        if (startTimeRef.current === null)
+            startTimeRef.current = time;
+        const t = (time - startTimeRef.current) / 1000 + phaseOffset;
+        // Body sway: slow sinusoidal
+        const swayVal = Math.sin(t * 0.8 * swaySpeed) * swayAmount;
+        rawSway.set(swayVal);
+        // Body bob: slightly different frequency
+        const bobVal = Math.sin(t * 1.2 * swaySpeed) * (swayAmount * 0.5);
+        rawBob.set(bobVal);
+        // Breathing: subtle scale oscillation
+        const breathVal = 1 + Math.sin(t * 1.5 * swaySpeed) * breathAmount;
+        rawBreath.set(breathVal);
+        // Head tilt: layered sinusoids for organic, non-repeating feel
+        const tilt1 = Math.sin(t * 0.5 * swaySpeed) * 0.6;
+        const tilt2 = Math.sin(t * 1.3 * swaySpeed) * 0.3;
+        const tilt3 = Math.sin(t * 0.3 * swaySpeed) * 0.1;
+        const tiltVal = (tilt1 + tilt2 + tilt3) * headTiltAmount;
+        rawHeadTilt.set(tiltVal);
+        // Head nudge X/Y: different frequencies from body for independence
+        const headXVal = (Math.sin(t * 0.7 * swaySpeed) * 0.6 +
+            Math.sin(t * 1.9 * swaySpeed) * 0.4) *
+            headNudgeAmount;
+        rawHeadX.set(headXVal);
+        const headYVal = (Math.sin(t * 0.9 * swaySpeed) * 0.5 +
+            Math.sin(t * 2.1 * swaySpeed) * 0.3) *
+            headNudgeAmount *
+            0.6;
+        rawHeadY.set(headYVal);
+        // On first frame, jump springs directly to skip settling animation
+        if (isFirstFrame.current) {
+            isFirstFrame.current = false;
+            sway.jump(swayVal);
+            bob.jump(bobVal);
+            breath.jump(breathVal);
+            headTilt.jump(tiltVal);
+            headX.jump(headXVal);
+            headY.jump(headYVal);
+        }
+        rafRef.current = requestAnimationFrame(animate);
+    }, [
+        rawSway, rawBob, rawBreath, rawHeadTilt, rawHeadX, rawHeadY,
+        sway, bob, breath, headTilt, headX, headY,
+        swayAmount, swaySpeed, breathAmount, headTiltAmount, headNudgeAmount, phaseOffset,
+    ]);
+    useEffect(() => {
+        if (!enabled || shouldReduceMotion) {
+            rawSway.set(0);
+            rawBob.set(0);
+            rawBreath.set(1);
+            rawHeadTilt.set(0);
+            rawHeadX.set(0);
+            rawHeadY.set(0);
+            return;
+        }
+        startTimeRef.current = null;
+        isFirstFrame.current = true;
+        rafRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [enabled, shouldReduceMotion, animate, rawSway, rawBob, rawBreath, rawHeadTilt, rawHeadX, rawHeadY]);
+    return { sway, bob, breath, headTilt, headX, headY };
+}
+
+export { useIdleAnimation };

package/dist/components/effects/InteractiveCharacters/hooks/useMouseTracking.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+interface UseMouseTrackingOptions {
+    /** Reference to the SVG container element */
+    containerRef: RefObject<SVGSVGElement | null>;
+    /** Whether tracking is enabled */
+    enabled?: boolean;
+    /** Spring stiffness (default: 150) */
+    stiffness?: number;
+    /** Spring damping (default: 25) */
+    damping?: number;
+    /** Maximum eye offset in pixels (default: 6) */
+    maxOffset?: number;
+}
+export declare function useMouseTracking({ containerRef, enabled, stiffness, damping, maxOffset, }: UseMouseTrackingOptions): {
+    x: import("motion-dom").MotionValue<number>;
+    y: import("motion-dom").MotionValue<number>;
+};
+export {};

package/dist/components/effects/InteractiveCharacters/hooks/useMouseTracking.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect } from 'react';
+import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
+
+function useMouseTracking({ containerRef, enabled = true, stiffness = 150, damping = 25, maxOffset = 6, }) {
+    const shouldReduceMotion = useReducedMotion();
+    const rawX = useMotionValue(0);
+    const rawY = useMotionValue(0);
+    const x = useSpring(rawX, { stiffness, damping });
+    const y = useSpring(rawY, { stiffness, damping });
+    const handleMouseMove = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Normalize to -1..1 range based on distance from center
+        const nx = Math.max(-1, Math.min(1, (e.clientX - centerX) / (rect.width / 2)));
+        const ny = Math.max(-1, Math.min(1, (e.clientY - centerY) / (rect.height / 2)));
+        rawX.set(nx * maxOffset);
+        rawY.set(ny * maxOffset);
+    }, [containerRef, rawX, rawY, maxOffset]);
+    useEffect(() => {
+        if (!enabled || shouldReduceMotion) {
+            rawX.set(0);
+            rawY.set(0);
+            return;
+        }
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [enabled, shouldReduceMotion, handleMouseMove, rawX, rawY]);
+    return { x, y };
+}
+
+export { useMouseTracking };

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

@@ -0,0 +1,2 @@
+export { InteractiveCharacters } from './InteractiveCharacters';
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from './InteractiveCharacters.types';

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

@@ -14,4 +14,4 @@ import type { MorphingTextProps } from './MorphingText.types';
  * />
  * ```
  */
-export declare const MorphingText: React.FC<MorphingTextProps>;
+export declare const MorphingText: React.ForwardRefExoticComponent<MorphingTextProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
@@ -17,7 +17,7 @@ import { cn } from '../../../utils/cn.js';
  * />
  * ```
  */
-const MorphingText = ({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }) => {
+const MorphingText = React__default.forwardRef(({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }, ref) => {
     const filterId = useId();
     const shouldReduceMotion = useReducedMotion();
     const isControlled = controlledIndex !== undefined;
@@ -80,12 +80,13 @@ const MorphingText = ({ texts, interval = 3000, transitionDuration = 800, loop =
     const currentText = texts[safeIndex];
     // Reduced motion: instant swap with no animation
     if (shouldReduceMotion) {
-        return (jsx("div", { 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', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: jsx("span", { children: currentText }) }));
     }
-    return (jsxs("div", { className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: [jsx("svg", { className: "absolute h-0 w-0", "aria-hidden": "true", children: jsx("defs", { children: jsx("filter", { id: `${filterId}-blur`, children: jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0" }) }) }) }), jsx("span", { className: "invisible block", "aria-hidden": "true", children: currentText }), jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute inset-0 flex items-center", initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' }, transition: {
+    return (jsxs("div", { ref: ref, className: cn('relative inline-block', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-live": "polite", "aria-atomic": "true", ...props, children: [jsx("svg", { className: "absolute h-0 w-0", "aria-hidden": "true", children: jsx("defs", { children: jsx("filter", { id: `${filterId}-blur`, children: jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0" }) }) }) }), jsx("span", { className: "invisible block", "aria-hidden": "true", children: currentText }), jsx(AnimatePresence, { mode: "popLayout", initial: false, children: jsx(motion.span, { className: "absolute inset-0 flex items-center", 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/Neumorphic/InsetCircleButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface InsetCircleButtonProps {
+    children: React.ReactNode;
+    size?: number;
+    className?: string;
+    classNameDisc?: string;
+    classNameHover?: string;
+}
+export declare function InsetCircleButton({ children, size, className, classNameDisc, classNameHover, }: InsetCircleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+
+function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, }) {
+    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
+}
+
+export { InsetCircleButton };

package/dist/components/effects/Neumorphic/InsetPill.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface InsetPillProps {
+    children: React.ReactNode;
+    className?: string;
+    padding?: string;
+}
+export declare function InsetPill({ children, className, padding, }: InsetPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetPill.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function InsetPill({ children, className, padding = "10px 18px", }) {
+    return (jsx("div", { className: `neu-inset inline-flex items-center gap-2 cursor-pointer rounded-full bg-neutral-200/60 dark:bg-neutral-800/80 ${className !== null && className !== void 0 ? className : ""}`, style: { padding }, children: jsx("div", { className: "relative z-2 flex items-center gap-2", children: children }) }));
+}
+
+export { InsetPill };

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

@@ -0,0 +1,4 @@
+export { InsetCircleButton } from "./InsetCircleButton";
+export type { InsetCircleButtonProps } from "./InsetCircleButton";
+export { InsetPill } from "./InsetPill";
+export type { InsetPillProps } from "./InsetPill";

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

@@ -25,4 +25,4 @@ import type { NoiseOverlayProps } from "./NoiseOverlay.types";
  * </div>
  * ```
  */
-export declare const NoiseOverlay: React.FC<NoiseOverlayProps>;
+export declare const NoiseOverlay: React.ForwardRefExoticComponent<NoiseOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/NoiseOverlay/NoiseOverlay.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId, useRef, useEffect } from 'react';
+import React__default, { useId, useRef, useEffect } from 'react';
 import { useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
@@ -28,7 +28,7 @@ import { cn } from '../../../utils/cn.js';
  * </div>
  * ```
  */
-const NoiseOverlay = ({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode = "overlay", animated = false, className, style, ...props }) => {
+const NoiseOverlay = React__default.forwardRef(({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode = "overlay", animated = false, className, style, ...props }, ref) => {
     const filterId = useId();
     const shouldReduceMotion = useReducedMotion();
     const turbulenceRef = useRef(null);
@@ -50,12 +50,12 @@ const NoiseOverlay = ({ opacity = 0.15, frequency = 0.65, octaves = 4, blendMode
             clearInterval(intervalId);
         };
     }, [isAnimating]);
-    return (jsx("div", { className: cn("absolute inset-0 pointer-events-none", className), style: {
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none", className), style: {
             mixBlendMode: blendMode,
             opacity,
             ...style,
         }, "aria-hidden": "true", ...props, children: jsxs("svg", { className: "absolute inset-0 w-full h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: [jsx("filter", { id: filterId, children: jsx("feTurbulence", { ref: turbulenceRef, type: "fractalNoise", baseFrequency: frequency, numOctaves: octaves, stitchTiles: "stitch", seed: 0 }) }), jsx("rect", { width: "100%", height: "100%", filter: `url(#${filterId})` })] }) }));
-};
+});
 NoiseOverlay.displayName = "NoiseOverlay";
 
 export { NoiseOverlay };

package/dist/components/effects/Overlay/Overlay.js

@@ -97,14 +97,16 @@ const Overlay = React__default.forwardRef(({ isOpen, onClose, closeOnOverlayClic
     const finalContentAnimations = { ...contentAnimations };
     if (animationDuration) {
         if (animationDuration.enter && finalOverlayAnimations.animate) {
-            finalOverlayAnimations.animate.transition = {
-                ...finalOverlayAnimations.animate.transition,
+            const animate = finalOverlayAnimations.animate;
+            animate.transition = {
+                ...animate.transition,
                 duration: animationDuration.enter,
             };
         }
         if (animationDuration.exit && finalOverlayAnimations.exit) {
-            finalOverlayAnimations.exit.transition = {
-                ...finalOverlayAnimations.exit.transition,
+            const exit = finalOverlayAnimations.exit;
+            exit.transition = {
+                ...exit.transition,
                 duration: animationDuration.exit,
             };
         }

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,53 @@
+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

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

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

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, 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);
+    useEffect(() => {
+        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(() => {
+                    if (!cancelled)
+                        onStart === null || onStart === void 0 ? void 0 : onStart();
+                }, 250);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [delay]);
+    useEffect(() => {
+        if (type === "split" && completedPanels === 2) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }, [completedPanels, type, onComplete]);
+    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) => {
+                        if (def === "exit")
+                            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                    }, 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) => {
+                    if (def === "exit")
+                        onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+                }, children: logo && jsx("div", { className: "relative z-10 select-none", children: logo }) })] }));
+};
+
+export { PageTransition };

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

@@ -0,0 +1,15 @@
+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

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

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

@@ -30,3 +30,9 @@ export { ScrollReveal } from "./ScrollReveal";
 export type { ScrollRevealProps, ScrollRevealPreset } from "./ScrollReveal";
 export { StickyScroll } from "./StickyScroll";
 export type { StickyScrollProps, StickyScrollSection, } from "./StickyScroll";
+export { PageTransition } from "./PageTransition";
+export type { PageTransitionProps, PageTransitionDirection, } from "./PageTransition";
+export { InteractiveCharacters } from "./InteractiveCharacters";
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
+export { InsetCircleButton, InsetPill } from "./Neumorphic";
+export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";

package/dist/components/effects/index.js

@@ -14,3 +14,7 @@ export { Spotlight } from './Spotlight/Spotlight.js';
 export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
 export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
 export { StickyScroll } from './StickyScroll/StickyScroll.js';
+export { PageTransition } from './PageTransition/PageTransition.js';
+export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
+export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
+export { InsetPill } from './Neumorphic/InsetPill.js';

package/dist/components/forms/Checkbox/Checkbox.animations.d.ts

@@ -0,0 +1,14 @@
+import { Variants } from "motion/react";
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+export declare const checkmarkVariants: Variants;
+/**
+ * Indeterminate dash draw-on animation
+ */
+export declare const indeterminateVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+export declare const reducedMotionVariants: Variants;

package/dist/components/forms/Checkbox/Checkbox.animations.js

@@ -0,0 +1,53 @@
+const smoothEase = [0.65, 0, 0.35, 1];
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+const checkmarkVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.1, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.2, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Indeterminate dash draw-on animation
+ */
+const indeterminateVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.1, ease: smoothEase },
+            opacity: { duration: 0.08, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+const reducedMotionVariants = {
+    unchecked: { opacity: 0 },
+    checked: { opacity: 1 },
+};
+
+export { checkmarkVariants, indeterminateVariants, reducedMotionVariants };