motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-TRWXLGL7.js

@@ -0,0 +1,885 @@
+"use client";
+import {
+  RefreshCWIcon
+} from "./chunk-VEC5QAOY.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 {
+  SmartphoneNfcIcon
+} from "./chunk-OS6REIBR.js";
+import {
+  ShieldCheckIcon
+} from "./chunk-WE7VCUOA.js";
+import {
+  HistoryIcon
+} from "./chunk-BPE43MTT.js";
+import {
+  MailCheckIcon
+} from "./chunk-CEQ56RF6.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/otp-code/otp-code.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useAnimationControls,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var INK = "#242423";
+var GOOD = "#269a5a";
+var BAD = "#d64545";
+function maskEmail(v) {
+  const [user = "", domain = ""] = v.split("@");
+  return `${user.slice(0, 2)}\u2022\u2022\u2022@${domain}`;
+}
+function maskPhone(v) {
+  const digits = v.replace(/\D/g, "");
+  const tail = digits.slice(-4);
+  const head = v.trim().startsWith("+") ? `+${digits.slice(0, digits.length > 10 ? digits.length - 10 : 1)} ` : "";
+  return `${head}\u2022\u2022\u2022 \u2022\u2022\u2022 ${tail}`;
+}
+function Roll({
+  children,
+  className
+}) {
+  const still = !!useReducedMotion();
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-grid", className), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      initial: still ? false : { y: "60%", opacity: 0, filter: "blur(4px)" },
+      animate: { y: "0%", opacity: 1, filter: "blur(0px)" },
+      exit: still ? void 0 : { y: "-60%", opacity: 0, filter: "blur(4px)" },
+      transition: { duration: 0.35, ease: GLIDE },
+      className: "col-start-1 row-start-1",
+      children
+    },
+    children
+  ) }) });
+}
+function Box({
+  index,
+  char,
+  active,
+  status,
+  mask,
+  still,
+  count,
+  shown
+}) {
+  const filled = char !== "";
+  const tone = status === "success" ? GOOD : status === "error" ? BAD : INK;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: still ? false : { opacity: 0, scale: 0.8 },
+      animate: {
+        y: status === "checking" && !still ? [0, -5, 0] : 0,
+        opacity: shown ? 1 : 0,
+        scale: shown ? 1 : 0.8
+      },
+      transition: {
+        y: status === "checking" ? {
+          duration: 0.6,
+          repeat: Infinity,
+          repeatDelay: 0.25,
+          delay: index * 0.07,
+          ease: "easeInOut"
+        } : { type: "spring", stiffness: 500, damping: 26 },
+        opacity: { duration: 0.35, delay: still ? 0 : 0.35 + index * 0.05 },
+        scale: {
+          type: "spring",
+          stiffness: 420,
+          damping: 22,
+          delay: still ? 0 : 0.35 + index * 0.05
+        }
+      },
+      className: cn(
+        "relative grid h-14 min-w-0 max-w-[52px] flex-1 place-items-center rounded-2xl text-2xl font-semibold tabular-nums transition-[background-color,box-shadow] duration-300",
+        active ? "bg-white shadow-[0_0_0_4px_rgba(36,36,35,0.08),0_0_0_1.5px_rgba(36,36,35,0.35)]" : filled ? "bg-white shadow-[0_0_0_1.5px_rgba(36,36,35,0.3)]" : "bg-[#242423]/[0.045]"
+      ),
+      style: status === "success" || status === "error" ? {
+        boxShadow: `0 0 0 1.5px ${tone}`,
+        backgroundColor: status === "success" ? "rgba(38,154,90,0.06)" : "rgba(214,69,69,0.05)",
+        transitionDelay: `${index * (still ? 0 : 0.05)}s`
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: filled && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: still ? false : { y: 12, scale: 0.6, opacity: 0, filter: "blur(4px)" },
+            animate: {
+              y: 0,
+              scale: 1,
+              opacity: 1,
+              filter: "blur(0px)",
+              color: tone
+            },
+            exit: still ? void 0 : {
+              y: 14,
+              opacity: 0,
+              filter: "blur(4px)",
+              transition: {
+                duration: 0.25,
+                delay: (count - 1 - index) * 0.04
+              }
+            },
+            transition: {
+              type: "spring",
+              stiffness: 520,
+              damping: 24,
+              color: { duration: 0.3, delay: index * (still ? 0 : 0.05) }
+            },
+            className: "leading-none",
+            children: mask ? /* @__PURE__ */ jsx("span", { className: "block size-2.5 rounded-full bg-current" }) : char
+          },
+          `${index}-${char}`
+        ) }),
+        active && !still && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "absolute h-6 w-[2px] rounded-full bg-[#242423]",
+            animate: { opacity: [1, 1, 0, 0] },
+            transition: {
+              duration: 1,
+              repeat: Infinity,
+              times: [0, 0.5, 0.5, 1]
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var wait = (ms) => new Promise((r) => setTimeout(r, ms));
+var RISE = {
+  hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.45, ease: GLIDE }
+  }
+};
+function Badge({ still }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative grid size-20 place-items-center", children: [
+    !still && [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        "aria-hidden": true,
+        className: "absolute inset-0 rounded-full",
+        style: { boxShadow: `0 0 0 1.5px ${GOOD}` },
+        initial: { scale: 0.8, opacity: 0 },
+        animate: { scale: [0.8, 1.55], opacity: [0.55, 0] },
+        transition: {
+          duration: 1.6,
+          ease: "easeOut",
+          delay: 0.75 + i * 0.35,
+          repeat: 1,
+          repeatDelay: 0.6
+        }
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        "aria-hidden": true,
+        className: "absolute inset-2 rounded-full bg-[#269a5a]/15",
+        initial: still ? false : { scale: 0 },
+        animate: { scale: 1 },
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 18,
+          delay: still ? 0 : 0.55
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        className: "relative grid size-14 place-items-center rounded-full text-white shadow-[0_8px_20px_-8px_rgba(38,154,90,0.7)]",
+        style: { background: `linear-gradient(160deg, #34b06c, ${GOOD})` },
+        initial: still ? false : { scale: 0, rotate: -40 },
+        animate: { scale: 1, rotate: 0 },
+        transition: {
+          type: "spring",
+          stiffness: 380,
+          damping: 15,
+          delay: still ? 0 : 0.6
+        },
+        children: /* @__PURE__ */ jsx(ShieldCheckIcon, { className: "size-7", active: !still })
+      }
+    )
+  ] });
+}
+function Toggle({
+  on,
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": on,
+      "aria-label": label,
+      onClick: onChange,
+      className: cn(
+        "relative h-6 w-10 shrink-0 cursor-pointer rounded-full outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+        on ? "bg-[#269a5a]" : "bg-[#242423]/15"
+      ),
+      children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
+          animate: { x: on ? 16 : 0 },
+          whileTap: { scaleX: 1.2 },
+          transition: { type: "spring", stiffness: 600, damping: 30 }
+        }
+      )
+    }
+  );
+}
+function Confirmation({
+  channel,
+  where,
+  at,
+  continueLabel,
+  onContinue,
+  onRemember,
+  still
+}) {
+  const id = React.useId();
+  const heading = React.useRef(null);
+  React.useEffect(() => {
+    const t = window.setTimeout(
+      () => heading.current?.focus({ preventScroll: true }),
+      still ? 0 : 500
+    );
+    return () => window.clearTimeout(t);
+  }, [still]);
+  const [hover, setHover] = React.useState(null);
+  const [remember, setRemember] = React.useState(true);
+  const [going, setGoing] = React.useState(false);
+  const Channel = channel === "email" ? MailCheckIcon : SmartphoneNfcIcon;
+  const time = (at ?? /* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+  const row = "relative flex items-center gap-3 rounded-[20px] px-3 py-3 outline-none";
+  const pill = (key) => hover === key && /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      layoutId: `${id}-row`,
+      className: "absolute inset-0 rounded-[20px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
+      transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 40 }
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "col-start-1 row-start-1 flex flex-col p-6",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0, transition: { duration: 0.2 } },
+      transition: { duration: 0.3, delay: still ? 0 : 0.5 },
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          variants: still ? void 0 : {
+            hidden: {},
+            shown: {
+              transition: { staggerChildren: 0.07, delayChildren: 0.85 }
+            }
+          },
+          initial: "hidden",
+          animate: "shown",
+          className: "flex flex-col items-center text-center",
+          children: [
+            /* @__PURE__ */ jsx(Badge, { still }),
+            /* @__PURE__ */ jsx(
+              motion.h3,
+              {
+                ref: heading,
+                tabIndex: -1,
+                variants: still ? void 0 : RISE,
+                className: "mt-4 text-2xl font-semibold tracking-tight outline-none",
+                children: "You're verified"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.p,
+              {
+                variants: still ? void 0 : RISE,
+                className: "mt-1.5 text-sm text-zinc-500",
+                children: [
+                  channel === "email" ? "Your email" : "Your number",
+                  " is confirmed. You're all set."
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                variants: still ? void 0 : RISE,
+                onPointerLeave: () => setHover(null),
+                className: "mt-6 w-full rounded-3xl bg-[#242423]/[0.045] p-1.5 text-left",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: row, onPointerEnter: () => setHover("dest"), children: [
+                    pill("dest"),
+                    /* @__PURE__ */ jsx("span", { className: "relative grid size-9 shrink-0 place-items-center rounded-full bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.06)]", children: /* @__PURE__ */ jsx(Channel, { className: "size-[18px]", active: hover === "dest" }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "relative min-w-0 flex-1 leading-tight", children: [
+                      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: where }),
+                      /* @__PURE__ */ jsxs("span", { className: "mt-0.5 block text-xs text-zinc-500", children: [
+                        "Verified at ",
+                        time
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      motion.span,
+                      {
+                        className: "relative flex shrink-0 items-center gap-1 rounded-full bg-[#269a5a]/10 px-2 py-1 text-xs font-medium text-[#269a5a]",
+                        initial: still ? false : { scale: 0.6, opacity: 0 },
+                        animate: { scale: 1, opacity: 1 },
+                        transition: {
+                          type: "spring",
+                          stiffness: 500,
+                          damping: 20,
+                          delay: still ? 0 : 1.25
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-3.5", active: hover === "dest" }),
+                          "Verified"
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mx-3 h-px bg-[#242423]/[0.07]", "aria-hidden": true }),
+                  /* @__PURE__ */ jsxs("div", { className: row, onPointerEnter: () => setHover("trust"), children: [
+                    pill("trust"),
+                    /* @__PURE__ */ jsx("span", { className: "relative grid size-9 shrink-0 place-items-center rounded-full bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.06)]", children: /* @__PURE__ */ jsx(HistoryIcon, { className: "size-[18px]", active: hover === "trust" }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "relative min-w-0 flex-1 leading-tight", children: [
+                      /* @__PURE__ */ jsx("span", { id: `${id}-trust`, className: "block text-sm font-medium", children: "Remember this device" }),
+                      /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-zinc-500", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "inline-block",
+                          initial: still ? false : { y: 6, opacity: 0 },
+                          animate: { y: 0, opacity: 1 },
+                          exit: still ? void 0 : { y: -6, opacity: 0 },
+                          transition: { duration: 0.22, ease: GLIDE },
+                          children: remember ? "No codes here for 30 days" : "Ask for a code every time"
+                        },
+                        remember ? "on" : "off"
+                      ) }) })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        on: remember,
+                        label: "Remember this device",
+                        onChange: () => {
+                          setRemember((r) => !r);
+                          onRemember?.(!remember);
+                        }
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                type: "button",
+                variants: still ? void 0 : RISE,
+                onPointerEnter: () => setHover("go"),
+                onPointerLeave: () => setHover(null),
+                onClick: () => {
+                  setGoing(true);
+                  onContinue?.();
+                  window.setTimeout(() => setGoing(false), 900);
+                },
+                whileTap: still ? void 0 : { scale: 0.98 },
+                className: "mt-5 flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-[#242423] text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2",
+                children: [
+                  continueLabel,
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "grid",
+                      animate: going && !still ? { x: [0, 14, -14, 0], opacity: [1, 0, 0, 1] } : { x: hover === "go" && !still ? 3 : 0 },
+                      transition: going ? { duration: 0.6, times: [0, 0.45, 0.46, 1] } : { type: "spring", stiffness: 500, damping: 24 },
+                      children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4", active: hover === "go" })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var OtpCode = React.forwardRef(
+  function OtpCode2({
+    length: lengthProp = 6,
+    channel = "email",
+    destination,
+    maskDestination = true,
+    split = true,
+    mask = false,
+    resendAfter = 30,
+    verify,
+    onVerified,
+    onResend,
+    onContinue,
+    continueLabel = "Continue",
+    onRememberDevice,
+    autoFocus = false,
+    className
+  }, ref) {
+    const length = Math.max(3, Math.min(8, Math.round(lengthProp)));
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const input = React.useRef(null);
+    const seen = useInView(root, { once: true, amount: 0.4 });
+    const [value, setValue] = React.useState("");
+    const [focused, setFocused] = React.useState(false);
+    const [status, setStatus] = React.useState("idle");
+    const [error, setError] = React.useState(null);
+    const shake = useAnimationControls();
+    const appear = seen || still;
+    const enter = (delay) => ({
+      initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+      animate: appear ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+      transition: { duration: 0.45, ease: GLIDE, delay: still ? 0 : delay }
+    });
+    const stack = React.useRef(null);
+    const [height, setHeight] = React.useState("auto");
+    React.useEffect(() => {
+      const el = stack.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const entry = React.useRef(null);
+    const [verifiedAt, setVerifiedAt] = React.useState(null);
+    React.useEffect(() => {
+      if (entry.current) entry.current.inert = status === "success";
+    }, [status]);
+    React.useEffect(() => {
+      setValue("");
+      setStatus("idle");
+      setError(null);
+    }, [length]);
+    React.useEffect(() => {
+      if (seen && autoFocus) input.current?.focus({ preventScroll: true });
+    }, [seen, autoFocus]);
+    const check = React.useCallback(
+      async (code) => {
+        setStatus("checking");
+        setError(null);
+        let ok = false;
+        try {
+          if (verify) {
+            const [res] = await Promise.all([
+              verify(code),
+              wait(still ? 0 : 600)
+            ]);
+            ok = res;
+          } else {
+            await wait(900);
+            ok = true;
+          }
+        } catch {
+          ok = false;
+        }
+        if (ok) {
+          setStatus("success");
+          input.current?.blur();
+          onVerified?.(code);
+          return;
+        }
+        setStatus("error");
+        setError("That code didn't match. Try again.");
+        if (!still)
+          void shake.start({
+            x: [0, -9, 9, -6, 6, -3, 0],
+            transition: { duration: 0.5 }
+          });
+        await wait(still ? 300 : 1100);
+        setValue("");
+        setStatus("idle");
+        input.current?.focus({ preventScroll: true });
+      },
+      [verify, onVerified, still, shake]
+    );
+    const onChange = (raw) => {
+      if (status === "checking" || status === "success") return;
+      const next = raw.replace(/\D/g, "").slice(0, length);
+      setValue(next);
+      if (status === "error") setStatus("idle");
+      if (next.length === length) void check(next);
+    };
+    const [left, setLeft] = React.useState(resendAfter);
+    const [spin, setSpin] = React.useState(false);
+    const [sent, setSent] = React.useState(false);
+    React.useEffect(() => setLeft(resendAfter), [resendAfter]);
+    React.useEffect(() => {
+      if (!seen || left <= 0 || status === "success") return;
+      const t = window.setTimeout(() => setLeft((s) => s - 1), 1e3);
+      return () => window.clearTimeout(t);
+    }, [left, seen, status]);
+    const resend = async () => {
+      setSpin(true);
+      try {
+        if (onResend) await onResend();
+        else await wait(700);
+        setSent(true);
+        setValue("");
+        setError(null);
+        setStatus("idle");
+        setLeft(resendAfter);
+        input.current?.focus({ preventScroll: true });
+        window.setTimeout(() => setSent(false), 2200);
+      } finally {
+        setSpin(false);
+      }
+    };
+    const shown = destination ?? (channel === "email" ? "jordan@lumen.app" : "+1 415 555 0182");
+    const where = maskDestination ? channel === "email" ? maskEmail(shown) : maskPhone(shown) : shown;
+    const first = split && length >= 4 ? Math.ceil(length / 2) : length;
+    const chars = Array.from({ length }, (_, i) => value[i] ?? "");
+    const activeIndex = focused && status === "idle" ? Math.min(value.length, length - 1) : -1;
+    const title = channel === "email" ? "Check your email" : "Check your phone";
+    const sub = `We sent ${length === 8 ? "an" : "a"} ${length} digit code to`;
+    const done = status === "success";
+    const HeadIcon = channel === "email" ? MailCheckIcon : SmartphoneNfcIcon;
+    const mm = Math.floor(Math.max(0, left) / 60);
+    const ss = String(Math.max(0, left) % 60).padStart(2, "0");
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 20, scale: 0.98, filter: "blur(6px)" },
+        animate: seen || still ? { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "relative w-[380px] max-w-full overflow-hidden rounded-[32px] bg-white 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__ */ jsx(
+          motion.div,
+          {
+            initial: false,
+            animate: { height },
+            transition: still ? { duration: 0 } : { duration: 0.45, ease: GLIDE },
+            children: /* @__PURE__ */ jsxs("div", { ref: stack, className: "grid", children: [
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  ref: entry,
+                  "aria-hidden": done || void 0,
+                  animate: done ? {
+                    opacity: 0,
+                    scale: still ? 1 : 0.97,
+                    filter: still ? "blur(0px)" : "blur(6px)"
+                  } : { opacity: 1, scale: 1, filter: "blur(0px)" },
+                  transition: {
+                    duration: still ? 0 : 0.35,
+                    ease: GLIDE,
+                    delay: done && !still ? 0.45 : 0
+                  },
+                  className: "col-start-1 row-start-1 p-6",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          initial: still ? false : { scale: 0.5, opacity: 0, rotate: -12 },
+                          animate: appear ? { scale: 1, opacity: 1, rotate: 0 } : void 0,
+                          transition: {
+                            type: "spring",
+                            stiffness: 420,
+                            damping: 18,
+                            delay: still ? 0 : 0.1
+                          },
+                          className: "grid size-14 place-items-center rounded-2xl bg-[#242423]/[0.05] text-[#242423]",
+                          children: /* @__PURE__ */ jsx(
+                            HeadIcon,
+                            {
+                              className: "size-6",
+                              active: seen && status === "idle" && value.length === 0
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        motion.h3,
+                        {
+                          ...enter(0.18),
+                          className: "mt-5 text-2xl font-semibold tracking-tight",
+                          children: /* @__PURE__ */ jsx(Roll, { children: title })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        motion.p,
+                        {
+                          ...enter(0.25),
+                          id: `${id}-sub`,
+                          className: "mt-1.5 text-sm leading-relaxed text-zinc-500",
+                          children: [
+                            /* @__PURE__ */ jsx(Roll, { children: sub }),
+                            /* @__PURE__ */ jsx("br", {}),
+                            /* @__PURE__ */ jsx("span", { className: "font-medium text-[#242423]", children: where })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        animate: shake,
+                        className: "relative mt-7",
+                        onPointerDown: (e) => {
+                          e.preventDefault();
+                          input.current?.focus();
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ref: input,
+                              id: `${id}-code`,
+                              value,
+                              onChange: (e) => onChange(e.target.value),
+                              onFocus: () => setFocused(true),
+                              onBlur: () => setFocused(false),
+                              inputMode: "numeric",
+                              autoComplete: "one-time-code",
+                              pattern: "[0-9]*",
+                              maxLength: length,
+                              disabled: status === "success",
+                              "aria-label": `${length} digit verification code`,
+                              "aria-describedby": `${id}-sub${error ? ` ${id}-error` : ""}`,
+                              "aria-invalid": status === "error" || void 0,
+                              className: "absolute inset-0 z-10 size-full cursor-text opacity-0",
+                              style: { caretColor: "transparent" }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "flex items-center justify-center gap-2",
+                              "aria-hidden": true,
+                              children: [
+                                chars.slice(0, first).map((c, i) => /* @__PURE__ */ jsx(
+                                  Box,
+                                  {
+                                    index: i,
+                                    char: c,
+                                    active: activeIndex === i,
+                                    status,
+                                    mask,
+                                    still,
+                                    count: length,
+                                    shown: appear
+                                  },
+                                  i
+                                )),
+                                first < length && /* @__PURE__ */ jsx("span", { className: "mx-1 h-[2px] w-3 shrink-0 rounded-full bg-[#242423]/20" }),
+                                chars.slice(first).map((c, j) => {
+                                  const i = first + j;
+                                  return /* @__PURE__ */ jsx(
+                                    Box,
+                                    {
+                                      index: i,
+                                      char: c,
+                                      active: activeIndex === i,
+                                      status,
+                                      mask,
+                                      still,
+                                      count: length,
+                                      shown: appear
+                                    },
+                                    i
+                                  );
+                                })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "mt-4 flex h-5 items-center justify-center text-sm",
+                        "aria-live": "polite",
+                        children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [
+                          status === "checking" && /* @__PURE__ */ jsxs(
+                            motion.span,
+                            {
+                              initial: { opacity: 0, y: 6 },
+                              animate: { opacity: 1, y: 0 },
+                              exit: { opacity: 0, y: -6 },
+                              className: "flex items-center gap-2 text-zinc-500",
+                              children: [
+                                /* @__PURE__ */ jsx(LoaderCircleIcon, { className: "size-4", active: true }),
+                                "Checking code"
+                              ]
+                            },
+                            "checking"
+                          ),
+                          error && status !== "checking" && /* @__PURE__ */ jsxs(
+                            motion.span,
+                            {
+                              id: `${id}-error`,
+                              initial: { opacity: 0, y: 6 },
+                              animate: { opacity: 1, y: 0 },
+                              exit: { opacity: 0, y: -6 },
+                              className: "flex items-center gap-2",
+                              style: { color: BAD },
+                              children: [
+                                /* @__PURE__ */ jsx(BadgeAlertIcon, { className: "size-4", active: true }),
+                                error
+                              ]
+                            },
+                            "error"
+                          ),
+                          status === "success" && /* @__PURE__ */ jsx(
+                            motion.span,
+                            {
+                              initial: { opacity: 0, y: 6 },
+                              animate: { opacity: 1, y: 0 },
+                              className: "flex items-center gap-2 font-medium",
+                              style: { color: GOOD },
+                              children: "Code accepted"
+                            },
+                            "ok"
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        ...enter(0.35 + length * 0.05),
+                        className: "-mx-6 mt-5 flex items-center justify-center border-t border-[#242423]/[0.07] px-6 pt-5 text-sm text-zinc-500",
+                        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: sent ? /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            initial: { opacity: 0, y: 6 },
+                            animate: { opacity: 1, y: 0 },
+                            exit: { opacity: 0, y: -6 },
+                            className: "flex items-center gap-1.5 font-medium",
+                            style: { color: GOOD },
+                            children: [
+                              /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4", active: true }),
+                              "New code sent"
+                            ]
+                          },
+                          "sent"
+                        ) : left > 0 ? /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            initial: { opacity: 0, y: 6 },
+                            animate: { opacity: 1, y: 0 },
+                            exit: { opacity: 0, y: -6 },
+                            children: [
+                              "Didn't get it? Resend in",
+                              " ",
+                              /* @__PURE__ */ jsxs("span", { className: "font-medium tabular-nums text-[#242423]", children: [
+                                mm,
+                                ":",
+                                ss
+                              ] })
+                            ]
+                          },
+                          "wait"
+                        ) : /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            initial: { opacity: 0, y: 6 },
+                            animate: { opacity: 1, y: 0 },
+                            exit: { opacity: 0, y: -6 },
+                            className: "flex items-center gap-1",
+                            children: [
+                              "Didn't get it?",
+                              /* @__PURE__ */ jsxs(
+                                motion.button,
+                                {
+                                  type: "button",
+                                  onClick: resend,
+                                  disabled: spin,
+                                  whileTap: still ? void 0 : { scale: 0.95 },
+                                  className: "flex cursor-pointer items-center gap-1.5 rounded-full px-2 py-1 font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.05] disabled:cursor-wait focus-visible:ring-2 focus-visible:ring-zinc-400",
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      RefreshCWIcon,
+                                      {
+                                        className: "size-3.5",
+                                        active: spin || void 0
+                                      }
+                                    ),
+                                    "Resend code"
+                                  ]
+                                }
+                              )
+                            ]
+                          },
+                          "resend"
+                        ) })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: done && /* @__PURE__ */ jsx(
+                Confirmation,
+                {
+                  channel,
+                  where,
+                  at: verifiedAt,
+                  continueLabel,
+                  onContinue,
+                  onRemember: onRememberDevice,
+                  still
+                },
+                "done"
+              ) })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  OtpCode
+};