61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T41eb,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface SummaryLine { id: string; title: string; variant: string; price: number; compareAtPrice?: number; quantity: number; image?: string; } export interface OrderSummaryBlockProps { lines?: SummaryLine[]; currency?: string; shipping?: number; taxRate?: number; giftWrapPrice?: number; /** Business days until delivery, as [min, max]. Dates are worked out in the browser. */ deliveryDays?: [number, number]; ctaLabel?: string; onContinue?: (summary: { lines: SummaryLine[]; gift: { wrap: boolean; message: string }; total: number }) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", card: "#141414", well: "rgba(255,255,255,0.04)", input: "#0F0F0F", photo: "#F1F1F1", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", ring: "rgba(255,255,255,0.5)" }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", card: "#F7F7F6", well: "rgba(0,0,0,0.03)", input: "#FFFFFF", photo: "#F1F1F1", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", ring: "rgba(0,0,0,0.45)" }, }; const LINES: SummaryLine[] = [ { id: "stand", title: "Laptop Stand", variant: "Space black", price: 49, compareAtPrice: 89, quantity: 1, image: "/demo/laptop-stand.webp" }, { id: "notebook", title: "Premium Notebook", variant: "A5 · Dotted", price: 24, quantity: 2, image: "/demo/notebook.webp" }, { id: "watch", title: "Minimal Watch", variant: "Black · 40mm", price: 79, compareAtPrice: 129, quantity: 1, image: "/demo/minimal-watch.webp" }, { id: "bottle", title: "Insulated Water Bottle", variant: "750 ml", price: 39, quantity: 1, image: "/demo/insulated-water-bottle.webp" }, ]; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function addBusinessDays(from: Date, n: number) { const d = new Date(from); let left = n; while (left > 0) { d.setDate(d.getDate() + 1); if (d.getDay() !== 0 && d.getDay() !== 6) left--; } return `${DAYS[d.getDay()]}, ${MONTHS[d.getMonth()]} ${d.getDate()}`; } function Money({ value, currency, reduce }: { value: number; currency: string; reduce: boolean }) { const mv = useMotionValue(value); const text = useTransform(mv, (v) => `${currency}${v.toFixed(2)}`); React.useEffect(() => { if (reduce) { mv.set(value); return; } const c = animate(mv, value, { duration: 0.45, ease: [0.22, 1, 0.36, 1] }); return () => c.stop(); }, [value, reduce, mv]); return {text}; } export function OrderSummaryBlock({ lines: initial = LINES, currency = "$", shipping = 0, taxRate = 0.08, giftWrapPrice = 5, deliveryDays = [2, 4], ctaLabel = "Continue to payment", onContinue, theme = "dark", className }: OrderSummaryBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [lines, setLines] = React.useState(initial); const [expanded, setExpanded] = React.useState(false); const [removed, setRemoved] = React.useState<{ line: SummaryLine; index: number } | null>(null); const [wrap, setWrap] = React.useState(false); const [message, setMessage] = React.useState(""); const [detailsOpen, setDetailsOpen] = React.useState(true); const [eta, setEta] = React.useState(null); React.useEffect(() => { const t = setTimeout(() => setEta(`${addBusinessDays(new Date(), deliveryDays[0])} – ${addBusinessDays(new Date(), deliveryDays[1])}`), 0); return () => clearTimeout(t); }, [deliveryDays]); React.useEffect(() => { if (!removed) return; const t = setTimeout(() => setRemoved(null), 4000); return () => clearTimeout(t); }, [removed]); const count = lines.reduce((a, l) => a + l.quantity, 0); const subtotal = lines.reduce((a, l) => a + l.price * l.quantity, 0); const savings = lines.reduce((a, l) => a + (l.compareAtPrice ? (l.compareAtPrice - l.price) * l.quantity : 0), 0); const gift = wrap ? giftWrapPrice : 0; const tax = (subtotal + gift) * taxRate; const total = subtotal + gift + shipping + tax; const money = (n: number) => `${currency}${n.toFixed(2)}`; const visible = expanded ? lines : lines.slice(0, 2); const hidden = lines.length - visible.length; const setQty = (id: string, q: number) => setLines((l) => l.map((x) => (x.id === id ? { ...x, quantity: Math.max(1, Math.min(9, q)) } : x))); const remove = (id: string) => { const index = lines.findIndex((l) => l.id === id); if (index < 0) return; setRemoved({ line: lines[index], index }); setLines((l) => l.filter((x) => x.id !== id)); }; const undo = () => { if (!removed) return; setLines((l) => [...l.slice(0, removed.index), removed.line, ...l.slice(removed.index)]); setRemoved(null); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; return (

Order summary

{count} {count === 1 ? "item" : "items"}

{visible.map((l) => (

{/* eslint-disable-next-line @next/next/no-img-element */} {l.image &&

} {l.title} {l.variant} {l.quantity} {money(l.price * l.quantity)} {l.compareAtPrice && ( {money(l.compareAtPrice * l.quantity)} )}

))}

{(hidden > 0 || expanded) && lines.length > 2 && ( )} {removed && (

Removed {removed.line.title}

)}

setWrap(e.target.checked)} className="h-4 w-4 cursor-pointer" style={{ accentColor: p.title }} /> 🎁 Gift wrap with a note Recycled paper, prices hidden on the receipt +{money(giftWrapPrice)} {wrap && (

Gift message

setMessage(e.target.value.slice(0, 150))} rows={2} placeholder="Write a short message…" className="w-full resize-none rounded-xl border px-3 py-2 text-[13px] outline-none focus-visible:ring-2" style={{ background: p.input, borderColor: p.line, color: p.title, ...ring }} />
                    <p className="m-0 text-right text-[11px] tabular-nums" style={{ color: p.muted }}>
                      {message.length}/150
                    </p>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>

<div className="mx-5 mt-4 flex items-center gap-3 rounded-2xl px-3.5 py-3" style={{ background: p.well }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={p.title} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
            </svg>
            <span className="text-[13px]">
              <span className="block font-medium">Arrives {eta ?? "in 2–4 business days"}</span>
              <span className="block text-[12px]" style={{ color: p.muted }}>
                {shipping ? `Standard shipping ${money(shipping)}` : "Free standard shipping"}
              </span>
            </span>
          </div>

<div className="px-5 pt-4 pb-5">
            <button type="button" onClick={() => setDetailsOpen((o) => !o)} aria-expanded={detailsOpen} aria-controls={`${uid}-details`} className={cn("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent p-0 text-[13px]", focus)} style={{ color: p.body, ...ring }}>
              Price details
              <motion.svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" animate={{ rotate: detailsOpen ? 180 : 0 }} aria-hidden="true">
                <path d="m6 9 6 6 6-6" />
              </motion.svg>
            </button>
            <AnimatePresence initial={false}>
              {detailsOpen && (
                <motion.dl key="d" id={`${uid}-details`} initial={reduce ? false : { height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={reduce ? undefined : { height: 0, opacity: 0 }} className="m-0 overflow-hidden text-[13.5px]">
                  {[
                    ["Subtotal", money(subtotal)],
                    ...(wrap ? [["Gift wrap", money(gift)]] : []),
                    ["Shipping", shipping ? money(shipping) : "Free"],
                    [`Estimated tax`, money(tax)],
                  ].map(([k, v]) => (
                    <div key={k} className="flex justify-between pt-2">
                      <dt style={{ color: p.body }}>{k}</dt>
                      <dd className="m-0 tabular-nums">{v}</dd>
                    </div>
                  ))}
                </motion.dl>
              )}
            </AnimatePresence>
            <div className="mt-3 flex items-baseline justify-between border-t pt-3" style={{ borderColor: p.line }}>
              <span className="text-[15px] font-semibold">Total</span>
              <span className="text-[24px] font-semibold tracking-[-0.02em] tabular-nums">
                <Money value={total} currency={currency} reduce={reduce} />
              </span>
            </div>
            <AnimatePresence initial={false}>
              {savings > 0 && (
                <motion.p key="save" initial={reduce ? false : { opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={reduce ? undefined : { opacity: 0 }} className="m-0 mt-2 rounded-xl px-3 py-2 text-center text-[12.5px] font-medium" style={{ background: `${p.accent}1A`, color: p.accent }}>
                  You're saving <Money value={savings} currency={currency} reduce={reduce} /> on this order
                </motion.p>
              )}
            </AnimatePresence>
            <button type="button" onClick={() => onContinue?.({ lines, gift: { wrap, message }, total })} disabled={!lines.length} className={cn("mt-4 flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-full border-0 text-[15px] font-semibold disabled:cursor-not-allowed disabled:opacity-40", focus)} style={{ background: p.buttonBg, color: p.buttonText, ...ring }}>
              {ctaLabel} →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

export default OrderSummaryBlock;
60:["$","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","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/order-summary-block/order-summary-block.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>