{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "auth-modal", "type": "registry:ui", "title": "Auth Modal", "description": "A login modal: the backdrop fades, the panel scales up, then the close button, title, sign-in providers and email field stagger in. Closing plays the sequence in reverse.", "dependencies": [ "gsap", "@gsap/react" ], "registryDependencies": [], "cssVars": { "theme": {} }, "files": [ { "path": "components/tweenui/auth-modal.tsx", "type": "registry:component", "target": "components/tweenui/auth-modal.tsx", "content": "'use client';\n\nimport { useCallback, useEffect, useRef, type FormEvent } from 'react';\nimport { useGSAP } from '@gsap/react';\nimport gsap from 'gsap';\nimport { createPortal } from 'react-dom';\n\ngsap.registerPlugin(useGSAP);\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst PROVIDERS = [\n {\n id: 'google',\n label: 'Google',\n icon: (\n \n \n \n \n \n \n ),\n },\n {\n id: 'apple',\n label: 'Apple',\n icon: (\n \n \n \n ),\n },\n {\n id: 'microsoft',\n label: 'Microsoft',\n icon: (\n \n \n \n \n \n \n ),\n },\n {\n id: 'github',\n label: 'GitHub',\n icon: (\n \n \n \n ),\n },\n {\n id: 'x',\n label: 'X',\n icon: (\n \n \n \n ),\n },\n] as const;\n\nexport interface AuthModalProps {\n open: boolean;\n onClose: () => void;\n onProvider?: (id: string) => void;\n onEmail?: (email: string) => void;\n}\n\nconst AuthModal = ({ open, onClose, onProvider, onEmail }: AuthModalProps) => {\n const backdropRef = useRef(null);\n const panelRef = useRef(null);\n\n const items = () =>\n panelRef.current\n ? [...panelRef.current.querySelectorAll('[data-auth-modal-item]')]\n : [];\n\n const close = useCallback(() => {\n const backdrop = backdropRef.current;\n const panel = panelRef.current;\n const nodes = items();\n\n if (!backdrop || !panel || prefersReducedMotion()) {\n onClose();\n return;\n }\n\n gsap.killTweensOf([backdrop, panel, ...nodes]);\n gsap\n .timeline({ onComplete: onClose })\n .to(nodes, { opacity: 0, y: 8, duration: 0.12, stagger: 0.02, ease: 'power1.in' })\n .to(panel, { opacity: 0, y: 16, scale: 0.96, duration: 0.18, ease: 'power2.in' }, '-=0.06')\n .to(backdrop, { opacity: 0, duration: 0.16, ease: 'power2.in' }, '-=0.1');\n }, [onClose]);\n\n useGSAP(\n () => {\n if (!open) return;\n const backdrop = backdropRef.current;\n const panel = panelRef.current;\n const nodes = items();\n if (!backdrop || !panel) return;\n\n if (prefersReducedMotion()) {\n gsap.set([backdrop, panel, ...nodes], { opacity: 1, y: 0, scale: 1 });\n return;\n }\n\n gsap.killTweensOf([backdrop, panel, ...nodes]);\n gsap.set(backdrop, { opacity: 0 });\n gsap.set(panel, { opacity: 0, y: 28, scale: 0.94 });\n gsap.set(nodes, { opacity: 0, y: 16 });\n gsap\n .timeline()\n .to(backdrop, { opacity: 1, duration: 0.22, ease: 'power2.out' })\n .to(panel, { opacity: 1, y: 0, scale: 1, duration: 0.32, ease: 'power3.out' }, '-=0.08')\n .to(\n nodes,\n { opacity: 1, y: 0, duration: 0.28, stagger: 0.045, ease: 'power2.out' },\n '-=0.18'\n );\n },\n { dependencies: [open] }\n );\n\n useEffect(() => {\n if (!open) return;\n const panel = panelRef.current;\n const previouslyFocused = document.activeElement as HTMLElement | null;\n const previous = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n\n const focusable = () =>\n panel\n ? [\n ...panel.querySelectorAll(\n 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n ),\n ].filter((el) => el.offsetParent !== null)\n : [];\n\n // Move focus into the dialog so keyboard/AT users start inside it.\n panel?.focus();\n\n const onKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n return;\n }\n if (event.key !== 'Tab' || !panel) return;\n\n // Trap focus within the panel.\n const items = focusable();\n if (items.length === 0) {\n event.preventDefault();\n panel.focus();\n return;\n }\n const first = items[0]!;\n const last = items[items.length - 1]!;\n const active = document.activeElement;\n if (event.shiftKey) {\n if (active === first || active === panel || !panel.contains(active)) {\n event.preventDefault();\n last.focus();\n }\n } else if (active === last || !panel.contains(active)) {\n event.preventDefault();\n first.focus();\n }\n };\n\n document.addEventListener('keydown', onKey);\n return () => {\n document.body.style.overflow = previous;\n document.removeEventListener('keydown', onKey);\n // Restore focus to whatever opened the dialog.\n previouslyFocused?.focus?.();\n };\n }, [open, close]);\n\n const submit = (event: FormEvent) => {\n event.preventDefault();\n const email = new FormData(event.currentTarget).get('email');\n if (typeof email === 'string') onEmail?.(email.trim());\n };\n\n if (!open || typeof document === 'undefined') return null;\n\n return createPortal(\n \n \n event.stopPropagation()}\n >\n \n \n \n \n \n\n
\n

\n Welcome back\n

\n

Sign in to your account to continue

\n
\n\n
\n {PROVIDERS.map((provider) => (\n onProvider?.(provider.id)}\n className=\"text-foreground flex h-10 w-full items-center justify-center rounded-2xl bg-[#045f64]/10 transition-transform hover:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100\"\n >\n {provider.icon}\n \n ))}\n
\n\n
\n \n Or continue with email\n \n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n\n

\n By clicking continue, you agree to our Terms of Service and Privacy Policy.\n

\n \n ,\n document.body\n );\n};\n\nexport default AuthModal;\n" } ], "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/auth-modal" }