apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+import { Check } from "lucide-react";
+
+/*
+ * Hold to Confirm: for actions you don't want to trigger by accident. Press
+ * and hold (pointer, Enter or Space) and a solid copy of the button wipes
+ * in from the left; let go, slide off the button or lose focus and it snaps
+ * back. Once the wipe finishes it confirms and resets after `resetAfter`.
+ */
+
+const HoldToConfirm = ({ children = "Hold to confirm", className = "", confirmedContent, disabled, duration = 1600, onConfirm, resetAfter = 1800, ...buttonProps }) => {
+    const buttonRef = useRef(null);
+    const confirmTimerRef = useRef(null);
+    const resetTimerRef = useRef(null);
+    const activePointerIdRef = useRef(null);
+    const inputModeRef = useRef("pointer");
+    const isHoldingRef = useRef(false);
+    const [inputMode, setInputMode] = useState(null);
+    const [status, setStatus] = useState("idle"); // idle | holding | confirmed
+    const shouldReduceMotion = useReducedMotion();
+
+    const clearConfirmTimer = useCallback(() => {
+        if (confirmTimerRef.current === null) return;
+        window.clearTimeout(confirmTimerRef.current);
+        confirmTimerRef.current = null;
+    }, []);
+
+    const completeHold = useCallback(() => {
+        if (!isHoldingRef.current) return;
+        isHoldingRef.current = false;
+        activePointerIdRef.current = null;
+        clearConfirmTimer();
+        setStatus("confirmed");
+        onConfirm?.(inputModeRef.current);
+        if (resetAfter > 0) {
+            resetTimerRef.current = window.setTimeout(() => {
+                setStatus("idle");
+                resetTimerRef.current = null;
+            }, resetAfter);
+        }
+    }, [clearConfirmTimer, onConfirm, resetAfter]);
+
+    const cancelHold = useCallback(() => {
+        if (!isHoldingRef.current) return;
+        isHoldingRef.current = false;
+        activePointerIdRef.current = null;
+        clearConfirmTimer();
+        setStatus("idle");
+    }, [clearConfirmTimer]);
+
+    const startHold = useCallback(
+        (input) => {
+            if (disabled || status === "confirmed" || isHoldingRef.current) return;
+            if (resetTimerRef.current !== null) {
+                window.clearTimeout(resetTimerRef.current);
+                resetTimerRef.current = null;
+            }
+            inputModeRef.current = input;
+            setInputMode(input);
+            isHoldingRef.current = true;
+            setStatus("holding");
+            confirmTimerRef.current = window.setTimeout(completeHold, duration);
+        },
+        [completeHold, disabled, duration, status],
+    );
+
+    useEffect(
+        () => () => {
+            clearConfirmTimer();
+            if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
+        },
+        [clearConfirmTimer],
+    );
+
+    useEffect(() => {
+        if (disabled) cancelHold();
+    }, [cancelHold, disabled]);
+
+    const releasePointerCapture = (pointerId) => {
+        const button = buttonRef.current;
+        if (button?.hasPointerCapture(pointerId)) button.releasePointerCapture(pointerId);
+    };
+
+    const handlePointerDown = (event) => {
+        if (!event.isPrimary || event.button !== 0 || disabled) return;
+        activePointerIdRef.current = event.pointerId;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        startHold("pointer");
+    };
+
+    const handlePointerMove = (event) => {
+        if (!isHoldingRef.current || activePointerIdRef.current !== event.pointerId) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const boundaryPadding = 8;
+        const isOutside = event.clientX < rect.left - boundaryPadding || event.clientX > rect.right + boundaryPadding || event.clientY < rect.top - boundaryPadding || event.clientY > rect.bottom + boundaryPadding;
+        if (isOutside) {
+            cancelHold();
+            releasePointerCapture(event.pointerId);
+        }
+    };
+
+    const handlePointerEnd = (event) => {
+        if (activePointerIdRef.current !== event.pointerId) return;
+        cancelHold();
+        releasePointerCapture(event.pointerId);
+    };
+
+    const handleKeyDown = (event) => {
+        if (event.repeat || (event.key !== "Enter" && event.key !== " ")) return;
+        event.preventDefault();
+        startHold("keyboard");
+    };
+
+    const handleKeyUp = (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        cancelHold();
+    };
+
+    const isConfirmed = status === "confirmed";
+    const isHolding = status === "holding";
+    const overlayStyle = {
+        clipPath: isHolding ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
+        transitionDuration: shouldReduceMotion || inputMode === "keyboard" ? "0ms" : isHolding ? `${duration}ms` : "180ms",
+        transitionProperty: "clip-path",
+        transitionTimingFunction: isHolding ? "linear" : "cubic-bezier(0.23, 1, 0.32, 1)",
+    };
+
+    return (
+        <button
+            {...buttonProps}
+            aria-busy={isHolding}
+            className={`relative isolate inline-flex h-9 min-w-40 cursor-pointer touch-none select-none items-center justify-center overflow-hidden rounded-lg border border-red-500 px-3 text-sm font-medium outline-none transition-[transform,border-color,background-color,color] duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent data-[input=pointer]:active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 ${isConfirmed ? "bg-red-500 text-white" : "bg-red-500/10 text-red-500"} ${className}`}
+            data-input={inputMode ?? undefined}
+            disabled={disabled}
+            onBlur={cancelHold}
+            onKeyDown={handleKeyDown}
+            onKeyUp={handleKeyUp}
+            onLostPointerCapture={cancelHold}
+            onPointerCancel={handlePointerEnd}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerEnd}
+            ref={buttonRef}
+            type="button"
+        >
+            {isConfirmed ? (
+                <span className="relative flex items-center justify-center gap-1.5">
+                    {confirmedContent ?? (
+                        <>
+                            <Check aria-hidden="true" className="h-[15px] w-[15px]" strokeWidth={3} />
+                            Confirmed
+                        </>
+                    )}
+                </span>
+            ) : (
+                <>
+                    <span className="relative flex items-center justify-center gap-1.5">{children}</span>
+                    <span aria-hidden="true" className="absolute inset-0 flex items-center justify-center gap-1.5 bg-red-500 px-3 text-white" style={overlayStyle}>
+                        {children}
+                    </span>
+                </>
+            )}
+        </button>
+    );
+};
+
+export default HoldToConfirm;

package/dist/ApexUI-Kit/templates/HoldToConfirm/UndoNotice.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+import { CheckCircle2, RotateCcw } from "lucide-react";
+
+/*
+ * Undo Notice: pairs with HoldToConfirm. Shows what just happened with an
+ * Undo button whose solid fill drains away over `duration`; when it runs
+ * out, onExpire fires. onUndo tells you if it came from a key or a pointer.
+ */
+
+const UndoNotice = ({ className = "", duration = 5000, message = "Project deleted", onExpire, onUndo }) => {
+    const [isCounting, setIsCounting] = useState(false);
+    const shouldReduceMotion = useReducedMotion();
+
+    useEffect(() => {
+        const frame = window.requestAnimationFrame(() => setIsCounting(true));
+        const timer = window.setTimeout(() => onExpire?.(), duration);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.clearTimeout(timer);
+        };
+    }, [duration, onExpire]);
+
+    return (
+        <div aria-live="polite" role="status" className={`flex min-h-9 w-full max-w-xs items-center justify-between gap-3 rounded-xl bg-neutral-100 p-1 pl-3 dark:bg-neutral-800 ${className}`}>
+            <div className="flex min-w-0 items-center gap-2">
+                <CheckCircle2 aria-hidden="true" className="h-4 w-4 shrink-0 fill-green-500 text-white dark:text-neutral-800" />
+                <p className="truncate text-xs font-medium text-neutral-900 dark:text-neutral-100">{message}</p>
+            </div>
+
+            <button
+                type="button"
+                onClick={(event) => onUndo?.(event.detail === 0 ? "keyboard" : "pointer")}
+                className="relative isolate flex h-7 min-w-20 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-neutral-200 bg-white px-2.5 text-xs font-medium text-neutral-600 outline-none transition-transform duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 focus-visible:ring-neutral-400 active:scale-[0.97] dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300"
+            >
+                <span className="flex items-center gap-1.5">
+                    <RotateCcw aria-hidden="true" className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    Undo
+                </span>
+                <span
+                    aria-hidden="true"
+                    className="absolute inset-0 flex items-center justify-center gap-1.5 bg-neutral-900 px-2.5 text-white dark:bg-neutral-100 dark:text-neutral-900"
+                    style={{
+                        clipPath: isCounting ? "inset(0 100% 0 0)" : "inset(0 0 0 0)",
+                        transitionDuration: shouldReduceMotion ? "0ms" : `${duration}ms`,
+                        transitionProperty: "clip-path",
+                        transitionTimingFunction: "linear",
+                    }}
+                >
+                    <RotateCcw aria-hidden="true" className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    Undo
+                </span>
+            </button>
+        </div>
+    );
+};
+
+export default UndoNotice;

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

@@ -0,0 +1,92 @@
+import React, { useRef } from "react";
+import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+
+/*
+ * Holo Card: a collectible-style card that tilts in 3D under the pointer.
+ * A rainbow foil and a glare follow the light, and the artwork, title and
+ * badge float at different depths so the card feels thick.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+
+const HoloCard = ({
+    image = `${IK}/doctorStrange.png?tr=f-auto,q-80,w-600`,
+    title = "Doctor Strange",
+    subtitle = "Sorcerer Supreme",
+    badge = "Legendary",
+    stat = "98",
+    accentColor = "#a3e635",
+    maxTilt = 16,
+    width = 17,
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const reduced = useReducedMotion();
+    const px = useMotionValue(0.5);
+    const py = useMotionValue(0.5);
+    const spring = { stiffness: 180, damping: 18, mass: 0.6 };
+    const sx = useSpring(px, spring);
+    const sy = useSpring(py, spring);
+    const rotateY = useTransform(sx, [0, 1], [-maxTilt, maxTilt]);
+    const rotateX = useTransform(sy, [0, 1], [maxTilt, -maxTilt]);
+    const glareX = useTransform(sx, (v) => `${v * 100}%`);
+    const glareY = useTransform(sy, (v) => `${v * 100}%`);
+    const foilPos = useTransform([sx, sy], ([x, y]) => `${x * 100}% ${y * 100}%`);
+    const glare = useMotionTemplate`radial-gradient(circle at ${glareX} ${glareY}, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%)`;
+    const shadow = useTransform([sx, sy], ([x, y]) => `${(0.5 - x) * 40}px ${(0.5 - y) * 40 + 30}px 60px -20px rgba(0,0,0,0.6)`);
+
+    const onMove = (e) => {
+        if (reduced) return;
+        const r = ref.current.getBoundingClientRect();
+        px.set((e.clientX - r.left) / r.width);
+        py.set((e.clientY - r.top) / r.height);
+    };
+    const onLeave = () => {
+        px.set(0.5);
+        py.set(0.5);
+    };
+
+    return (
+        <div className={`[perspective:1100px] ${className}`}>
+            <motion.article
+                ref={ref}
+                onPointerMove={onMove}
+                onPointerLeave={onLeave}
+                className="relative aspect-[5/7] cursor-pointer select-none rounded-[1.4rem] bg-neutral-900 [transform-style:preserve-3d]"
+                style={{ width: `min(${width}rem, 80vw)`, rotateX, rotateY, boxShadow: shadow }}
+                whileHover={{ scale: 1.03 }}
+                transition={{ type: "spring", stiffness: 260, damping: 20 }}
+            >
+                <div className="absolute inset-0 overflow-hidden rounded-[1.4rem] ring-1 ring-white/15">
+                    <img src={image} alt="" draggable="false" className="h-full w-full object-cover" />
+                    {/* Holographic foil: a rainbow that slides with the light. */}
+                    <motion.div
+                        aria-hidden="true"
+                        className="absolute inset-0 opacity-[0.22] mix-blend-color-dodge"
+                        style={{
+                            backgroundImage: "linear-gradient(115deg, transparent 20%, #ff7ad9 30%, #7afcff 40%, #fdff7a 50%, #7aff9b 60%, #b57aff 70%, transparent 80%)",
+                            backgroundSize: "260% 260%",
+                            backgroundPosition: foilPos,
+                        }}
+                    />
+                    <motion.div aria-hidden="true" className="absolute inset-0 mix-blend-overlay" style={{ background: glare }} />
+                    <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 to-transparent" />
+                </div>
+
+                {/* Layers that float above the card. */}
+                <div className="pointer-events-none absolute inset-x-4 top-4 flex items-center justify-between [transform:translateZ(40px)]">
+                    <span className="rounded-full px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-black shadow-lg" style={{ background: accentColor }}>
+                        {badge}
+                    </span>
+                    <span className="grid h-10 w-10 place-items-center rounded-full border border-white/30 bg-black/50 font-mono text-sm font-bold text-white backdrop-blur">{stat}</span>
+                </div>
+                <div className="pointer-events-none absolute inset-x-5 bottom-5 text-white [transform:translateZ(60px)]">
+                    <p className="text-[1.35rem] font-bold leading-tight drop-shadow-lg">{title}</p>
+                    <p className="text-[0.82rem] text-white/70">{subtitle}</p>
+                </div>
+            </motion.article>
+        </div>
+    );
+};
+
+export default HoloCard;

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

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from "react";
+import { ChevronsLeftRight } from "lucide-react";
+
+/*
+ * Image Compare: a before / after slider. Drag the handle (or click anywhere,
+ * or use the arrow keys) to wipe between the two images. Give one `image` and
+ * the "before" side is drawn with a CSS filter, or pass both `before` and `after`.
+ */
+
+const ImageCompare = ({
+    before,
+    after,
+    image = "https://ik.imagekit.io/ny6yinyut/apexui/assets/thanos.png?tr=f-auto,q-80,w-1200",
+    beforeFilter = "grayscale(1) contrast(1.05) brightness(0.9)",
+    beforeLabel = "Before",
+    afterLabel = "After",
+    defaultPosition = 50,
+    vertical = false,
+    accentColor = "#a3e635",
+    aspectRatio = "16 / 10",
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const [pos, setPos] = useState(defaultPosition);
+    const [held, setHeld] = useState(false);
+    const beforeSrc = before ?? image;
+    const afterSrc = after ?? image;
+
+    const fromPointer = (e) => {
+        const r = ref.current.getBoundingClientRect();
+        const p = vertical ? (e.clientY - r.top) / r.height : (e.clientX - r.left) / r.width;
+        setPos(Math.min(100, Math.max(0, p * 100)));
+    };
+    const onKeyDown = (e) => {
+        const step = e.shiftKey ? 10 : 2;
+        const delta = { ArrowLeft: -step, ArrowDown: vertical ? step : -step, ArrowRight: step, ArrowUp: vertical ? -step : step }[e.key];
+        if (delta === undefined) return;
+        e.preventDefault();
+        setPos((p) => Math.min(100, Math.max(0, p + delta)));
+    };
+
+    const clip = vertical ? `inset(0 0 ${100 - pos}% 0)` : `inset(0 ${100 - pos}% 0 0)`;
+
+    return (
+        <div
+            ref={ref}
+            onPointerDown={(e) => {
+                e.currentTarget.setPointerCapture(e.pointerId);
+                setHeld(true);
+                fromPointer(e);
+            }}
+            onPointerMove={(e) => held && fromPointer(e)}
+            onPointerUp={() => setHeld(false)}
+            onPointerCancel={() => setHeld(false)}
+            className={`group relative w-full select-none overflow-hidden rounded-2xl bg-neutral-900 ${vertical ? "cursor-row-resize touch-none" : "cursor-col-resize touch-pan-y"} ${className}`}
+            style={{ aspectRatio }}
+        >
+            <img src={afterSrc} alt={afterLabel} draggable="false" className="absolute inset-0 h-full w-full object-cover" />
+            <img
+                src={beforeSrc}
+                alt={beforeLabel}
+                draggable="false"
+                className="absolute inset-0 h-full w-full object-cover"
+                style={{ clipPath: clip, filter: before ? undefined : beforeFilter, transition: held ? "none" : "clip-path 200ms ease-out" }}
+            />
+
+            <span className="pointer-events-none absolute left-3 top-3 rounded-full bg-black/55 px-2.5 py-1 text-[0.7rem] font-semibold uppercase tracking-wider text-white backdrop-blur">{beforeLabel}</span>
+            <span className={`pointer-events-none absolute rounded-full bg-black/55 px-2.5 py-1 text-[0.7rem] font-semibold uppercase tracking-wider text-white backdrop-blur ${vertical ? "bottom-3 left-3" : "right-3 top-3"}`}>{afterLabel}</span>
+
+            {/* Divider and handle */}
+            <div
+                className="pointer-events-none absolute"
+                style={vertical ? { left: 0, right: 0, top: `${pos}%`, height: 2, marginTop: -1, background: accentColor, transition: held ? "none" : "top 200ms ease-out" } : { top: 0, bottom: 0, left: `${pos}%`, width: 2, marginLeft: -1, background: accentColor, transition: held ? "none" : "left 200ms ease-out" }}
+            >
+                <button
+                    type="button"
+                    role="slider"
+                    aria-label="Comparison position"
+                    aria-valuemin={0}
+                    aria-valuemax={100}
+                    aria-valuenow={Math.round(pos)}
+                    aria-orientation={vertical ? "vertical" : "horizontal"}
+                    onKeyDown={onKeyDown}
+                    className={`pointer-events-auto absolute left-1/2 top-1/2 grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full text-black shadow-[0_6px_20px_-4px_rgba(0,0,0,0.6)] outline-none transition-transform duration-200 focus-visible:ring-4 focus-visible:ring-white/50 ${held ? "scale-110" : "group-hover:scale-105"}`}
+                    style={{ background: accentColor }}
+                >
+                    <ChevronsLeftRight className={`h-5 w-5 ${vertical ? "rotate-90" : ""}`} />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default ImageCompare;

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

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Cloud, Database, Layout, Server, Shield } from "lucide-react";
+
+/*
+ * Iso Stack: layers drawn in isometric 3D, stacked like a sandwich. Hover
+ * (or tap) and the stack fans open so each layer's label shows; hover one
+ * layer to lift it out. Great for architecture or feature diagrams.
+ */
+
+const DEFAULT_LAYERS = [
+    { label: "Interface", note: "React + Tailwind", icon: Layout, color: "#a3e635" },
+    { label: "Edge", note: "CDN & caching", icon: Cloud, color: "#38bdf8" },
+    { label: "Security", note: "Auth & rate limits", icon: Shield, color: "#a78bfa" },
+    { label: "API", note: "Node services", icon: Server, color: "#f59e0b" },
+    { label: "Data", note: "Postgres + Redis", icon: Database, color: "#f43f5e" },
+];
+
+const IsoStack = ({ layers = DEFAULT_LAYERS, size = 13, gap = 1.6, theme = "dark", className = "" }) => {
+    const [open, setOpen] = useState(false);
+    const [hover, setHover] = useState(-1);
+    const dark = theme !== "light";
+    const n = layers.length;
+
+    return (
+        <div
+            className={`relative flex items-center justify-center ${className}`}
+            style={{ height: `${size * 0.6 + n * gap * 1.6 + 6}rem`, width: "100%" }}
+            onPointerEnter={(e) => e.pointerType === "mouse" && setOpen(true)}
+            onPointerLeave={() => {
+                setOpen(false);
+                setHover(-1);
+            }}
+            onClick={() => setOpen((o) => !o)}
+        >
+            {/* Shifted down so the fully opened stack stays inside the frame. */}
+            <div className="relative" style={{ width: `${size}rem`, height: `${size}rem`, marginTop: `${n * gap * 0.9}rem`, transform: "rotateX(58deg) rotateZ(-45deg)", transformStyle: "preserve-3d" }}>
+                {layers.map((layer, i) => {
+                    const Icon = layer.icon;
+                    const fromTop = i;
+                    const lift = (n - 1 - fromTop) * (open ? gap * 2.1 : gap * 0.55) + (hover === i ? 1.2 : 0);
+                    return (
+                        <motion.div
+                            key={layer.label}
+                            className="absolute inset-0 rounded-2xl border"
+                            style={{
+                                zIndex: n - fromTop,
+                                background: dark ? `linear-gradient(135deg, color-mix(in srgb, ${layer.color} 22%, #0a0a0a), #0a0a0a)` : `linear-gradient(135deg, color-mix(in srgb, ${layer.color} 30%, #fff), #fff)`,
+                                borderColor: `color-mix(in srgb, ${layer.color} 60%, transparent)`,
+                                boxShadow: `0 0 0 1px ${layer.color}22, -18px 18px 30px -12px rgba(0,0,0,${dark ? 0.6 : 0.25})`,
+                            }}
+                            animate={{ z: `${lift}rem` }}
+                            transition={{ type: "spring", stiffness: 200, damping: 22, delay: open ? (n - fromTop) * 0.03 : 0 }}
+                            onPointerEnter={() => setHover(i)}
+                            onPointerLeave={() => setHover(-1)}
+                        >
+                            <div className="absolute inset-3 rounded-xl border border-dashed" style={{ borderColor: `color-mix(in srgb, ${layer.color} 35%, transparent)` }} />
+                            <span className="absolute left-4 top-4 grid h-9 w-9 place-items-center rounded-lg" style={{ background: layer.color, color: "#0a0a0a" }}>
+                                {Icon && <Icon className="h-5 w-5" />}
+                            </span>
+                        </motion.div>
+                    );
+                })}
+            </div>
+
+            {/* Labels sit outside the 3D plane so they stay readable. */}
+            <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 flex-col gap-2 sm:right-6">
+                {layers.map((layer, i) => (
+                    <motion.div
+                        key={layer.label}
+                        className={`rounded-lg border px-2.5 py-1.5 text-right backdrop-blur ${dark ? "border-white/10 bg-black/50 text-white" : "border-black/10 bg-white/80 text-neutral-900"}`}
+                        animate={{ opacity: open ? 1 : 0, x: open ? 0 : 12, scale: hover === i ? 1.05 : 1 }}
+                        transition={{ delay: open ? i * 0.05 : 0 }}
+                    >
+                        <p className="text-[0.78rem] font-semibold" style={{ color: hover === i ? layer.color : undefined }}>
+                            {layer.label}
+                        </p>
+                        <p className="text-[0.65rem] opacity-60">{layer.note}</p>
+                    </motion.div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default IsoStack;