apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Wave: layered glowing sine waves, like a phone assistant. Flat
+ * and calm when idle, lively while listening, a slow swell while thinking
+ * and full, syllable-like bursts while speaking. Tap to cycle the states or
+ * control `state` yourself.
+ */
+
+const LABELS = { idle: "Tap to talk", listening: "Listening…", thinking: "Thinking…", speaking: "Speaking…" };
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+
+// How loud the voice "is" at time t for each state (0–1).
+const levelAt = (state, t) =>
+    state === "speaking" ? 0.45 + 0.55 * Math.abs(Math.sin(t * 8.5) * Math.sin(t * 2.1)) : state === "listening" ? 0.35 + 0.45 * Math.abs(Math.sin(t * 5.2) * Math.cos(t * 1.6)) : state === "thinking" ? 0.22 + 0.1 * Math.sin(t * 2) : 0.06;
+
+const AiVoiceWave = ({ state: stateProp, onStateChange, colors = ["#a3e635", "#22d3ee", "#a78bfa"], height = 9, showLabel = true, className = "" }) => {
+    const canvasRef = useRef(null);
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        let raf = 0;
+        let level = 0.05;
+        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();
+
+        const draw = (now) => {
+            const t = now / 1000;
+            const { width: w, height: h } = canvas.getBoundingClientRect();
+            level += (levelAt(stateRef.current, t) - level) * 0.12;
+            ctx.clearRect(0, 0, w, h);
+            colors.forEach((c, k) => {
+                const amp = h * 0.42 * level * (1 - k * 0.18);
+                const freq = 1.6 + k * 0.7;
+                const phase = t * (2.2 + k * 0.9) * (stateRef.current === "thinking" ? 0.5 : 1);
+                ctx.beginPath();
+                for (let x = 0; x <= w; x += 2) {
+                    const u = x / w;
+                    // Taper both ends so the wave fades in from a flat line.
+                    const taper = Math.pow(Math.sin(Math.PI * u), 2.2);
+                    const y = h / 2 + Math.sin(u * Math.PI * 2 * freq + phase) * amp * taper;
+                    if (x === 0) ctx.moveTo(x, y);
+                    else ctx.lineTo(x, y);
+                }
+                ctx.strokeStyle = c;
+                ctx.lineWidth = 3 - k * 0.5;
+                ctx.shadowColor = c;
+                ctx.shadowBlur = 14;
+                ctx.globalAlpha = 0.85;
+                ctx.stroke();
+            });
+            ctx.globalAlpha = 1;
+            ctx.shadowBlur = 0;
+            raf = requestAnimationFrame(draw);
+        };
+        raf = requestAnimationFrame(draw);
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+        };
+    }, [colors]);
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex w-full max-w-xl flex-col items-center gap-4 ${className}`}>
+            <button type="button" onClick={next} aria-label={`Voice assistant: ${LABELS[state]}`} className="w-full rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-white/30">
+                <canvas ref={canvasRef} aria-hidden="true" className="block w-full" style={{ height: `${height}rem` }} />
+            </button>
+            {showLabel && <Label state={state} color={colors[0]} />}
+        </div>
+    );
+};
+
+function Label({ state, color }) {
+    return (
+        <div className="flex items-center gap-2 text-sm font-medium">
+            {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color }} />}
+            <AnimatePresence mode="wait">
+                <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                    {LABELS[state]}
+                </motion.span>
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default AiVoiceWave;

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

@@ -0,0 +1,251 @@
+import React, { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, Check, Loader2 } from "lucide-react";
+
+/*
+ * Animated Button: one button, seven feels. Pick a variant:
+ *  shine   – a gleam sweeps across on hover
+ *  fill    – color floods in from where the pointer entered and drains out where it left
+ *  border  – a light beam runs around the border
+ *  press   – a chunky 3D key that sinks when pressed
+ *  loading – spins while onClick's promise runs, then shows a check
+ *  ripple  – a ripple spreads from every click
+ *  arrow   – the arrow slides through and the label nudges over
+ * Every motion is a GPU transform with one shared easing, so it stays smooth.
+ */
+
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+
+const SIZES = {
+    sm: { box: "h-9 px-4 text-[0.8rem] gap-1.5", pad: "px-4 gap-1.5" },
+    md: { box: "h-11 px-5 text-[0.9rem] gap-2", pad: "px-5 gap-2" },
+    lg: { box: "h-[3.25rem] px-7 text-base gap-2.5", pad: "px-7 gap-2.5" },
+};
+
+// Black or white text, whichever reads better on the accent.
+const inkOn = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h, 16) || 0;
+    const l = (0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255;
+    return l > 0.6 ? "#0a0a0a" : "#ffffff";
+};
+
+const AnimatedButton = ({ variant = "shine", children = "Get started", color = "#a3e635", size = "md", onClick, disabled, className = "", ...rest }) => {
+    const ref = useRef(null);
+    const [fill, setFill] = useState({ x: 0, y: 0, d: 0, on: false });
+    const [ripples, setRipples] = useState([]);
+    const [status, setStatus] = useState("idle");
+    const ink = inkOn(color);
+    const s = SIZES[size] ?? SIZES.md;
+    const base = `relative inline-flex select-none items-center justify-center overflow-hidden rounded-full font-semibold outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${s.box}`;
+    const smooth = { transitionTimingFunction: EASE };
+
+    const localPoint = (e) => {
+        const r = ref.current.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top, w: r.width, h: r.height };
+    };
+
+    if (variant === "shine") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`group ${base} bg-neutral-950 text-white transition-[transform,box-shadow] duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_32px_-12px_var(--c)] active:translate-y-0 active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ "--c": color, ...smooth }}
+                {...rest}
+            >
+                <span aria-hidden="true" className="absolute inset-0 rounded-full transition-opacity duration-300 group-hover:opacity-100" style={{ boxShadow: `inset 0 0 0 1px ${color}66, inset 0 1px 0 rgba(255,255,255,0.12)` }} />
+                <span
+                    aria-hidden="true"
+                    className="absolute inset-y-0 left-0 w-1/2 -translate-x-[120%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/35 to-transparent transition-transform duration-[900ms] will-change-transform group-hover:translate-x-[260%]"
+                    style={smooth}
+                />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "fill") {
+        // One circle big enough to cover the button, scaled 0 → 1 from the entry point.
+        const track = (e, on) => {
+            const p = localPoint(e);
+            setFill({ x: p.x, y: p.y, d: Math.hypot(Math.max(p.x, p.w - p.x), Math.max(p.y, p.h - p.y)) * 2, on });
+        };
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                onPointerEnter={(e) => track(e, true)}
+                onPointerLeave={(e) => track(e, false)}
+                className={`${base} border-[1.5px] transition-[color,transform] duration-500 active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ borderColor: color, color: fill.on ? ink : color, ...smooth }}
+                {...rest}
+            >
+                <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute rounded-full will-change-transform"
+                    style={{
+                        left: fill.x - fill.d / 2,
+                        top: fill.y - fill.d / 2,
+                        width: fill.d,
+                        height: fill.d,
+                        background: color,
+                        transform: `scale(${fill.on ? 1 : 0})`,
+                        transition: `transform 550ms ${EASE}`,
+                    }}
+                />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "border") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`group ${base} text-white transition-[transform,box-shadow] duration-300 hover:shadow-[0_0_30px_-8px_var(--c)] active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ "--c": color, padding: "1.5px", ...smooth }}
+                {...rest}
+            >
+                <motion.span
+                    aria-hidden="true"
+                    className="absolute left-1/2 top-1/2 aspect-square w-[260%] -translate-x-1/2 -translate-y-1/2 will-change-transform"
+                    style={{ background: `conic-gradient(from 0deg, transparent 0 68%, ${color}66 78%, ${color} 88%, transparent 100%)` }}
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 2.8, repeat: Infinity, ease: "linear" }}
+                />
+                <span className={`relative flex h-full w-full items-center justify-center rounded-full bg-neutral-950 transition-colors duration-300 group-hover:bg-neutral-900 ${s.pad}`}>{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "press") {
+        const edge = `color-mix(in srgb, ${color} 55%, #000)`;
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`${base} -translate-y-1 shadow-[0_5px_0_var(--edge),0_14px_22px_-10px_rgba(0,0,0,0.55)] transition-[transform,box-shadow] duration-200 hover:-translate-y-[6px] hover:shadow-[0_7px_0_var(--edge),0_18px_26px_-12px_rgba(0,0,0,0.55)] active:translate-y-0 active:shadow-[0_1px_0_var(--edge),0_4px_8px_-4px_rgba(0,0,0,0.4)] active:duration-75 ${className}`}
+                style={{ background: color, color: ink, "--edge": edge, ...smooth }}
+                {...rest}
+            >
+                <span aria-hidden="true" className="absolute inset-x-3 top-[3px] h-1/3 rounded-full bg-white/25 blur-[2px]" />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "loading") {
+        const run = async (e) => {
+            if (status !== "idle") return;
+            setStatus("loading");
+            try {
+                const result = onClick?.(e);
+                await (result && typeof result.then === "function" ? result : new Promise((r) => setTimeout(r, 1400)));
+                setStatus("done");
+            } catch {
+                setStatus("idle");
+                return;
+            }
+            setTimeout(() => setStatus("idle"), 1600);
+        };
+        return (
+            <motion.button
+                ref={ref}
+                type="button"
+                layout
+                onClick={run}
+                disabled={disabled}
+                aria-busy={status === "loading"}
+                className={`${base} transition-[background-color,color] duration-300 active:scale-[0.97] ${className}`}
+                style={{ background: status === "done" ? "#22c55e" : color, color: status === "done" ? "#fff" : ink, borderRadius: 999, ...smooth }}
+                transition={{ layout: { type: "spring", stiffness: 420, damping: 34 } }}
+                {...rest}
+            >
+                <AnimatePresence mode="popLayout" initial={false}>
+                    <motion.span
+                        key={status}
+                        className="flex items-center gap-2"
+                        initial={{ opacity: 0, y: 12, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -12, scale: 0.9 }}
+                        transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+                    >
+                        {status === "idle" && children}
+                        {status === "loading" && <Loader2 className="h-[1.15em] w-[1.15em] animate-spin" aria-label="Loading" />}
+                        {status === "done" && (
+                            <>
+                                <Check className="h-[1.15em] w-[1.15em]" /> Done
+                            </>
+                        )}
+                    </motion.span>
+                </AnimatePresence>
+            </motion.button>
+        );
+    }
+
+    if (variant === "ripple") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                disabled={disabled}
+                onPointerDown={(e) => {
+                    const p = localPoint(e);
+                    setRipples((list) => [...list, { id: performance.now(), x: p.x, y: p.y, d: Math.hypot(p.w, p.h) * 2.2 }]);
+                }}
+                onClick={onClick}
+                className={`${base} transition-[transform,filter] duration-300 hover:brightness-110 active:scale-[0.98] active:duration-100 ${className}`}
+                style={{ background: color, color: ink, ...smooth }}
+                {...rest}
+            >
+                {ripples.map((r) => (
+                    <motion.span
+                        key={r.id}
+                        aria-hidden="true"
+                        className="pointer-events-none absolute rounded-full will-change-transform"
+                        style={{ left: r.x - r.d / 2, top: r.y - r.d / 2, width: r.d, height: r.d, background: ink }}
+                        initial={{ scale: 0, opacity: 0.28 }}
+                        animate={{ scale: 1, opacity: 0 }}
+                        transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
+                        onAnimationComplete={() => setRipples((list) => list.filter((x) => x.id !== r.id))}
+                    />
+                ))}
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    // arrow
+    return (
+        <button
+            ref={ref}
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className={`group ${base} pr-1.5 transition-transform duration-300 active:scale-[0.97] active:duration-100 ${className}`}
+            style={{ background: color, color: ink, ...smooth }}
+            {...rest}
+        >
+            <span className="relative transition-transform duration-500 group-hover:-translate-x-1" style={smooth}>
+                {children}
+            </span>
+            <span className="relative grid aspect-square h-[calc(100%-0.5rem)] place-items-center overflow-hidden rounded-full transition-transform duration-500 group-hover:scale-105" style={{ background: ink, color, ...smooth }}>
+                <ArrowRight className="absolute h-[1.1em] w-[1.1em] transition-transform duration-500 group-hover:translate-x-[180%]" style={smooth} />
+                <ArrowRight className="absolute h-[1.1em] w-[1.1em] -translate-x-[180%] transition-transform duration-500 group-hover:translate-x-0" style={smooth} />
+            </span>
+        </button>
+    );
+};
+
+export default AnimatedButton;

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

@@ -0,0 +1,80 @@
+import React, { useId, useState } from "react";
+import { motion } from "framer-motion";
+import { Check, Moon, Sun, X } from "lucide-react";
+
+/*
+ * Animated Switch: a toggle with personality. Variants:
+ *  classic  – the familiar pill with a springy knob that stretches as it moves
+ *  icon     – the knob shows a cross or a check
+ *  daynight – a sun crosses into a starry night
+ *  neon     – a glowing track that lights up when on
+ * Works controlled (`checked` + `onChange`) or on its own (`defaultChecked`).
+ */
+
+const knobSpring = { type: "spring", stiffness: 520, damping: 32 };
+
+const AnimatedSwitch = ({ variant = "classic", checked, defaultChecked = false, onChange, label, accentColor = "#a3e635", size = 1, disabled = false, className = "" }) => {
+    const id = useId();
+    const [inner, setInner] = useState(defaultChecked);
+    const on = checked ?? inner;
+    const toggle = () => {
+        if (disabled) return;
+        if (checked === undefined) setInner(!on);
+        onChange?.(!on);
+    };
+
+    const W = 3.25 * size;
+    const H = 1.85 * size;
+    const K = H - 0.35 * size;
+    const travel = W - K - 0.35 * size;
+
+    const track = {
+        classic: { background: on ? accentColor : "rgba(120,120,128,0.32)" },
+        icon: { background: on ? accentColor : "rgba(120,120,128,0.32)" },
+        daynight: { background: on ? "linear-gradient(135deg,#0f172a,#312e81)" : "linear-gradient(135deg,#7dd3fc,#38bdf8)" },
+        neon: { background: "#0a0a0a", boxShadow: on ? `0 0 0 1.5px ${accentColor}, 0 0 18px ${accentColor}99, inset 0 0 12px ${accentColor}55` : "0 0 0 1.5px rgba(255,255,255,0.15)" },
+    }[variant];
+
+    return (
+        <label htmlFor={id} className={`inline-flex select-none items-center gap-3 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${className}`}>
+            <button
+                id={id}
+                type="button"
+                role="switch"
+                aria-checked={on}
+                disabled={disabled}
+                onClick={toggle}
+                className="relative shrink-0 overflow-hidden rounded-full outline-none transition-[background,box-shadow] duration-300 focus-visible:ring-2 focus-visible:ring-offset-2"
+                style={{ width: `${W}rem`, height: `${H}rem`, ...track }}
+            >
+                {variant === "daynight" && (
+                    <>
+                        {[0.9, 1.6, 2.2, 1.2].map((x, i) => (
+                            <motion.span
+                                key={i}
+                                className="absolute h-[0.14rem] w-[0.14rem] rounded-full bg-white"
+                                style={{ left: `${x * size * 0.7}rem`, top: `${(0.35 + (i % 2) * 0.55) * size}rem` }}
+                                animate={{ opacity: on ? [0.3, 1, 0.3] : 0, scale: on ? 1 : 0 }}
+                                transition={{ duration: 1.6, repeat: on ? Infinity : 0, delay: i * 0.3 }}
+                            />
+                        ))}
+                        <motion.span className="absolute rounded-full bg-white/80" style={{ width: `${0.9 * size}rem`, height: `${0.35 * size}rem`, top: `${1.05 * size}rem` }} animate={{ left: on ? `${-1.2 * size}rem` : `${1.7 * size}rem`, opacity: on ? 0 : 1 }} transition={{ duration: 0.4 }} />
+                    </>
+                )}
+                <motion.span
+                    className="absolute grid place-items-center rounded-full shadow-[0_2px_6px_rgba(0,0,0,0.3)]"
+                    style={{ left: `${0.175 * size}rem`, top: `${(H - K) / 2}rem`, height: `${K}rem`, background: variant === "daynight" ? (on ? "#e2e8f0" : "#fde047") : variant === "neon" ? (on ? accentColor : "#3f3f46") : "#ffffff" }}
+                    initial={false}
+                    animate={{ x: on ? `${travel}rem` : "0rem", width: on ? [`${K}rem`, `${K * 1.25}rem`, `${K}rem`] : [`${K}rem`, `${K * 1.24}rem`, `${K}rem`] }}
+                    transition={{ x: knobSpring, width: { duration: 0.3 } }}
+                >
+                    {variant === "icon" && (on ? <Check className="h-3/5 w-3/5" style={{ color: accentColor }} strokeWidth={3} /> : <X className="h-3/5 w-3/5 text-neutral-400" strokeWidth={3} />)}
+                    {variant === "daynight" && (on ? <Moon className="h-3/5 w-3/5 text-slate-500" fill="currentColor" /> : <Sun className="h-3/5 w-3/5 text-amber-600" />)}
+                </motion.span>
+            </button>
+            {label && <span className="text-sm font-medium">{label}</span>}
+        </label>
+    );
+};
+
+export default AnimatedSwitch;

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

@@ -0,0 +1,107 @@
+import React, { useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+/*
+ * Animated Tabs: a pill slides to the chosen tab and the panel below
+ * cross-fades in the direction you moved. Arrow keys, Home and End work.
+ * Styles: "pill" (filled), "underline" or "segmented".
+ */
+
+const DEFAULT_TABS = [
+    { id: "overview", label: "Overview", content: "A quick look at everything in one place — usage, limits and the latest activity." },
+    { id: "analytics", label: "Analytics", content: "Visitors, conversions and retention, updated every few seconds with zero setup." },
+    { id: "reports", label: "Reports", content: "Export weekly PDF reports or schedule them to land in your team's inbox." },
+    { id: "settings", label: "Settings", content: "Workspace name, members, billing and the danger zone — all in one tidy screen." },
+];
+
+const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accentColor = "#a3e635", theme = "dark", onChange, className = "" }) => {
+    const id = useId();
+    const [active, setActive] = useState(defaultTab ?? tabs[0]?.id);
+    const [dir, setDir] = useState(1);
+    const refs = useRef([]);
+    const dark = theme !== "light";
+    const index = tabs.findIndex((t) => t.id === active);
+    const current = tabs[index];
+
+    const select = (i) => {
+        const t = tabs[(i + tabs.length) % tabs.length];
+        setDir(tabs.indexOf(t) > index ? 1 : -1);
+        setActive(t.id);
+        refs.current[tabs.indexOf(t)]?.focus();
+        onChange?.(t.id);
+    };
+    const onKeyDown = (e) => {
+        const map = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 };
+        if (map[e.key] === undefined) return;
+        e.preventDefault();
+        select(map[e.key]);
+    };
+
+    const list = {
+        pill: `rounded-full p-1 ${dark ? "bg-white/[0.06]" : "bg-black/[0.05]"}`,
+        segmented: `rounded-xl p-1 ${dark ? "bg-white/[0.06] ring-1 ring-white/10" : "bg-black/[0.04] ring-1 ring-black/10"}`,
+        underline: `border-b ${dark ? "border-white/10" : "border-black/10"}`,
+    }[variant];
+
+    return (
+        <div className={`w-full max-w-xl ${dark ? "text-white" : "text-neutral-900"} ${className}`}>
+            <div role="tablist" aria-orientation="horizontal" onKeyDown={onKeyDown} className={`relative flex overflow-x-auto [scrollbar-width:none] ${list}`}>
+                {tabs.map((t, i) => {
+                    const on = t.id === active;
+                    return (
+                        <button
+                            key={t.id}
+                            ref={(el) => (refs.current[i] = el)}
+                            role="tab"
+                            id={`${id}-tab-${t.id}`}
+                            aria-selected={on}
+                            aria-controls={`${id}-panel`}
+                            tabIndex={on ? 0 : -1}
+                            onClick={() => select(i)}
+                            className={`relative flex-1 whitespace-nowrap px-4 py-2 text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        >
+                            {on && (
+                                <motion.span
+                                    layoutId={`${id}-indicator`}
+                                    className={`absolute ${variant === "underline" ? "inset-x-2 -bottom-px h-[2px] rounded-full" : `inset-0 ${variant === "pill" ? "rounded-full" : "rounded-lg"}`}`}
+                                    style={{
+                                        background: variant === "segmented" ? (dark ? "rgba(255,255,255,0.1)" : "#fff") : accentColor,
+                                        boxShadow: variant === "segmented" ? (dark ? "inset 0 1px 0 rgba(255,255,255,0.08)" : "0 1px 3px rgba(0,0,0,0.12)") : undefined,
+                                    }}
+                                    transition={{ type: "spring", stiffness: 480, damping: 36 }}
+                                />
+                            )}
+                            <span className="relative">{t.label}</span>
+                        </button>
+                    );
+                })}
+            </div>
+            <div id={`${id}-panel`} role="tabpanel" aria-labelledby={`${id}-tab-${active}`} className="relative mt-4 grid min-h-[6rem] overflow-hidden">
+                {/* Invisible copies of every panel reserve the tallest height, so the
+                    tab bar never jumps when panels of different lengths swap. */}
+                {tabs.map((t) => (
+                    <div key={t.id} aria-hidden="true" className="invisible col-start-1 row-start-1 p-5 text-[0.92rem] leading-relaxed">
+                        <p className="mb-1.5 text-[1rem] font-semibold">{t.label}</p>
+                        {t.content}
+                    </div>
+                ))}
+                <AnimatePresence mode="popLayout" initial={false} custom={dir}>
+                    <motion.div
+                        key={active}
+                        custom={dir}
+                        initial={{ opacity: 0, x: dir * 24, filter: "blur(4px)" }}
+                        animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
+                        exit={{ opacity: 0, x: dir * -24, filter: "blur(4px)" }}
+                        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+                        className={`col-start-1 row-start-1 h-full rounded-2xl p-5 text-[0.92rem] leading-relaxed ${dark ? "bg-white/[0.04] text-white/75" : "bg-black/[0.03] text-neutral-600"}`}
+                    >
+                        <p className={`mb-1.5 text-[1rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{current?.label}</p>
+                        {current?.content}
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+        </div>
+    );
+};
+
+export default AnimatedTabs;

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

@@ -0,0 +1,48 @@
+import React from "react";
+
+/*
+ * Aurora Background: soft northern-light bands that drift and shimmer, built
+ * from blurred CSS gradients only (no canvas, no WebGL). Works on light and
+ * dark pages; reduced-motion visitors get the same picture without movement.
+ */
+
+const AuroraBackground = ({
+    children,
+    colors = ["#22d3ee", "#a3e635", "#a78bfa", "#38bdf8"],
+    theme = "dark",
+    speed = 1,
+    intensity = 1,
+    className = "",
+    containerClassName = "",
+}) => {
+    const dark = theme !== "light";
+    const stops = colors.map((c, i) => `${c} ${Math.round((i / colors.length) * 100)}%`).join(", ");
+    const duration = `${60 / Math.max(0.1, speed)}s`;
+
+    return (
+        <div className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05060a]" : "bg-[#f8fafc]"} ${containerClassName}`}>
+            <style>{`
+                @keyframes apex-aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
+                @media (prefers-reduced-motion: reduce) { .apex-aurora, .apex-aurora::after { animation: none !important; } }
+            `}</style>
+            <div
+                aria-hidden="true"
+                className="apex-aurora pointer-events-none absolute -inset-[10px] will-change-transform after:absolute after:inset-0 after:content-['']"
+                style={{
+                    opacity: Math.min(1, (dark ? 0.9 : 0.75) * intensity),
+                    filter: `blur(${dark ? 12 : 10}px) ${dark ? "" : "invert(0)"}`,
+                    backgroundImage: `repeating-linear-gradient(100deg, ${dark ? "#000" : "#fff"} 0%, ${dark ? "#000" : "#fff"} 7%, transparent 10%, transparent 12%, ${dark ? "#000" : "#fff"} 16%), repeating-linear-gradient(100deg, ${stops}, ${colors[0]} 100%)`,
+                    backgroundSize: "300%, 200%",
+                    backgroundPosition: "50% 50%, 50% 50%",
+                    maskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
+                    WebkitMaskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
+                    animation: `apex-aurora ${duration} linear infinite`,
+                    mixBlendMode: dark ? "normal" : "multiply",
+                }}
+            />
+            {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
+        </div>
+    );
+};
+
+export default AuroraBackground;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Blur Reveal Text: words (or letters) rise out of a blur one after another
+ * when the text scrolls into view. An optional highlight word gets the accent.
+ */
+
+const BlurRevealText = ({
+    text = "Design that moves people, built in minutes.",
+    as: Tag = "p",
+    by = "word",
+    stagger = 0.06,
+    duration = 0.7,
+    blur = 12,
+    highlight = [],
+    accentColor = "#a3e635",
+    once = true,
+    className = "",
+}) => {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    let index = 0;
+    const MotionTag = motion[Tag] ?? motion.p;
+
+    const piece = (content, key, accent) => {
+        const delay = index++ * stagger;
+        return (
+            <motion.span
+                key={key}
+                className="inline-block will-change-[filter,transform]"
+                style={accent ? { color: accentColor } : undefined}
+                variants={{
+                    hidden: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur}px)` },
+                    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration, delay, ease: [0.22, 1, 0.36, 1] } },
+                }}
+            >
+                {content}
+            </motion.span>
+        );
+    };
+
+    return (
+        <MotionTag aria-label={text} className={className} initial="hidden" whileInView="shown" viewport={{ once, amount: 0.4 }}>
+            {words.map((word, w) => {
+                const accent = highlight.some((h) => h.toLowerCase() === word.replace(/[^\p{L}\p{N}'-]/gu, "").toLowerCase());
+                return (
+                    <React.Fragment key={w}>
+                        <span aria-hidden="true" className="inline-block whitespace-nowrap">
+                            {by === "letter" ? [...word].map((ch, c) => piece(ch, c, accent)) : piece(word, 0, accent)}
+                        </span>
+                        {w < words.length - 1 && " "}
+                    </React.Fragment>
+                );
+            })}
+        </MotionTag>
+    );
+};
+
+export default BlurRevealText;