motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-HHXK3NAH.js

@@ -0,0 +1,1382 @@
+"use client";
+import {
+  LockKeyholeIcon
+} from "./chunk-IGI6OLRX.js";
+import {
+  LoaderCircleIcon
+} from "./chunk-G3XH7YT2.js";
+import {
+  BadgeAlertIcon
+} from "./chunk-UD5OQ2T3.js";
+import {
+  ArrowRightIcon
+} from "./chunk-H7XKIWHA.js";
+import {
+  CircleCheckIcon
+} from "./chunk-YU6B7YRO.js";
+import {
+  EyeIcon
+} from "./chunk-BN4MA5UY.js";
+import {
+  UserIcon
+} from "./chunk-BHUNLG6S.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/auth-card/auth-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion4,
+  useAnimationControls,
+  useInView,
+  useReducedMotion as useReducedMotion4
+} from "motion/react";
+
+// src/icons/at-sign.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CIRCLE_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var PATH_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 }
+    }
+  }
+};
+var AtSignIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.circle,
+                {
+                  animate: controls,
+                  cx: "12",
+                  cy: "12",
+                  r: "4",
+                  variants: CIRCLE_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8",
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AtSignIcon.displayName = "AtSignIcon";
+
+// src/icons/eye-off.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PATH_VARIANTS2 = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 2],
+    opacity: [0, 1],
+    pathOffset: [0, 2],
+    transition: { duration: 0.6 }
+  }
+};
+var EyeOffIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs2(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx2("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+              /* @__PURE__ */ jsx2("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+              /* @__PURE__ */ jsx2("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "m2 2 20 20",
+                  variants: PATH_VARIANTS2
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+EyeOffIcon.displayName = "EyeOffIcon";
+
+// src/icons/lock-keyhole-open.tsx
+import { motion as motion3, useAnimation as useAnimation3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var LockKeyholeOpenIcon = forwardRef3(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation3();
+  const isControlledRef = useRef3(false);
+  useImperativeHandle3(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef3(null);
+  const reduced = useReducedMotion3();
+  const [hosted, setHosted] = useState3(false);
+  useEffect3(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs3(
+        motion3.svg,
+        {
+          animate: controls,
+          fill: "none",
+          height: size,
+          initial: "normal",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          transition: {
+            duration: 1,
+            ease: [0.4, 0, 0.2, 1]
+          },
+          variants: {
+            normal: {
+              rotate: 0,
+              scale: 1
+            },
+            animate: {
+              rotate: [2, 4, -2, 0],
+              scale: [1.05, 0.95, 1.02, 1]
+            }
+          },
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "16", r: "1" }),
+            /* @__PURE__ */ jsx3("rect", { height: "12", rx: "2", width: "18", x: "3", y: "10" }),
+            /* @__PURE__ */ jsx3(
+              motion3.path,
+              {
+                animate: controls,
+                d: "M7 10V7a5 5 0 0 1 10 0v3",
+                initial: "normal",
+                transition: {
+                  duration: 0.3,
+                  ease: [0.4, 0, 0.2, 1]
+                },
+                variants: {
+                  normal: {
+                    pathLength: 0.8
+                  },
+                  animate: {
+                    pathLength: 1
+                  }
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+LockKeyholeOpenIcon.displayName = "LockKeyholeOpenIcon";
+
+// src/components/auth-card/auth-card.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var INK = "#242423";
+var GOOD = "#269a5a";
+var BAD = "#d64545";
+var COPY = {
+  signin: {
+    title: "Welcome back",
+    sub: "Sign in to pick up where you left off.",
+    cta: "Get started",
+    busy: "Signing you in",
+    done: "You're in",
+    ask: "Don't have an account?",
+    flip: "Sign up"
+  },
+  signup: {
+    title: "Create your account",
+    sub: "It takes less than a minute.",
+    cta: "Create account",
+    busy: "Setting things up",
+    done: "Account ready",
+    ask: "Already have an account?",
+    flip: "Sign in"
+  }
+};
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+function strength(pw) {
+  if (!pw) return 0;
+  let s = pw.length >= 8 ? 1 : 0;
+  if (/\d/.test(pw)) s++;
+  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
+  if (/[^A-Za-z0-9]/.test(pw)) s++;
+  return Math.max(1, s);
+}
+var LEVELS = [
+  { label: "", color: INK },
+  { label: "Weak", color: BAD },
+  { label: "Fair", color: "#e8a317" },
+  { label: "Good", color: "#5aa832" },
+  { label: "Strong", color: GOOD }
+];
+function Roll({
+  children,
+  dir,
+  className
+}) {
+  const still = !!useReducedMotion4();
+  return /* @__PURE__ */ jsx4("span", { className: cn("relative inline-grid overflow-hidden", className), children: /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: /* @__PURE__ */ jsx4(
+    motion4.span,
+    {
+      custom: dir,
+      variants: {
+        in: (d) => ({
+          y: d > 0 ? "60%" : "-60%",
+          opacity: 0,
+          filter: "blur(4px)"
+        }),
+        on: { y: "0%", opacity: 1, filter: "blur(0px)" },
+        out: (d) => ({
+          y: d > 0 ? "-60%" : "60%",
+          opacity: 0,
+          filter: "blur(4px)"
+        })
+      },
+      initial: still ? false : "in",
+      animate: "on",
+      exit: still ? void 0 : "out",
+      transition: { duration: 0.35, ease: GLIDE },
+      className: "col-start-1 row-start-1 whitespace-nowrap",
+      children
+    },
+    children
+  ) }) });
+}
+function BrandMark({ turn, still }) {
+  const gid = React.useId();
+  return /* @__PURE__ */ jsxs4("span", { className: "relative grid size-12 place-items-center overflow-hidden rounded-[14px] shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_10px_24px_-10px_rgba(0,0,0,0.45)]", children: [
+    /* @__PURE__ */ jsxs4(
+      "svg",
+      {
+        viewBox: "0 0 48 48",
+        className: "absolute inset-0 size-full",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsxs4("defs", { children: [
+            /* @__PURE__ */ jsxs4("linearGradient", { id: `${gid}-bg`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+              /* @__PURE__ */ jsx4("stop", { offset: "0", stopColor: "#71717a" }),
+              /* @__PURE__ */ jsx4("stop", { offset: "0.55", stopColor: "#3f3f46" }),
+              /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#1c1c1e" })
+            ] }),
+            /* @__PURE__ */ jsxs4("radialGradient", { id: `${gid}-shine`, cx: "0.3", cy: "0.15", r: "0.8", children: [
+              /* @__PURE__ */ jsx4("stop", { offset: "0", stopColor: "#fff", stopOpacity: "0.35" }),
+              /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "#fff", stopOpacity: "0" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4("rect", { width: "48", height: "48", fill: `url(#${gid}-bg)` }),
+          /* @__PURE__ */ jsx4("rect", { width: "48", height: "48", fill: `url(#${gid}-shine)` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      motion4.svg,
+      {
+        viewBox: "0 0 24 24",
+        className: "relative size-8 text-white",
+        "aria-hidden": true,
+        animate: { rotate: turn * 60 },
+        transition: still ? { duration: 0 } : { type: "spring", stiffness: 160, damping: 14 },
+        children: [
+          [0, 60, 120, 180, 240, 300].map((deg) => /* @__PURE__ */ jsx4(
+            "ellipse",
+            {
+              cx: "12",
+              cy: "6.4",
+              rx: "2.9",
+              ry: "4.9",
+              fill: "currentColor",
+              opacity: deg % 120 ? 0.62 : 0.95,
+              transform: `rotate(${deg} 12 12)`
+            },
+            deg
+          )),
+          /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2.4", fill: "#fff" })
+        ]
+      }
+    )
+  ] });
+}
+function Unlock() {
+  const [shut, setShut] = React.useState(true);
+  React.useEffect(() => {
+    const t = window.setTimeout(() => setShut(false), 320);
+    return () => window.clearTimeout(t);
+  }, []);
+  return /* @__PURE__ */ jsx4(LockKeyholeOpenIcon, { className: "size-4", active: shut });
+}
+function Reveal({
+  show,
+  children,
+  delay = 0
+}) {
+  const still = !!useReducedMotion4();
+  return /* @__PURE__ */ jsx4(AnimatePresence, { initial: false, children: show && /* @__PURE__ */ jsx4(
+    motion4.div,
+    {
+      initial: still ? false : {
+        height: 0,
+        opacity: 0,
+        filter: "blur(4px)",
+        overflow: "hidden"
+      },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        filter: "blur(0px)",
+        // Once open, let rings and strokes drawn outside the fields show.
+        transitionEnd: { overflow: "visible" },
+        transition: {
+          duration: still ? 0 : 0.42,
+          ease: GLIDE,
+          delay: still ? 0 : delay
+        }
+      },
+      exit: {
+        height: 0,
+        opacity: 0,
+        filter: "blur(4px)",
+        overflow: "hidden",
+        transition: { duration: still ? 0 : 0.3, ease: GLIDE }
+      },
+      children
+    }
+  ) });
+}
+function Field({
+  id,
+  label,
+  type,
+  value,
+  onChange,
+  icon: Icon,
+  autoComplete,
+  error,
+  valid,
+  shake,
+  invalid,
+  invalidHint,
+  end,
+  inputRef
+}) {
+  const still = !!useReducedMotion4();
+  const [focus, setFocus] = React.useState(false);
+  const filled = value.trim().length > 0;
+  const [tip, setTip] = React.useState(false);
+  React.useEffect(() => {
+    if (!invalid) setTip(false);
+  }, [invalid]);
+  const hint = invalidHint ?? "Use a full email address, like name@example.com.";
+  const box = useAnimationControls();
+  React.useEffect(() => {
+    if (error && shake && !still)
+      void box.start({
+        x: [0, -7, 7, -5, 5, -2, 0],
+        transition: { duration: 0.45 }
+      });
+  }, [shake]);
+  return /* @__PURE__ */ jsxs4("div", { className: "pt-3", children: [
+    /* @__PURE__ */ jsx4(
+      "label",
+      {
+        htmlFor: id,
+        className: "mb-1.5 block px-4 text-xs font-medium text-zinc-500",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      motion4.div,
+      {
+        animate: box,
+        className: cn(
+          "relative flex h-12 items-center gap-2.5 rounded-full pl-4 pr-3.5 transition-[background-color,box-shadow] duration-300",
+          focus ? "bg-white shadow-[0_0_0_4px_rgba(36,36,35,0.08),0_1px_2px_rgba(0,0,0,0.06)]" : filled ? (
+            // Done: pure white with a thin stroke, so a filled field reads as complete.
+            "bg-white shadow-[0_0_0_1.5px_rgba(36,36,35,0.3)]"
+          ) : "bg-[#242423]/[0.045] hover:bg-[#242423]/[0.07]",
+          error && !invalid && "shadow-[0_0_0_2px_rgba(214,69,69,0.55)]",
+          invalid && "shadow-[0_0_0_1px_rgba(214,69,69,0.3)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx4(AnimatePresence, { children: invalid && /* @__PURE__ */ jsx4(
+            motion4.span,
+            {
+              "aria-hidden": true,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.25 },
+              className: "pointer-events-none absolute inset-0 overflow-hidden rounded-full p-px",
+              style: {
+                WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                WebkitMaskComposite: "xor",
+                mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)"
+              },
+              children: /* @__PURE__ */ jsx4(
+                motion4.span,
+                {
+                  className: "absolute left-1/2 top-1/2 aspect-square w-[160%] -translate-x-1/2 -translate-y-1/2",
+                  style: {
+                    background: "conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(214,69,69,0.12) 290deg, rgba(214,69,69,0.75) 335deg, rgba(255,214,214,0.95) 350deg, transparent 360deg)"
+                  },
+                  animate: still ? void 0 : { rotate: 360 },
+                  transition: { duration: 2.4, repeat: Infinity, ease: "linear" }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "grid shrink-0 transition-colors duration-200",
+                focus ? "text-[#242423]" : "text-zinc-400"
+              ),
+              children: /* @__PURE__ */ jsx4(Icon, { className: "size-[18px]", active: focus })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type,
+              value,
+              autoComplete,
+              spellCheck: false,
+              "aria-invalid": !!error || !!invalid || void 0,
+              "aria-describedby": error ? `${id}-error` : invalid ? `${id}-hint` : void 0,
+              onChange: (e) => onChange(e.target.value),
+              onFocus: () => setFocus(true),
+              onBlur: () => setFocus(false),
+              className: "h-full min-w-0 flex-1 bg-transparent text-sm text-[#242423] outline-none placeholder:text-zinc-400"
+            }
+          ),
+          invalid && !error && /* @__PURE__ */ jsx4("span", { id: `${id}-hint`, className: "sr-only", children: hint }),
+          /* @__PURE__ */ jsxs4(AnimatePresence, { initial: false, mode: "popLayout", children: [
+            invalid && /* @__PURE__ */ jsxs4(
+              motion4.span,
+              {
+                initial: still ? false : { scale: 0, opacity: 0, rotate: -30 },
+                animate: { scale: 1, opacity: 1, rotate: 0 },
+                exit: { scale: 0, opacity: 0 },
+                transition: { type: "spring", stiffness: 600, damping: 18 },
+                className: "relative grid",
+                style: { color: BAD },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    "span",
+                    {
+                      tabIndex: 0,
+                      role: "img",
+                      "aria-label": hint,
+                      "aria-describedby": tip ? `${id}-tip` : void 0,
+                      onPointerEnter: () => setTip(true),
+                      onPointerLeave: () => setTip(false),
+                      onFocus: () => setTip(true),
+                      onBlur: () => setTip(false),
+                      className: "grid cursor-help rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[#d64545]/40",
+                      children: /* @__PURE__ */ jsx4(
+                        BadgeAlertIcon,
+                        {
+                          className: "size-[18px]",
+                          active: tip || void 0
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(AnimatePresence, { children: tip && /* @__PURE__ */ jsxs4(
+                    motion4.span,
+                    {
+                      id: `${id}-tip`,
+                      role: "tooltip",
+                      initial: {
+                        opacity: 0,
+                        y: 6,
+                        scale: 0.96,
+                        filter: "blur(4px)"
+                      },
+                      animate: {
+                        opacity: 1,
+                        y: 0,
+                        scale: 1,
+                        filter: "blur(0px)"
+                      },
+                      exit: {
+                        opacity: 0,
+                        y: 4,
+                        scale: 0.97,
+                        filter: "blur(4px)"
+                      },
+                      transition: { duration: still ? 0 : 0.2, ease: GLIDE },
+                      className: "pointer-events-none absolute bottom-[calc(100%+12px)] right-[-10px] z-20 w-56 origin-bottom-right rounded-xl bg-[#242423] px-3 py-2 text-left text-xs leading-relaxed text-white shadow-[0_8px_24px_-8px_rgba(0,0,0,0.35)]",
+                      children: [
+                        /* @__PURE__ */ jsxs4("span", { className: "flex items-start gap-1.5", children: [
+                          /* @__PURE__ */ jsx4(
+                            "span",
+                            {
+                              className: "mt-[5px] size-1.5 shrink-0 rounded-full",
+                              style: { background: BAD }
+                            }
+                          ),
+                          hint
+                        ] }),
+                        /* @__PURE__ */ jsx4("span", { className: "absolute -bottom-1 right-[14px] size-2.5 rotate-45 rounded-[2px] bg-[#242423]" })
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              "bad"
+            ),
+            valid && !error && !invalid && /* @__PURE__ */ jsx4(
+              motion4.span,
+              {
+                initial: still ? false : { scale: 0, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0, opacity: 0 },
+                transition: { type: "spring", stiffness: 600, damping: 20 },
+                className: "grid text-[#269a5a]",
+                children: /* @__PURE__ */ jsx4(CircleCheckIcon, { className: "size-[18px]", active: true })
+              },
+              "ok"
+            )
+          ] }),
+          end
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(AnimatePresence, { initial: false, children: error && /* @__PURE__ */ jsx4(
+      motion4.p,
+      {
+        id: `${id}-error`,
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: still ? 0 : 0.25, ease: GLIDE },
+        className: "overflow-hidden px-4 text-xs",
+        style: { color: BAD },
+        children: /* @__PURE__ */ jsx4("span", { className: "block pt-1.5", children: error })
+      }
+    ) })
+  ] });
+}
+var LOGOS = {
+  github: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", className: "size-[18px]", "aria-hidden": true, children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+    }
+  ) }),
+  google: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", className: "size-[18px]", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.06H2.18A11 11 0 0 0 1 12c0 1.77.43 3.45 1.18 4.94l3.66-2.84z"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+      }
+    )
+  ] }),
+  apple: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", className: "size-[18px]", "aria-hidden": true, children: /* @__PURE__ */ jsx4(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+    }
+  ) })
+};
+var PROVIDERS = [
+  { id: "google", label: "Google" },
+  { id: "apple", label: "Apple" },
+  { id: "github", label: "GitHub" }
+];
+function SocialButton({
+  provider,
+  label,
+  onPress,
+  disabled
+}) {
+  const still = !!useReducedMotion4();
+  const [hover, setHover] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  return /* @__PURE__ */ jsxs4(
+    motion4.button,
+    {
+      type: "button",
+      "aria-label": `Continue with ${label}`,
+      disabled: disabled || busy,
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => setHover(false),
+      onClick: async () => {
+        setBusy(true);
+        try {
+          await onPress();
+        } finally {
+          setBusy(false);
+        }
+      },
+      whileHover: still ? void 0 : { y: -2 },
+      whileTap: still ? void 0 : { scale: 0.95, y: 0 },
+      transition: { type: "spring", stiffness: 500, damping: 28 },
+      className: "flex h-11 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full bg-[#242423]/[0.045] text-sm font-medium text-[#242423] outline-none transition-[background-color,box-shadow] duration-200 hover:bg-white hover:shadow-[0_0_0_1px_rgba(36,36,35,0.08),0_6px_16px_-8px_rgba(0,0,0,0.25)] disabled:cursor-default focus-visible:ring-2 focus-visible:ring-zinc-400",
+      children: [
+        /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", initial: false, children: busy ? /* @__PURE__ */ jsx4(
+          motion4.span,
+          {
+            initial: { scale: 0.5, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0.5, opacity: 0 },
+            className: "grid text-zinc-500",
+            children: /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "size-[18px]", active: true })
+          },
+          "busy"
+        ) : /* @__PURE__ */ jsx4(
+          motion4.span,
+          {
+            initial: { scale: 0.5, opacity: 0 },
+            animate: {
+              scale: 1,
+              opacity: 1,
+              rotate: hover && !still ? [0, -12, 10, -6, 0] : 0
+            },
+            exit: { scale: 0.5, opacity: 0 },
+            transition: {
+              rotate: { duration: 0.5 },
+              default: { duration: 0.2 }
+            },
+            className: "grid",
+            children: LOGOS[provider]
+          },
+          "logo"
+        ) }),
+        label
+      ]
+    }
+  );
+}
+var wait = (ms) => new Promise((r) => setTimeout(r, ms));
+var AuthCard = React.forwardRef(
+  function AuthCard2({
+    defaultMode = "signin",
+    mode: modeProp,
+    onModeChange,
+    onSubmit,
+    onSocial,
+    onForgotPassword,
+    logo,
+    className
+  }, ref) {
+    const still = !!useReducedMotion4();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const seen = useInView(root, { once: true, amount: 0.3 });
+    const [own, setOwn] = React.useState(defaultMode);
+    const mode = modeProp ?? own;
+    const signup = mode === "signup";
+    const dir = signup ? 1 : -1;
+    const copy = COPY[mode];
+    const [name, setName] = React.useState("");
+    const [email, setEmail] = React.useState("");
+    const [password, setPassword] = React.useState("");
+    const [show, setShow] = React.useState(false);
+    const [errors, setErrors] = React.useState({});
+    const [shake, setShake] = React.useState(0);
+    const [status, setStatus] = React.useState(
+      "idle"
+    );
+    const [ctaHover, setCtaHover] = React.useState(false);
+    const [turns, setTurns] = React.useState(0);
+    const [logoHover, setLogoHover] = React.useState(false);
+    const nameRef = React.useRef(null);
+    const switchMode = () => {
+      const next = signup ? "signin" : "signup";
+      setOwn(next);
+      onModeChange?.(next);
+      setErrors({});
+      setStatus("idle");
+      setTurns((t) => t + 1);
+    };
+    const edit = (key, set) => (v) => {
+      set(v);
+      if (errors[key] || errors.form)
+        setErrors((e) => ({ ...e, [key]: void 0, form: void 0 }));
+    };
+    const level = strength(password);
+    const [settled, setSettled] = React.useState("");
+    React.useEffect(() => {
+      const t = window.setTimeout(() => setSettled(email), 800);
+      return () => window.clearTimeout(t);
+    }, [email]);
+    const emailOk = EMAIL.test(email.trim());
+    const emailBad = email.trim().length > 0 && !emailOk && settled === email;
+    const submit = async (e) => {
+      e.preventDefault();
+      if (status !== "idle") return;
+      const next = {};
+      if (signup && !name.trim()) next.name = "Tell us what to call you.";
+      if (!emailOk)
+        next.email = email ? "That email doesn't look right." : "Enter your email.";
+      if (!password) next.password = "Enter your password.";
+      else if (signup && password.length < 8)
+        next.password = "Use at least 8 characters.";
+      if (Object.keys(next).length) {
+        setErrors(next);
+        setShake((n) => n + 1);
+        return;
+      }
+      setStatus("busy");
+      try {
+        const details = {
+          mode,
+          email: email.trim(),
+          password,
+          ...signup ? { name: name.trim() } : {}
+        };
+        if (onSubmit) await onSubmit(details);
+        else await wait(1200);
+        setStatus("done");
+        if (!onSubmit) window.setTimeout(() => setStatus("idle"), 1800);
+      } catch (err) {
+        setStatus("idle");
+        setErrors({
+          form: err instanceof Error ? err.message : "Something went wrong. Try again."
+        });
+        setShake((n) => n + 1);
+      }
+    };
+    const social = async (p) => {
+      if (onSocial) await onSocial(p);
+      else await wait(1e3);
+    };
+    return /* @__PURE__ */ jsxs4(
+      motion4.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 16 },
+        animate: seen || still ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.55, ease: GLIDE },
+        className: cn(
+          "w-[380px] max-w-full rounded-[32px] bg-white p-6 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center text-center", children: [
+            /* @__PURE__ */ jsx4(
+              motion4.span,
+              {
+                onPointerEnter: () => setLogoHover(true),
+                onPointerLeave: () => setLogoHover(false),
+                initial: still ? false : { scale: 0.6, opacity: 0 },
+                animate: {
+                  scale: seen || still ? 1 : 0.6,
+                  opacity: seen || still ? 1 : 0,
+                  rotate: logoHover && !still ? -6 : 0,
+                  y: logoHover && !still ? -2 : 0
+                },
+                transition: { type: "spring", stiffness: 420, damping: 22 },
+                className: "grid",
+                children: logo ?? /* @__PURE__ */ jsx4(BrandMark, { turn: turns, still })
+              }
+            ),
+            /* @__PURE__ */ jsx4("h3", { className: "mt-5 text-2xl font-semibold tracking-tight", children: /* @__PURE__ */ jsx4(Roll, { dir, children: copy.title }) }),
+            /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-sm text-zinc-500", children: /* @__PURE__ */ jsx4(Roll, { dir, children: copy.sub }) })
+          ] }),
+          /* @__PURE__ */ jsxs4(
+            "form",
+            {
+              noValidate: true,
+              onSubmit: submit,
+              className: "mt-4",
+              "aria-label": copy.title,
+              children: [
+                /* @__PURE__ */ jsx4(Reveal, { show: signup, children: /* @__PURE__ */ jsx4(
+                  Field,
+                  {
+                    id: `${id}-name`,
+                    label: "Name",
+                    type: "text",
+                    value: name,
+                    onChange: edit("name", setName),
+                    icon: UserIcon,
+                    autoComplete: "name",
+                    error: errors.name,
+                    valid: name.trim().length > 1,
+                    shake,
+                    inputRef: nameRef
+                  }
+                ) }),
+                /* @__PURE__ */ jsx4(
+                  Field,
+                  {
+                    id: `${id}-email`,
+                    label: "Email",
+                    type: "email",
+                    value: email,
+                    onChange: edit("email", setEmail),
+                    icon: AtSignIcon,
+                    autoComplete: "email",
+                    error: errors.email,
+                    valid: emailOk,
+                    invalid: emailBad || !!errors.email && !!email,
+                    shake
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  Field,
+                  {
+                    id: `${id}-password`,
+                    label: "Password",
+                    type: show ? "text" : "password",
+                    value: password,
+                    onChange: edit("password", setPassword),
+                    icon: LockKeyholeIcon,
+                    autoComplete: signup ? "new-password" : "current-password",
+                    error: errors.password,
+                    shake,
+                    end: /* @__PURE__ */ jsx4(
+                      motion4.button,
+                      {
+                        type: "button",
+                        "aria-label": show ? "Hide password" : "Show password",
+                        "aria-pressed": show,
+                        onClick: () => setShow((s) => !s),
+                        whileTap: still ? void 0 : { scale: 0.85 },
+                        className: "-mr-1.5 grid size-8 shrink-0 cursor-pointer place-items-center rounded-full text-zinc-400 outline-none transition-colors hover:bg-[#242423]/[0.06] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                        children: /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx4(
+                          motion4.span,
+                          {
+                            initial: { opacity: 0, scale: 0.6, filter: "blur(2px)" },
+                            animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+                            exit: { opacity: 0, scale: 0.6, filter: "blur(2px)" },
+                            transition: { duration: 0.18 },
+                            className: "grid",
+                            children: show ? /* @__PURE__ */ jsx4(EyeOffIcon, { className: "size-[18px]" }) : /* @__PURE__ */ jsx4(EyeIcon, { className: "size-[18px]" })
+                          },
+                          show ? "off" : "on"
+                        ) })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx4(Reveal, { show: signup, delay: 0.08, children: /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: "flex items-center gap-3 px-4 pt-2.5",
+                    "aria-live": "polite",
+                    children: [
+                      /* @__PURE__ */ jsx4("div", { className: "flex flex-1 gap-1", children: [1, 2, 3, 4].map((n) => /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          className: "h-1 flex-1 overflow-hidden rounded-full bg-[#242423]/[0.07]",
+                          children: /* @__PURE__ */ jsx4(
+                            motion4.span,
+                            {
+                              className: "block h-full origin-left rounded-full",
+                              animate: {
+                                scaleX: level >= n ? 1 : 0,
+                                backgroundColor: LEVELS[level].color
+                              },
+                              transition: {
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 26,
+                                delay: still ? 0 : (n - 1) * 0.04
+                              }
+                            }
+                          )
+                        },
+                        n
+                      )) }),
+                      /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          className: "w-16 whitespace-nowrap text-right text-xs font-medium",
+                          style: { color: LEVELS[level].color },
+                          children: level ? /* @__PURE__ */ jsx4(Roll, { dir: 1, children: LEVELS[level].label }) : /* @__PURE__ */ jsx4("span", { className: "text-zinc-400", children: "8+ chars" })
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx4(Reveal, { show: !signup, children: /* @__PURE__ */ jsx4("div", { className: "flex justify-end px-3 pt-2.5", children: /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onForgotPassword?.(email),
+                    className: "group/f relative cursor-pointer rounded-md text-xs font-medium text-zinc-500 outline-none transition-colors hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                    children: [
+                      "Forgot password?",
+                      /* @__PURE__ */ jsx4("span", { className: "absolute inset-x-0 -bottom-0.5 h-px origin-right scale-x-0 bg-[#242423] transition-transform duration-300 ease-out group-hover/f:origin-left group-hover/f:scale-x-100" })
+                    ]
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx4(AnimatePresence, { initial: false, children: errors.form && /* @__PURE__ */ jsx4(
+                  motion4.p,
+                  {
+                    role: "alert",
+                    initial: { height: 0, opacity: 0 },
+                    animate: { height: "auto", opacity: 1 },
+                    exit: { height: 0, opacity: 0 },
+                    className: "overflow-hidden px-1 text-xs",
+                    style: { color: BAD },
+                    children: /* @__PURE__ */ jsx4("span", { className: "block pt-3", children: errors.form })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs4(
+                  motion4.button,
+                  {
+                    type: "submit",
+                    onPointerEnter: () => setCtaHover(true),
+                    onPointerLeave: () => setCtaHover(false),
+                    whileTap: still || status !== "idle" ? void 0 : { scale: 0.97 },
+                    animate: { backgroundColor: status === "done" ? GOOD : INK },
+                    transition: { duration: 0.3 },
+                    "aria-busy": status === "busy",
+                    className: "relative mt-5 flex h-12 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+                    children: [
+                      /* @__PURE__ */ jsx4(AnimatePresence, { children: status === "busy" && !still && /* @__PURE__ */ jsx4(
+                        motion4.span,
+                        {
+                          "aria-hidden": true,
+                          initial: { opacity: 0 },
+                          animate: { opacity: 1 },
+                          exit: { opacity: 0 },
+                          className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
+                          children: /* @__PURE__ */ jsx4(
+                            motion4.span,
+                            {
+                              className: "absolute inset-y-0 left-0 w-2/3",
+                              style: {
+                                background: "linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%)"
+                              },
+                              initial: { x: "-100%" },
+                              animate: { x: "160%" },
+                              transition: {
+                                duration: 1.4,
+                                ease: "easeInOut",
+                                repeat: Infinity,
+                                repeatDelay: 0.15
+                              }
+                            }
+                          )
+                        },
+                        "sheen"
+                      ) }),
+                      /* @__PURE__ */ jsx4(AnimatePresence, { children: status === "done" && !still && /* @__PURE__ */ jsx4(
+                        motion4.span,
+                        {
+                          "aria-hidden": true,
+                          className: "pointer-events-none absolute left-1/2 top-1/2 size-24 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/25",
+                          initial: { scale: 0.2, opacity: 0.8 },
+                          animate: { scale: 5, opacity: 0 },
+                          exit: { opacity: 0 },
+                          transition: { duration: 0.8, ease: GLIDE }
+                        },
+                        "ripple"
+                      ) }),
+                      /* @__PURE__ */ jsx4("span", { className: "sr-only", "aria-live": "polite", children: status === "busy" ? copy.busy : status === "done" ? copy.done : "" }),
+                      /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs4(
+                        motion4.span,
+                        {
+                          initial: still ? false : { y: 18, opacity: 0, filter: "blur(4px)" },
+                          animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+                          exit: still ? void 0 : { y: -18, opacity: 0, filter: "blur(4px)" },
+                          transition: { duration: 0.3, ease: GLIDE },
+                          className: "flex items-center gap-2",
+                          "aria-hidden": true,
+                          children: [
+                            status === "idle" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                              /* @__PURE__ */ jsx4(Roll, { dir, children: copy.cta }),
+                              /* @__PURE__ */ jsx4(
+                                motion4.span,
+                                {
+                                  className: "grid",
+                                  animate: { x: ctaHover && !still ? 3 : 0 },
+                                  transition: {
+                                    type: "spring",
+                                    stiffness: 500,
+                                    damping: 24
+                                  },
+                                  children: /* @__PURE__ */ jsx4(ArrowRightIcon, { className: "size-4", active: ctaHover })
+                                }
+                              )
+                            ] }),
+                            status === "busy" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                              /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "size-4", active: true }),
+                              /* @__PURE__ */ jsx4("span", { className: "relative", children: copy.busy }),
+                              /* @__PURE__ */ jsx4("span", { className: "-ml-1.5 flex items-end gap-[3px] pb-[3px]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx4(
+                                motion4.span,
+                                {
+                                  className: "size-[3px] rounded-full bg-white",
+                                  animate: still ? void 0 : { y: [0, -3, 0], opacity: [0.4, 1, 0.4] },
+                                  transition: {
+                                    duration: 0.9,
+                                    repeat: Infinity,
+                                    delay: i * 0.15,
+                                    ease: "easeInOut"
+                                  }
+                                },
+                                i
+                              )) })
+                            ] }),
+                            status === "done" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                              /* @__PURE__ */ jsx4(
+                                motion4.span,
+                                {
+                                  className: "grid",
+                                  initial: still ? false : { scale: 0.4, rotate: -20 },
+                                  animate: { scale: 1, rotate: 0 },
+                                  transition: {
+                                    type: "spring",
+                                    stiffness: 500,
+                                    damping: 16
+                                  },
+                                  children: signup ? /* @__PURE__ */ jsx4(CircleCheckIcon, { className: "size-4", active: true }) : (
+                                    // Signed in: the lock opens.
+                                    /* @__PURE__ */ jsx4(Unlock, {})
+                                  )
+                                }
+                              ),
+                              copy.done
+                            ] })
+                          ]
+                        },
+                        status
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-center gap-3 text-xs text-zinc-400", children: [
+            /* @__PURE__ */ jsx4(
+              motion4.span,
+              {
+                className: "h-px flex-1 origin-right bg-[#242423]/[0.08]",
+                initial: still ? false : { scaleX: 0 },
+                animate: seen || still ? { scaleX: 1 } : void 0,
+                transition: { duration: 0.6, ease: GLIDE, delay: 0.3 }
+              }
+            ),
+            "or continue with",
+            /* @__PURE__ */ jsx4(
+              motion4.span,
+              {
+                className: "h-px flex-1 origin-left bg-[#242423]/[0.08]",
+                initial: still ? false : { scaleX: 0 },
+                animate: seen || still ? { scaleX: 1 } : void 0,
+                transition: { duration: 0.6, ease: GLIDE, delay: 0.3 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "mt-4 flex gap-2", children: PROVIDERS.map((p) => /* @__PURE__ */ jsx4(
+            SocialButton,
+            {
+              provider: p.id,
+              label: p.label,
+              onPress: () => social(p.id),
+              disabled: status === "busy"
+            },
+            p.id
+          )) }),
+          /* @__PURE__ */ jsxs4("p", { className: "mt-6 flex items-center justify-center gap-1.5 text-sm text-zinc-500", children: [
+            /* @__PURE__ */ jsx4(Roll, { dir, children: copy.ask }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: switchMode,
+                className: "cursor-pointer rounded-md font-medium text-[#242423] outline-none transition-opacity hover:opacity-60 focus-visible:ring-2 focus-visible:ring-zinc-400",
+                children: /* @__PURE__ */ jsx4(Roll, { dir, children: copy.flip })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AuthCard
+};