apex-ui-kit 2.2.0 → 2.3.1

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

@@ -0,0 +1,168 @@
+import React, { useEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Cube Gallery: up to six images on a solid 3D cube seen from a corner, so
+ * three faces show at once. It spins slowly on its own; drag in any
+ * direction to throw it around, and it eases back to a corner view. Faces
+ * are shaded by how much they turn away from you, which sells the depth.
+ * Arrows / arrow keys turn it a quarter at a time.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-600`;
+const DEFAULT_FACES = [
+    { image: img("spiderman"), title: "Spider-Man" },
+    { image: img("black-panther"), title: "Black Panther" },
+    { image: img("hulk"), title: "Hulk" },
+    { image: img("thanos"), title: "Thanos" },
+    { image: img("captainamerica"), title: "Captain America" },
+    { image: img("doctorStrange"), title: "Doctor Strange" },
+];
+
+// Side faces (around Y) then top and bottom.
+const SIDES = [
+    { yaw: 0, pitch: 0 },
+    { yaw: 90, pitch: 0 },
+    { yaw: 180, pitch: 0 },
+    { yaw: 270, pitch: 0 },
+    { yaw: 0, pitch: 90 },
+    { yaw: 0, pitch: -90 },
+];
+const RAD = Math.PI / 180;
+
+const CubeGallery = ({ faces = DEFAULT_FACES, size = 13, autoRotate = true, speed = 12, tilt = -24, accentColor = "#a3e635", className = "" }) => {
+    const reduced = useReducedMotion();
+    const rotY = useMotionValue(-35);
+    const rotX = useMotionValue(tilt);
+    const shades = useRef([]);
+    const drag = useRef(null);
+    const [hover, setHover] = useState(false);
+    const [index, setIndex] = useState(0);
+    const half = `${size / 2}rem`;
+
+    // Darken each face by how far it turns from the viewer.
+    const shade = () => {
+        const y = rotY.get();
+        const x = rotX.get();
+        SIDES.forEach((s, i) => {
+            const el = shades.current[i];
+            if (!el) return;
+            let facing;
+            if (s.pitch === 0) facing = Math.cos((s.yaw + y) * RAD) * Math.cos(x * RAD);
+            else facing = Math.sin((s.pitch > 0 ? -x : x) * RAD);
+            el.style.opacity = String(0.08 + (1 - Math.max(0, facing)) * 0.62);
+        });
+    };
+    useMotionValueEvent(rotY, "change", shade);
+    useMotionValueEvent(rotX, "change", shade);
+    useEffect(shade);
+
+    useEffect(() => {
+        rotX.set(tilt);
+    }, [tilt, rotX]);
+
+    // Slow continuous spin while idle.
+    useEffect(() => {
+        if (!autoRotate || hover || reduced) return undefined;
+        let raf = 0;
+        let last = performance.now();
+        const tick = (now) => {
+            if (!drag.current) rotY.set(rotY.get() - ((now - last) / 1000) * speed);
+            last = now;
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [autoRotate, hover, reduced, speed, rotY]);
+
+    const turn = (dir) => {
+        // Land on the next corner view, 90° along.
+        const target = Math.round((rotY.get() + 35) / 90) * 90 - 35 - dir * 90;
+        animate(rotY, target, { type: "spring", stiffness: 110, damping: 18 });
+        animate(rotX, tilt, { type: "spring", stiffness: 110, damping: 18 });
+        setIndex((i) => (((i + dir) % 4) + 4) % 4);
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center gap-12 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") turn(1);
+                if (e.key === "ArrowLeft") turn(-1);
+            }}
+            onPointerEnter={() => setHover(true)}
+            onPointerLeave={() => setHover(false)}
+            aria-roledescription="carousel"
+            aria-label="Cube gallery"
+        >
+            <div className="relative [perspective:1100px]" style={{ width: `${size}rem`, height: `${size}rem`, maxWidth: "60vw", maxHeight: "60vw", margin: `${size * 0.16}rem 0` }}>
+                {/* Soft floor shadow */}
+                <div className="pointer-events-none absolute -bottom-[22%] left-1/2 h-[18%] w-[95%] -translate-x-1/2 rounded-[50%] bg-black/40 blur-xl" />
+                <motion.div
+                    className="relative h-full w-full cursor-grab touch-none active:cursor-grabbing [transform-style:preserve-3d]"
+                    style={{ rotateX: rotX, rotateY: rotY }}
+                    onPointerDown={(e) => {
+                        // Block text selection / native drag, which cancel the drag midway.
+                        e.preventDefault();
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                        rotY.stop();
+                        rotX.stop();
+                        drag.current = { x: e.clientX, y: e.clientY, sx: rotY.get(), sy: rotX.get(), vx: 0, vy: 0, t: performance.now(), lx: e.clientX, ly: e.clientY };
+                    }}
+                    onPointerMove={(e) => {
+                        const d = drag.current;
+                        if (!d) return;
+                        rotY.set(d.sx + (e.clientX - d.x) * 0.5);
+                        rotX.set(Math.max(-70, Math.min(70, d.sy - (e.clientY - d.y) * 0.4)));
+                        const now = performance.now();
+                        const dt = Math.max(1, now - d.t);
+                        d.vx = ((e.clientX - d.lx) / dt) * 0.5 * 1000;
+                        d.vy = ((e.clientY - d.ly) / dt) * 0.4 * 1000;
+                        d.t = now;
+                        d.lx = e.clientX;
+                        d.ly = e.clientY;
+                    }}
+                    onPointerUp={() => {
+                        const d = drag.current;
+                        if (!d) return;
+                        drag.current = null;
+                        // Throw with momentum, then settle back to the corner tilt.
+                        animate(rotY, rotY.get() + d.vx * 0.35, { type: "spring", stiffness: 40, damping: 16 });
+                        animate(rotX, tilt, { type: "spring", stiffness: 70, damping: 14 });
+                    }}
+                >
+                    {SIDES.map((s, i) => {
+                        const f = faces[i % faces.length];
+                        const transform = s.pitch ? `rotateX(${s.pitch}deg) translateZ(${half})` : `rotateY(${s.yaw}deg) translateZ(${half})`;
+                        return (
+                            <figure key={i} className="absolute inset-0 m-0 overflow-hidden bg-neutral-900 [backface-visibility:hidden]" style={{ transform, boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.14)" }}>
+                                <img src={f.image} alt={f.title} draggable="false" className="h-full w-full select-none object-cover" />
+                                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 to-transparent px-3 pb-2.5 pt-8 text-[0.8rem] font-semibold text-white">{f.title}</figcaption>
+                                <span ref={(el) => (shades.current[i] = el)} className="pointer-events-none absolute inset-0 bg-black" style={{ opacity: 0.3 }} />
+                            </figure>
+                        );
+                    })}
+                </motion.div>
+            </div>
+
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Turn left" onClick={() => turn(-1)} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95">
+                    <ChevronLeft className="h-5 w-5" />
+                </button>
+                <div className="flex gap-1.5" aria-hidden="true">
+                    {[0, 1, 2, 3].map((i) => (
+                        <span key={i} className="h-2 rounded-full transition-all duration-300" style={{ width: i === index ? 22 : 8, background: i === index ? accentColor : "color-mix(in srgb, currentColor 25%, transparent)" }} />
+                    ))}
+                </div>
+                <button type="button" aria-label="Turn right" onClick={() => turn(1)} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95">
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default CubeGallery;

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

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Cursor Trail: a tail that follows the mouse — comet, rainbow, dots, ribbon,
+ * sparkles or ghost rings. Wrap an area with it, or pass `global` to follow
+ * the pointer across the whole page. Everything is drawn on one canvas and
+ * the loop sleeps as soon as the tail has faded. Touch input is ignored.
+ */
+
+const hexToRgb = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h, 16) || 0;
+    return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
+};
+
+const CursorTrail = ({ children, variant = "comet", color = "#a3e635", size = 1, length = 1, global = false, className = "" }) => {
+    const wrapRef = useRef(null);
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const target = global ? window : wrapRef.current;
+        if (!canvas || !target || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
+        const ctx = canvas.getContext("2d");
+        const rgb = hexToRgb(color);
+        const s = { points: [], chain: [], parts: [], rings: [], last: null, raf: 0, spawn: 0 };
+        const life = 320 * length;
+
+        const resize = () => {
+            const r = canvas.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = Math.round(r.width * dpr);
+            canvas.height = Math.round(r.height * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(canvas);
+        resize();
+
+        // Points that each ease toward the one ahead: used by dots and ribbon.
+        const follow = (count, ease) => {
+            if (!s.last) return false;
+            if (s.chain.length !== count) s.chain = Array.from({ length: count }, () => ({ x: s.last.x, y: s.last.y }));
+            let tx = s.last.x;
+            let ty = s.last.y;
+            for (const p of s.chain) {
+                p.x += (tx - p.x) * ease;
+                p.y += (ty - p.y) * ease;
+                tx = p.x;
+                ty = p.y;
+            }
+            const tail = s.chain[s.chain.length - 1];
+            return Math.hypot(tail.x - s.last.x, tail.y - s.last.y) > 0.4;
+        };
+
+        const frame = () => {
+            const now = performance.now();
+            const { width, height } = canvas.getBoundingClientRect();
+            ctx.clearRect(0, 0, width, height);
+            let alive = false;
+
+            if (variant === "comet" || variant === "rainbow") {
+                s.points = s.points.filter((p) => now - p.t < life);
+                const n = s.points.length;
+                alive = n > 1;
+                ctx.lineCap = "round";
+                for (let i = 1; i < n; i++) {
+                    const k = i / n;
+                    const c = variant === "rainbow" ? `hsla(${(now / 6 + i * 9) % 360},90%,62%,${k})` : `rgba(${rgb},${k * 0.9})`;
+                    ctx.strokeStyle = c;
+                    ctx.shadowColor = c;
+                    ctx.shadowBlur = 12 * size;
+                    ctx.lineWidth = (1 + k * 7) * size;
+                    ctx.beginPath();
+                    ctx.moveTo(s.points[i - 1].x, s.points[i - 1].y);
+                    ctx.lineTo(s.points[i].x, s.points[i].y);
+                    ctx.stroke();
+                }
+                ctx.shadowBlur = 0;
+            }
+
+            if (variant === "dots") {
+                alive = follow(Math.round(14 * length), 0.38);
+                s.chain.forEach((d, i) => {
+                    const k = 1 - i / s.chain.length;
+                    ctx.fillStyle = `rgba(${rgb},${k * 0.85})`;
+                    ctx.beginPath();
+                    ctx.arc(d.x, d.y, (1.5 + k * 4) * size, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+            }
+
+            if (variant === "ribbon") {
+                alive = follow(Math.round(22 * length), 0.42);
+                const pts = s.last ? [s.last, ...s.chain] : [];
+                ctx.lineCap = "round";
+                ctx.lineJoin = "round";
+                for (let i = 1; i < pts.length - 1; i++) {
+                    const k = 1 - i / pts.length;
+                    const mx1 = (pts[i - 1].x + pts[i].x) / 2;
+                    const my1 = (pts[i - 1].y + pts[i].y) / 2;
+                    const mx2 = (pts[i].x + pts[i + 1].x) / 2;
+                    const my2 = (pts[i].y + pts[i + 1].y) / 2;
+                    ctx.strokeStyle = `rgba(${rgb},${0.15 + k * 0.85})`;
+                    ctx.lineWidth = (2 + k * 12) * size;
+                    ctx.beginPath();
+                    ctx.moveTo(mx1, my1);
+                    ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx2, my2);
+                    ctx.stroke();
+                }
+            }
+
+            if (variant === "sparkles") {
+                s.parts = s.parts.filter((p) => now - p.born < p.life);
+                for (const p of s.parts) {
+                    const k = 1 - (now - p.born) / p.life;
+                    p.x += p.vx;
+                    p.y += p.vy;
+                    p.vy += 0.05;
+                    p.vx *= 0.97;
+                    const r = p.size * k * size;
+                    ctx.strokeStyle = p.white ? `rgba(255,255,255,${k})` : `rgba(${rgb},${k})`;
+                    ctx.lineWidth = 1.4;
+                    ctx.beginPath();
+                    ctx.moveTo(p.x - r, p.y);
+                    ctx.lineTo(p.x + r, p.y);
+                    ctx.moveTo(p.x, p.y - r);
+                    ctx.lineTo(p.x, p.y + r);
+                    ctx.stroke();
+                }
+                alive = s.parts.length > 0;
+            }
+
+            if (variant === "ghost") {
+                const span = 650 * length;
+                s.rings = s.rings.filter((r) => now - r.born < span);
+                for (const r of s.rings) {
+                    const k = (now - r.born) / span;
+                    ctx.strokeStyle = `rgba(${rgb},${(1 - k) * 0.7})`;
+                    ctx.lineWidth = (2 * (1 - k) + 0.5) * size;
+                    ctx.beginPath();
+                    ctx.arc(r.x, r.y, (6 + k * 22) * size, 0, Math.PI * 2);
+                    ctx.stroke();
+                }
+                alive = s.rings.length > 0;
+            }
+
+            s.raf = alive ? requestAnimationFrame(frame) : 0;
+        };
+
+        const onMove = (e) => {
+            if (e.pointerType && e.pointerType !== "mouse") return;
+            const r = canvas.getBoundingClientRect();
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            const now = performance.now();
+            const prev = s.last;
+            s.last = { x, y };
+            if (variant === "comet" || variant === "rainbow") s.points.push({ x, y, t: now });
+            if (variant === "sparkles" && prev) {
+                const speed = Math.hypot(x - prev.x, y - prev.y);
+                for (let i = 0; i < Math.min(4, Math.ceil(speed / 8)); i++) {
+                    s.parts.push({ x, y, vx: (Math.random() - 0.5) * 2.4, vy: (Math.random() - 0.7) * 2.4, size: 2 + Math.random() * 3, life: (500 + Math.random() * 400) * length, born: now, white: Math.random() < 0.3 });
+                }
+            }
+            if (variant === "ghost" && now - s.spawn > 70) {
+                s.spawn = now;
+                s.rings.push({ x, y, born: now });
+            }
+            if (!s.raf) s.raf = requestAnimationFrame(frame);
+        };
+
+        target.addEventListener("pointermove", onMove);
+        return () => {
+            target.removeEventListener("pointermove", onMove);
+            cancelAnimationFrame(s.raf);
+            ro.disconnect();
+        };
+    }, [variant, color, size, length, global]);
+
+    const canvas = <canvas ref={canvasRef} aria-hidden="true" className={`pointer-events-none ${global ? "fixed inset-0 z-[9999]" : "absolute inset-0 z-40"} h-full w-full`} />;
+
+    if (global) {
+        return (
+            <>
+                {children}
+                {canvas}
+            </>
+        );
+    }
+    return (
+        <div ref={wrapRef} className={`relative ${className}`}>
+            {children}
+            {canvas}
+        </div>
+    );
+};
+
+export default CursorTrail;

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

@@ -236,6 +236,7 @@ const DotGlobe = ({
         };
 
         const onDown = (e) => {
+            e.preventDefault();
             drag = { x: e.clientX, yaw, lastX: e.clientX, lastT: performance.now() };
             canvas.setPointerCapture?.(e.pointerId);
         };

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

@@ -51,7 +51,7 @@ const DynamicIsland = ({
     accentColor = "#a3e635",
     music = { title: "Midnight City", artist: "Apex Sessions", cover: `${IK}/spiderman.png?tr=f-auto,q-80,w-200` },
     call = { name: "Tony Stark", subtitle: "Mobile", avatar: `${IK}/ironman.png?tr=f-auto,q-80,w-160` },
-    notification = { app: "Messages", title: "Peter Parker", message: "On my way — saving the city first 🕷️" },
+    notification = { app: "Messages", title: "Peter Parker", message: "On my way, saving the city first 🕷️" },
     timerSeconds = 300,
     onViewChange,
     className = "",

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

@@ -0,0 +1,161 @@
+import React, { useEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import { Volume1, Volume2 } from "lucide-react";
+
+/*
+ * Elastic Slider: a volume-style slider with a knob. Grab anywhere on the
+ * track and drag; pull past either end and the track stretches like rubber
+ * (the end icon gets dragged along), then springs back when you let go.
+ * The fill follows the pointer every frame — no React render in the loop.
+ * Arrow keys, Page Up/Down, Home and End work too.
+ */
+
+const MAX_OVERFLOW = 56;
+// Diminishing stretch: the further you pull, the less it gives.
+const decay = (v, max) => (2 / (1 + Math.exp(-v / max)) - 1) * max;
+
+const ElasticSlider = ({
+    defaultValue = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    leftIcon = <Volume1 className="h-5 w-5" />,
+    rightIcon = <Volume2 className="h-5 w-5" />,
+    accentColor = "#a3e635",
+    onChange,
+    showValue = true,
+    className = "",
+}) => {
+    const clamp = (v) => Math.min(max, Math.max(min, v));
+    const [value, setValue] = useState(clamp(defaultValue));
+    const [dragging, setDragging] = useState(false);
+    const [hover, setHover] = useState(false);
+    const track = useRef(null);
+    const drag = useRef(false);
+    // Latest value, readable synchronously from pointer handlers (state lags a render).
+    const valueRef = useRef(clamp(defaultValue));
+
+    const pct = useMotionValue(((clamp(defaultValue) - min) / (max - min)) * 100);
+    const overflow = useMotionValue(0); // px past an end, negative = left
+    const fillWidth = useTransform(pct, (p) => `${p}%`);
+    const knobLeft = useTransform(pct, (p) => `${p}%`);
+    const scaleX = useTransform(overflow, (o) => 1 + Math.abs(o) / (track.current?.offsetWidth || 240));
+    const originX = useTransform(overflow, (o) => (o < 0 ? 1 : 0));
+    const leftX = useTransform(overflow, (o) => (o < 0 ? o : 0));
+    const rightX = useTransform(overflow, (o) => (o > 0 ? o : 0));
+
+    const commit = (raw) => {
+        const v = clamp(Math.round(raw / step) * step);
+        if (v !== valueRef.current) {
+            valueRef.current = v;
+            setValue(v);
+            onChange?.(v);
+        }
+        return v;
+    };
+
+    const fromPointer = (clientX) => {
+        const r = track.current.getBoundingClientRect();
+        const ratio = (clientX - r.left) / r.width;
+        pct.set(Math.min(1, Math.max(0, ratio)) * 100);
+        commit(min + Math.min(1, Math.max(0, ratio)) * (max - min));
+        const past = clientX < r.left ? clientX - r.left : clientX > r.right ? clientX - r.right : 0;
+        overflow.set(Math.sign(past) * decay(Math.abs(past), MAX_OVERFLOW));
+    };
+
+    const end = () => {
+        if (!drag.current) return;
+        drag.current = false;
+        setDragging(false);
+        animate(overflow, 0, { type: "spring", stiffness: 380, damping: 12 });
+        // Snap the fill to the stepped value.
+        animate(pct, ((valueRef.current - min) / (max - min)) * 100, { duration: 0.12 });
+    };
+
+    // Keep the fill in sync for keyboard changes.
+    useEffect(() => {
+        if (!drag.current) animate(pct, ((value - min) / (max - min)) * 100, { type: "spring", stiffness: 500, damping: 40 });
+    }, [value, min, max, pct]);
+
+    const nudge = (delta) => commit(valueRef.current + delta);
+    const big = Math.max(step, (max - min) / 10);
+    const thick = dragging || hover;
+
+    return (
+        <div className={`flex w-full max-w-sm flex-col items-center gap-3 ${className}`}>
+            <div className="flex w-full touch-none select-none items-center gap-4">
+                <motion.button type="button" aria-label="Decrease" onClick={() => nudge(-big)} style={{ x: leftX }} className="shrink-0 opacity-70 transition-opacity hover:opacity-100">
+                    {leftIcon}
+                </motion.button>
+
+                <div
+                    ref={track}
+                    role="slider"
+                    tabIndex={0}
+                    aria-valuemin={min}
+                    aria-valuemax={max}
+                    aria-valuenow={value}
+                    aria-label="Value"
+                    className="relative flex h-10 flex-1 cursor-grab items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-current/30 active:cursor-grabbing"
+                    onPointerEnter={() => setHover(true)}
+                    onPointerLeave={() => setHover(false)}
+                    onPointerDown={(e) => {
+                        if (e.button !== 0) return;
+                        // No text selection / native drag: those fire pointercancel mid-drag.
+                        e.preventDefault();
+                        e.currentTarget.focus({ preventScroll: true });
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                        // Stop any spring still settling from the last drag.
+                        pct.stop();
+                        overflow.stop();
+                        drag.current = true;
+                        setDragging(true);
+                        fromPointer(e.clientX);
+                    }}
+                    onPointerMove={(e) => drag.current && fromPointer(e.clientX)}
+                    onPointerUp={end}
+                    onPointerCancel={end}
+                    onLostPointerCapture={end}
+                    onKeyDown={(e) => {
+                        const map = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step, PageUp: big, PageDown: -big };
+                        if (e.key in map) nudge(map[e.key]);
+                        else if (e.key === "Home") commit(min);
+                        else if (e.key === "End") commit(max);
+                        else return;
+                        e.preventDefault();
+                    }}
+                >
+                    <motion.div className="relative w-full rounded-full" style={{ scaleX, originX }} animate={{ height: thick ? 12 : 7 }} transition={{ type: "spring", stiffness: 400, damping: 30 }}>
+                        <div className="absolute inset-0 overflow-hidden rounded-full" style={{ background: "color-mix(in srgb, currentColor 16%, transparent)" }}>
+                            <motion.div className="absolute inset-y-0 left-0 rounded-full" style={{ width: fillWidth, background: accentColor }} />
+                        </div>
+                        {/* Knob */}
+                        <motion.span
+                            className="absolute top-1/2 block rounded-full bg-white shadow-[0_1px_4px_rgba(0,0,0,0.35)] ring-1 ring-black/10"
+                            style={{ left: knobLeft, x: "-50%", y: "-50%" }}
+                            animate={{ width: dragging ? 22 : thick ? 18 : 14, height: dragging ? 22 : thick ? 18 : 14 }}
+                            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                        />
+                        {/* Value bubble while dragging */}
+                        <motion.span
+                            className="pointer-events-none absolute bottom-full mb-3 rounded-md px-1.5 py-0.5 font-mono text-[0.7rem] font-semibold text-black"
+                            style={{ left: knobLeft, x: "-50%", background: accentColor }}
+                            initial={false}
+                            animate={{ opacity: dragging ? 1 : 0, y: dragging ? 0 : 4 }}
+                            transition={{ duration: 0.15 }}
+                        >
+                            {value}
+                        </motion.span>
+                    </motion.div>
+                </div>
+
+                <motion.button type="button" aria-label="Increase" onClick={() => nudge(big)} style={{ x: rightX }} className="shrink-0 opacity-70 transition-opacity hover:opacity-100">
+                    {rightIcon}
+                </motion.button>
+            </div>
+            {showValue && <p className="font-mono text-sm tabular-nums opacity-60">{value}</p>}
+        </div>
+    );
+};
+
+export default ElasticSlider;

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

@@ -0,0 +1,78 @@
+import React, { useRef } from "react";
+import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+
+/*
+ * Extruded Text: chunky 3D letters built from stacked copies of the text,
+ * each pushed a little deeper. The whole block tilts toward the pointer so
+ * you can see the sides, and the face can carry a gradient.
+ */
+
+const ExtrudedText = ({
+    text = "APEX",
+    depth = 14,
+    faceColor = "#a3e635",
+    sideColor = "#3f6212",
+    gradient = "",
+    maxTilt = 22,
+    fontSize = 7,
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const reduced = useReducedMotion();
+    // Rest a little turned so the depth shows before the pointer arrives.
+    const REST = { x: -0.55, y: 0.5 };
+    const px = useMotionValue(REST.x);
+    const py = useMotionValue(REST.y);
+    const rotateY = useSpring(useTransform(px, [-1, 1], [-maxTilt, maxTilt]), { stiffness: 140, damping: 16 });
+    const rotateX = useSpring(useTransform(py, [-1, 1], [maxTilt * 0.7, -maxTilt * 0.7]), { stiffness: 140, damping: 16 });
+
+    const onMove = (e) => {
+        if (reduced) return;
+        const r = ref.current.getBoundingClientRect();
+        px.set(((e.clientX - r.left) / r.width) * 2 - 1);
+        py.set(((e.clientY - r.top) / r.height) * 2 - 1);
+    };
+
+    const layers = Array.from({ length: depth }, (_, i) => depth - i);
+
+    return (
+        <div
+            ref={ref}
+            onPointerMove={onMove}
+            onPointerLeave={() => {
+                px.set(REST.x);
+                py.set(REST.y);
+            }}
+            className={`flex w-full items-center justify-center py-10 [perspective:900px] ${className}`}
+            aria-label={text}
+            role="img"
+        >
+            <motion.div className="relative font-black leading-none tracking-tight [transform-style:preserve-3d]" style={{ rotateX, rotateY, fontSize: `clamp(2.5rem, 14vw, ${fontSize}rem)` }}>
+                {/* Back layers form the sides, darker the deeper they go. */}
+                {layers.map((z) => (
+                    <span
+                        key={z}
+                        aria-hidden="true"
+                        className="absolute inset-0 select-none"
+                        style={{ transform: `translateZ(${-z * 3}px)`, color: sideColor, filter: `brightness(${1 - (z / depth) * 0.55})` }}
+                    >
+                        {text}
+                    </span>
+                ))}
+                <span
+                    aria-hidden="true"
+                    className="relative block select-none"
+                    style={
+                        gradient
+                            ? { backgroundImage: gradient, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }
+                            : { color: faceColor, textShadow: "0 1px 0 rgba(255,255,255,0.35)" }
+                    }
+                >
+                    {text}
+                </span>
+            </motion.div>
+        </div>
+    );
+};
+
+export default ExtrudedText;

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

@@ -9,7 +9,7 @@ import { Plus } from "lucide-react";
  */
 
 const DEFAULT_ITEMS = [
-    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source — copy it into your project or add it with one CLI command." },
+    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source, copy it into your project or add it with one CLI command." },
     { q: "Does it work with Next.js?", a: "Yes. The components are plain React with Tailwind CSS, so they work in Vite, Next.js, Remix and anything else that runs React." },
     { q: "Can I change the colors?", a: "Every component takes props for its accent colors, and the Tailwind classes are right there in the code if you want to go further." },
     { q: "Do the animations respect reduced motion?", a: "Yes. Components check the visitor's reduced-motion setting and tone their movement down or switch it off." },