apex-ui-kit 2.1.3 → 2.2.0

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/ToastStack/ToastStack.jsx

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

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

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