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:T4c6f,"use client"; import * as React from "react"; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, 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 GiftDesign { id: string; name: string; /** CSS background for the card face. */ background: string; /** Text colour on the face. */ ink: string; } export interface GiftCardDesign { design: string; amount: number; to: string; email: string; from: string; message: string; font: "sans" | "serif" | "hand"; deliver: "now" | string; } export interface GiftCardDesignerProps { brand?: string; designs?: GiftDesign[]; amounts?: number[]; min?: number; max?: number; currency?: string; onAdd?: (card: GiftCardDesign) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", panel: "#141414", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", accent: "#7CDE6A", accentText: "#0B1A08", danger: "#FF8A7A", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", field: "#0D0D0D", }, light: { bg: "#FFFFFF", panel: "#F7F7F7", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", accent: "#2F9E44", accentText: "#FFFFFF", danger: "#C0392B", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", field: "#FFFFFF", }, }; const DESIGNS: GiftDesign[] = [ { id: "aurora", name: "Aurora", background: "radial-gradient(120% 90% at 0% 0%, #7CDE6A 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #5B8CFF 0%, transparent 60%), #0E1420", ink: "#FFFFFF" }, { id: "sunset", name: "Sunset", background: "linear-gradient(135deg, #FF9A62 0%, #FF5E7E 45%, #7A3CF0 100%)", ink: "#FFFFFF" }, { id: "paper", name: "Paper", background: "repeating-linear-gradient(45deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 9px), #F1ECE2", ink: "#1B1A17" }, { id: "mono", name: "Mono", background: "linear-gradient(160deg, #2A2A2A 0%, #0B0B0B 100%)", ink: "#FFFFFF" }, { id: "dots", name: "Confetti", background: "radial-gradient(#FFD25A 2px, transparent 2.5px) 0 0 / 22px 22px, radial-gradient(#FF7AA8 2px, transparent 2.5px) 11px 11px / 22px 22px, #1C2541", ink: "#FFFFFF" }, { id: "forest", name: "Forest", background: "linear-gradient(200deg, #2E5E4E 0%, #12332B 70%), #12332B", ink: "#F3F1E7" }, ]; const FONTS = { sans: { label: "Clean", family: "ui-sans-serif, system-ui, sans-serif", style: "normal" as const }, serif: { label: "Classic", family: "Georgia, 'Times New Roman', serif", style: "italic" as const }, hand: { label: "Handwritten", family: "'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive", style: "normal" as const }, }; const MAX_MSG = 140; export function GiftCardDesigner({ brand = "Northline", designs = DESIGNS, amounts = [25, 50, 100, 150], min = 10, max = 500, currency = "$", onAdd, theme = "dark", className }: GiftCardDesignerProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [design, setDesign] = React.useState(designs[0].id); const [amount, setAmount] = React.useState(amounts[1] ?? amounts[0]); const [custom, setCustom] = React.useState(""); const [to, setTo] = React.useState("Sam"); const [email, setEmail] = React.useState(""); const [from, setFrom] = React.useState("Maya"); const [message, setMessage] = React.useState("Happy birthday! Treat yourself to something good."); const [font, setFont] = React.useState("serif"); const [when, setWhen] = React.useState<"now" | "later">("now"); const [date, setDate] = React.useState("2026-11-20"); const [flipped, setFlipped] = React.useState(false); const [tried, setTried] = React.useState(false); const [added, setAdded] = React.useState(false); const d = designs.find((x) => x.id === design) ?? designs[0]; const customNum = Number(custom); const value = custom ? customNum : amount; const amountErr = custom && (!Number.isFinite(customNum) || customNum < min || customNum > max) ? `Between ${currency}${min} and ${currency}${max}` : ""; const emailErr = !/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(email.trim()) ? "Where should we send it?" : ""; // Pointer tilt for the preview card (off for reduced motion). const mx = useMotionValue(0); const my = useMotionValue(0); const rx = useSpring(useTransform(my, [-0.5, 0.5], [8, -8]), { stiffness: 200, damping: 20 }); const ry = useSpring(useTransform(mx, [-0.5, 0.5], [-10, 10]), { stiffness: 200, damping: 20 }); const onMove = (e: React.PointerEvent) => { if (reduce || e.pointerType !== "mouse") return; const r = e.currentTarget.getBoundingClientRect(); mx.set((e.clientX - r.left) / r.width - 0.5); my.set((e.clientY - r.top) / r.height - 0.5); }; const reset = () => { mx.set(0); my.set(0); }; const add = () => { setTried(true); if (amountErr || emailErr || !to.trim()) return; onAdd?.({ design, amount: value, to: to.trim(), email: email.trim(), from: from.trim(), message: message.trim(), font, deliver: when === "now" ? "now" : date }); setAdded(true); setTimeout(() => setAdded(false), 1800); }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const field = cn("h-11 w-full rounded-xl border px-3.5 text-[16px] sm:text-[14px]", focus); const fs = (bad: boolean) => ({ background: p.field, borderColor: bad ? p.danger : p.line, color: p.title }); const f = FONTS[font]; return (

{/* Preview */}

Design a gift card

Delivered by email, never expires, spend it on anything.

{/* Front */}

{brand} Gift card

{currency} {Number.isFinite(value) && value > 0 ? value : 0}

For {to.trim() || "someone special"}

{/* Back */}

Dear {to.trim() || "you"},

{message.trim() || "Your message appears here."}

— {from.trim() || "A friend"}

{/* Form */}

Design · {d.name}

{designs.map((x) => (

Amount

{amounts.map((a) => { const on = !custom && amount === a; return ( ); })}

Custom amount {currency} { setCustom(e.target.value.replace(/\D/g, "").slice(0, 4)); setFlipped(false); }} placeholder={`Other amount (${min}–${max})`} aria-invalid={!!amountErr} className={cn(field, "pl-8")} style={fs(!!amountErr)} />

{amountErr && (

{amountErr}

)}

{( [ ["to", "To", to, setTo, "Recipient’s name"], ["from", "From", from, setFrom, "Your name"], ] as const ).map(([k, label, v, set, ph]) => (

{label} set(e.target.value.slice(0, 30))} placeholder={ph} className={field} style={fs(k === "to" && tried && !to.trim())} />

))}

Recipient’s email setEmail(e.target.value)} placeholder="sam@example.com" aria-invalid={tried && !!emailErr} className={field} style={fs(tried && !!emailErr)} /> {tried && emailErr && (

{emailErr}

)}

Message {MAX_MSG - message.length}

setMessage(e.target.value)}
              onFocus={() => setFlipped(true)}
              className={cn("w-full resize-none rounded-xl border px-3.5 py-2.5 text-[16px] leading-[1.45] sm:text-[14px]", focus)}
              style={{ ...fs(false), fontFamily: f.family, fontStyle: f.style }}
            />
            <div role="radiogroup" aria-label="Lettering" className="mt-2 flex gap-1.5">
              {(Object.keys(FONTS) as (keyof typeof FONTS)[]).map((k) => (
                <button
                  key={k}
                  type="button"
                  role="radio"
                  aria-checked={font === k}
                  onClick={() => {
                    setFont(k);
                    setFlipped(true);
                  }}
                  className={cn("h-8 flex-1 cursor-pointer rounded-lg border text-[13px]", focus)}
                  style={{ fontFamily: FONTS[k].family, fontStyle: FONTS[k].style, ...(font === k ? { background: p.ghost, borderColor: p.title, color: p.title } : { background: "transparent", borderColor: p.line, color: p.body }) }}
                >
                  {FONTS[k].label}
                </button>
              ))}
            </div>
          </div>

<fieldset className="m-0 border-0 p-0">
            <legend className="mb-2.5 text-[13.5px] font-semibold">Send it</legend>
            <div role="radiogroup" aria-label="Delivery" className="grid grid-cols-2 gap-2">
              {(
                [
                  ["now", "Right away"],
                  ["later", "On a date"],
                ] as const
              ).map(([k, label]) => (
                <button
                  key={k}
                  type="button"
                  role="radio"
                  aria-checked={when === k}
                  onClick={() => setWhen(k)}
                  className={cn("h-11 cursor-pointer rounded-xl border text-[13.5px] font-medium", focus)}
                  style={when === k ? { background: p.ghost, borderColor: p.title, color: p.title } : { background: "transparent", borderColor: p.line, color: p.body }}
                >
                  {label}
                </button>
              ))}
            </div>
            <AnimatePresence initial={false}>
              {when === "later" && (
                <motion.div initial={reduce ? false : { height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={reduce ? undefined : { height: 0, opacity: 0 }} className="overflow-hidden">
                  <label htmlFor={`${uid}-date`} className="mt-3 mb-1.5 block text-[12.5px] font-medium" style={{ color: p.body }}>
                    Delivery date (9 am their time)
                  </label>
                  <input id={`${uid}-date`} type="date" min="2026-11-05" value={date} onChange={(e) => setDate(e.target.value)} className={field} style={{ ...fs(false), colorScheme: theme }} />
                </motion.div>
              )}
            </AnimatePresence>
          </fieldset>

<button
            type="button"
            onClick={add}
            className={cn("flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full border-0 text-[15px] font-semibold transition-colors", focus)}
            style={added ? { background: p.accent, color: p.accentText } : { background: p.buttonBg, color: p.buttonText }}
            aria-live="polite"
          >
            {added ? `Added ✓ ${currency}${value} card for ${to.trim()}` : `Add ${currency}${Number.isFinite(value) && value > 0 ? value : 0} gift card`}
          </button>
        </div>
      </div>
    </section>
  );
}
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/gift-card-designer/gift-card-designer.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>