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

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/MagneticElement/MagneticElement.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import type { MagneticElementProps } from "./MagneticElement.types";
+/**
+ * MagneticElement
+ *
+ * A wrapper component that adds a magnetic pull effect to its children.
+ * When the cursor moves over the element, it subtly translates toward
+ * the cursor position, creating an engaging interactive effect.
+ *
+ * The component uses spring-based animations for smooth, natural movement
+ * and respects the user's reduced motion preferences.
+ *
+ * @example
+ * ```tsx
+ * <MagneticElement strength={0.3}>
+ *   <Button>Hover me</Button>
+ * </MagneticElement>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parallax inner content
+ * <MagneticElement strength={0.4} innerStrength={2}>
+ *   <div className="p-4">
+ *     <span>Pull me closer</span>
+ *   </div>
+ * </MagneticElement>
+ * ```
+ */
+export declare const MagneticElement: React.ForwardRefExoticComponent<MagneticElementProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/MagneticElement/MagneticElement.js

@@ -0,0 +1,110 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback } from 'react';
+import { useReducedMotion, useMotionValue, useSpring, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * MagneticElement
+ *
+ * A wrapper component that adds a magnetic pull effect to its children.
+ * When the cursor moves over the element, it subtly translates toward
+ * the cursor position, creating an engaging interactive effect.
+ *
+ * The component uses spring-based animations for smooth, natural movement
+ * and respects the user's reduced motion preferences.
+ *
+ * @example
+ * ```tsx
+ * <MagneticElement strength={0.3}>
+ *   <Button>Hover me</Button>
+ * </MagneticElement>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parallax inner content
+ * <MagneticElement strength={0.4} innerStrength={2}>
+ *   <div className="p-4">
+ *     <span>Pull me closer</span>
+ *   </div>
+ * </MagneticElement>
+ * ```
+ */
+const MagneticElement = forwardRef(({ strength = 0.3, distance = 100, damping = 15, stiffness = 150, innerStrength = 1.5, disabled = false, className, children, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
+    const elementRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const isDisabled = disabled || shouldReduceMotion;
+    // Motion values for outer wrapper translation
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    // Spring-animated versions of x and y for smooth movement
+    const springConfig = { damping, stiffness, mass: 1 };
+    const springX = useSpring(x, springConfig);
+    const springY = useSpring(y, springConfig);
+    // Motion values for inner content (parallax effect)
+    const innerX = useMotionValue(0);
+    const innerY = useMotionValue(0);
+    const innerSpringX = useSpring(innerX, springConfig);
+    const innerSpringY = useSpring(innerY, springConfig);
+    const handleMouseMove = useCallback((event) => {
+        var _a;
+        if (isDisabled)
+            return;
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const rect = element.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Calculate distance from cursor to element center
+        const deltaX = event.clientX - centerX;
+        const deltaY = event.clientY - centerY;
+        const distanceFromCenter = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        // Only apply effect within the configured distance
+        const maxDistance = Math.max(rect.width, rect.height) / 2 + distance;
+        if (distanceFromCenter < maxDistance) {
+            // Apply translation proportional to offset and strength
+            const translateX = deltaX * strength;
+            const translateY = deltaY * strength;
+            x.set(translateX);
+            y.set(translateY);
+            // Inner content moves slightly more for parallax feel
+            if (innerStrength !== 1) {
+                innerX.set(translateX * (innerStrength - 1));
+                innerY.set(translateY * (innerStrength - 1));
+            }
+        }
+        // Forward to user's onMouseMove if provided
+        (_a = restProps.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
+    }, [isDisabled, strength, distance, innerStrength, x, y, innerX, innerY, restProps.onMouseMove]);
+    const handleMouseLeave = useCallback((event) => {
+        var _a;
+        if (isDisabled)
+            return;
+        // Reset to center position; the spring will animate the return
+        x.set(0);
+        y.set(0);
+        innerX.set(0);
+        innerY.set(0);
+        // Forward to user's onMouseLeave if provided
+        (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
+    }, [isDisabled, x, y, innerX, innerY, restProps.onMouseLeave]);
+    // When disabled or reduced motion preferred, render without motion
+    if (isDisabled) {
+        return (jsx("div", { ref: ref, className: cn("inline-block", className), ...restProps, children: children }));
+    }
+    const hasParallax = innerStrength !== 1;
+    return (jsx(motion.div, { ref: (node) => {
+            // Assign to both the internal ref and the forwarded ref
+            elementRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cn("inline-block", className), style: { x: springX, y: springY }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, ...restProps, children: hasParallax ? (jsx(motion.div, { style: { x: innerSpringX, y: innerSpringY }, children: children })) : (children) }));
+});
+MagneticElement.displayName = "MagneticElement";
+
+export { MagneticElement };

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

@@ -0,0 +1,44 @@
+import React from "react";
+export interface MagneticElementProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Strength of the magnetic pull effect.
+     * Value between 0 and 1, where 0 is no effect and 1 is maximum pull.
+     * @default 0.3
+     */
+    strength?: number;
+    /**
+     * Distance in pixels at which the magnetic effect activates.
+     * Only applies when the cursor is within this radius of the element center.
+     * @default 100
+     */
+    distance?: number;
+    /**
+     * Spring damping for the animation.
+     * Higher values result in less oscillation and a more dampened feel.
+     * @default 15
+     */
+    damping?: number;
+    /**
+     * Spring stiffness for the animation.
+     * Higher values result in a snappier spring.
+     * @default 150
+     */
+    stiffness?: number;
+    /**
+     * Multiplier for inner content movement relative to the outer wrapper.
+     * Creates a subtle parallax-like effect where content moves slightly more.
+     * Set to 1 for no parallax. Values above 1 amplify inner movement.
+     * @default 1.5
+     */
+    innerStrength?: number;
+    /**
+     * When true, disables the magnetic effect entirely.
+     * The component renders as a plain div wrapper.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Additional className for the outer wrapper */
+    className?: string;
+    /** Content to wrap with the magnetic effect */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { MagneticElement } from "./MagneticElement";
+export type { MagneticElementProps } from "./MagneticElement.types";

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

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

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * 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 filterId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const isControlled = controlledIndex !== undefined;
+    const [internalIndex, setInternalIndex] = useState(0);
+    const activeIndex = isControlled ? controlledIndex : internalIndex;
+    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]);
+    // 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];
+    // 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 (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/MorphingText/MorphingText.types.d.ts

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

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InsetCircleButtonProps {
+    children: React.ReactNode;
+    size?: number;
+    className?: string;
+    classNameDisc?: string;
+    classNameHover?: string;
+    onClick?: () => void;
+}
+export declare function InsetCircleButton({ children, size, className, classNameDisc, classNameHover, onClick, }: 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, onClick, }) {
+    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 }, onClick: onClick, 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,8 @@
+import React from "react";
+export interface InsetPillProps {
+    children: React.ReactNode;
+    className?: string;
+    padding?: string;
+    onClick?: () => void;
+}
+export declare function InsetPill({ children, className, padding, onClick, }: 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", onClick, }) {
+    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 }, onClick: onClick, 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

@@ -0,0 +1,28 @@
+import React from "react";
+import type { NoiseOverlayProps } from "./NoiseOverlay.types";
+/**
+ * NoiseOverlay Component
+ *
+ * An SVG feTurbulence-based noise/grain texture overlay that adds a
+ * matte or film-like quality to surfaces. Renders as an absolute-positioned,
+ * non-interactive layer over its parent container.
+ *
+ * The parent container should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-6">
+ *   <NoiseOverlay opacity={0.2} blendMode="soft-light" />
+ *   <span className="relative z-10">Content with grain texture</span>
+ * </div>
+ * ```
+ *
+ * @example Animated grain
+ * ```tsx
+ * <div className="relative overflow-hidden bg-indigo-600 rounded-lg p-8">
+ *   <NoiseOverlay animated frequency={0.8} octaves={3} />
+ *   <h2 className="relative z-10 text-white">Film grain effect</h2>
+ * </div>
+ * ```
+ */
+export declare const NoiseOverlay: React.ForwardRefExoticComponent<NoiseOverlayProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useRef, useEffect } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * NoiseOverlay Component
+ *
+ * An SVG feTurbulence-based noise/grain texture overlay that adds a
+ * matte or film-like quality to surfaces. Renders as an absolute-positioned,
+ * non-interactive layer over its parent container.
+ *
+ * The parent container should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden bg-gray-900 rounded-lg p-6">
+ *   <NoiseOverlay opacity={0.2} blendMode="soft-light" />
+ *   <span className="relative z-10">Content with grain texture</span>
+ * </div>
+ * ```
+ *
+ * @example Animated grain
+ * ```tsx
+ * <div className="relative overflow-hidden bg-indigo-600 rounded-lg p-8">
+ *   <NoiseOverlay animated frequency={0.8} octaves={3} />
+ *   <h2 className="relative z-10 text-white">Film grain effect</h2>
+ * </div>
+ * ```
+ */
+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);
+    const isAnimating = animated && !shouldReduceMotion;
+    useEffect(() => {
+        if (!isAnimating || !turbulenceRef.current)
+            return;
+        let seed = 0;
+        const step = () => {
+            var _a;
+            seed += 1;
+            if (seed > 999)
+                seed = 0;
+            (_a = turbulenceRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute("seed", String(seed));
+        };
+        // Animate at roughly 8fps for a subtle film-grain flicker
+        const intervalId = setInterval(step, 125);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [isAnimating]);
+    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/NoiseOverlay/NoiseOverlay.types.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/** Blend mode for the noise overlay layer */
+export type NoiseBlendMode = "overlay" | "soft-light" | "multiply" | "normal";
+export interface NoiseOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Opacity of the noise texture (0-1).
+     * @default 0.15
+     */
+    opacity?: number;
+    /**
+     * Base frequency for the feTurbulence noise generator.
+     * Higher values produce finer grain; lower values produce coarser patterns.
+     * @default 0.65
+     */
+    frequency?: number;
+    /**
+     * Number of octaves for the feTurbulence noise generator.
+     * More octaves add detail/complexity to the noise pattern.
+     * @default 4
+     */
+    octaves?: number;
+    /**
+     * CSS mix-blend-mode for how the noise composites over the parent.
+     * @default "overlay"
+     */
+    blendMode?: NoiseBlendMode;
+    /**
+     * Whether to animate the noise pattern with a subtle shifting effect.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { NoiseOverlay } from "./NoiseOverlay";
+export type { NoiseOverlayProps, NoiseBlendMode } from "./NoiseOverlay.types";