apex-ui-kit 2.1.0 → 2.1.2

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

@@ -63,7 +63,7 @@ export default function CardStack({
     return (
         <div
             ref={containerRef}
-            className="relative flex justify-center items-end h-[440px] w-full max-w-lg mx-auto pb-2"
+            className="relative flex justify-center items-end h-[27.5rem] w-full max-w-lg mx-auto pb-2"
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
@@ -78,7 +78,7 @@ export default function CardStack({
                     <div
                         key={idx}
                         onClick={isTop ? next : undefined}
-                        className={`card-item group absolute bottom-2 left-0 right-0 mx-auto h-[360px] w-[280px] max-w-[calc(100%-1rem)] origin-bottom overflow-hidden rounded-[1.75rem] border border-white/15 bg-slate-950 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] select-none ${isTop ? "cursor-pointer" : "pointer-events-none"}`}
+                        className={`card-item group absolute bottom-2 left-0 right-0 mx-auto h-[22.5rem] w-[17.5rem] max-w-[calc(100%-1rem)] origin-bottom overflow-hidden rounded-[1.75rem] border border-white/15 bg-slate-950 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] select-none ${isTop ? "cursor-pointer" : "pointer-events-none"}`}
                         style={{ opacity: 0 }}
                     >
                         {/* Full-bleed image */}

package/dist/ApexUI-Kit/templates/Cards/BasicCard.jsx

@@ -9,10 +9,10 @@ const ProfileCard = ({ title, summary, image, link }) => {
             initial={{ y: 20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            className="w-[280px] max-w-full rounded-2xl bg-slate-950 border border-gray-800 shadow-2xl overflow-hidden p-2 shadow-lime-700/20"
+            className="w-[17.5rem] max-w-full rounded-2xl bg-slate-950 border border-gray-800 shadow-2xl overflow-hidden p-2 shadow-lime-700/20"
         >
-            {/* Image: fixed px size so the card keeps its shape on every screen */}
-            <div className="h-[200px] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
+            {/* Image: fixed size (in rem, like the text) so the card keeps its shape on every screen */}
+            <div className="h-[12.5rem] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
                 <motion.img
                     src={image}
                     alt={title}

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

@@ -69,7 +69,8 @@ const FlipProfile = ({
     return (
         <div className="w-full flex items-center justify-center p-4" style={{ perspective: "1200px" }}>
             <motion.div
-                className="relative w-[300px] max-w-full h-[420px] cursor-pointer"
+                // Sized in rem (300×420 at a 16px root) so the card grows with its rem-based content.
+                className="relative w-[18.75rem] max-w-full h-[26.25rem] cursor-pointer"
                 style={{ transformStyle: "preserve-3d" }}
                 variants={cardVariants}
                 animate={isFlipped ? "flipped" : "initial"}

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

@@ -42,7 +42,7 @@ const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
     return (
         <div className="flex flex-wrap justify-center gap-6">
             {data.map((item, index) => (
-                <div key={index} className="relative w-[320px] max-w-full bg-slate-800/80 p-0.5 rounded-2xl moving-border-card">
+                <div key={index} className="relative w-[20rem] max-w-full bg-slate-800/80 p-0.5 rounded-2xl moving-border-card">
                     {/* Card ka content container */}
                     <div className="relative bg-slate-900 rounded-[calc(1rem-2px)] p-3 flex flex-col overflow-hidden">
                         {/* Background Effects */}
@@ -59,7 +59,7 @@ const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
                         <div className="absolute -top-1/4 -left-1/4 w-3/4 h-1/2 bg-blue-400/60 rounded-full blur-[90px] pointer-events-none z-0"></div>
 
                         {/* Image */}
-                        <div className="relative h-[220px] w-full rounded-xl overflow-hidden z-10 ring-1 ring-white/10">
+                        <div className="relative h-[13.75rem] w-full rounded-xl overflow-hidden z-10 ring-1 ring-white/10">
                             <img src={item.imageUrl} alt={item.title} className="w-full h-full object-cover object-[center_25%]" />
                         </div>
 

package/dist/ApexUI-Kit/templates/OrbsBackground/FloatingOrbs.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { motion } from 'framer-motion';
 
 // --- FloatingOrbsBackground Component (Optimized for Mobile) ---
+// Orbs start together in the centre and drift outwards inside the container, then glide back.
 const FloatingOrbsBackground = ({
     children,
     className,
@@ -11,78 +12,77 @@ const FloatingOrbsBackground = ({
     desktopOrbs = 20, // Orbs for desktop
     mobileOrbs = 10,   // Orbs for mobile
 }) => {
-    const [numberOfOrbs, setNumberOfOrbs] = useState(desktopOrbs);
-    const [isMobile, setIsMobile] = useState(false);
+    const boxRef = useRef(null);
+    const [box, setBox] = useState({ w: 0, h: 0 });
+    const isMobile = box.w > 0 && box.w < 768;
+    const numberOfOrbs = isMobile ? mobileOrbs : desktopOrbs;
 
-    // Screen size check karne ke liye
+    // Measure the container so the orbs roam inside it (not the whole window).
     useEffect(() => {
-        const checkScreenSize = () => {
-            const isMobileDevice = window.innerWidth < 768;
-            setIsMobile(isMobileDevice);
-            setNumberOfOrbs(isMobileDevice ? mobileOrbs : desktopOrbs);
-        };
-
-        checkScreenSize(); // Pehli baar check karein
-        window.addEventListener('resize', checkScreenSize);
-
-        // Cleanup
-        return () => window.removeEventListener('resize', checkScreenSize);
-    }, [desktopOrbs, mobileOrbs]);
+        const el = boxRef.current;
+        if (!el) return;
+        const measure = () => setBox({ w: el.offsetWidth, h: el.offsetHeight });
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
 
     const orbColors = colors ?? [
         "#10b981", "#06b6d4", "#6366f1", "#a855f7",
         "#d946ef", "#ec4899", "#f43f5e", "#f97316",
     ];
 
+    // Random paths are picked once per size change, so re-renders don't make the orbs jump.
+    const orbs = useMemo(() => {
+        const rangeX = box.w * 0.42;
+        const rangeY = box.h * 0.38;
+        const rand = (range) => Math.round((Math.random() * 2 - 1) * range);
+        return Array.from({ length: numberOfOrbs }, () => ({
+            size: Math.random() * 160 + (isMobile ? 90 : 130),
+            duration: Math.random() * 14 + 12,
+            x: [0, rand(rangeX), rand(rangeX), rand(rangeX)],
+            y: [0, rand(rangeY), rand(rangeY), rand(rangeY)],
+        }));
+    }, [numberOfOrbs, box.w, box.h, isMobile]);
+
     return (
         <div
+            ref={boxRef}
             className={`relative h-[60vh] lg:h-[80vh] w-full flex flex-col items-center justify-center overflow-hidden bg-slate-950 ${containerClassName}`}
         >
             {/* Orbs Container */}
             <div className="absolute inset-0 z-0 w-full h-full">
-                {Array.from({ length: numberOfOrbs }).map((_, index) => {
-                    const size = Math.random() * 200 + 100;
-                    const duration = Math.random() * 20 + 15;
-                    // Mobile ke liye blur kam kar diya hai
-                    const blur = isMobile ? '60px' : '80px';
-
-                    return (
-                        <motion.div
-                            key={index}
-                            className="absolute rounded-full"
-                            style={{
-                                width: size,
-                                height: size,
-                                backgroundColor: orbColors[index % orbColors.length],
-                                filter: `blur(${blur})`,
-                                opacity: 0.4,
-                                // Performance behtar karne ke liye browser ko hint dena
-                                willChange: 'transform, opacity',
-                            }}
-                            animate={{
-                                x: [
-                                    // Movement range ko badha diya hai taaki yeh poori screen cover kare
-                                    `${Math.random() * 150 - 75}vw`,
-                                    `${Math.random() * 150 - 75}vw`,
-                                    `${Math.random() * 150 - 75}vw`,
-                                ],
-                                y: [
-                                    // Movement range ko badha diya hai taaki yeh poori screen cover kare
-                                    `${Math.random() * 150 - 75}vh`,
-                                    `${Math.random() * 150 - 75}vh`,
-                                    `${Math.random() * 150 - 75}vh`,
-                                ],
-                                scale: [1, 1.2, 1],
-                            }}
-                            transition={{
-                                duration: duration,
-                                repeat: Infinity,
-                                ease: 'easeInOut',
-                                repeatType: 'mirror',
-                            }}
-                        />
-                    );
-                })}
+                {box.w > 0 && orbs.map((orb, index) => (
+                    <motion.div
+                        key={index}
+                        className="absolute left-1/2 top-1/2 rounded-full"
+                        style={{
+                            width: orb.size,
+                            height: orb.size,
+                            marginLeft: -orb.size / 2,
+                            marginTop: -orb.size / 2,
+                            backgroundColor: orbColors[index % orbColors.length],
+                            filter: `blur(${isMobile ? 45 : 60}px)`,
+                            mixBlendMode: 'screen',
+                            // Performance behtar karne ke liye browser ko hint dena
+                            willChange: 'transform, opacity',
+                        }}
+                        initial={{ x: 0, y: 0, scale: 0.6, opacity: 0 }}
+                        animate={{
+                            x: orb.x,
+                            y: orb.y,
+                            scale: [0.8, 1.15, 0.95, 1.1],
+                            opacity: [0.85, 0.7, 0.8, 0.7],
+                        }}
+                        transition={{
+                            duration: orb.duration,
+                            repeat: Infinity,
+                            ease: 'easeInOut',
+                            repeatType: 'mirror',
+                        }}
+                    />
+                ))}
             </div>
 
             <div className={`relative z-10 ${className}`}>

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

@@ -57,7 +57,7 @@ const ParallaxProfileCard = ({ profile }) => {
     return (
         <div
             ref={cardRef}
-            className="relative w-[300px] max-w-full bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40"
+            className="relative w-[18.75rem] max-w-full bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40"
             style={{ transformStyle: "preserve-3d" }}
         >
             <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#0b1220] rounded-3xl"></div>

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

@@ -0,0 +1,304 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { CircleCheck, LoaderCircle, Printer, RotateCcw } from "lucide-react";
+
+/*
+ * Receipt Printer: a little thermal printer that processes a payment, feeds a
+ * receipt out of its slot and settles on "Payment complete".
+ *
+ * Runs on its own (autoPlay) or follows a controlled `stage`:
+ *   "processing" → "printing" → "complete"
+ */
+
+const defaultItems = [
+    { name: "Iced Latte", qty: 2, price: 4.5 },
+    { name: "Blueberry Muffin", qty: 1, price: 3.25 },
+    { name: "Avocado Toast", qty: 1, price: 8.9 },
+    { name: "Sparkling Water", qty: 1, price: 2 },
+];
+
+const STATUS = {
+    processing: { label: "Processing payment", Icon: LoaderCircle },
+    printing: { label: "Printing receipt", Icon: Printer },
+    complete: { label: "Payment complete", Icon: CircleCheck },
+};
+
+const ease = [0.22, 1, 0.36, 1];
+
+/*
+ * Keyframes for a "stepped" feed: the paper advances in short bursts with a
+ * pause after each one, like a thermal printer printing line by line.
+ */
+function steppedFeed(steps = 9, moveShare = 0.62) {
+    const y = ["-100%"];
+    const times = [0];
+    for (let i = 1; i <= steps; i++) {
+        // Ease the step sizes so the paper starts slow and speeds up a little.
+        const progress = 1 - Math.pow(1 - i / steps, 1.35);
+        const at = -100 + progress * 100;
+        const start = (i - 1) / steps;
+        const end = i / steps;
+        y.push(`${at.toFixed(2)}%`, `${at.toFixed(2)}%`);
+        times.push(start + (end - start) * moveShare, end);
+    }
+    return { y, times };
+}
+
+// Bar widths derived from the order id, so the same order always gets the same barcode.
+function barcodeBars(code, count = 38) {
+    const seed = [...String(code)].reduce((sum, ch, i) => sum + ch.charCodeAt(0) * (i + 7), 0);
+    return Array.from({ length: count }, (_, i) => 1 + ((seed * (i + 3) * 2654435761) >>> 0) % 3);
+}
+
+const money = (value, currency) => `${currency}${value.toFixed(2)}`;
+
+// Zig-zag tear along the bottom edge of the paper.
+const tearMask = {
+    WebkitMask:
+        "linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x",
+    mask: "linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x",
+};
+
+function Receipt({ store, address, items, currency, taxRate, orderId, date }) {
+    const subtotal = items.reduce((sum, item) => sum + item.qty * item.price, 0);
+    const tax = subtotal * taxRate;
+    const bars = useMemo(() => barcodeBars(orderId), [orderId]);
+
+    return (
+        <article
+            className="relative bg-[#fbfaf5] px-5 pb-8 pt-5 font-mono text-[0.72rem] leading-relaxed text-zinc-800 shadow-[0_18px_30px_-18px_rgba(0,0,0,0.6)]"
+            style={tearMask}
+        >
+            {/* faint thermal-paper grain */}
+            <div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 opacity-[0.35]"
+                style={{ backgroundImage: "repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px)" }}
+            />
+            <div className="relative">
+                <p className="text-center text-[0.85rem] font-bold uppercase tracking-[0.18em]">{store}</p>
+                {address && <p className="mt-0.5 text-center text-[0.65rem] text-zinc-500">{address}</p>}
+                <p className="mt-0.5 text-center text-[0.65rem] text-zinc-500">{date}</p>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <ul className="space-y-1">
+                    {items.map((item, i) => (
+                        <li key={i} className="flex justify-between gap-3">
+                            <span className="min-w-0 truncate">
+                                {item.qty} × {item.name}
+                            </span>
+                            <span className="shrink-0 tabular-nums">{money(item.qty * item.price, currency)}</span>
+                        </li>
+                    ))}
+                </ul>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <div className="space-y-0.5 text-zinc-600">
+                    <p className="flex justify-between"><span>Subtotal</span><span className="tabular-nums">{money(subtotal, currency)}</span></p>
+                    <p className="flex justify-between"><span>Tax {Math.round(taxRate * 100)}%</span><span className="tabular-nums">{money(tax, currency)}</span></p>
+                </div>
+                <p className="mt-2 flex justify-between text-[0.85rem] font-bold">
+                    <span>TOTAL</span>
+                    <span className="tabular-nums">{money(subtotal + tax, currency)}</span>
+                </p>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <div aria-hidden="true" className="flex h-9 items-stretch justify-center gap-[1.5px]">
+                    {bars.map((w, i) => (
+                        <span key={i} className="bg-zinc-800" style={{ width: w }} />
+                    ))}
+                </div>
+                <p className="mt-1 text-center text-[0.62rem] tracking-[0.3em] text-zinc-500">{orderId}</p>
+                <p className="mt-3 text-center text-[0.65rem] font-semibold uppercase tracking-[0.25em]">Thank you</p>
+            </div>
+        </article>
+    );
+}
+
+const ReceiptPrinter = ({
+    store = "ApexUI Café",
+    address = "221B Baker Street",
+    items = defaultItems,
+    currency = "$",
+    taxRate = 0.08,
+    orderId = "AX-20491",
+    date,
+    stage,
+    autoPlay = true,
+    feed = "stepped",
+    processingTime = 1600,
+    printTime = 2200,
+    accentColor = "#a3e635",
+    onComplete,
+    className = "",
+}) => {
+    const controlled = stage !== undefined;
+    const [ownStage, setOwnStage] = useState(autoPlay ? "processing" : "complete");
+    const [run, setRun] = useState(0);
+    const current = controlled ? stage : ownStage;
+    const reduceMotion = useReducedMotion();
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+
+    // Self-running sequence (skipped when the parent controls the stage).
+    useEffect(() => {
+        if (controlled || (!autoPlay && run === 0)) return undefined;
+        setOwnStage("processing");
+        const toPrint = setTimeout(() => setOwnStage("printing"), processingTime);
+        const toDone = setTimeout(() => {
+            setOwnStage("complete");
+            onCompleteRef.current?.();
+        }, processingTime + printTime);
+        return () => {
+            clearTimeout(toPrint);
+            clearTimeout(toDone);
+        };
+    }, [controlled, autoPlay, run, processingTime, printTime]);
+
+    const printedAt = useMemo(
+        () =>
+            date ??
+            new Date().toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }),
+        // A fresh timestamp for every print run.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [date, run]
+    );
+
+    const stepped = useMemo(() => steppedFeed(), []);
+    const moving = !reduceMotion;
+    const paperY =
+        current === "processing"
+            ? "-100%"
+            : current === "printing" && moving
+                ? feed === "stepped"
+                    ? stepped.y
+                    : "0%"
+                : "0%";
+    const paperTransition =
+        current === "printing" && moving
+            ? feed === "stepped"
+                ? { duration: printTime / 1000, ease: "linear", times: stepped.times }
+                : { duration: printTime / 1000, ease: [0.65, 0, 0.35, 1] }
+            : { duration: 0 };
+
+    const { label, Icon } = STATUS[current] ?? STATUS.processing;
+    const itemCount = items.reduce((sum, item) => sum + item.qty, 0);
+
+    return (
+        <section aria-label="Receipt printer" className={`relative isolate flex w-[20rem] max-w-full flex-col items-center ${className}`}>
+            {/* Machine */}
+            <div
+                className="relative z-20 w-full rounded-[1.75rem] border border-white/10 bg-[#1b1b20] p-3 pb-8 shadow-[0_30px_60px_-30px_rgba(0,0,0,0.85),inset_0_1px_0_rgba(255,255,255,0.08),inset_0_-2px_0_rgba(0,0,0,0.5)]"
+            >
+                {/* matte plastic texture */}
+                <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-[0.12]"
+                    style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.7) 0.5px, transparent 0.6px)", backgroundSize: "4px 4px" }}
+                />
+
+                {/* Top row: brand, LED and reprint */}
+                <div className="relative flex h-10 items-center justify-between px-2">
+                    <span className="font-mono text-[0.6rem] uppercase tracking-[0.3em] text-white/40">Apex · Print</span>
+                    <div className="flex items-center gap-2">
+                        <span
+                            aria-hidden="true"
+                            className={`h-2 w-2 rounded-full ${current === "printing" && moving ? "animate-pulse" : ""}`}
+                            style={{
+                                backgroundColor: current === "complete" ? accentColor : current === "printing" ? accentColor : "#f59e0b",
+                                boxShadow: `0 0 10px ${current === "processing" ? "#f59e0b" : accentColor}`,
+                            }}
+                        />
+                        {!controlled && (
+                            <button
+                                type="button"
+                                onClick={() => setRun((r) => r + 1)}
+                                disabled={current !== "complete"}
+                                aria-label="Print again"
+                                title="Print again"
+                                className="flex h-7 w-7 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition hover:text-white disabled:pointer-events-none disabled:opacity-30"
+                            >
+                                <RotateCcw className="h-3.5 w-3.5" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* Screen */}
+                <div className="relative overflow-hidden rounded-[1.1rem] border border-black/60 bg-[#0b0e0c] px-4 py-3.5 shadow-[inset_0_2px_12px_rgba(0,0,0,0.8)]">
+                    <div className="flex items-center gap-2.5" role="status" aria-live="polite">
+                        <span className="relative grid h-5 w-5 shrink-0 place-items-center" style={{ color: current === "processing" ? "#f59e0b" : accentColor }}>
+                            <AnimatePresence initial={false} mode="popLayout">
+                                <motion.span
+                                    key={current}
+                                    initial={moving ? { opacity: 0, scale: 0.7 } : false}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={moving ? { opacity: 0, scale: 0.7 } : { opacity: 0 }}
+                                    transition={{ duration: 0.2, ease }}
+                                    className="grid place-items-center"
+                                >
+                                    <Icon className={`h-[18px] w-[18px] ${current === "processing" && moving ? "animate-spin" : ""}`} strokeWidth={2.2} />
+                                </motion.span>
+                            </AnimatePresence>
+                        </span>
+                        <div className="relative h-4 min-w-0 flex-1 overflow-hidden">
+                            <AnimatePresence initial={false} mode="popLayout">
+                                <motion.p
+                                    key={current}
+                                    initial={moving ? { opacity: 0, y: 8 } : false}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={moving ? { opacity: 0, y: -8 } : { opacity: 0 }}
+                                    transition={{ duration: 0.22, ease }}
+                                    className="truncate text-xs font-medium leading-4 text-zinc-200"
+                                >
+                                    {label}
+                                </motion.p>
+                            </AnimatePresence>
+                        </div>
+                    </div>
+                    <div className="mt-2.5 flex items-center justify-between font-mono text-[0.62rem] text-zinc-500">
+                        <span>#{orderId}</span>
+                        <span>{itemCount} items</span>
+                    </div>
+                    {/* Progress while printing */}
+                    <div className="mt-2 h-1 overflow-hidden rounded-full bg-white/5">
+                        <motion.div
+                            key={`${run}-${current}`}
+                            className="h-full rounded-full"
+                            style={{ backgroundColor: current === "processing" ? "#f59e0b" : accentColor }}
+                            initial={{ width: current === "printing" ? "0%" : current === "complete" ? "100%" : "35%" }}
+                            animate={{ width: current === "processing" ? ["15%", "60%", "15%"] : "100%" }}
+                            transition={
+                                current === "processing"
+                                    ? { duration: 1.4, repeat: Infinity, ease: "easeInOut" }
+                                    : { duration: current === "printing" && moving ? printTime / 1000 : 0, ease: "linear" }
+                            }
+                        />
+                    </div>
+                </div>
+
+                {/* Paper slot */}
+                <div aria-hidden="true" className="absolute inset-x-7 bottom-3 h-2 rounded-full bg-black shadow-[inset_0_2px_3px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.06)]" />
+            </div>
+
+            {/* Paper coming out of the slot */}
+            <div className="relative z-10 -mt-4 w-[86%] overflow-hidden px-1 pb-4 pt-0">
+                <div aria-hidden="true" className="pointer-events-none absolute inset-x-1 top-0 z-10 h-3 bg-gradient-to-b from-black/45 to-transparent" />
+                <motion.div
+                    key={run}
+                    initial={{ y: "-100%" }}
+                    animate={{ y: paperY }}
+                    transition={paperTransition}
+                    aria-hidden={current !== "complete"}
+                >
+                    <Receipt store={store} address={address} items={items} currency={currency} taxRate={taxRate} orderId={orderId} date={printedAt} />
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default ReceiptPrinter;

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

@@ -9,8 +9,8 @@ import {
     LaptopMinimal,
 } from "lucide-react";
 
-const CARD_HEIGHT = 250;
-const CARD_EXPANDED_HEIGHT = 510;
+const CARD_HEIGHT = 264;
+const CARD_EXPANDED_HEIGHT = 2 * CARD_HEIGHT + 10; // two rows plus the grid gap
 
 const SmartGridCard = ({
     cards = defaultCards(),
@@ -157,20 +157,21 @@ const SmartGridCard = ({
                         />
 
                         {/* Card Content */}
-                        <div className="relative z-10 flex flex-col items-start justify-between h-full w-full p-6 rounded-2xl bg-zinc-900 text-white space-y-4">
-                            <div className="text-4xl border border-dashed p-2 rounded-lg border-purple-600">{card.icon}</div>
-                            <div>
-                                <h3 className="text-xl md:text-xl font-bold mb-2 break-words leading-tight">{card.title}</h3>
-                                <p className="text-sm md:text-base w-full text-white/70 break-words">{card.description}</p>
+                        {/* Compact enough that the button always fits inside the fixed card height */}
+                        <div className="relative z-10 flex flex-col items-start h-full w-full p-5 rounded-2xl bg-zinc-900 text-white gap-3">
+                            <div className="flex h-11 w-11 shrink-0 items-center justify-center border border-dashed rounded-lg border-purple-600">{card.icon}</div>
+                            <div className="min-h-0">
+                                <h3 className="text-lg font-bold mb-1.5 break-words leading-tight">{card.title}</h3>
+                                <p className="text-sm leading-relaxed w-full text-white/70 break-words line-clamp-3">{card.description}</p>
                             </div>
                             <button
                                 type="button"
-                                className="mt-auto relative overflow-hidden whitespace-nowrap px-4 py-3 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-xs md:text-base"
+                                className="mt-auto shrink-0 relative overflow-hidden whitespace-nowrap px-4 py-2 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-sm"
                             >
                                 <span className="relative z-10 flex items-center gap-2">
                                     {card.buttonText}
                                     <span className="arrow-icon transition-transform duration-200 group-hover:translate-x-2 flex items-center">
-                                        <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                                        <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                                             <path d="M5 12h14M13 6l6 6-6 6" />
                                         </svg>
                                     </span>

package/dist/cli/index.js

@@ -47,6 +47,7 @@ const componentMap = {
     "theme-toggle": "ThemeToggle",
     "testimonials": "Testimonials",
     "mask-view": "MaskView",
+    "receipt-printer": "ReceiptPrinter",
     "water-drop-reveal": "MaskView",
 };
 // Packages only some components need, installed on top of the shared ones.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [