apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Proximity Text: letters swell, lift and light up as the pointer gets
+ * close, falling off smoothly with distance — like a magnifier sliding
+ * over the line. Works on touch too (drag a finger across).
+ */
+
+const ProximityText = ({ text = "Hover over these letters", radius = 110, maxScale = 1.6, lift = 0.18, color = "currentColor", activeColor = "#a3e635", className = "" }) => {
+    const wrap = useRef(null);
+    const letters = useRef([]);
+    const pointer = useRef(null);
+
+    useEffect(() => {
+        let raf = 0;
+        const amounts = letters.current.map(() => 0);
+        const tick = () => {
+            const p = pointer.current;
+            letters.current.forEach((el, i) => {
+                if (!el) return;
+                let target = 0;
+                if (p) {
+                    const r = el.getBoundingClientRect();
+                    const d = Math.hypot(p.x - (r.left + r.width / 2), p.y - (r.top + r.height / 2));
+                    target = Math.max(0, 1 - d / radius);
+                    target = target * target * (3 - 2 * target); // smoothstep
+                }
+                amounts[i] += (target - amounts[i]) * 0.2;
+                const a = amounts[i];
+                el.style.transform = `translateY(${-a * lift}em) scale(${1 + a * (maxScale - 1)})`;
+                el.style.color = a > 0.02 ? `color-mix(in srgb, ${activeColor} ${Math.round(a * 100)}%, ${color})` : "";
+            });
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [radius, maxScale, lift, color, activeColor]);
+
+    const words = text.split(" ");
+    let n = 0;
+    return (
+        <span
+            ref={wrap}
+            className={`inline-flex touch-none flex-wrap justify-center gap-x-[0.3em] font-bold ${className}`}
+            style={{ color }}
+            onPointerMove={(e) => (pointer.current = { x: e.clientX, y: e.clientY })}
+            onPointerLeave={() => (pointer.current = null)}
+            aria-label={text}
+        >
+            {words.map((w, wi) => (
+                <span key={wi} className="inline-flex" aria-hidden="true">
+                    {Array.from(w).map((c) => {
+                        const k = n++;
+                        return (
+                            <span key={k} ref={(el) => (letters.current[k] = el)} className="inline-block origin-bottom will-change-transform">
+                                {c}
+                            </span>
+                        );
+                    })}
+                </span>
+            ))}
+        </span>
+    );
+};
+
+export default ProximityText;

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

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+/*
+ * Rotating Text: a phrase whose last word swaps on a timer. Each letter of
+ * the new word springs up from below while the old one slides out, and the
+ * highlight pill resizes smoothly to fit.
+ */
+
+const RotatingText = ({ prefix = "Build", words = ["faster", "smarter", "together", "with ApexUI"], interval = 2200, stagger = 0.025, from = "first", accentColor = "#a3e635", textColor = "#0a0a0a", className = "" }) => {
+    const [i, setI] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setI((n) => (n + 1) % words.length), interval);
+        return () => clearInterval(id);
+    }, [words.length, interval]);
+
+    const word = words[i];
+    const chars = Array.from(word);
+    const delayFor = (k) => {
+        const n = chars.length - 1;
+        const order = from === "last" ? n - k : from === "center" ? Math.abs(k - n / 2) : k;
+        return order * stagger;
+    };
+
+    return (
+        <span className={`inline-flex flex-wrap items-center gap-x-[0.3em] font-bold ${className}`}>
+            {prefix && <span>{prefix}</span>}
+            <motion.span layout transition={{ type: "spring", stiffness: 300, damping: 30 }} className="relative inline-flex overflow-hidden rounded-[0.35em] px-[0.35em] py-[0.08em]" style={{ background: accentColor, color: textColor }}>
+                <AnimatePresence mode="popLayout" initial={false}>
+                    <motion.span key={word} className="inline-flex whitespace-pre" aria-label={word}>
+                        {chars.map((c, k) => (
+                            <motion.span
+                                key={k}
+                                aria-hidden="true"
+                                className="inline-block"
+                                initial={{ y: "110%", opacity: 0 }}
+                                animate={{ y: 0, opacity: 1, transition: { type: "spring", stiffness: 420, damping: 30, delay: delayFor(k) } }}
+                                exit={{ y: "-120%", opacity: 0, transition: { duration: 0.22, ease: "easeIn", delay: delayFor(k) * 0.6 } }}
+                            >
+                                {c}
+                            </motion.span>
+                        ))}
+                    </motion.span>
+                </AnimatePresence>
+            </motion.span>
+        </span>
+    );
+};
+
+export default RotatingText;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Shiny Text: a bright band of light sweeps across the text on a loop, like
+ * light catching metal. The text keeps its own color between sweeps.
+ */
+
+const ShinyText = ({ text = "Shipping soon — join the waitlist", as = "span", speed = 2.8, color = "#71717a", shineColor = "#ffffff", spread = 22, disabled = false, className = "" }) => {
+    const reduced = useReducedMotion();
+    const Tag = motion[as] ?? motion.span;
+    const still = disabled || reduced;
+    return (
+        <Tag
+            className={`inline-block bg-clip-text text-transparent ${className}`}
+            style={{
+                backgroundImage: `linear-gradient(110deg, ${color} ${50 - spread}%, ${shineColor} 50%, ${color} ${50 + spread}%)`,
+                backgroundSize: "250% 100%",
+                WebkitBackgroundClip: "text",
+            }}
+            initial={{ backgroundPosition: "100% 0" }}
+            animate={still ? { backgroundPosition: "100% 0" } : { backgroundPosition: ["100% 0", "0% 0"] }}
+            transition={still ? undefined : { duration: speed, ease: "linear", repeat: Infinity, repeatDelay: speed * 0.25 }}
+        >
+            {text}
+        </Tag>
+    );
+};
+
+export default ShinyText;

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

@@ -0,0 +1,220 @@
+import React, { useId, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
+import { BarChart3, Bell, ChevronDown, FolderKanban, Home, Inbox, LifeBuoy, PanelLeftClose, PanelLeftOpen, Settings, Users } from "lucide-react";
+
+/*
+ * Sidebar Nav: an app sidebar that collapses to an icon rail. The active
+ * pill slides between items, groups open and close, badges show counts, and
+ * the rail shows each name as a tooltip.
+ */
+
+const DEFAULT_SECTIONS = [
+    {
+        title: "Main",
+        items: [
+            { id: "home", label: "Dashboard", icon: Home },
+            { id: "inbox", label: "Inbox", icon: Inbox, badge: 4 },
+            { id: "analytics", label: "Analytics", icon: BarChart3 },
+            {
+                id: "projects",
+                label: "Projects",
+                icon: FolderKanban,
+                children: [
+                    { id: "apex", label: "ApexUI" },
+                    { id: "website", label: "Website" },
+                    { id: "mobile", label: "Mobile app" },
+                ],
+            },
+            { id: "team", label: "Team", icon: Users },
+        ],
+    },
+    {
+        title: "Other",
+        items: [
+            { id: "notifications", label: "Notifications", icon: Bell, badge: 12 },
+            { id: "settings", label: "Settings", icon: Settings },
+            { id: "help", label: "Help", icon: LifeBuoy },
+        ],
+    },
+];
+
+const THEMES = {
+    dark: {
+        panel: "bg-neutral-950 text-white border-white/10",
+        muted: "text-white/45",
+        item: "text-white/70 hover:text-white hover:bg-white/[0.05]",
+        pill: "bg-white/[0.08]",
+        tip: "bg-white text-neutral-900",
+    },
+    light: {
+        panel: "bg-white text-neutral-900 border-black/10",
+        muted: "text-neutral-400",
+        item: "text-neutral-600 hover:text-neutral-900 hover:bg-black/[0.04]",
+        pill: "bg-black/[0.06]",
+        tip: "bg-neutral-900 text-white",
+    },
+};
+
+const SidebarNav = ({
+    sections = DEFAULT_SECTIONS,
+    brand = { name: "Apex", logo: null },
+    user = { name: "Mohan Dalei", email: "mohan@apex-ui.in", avatar: "https://ik.imagekit.io/ny6yinyut/apexui/assets/captainamerica.png?tr=f-auto,q-80,w-96" },
+    defaultActive = "home",
+    defaultCollapsed = false,
+    accentColor = "#a3e635",
+    theme = "dark",
+    onSelect,
+    className = "",
+}) => {
+    const t = THEMES[theme] ?? THEMES.dark;
+    const pillId = useId();
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [active, setActive] = useState(defaultActive);
+    const [open, setOpen] = useState(() => new Set(["projects"]));
+    const [tip, setTip] = useState(null);
+    const asideRef = useRef(null);
+
+    const select = (item) => {
+        setActive(item.id);
+        onSelect?.(item);
+    };
+    const toggle = (id) =>
+        setOpen((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+
+    // A render function (not a component) so rows keep their identity between renders.
+    const renderRow = (item, depth = 0) => {
+        const Icon = item.icon;
+        const hasChildren = Boolean(item.children?.length);
+        const isOpen = open.has(item.id);
+        const isActive = active === item.id || (hasChildren && collapsed && item.children.some((c) => c.id === active));
+        return (
+            <li key={item.id}>
+                <button
+                    type="button"
+                    onClick={() => (hasChildren && !collapsed ? toggle(item.id) : select(hasChildren ? item.children[0] : item))}
+                    onMouseEnter={(e) => {
+                        if (!collapsed) return;
+                        const r = e.currentTarget.getBoundingClientRect();
+                        setTip({ label: item.label, top: r.top + r.height / 2 - asideRef.current.getBoundingClientRect().top });
+                    }}
+                    onMouseLeave={() => setTip(null)}
+                    aria-label={item.label}
+                    aria-current={isActive ? "page" : undefined}
+                    aria-expanded={hasChildren && !collapsed ? isOpen : undefined}
+                    className={`relative flex h-9 w-full items-center gap-3 rounded-lg text-[0.86rem] font-medium transition-colors ${collapsed ? "justify-center px-0" : "px-2.5"} ${isActive ? "" : t.item}`}
+                    style={{ paddingLeft: !collapsed && depth ? "2.6rem" : undefined }}
+                >
+                    {isActive && (
+                        <motion.span layoutId={`${pillId}-pill`} className={`absolute inset-0 rounded-lg ${t.pill}`} transition={{ type: "spring", stiffness: 500, damping: 38 }}>
+                            <span className="absolute inset-y-2 left-0 w-[3px] rounded-full" style={{ background: accentColor }} />
+                        </motion.span>
+                    )}
+                    {Icon && <Icon className="relative h-[1.1rem] w-[1.1rem] shrink-0" style={isActive ? { color: accentColor } : undefined} />}
+                    {!collapsed && <span className="relative min-w-0 flex-1 truncate text-left">{item.label}</span>}
+                    {!collapsed && item.badge != null && (
+                        <span className="relative rounded-full px-1.5 py-px text-[0.68rem] font-semibold text-black" style={{ background: accentColor }}>
+                            {item.badge}
+                        </span>
+                    )}
+                    {collapsed && item.badge != null && <span className="absolute right-2 top-1.5 h-1.5 w-1.5 rounded-full" style={{ background: accentColor }} />}
+                    {!collapsed && hasChildren && <ChevronDown className={`relative h-4 w-4 opacity-60 transition-transform ${isOpen ? "rotate-180" : ""}`} />}
+                </button>
+                <AnimatePresence initial={false}>
+                    {hasChildren && isOpen && !collapsed && (
+                        <motion.ul
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: "auto", opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+                            className="relative mt-0.5 space-y-0.5 overflow-hidden"
+                        >
+                            <span aria-hidden="true" className={`absolute bottom-2 left-[1.3rem] top-1 w-px ${theme === "light" ? "bg-black/10" : "bg-white/10"}`} />
+                            {item.children.map((child) => renderRow(child, depth + 1))}
+                        </motion.ul>
+                    )}
+                </AnimatePresence>
+            </li>
+        );
+    };
+
+    return (
+        <motion.aside
+            ref={asideRef}
+            aria-label="Sidebar"
+            animate={{ width: collapsed ? "4.25rem" : "15.5rem" }}
+            transition={{ type: "spring", stiffness: 400, damping: 40 }}
+            className={`relative flex h-full shrink-0 flex-col border-r ${t.panel} ${className}`}
+        >
+            <div className={`flex items-center gap-2.5 px-3.5 ${collapsed ? "flex-col justify-center gap-2 py-3" : "h-14"}`}>
+                <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg font-bold text-black" style={{ background: accentColor }}>
+                    {brand.logo ? <img src={brand.logo} alt="" className="h-5 w-5" /> : brand.name?.[0]}
+                </span>
+                {!collapsed && <span className="truncate text-[0.95rem] font-semibold">{brand.name}</span>}
+                <button
+                    type="button"
+                    aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+                    onClick={() => {
+                        setCollapsed((c) => !c);
+                        setTip(null);
+                    }}
+                    className={`grid h-8 w-8 place-items-center rounded-lg ${t.item} ${collapsed ? "" : "ml-auto"}`}
+                >
+                    {collapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+                </button>
+            </div>
+
+            <LayoutGroup id={pillId}>
+                <nav className="relative flex-1 overflow-y-auto overflow-x-hidden px-2.5 pb-3" style={{ scrollbarWidth: "thin", scrollbarColor: `${theme === "light" ? "rgba(0,0,0,.15)" : "rgba(255,255,255,.15)"} transparent` }}>
+                    {sections.map((section) => (
+                        <div key={section.title} className="mt-3 first:mt-1">
+                            {!collapsed ? (
+                                <p className={`mb-1.5 px-2.5 text-[0.68rem] font-semibold uppercase tracking-[0.14em] ${t.muted}`}>{section.title}</p>
+                            ) : (
+                                <span aria-hidden="true" className={`mx-auto mb-2 block h-px w-6 ${theme === "light" ? "bg-black/10" : "bg-white/10"}`} />
+                            )}
+                            <ul className="space-y-0.5">
+                                {section.items.map((item) => renderRow(item))}
+                            </ul>
+                        </div>
+                    ))}
+                </nav>
+            </LayoutGroup>
+
+            <AnimatePresence>
+                {collapsed && tip && (
+                    <motion.span
+                        key={tip.label}
+                        role="tooltip"
+                        initial={{ opacity: 0, x: -4 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.12 }}
+                        className={`pointer-events-none absolute left-[4.6rem] z-50 whitespace-nowrap rounded-md px-2 py-1 text-[0.75rem] font-medium shadow-lg ${t.tip}`}
+                        style={{ top: tip.top, translateY: "-50%" }}
+                    >
+                        {tip.label}
+                    </motion.span>
+                )}
+            </AnimatePresence>
+
+            {user && (
+                <div className={`flex items-center gap-3 border-t p-3 ${theme === "light" ? "border-black/10" : "border-white/10"} ${collapsed ? "justify-center" : ""}`}>
+                    <img src={user.avatar} alt="" className="h-9 w-9 shrink-0 rounded-full object-cover ring-2" style={{ "--tw-ring-color": accentColor }} />
+                    {!collapsed && (
+                        <div className="min-w-0">
+                            <p className="truncate text-[0.85rem] font-semibold">{user.name}</p>
+                            <p className={`truncate text-[0.75rem] ${t.muted}`}>{user.email}</p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </motion.aside>
+    );
+};
+
+export default SidebarNav;

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { BarChart3, Globe2, Lock, Rocket, Sparkles, Zap } from "lucide-react";
+
+/*
+ * Spotlight Grid: a bento grid of cards sharing one pointer spotlight. The
+ * light lands on every card's border and surface at once, so moving across
+ * the grid feels like sweeping a torch over it.
+ */
+
+const DEFAULT_ITEMS = [
+    { title: "Lightning fast", description: "Ships as tiny chunks and loads only what a page needs.", icon: Zap, span: 2 },
+    { title: "Secure by default", description: "No tracking, no cookies, nothing to configure.", icon: Lock },
+    { title: "Global edge", description: "Served from 300+ cities close to your users.", icon: Globe2 },
+    { title: "Insights", description: "Real-time numbers for every component you add.", icon: BarChart3 },
+    { title: "Launch in minutes", description: "One CLI command copies the code into your project.", icon: Rocket },
+    { title: "Delightful motion", description: "Spring physics and GPU-friendly transforms everywhere.", icon: Sparkles, span: 2 },
+];
+
+const THEMES = {
+    dark: { card: "bg-neutral-950 text-white", base: "rgba(255,255,255,0.08)", muted: "text-white/55", icon: "bg-white/[0.06] text-white", edge: (c) => c, glow: 12 },
+    // On white, a bright accent washes out: darken the border light and strengthen the glow.
+    light: { card: "bg-white text-neutral-900 shadow-[0_1px_2px_rgba(0,0,0,0.04)]", base: "rgba(0,0,0,0.09)", muted: "text-neutral-500", icon: "bg-black/[0.04] text-neutral-900", edge: (c) => `color-mix(in srgb, ${c} 70%, #000)`, glow: 24 },
+};
+
+// "auto" follows the visitor's light / dark system setting.
+function useResolvedTheme(theme) {
+    const [system, setSystem] = useState("dark");
+    useEffect(() => {
+        if (theme !== "auto") return undefined;
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = () => setSystem(mq.matches ? "dark" : "light");
+        update();
+        mq.addEventListener("change", update);
+        return () => mq.removeEventListener("change", update);
+    }, [theme]);
+    return theme === "auto" ? system : theme;
+}
+
+const SpotlightGrid = ({ items = DEFAULT_ITEMS, color = "#a3e635", size = 360, theme = "auto", minCardWidth = 12, className = "" }) => {
+    const ref = useRef(null);
+    const t = THEMES[useResolvedTheme(theme)] ?? THEMES.dark;
+
+    // Every card gets the pointer position in its own coordinates.
+    const onMove = (e) => {
+        ref.current.querySelectorAll("[data-spot]").forEach((card) => {
+            const r = card.getBoundingClientRect();
+            card.style.setProperty("--mx", `${e.clientX - r.left}px`);
+            card.style.setProperty("--my", `${e.clientY - r.top}px`);
+            card.style.setProperty("--spot", "1");
+        });
+    };
+    const onLeave = () => ref.current.querySelectorAll("[data-spot]").forEach((card) => card.style.setProperty("--spot", "0"));
+
+    return (
+        <div
+            ref={ref}
+            onPointerMove={onMove}
+            onPointerLeave={onLeave}
+            className={`grid w-full gap-3 ${className}`}
+            style={{ gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minCardWidth}rem), 1fr))` }}
+        >
+            {items.map((item, i) => {
+                const Icon = item.icon;
+                return (
+                    <motion.article
+                        key={item.title ?? i}
+                        data-spot=""
+                        initial={{ opacity: 0, y: 12 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.45, delay: i * 0.05 }}
+                        className={`relative overflow-hidden rounded-2xl p-5 ${item.span > 1 ? "sm:col-span-2" : ""} ${t.card}`}
+                        style={{ "--spot": 0, boxShadow: `inset 0 0 0 1px ${t.base}` }}
+                    >
+                        {/* Border light: a ring-shaped mask over a radial gradient. */}
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute inset-0 rounded-[inherit] p-px transition-opacity duration-300"
+                            style={{
+                                opacity: "var(--spot)",
+                                background: `radial-gradient(${size}px circle at var(--mx) var(--my), ${t.edge(color)}, transparent 45%)`,
+                                WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                                WebkitMaskComposite: "xor",
+                                mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+                            }}
+                        />
+                        {/* Surface glow. */}
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute inset-0 transition-opacity duration-300"
+                            style={{ opacity: "var(--spot)", background: `radial-gradient(${size * 1.2}px circle at var(--mx) var(--my), color-mix(in srgb, ${color} ${t.glow}%, transparent), transparent 45%)` }}
+                        />
+                        <div className="relative">
+                            {Icon && (
+                                <span className={`mb-4 grid h-10 w-10 place-items-center rounded-xl ${t.icon}`}>
+                                    <Icon className="h-5 w-5" />
+                                </span>
+                            )}
+                            <h3 className="text-[1rem] font-semibold">{item.title}</h3>
+                            {item.description && <p className={`mt-1.5 text-[0.85rem] leading-relaxed ${t.muted}`}>{item.description}</p>}
+                        </div>
+                    </motion.article>
+                );
+            })}
+        </div>
+    );
+};
+
+export default SpotlightGrid;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Star Border: two soft points of light travel along the top and bottom
+ * edges of a button in opposite directions, like stars sliding around its
+ * rim. Renders a <button> by default; pass `as="a"` for a link.
+ */
+
+const StarBorder = ({ as = "button", color = "#a3e635", speed = 5, thickness = 1.5, theme = "dark", children = "Get started", className = "", ...rest }) => {
+    const reduced = useReducedMotion();
+    const Tag = as;
+    const dark = theme !== "light";
+    const star = (dir) => ({
+        background: `radial-gradient(circle, ${color}, transparent 10%)`,
+        animate: reduced ? undefined : { x: dir > 0 ? ["-35%", "35%"] : ["35%", "-35%"], opacity: [0, 1, 1, 0] },
+        transition: { duration: speed, ease: "linear", repeat: Infinity, times: [0, 0.15, 0.85, 1] },
+    });
+    const top = star(-1);
+    const bottom = star(1);
+
+    return (
+        <Tag className={`group relative inline-block overflow-hidden rounded-[1.1rem] ${className}`} style={{ padding: `${thickness}px 0` }} {...(as === "button" ? { type: "button" } : {})} {...rest}>
+            <motion.span aria-hidden="true" className="pointer-events-none absolute -bottom-[11px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: bottom.background }} animate={bottom.animate} transition={bottom.transition} />
+            <motion.span aria-hidden="true" className="pointer-events-none absolute -top-[10px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: top.background }} animate={top.animate} transition={top.transition} />
+            <span className={`relative z-[1] block rounded-[1.1rem] border px-7 py-3.5 text-center text-[0.95rem] font-semibold transition-colors ${dark ? "border-white/10 bg-gradient-to-b from-neutral-900 to-black text-white group-hover:border-white/20" : "border-black/10 bg-gradient-to-b from-white to-neutral-100 text-neutral-900 group-hover:border-black/20"}`}>
+                {children}
+            </span>
+        </Tag>
+    );
+};
+
+export default StarBorder;

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

@@ -0,0 +1,129 @@
+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 }),
+};
+
+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>
+
+            <motion.div layout className="relative mt-6 overflow-hidden" transition={{ type: "spring", stiffness: 300, damping: 32 }}>
+                <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="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>
+                        ) : (
+                            <>
+                                <p className="text-[0.72rem] font-semibold uppercase tracking-[0.18em]" style={{ color: accentColor }}>
+                                    Step {step + 1} of {steps.length}
+                                </p>
+                                <h3 className="mt-1 text-xl font-semibold">{steps[step].title}</h3>
+                                <div className={`mt-2 text-[0.92rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}>{steps[step].content}</div>
+                            </>
+                        )}
+                    </motion.div>
+                </AnimatePresence>
+            </motion.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;