@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,136 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect, useCallback, useState } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../../utils/cn.js';
-import { usePopoverContext } from './PopoverContext.js';
-import { useClickOutside } from '../../../hooks/useClickOutside.js';
-import { popoverTransitions, popoverContentVariants } from './Popover.animations.js';
-import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
-import { Overlay } from '../../effects/Overlay/Overlay.js';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-
-/** Overlay backdrop animations (fade in/out) */
-const overlayBackdropAnimations = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1, transition: { duration: 0.15 } },
-    exit: { opacity: 0, transition: { duration: 0.1 } },
-};
-/** Overlay content animations (scale + fade) */
-const overlayContentAnimations = {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1, transition: { duration: 0.2 } },
-    exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
-};
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
-/**
- * PopoverContent component displays the content of the popover
- */
-const PopoverContent = React__default.forwardRef(({ children, className, animation = true, portal = true, ...props }, ref) => {
-    const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
-    const shouldReduceMotion = useReducedMotion();
-    const localRef = useRef(null);
-    // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
-    const { position, cssVariables, contentRef: portalContentRef } = useSelectPortal({
-        triggerRef,
-        isOpen: isOpen || false,
-        placement: placement,
-        offset: offset || 8,
-        autoWidth: true,
-    });
-    // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
-    useClickOutside(localRef, (e) => {
-        var _a;
-        if (hasBackdrop)
-            return; // Overlay handles click-outside via backdrop
-        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            return;
-        }
-        if (closeOnClickOutside && !preventClose) {
-            onOpenChange(false);
-        }
-    });
-    // Escape key handling (active when no backdrop — with backdrop, Overlay handles it)
-    useEffect(() => {
-        if (hasBackdrop)
-            return; // Overlay handles escape key
-        const handleKeyDown = (e) => {
-            if (closeOnEsc && e.key === "Escape" && !preventClose) {
-                onOpenChange(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [hasBackdrop, closeOnEsc, onOpenChange, preventClose]);
-    // Combine refs
-    const handleRef = useCallback((el) => {
-        localRef.current = el;
-        if (typeof ref === "function") {
-            ref(el);
-        }
-        else if (ref) {
-            ref.current = el;
-        }
-        if (contentRef) {
-            contentRef.current = el;
-        }
-        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
-            portalContentRef.current = el;
-        }
-    }, [ref, contentRef, portalContentRef]);
-    const isDarkMode = useDarkMode();
-    const isClient = useIsClient();
-    // Extract DOM props to avoid type conflicts with Framer Motion
-    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
-    const contentClasses = cn(theme.baseStyle, theme.contentStyle, "popover-content", className);
-    const contentPositionStyle = {
-        ...cssVariables,
-        position: "fixed",
-        top: `${position.top}px`,
-        left: `${position.left}px`,
-    };
-    // When hasBackdrop is true, delegate backdrop + escape + click-outside to Overlay
-    if (hasBackdrop) {
-        return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
-                if (!preventClose)
-                    onOpenChange(false);
-            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
-                ? { overlay: overlayBackdropAnimations, content: overlayContentAnimations }
-                : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
-    }
-    // Without backdrop: manual portal + positioning + escape + click-outside
-    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
-    if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
-    }
-    return popoverContent;
-});
-PopoverContent.displayName = "PopoverContent";
-
-export { PopoverContent };

package/dist/components/core/Sidebar/SidebarSubmenu.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface SidebarSubmenuProps {
-    children: React.ReactNode;
-    isOpen: boolean;
-    className?: string;
-}
-export declare const SidebarSubmenu: ({ children, isOpen, className, }: SidebarSubmenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Sidebar/SidebarSubmenu.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-const SidebarSubmenu = ({ children, isOpen, className, }) => {
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { opacity: 1, height: "auto" },
-                collapsed: { opacity: 0, height: 0 },
-            }, transition: { duration: 0.2, ease: "easeInOut" }, className: cn("overflow-hidden", className), children: children })) }));
-};
-
-export { SidebarSubmenu };

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { SocialIconProps } from './SocialIcon.types';
-export declare const SocialIcon: React.ForwardRefExoticComponent<Omit<SocialIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/core/SocialIcon/SocialIcon.js

@@ -1,30 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { socialIconTheme } from './SocialIcon.theme.js';
-import { platforms } from './platforms.js';
-
-const SocialIcon = React__default.forwardRef(({ icon, size = 'md', colorMode = 'brand', className, theme: customTheme, ...props }, ref) => {
-    var _a;
-    const platform = platforms[icon];
-    if (!platform) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.warn(`[SocialIcon]: Unknown icon "${icon}". Available icons: ${Object.keys(platforms).join(', ')}`);
-        }
-        return null;
-    }
-    const theme = {
-        ...socialIconTheme,
-        ...customTheme,
-        sizes: { ...socialIconTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
-    };
-    const resolvedSize = typeof size === 'number' ? size : (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : 24;
-    const fill = colorMode === 'brand' ? platform.brandColor : 'currentColor';
-    return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
-            var _a;
-            return (jsx("path", { d: shape.d, fill: (_a = shape.fill) !== null && _a !== void 0 ? _a : undefined }, i));
-        }) }));
-});
-SocialIcon.displayName = 'SocialIcon';
-
-export { SocialIcon };

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

@@ -1,2 +0,0 @@
-import { SocialIconTheme } from './SocialIcon.types';
-export declare const socialIconTheme: SocialIconTheme;

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

@@ -1,12 +0,0 @@
-const socialIconTheme = {
-    baseStyle: 'inline-block shrink-0',
-    sizes: {
-        xs: 16,
-        sm: 20,
-        md: 24,
-        lg: 32,
-        xl: 40,
-    },
-};
-
-export { socialIconTheme };

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

@@ -1,18 +0,0 @@
-export type SocialIconName = 'github' | 'x' | 'linkedin' | 'instagram' | 'facebook' | 'youtube' | 'discord' | 'dribbble' | 'tiktok' | 'reddit' | 'twitch' | 'slack' | 'medium' | 'pinterest' | 'snapchat' | 'whatsapp' | 'telegram' | 'google' | 'apple';
-export type SocialIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type SocialIconColorMode = 'brand' | 'mono';
-export interface SocialIconTheme {
-    baseStyle: string;
-    sizes: Record<SocialIconSize, number>;
-}
-export interface SocialIconThemeOverrides {
-    baseStyle?: string;
-    sizes?: Partial<Record<SocialIconSize, number>>;
-}
-export interface SocialIconProps extends React.SVGProps<SVGSVGElement> {
-    icon: SocialIconName;
-    size?: SocialIconSize | number;
-    colorMode?: SocialIconColorMode;
-    className?: string;
-    theme?: SocialIconThemeOverrides;
-}

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

@@ -1,2 +0,0 @@
-export { SocialIcon } from './SocialIcon';
-export type { SocialIconProps, SocialIconName, SocialIconSize, SocialIconColorMode, SocialIconTheme, SocialIconThemeOverrides, } from './SocialIcon.types';

package/dist/components/core/Tabs/TabsContent.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { TabsContentProps } from "./Tabs.types";
-/**
- * TabsContent component displays content panels for tabs with directional fade animations
- */
-export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;

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.FC<MorphingTextProps>;

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

@@ -1,91 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { 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 = ({ texts, interval = 3000, transitionDuration = 800, loop = true, pauseOnHover = false, currentIndex: controlledIndex, onTextChange, className, ...props }) => {
-    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", { 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: {
-                        duration: durationSeconds,
-                        ease: 'easeInOut',
-                    }, children: currentText }, safeIndex) })] }));
-};
-
-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/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>;

package/dist/components/effects/Spotlight/Spotlight.js

@@ -1,112 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useCallback } from 'react';
-import { useReducedMotion, useMotionValue, useSpring, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * 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>
- * ```
- */
-const Spotlight = ({ size = 300, color = "var(--color-primary)", intensity = 0.15, springConfig = { damping: 30, stiffness: 200 }, className, style, ...props }) => {
-    var _a, _b, _c, _d;
-    const shouldReduceMotion = useReducedMotion();
-    const containerRef = useRef(null);
-    const [isHovered, setIsHovered] = useState(false);
-    // Raw mouse position motion values
-    const mouseX = useMotionValue(0);
-    const mouseY = useMotionValue(0);
-    // Spring-animated values for smooth following
-    const springX = useSpring(mouseX, {
-        damping: (_a = springConfig.damping) !== null && _a !== void 0 ? _a : 30,
-        stiffness: (_b = springConfig.stiffness) !== null && _b !== void 0 ? _b : 200,
-    });
-    const springY = useSpring(mouseY, {
-        damping: (_c = springConfig.damping) !== null && _c !== void 0 ? _c : 30,
-        stiffness: (_d = springConfig.stiffness) !== null && _d !== void 0 ? _d : 200,
-    });
-    // Use raw values when reduced motion is preferred
-    const x = shouldReduceMotion ? mouseX : springX;
-    const y = shouldReduceMotion ? mouseY : springY;
-    const handleMouseMove = useCallback((event) => {
-        var _a;
-        const parent = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (!parent)
-            return;
-        const rect = parent.getBoundingClientRect();
-        mouseX.set(event.clientX - rect.left);
-        mouseY.set(event.clientY - rect.top);
-    }, [mouseX, mouseY]);
-    const handleMouseEnter = useCallback((event) => {
-        var _a;
-        // Set position immediately on enter to avoid animating from origin
-        const parent = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (parent) {
-            const rect = parent.getBoundingClientRect();
-            const posX = event.clientX - rect.left;
-            const posY = event.clientY - rect.top;
-            mouseX.set(posX);
-            mouseY.set(posY);
-            // Jump springs to current position to avoid initial slide-in
-            if (!shouldReduceMotion) {
-                springX.jump(posX);
-                springY.jump(posY);
-            }
-        }
-        setIsHovered(true);
-    }, [mouseX, mouseY, springX, springY, shouldReduceMotion]);
-    const handleMouseLeave = useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const halfSize = size / 2;
-    return (jsx("div", { ref: containerRef, className: cn("absolute inset-0 pointer-events-none", className), style: {
-            // Re-enable pointer events so we can track mouse within this layer.
-            // The layer itself is visually transparent to interaction.
-            pointerEvents: "auto",
-            ...style,
-        }, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "aria-hidden": "true", ...props, children: jsx(motion.div, { className: "absolute pointer-events-none", style: {
-                width: size,
-                height: size,
-                borderRadius: "50%",
-                x,
-                y,
-                marginLeft: -halfSize,
-                marginTop: -halfSize,
-                background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
-                opacity: isHovered ? intensity : 0,
-                transition: shouldReduceMotion
-                    ? "opacity 0s"
-                    : "opacity 0.3s ease-in-out",
-            } }) }));
-};
-Spotlight.displayName = "Spotlight";
-
-export { Spotlight };