apex-ui-kit 2.1.3 → 2.3.0

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,73 @@
+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) => {
+                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/ToastStack/ToastStack.jsx

@@ -0,0 +1,108 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+
+/*
+ * Toast Stack: notifications pile up as a neat stack and fan out on hover.
+ * Each one closes itself after `duration` (paused while hovered) or can be
+ * swiped away. Call ref.current.show({ title, description, type }) to add one.
+ */
+
+const ICONS = {
+    success: { icon: CheckCircle2, color: "#22c55e" },
+    error: { icon: XCircle, color: "#ef4444" },
+    warning: { icon: AlertTriangle, color: "#f59e0b" },
+    info: { icon: Info, color: "#3b82f6" },
+};
+
+const ToastStack = forwardRef(function ToastStack({ position = "bottom-right", duration = 4000, max = 4, theme = "dark", contained = false, className = "" }, ref) {
+    const [toasts, setToasts] = useState([]);
+    const [hovered, setHovered] = useState(false);
+    const timers = useRef(new Map());
+    const dark = theme !== "light";
+    const top = position.startsWith("top");
+
+    const dismiss = useCallback((id) => {
+        clearTimeout(timers.current.get(id));
+        timers.current.delete(id);
+        setToasts((list) => list.filter((t) => t.id !== id));
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        show: (toast) => {
+            const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+            setToasts((list) => [...list, { type: "info", ...toast, id }].slice(-max));
+            return id;
+        },
+        dismiss,
+    }));
+
+    // Auto-close, paused while the stack is hovered.
+    useEffect(() => {
+        if (hovered) {
+            timers.current.forEach((t) => clearTimeout(t));
+            timers.current.clear();
+            return undefined;
+        }
+        toasts.forEach((t) => {
+            if (!timers.current.has(t.id)) timers.current.set(t.id, setTimeout(() => dismiss(t.id), duration));
+        });
+        return undefined;
+    }, [toasts, hovered, duration, dismiss]);
+
+    const place = {
+        "bottom-right": "bottom-4 right-4 items-end",
+        "bottom-left": "bottom-4 left-4 items-start",
+        "top-right": "top-4 right-4 items-end",
+        "top-left": "top-4 left-4 items-start",
+        "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+        "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+    }[position];
+
+    return (
+        <ol
+            aria-live="polite"
+            onPointerEnter={() => setHovered(true)}
+            onPointerLeave={() => setHovered(false)}
+            className={`${contained ? "absolute" : "fixed"} z-[200] flex w-[min(22rem,calc(100%-2rem))] flex-col ${place} ${className}`}
+        >
+            <AnimatePresence initial={false}>
+                {toasts.map((t, i) => {
+                    const fromEnd = toasts.length - 1 - i;
+                    const { icon: Icon, color } = ICONS[t.type] ?? ICONS.info;
+                    // Collapsed: cards peek out behind the newest. Hovered: they fan out into a list.
+                    const offset = hovered ? fromEnd * 76 : fromEnd * 10;
+                    return (
+                        <motion.li
+                            key={t.id}
+                            layout
+                            drag="x"
+                            dragConstraints={{ left: 0, right: 0 }}
+                            dragElastic={0.6}
+                            onDragEnd={(_, info) => Math.abs(info.offset.x) > 90 && dismiss(t.id)}
+                            initial={{ opacity: 0, y: top ? -30 : 30, scale: 0.94 }}
+                            animate={{ opacity: fromEnd > 2 && !hovered ? 0 : 1, y: top ? offset : -offset, scale: hovered ? 1 : 1 - fromEnd * 0.05 }}
+                            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.18 } }}
+                            transition={{ type: "spring", stiffness: 380, damping: 32 }}
+                            className={`absolute w-full cursor-grab touch-pan-y list-none active:cursor-grabbing ${top ? "top-0" : "bottom-0"}`}
+                            style={{ zIndex: i }}
+                        >
+                            <div className={`flex items-start gap-3 rounded-2xl border p-3.5 pr-9 shadow-[0_18px_40px_-18px_rgba(0,0,0,0.5)] backdrop-blur ${dark ? "border-white/10 bg-neutral-900/95 text-white" : "border-black/10 bg-white/95 text-neutral-900"}`}>
+                                <Icon className="mt-0.5 h-5 w-5 shrink-0" style={{ color }} />
+                                <div className="min-w-0">
+                                    <p className="text-[0.88rem] font-semibold">{t.title}</p>
+                                    {t.description && <p className={`mt-0.5 text-[0.8rem] ${dark ? "text-white/60" : "text-neutral-500"}`}>{t.description}</p>}
+                                </div>
+                                <button type="button" aria-label="Dismiss" onClick={() => dismiss(t.id)} className={`absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full ${dark ? "text-white/50 hover:bg-white/10 hover:text-white" : "text-neutral-400 hover:bg-black/5 hover:text-neutral-900"}`}>
+                                    <X className="h-3.5 w-3.5" />
+                                </button>
+                            </div>
+                        </motion.li>
+                    );
+                })}
+            </AnimatePresence>
+        </ol>
+    );
+});
+
+export default ToastStack;

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

@@ -64,8 +64,7 @@ const ToolTip = ({ items }) => {
                             <div className={`pointer-events-none absolute bottom-full mb-4 z-50 ${box}`}>
                                 {/* The card and its arrow animate together, so the arrow follows every swing. */}
                                 <div ref={(el) => (tooltipRefs.current[idx] = el)} className="relative origin-bottom">
-                                    <div className="relative overflow-hidden rounded-xl border border-white/10 bg-zinc-950 px-3.5 py-2.5 shadow-[0_16px_40px_-12px_rgba(0,0,0,0.7)]">
-                                        <span className="absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-lime-400 to-cyan-400" />
+                                    <div className="relative overflow-hidden rounded-xl border border-white/10 bg-zinc-950/95 px-3.5 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_16px_40px_-12px_rgba(0,0,0,0.7)] backdrop-blur">
                                         <span className="flex items-center gap-1.5 whitespace-nowrap text-sm font-semibold text-white">
                                             <span className="h-1.5 w-1.5 rounded-full bg-lime-400 shadow-[0_0_8px_#a3e635]" />
                                             {item.name}
@@ -80,7 +79,10 @@ const ToolTip = ({ items }) => {
                                 </div>
                             </div>
                         )}
-                        <div ref={(el) => (avatarRefs.current[idx] = el)} className="rounded-full bg-gradient-to-br from-lime-400 via-emerald-400 to-cyan-400 p-[2px] shadow-lg shadow-black/30">
+                        <div
+                            ref={(el) => (avatarRefs.current[idx] = el)}
+                            className={`rounded-full p-[2px] shadow-lg shadow-black/30 transition-[background-color,box-shadow] duration-300 ${hoveredIndex === idx ? "bg-lime-400 shadow-[0_0_20px_-4px_#a3e635]" : "bg-zinc-700"}`}
+                        >
                             <img
                                 src={item.image}
                                 alt={item.name}

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;