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:T3cb1,"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 Coupon { code: string; label: string; kind: "percent" | "fixed" | "shipping"; value: number; minSpend?: number; expires?: string; } export interface CouponCodeBlockProps { subtotal?: number; shipping?: number; coupons?: Coupon[]; currency?: string; /** Validate a typed code. Return the coupon or null. Defaults to looking it up in coupons. */ onValidate?: (code: string) => Coupon | null | Promise; onApply?: (coupon: Coupon | null) => 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", ticket: "#1B1B1B", input: "#0F0F0F", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", error: "#FF6B57", 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", ticket: "#FFFFFF", input: "#FFFFFF", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", error: "#D9480F", ring: "rgba(0,0,0,0.45)" }, }; const COUPONS: Coupon[] = [ { code: "WELCOME10", label: "10% off your first order", kind: "percent", value: 10, expires: "Dec 31" }, { code: "SAVE25", label: "$25 off orders over $200", kind: "fixed", value: 25, minSpend: 200, expires: "Nov 30" }, { code: "FREESHIP", label: "Free express shipping", kind: "shipping", value: 0, minSpend: 75 }, ]; 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.5, ease: [0.22, 1, 0.36, 1] }); return () => c.stop(); }, [value, reduce, mv]); return {text}; } export function CouponCodeBlock({ subtotal = 168, shipping = 12, coupons = COUPONS, currency = "$", onValidate, onApply, theme = "dark", className }: CouponCodeBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [input, setInput] = React.useState(""); const [applied, setApplied] = React.useState(null); const [error, setError] = React.useState(null); const [checking, setChecking] = React.useState(false); const [shake, setShake] = React.useState(0); const [burst, setBurst] = React.useState(0); const money = (n: number) => `${currency}${n.toFixed(2)}`; const discountOf = (c: Coupon | null) => (!c ? 0 : c.kind === "percent" ? subtotal * (c.value / 100) : c.kind === "fixed" ? Math.min(c.value, subtotal) : 0); const shipOf = (c: Coupon | null) => (c?.kind === "shipping" ? 0 : shipping); const discount = discountOf(applied); const ship = shipOf(applied); const total = subtotal - discount + ship; const best = coupons.filter((c) => !c.minSpend || subtotal >= c.minSpend).sort((a, b) => discountOf(b) + (shipping - shipOf(b)) - (discountOf(a) + (shipping - shipOf(a))))[0]; const apply = async (raw: string) => { const code = raw.trim().toUpperCase(); if (!code || checking) return; setChecking(true); setError(null); try { const c = onValidate ? await onValidate(code) : await new Promise((r) => setTimeout(() => r(coupons.find((x) => x.code === code) ?? null), reduce ? 0 : 600)); if (!c) { setError(`“${code}” isn't a valid code`); setShake((s) => s + 1); } else if (c.minSpend && subtotal < c.minSpend) { setError(`${c.code} needs ${money(c.minSpend)} in your bag. Add ${money(c.minSpend - subtotal)} more.`); setShake((s) => s + 1); } else { setApplied(c); setInput(""); setBurst((b) => b + 1); onApply?.(c); } } finally { setChecking(false); } }; const remove = () => { setApplied(null); onApply?.(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 (

Discount code

{applied ? (

{!reduce && ( )} ) : ( { e.preventDefault(); apply(input); }} >

Discount code { setInput(e.target.value.toUpperCase().replace(/\s/g, "").slice(0, 20)); setError(null); }} placeholder="Enter code" autoComplete="off" aria-invalid={!!error || undefined} aria-describedby={error ? `${uid}-err` : undefined} className="h-12 min-w-0 flex-1 rounded-xl border px-4 font-mono text-[14px] tracking-[0.06em] outline-none placeholder:font-sans placeholder:tracking-normal focus-visible:ring-2" style={{ background: p.input, borderColor: error ? p.error : p.line, color: p.title, ...ring }} />

{error && ( {error} )} )}

Available for you

{c.kind === "percent" ? `${c.value}%` : c.kind === "fixed" ? `${currency}${c.value}` : "Free"} {c.kind === "shipping" ? "shipping" : "off"}

{c.code} {isBest && ( Best value )} {c.label} {locked ? `Add ${money(c.minSpend! - subtotal)} to unlock` : c.expires ? `Ends ${c.expires}` : "No expiry"}

Subtotal: {money(subtotal)}
Discount: −{money(discount)}
Shipping: {ship === 0 && shipping > 0 ? ( {money(shipping)} Free ) : ( money(ship) )}
Total

); } export default CouponCodeBlock; 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/coupon-code-block/coupon-code-block.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]