apex-ui-kit 2.2.0 → 2.3.1

package/dist/ApexUI-Kit/templates/Stepper/Stepper.jsx

@@ -0,0 +1,142 @@
+import React, { useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check } from "lucide-react";
+
+/*
+ * Stepper: a multi-step flow. The indicators fill and tick as you move on,
+ * the connector lines fill in between, and each step's content slides in
+ * from the side you are heading while the panel height follows smoothly.
+ */
+
+const DEFAULT_STEPS = [
+    { title: "Account", content: <p>Welcome! Pick a username to get started, you can change it later.</p> },
+    { title: "Profile", content: <p>Add a photo and a short bio so people know who you are.</p> },
+    { title: "Theme", content: <p>Choose light, dark or follow your system. Your choice syncs everywhere.</p> },
+    { title: "Done", content: <p>All set. Press Complete to finish onboarding.</p> },
+];
+
+const variants = {
+    enter: (dir) => ({ x: dir > 0 ? "40%" : "-40%", opacity: 0 }),
+    center: { x: 0, opacity: 1 },
+    exit: (dir) => ({ x: dir > 0 ? "-40%" : "40%", opacity: 0 }),
+};
+
+function StepBody({ step, total, title, content, accentColor, dark }) {
+    return (
+        <>
+            <p className="text-[0.72rem] font-semibold uppercase tracking-[0.18em]" style={{ color: accentColor }}>
+                Step {step + 1} of {total}
+            </p>
+            <h3 className="mt-1 text-xl font-semibold">{title}</h3>
+            <div className={`mt-2 text-[0.92rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}>{content}</div>
+        </>
+    );
+}
+
+const Stepper = ({ steps = DEFAULT_STEPS, initialStep = 0, onStepChange, onComplete, accentColor = "#a3e635", theme = "dark", className = "" }) => {
+    const id = useId();
+    const [step, setStep] = useState(initialStep);
+    const [dir, setDir] = useState(1);
+    const [done, setDone] = useState(false);
+    const dark = theme !== "light";
+    const last = step === steps.length - 1;
+
+    const go = (to) => {
+        if (to < 0 || to >= steps.length) return;
+        setDir(to > step ? 1 : -1);
+        setStep(to);
+        onStepChange?.(to);
+    };
+
+    return (
+        <div className={`w-full max-w-md rounded-[1.6rem] border p-6 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"} ${className}`}>
+            <div className="flex items-center">
+                {steps.map((s, i) => {
+                    const complete = done || i < step;
+                    const current = !done && i === step;
+                    return (
+                        <React.Fragment key={i}>
+                            <button type="button" onClick={() => !done && go(i)} aria-label={`Step ${i + 1}: ${s.title}`} aria-current={current ? "step" : undefined} className="relative grid h-9 w-9 shrink-0 place-items-center rounded-full text-sm font-semibold">
+                                <motion.span
+                                    className="absolute inset-0 rounded-full"
+                                    initial={false}
+                                    animate={{ backgroundColor: complete || current ? accentColor : dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)", scale: current ? 1.08 : 1 }}
+                                    transition={{ duration: 0.3 }}
+                                />
+                                {current && <motion.span layoutId={`${id}-ring`} className="absolute -inset-1 rounded-full border-2" style={{ borderColor: `color-mix(in srgb, ${accentColor} 45%, transparent)` }} />}
+                                <span className={`relative ${complete || current ? "text-black" : "opacity-60"}`}>
+                                    {complete ? (
+                                        <motion.span initial={{ scale: 0, rotate: -45 }} animate={{ scale: 1, rotate: 0 }} className="block">
+                                            <Check className="h-4 w-4" strokeWidth={3} />
+                                        </motion.span>
+                                    ) : (
+                                        i + 1
+                                    )}
+                                </span>
+                            </button>
+                            {i < steps.length - 1 && (
+                                <div className={`mx-2 h-1 flex-1 overflow-hidden rounded-full ${dark ? "bg-white/[0.08]" : "bg-black/[0.06]"}`}>
+                                    <motion.div className="h-full rounded-full" style={{ background: accentColor }} initial={false} animate={{ width: done || i < step ? "100%" : "0%" }} transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }} />
+                                </div>
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+
+            <div className="relative mt-6 grid overflow-hidden">
+                {/* Invisible copies of every step reserve the tallest height, so the
+                    card and its buttons never move up and down between steps. */}
+                {steps.map((s, i) => (
+                    <div key={i} aria-hidden="true" className="invisible col-start-1 row-start-1 pb-1">
+                        <StepBody step={i} total={steps.length} title={s.title} content={s.content} accentColor={accentColor} dark={dark} />
+                    </div>
+                ))}
+                <AnimatePresence mode="popLayout" initial={false} custom={dir}>
+                    <motion.div key={done ? "done" : step} custom={dir} variants={variants} initial="enter" animate="center" exit="exit" transition={{ type: "spring", stiffness: 300, damping: 32 }} className="col-start-1 row-start-1 pb-1">
+                        {done ? (
+                            <div className="py-4 text-center">
+                                <p className="text-lg font-semibold">You are all set 🎉</p>
+                                <p className={`mt-1 text-sm ${dark ? "text-white/55" : "text-neutral-500"}`}>Every step is complete.</p>
+                            </div>
+                        ) : (
+                            <StepBody step={step} total={steps.length} title={steps[step].title} content={steps[step].content} accentColor={accentColor} dark={dark} />
+                        )}
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+
+            <div className="mt-6 flex items-center justify-between">
+                {done ? (
+                    <button type="button" onClick={() => {
+                            setDone(false);
+                            go(0);
+                        }} className={`rounded-full px-4 py-2 text-sm font-medium ${dark ? "bg-white/[0.06] hover:bg-white/10" : "bg-black/[0.05] hover:bg-black/[0.08]"}`}>
+                        Start over
+                    </button>
+                ) : (
+                    <>
+                        <button type="button" onClick={() => go(step - 1)} disabled={step === 0} className={`rounded-full px-4 py-2 text-sm font-medium transition disabled:pointer-events-none disabled:opacity-0 ${dark ? "text-white/70 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}>
+                            Back
+                        </button>
+                        <motion.button
+                            whileTap={{ scale: 0.95 }}
+                            type="button"
+                            onClick={() => {
+                                if (!last) return go(step + 1);
+                                setDone(true);
+                                onComplete?.();
+                            }}
+                            className="rounded-full px-5 py-2 text-sm font-semibold text-black"
+                            style={{ background: accentColor }}
+                        >
+                            {last ? "Complete" : "Continue"}
+                        </motion.button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Stepper;

package/dist/ApexUI-Kit/templates/SwipeCards/SwipeCards.jsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { AnimatePresence, motion, useMotionValue, useTransform } from "framer-motion";
+import { Heart, RotateCcw, X } from "lucide-react";
+
+/*
+ * Swipe Cards: a deck you swipe left or right. The top card tilts with the
+ * drag and shows a LIKE / NOPE stamp; let go past the threshold and it flies
+ * off, or use the buttons and arrow keys. The deck refills when it runs out.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const DEFAULT_CARDS = [
+    { image: `${IK}/spiderman.png?tr=f-auto,q-80,w-600`, title: "Spider-Man", subtitle: "Queens · 2.3 km away" },
+    { image: `${IK}/hulk.png?tr=f-auto,q-80,w-600`, title: "Hulk", subtitle: "New York · 5 km away" },
+    { image: `${IK}/black-panther.png?tr=f-auto,q-80,w-600`, title: "Black Panther", subtitle: "Wakanda · 8,412 km away" },
+    { image: `${IK}/doctorStrange.png?tr=f-auto,q-80,w-600`, title: "Doctor Strange", subtitle: "Sanctum · 3 km away" },
+    { image: `${IK}/captainamerica.png?tr=f-auto,q-80,w-600`, title: "Captain America", subtitle: "Brooklyn · 1 km away" },
+];
+
+function TopCard({ card, onSwipe, threshold, likeColor, nopeColor }) {
+    const x = useMotionValue(0);
+    const rotate = useTransform(x, [-240, 240], [-18, 18]);
+    const likeOpacity = useTransform(x, [20, threshold], [0, 1]);
+    const nopeOpacity = useTransform(x, [-threshold, -20], [1, 0]);
+
+    return (
+        <motion.div
+            className="absolute inset-0 z-10 cursor-grab touch-none overflow-hidden rounded-3xl bg-neutral-900 shadow-[0_30px_60px_-24px_rgba(0,0,0,0.6)] active:cursor-grabbing"
+            style={{ x, rotate }}
+            drag="x"
+            dragSnapToOrigin
+            dragElastic={0.9}
+            onDragEnd={(_, info) => {
+                if (info.offset.x > threshold || info.velocity.x > 700) onSwipe("right");
+                else if (info.offset.x < -threshold || info.velocity.x < -700) onSwipe("left");
+            }}
+            exit={(dir) => ({ x: dir === "right" ? 520 : -520, rotate: dir === "right" ? 26 : -26, opacity: 0, transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] } })}
+        >
+            <img src={card.image} alt="" draggable="false" className="pointer-events-none h-full w-full object-cover" />
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent p-5 pt-16 text-white">
+                <p className="text-xl font-bold">{card.title}</p>
+                {card.subtitle && <p className="text-sm text-white/70">{card.subtitle}</p>}
+            </div>
+            <motion.span className="pointer-events-none absolute left-5 top-6 -rotate-12 rounded-lg border-[3px] px-3 py-1 text-2xl font-black tracking-widest" style={{ opacity: likeOpacity, color: likeColor, borderColor: likeColor }}>
+                LIKE
+            </motion.span>
+            <motion.span className="pointer-events-none absolute right-5 top-6 rotate-12 rounded-lg border-[3px] px-3 py-1 text-2xl font-black tracking-widest" style={{ opacity: nopeOpacity, color: nopeColor, borderColor: nopeColor }}>
+                NOPE
+            </motion.span>
+        </motion.div>
+    );
+}
+
+const SwipeCards = ({ cards = DEFAULT_CARDS, threshold = 110, likeColor = "#a3e635", nopeColor = "#f43f5e", onSwipe, className = "" }) => {
+    const [index, setIndex] = useState(0);
+    const [dir, setDir] = useState("right");
+    const [history, setHistory] = useState([]);
+    const visible = [0, 1, 2].map((o) => cards[(index + o) % cards.length]);
+
+    const swipe = (direction) => {
+        const card = cards[index % cards.length];
+        setDir(direction);
+        setHistory((h) => [...h, { card, direction }]);
+        onSwipe?.(card, direction);
+        setIndex((i) => i + 1);
+    };
+    const undo = () => {
+        if (!history.length) return;
+        setDir("left");
+        setHistory((h) => h.slice(0, -1));
+        setIndex((i) => Math.max(0, i - 1));
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") swipe("right");
+                if (e.key === "ArrowLeft") swipe("left");
+            }}
+            aria-label="Card deck: use the arrow keys or the buttons to swipe"
+        >
+            <div className="relative aspect-[3/4] w-[min(18rem,78vw)]">
+                {/* Cards waiting underneath, slightly smaller and lower. */}
+                {visible
+                    .slice(1)
+                    .reverse()
+                    .map((card, i, arr) => {
+                        const depth = arr.length - i;
+                        return (
+                            <motion.div
+                                key={`${index + depth}-${card.title}`}
+                                className="absolute inset-0 overflow-hidden rounded-3xl bg-neutral-900"
+                                initial={false}
+                                animate={{ scale: 1 - depth * 0.05, y: depth * 14, opacity: 1 - depth * 0.25 }}
+                                transition={{ type: "spring", stiffness: 300, damping: 28 }}
+                            >
+                                <img src={card.image} alt="" draggable="false" className="h-full w-full object-cover" />
+                            </motion.div>
+                        );
+                    })}
+                <AnimatePresence custom={dir} initial={false}>
+                    <TopCard key={`${index}-${visible[0].title}`} card={visible[0]} onSwipe={swipe} threshold={threshold} likeColor={likeColor} nopeColor={nopeColor} />
+                </AnimatePresence>
+            </div>
+
+            <div className="mt-8 flex items-center gap-4">
+                <motion.button whileTap={{ scale: 0.88 }} whileHover={{ scale: 1.06 }} type="button" aria-label="Nope" onClick={() => swipe("left")} className="grid h-14 w-14 place-items-center rounded-full border-2 bg-black/5 shadow-lg" style={{ borderColor: nopeColor, color: nopeColor }}>
+                    <X className="h-6 w-6" strokeWidth={3} />
+                </motion.button>
+                <motion.button whileTap={{ scale: 0.88 }} whileHover={{ scale: 1.06 }} type="button" aria-label="Undo" onClick={undo} disabled={!history.length} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 opacity-70 disabled:opacity-30">
+                    <RotateCcw className="h-4 w-4" />
+                </motion.button>
+                <motion.button whileTap={{ scale: 0.88 }} whileHover={{ scale: 1.06 }} type="button" aria-label="Like" onClick={() => swipe("right")} className="grid h-14 w-14 place-items-center rounded-full border-2 bg-black/5 shadow-lg" style={{ borderColor: likeColor, color: likeColor }}>
+                    <Heart className="h-6 w-6" fill="currentColor" />
+                </motion.button>
+            </div>
+        </div>
+    );
+};
+
+export default SwipeCards;

package/dist/ApexUI-Kit/templates/TextRing3D/TextRing3D.jsx

@@ -0,0 +1,75 @@
+import React, { useRef } from "react";
+import { useAnimationFrame, useReducedMotion } from "framer-motion";
+
+/*
+ * 3D Text Ring: letters stand on a ring in real 3D space and the ring
+ * turns, so text sweeps around the back and comes forward again. Letters
+ * fade and soften as they pass behind. Drag to spin it yourself.
+ */
+
+const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, tilt = -14, fontSize = 2, color = "currentColor", accentColor = "#a3e635", className = "" }) => {
+    const reduced = useReducedMotion();
+    const ring = useRef(null);
+    const letters = useRef([]);
+    const angle = useRef(0);
+    const vel = useRef(0);
+    const drag = useRef(null);
+    const chars = Array.from(text);
+    const step = 360 / chars.length;
+
+    useAnimationFrame((_, delta) => {
+        const dt = Math.min(0.05, delta / 1000);
+        if (!drag.current) {
+            vel.current *= 0.95;
+            angle.current += (reduced ? 0 : speed) * dt + vel.current * dt;
+        }
+        if (ring.current) ring.current.style.transform = `rotateX(${tilt}deg) rotateY(${-angle.current}deg)`;
+        letters.current.forEach((el, i) => {
+            if (!el) return;
+            // How much this letter faces the viewer (1 front, -1 back).
+            const facing = Math.cos(((i * step - angle.current) * Math.PI) / 180);
+            el.style.opacity = String(0.18 + 0.82 * ((facing + 1) / 2));
+            el.style.color = facing > 0.9 ? accentColor : "";
+        });
+    });
+
+    return (
+        <div
+            className={`grid cursor-grab touch-none select-none place-items-center active:cursor-grabbing [perspective:900px] ${className}`}
+            style={{ width: `${radius * 2.4}rem`, maxWidth: "100%", height: `${fontSize * 3.2 + 4}rem`, color }}
+            onPointerDown={(e) => {
+                // Block text selection / native drag, which cancel the drag midway.
+                e.preventDefault();
+                e.currentTarget.setPointerCapture(e.pointerId);
+                drag.current = { x: e.clientX, a: angle.current, t: performance.now() };
+            }}
+            onPointerMove={(e) => {
+                const d = drag.current;
+                if (!d) return;
+                const now = performance.now();
+                const next = d.a - (e.clientX - d.x) * 0.4;
+                vel.current = ((next - angle.current) / Math.max(1, now - d.t)) * 1000;
+                d.t = now;
+                angle.current = next;
+            }}
+            onPointerUp={() => (drag.current = null)}
+            aria-label={text}
+            role="img"
+        >
+            <div ref={ring} className="relative h-0 w-0 [transform-style:preserve-3d]">
+                {chars.map((c, i) => (
+                    <span
+                        key={i}
+                        ref={(el) => (letters.current[i] = el)}
+                        className="absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 font-black leading-none transition-colors duration-300"
+                        style={{ fontSize: `${fontSize}rem`, transform: `rotateY(${i * step}deg) translateZ(${radius}rem)` }}
+                    >
+                        {c === " " ? " " : c}
+                    </span>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default TextRing3D;

package/dist/ApexUI-Kit/templates/TrueFocus/TrueFocus.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+/*
+ * True Focus: one word of a sentence is sharp while the rest are blurred,
+ * and a set of corner brackets glides from word to word. Cycles on its
+ * own, or follows the pointer in manual mode.
+ */
+
+const TrueFocus = ({ sentence = "Design Build Ship Repeat", manual = false, blur = 5, interval = 1600, borderColor = "#a3e635", className = "" }) => {
+    const words = sentence.split(" ");
+    const [active, setActive] = useState(0);
+    const [box, setBox] = useState(null);
+    const wrap = useRef(null);
+    const refs = useRef([]);
+
+    useEffect(() => {
+        if (manual) return undefined;
+        const id = setInterval(() => setActive((i) => (i + 1) % words.length), interval);
+        return () => clearInterval(id);
+    }, [manual, interval, words.length]);
+
+    useLayoutEffect(() => {
+        const measure = () => {
+            const el = refs.current[active];
+            const parent = wrap.current;
+            if (!el || !parent) return;
+            const a = el.getBoundingClientRect();
+            const p = parent.getBoundingClientRect();
+            setBox({ x: a.left - p.left, y: a.top - p.top, w: a.width, h: a.height });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(wrap.current);
+        return () => ro.disconnect();
+    }, [active, sentence]);
+
+    const corner = "absolute h-[0.42em] w-[0.42em] border-[0.09em]";
+    return (
+        <div ref={wrap} className={`relative inline-flex flex-wrap justify-center gap-x-[0.45em] gap-y-2 font-black ${className}`}>
+            {words.map((w, i) => (
+                <span
+                    key={i}
+                    ref={(el) => (refs.current[i] = el)}
+                    onPointerEnter={() => manual && setActive(i)}
+                    className="relative px-[0.12em] transition-[filter,opacity] duration-500"
+                    style={{ filter: i === active ? "blur(0px)" : `blur(${blur}px)`, opacity: i === active ? 1 : 0.55 }}
+                >
+                    {w}
+                </span>
+            ))}
+            {box && (
+                <motion.div aria-hidden="true" className="pointer-events-none absolute left-0 top-0" initial={false} animate={{ x: box.x - 6, y: box.y - 4, width: box.w + 12, height: box.h + 8 }} transition={{ type: "spring", stiffness: 260, damping: 28 }}>
+                    <span className={`${corner} -left-0 -top-0 rounded-tl-[0.12em] border-b-0 border-r-0`} style={{ borderColor, filter: `drop-shadow(0 0 6px ${borderColor})` }} />
+                    <span className={`${corner} -right-0 -top-0 rounded-tr-[0.12em] border-b-0 border-l-0`} style={{ borderColor, filter: `drop-shadow(0 0 6px ${borderColor})` }} />
+                    <span className={`${corner} -bottom-0 -left-0 rounded-bl-[0.12em] border-r-0 border-t-0`} style={{ borderColor, filter: `drop-shadow(0 0 6px ${borderColor})` }} />
+                    <span className={`${corner} -bottom-0 -right-0 rounded-br-[0.12em] border-l-0 border-t-0`} style={{ borderColor, filter: `drop-shadow(0 0 6px ${borderColor})` }} />
+                </motion.div>
+            )}
+        </div>
+    );
+};
+
+export default TrueFocus;

package/dist/ApexUI-Kit/templates/TypewriterText/TypewriterText.jsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+
+/*
+ * Typewriter Text: types a phrase, pauses, deletes it and moves on to the
+ * next, with a blinking caret. Put static text before or after with
+ * `prefix` / `suffix`; only the rotating words are typed.
+ */
+
+const TypewriterText = ({
+    words = ["beautiful interfaces.", "smooth animations.", "accessible components.", "faster launches."],
+    prefix = "We build ",
+    suffix = "",
+    typeSpeed = 70,
+    deleteSpeed = 40,
+    pause = 1600,
+    loop = true,
+    caret = "bar",
+    accentColor = "#a3e635",
+    as: Tag = "p",
+    className = "",
+}) => {
+    const reduced = useReducedMotion();
+    const [index, setIndex] = useState(0);
+    const [text, setText] = useState("");
+    const [deleting, setDeleting] = useState(false);
+    const word = words[index % words.length] ?? "";
+
+    useEffect(() => {
+        if (reduced) return undefined;
+        let delay = deleting ? deleteSpeed : typeSpeed + Math.random() * 40;
+        if (!deleting && text === word) {
+            if (!loop && index === words.length - 1) return undefined;
+            delay = pause;
+        } else if (deleting && text === "") delay = 300;
+
+        const id = setTimeout(() => {
+            if (!deleting && text === word) setDeleting(true);
+            else if (deleting && text === "") {
+                setDeleting(false);
+                setIndex((i) => (i + 1) % words.length);
+            } else setText(word.slice(0, text.length + (deleting ? -1 : 1)));
+        }, delay);
+        return () => clearTimeout(id);
+    }, [text, deleting, word, index, words.length, typeSpeed, deleteSpeed, pause, loop, reduced]);
+
+    const shown = reduced ? word : text;
+    const caretEl =
+        caret === "none" ? null : (
+            <span
+                aria-hidden="true"
+                className={`ml-[0.06em] inline-block animate-[apex-caret_1s_steps(1)_infinite] align-baseline ${caret === "block" ? "h-[1em] w-[0.55em] translate-y-[0.12em]" : caret === "underscore" ? "h-[0.12em] w-[0.6em]" : "h-[1em] w-[0.08em] translate-y-[0.12em]"}`}
+                style={{ background: accentColor }}
+            />
+        );
+
+    return (
+        <Tag className={className} aria-label={`${prefix}${words.join(", ")}${suffix}`}>
+            <style>{"@keyframes apex-caret{0%,100%{opacity:1}50%{opacity:0}}"}</style>
+            <span aria-hidden="true">
+                {prefix}
+                <span style={{ color: accentColor }}>{shown}</span>
+                {caretEl}
+                {suffix}
+            </span>
+        </Tag>
+    );
+};
+
+export default TypewriterText;

package/dist/cli/index.js

@@ -71,6 +71,49 @@ const componentMap = {
     "toast-stack": "ToastStack",
     "blur-reveal-text": "BlurRevealText",
     "flip-clock": "FlipClock",
+    "cursor-trail": "CursorTrail",
+    "typewriter-text": "TypewriterText",
+    "image-compare": "ImageCompare",
+    "pricing-cards": "PricingCards",
+    "swipe-cards": "SwipeCards",
+    "animated-switch": "AnimatedSwitch",
+    "animated-switches": "AnimatedSwitch",
+    "aurora-background": "AuroraBackground",
+    "holo-card": "HoloCard",
+    "cube-gallery": "CubeGallery",
+    "flip-book": "FlipBook",
+    "extruded-text": "ExtrudedText",
+    "iso-stack": "IsoStack",
+    "floating-navbar": "FloatingNavbar",
+    "ai-chat": "AiChat",
+    "ai-prompt-box": "AiPromptBox",
+    "ai-thinking": "AiThinking",
+    "ai-voice-orb": "AiVoiceOrb",
+    "ai-response": "AiResponse",
+    "ai-model-prompt": "AiModelPrompt",
+    "hold-to-confirm": "HoldToConfirm",
+    "ai-voice-wave": "AiVoiceWave",
+    "ai-voice-bars": "AiVoiceBars",
+    "ai-voice-ring": "AiVoiceRing",
+    "ai-voice-blob": "AiVoiceBlob",
+    "shiny-text": "ShinyText",
+    "glitch-text": "GlitchText",
+    "rotating-text": "RotatingText",
+    "circular-text": "CircularText",
+    "proximity-text": "ProximityText",
+    "true-focus": "TrueFocus",
+    "text-ring-3d": "TextRing3D",
+    "star-border": "StarBorder",
+    "click-spark": "ClickSpark",
+    "elastic-slider": "ElasticSlider",
+    "stepper": "Stepper",
+    "coverflow-3d": "Coverflow3D",
+    "magnet-lines": "MagnetLines",
+    "pixel-transition": "PixelTransition",
+    "folder": "Folder",
+    "bounce-cards": "BounceCards",
+    "card-swap-3d": "CardSwap3D",
+    "gooey-nav": "GooeyNav",
     "water-drop-reveal": "MaskView",
 };
 // Packages only some components need, installed on top of the shared ones.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [

package/dist/ApexUI-Kit/templates/Carousel/DragCarousel.jsx

@@ -1,105 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-
-// To use GSAP in this environment, we'll import it from a CDN.
-// In a local project: `npm install gsap`
-import { gsap } from 'gsap';
-import { Draggable } from 'gsap/Draggable';
-
-// GSAP Draggable plugin ko register karna zaroori hai
-gsap.registerPlugin(Draggable);
-
-// --- GSAP Drag Carousel Component ---
-const DragCarousel = ({ images }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const carouselRef = useRef(null);
-    const cardsRef = useRef([]);
-    const dragProxyRef = useRef(null);
-    useEffect(() => {
-        const cards = cardsRef.current;
-        gsap.to(cards, {
-            duration: 0.4,
-            ease: 'power4.Out',
-            stagger: 0.05,
-            // Har card ke liye naya transform calculate karta hai
-            transform: (i) => {
-                let positionOffset = i - activeIndex;
-                if (positionOffset > images.length / 2) {
-                    positionOffset -= images.length;
-                } else if (positionOffset < -images.length / 2) {
-                    positionOffset += images.length;
-                }
-
-                const translateX = positionOffset * 50;
-                const translateZ = -Math.abs(positionOffset) * 250;
-                const scale = 1 - Math.abs(positionOffset) * 0.15;
-
-                return `translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`;
-            },
-            zIndex: (i) => {
-                let positionOffset = i - activeIndex;
-                if (positionOffset > images.length / 2) positionOffset -= images.length;
-                if (positionOffset < -images.length / 2) positionOffset += images.length;
-                return images.length - Math.abs(positionOffset);
-            },
-            opacity: (i) => {
-                let positionOffset = i - activeIndex;
-                if (positionOffset > images.length / 2) positionOffset -= images.length;
-                if (positionOffset < -images.length / 2) positionOffset += images.length;
-                return Math.abs(positionOffset) > 2 ? 0 : 1;
-            }
-        });
-    }, [activeIndex, images.length]);
-
-    // GSAP Draggable ko setup karta hai
-    useEffect(() => {
-        // BUG FIX: Draggable ab proxy element par lagaya gaya hai
-        const draggableInstance = Draggable.create(dragProxyRef.current, {
-            type: "x",
-            trigger: carouselRef.current,
-            inertia: true,
-            cursor: 'grab',
-            activeCursor: 'grabbing',
-            onDragEnd: function () {
-                gsap.to(this.target, { x: 0, duration: 0.3 });
-                if (this.getDirection("start") === "left") {
-                    setActiveIndex(prev => (prev + 1) % images.length);
-                } else if (this.getDirection("start") === "right") {
-                    setActiveIndex(prev => (prev - 1 + images.length) % images.length);
-                }
-            }
-        });
-
-        // Cleanup function
-        return () => {
-            if (draggableInstance && draggableInstance[0]) {
-                draggableInstance[0].kill();
-            }
-        };
-    }, [images.length]);
-
-    return (
-        <div
-            ref={carouselRef}
-            className="relative w-full h-[490px] lg:h-[590px] cursor-grab"
-            style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
-        >
-            <div ref={dragProxyRef} className="absolute inset-0 z-20"></div>
-
-            {images.map((src, index) => (
-                <div
-                    key={index}
-                    ref={el => cardsRef.current[index] = el}
-                    className="card-item absolute h-[480px] w-[300px] lg:h-[550px] lg:w-[350px] rounded-xl overflow-hidden shadow-2xl top-[25px] -left-4 md:left-36 lg:left-70"
-                >
-                    <img
-                        src={src}
-                        alt={`carousel-item-${index}`}
-                        className="w-full h-full object-cover pointer-events-none"
-                    />
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export default DragCarousel;