apex-ui-kit 2.1.3 → 2.3.0

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

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

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

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

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

@@ -0,0 +1,88 @@
+import React, { useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Plus } from "lucide-react";
+
+/*
+ * FAQ Accordion: questions that open with a smooth height animation, a plus
+ * that turns into a cross, and a soft highlight on the open item. One or many
+ * items can be open at once.
+ */
+
+const DEFAULT_ITEMS = [
+    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source — copy it into your project or add it with one CLI command." },
+    { q: "Does it work with Next.js?", a: "Yes. The components are plain React with Tailwind CSS, so they work in Vite, Next.js, Remix and anything else that runs React." },
+    { q: "Can I change the colors?", a: "Every component takes props for its accent colors, and the Tailwind classes are right there in the code if you want to go further." },
+    { q: "Do the animations respect reduced motion?", a: "Yes. Components check the visitor's reduced-motion setting and tone their movement down or switch it off." },
+];
+
+const FaqAccordion = ({ items = DEFAULT_ITEMS, multiple = false, defaultOpen = [0], accentColor = "#a3e635", theme = "dark", className = "" }) => {
+    const id = useId();
+    const [open, setOpen] = useState(() => new Set(defaultOpen));
+    const dark = theme !== "light";
+
+    const toggle = (i) =>
+        setOpen((prev) => {
+            const next = new Set(multiple ? prev : prev.has(i) ? [i] : []);
+            if (next.has(i)) next.delete(i);
+            else next.add(i);
+            return next;
+        });
+
+    return (
+        <div className={`w-full max-w-2xl space-y-2 ${className}`}>
+            {items.map((item, i) => {
+                const on = open.has(i);
+                return (
+                    <div
+                        key={i}
+                        className={`overflow-hidden rounded-2xl border transition-colors duration-300 ${dark ? "text-white" : "text-neutral-900"} ${
+                            on ? (dark ? "border-white/15 bg-white/[0.05]" : "border-black/10 bg-black/[0.03]") : dark ? "border-white/10 bg-transparent hover:bg-white/[0.03]" : "border-black/10 bg-transparent hover:bg-black/[0.02]"
+                        }`}
+                    >
+                        <button
+                            type="button"
+                            id={`${id}-q-${i}`}
+                            aria-expanded={on}
+                            aria-controls={`${id}-a-${i}`}
+                            onClick={() => toggle(i)}
+                            className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-[0.95rem] font-semibold outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current/30"
+                        >
+                            {item.q}
+                            <motion.span
+                                animate={{ rotate: on ? 45 : 0, backgroundColor: on ? accentColor : dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)", color: on ? "#0a0a0a" : dark ? "#fff" : "#111" }}
+                                transition={{ type: "spring", stiffness: 380, damping: 26 }}
+                                className="grid h-7 w-7 shrink-0 place-items-center rounded-full"
+                            >
+                                <Plus className="h-4 w-4" />
+                            </motion.span>
+                        </button>
+                        <AnimatePresence initial={false}>
+                            {on && (
+                                <motion.div
+                                    id={`${id}-a-${i}`}
+                                    role="region"
+                                    aria-labelledby={`${id}-q-${i}`}
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: "auto", opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ height: { duration: 0.32, ease: [0.22, 1, 0.36, 1] }, opacity: { duration: 0.2 } }}
+                                >
+                                    <motion.p
+                                        initial={{ y: -6 }}
+                                        animate={{ y: 0 }}
+                                        exit={{ y: -6 }}
+                                        className={`px-5 pb-5 text-[0.9rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}
+                                    >
+                                        {item.a}
+                                    </motion.p>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default FaqAccordion;

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

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Flip Book: a small 3D hardcover book. Pages turn around the spine and lift
+ * off the stack while a shadow sweeps across them; drag a page to turn it
+ * by hand, click it, use the buttons or the arrow keys. The page edges
+ * thicken on whichever side has more pages, and every page is numbered.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const DEFAULT_PAGES = [
+    { title: "ApexUI", body: "A field guide to motion", cover: true },
+    { title: "Chapter 1", body: "Start small. One spring, one easing, one idea per interaction." },
+    { title: "Chapter 2", body: "Motion should explain — where things come from and where they go.", image: `${IK}/spiderman.png?tr=f-auto,q-80,w-500` },
+    { title: "Chapter 3", body: "Keep it fast. Animate transform and opacity, never layout." },
+    { title: "Chapter 4", body: "Respect reduced motion. Calm is a feature too.", image: `${IK}/doctorStrange.png?tr=f-auto,q-80,w-500` },
+    { title: "Chapter 5", body: "Details compound. Tiny shadows and easing make it feel real." },
+    { title: "Chapter 6", body: "Test on a slow phone. If it stutters there, it is not done." },
+    { title: "The end", body: "Now go make something that feels alive.", cover: true },
+];
+
+const PAPER = "#f7f2e8";
+
+function Face({ page, number, accentColor, back }) {
+    const round = back ? "rounded-l-[0.7rem] rounded-r-sm" : "rounded-r-[0.7rem] rounded-l-sm";
+    if (!page) return <div className={`h-full w-full ${round}`} style={{ background: PAPER }} />;
+    if (page.cover) {
+        return (
+            <div className={`relative flex h-full w-full flex-col justify-between overflow-hidden p-6 text-neutral-950 ${round}`} style={{ background: `linear-gradient(135deg, ${accentColor}, color-mix(in srgb, ${accentColor} 50%, #000))` }}>
+                <div className="pointer-events-none absolute inset-3 rounded-md border border-black/15" />
+                <span className="text-[0.62rem] font-bold uppercase tracking-[0.3em] opacity-70">Volume 1</span>
+                <div>
+                    <p className="text-[1.6rem] font-black leading-none">{page.title}</p>
+                    <p className="mt-2 text-[0.82rem] font-medium opacity-80">{page.body}</p>
+                </div>
+                {/* Cloth texture */}
+                <div className="pointer-events-none absolute inset-0 opacity-[0.12] mix-blend-multiply" style={{ backgroundImage: "repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 4px)" }} />
+            </div>
+        );
+    }
+    return (
+        <div className={`flex h-full w-full flex-col p-5 text-neutral-800 ${round}`} style={{ background: PAPER }}>
+            <p className="text-[0.62rem] font-bold uppercase tracking-[0.25em]" style={{ color: `color-mix(in srgb, ${accentColor} 50%, #000)` }}>
+                {page.title}
+            </p>
+            {page.image && <img src={page.image} alt="" draggable="false" className="mt-3 h-[38%] w-full rounded-md object-cover object-top" />}
+            <p className="mt-3 font-serif text-[0.98rem] leading-relaxed">{page.body}</p>
+            <div className="mt-auto flex items-end justify-between gap-3">
+                {!page.image && (
+                    <div className="flex-1 space-y-1.5" aria-hidden="true">
+                        {[90, 75, 82].map((w, i) => (
+                            <span key={i} className="block h-1.5 rounded-full bg-neutral-900/10" style={{ width: `${w}%` }} />
+                        ))}
+                    </div>
+                )}
+                <span className={`font-mono text-[0.65rem] text-neutral-500 ${back ? "order-first" : "ml-auto"}`}>{number}</span>
+            </div>
+        </div>
+    );
+}
+
+// Stacked page edges peeking out under a page.
+const edges = (count, side) => {
+    const n = Math.min(6, Math.ceil(count * 1.5));
+    const dir = side === "right" ? 1 : -1;
+    return Array.from({ length: n }, (_, k) => `${dir * (k + 1)}px ${k + 1}px 0 ${k % 2 ? "#e4dccb" : "#efe8da"}`).join(", ") || "none";
+};
+
+function Sheet({ index, sheet, flipped, active, dragAngle, accentColor, total, onClick }) {
+    const rot = useMotionValue(flipped ? -180 : 0);
+    // Lift while turning, and darken the page as it faces away from the light.
+    const z = useTransform(rot, [0, -90, -180], [0, 40, 0]);
+    const frontShade = useTransform(rot, [0, -90], [0, 0.45]);
+    const backShade = useTransform(rot, [-90, -180], [0.45, 0]);
+
+    useEffect(() => {
+        if (dragAngle != null) rot.set(dragAngle);
+        else animate(rot, flipped ? -180 : 0, { type: "spring", stiffness: 75, damping: 16 });
+    }, [flipped, dragAngle, rot]);
+
+    return (
+        <motion.div className="group absolute inset-0 origin-left cursor-pointer [transform-style:preserve-3d]" style={{ rotateY: rot, z, zIndex: active ? 50 : flipped ? index : total - index }} onClick={onClick}>
+            <div className="absolute inset-0 shadow-[0_18px_36px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden]">
+                <Face page={sheet.front} number={index * 2 + 1} accentColor={accentColor} />
+                <div className="pointer-events-none absolute inset-y-0 left-0 w-10 bg-gradient-to-r from-black/20 via-black/5 to-transparent" />
+                <motion.div className="pointer-events-none absolute inset-0 rounded-r-[0.7rem] bg-gradient-to-l from-black to-black/40" style={{ opacity: frontShade }} />
+                {/* Dog-ear hint */}
+                {!flipped && <span className="pointer-events-none absolute bottom-0 right-0 h-7 w-7 origin-bottom-right scale-0 rounded-tl-md bg-gradient-to-tl from-transparent from-50% to-[#e2d9c6] to-50% shadow-[-2px_-2px_6px_rgba(0,0,0,0.15)] transition-transform duration-300 group-hover:scale-100" />}
+            </div>
+            <div className="absolute inset-0 shadow-[0_18px_36px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden] [transform:rotateY(180deg)]">
+                <Face page={sheet.back} number={index * 2 + 2} accentColor={accentColor} back />
+                <div className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-black/20 via-black/5 to-transparent" />
+                <motion.div className="pointer-events-none absolute inset-0 rounded-l-[0.7rem] bg-gradient-to-r from-black to-black/40" style={{ opacity: backShade }} />
+            </div>
+        </motion.div>
+    );
+}
+
+const FlipBook = ({ pages = DEFAULT_PAGES, width = 12, accentColor = "#a3e635", className = "" }) => {
+    // Sheets: page 0+1 on sheet 0, 2+3 on sheet 1, …
+    const sheets = [];
+    for (let i = 0; i < pages.length; i += 2) sheets.push({ front: pages[i], back: pages[i + 1] });
+    const [turned, setTurned] = useState(0);
+    const [drag, setDrag] = useState(null); // { sheet, angle }
+    const start = useRef(null);
+    const dragged = useRef(false);
+    const pageRef = useRef(null);
+    const go = (dir) => setTurned((t) => Math.min(sheets.length, Math.max(0, t + dir)));
+    const open = turned > 0 && turned < sheets.length;
+
+    const onDown = (e) => {
+        dragged.current = false;
+        start.current = { x: e.clientX, moved: false, w: pageRef.current.offsetWidth };
+    };
+    const onMove = (e) => {
+        const s = start.current;
+        if (!s) return;
+        const dx = e.clientX - s.x;
+        if (!s.moved && Math.abs(dx) < 6) return;
+        if (!s.moved) {
+            s.moved = true;
+            s.sheet = dx < 0 ? turned : turned - 1;
+            s.from = dx < 0 ? 0 : -180;
+            if (s.sheet < 0 || s.sheet >= sheets.length) return (start.current = null);
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        const angle = Math.max(-180, Math.min(0, s.from + (dx / s.w) * 180));
+        setDrag({ sheet: s.sheet, angle });
+    };
+    const onUp = () => {
+        const s = start.current;
+        start.current = null;
+        if (!s?.moved || !drag) return;
+        dragged.current = true;
+        const flippedNow = drag.angle < -90;
+        setTurned(flippedNow ? s.sheet + 1 : s.sheet);
+        setDrag(null);
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center gap-7 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") go(1);
+                if (e.key === "ArrowLeft") go(-1);
+            }}
+            aria-label="Flip book"
+        >
+            <div className="relative flex touch-pan-y select-none [perspective:2000px]" style={{ width: `min(${width * 2}rem, 92vw)` }} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}>
+                {/* Hardcover boards behind the open spread */}
+                <div className="pointer-events-none absolute -inset-x-2 -inset-y-2 rounded-xl transition-opacity duration-500" style={{ opacity: open ? 1 : 0, background: `color-mix(in srgb, ${accentColor} 35%, #111)`, boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6)" }} />
+                <div className="flex-1" />
+                <div ref={pageRef} className="relative aspect-[3/4] flex-1 [transform-style:preserve-3d]" style={{ transform: `translateX(${turned === 0 && !drag ? "-50%" : turned === sheets.length && !drag ? "50%" : "0%"})`, transition: "transform 600ms cubic-bezier(0.22,1,0.36,1)" }}>
+                    <div className="absolute inset-y-0 right-full w-full rounded-l-[0.7rem] transition-[opacity,box-shadow] duration-500" style={{ opacity: turned > 0 ? 1 : 0, boxShadow: edges(turned, "left") }} />
+                    <div className="absolute inset-0 rounded-r-[0.7rem] transition-[opacity,box-shadow] duration-500" style={{ opacity: turned < sheets.length ? 1 : 0, boxShadow: edges(sheets.length - turned, "right") }} />
+                    {sheets.map((sheet, i) => (
+                        <Sheet
+                            key={i}
+                            index={i}
+                            sheet={sheet}
+                            total={sheets.length}
+                            flipped={i < turned}
+                            active={drag?.sheet === i}
+                            dragAngle={drag?.sheet === i ? drag.angle : null}
+                            accentColor={accentColor}
+                            onClick={() => !dragged.current && go(i < turned ? -1 : 1)}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Previous page" onClick={() => go(-1)} disabled={turned === 0} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30">
+                    <ChevronLeft className="h-5 w-5" />
+                </button>
+                <div className="flex gap-1" aria-hidden="true">
+                    {Array.from({ length: sheets.length + 1 }, (_, i) => (
+                        <span key={i} className="h-1.5 rounded-full transition-all duration-300" style={{ width: i === turned ? 18 : 6, background: i === turned ? accentColor : "color-mix(in srgb, currentColor 25%, transparent)" }} />
+                    ))}
+                </div>
+                <button type="button" aria-label="Next page" onClick={() => go(1)} disabled={turned === sheets.length} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30">
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default FlipBook;

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

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Flip Clock: split-flap digits that fold over when they change. Count down
+ * to a date, count down a number of seconds, or show the time of day.
+ */
+
+const pad = (n) => String(n).padStart(2, "0");
+
+function partsFor(mode, target, seconds, start) {
+    const now = Date.now();
+    if (mode === "clock") {
+        const d = new Date(now);
+        return [
+            ["Hours", pad(d.getHours())],
+            ["Minutes", pad(d.getMinutes())],
+            ["Seconds", pad(d.getSeconds())],
+        ];
+    }
+    const end = mode === "date" ? new Date(target).getTime() : start + seconds * 1000;
+    const left = Math.max(0, Math.floor((end - now) / 1000));
+    return [
+        ["Days", pad(Math.floor(left / 86400))],
+        ["Hours", pad(Math.floor((left % 86400) / 3600))],
+        ["Minutes", pad(Math.floor((left % 3600) / 60))],
+        ["Seconds", pad(left % 60)],
+    ];
+}
+
+// One half of a digit card: the full glyph, clipped to the top or bottom half.
+function Half({ digit, top, card, style, ...motionProps }) {
+    return (
+        <motion.span
+            className={`absolute inset-x-0 h-1/2 overflow-hidden ${top ? "top-0 origin-bottom rounded-t-[0.14em]" : "bottom-0 origin-top rounded-b-[0.14em]"}`}
+            style={{ background: card, backfaceVisibility: "hidden", ...style }}
+            {...motionProps}
+        >
+            <span className={`absolute inset-x-0 grid h-[200%] place-items-center leading-none ${top ? "top-0" : "bottom-0"}`}>{digit}</span>
+        </motion.span>
+    );
+}
+
+function Flap({ digit, card, ink, moving }) {
+    const [prev, setPrev] = useState(digit);
+    const [flip, setFlip] = useState(0);
+
+    // A new digit: fold the old top half down, then swing the new bottom half in.
+    useEffect(() => {
+        if (digit === prev) return undefined;
+        if (!moving) {
+            setPrev(digit);
+            return undefined;
+        }
+        setFlip((f) => f + 1);
+        const t = setTimeout(() => setPrev(digit), 620);
+        return () => clearTimeout(t);
+    }, [digit, prev, moving]);
+
+    const flipping = digit !== prev;
+    return (
+        <span className="relative inline-block h-[1.35em] w-[0.9em] rounded-[0.14em] [perspective:400px]" style={{ color: ink }}>
+            <Half digit={digit} top card={card} />
+            <Half digit={flipping ? prev : digit} card={card} />
+            {flipping && (
+                <React.Fragment key={flip}>
+                    <Half digit={prev} top card={card} style={{ zIndex: 2 }} initial={{ rotateX: 0 }} animate={{ rotateX: -90 }} transition={{ duration: 0.3, ease: "easeIn" }} />
+                    <Half digit={digit} card={card} style={{ zIndex: 2 }} initial={{ rotateX: 90 }} animate={{ rotateX: 0 }} transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }} />
+                </React.Fragment>
+            )}
+            <span aria-hidden="true" className="absolute inset-x-0 top-1/2 z-[3] h-px bg-black/40" />
+        </span>
+    );
+}
+
+const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 + 25 * 60, accentColor = "#a3e635", theme = "dark", showLabels = true, size = 3, className = "" }) => {
+    const reduced = useReducedMotion();
+    const start = useRef(Date.now());
+    const [parts, setParts] = useState(() => partsFor(mode, target, seconds, start.current));
+
+    useEffect(() => {
+        start.current = Date.now();
+        const tick = () => setParts(partsFor(mode, target, seconds, start.current));
+        tick();
+        const id = setInterval(tick, 250);
+        return () => clearInterval(id);
+    }, [mode, target, seconds]);
+
+    const dark = theme !== "light";
+    const card = dark ? "#18181b" : "#f4f4f5";
+    const ink = dark ? "#fafafa" : "#18181b";
+
+    return (
+        <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `${size}rem` }}>
+            {parts.map(([label, value], i) => (
+                <React.Fragment key={label}>
+                    {i > 0 && (
+                        <span aria-hidden="true" className="flex h-[1.35em] flex-col justify-center gap-[0.18em]">
+                            <span className="h-[0.12em] w-[0.12em] rounded-full" style={{ background: accentColor }} />
+                            <span className="h-[0.12em] w-[0.12em] rounded-full" style={{ background: accentColor }} />
+                        </span>
+                    )}
+                    <span className="flex flex-col items-center">
+                        <span aria-hidden="true" className="flex gap-[0.08em]">
+                            {[...value].map((d, k) => (
+                                <Flap key={k} digit={d} card={card} ink={ink} moving={!reduced} />
+                            ))}
+                        </span>
+                        {showLabels && (
+                            <span className="mt-[0.4em] text-[0.22em] font-semibold uppercase tracking-[0.2em]" style={{ color: dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)" }}>
+                                {label}
+                            </span>
+                        )}
+                    </span>
+                </React.Fragment>
+            ))}
+        </div>
+    );
+};
+
+export default FlipClock;