{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "auth-drawer",
  "type": "registry:component",
  "title": "Auth Drawer",
  "description": "A floating sign-in sheet with providers, one-time codes, passkeys and wallets.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "lucide-react@^0.577.0",
    "motion@^14.0.0",
    "react-use-measure@^2.1.7"
  ],
  "registryDependencies": [
    "@dx/input-otp",
    "@dx/moving-border",
    "@dx/utils"
  ],
  "files": [
    {
      "path": "dx/auth-drawer.tsx",
      "type": "registry:component",
      "target": "components/dx/auth-drawer.tsx",
      "content": "import * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { ArrowRightIcon, ChevronLeftIcon, FingerprintIcon, WalletIcon, XIcon } from \"lucide-react\";\nimport useMeasure from \"react-use-measure\";\n\nimport { cn } from \"@/lib/utils\";\nimport { InputOTP, InputOTPSlot } from \"@/components/ui/input-otp\";\nimport { MovingBorder } from \"@/components/dx/moving-border\";\n\n/**\n * AuthDrawera floating sign-in sheet. Social providers, an\n * Email / Phone / Passkey switch, one-time-code verification and a wallet\n * list, with the sheet's height morphing between steps.\n */\n\ntype AuthMethod = \"email\" | \"phone\" | \"passkey\";\ntype AuthOption = { id: string; label: string; icon: React.ReactNode; badge?: string };\ntype View = \"signin\" | \"otp\" | \"passkey\" | \"wallet\";\n\ntype AuthDrawerProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Element that opens the drawer. */\n  trigger?: React.ReactElement;\n  title?: string;\n  providers?: AuthOption[];\n  wallets?: AuthOption[];\n  methods?: AuthMethod[];\n  onProvider?: (id: string) => void;\n  onWallet?: (id: string) => void;\n  /** Called before the code step; throw to stay on the form. */\n  onSendCode?: (payload: { method: \"email\" | \"phone\"; value: string }) => void | Promise<void>;\n  /** Return false to reject the code. */\n  onVerify?: (payload: { method: \"email\" | \"phone\"; value: string; code: string }) => boolean | Promise<boolean>;\n  /** Return false if the passkey prompt failed. */\n  onPasskey?: () => boolean | Promise<boolean>;\n  /** Fired after a code or passkey succeeds; the drawer closes itself. */\n  onSuccess?: (payload: { method: AuthMethod; value?: string }) => void;\n  className?: string;\n};\n\nconst METHOD_LABEL: Record<AuthMethod, string> = { email: \"Email\", phone: \"Phone\", passkey: \"Passkey\" };\nconst PATTERN = {\n  email: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/,\n  phone: /^\\+?[\\d\\s\\-()]{10,}$/,\n};\n\nconst ease = [0.25, 1, 0.5, 1] as const;\n\nfunction IconButton({ className, ...props }: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"state-layer focus-ring flex size-8 shrink-0 items-center justify-center rounded-full bg-container-high text-muted-foreground transition-transform active:scale-90 [&_svg]:size-4.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Header({ title, onBack }: { title: string; onBack?: () => void }) {\n  return (\n    <div className=\"flex items-center gap-3 px-6 py-6\">\n      {onBack ? (\n        <IconButton aria-label=\"Back\" onClick={onBack}>\n          <ChevronLeftIcon />\n        </IconButton>\n      ) : null}\n      <DrawerPrimitive.Title className={cn(\"flex-1 text-xl font-semibold tracking-tight select-none\", onBack && \"text-center\")}>\n        {title}\n      </DrawerPrimitive.Title>\n      {onBack && <span className=\"size-8\" />}\n    </div>\n  );\n}\n\nconst pill =\n  \"focus-ring flex h-12 w-full items-center justify-center gap-2 rounded-full text-base font-semibold transition-[transform,background-color,opacity] duration-200 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50\";\n\nfunction AuthDrawer({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title = \"Sign in\",\n  providers = [],\n  wallets = [],\n  methods = [\"email\", \"phone\", \"passkey\"],\n  onProvider,\n  onWallet,\n  onSendCode,\n  onVerify,\n  onPasskey,\n  onSuccess,\n  className,\n}: AuthDrawerProps) {\n  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);\n  const open = openProp ?? innerOpen;\n  const [view, setView] = React.useState<View>(\"signin\");\n  const [method, setMethod] = React.useState<AuthMethod>(methods[0] ?? \"email\");\n  const [value, setValue] = React.useState(\"\");\n  const [code, setCode] = React.useState(\"\");\n  const [status, setStatus] = React.useState<\"idle\" | \"busy\" | \"error\">(\"idle\");\n  const [ref, bounds] = useMeasure();\n  const pillId = React.useId();\n\n  const setOpen = (o: boolean) => {\n    if (openProp === undefined) setInnerOpen(o);\n    onOpenChange?.(o);\n    if (!o) {\n      window.setTimeout(() => {\n        setView(\"signin\");\n        setCode(\"\");\n        setStatus(\"idle\");\n      }, 300);\n    }\n  };\n\n  const go = (v: View) => {\n    setStatus(\"idle\");\n    setCode(\"\");\n    setView(v);\n  };\n\n  const valid = method === \"passkey\" || PATTERN[method].test(value.trim());\n\n  const succeed = (m: AuthMethod, v?: string) => {\n    onSuccess?.({ method: m, value: v });\n    setOpen(false);\n  };\n\n  const submit = async () => {\n    if (!valid || status === \"busy\") return;\n    if (method === \"passkey\") {\n      go(\"passkey\");\n      setStatus(\"busy\");\n      const ok = onPasskey ? await onPasskey() : true;\n      if (ok) succeed(\"passkey\");\n      else setStatus(\"error\");\n      return;\n    }\n    setStatus(\"busy\");\n    try {\n      await onSendCode?.({ method, value: value.trim() });\n      go(\"otp\");\n    } catch {\n      setStatus(\"error\");\n    }\n  };\n\n  const verify = async (c: string) => {\n    if (method === \"passkey\" || c.length < 6) return;\n    setStatus(\"busy\");\n    const ok = onVerify ? await onVerify({ method, value: value.trim(), code: c }) : true;\n    if (ok) succeed(method, value.trim());\n    else {\n      setStatus(\"error\");\n      setCode(\"\");\n    }\n  };\n\n  let content: React.ReactNode;\n  if (view === \"signin\") {\n    content = (\n      <div>\n        <Header title={title} />\n        <div className=\"flex flex-col gap-2 px-6\">\n          {providers.length > 0 && (\n            <div className=\"flex gap-2\">\n              {providers.map((p) => (\n                <button\n                  key={p.id}\n                  type=\"button\"\n                  aria-label={p.label}\n                  title={p.label}\n                  onClick={() => onProvider?.(p.id)}\n                  className=\"state-layer focus-ring flex h-12 flex-1 items-center justify-center rounded-xl bg-container-high transition-transform active:scale-95 [&_svg]:size-4.5\"\n                >\n                  {p.icon}\n                </button>\n              ))}\n            </div>\n          )}\n          {methods.length > 1 && (\n            <div role=\"tablist\" aria-label=\"Sign-in method\" className=\"flex h-12 gap-1 rounded-2xl bg-container-high p-1\">\n              {methods.map((m) => (\n                <button\n                  key={m}\n                  type=\"button\"\n                  role=\"tab\"\n                  aria-selected={method === m}\n                  onClick={() => {\n                    setMethod(m);\n                    setValue(\"\");\n                    setStatus(\"idle\");\n                  }}\n                  className={cn(\n                    \"focus-ring relative flex flex-1 items-center justify-center rounded-xl text-sm font-semibold transition-colors\",\n                    method === m ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {method === m && (\n                    <motion.span\n                      layoutId={`${pillId}-method`}\n                      className=\"absolute inset-0 rounded-xl bg-card shadow-[0_1px_2px_rgb(0_0_0/0.06)]\"\n                      transition={{ type: \"spring\", stiffness: 500, damping: 38 }}\n                    />\n                  )}\n                  <span className=\"relative\">{METHOD_LABEL[m]}</span>\n                </button>\n              ))}\n            </div>\n          )}\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              void submit();\n            }}\n            className={cn(\n              \"flex h-12 items-center gap-3 overflow-hidden rounded-2xl bg-container-high pr-1 pl-4 ring-inset transition-shadow focus-within:ring-1 focus-within:ring-foreground/25\",\n              status === \"error\" && \"ring-1 ring-destructive\",\n            )}\n          >\n            {method === \"passkey\" ? (\n              <span className=\"flex flex-1 items-center gap-3 text-muted-foreground\">\n                <FingerprintIcon className=\"size-5\" />\n                Continue with a passkey\n              </span>\n            ) : (\n              <input\n                type={method === \"email\" ? \"email\" : \"tel\"}\n                inputMode={method === \"email\" ? \"email\" : \"tel\"}\n                autoComplete={method === \"email\" ? \"email\" : \"tel\"}\n                aria-label={METHOD_LABEL[method]}\n                placeholder={method === \"email\" ? \"you@company.com\" : \"+1 (555) 123-4567\"}\n                value={value}\n                onChange={(e) => {\n                  setValue(e.target.value);\n                  if (status === \"error\") setStatus(\"idle\");\n                }}\n                className=\"min-w-0 flex-1 bg-transparent text-base font-medium outline-none placeholder:text-muted-foreground/70\"\n              />\n            )}\n            <button\n              type=\"submit\"\n              aria-label=\"Continue\"\n              disabled={!valid || status === \"busy\"}\n              className=\"focus-ring flex h-10 w-12 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground transition-[transform,opacity] active:scale-95 disabled:bg-container-highest disabled:text-muted-foreground\"\n            >\n              <ArrowRightIcon className=\"size-5\" />\n            </button>\n          </form>\n        </div>\n        {wallets.length > 0 ? (\n          <div className=\"flex flex-col gap-4 px-6 pb-6\">\n            <div className=\"flex h-10 items-center gap-3 text-xs font-medium text-muted-foreground uppercase\">\n              <span className=\"h-px flex-1 bg-outline-variant\" />\n              Or\n              <span className=\"h-px flex-1 bg-outline-variant\" />\n            </div>\n            <button type=\"button\" onClick={() => go(\"wallet\")} className={cn(pill, \"bg-primary text-primary-foreground\")}>\n              <WalletIcon className=\"size-5\" />\n              Connect wallet\n            </button>\n          </div>\n        ) : (\n          <div className=\"h-6\" />\n        )}\n      </div>\n    );\n  } else if (view === \"otp\") {\n    content = (\n      <div>\n        <Header title={`Confirm ${METHOD_LABEL[method].toLowerCase()}`} onBack={() => go(\"signin\")} />\n        <div className=\"flex flex-col gap-6 px-6 pb-6 text-center\">\n          <div>\n            <p className=\"text-muted-foreground\">Enter the code sent to</p>\n            <p className=\"font-medium tracking-tight\">{value}</p>\n          </div>\n          <motion.div\n            animate={status === \"error\" ? { x: [0, -6, 6, -4, 4, 0] } : { x: 0 }}\n            transition={{ duration: 0.4 }}\n          >\n            <InputOTP\n              maxLength={6}\n              value={code}\n              onChange={(c) => {\n                setCode(c);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n              onComplete={(c: string) => void verify(c)}\n              aria-label=\"One-time code\"\n              containerClassName=\"flex justify-between gap-2\"\n            >\n              {Array.from({ length: 6 }, (_, i) => (\n                <InputOTPSlot\n                  key={i}\n                  index={i}\n                  className={cn(\"h-12 flex-1 rounded-xl border-0 bg-container-high\", status === \"error\" && \"ring-1 ring-destructive\")}\n                />\n              ))}\n            </InputOTP>\n          </motion.div>\n          <p aria-live=\"polite\" className={cn(\"-mt-3 h-4 text-sm\", status === \"error\" ? \"text-destructive\" : \"text-muted-foreground\")}>\n            {status === \"error\" ? \"That code didn't work. Try again.\" : status === \"busy\" ? \"Verifying…\" : \"\"}\n          </p>\n          <button\n            type=\"button\"\n            disabled={code.length < 6 || status === \"busy\"}\n            onClick={() => void verify(code)}\n            className={cn(pill, \"bg-success text-white\")}\n          >\n            Verify code\n          </button>\n        </div>\n      </div>\n    );\n  } else if (view === \"passkey\") {\n    content = (\n      <div>\n        <Header title=\"Passkey\" onBack={() => go(\"signin\")} />\n        <div className=\"flex flex-col items-center gap-6 px-6 pb-6 text-center\">\n          <MovingBorder duration={1500} radius=\"30px\" gap=\"6px\" className=\"size-[92px] bg-container-high\" contentClassName=\"bg-container\">\n            <FingerprintIcon className=\"size-8 text-muted-foreground\" />\n          </MovingBorder>\n          <div>\n            <p className=\"text-xl font-medium tracking-tight\">{status === \"error\" ? \"Passkey failed\" : \"Waiting for passkey\"}</p>\n            <p className=\"mx-auto mt-1 max-w-xs text-sm text-pretty text-muted-foreground\">\n              {status === \"error\" ? \"The prompt was dismissed or timed out.\" : \"Follow the prompts from your device to continue.\"}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => (status === \"error\" ? void submit() : go(\"signin\"))}\n            className={cn(pill, status === \"error\" ? \"bg-primary text-primary-foreground\" : \"bg-container-high\")}\n          >\n            {status === \"error\" ? \"Try again\" : \"Cancel\"}\n          </button>\n        </div>\n      </div>\n    );\n  } else {\n    content = (\n      <div>\n        <Header title=\"Connect wallet\" onBack={() => go(\"signin\")} />\n        <ul className=\"flex flex-col gap-2 px-6 pb-6\">\n          {wallets.map((w) => (\n            <li key={w.id}>\n              <button\n                type=\"button\"\n                onClick={() => onWallet?.(w.id)}\n                className=\"state-layer focus-ring flex h-15 w-full items-center justify-between gap-3 rounded-2xl bg-container-high px-4 text-left\"\n              >\n                <span className=\"flex items-center gap-3 text-lg font-medium tracking-tight\">\n                  {w.label}\n                  {w.badge && (\n                    <span className=\"rounded-full border border-outline-variant bg-card px-2 py-0.5 text-xs font-semibold text-muted-foreground\">\n                      {w.badge}\n                    </span>\n                  )}\n                </span>\n                <span className=\"flex size-9 items-center justify-center rounded-lg [&_svg]:size-6\">{w.icon}</span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>\n      {trigger && <DrawerPrimitive.Trigger render={trigger} />}\n      <DrawerPrimitive.Portal>\n        <DrawerPrimitive.Backdrop className=\"fixed inset-0 z-50 bg-background/70 backdrop-blur-sm transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n        <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50 flex items-end justify-center p-4\">\n          <DrawerPrimitive.Popup\n            data-slot=\"auth-drawer\"\n            className={cn(\n              \"relative w-full max-w-[380px] overflow-hidden rounded-[36px] bg-card text-card-foreground shadow-float outline-none\",\n              \"[transform:translateY(var(--drawer-swipe-movement-y))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:select-none data-starting-style:[transform:translateY(calc(100%+2rem))] data-ending-style:[transform:translateY(calc(100%+2rem))]\",\n              className,\n            )}\n          >\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"state-layer focus-ring absolute top-6 right-6 z-10 flex size-8 items-center justify-center rounded-full bg-container-high text-muted-foreground transition-transform active:scale-90\"\n            >\n              <XIcon className=\"size-4.5\" />\n            </DrawerPrimitive.Close>\n            <motion.div animate={{ height: bounds.height || \"auto\" }} transition={{ duration: 0.27, ease }}>\n              <div ref={ref}>\n                <AnimatePresence initial={false} mode=\"popLayout\">\n                  <motion.div\n                    key={view}\n                    initial={{ opacity: 0, scale: 0.96 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    exit={{ opacity: 0, scale: 0.96 }}\n                    transition={{ duration: 0.27, ease: [0.26, 0.08, 0.25, 1] }}\n                  >\n                    {content}\n                  </motion.div>\n                </AnimatePresence>\n              </div>\n            </motion.div>\n          </DrawerPrimitive.Popup>\n        </DrawerPrimitive.Viewport>\n      </DrawerPrimitive.Portal>\n    </DrawerPrimitive.Root>\n  );\n}\n\nexport { AuthDrawer };\nexport type { AuthDrawerProps, AuthMethod, AuthOption };\n"
    }
  ],
  "categories": [
    "motion"
  ],
  "meta": {
    "group": "dx",
    "docs": "https://dxuireact.com/docs/components/auth-drawer"
  }
}