13:I[37568,["/_next/static/immutable/chunks/2-9vr-e42s8dr.js","/_next/static/immutable/chunks/2_omr-qreewwb.js","/_next/static/immutable/chunks/01f2nfogzffw7.js","/_next/static/immutable/chunks/3k56s_r4mk904.js","/_next/static/immutable/chunks/1s6zm_s8-c7ni.js","/_next/static/immutable/chunks/181_42an756jy.js","/_next/static/immutable/chunks/1jihvr95juttv.js","/_next/static/immutable/chunks/092nngb_-as9i.js","/_next/static/immutable/chunks/1j32oyta3515h.js"],"Playground"] 12:T410,{"@context":"https://schema.org","@graph":[{"@type":"SoftwareSourceCode","@id":"https://trytweenly.vercel.app/docs/components/expand-input#code","name":"Expand Input","description":"A pill button that morphs into an email field, then a spinner and a drawn check on submit.","url":"https://trytweenly.vercel.app/docs/components/expand-input","codeRepository":"https://github.com/mirukullacode/tweenly","programmingLanguage":[{"@type":"ComputerLanguage","name":"TypeScript"},{"@type":"ComputerLanguage","name":"React"}],"runtimePlatform":"React","keywords":"Buttons, react, shadcn, animation","isPartOf":{"@type":"WebSite","name":"tweenly","url":"https://trytweenly.vercel.app"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Docs","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":2,"name":"Components","item":"https://trytweenly.vercel.app/docs"},{"@type":"ListItem","position":3,"name":"Expand Input","item":"https://trytweenly.vercel.app/docs/components/expand-input"}]}]}14:T1b37,"use client" import { useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" type State = "idle" | "open" | "loading" | "success" export interface ExpandInputProps { /** Label of the collapsed button. Default: "Subscribe" */ label?: string /** Input placeholder. Default: "you@example.com" */ placeholder?: string /** Message shown after a successful submit. Default: "You're in!" */ successLabel?: string /** Called with the email on submit. The spinner waits for the promise; a rejection returns to the input. */ onSubmit?: (value: string) => Promise | void /** Collapse back to the button this many ms after success (0 = stay). Default: 2500 */ resetAfter?: number /** Width of the expanded input, in px. Default: 300 */ width?: number className?: string } const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const ArrowRight = () => ( ) const Check = () => ( ) export function ExpandInput({ label = "Subscribe", placeholder = "you@example.com", successLabel = "You're in!", onSubmit, resetAfter = 2500, width = 300, className, }: ExpandInputProps) { const reduced = useReducedMotion() const [state, setState] = useState("idle") const [email, setEmail] = useState("") const [invalid, setInvalid] = useState(false) const [returnFocus, setReturnFocus] = useState(false) const [scope, animate] = useAnimate() const timer = useRef>(undefined) useEffect(() => () => clearTimeout(timer.current), []) const expanded = state === "open" || state === "loading" const spring = reduced ? { duration: 0 } : { type: "spring" as const, stiffness: 380, damping: 32 } const fade = { initial: { opacity: 0, filter: "blur(4px)", scale: reduced ? 1 : 0.96 }, animate: { opacity: 1, filter: "blur(0px)", scale: 1 }, exit: { opacity: 0, filter: "blur(4px)", scale: reduced ? 1 : 0.96 }, transition: reduced ? { duration: 0 } : { duration: 0.2 }, } const collapse = (focusButton: boolean) => { setState("idle") setInvalid(false) setReturnFocus(focusButton) } const shake = () => { if (reduced || !scope.current) return animate(scope.current, { x: [0, -6, 6, -4, 4, 0] }, { duration: 0.4 }) } const submit = async (e: React.FormEvent) => { e.preventDefault() if (state !== "open") return const value = email.trim() if (!EMAIL.test(value)) { setInvalid(true) shake() return } setState("loading") try { const minDelay = new Promise((r) => setTimeout(r, reduced ? 0 : 700)) await Promise.all([Promise.resolve(onSubmit?.(value)), minDelay]) } catch { setState("open") shake() return } setState("success") setEmail("") if (resetAfter > 0) timer.current = setTimeout(() => collapse(false), resetAfter) } return ( {state === "success" ? successLabel : state === "loading" ? "Submitting" : ""} {state === "idle" && ( { clearTimeout(timer.current) setState("open") }} className="h-full whitespace-nowrap rounded-full px-6 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" > {label} )} {expanded && ( { if (e.key === "Escape" && state === "open") collapse(true) }} onBlur={(e) => { if (!email && state === "open" && !e.currentTarget.contains(e.relatedTarget)) collapse(false) }} className="flex h-full w-full items-center gap-2 py-1.5 pl-5 pr-1.5" > { setEmail(e.target.value) setInvalid(false) }} placeholder={placeholder} aria-label="Email address" aria-invalid={invalid || undefined} className="h-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:opacity-60" /> )} {state === "success" && ( {successLabel} )} ) } 7:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$12"}}],["$","$L13",null,{"slug":"expand-input","source":"$14"}]]