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

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 };

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

@@ -1,29 +0,0 @@
-import React from "react";
-export interface SpotlightProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Diameter of the spotlight glow in pixels.
-     * @default 300
-     */
-    size?: number;
-    /**
-     * Color of the spotlight glow.
-     * Accepts any valid CSS color value or CSS variable reference.
-     * @default "var(--color-primary)"
-     */
-    color?: string;
-    /**
-     * Peak opacity of the spotlight glow (0-1).
-     * @default 0.15
-     */
-    intensity?: number;
-    /**
-     * Spring animation configuration for the mouse-following behavior.
-     * @default { damping: 30, stiffness: 200 }
-     */
-    springConfig?: {
-        damping?: number;
-        stiffness?: number;
-    };
-    /** Additional className for style overrides (shadcn pattern). */
-    className?: string;
-}

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

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

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

@@ -1,18 +0,0 @@
-import React from "react";
-import { SpotlightBorderProps } from "./SpotlightBorder.types";
-/**
- * SpotlightBorder Component
- * Adds an interactive WebGL border effect around its children.
- * The border illuminates near the mouse cursor and supports a soft outer glow.
- * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
- *
- * @example
- * ```tsx
- * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
- *   <div className="p-6 bg-gray-900">
- *     <h3>Premium Card</h3>
- *   </div>
- * </SpotlightBorder>
- * ```
- */
-export declare const SpotlightBorder: React.FC<SpotlightBorderProps>;

package/dist/components/effects/SpotlightBorder/SpotlightBorder.js

@@ -1,213 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { useReducedMotion } from 'motion/react';
-import * as THREE from 'three';
-import { cn } from '../../../utils/cn.js';
-import { variationMap } from './SpotlightBorder.types.js';
-import { fragmentShader, vertexShader } from './SpotlightBorder.shaders.js';
-
-/**
- * SpotlightBorder Component
- * Adds an interactive WebGL border effect around its children.
- * The border illuminates near the mouse cursor and supports a soft outer glow.
- * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
- *
- * @example
- * ```tsx
- * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
- *   <div className="p-6 bg-gray-900">
- *     <h3>Premium Card</h3>
- *   </div>
- * </SpotlightBorder>
- * ```
- */
-const SpotlightBorder = ({ children, variation = "rounded-rect", rounded, borderWidth = 2, color = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, tiltIntensity = 5, shouldAnimate = true, className, style, ...props }) => {
-    const outerRef = useRef(null);
-    const containerRef = useRef(null);
-    // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
-    const prefersReducedMotion = useReducedMotion();
-    const isAnimating = shouldAnimate && !prefersReducedMotion;
-    // Refs to store THREE.js objects across effects
-    const rendererRef = useRef(null);
-    const sceneRef = useRef(null);
-    const cameraRef = useRef(null);
-    const materialRef = useRef(null);
-    const quadRef = useRef(null);
-    const geoRef = useRef(null);
-    const canvasRef = useRef(null);
-    // Refs for animation state
-    const vMouseRef = useRef(new THREE.Vector2(-1e4, -1e4));
-    const vMouseDampRef = useRef(new THREE.Vector2(-1e4, -1e4));
-    const vResolutionRef = useRef(new THREE.Vector2());
-    const vContentResolutionRef = useRef(new THREE.Vector2());
-    const vOffsetRef = useRef(new THREE.Vector2());
-    const rotateXDampRef = useRef(0);
-    const rotateYDampRef = useRef(0);
-    const wRef = useRef(1);
-    const hRef = useRef(1);
-    // One-time setup effect: creates renderer, scene, camera, geometry, material, mesh
-    useEffect(() => {
-        var _a;
-        const outer = outerRef.current;
-        const container = containerRef.current;
-        if (!outer || !container || !isAnimating)
-            return;
-        const scene = new THREE.Scene();
-        const camera = new THREE.OrthographicCamera();
-        camera.position.z = 1;
-        const renderer = new THREE.WebGLRenderer({ alpha: true });
-        renderer.setClearColor(0x000000, 0);
-        const canvas = renderer.domElement;
-        canvas.style.position = "absolute";
-        canvas.style.pointerEvents = "none";
-        canvas.style.zIndex = "10";
-        outer.appendChild(canvas);
-        const geo = new THREE.PlaneGeometry(1, 1);
-        const material = new THREE.ShaderMaterial({
-            vertexShader,
-            fragmentShader,
-            uniforms: {
-                u_mouse: { value: vMouseDampRef.current },
-                u_resolution: { value: vResolutionRef.current },
-                u_contentResolution: { value: vContentResolutionRef.current },
-                u_offset: { value: vOffsetRef.current },
-                u_pixelRatio: { value: Math.min(window.devicePixelRatio || 1, 2) },
-                u_color: { value: new THREE.Color(color) },
-                u_shapeSize: { value: 1.0 },
-                u_roundness: { value: 0.0 },
-                u_borderSize: { value: 0.0 },
-                u_spotlightSize: { value: spotlightSize },
-                u_spotlightEdge: { value: spotlightEdge },
-                u_glowIntensity: { value: glowIntensity },
-            },
-            defines: { VAR: (_a = variationMap[variation]) !== null && _a !== void 0 ? _a : 0 },
-            transparent: true,
-        });
-        const quad = new THREE.Mesh(geo, material);
-        scene.add(quad);
-        // Store refs
-        rendererRef.current = renderer;
-        sceneRef.current = scene;
-        cameraRef.current = camera;
-        materialRef.current = material;
-        quadRef.current = quad;
-        geoRef.current = geo;
-        canvasRef.current = canvas;
-        let animationFrameId;
-        const onPointerMove = (e) => {
-            if (!container)
-                return;
-            const rect = container.getBoundingClientRect();
-            vMouseRef.current.set(e.clientX - rect.left, e.clientY - rect.top);
-        };
-        document.addEventListener("mousemove", onPointerMove);
-        document.addEventListener("pointermove", onPointerMove);
-        const borderRadiusPx = parseFloat(getComputedStyle(outer).borderRadius) || 0;
-        const resize = () => {
-            if (!container || !outer)
-                return;
-            const w = container.clientWidth;
-            const h = container.clientHeight;
-            wRef.current = w;
-            hRef.current = h;
-            const dpr = Math.min(window.devicePixelRatio || 1, 2);
-            const canvasW = w + glowExtent * 2;
-            const canvasH = h + glowExtent * 2;
-            renderer.setSize(canvasW, canvasH);
-            renderer.setPixelRatio(dpr);
-            canvas.style.top = `-${glowExtent}px`;
-            canvas.style.left = `-${glowExtent}px`;
-            canvas.style.width = `${canvasW}px`;
-            canvas.style.height = `${canvasH}px`;
-            camera.left = -canvasW / 2;
-            camera.right = canvasW / 2;
-            camera.top = canvasH / 2;
-            camera.bottom = -canvasH / 2;
-            camera.updateProjectionMatrix();
-            quad.scale.set(canvasW, canvasH, 1);
-            vResolutionRef.current.set(canvasW, canvasH).multiplyScalar(dpr);
-            vContentResolutionRef.current.set(w, h).multiplyScalar(dpr);
-            vOffsetRef.current.set(glowExtent, glowExtent).multiplyScalar(dpr);
-            material.uniforms.u_pixelRatio.value = dpr;
-            const shortestDim = Math.min(w, h);
-            const childEl = rounded ? null : container.firstElementChild;
-            const currentRadius = childEl
-                ? parseFloat(getComputedStyle(childEl).borderRadius) || borderRadiusPx
-                : parseFloat(getComputedStyle(outer).borderRadius) || borderRadiusPx;
-            const normalizedRoundness = Math.min((currentRadius / shortestDim) * 2, 1);
-            material.uniforms.u_roundness.value = normalizedRoundness;
-            const normalizedBorderWidth = borderWidth / shortestDim;
-            material.uniforms.u_borderSize.value = normalizedBorderWidth;
-        };
-        resize();
-        window.addEventListener("resize", resize);
-        const ro = new ResizeObserver(() => resize());
-        ro.observe(container);
-        const animate = (now) => {
-            const vMouse = vMouseRef.current;
-            const vMouseDamp = vMouseDampRef.current;
-            const w = wRef.current;
-            const h = hRef.current;
-            vMouseDamp.x += (vMouse.x - vMouseDamp.x) * 0.1;
-            vMouseDamp.y += (vMouse.y - vMouseDamp.y) * 0.1;
-            if (tiltIntensity > 0 && outer && w > 0 && h > 0) {
-                const isInside = vMouseDamp.x >= 0 &&
-                    vMouseDamp.x <= w &&
-                    vMouseDamp.y >= 0 &&
-                    vMouseDamp.y <= h;
-                let targetRotateX = 0;
-                let targetRotateY = 0;
-                if (isInside) {
-                    const offsetX = vMouseDamp.x / w - 0.5;
-                    const offsetY = vMouseDamp.y / h - 0.5;
-                    targetRotateY = offsetX * tiltIntensity;
-                    targetRotateX = -offsetY * tiltIntensity;
-                }
-                rotateXDampRef.current += (targetRotateX - rotateXDampRef.current) * 0.08;
-                rotateYDampRef.current += (targetRotateY - rotateYDampRef.current) * 0.08;
-                outer.style.transform = `perspective(1000px) rotateX(${rotateXDampRef.current}deg) rotateY(${rotateYDampRef.current}deg)`;
-            }
-            renderer.render(scene, camera);
-            animationFrameId = requestAnimationFrame(animate);
-        };
-        animationFrameId = requestAnimationFrame(animate);
-        return () => {
-            document.removeEventListener("mousemove", onPointerMove);
-            document.removeEventListener("pointermove", onPointerMove);
-            window.removeEventListener("resize", resize);
-            ro.disconnect();
-            cancelAnimationFrame(animationFrameId);
-            if (outer.contains(canvas)) {
-                outer.removeChild(canvas);
-            }
-            renderer.dispose();
-            geo.dispose();
-            material.dispose();
-            rendererRef.current = null;
-            sceneRef.current = null;
-            cameraRef.current = null;
-            materialRef.current = null;
-            quadRef.current = null;
-            geoRef.current = null;
-            canvasRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAnimating, variation]);
-    // Update shader uniforms when props change (without tearing down WebGL)
-    useEffect(() => {
-        const material = materialRef.current;
-        if (!material)
-            return;
-        material.uniforms.u_color.value.set(color);
-        material.uniforms.u_spotlightSize.value = spotlightSize;
-        material.uniforms.u_spotlightEdge.value = spotlightEdge;
-        material.uniforms.u_glowIntensity.value = glowIntensity;
-    }, [color, spotlightSize, spotlightEdge, glowIntensity]);
-    const containerStyle = {
-        ...style,
-        ...(rounded ? { borderRadius: rounded } : {}),
-    };
-    return (jsx("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: containerStyle, ...props, children: jsx("div", { ref: containerRef, className: "relative w-full h-full", style: { borderRadius: "inherit", zIndex: 20 }, children: children }) }));
-};
-
-export { SpotlightBorder };

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

@@ -1,61 +0,0 @@
-import React from "react";
-export type SpotlightBorderVariation = "rounded-rect" | "circle" | "circle-ring" | "triangle";
-export declare const variationMap: Record<SpotlightBorderVariation, number>;
-export interface SpotlightBorderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Content to wrap with the effect */
-    children: React.ReactNode;
-    /**
-     * Shape variation for the border
-     * @default 'rounded-rect'
-     */
-    variation?: SpotlightBorderVariation;
-    /**
-     * Border radius for the container (e.g., "1rem", "var(--button-radius)", "9999px")
-     * This controls both the container clip and the shader's corner roundness.
-     * @default undefined (inherits from className like rounded-lg)
-     */
-    rounded?: string;
-    /**
-     * Border/stroke width in pixels
-     * @default 2
-     */
-    borderWidth?: number;
-    /**
-     * Color of the border effect (hex color)
-     * @default '#ffffff'
-     */
-    color?: string;
-    /**
-     * Size of the mouse-following spotlight (0-1)
-     * @default 0.4
-     */
-    spotlightSize?: number;
-    /**
-     * Edge softness of the spotlight (higher = softer falloff)
-     * @default 0.5
-     */
-    spotlightEdge?: number;
-    /**
-     * Whether to animate the effect (respects prefers-reduced-motion)
-     * @default true
-     */
-    shouldAnimate?: boolean;
-    /**
-     * How far the glow can spread outside the container in pixels.
-     * This also solves clipping issues with child shadows.
-     * @default 20
-     */
-    glowExtent?: number;
-    /**
-     * Overall intensity of the glow halo (0-1)
-     * @default 0.6
-     */
-    glowIntensity?: number;
-    /**
-     * Intensity of the 3D tilt effect based on mouse position (0 = disabled)
-     * @default 10
-     */
-    tiltIntensity?: number;
-    /** Additional className for the container */
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export { SpotlightBorder } from "./SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder.types";

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { StickyScrollProps } from './StickyScroll.types';
-/**
- * StickyScroll
- *
- * Creates an Apple-style sticky scroll experience where one column stays
- * pinned while the other scrolls.  As each scrolling section enters the
- * viewport, the sticky content transitions to match.
- *
- * @example
- * ```tsx
- * <StickyScroll
- *   sections={[
- *     {
- *       id: 'design',
- *       title: 'Design System',
- *       description: 'Build consistent interfaces with a shared design language.',
- *       content: <img src="/design.png" alt="Design system" />,
- *     },
- *     {
- *       id: 'develop',
- *       title: 'Developer Experience',
- *       description: 'TypeScript-first components with full IntelliSense.',
- *       content: <img src="/develop.png" alt="Developer experience" />,
- *     },
- *   ]}
- * />
- * ```
- */
-export declare const StickyScroll: React.ForwardRefExoticComponent<StickyScrollProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/StickyScroll/StickyScroll.js

@@ -1,128 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-/* ------------------------------------------------------------------ */
-/*  Content transition variants                                         */
-/* ------------------------------------------------------------------ */
-const contentVariants = {
-    enter: { opacity: 0, y: 12 },
-    center: {
-        opacity: 1,
-        y: 0,
-        transition: { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] },
-    },
-    exit: {
-        opacity: 0,
-        y: -12,
-        transition: { duration: 0.25, ease: [0.25, 0.1, 0.25, 1] },
-    },
-};
-const reducedMotionVariants = {
-    enter: { opacity: 1, y: 0 },
-    center: { opacity: 1, y: 0 },
-    exit: { opacity: 1, y: 0 },
-};
-/* ------------------------------------------------------------------ */
-/*  Component                                                           */
-/* ------------------------------------------------------------------ */
-/**
- * StickyScroll
- *
- * Creates an Apple-style sticky scroll experience where one column stays
- * pinned while the other scrolls.  As each scrolling section enters the
- * viewport, the sticky content transitions to match.
- *
- * @example
- * ```tsx
- * <StickyScroll
- *   sections={[
- *     {
- *       id: 'design',
- *       title: 'Design System',
- *       description: 'Build consistent interfaces with a shared design language.',
- *       content: <img src="/design.png" alt="Design system" />,
- *     },
- *     {
- *       id: 'develop',
- *       title: 'Developer Experience',
- *       description: 'TypeScript-first components with full IntelliSense.',
- *       content: <img src="/develop.png" alt="Developer experience" />,
- *     },
- *   ]}
- * />
- * ```
- */
-const StickyScroll = React__default.forwardRef(({ sections, contentPosition = 'left', showProgress = true, className, ...props }, ref) => {
-    const shouldReduceMotion = useReducedMotion();
-    const [activeIndex, setActiveIndex] = useState(0);
-    const sectionRefs = useRef([]);
-    const containerRef = useRef(null);
-    // Set up Intersection Observer to track which section is in view.
-    const observerCallback = useCallback((entries) => {
-        for (const entry of entries) {
-            if (entry.isIntersecting) {
-                const index = sectionRefs.current.indexOf(entry.target);
-                if (index !== -1) {
-                    setActiveIndex(index);
-                }
-            }
-        }
-    }, []);
-    useEffect(() => {
-        const observer = new IntersectionObserver(observerCallback, {
-            // Trigger when a section crosses the vertical center of the viewport.
-            rootMargin: '-35% 0px -35% 0px',
-            threshold: 0,
-        });
-        const currentRefs = sectionRefs.current;
-        for (const sectionRef of currentRefs) {
-            if (sectionRef)
-                observer.observe(sectionRef);
-        }
-        return () => {
-            for (const sectionRef of currentRefs) {
-                if (sectionRef)
-                    observer.unobserve(sectionRef);
-            }
-        };
-    }, [observerCallback, sections.length]);
-    const activeSection = sections[activeIndex];
-    const variants = shouldReduceMotion
-        ? reducedMotionVariants
-        : contentVariants;
-    /* -------------------------------------------------------------- */
-    /*  Sub-renders                                                     */
-    /* -------------------------------------------------------------- */
-    const stickyContent = (jsxs("div", { className: "sticky top-[20vh] flex h-[60vh] items-center justify-center", children: [showProgress && (jsx("div", { className: cn('absolute top-1/2 -translate-y-1/2 flex flex-col gap-2', contentPosition === 'left' ? 'right-0 mr-4' : 'left-0 ml-4'), children: sections.map((section, index) => (jsx("button", { type: "button", "aria-label": `Go to ${section.title}`, onClick: () => {
-                        var _a;
-                        (_a = sectionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-                            behavior: shouldReduceMotion ? 'auto' : 'smooth',
-                            block: 'center',
-                        });
-                    }, className: cn('h-2 w-2 rounded-full transition-all duration-300', index === activeIndex
-                        ? 'scale-125 bg-[var(--color-primary)]'
-                        : 'bg-[var(--color-border)] hover:bg-[var(--color-text-muted)]') }, section.id))) })), jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { variants: variants, initial: "enter", animate: "center", exit: "exit", className: "flex h-full w-full items-center justify-center", children: activeSection.content }, activeSection.id) })] }));
-    const scrollingSections = (jsx("div", { className: "flex flex-col", children: sections.map((section, index) => (jsxs("div", { ref: (el) => {
-                sectionRefs.current[index] = el;
-            }, className: "flex min-h-[60vh] flex-col justify-center py-16 lg:py-24", children: [jsx("h3", { className: cn('text-2xl font-semibold transition-colors duration-300 lg:text-3xl', index === activeIndex
-                        ? 'text-[var(--color-text-primary)]'
-                        : 'text-[var(--color-text-muted)]'), children: section.title }), jsx("p", { className: cn('mt-4 max-w-lg text-lg leading-relaxed transition-colors duration-300 lg:text-xl', index === activeIndex
-                        ? 'text-[var(--color-text-secondary)]'
-                        : 'text-[var(--color-text-placeholder)]'), children: section.description })] }, section.id))) }));
-    /* -------------------------------------------------------------- */
-    /*  Layout                                                          */
-    /* -------------------------------------------------------------- */
-    const isContentLeft = contentPosition === 'left';
-    return (jsx("div", { ref: (node) => {
-            containerRef.current = node;
-            if (typeof ref === 'function')
-                ref(node);
-            else if (ref)
-                ref.current = node;
-        }, className: cn('relative grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16', className), ...props, children: isContentLeft ? (jsxs(Fragment, { children: [jsx("div", { className: "hidden lg:block", children: stickyContent }), scrollingSections] })) : (jsxs(Fragment, { children: [scrollingSections, jsx("div", { className: "hidden lg:block", children: stickyContent })] })) }));
-});
-StickyScroll.displayName = 'StickyScroll';
-
-export { StickyScroll };

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

@@ -1,19 +0,0 @@
-export interface StickyScrollSection {
-    /** Unique identifier for this section */
-    id: string;
-    /** Section title displayed in the scrolling column */
-    title: string;
-    /** Section description displayed in the scrolling column */
-    description: string;
-    /** The sticky content to show when this section is active */
-    content: React.ReactNode;
-}
-export interface StickyScrollProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Array of sections defining the scroll experience */
-    sections: StickyScrollSection[];
-    /** Which side the sticky content appears (default 'left') */
-    contentPosition?: 'left' | 'right';
-    /** Show progress dots (default true) */
-    showProgress?: boolean;
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export { StickyScroll } from './StickyScroll';
-export type { StickyScrollProps, StickyScrollSection, } from './StickyScroll.types';

package/dist/components/forms/CronInput/CronInput.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import { CronInputProps } from "./CronInput.types";
-export declare const CronInput: React.ForwardRefExoticComponent<CronInputProps & React.RefAttributes<HTMLDivElement>>;