52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3073,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ReceiptText, RotateCcw } from "lucide-react"; import { cn } from "@/lib/utils"; export type ReceiptAmount = { label: React.ReactNode; amount: number }; export type ReceiptPayment = { /** Small caption above the code, e.g. "Scan to pay · UPI". */ label?: React.ReactNode; /** Your QR code (an ). */ code: React.ReactNode; /** Shown under the code, e.g. a UPI ID. */ id?: React.ReactNode; }; export type ReceiptPrinterProps = Omit, "title"> & { /** Shown as the badge next to the title, e.g. "#4471". */ orderId?: React.ReactNode; merchant: React.ReactNode; /** Lines under the merchant: address, date, table… */ details?: React.ReactNode[]; items: ReceiptAmount[]; /** Added to the subtotal, e.g. service charge and tax. */ charges?: ReceiptAmount[]; thankYou?: React.ReactNode; payment?: ReceiptPayment; /** ISO 4217 code used to format amounts. */ currency?: string; locale?: string; /** Time between printed lines, in ms. */ lineInterval?: number; onPrinted?: () => void; onTearOff?: () => void; title?: React.ReactNode; }; type Phase = "ready" | "printing" | "printed"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; // Zig-zag torn edges on the top and bottom of the paper. const PAPER_MASK = [ "conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x", "conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x", "linear-gradient(#000 0 0) center / 100% calc(100% - 10px) no-repeat", ].join(", "); export function ReceiptPrinter({ orderId, merchant, details = [], items, charges = [], thankYou = "Thank you ✦", payment, currency = "INR", locale = "en-IN", lineInterval = 140, onPrinted, onTearOff, title = "Receipt", className, ...props }: ReceiptPrinterProps) { const reduceMotion = useReducedMotion(); // Lines fed so far. 0 means the printer is idle; the phase follows from the count. const [printed, setPrinted] = useState(0); // Set when the user acts, so the next control to appear takes focus. const moveFocus = useRef(false); const focusIfRequested = (element: HTMLButtonElement | null) => { if (element && moveFocus.current) { moveFocus.current = false; element.focus(); } }; const money = useMemo( () => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency] ); const subtotal = items.reduce((sum, item) => sum + item.amount, 0); const total = charges.reduce((sum, charge) => sum + charge.amount, subtotal); // Each entry is one printed line; `rule` draws a dashed divider above it. const lines: { node: React.ReactNode; rule?: boolean }[] = [ { node:

{merchant}

}, ...details.map((detail) => ({ node:

{detail}

, })), ...items.map((item, i) => ({ node: , rule: i === 0 })), { node: , rule: true }, ...charges.map((charge) => ({ node: })), { node: ( ), }, { node:

{thankYou}

, rule: true }, ...(payment ? [ ...(payment.label ? [{ node:

{payment.label}

}] : []), { node: (

{payment.code}

), }, ...(payment.id ? [{ node:

{payment.id}

}] : []), ] : []), ]; const lineCount = lines.length; const phase: Phase = printed === 0 ? "ready" : printed < lineCount ? "printing" : "printed"; // Feed one line per tick until the receipt is complete. useEffect(() => { if (phase !== "printing") return; const timer = setTimeout(() => { const next = printed + 1; setPrinted(next); if (next === lineCount) onPrinted?.(); }, lineInterval); return () => clearTimeout(timer); }, [phase, printed, lineCount, lineInterval, onPrinted]); const print = () => { moveFocus.current = true; // Reduced motion prints the whole receipt at once. const first = reduceMotion ? lineCount : 1; setPrinted(first); if (first === lineCount) onPrinted?.(); }; const tearOff = () => { moveFocus.current = true; setPrinted(0); onTearOff?.(); }; const summary = items.map((item, i) => ( {i > 0 && " · "} {item.label} )); // One timing for every layout change: the card resizing and its parts moving with it. const layoutTransition = reduceMotion ? { duration: 0 } : phase === "printing" ? // The paper feeds at a steady rate, one line per tick. { duration: lineInterval / 1000, ease: "linear" as const } : { duration: 0.3, ease: EASE_IN_OUT }; return (

{/* The card animates its size with a layout animation; children opt in so they aren't stretched. Radius lives in style so Motion can correct it while scaling. */}

{title}

{orderId && ( {orderId} )}

{phase === "printed" ? ( ) : (

{phase === "printing" ? `printing ${printed}/${lineCount}` : "Ready"}

)} {/* popLayout lifts the leaving view out of the flow, so the next one takes its place immediately and the card resizes while the old one animates away. */}

{phase === "ready" ? (

Order ready

{summary}

) : (

{lines.slice(0, printed).map((line, i) => (

{line.node}

))}

)}

{phase === "ready" ? "Tap print to issue the receipt" : phase === "printing" ? "Printing…" : "Tear off the receipt to reset"}

); } function Row({ label, amount, money, className, }: ReceiptAmount & { money: Intl.NumberFormat; className?: string }) { return (

{label} {money.format(amount)}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/receipt-printer.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]