{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"gift-wrap","type":"registry:component","title":"Gift wrap","description":"Folds kraft paper over the cart item, ties a ribbon and bow, and asks who it's for.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/gift-wrap.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { AnimatePresence, motion, type Variants } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst ROLL = { type: \"spring\", duration: 0.35, bounce: 0 } as const;\n\n// Wrapping paper and ribbon are physical materials, so they keep their own\n// colours in both themes: brown kraft paper with a printed dot, and a red\n// satin ribbon with a darker underside where it folds.\nconst KRAFT = \"oklch(0.74 0.075 70)\";\nconst KRAFT_FOLD = \"oklch(0.64 0.075 65)\";\nconst KRAFT_DOT = \"oklch(0.97 0.02 80 / 0.75)\";\nconst RIBBON = \"oklch(0.55 0.19 25)\";\nconst RIBBON_DARK = \"oklch(0.44 0.17 25)\";\n// Satin catches light down its middle.\nconst RIBBON_SHEEN = \"oklch(0.66 0.17 28)\";\nconst SATIN = (angle: number) =>\n `linear-gradient(${angle}deg, ${RIBBON_DARK}, ${RIBBON} 25%, ${RIBBON_SHEEN} 50%, ${RIBBON} 75%, ${RIBBON_DARK})`;\n// Paper pulled over a box: light on the top edge, shade toward the bottom.\nconst PILLOW =\n \"linear-gradient(180deg, oklch(1 0 0 / 0.16), transparent 35%, transparent 65%, oklch(0 0 0 / 0.12))\";\n// A plain card tag, like the paper ones tied to a real gift.\nconst TAG = \"oklch(0.97 0.012 85)\";\nconst TAG_INK = \"oklch(0.3 0.02 60)\";\n\n// Wrapping is a rare, one-off moment, so the whole sequence (paper, ribbon,\n// bow, tag) takes about 0.8s; each step on its own stays under 300ms.\n// Unwrapping runs the same steps backwards in about half the time, since\n// the user is undoing rather than watching.\nconst flap = (side: 1 | -1, delay: number): Variants => ({\n // Hovering the gift option lifts the paper in from both edges, a promise\n // of what the switch does before it is pressed.\n peek: {\n // 87deg shows about 14px of paper (perspective widens it): inside the\n // row's padding, so the price and photo stay readable while it teases.\n rotateY: side * 87,\n opacity: 1,\n transition: {\n rotateY: { type: \"spring\", duration: 0.35, bounce: 0 },\n opacity: { duration: 0.06 },\n },\n },\n open: {\n rotateY: side * 92,\n opacity: 0,\n transition: {\n rotateY: { duration: 0.16, ease: EASE_OUT, delay: 0.12 },\n opacity: { duration: 0.06, delay: 0.22 },\n },\n },\n wrapped: {\n rotateY: 0,\n opacity: 1,\n transition: {\n rotateY: { duration: 0.3, ease: EASE_OUT, delay },\n opacity: { duration: 0.06, delay },\n },\n },\n});\n\nconst ribbon = (axis: \"scaleX\" | \"scaleY\", delay: number): Variants => ({\n open: {\n ...(axis === \"scaleX\" ? { scaleX: 0 } : { scaleY: 0 }),\n transition: { duration: 0.1, ease: EASE_OUT, delay: 0.06 },\n },\n wrapped: {\n ...(axis === \"scaleX\" ? { scaleX: 1 } : { scaleY: 1 }),\n transition: { duration: 0.18, ease: EASE_OUT, delay },\n },\n});\n\nconst BOW: Variants = {\n open: {\n scale: 0.4,\n opacity: 0,\n transition: { duration: 0.08, ease: EASE_OUT },\n },\n // The one bouncy thing here: a bow pulled tight springs a little.\n wrapped: {\n scale: 1,\n opacity: 1,\n transition: {\n scale: { type: \"spring\", duration: 0.4, bounce: 0.45, delay: 0.56 },\n opacity: { duration: 0.08, delay: 0.56 },\n },\n },\n};\n\nconst TAG_SWING: Variants = {\n open: { opacity: 0, rotate: -2, y: -4, transition: { duration: 0.08 } },\n wrapped: {\n opacity: 1,\n rotate: -9,\n y: 0,\n transition: {\n default: { type: \"spring\", duration: 0.5, bounce: 0.35, delay: 0.66 },\n opacity: { duration: 0.12, delay: 0.66 },\n },\n },\n};\n\nconst FADE_ONLY: Variants = {\n open: { opacity: 0, transition: { duration: 0.12 } },\n wrapped: { opacity: 1, transition: { duration: 0.2 } },\n};\n\nconst money = (cents: number, currency: string) =>\n new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency }).format(cents / 100);\n\nexport type GiftItem = {\n name: string;\n variant: string;\n // In cents, so totals never pick up float error.\n price: number;\n image: React.ReactNode;\n};\n\nexport function GiftWrap({\n item,\n wrapFee,\n currency = \"USD\",\n maxMessage = 150,\n defaultGift = false,\n onChange,\n className,\n}: {\n item: GiftItem;\n // In cents.\n wrapFee: number;\n currency?: string;\n maxMessage?: number;\n defaultGift?: boolean;\n onChange?: (gift: { on: boolean; to: string; message: string }) => void;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const id = useId();\n const [gift, setGift] = useState(defaultGift);\n const [to, setTo] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [peek, setPeek] = useState(false);\n\n const update = (next: Partial<{ on: boolean; to: string; message: string }>) => {\n const state = { on: gift, to, message, ...next };\n onChange?.(state);\n };\n\n const fee = gift ? wrapFee : 0;\n const total = item.price + fee;\n const v = (variants: Variants) => (reduceMotion ? FADE_ONLY : variants);\n\n return (\n \n
\n

Your bag

\n

1 item

\n
\n\n {/* The product row. The paper folds shut over it from both edges, so\n it needs perspective and a clip at the rounded corners. */}\n \n
\n {/* A product photo keeps its light studio backdrop in both themes,\n the way the site's avatars keep their light circle. */}\n
\n {item.image}\n
\n
\n

{item.name}

\n

{item.variant}

\n

Qty 1

\n
\n

\n {money(item.price, currency)}\n

\n
\n\n
\n \n \n \n \n \n \n \n \n \n For {to.trim() || \"you\"}\n \n
\n \n\n {\n setGift(!gift);\n update({ on: !gift });\n }}\n onPointerEnter={(e) => e.pointerType !== \"touch\" && setPeek(true)}\n onPointerLeave={() => setPeek(false)}\n onFocus={(e) => e.currentTarget.matches(\":focus-visible\") && setPeek(true)}\n onBlur={() => setPeek(false)}\n className=\"group mt-3 flex min-h-11 w-full touch-manipulation items-center gap-3 rounded-2xl p-1 text-left outline-hidden select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground\"\n >\n \n \n This is a gift\n \n Kraft paper, satin bow and a note, +{money(wrapFee, currency)}\n \n \n \n \n \n \n\n {/* Unfolds downward like a card opening; the toggle above never moves. */}\n \n {gift && (\n \n \n \n
\n \n {\n setMessage(e.target.value);\n update({ message: e.target.value });\n }}\n placeholder=\"Write a note, we'll print it on a card\"\n aria-describedby={`${id}-count`}\n className=\"block w-full resize-none bg-transparent px-3 pt-2.5 pb-6 text-[15px] leading-snug text-foreground outline-hidden placeholder:text-muted-foreground/70\"\n />\n \n {maxMessage - message.length} left\n \n
\n \n \n )}\n \n\n
\n
\n
Subtotal
\n
{money(item.price, currency)}
\n
\n
\n
Gift wrap
\n
\n \n
\n
\n
\n
Total
\n
\n \n
\n
\n
\n \n );\n}\n\nfunction Flap({\n side,\n variants,\n pattern,\n}: {\n side: 1 | -1;\n variants: Variants;\n pattern: string;\n}) {\n const left = side === -1;\n return (\n \n \n \n \n \n \n \n \n \n \n \n {/* The folded-under edge, a strip of the paper's back showing. */}\n {!left && (\n \n )}\n \n );\n}\n\n// A cut sample of the paper and ribbon, so the option shows what you get\n// before the switch is ever pressed.\nfunction Swatch() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Bow() {\n return (\n \n {/* Tails, then loops, then the knot on top. */}\n \n \n \n \n \n \n \n \n );\n}\n\nfunction RollingNumber({ text, value }: { text: string; value: number }) {\n const [previous, setPrevious] = useState(value);\n const [direction, setDirection] = useState(1);\n if (value !== previous) {\n setPrevious(value);\n setDirection(value > previous ? 1 : -1);\n }\n const chars = [...text];\n return (\n \n {text}\n \n {chars.map((char, i) => {\n // Keyed by place from the right, so $9.50 to $10.00 keeps the\n // cents columns and only adds a tens column.\n const place = chars.length - i;\n return /\\d/.test(char) ? (\n \n ) : (\n {char}\n );\n })}\n \n \n );\n}\n\nfunction Digit({ char, direction }: { char: string; direction: number }) {\n const reduceMotion = useReducedMotion();\n // Adding the fee rolls digits up; removing it rolls them back down.\n const offset = (d: number) => (reduceMotion ? \"0%\" : `${d * 100}%`);\n return (\n \n \n ({ y: offset(d), opacity: 0 }),\n center: { y: \"0%\", opacity: 1 },\n exit: (d: number) => ({ y: offset(-d), opacity: 0 }),\n }}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={ROLL}\n className=\"col-start-1 row-start-1\"\n >\n {char}\n \n \n \n );\n}\n\n// A stand-in product photo: an amber glass candle jar with a paper label.\n// Raw colours because it is the product itself, not interface.\nfunction CandleJar() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* Contact shadow on the table. */}\n \n \n \n \n \n \n \n \n );\n}\n\nexport default function GiftWrapDemo() {\n return (\n ,\n }}\n wrapFee={450}\n />\n );\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["cards"],"docs":"From ui lab: https://lab.xevrion.dev/lab/gift-wrap"}