motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-OUVP5VKH.js

@@ -0,0 +1,702 @@
+"use client";
+import {
+  SettingsIcon
+} from "./chunk-NY7M42KC.js";
+import {
+  LogoutIcon
+} from "./chunk-75DEIDBX.js";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  UserIcon
+} from "./chunk-BHUNLG6S.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/account-menu/account-menu.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS = {
+  online: { label: "Online", line: "Available", color: "#269a5a" },
+  focus: { label: "Focus", line: "Notifications paused", color: "#5b5bff" },
+  away: { label: "Away", line: "Back soon", color: "#e8a317" },
+  hidden: { label: "Hidden", line: "Appears offline", color: "#a1a19b" }
+};
+var ORDER = ["online", "focus", "away", "hidden"];
+var DEFAULT_WORKSPACES = [
+  {
+    id: "lumen",
+    name: "Lumen",
+    plan: "Pro plan, 12 members",
+    color: "#242423"
+  },
+  {
+    id: "northwind",
+    name: "Northwind",
+    plan: "Free plan, 3 members",
+    color: "#8a8a85"
+  }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var MORPH = { type: "spring", stiffness: 340, damping: 32 };
+var PILL = { type: "spring", stiffness: 500, damping: 38 };
+var CARD = {
+  hidden: {},
+  shown: { transition: { staggerChildren: 0.045, delayChildren: 0.12 } }
+};
+var ITEM = {
+  hidden: { opacity: 0, y: 10, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.42, ease: GLIDE }
+  }
+};
+function Roll({
+  value,
+  still,
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-grid overflow-hidden", className), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "truncate",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "90%", filter: "blur(3px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-90%", filter: "blur(3px)" },
+      transition: { duration: 0.3, ease: GLIDE },
+      children: value
+    },
+    value
+  ) }) });
+}
+function Avatar({
+  src,
+  status,
+  size,
+  layoutId,
+  still
+}) {
+  const color = STATUS[status].color;
+  const dot = Math.round(size * 0.3);
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      layoutId,
+      transition: still ? { duration: 0 } : MORPH,
+      className: "relative block shrink-0",
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            draggable: false,
+            className: "size-full rounded-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "absolute -bottom-px -right-px grid place-items-center",
+            style: { width: dot, height: dot },
+            children: [
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !still && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  initial: { scale: 1, opacity: 0.7 },
+                  animate: { scale: 2.6, opacity: 0 },
+                  transition: { duration: 0.7, ease: GLIDE },
+                  className: "absolute inset-0 rounded-full",
+                  style: { backgroundColor: color }
+                },
+                status
+              ) }),
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: still ? false : { scale: 0.4 },
+                  animate: { scale: 1, backgroundColor: color },
+                  transition: POP,
+                  className: "relative size-full rounded-full ring-2 ring-white"
+                },
+                `dot-${status}`
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var AccountMenu = React.forwardRef(
+  function AccountMenu2({
+    name = "Jordan Lee",
+    handle = "@jordan",
+    avatar = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=144&h=144&fit=crop&crop=faces",
+    defaultOpen = false,
+    defaultStatus = "online",
+    onStatusChange,
+    workspaces = DEFAULT_WORKSPACES,
+    defaultWorkspace,
+    onWorkspaceChange,
+    storage = [6.4, 10],
+    onUpgrade,
+    onProfile,
+    onSettings,
+    onShortcuts,
+    onNewWorkspace,
+    onSignOut,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const pill = React.useRef(null);
+    const card = React.useRef(null);
+    const [open, setOpen] = React.useState(defaultOpen);
+    const [status, setStatus] = React.useState(defaultStatus);
+    const [space, setSpace] = React.useState(
+      defaultWorkspace ?? workspaces[0]?.id ?? ""
+    );
+    const [hover, setHover] = React.useState(null);
+    const [leaving, setLeaving] = React.useState(null);
+    const byKeyboard = React.useRef(false);
+    const current = workspaces.find((w) => w.id === space) ?? workspaces[0];
+    const close = React.useCallback(() => {
+      setOpen(false);
+      setHover(null);
+      setLeaving(null);
+      requestAnimationFrame(() => pill.current?.focus({ preventScroll: true }));
+    }, []);
+    React.useEffect(() => {
+      if (!open || !byKeyboard.current) return;
+      byKeyboard.current = false;
+      const t = window.setTimeout(
+        () => card.current?.querySelector("[role=radio][aria-checked=true]")?.focus(),
+        still ? 0 : 260
+      );
+      return () => window.clearTimeout(t);
+    }, [open, still]);
+    React.useEffect(() => {
+      if (leaving !== "ask") return;
+      const t = window.setTimeout(() => setLeaving(null), 2600);
+      return () => window.clearTimeout(t);
+    }, [leaving]);
+    const signOut = () => {
+      if (leaving === null) return setLeaving("ask");
+      if (leaving === "done") return;
+      setLeaving("done");
+      onSignOut?.();
+      window.setTimeout(close, still ? 400 : 1100);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape" && open) {
+        e.stopPropagation();
+        close();
+        return;
+      }
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      const items = Array.from(
+        card.current?.querySelectorAll("[data-item]") ?? []
+      );
+      if (!items.length) return;
+      e.preventDefault();
+      const at = items.indexOf(document.activeElement);
+      const next = e.key === "ArrowDown" ? (at + 1) % items.length : (at - 1 + items.length) % items.length;
+      items[at < 0 ? 0 : next]?.focus();
+    };
+    const glide = (key) => hover === key && /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        layoutId: `${id}-glide`,
+        transition: still ? { duration: 0 } : PILL,
+        className: "absolute inset-0 rounded-2xl bg-[#242423]/[0.05]"
+      }
+    );
+    const tiles = [
+      { key: "profile", label: "Profile", Icon: UserIcon, on: onProfile },
+      {
+        key: "settings",
+        label: "Settings",
+        Icon: SettingsIcon,
+        on: onSettings
+      },
+      {
+        key: "shortcuts",
+        label: "Shortcuts",
+        Icon: ZapIcon,
+        on: onShortcuts,
+        kbd: "?"
+      }
+    ];
+    const used = storage ? Math.min(1, storage[0] / storage[1]) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        onKeyDown: onKey,
+        className: cn(
+          // It only takes the pill's room; the card drops over what is below, like a menu.
+          "relative h-12 w-[320px] max-w-full",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 z-30 flex justify-center", children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layout: true,
+              transition: still ? { duration: 0 } : MORPH,
+              style: { borderRadius: open ? 28 : 999 },
+              className: cn(
+                "overflow-hidden bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+                open ? "w-full" : "w-auto"
+              ),
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: !open ? (
+                /* The pill */
+                /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    ref: pill,
+                    type: "button",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": false,
+                    onClick: (e) => {
+                      byKeyboard.current = e.detail === 0;
+                      setOpen(true);
+                    },
+                    initial: still ? { opacity: 0 } : { opacity: 0, filter: "blur(4px)" },
+                    animate: { opacity: 1, filter: "blur(0px)" },
+                    exit: { opacity: 0, transition: { duration: 0.12 } },
+                    whileHover: still ? void 0 : { scale: 1.02 },
+                    whileTap: still ? void 0 : { scale: 0.96 },
+                    transition: { duration: 0.25 },
+                    className: "group flex h-12 cursor-pointer items-center gap-2.5 rounded-full py-1.5 pl-1.5 pr-3.5 outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          src: avatar,
+                          status,
+                          size: 36,
+                          layoutId: `${id}-avatar`,
+                          still
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          layoutId: `${id}-name`,
+                          transition: still ? { duration: 0 } : MORPH,
+                          className: "text-[14px] font-semibold",
+                          children: name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "grid text-[#242423]/45 transition-transform duration-300 group-hover:translate-y-px", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", strokeWidth: 2.25 }) })
+                    ]
+                  },
+                  "pill"
+                )
+              ) : (
+                /* The card */
+                /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    ref: card,
+                    role: "menu",
+                    "aria-label": `${name} account`,
+                    variants: still ? void 0 : CARD,
+                    initial: "hidden",
+                    animate: "shown",
+                    exit: {
+                      opacity: 0,
+                      filter: "blur(4px)",
+                      transition: { duration: 0.15 }
+                    },
+                    onPointerLeave: () => setHover(null),
+                    className: "w-[320px] max-w-full p-2",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "rounded-[22px] bg-[#f1f1ef] p-3", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                          /* @__PURE__ */ jsx(
+                            Avatar,
+                            {
+                              src: avatar,
+                              status,
+                              size: 48,
+                              layoutId: `${id}-avatar`,
+                              still
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsx(
+                              motion.p,
+                              {
+                                layoutId: `${id}-name`,
+                                transition: still ? { duration: 0 } : MORPH,
+                                className: "w-fit truncate text-[16px] font-semibold leading-6",
+                                children: name
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              motion.p,
+                              {
+                                variants: ITEM,
+                                className: "flex items-center gap-1.5 text-[12px] leading-4 text-[#242423]/55",
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { className: "truncate", children: handle }),
+                                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                                  /* @__PURE__ */ jsx(Roll, { value: STATUS[status].line, still })
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            motion.button,
+                            {
+                              variants: ITEM,
+                              type: "button",
+                              "aria-label": "Collapse menu",
+                              onClick: close,
+                              whileTap: still ? void 0 : { scale: 0.88 },
+                              className: "group grid size-8 shrink-0 cursor-pointer place-items-center self-start rounded-full text-[#242423]/50 outline-none transition-colors hover:bg-white hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                              children: /* @__PURE__ */ jsx("span", { className: "grid rotate-180", children: /* @__PURE__ */ jsx(
+                                ChevronDownIcon,
+                                {
+                                  className: "size-4",
+                                  strokeWidth: 2.25
+                                }
+                              ) })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          motion.div,
+                          {
+                            variants: ITEM,
+                            role: "radiogroup",
+                            "aria-label": "Status",
+                            className: "mt-3 grid grid-cols-4 rounded-full bg-[#242423]/[0.05] p-0.5",
+                            children: ORDER.map((s) => {
+                              const on = status === s;
+                              return /* @__PURE__ */ jsxs(
+                                motion.button,
+                                {
+                                  type: "button",
+                                  role: "radio",
+                                  "aria-checked": on,
+                                  "data-item": "",
+                                  onClick: () => {
+                                    setStatus(s);
+                                    onStatusChange?.(s);
+                                  },
+                                  whileTap: still ? void 0 : { scale: 0.92 },
+                                  className: cn(
+                                    "relative flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full text-[12px] font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                                    on ? "text-[#242423]" : "text-[#242423]/55 hover:text-[#242423]"
+                                  ),
+                                  children: [
+                                    on && /* @__PURE__ */ jsx(
+                                      motion.span,
+                                      {
+                                        layoutId: `${id}-status`,
+                                        transition: still ? { duration: 0 } : PILL,
+                                        className: "absolute inset-0 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      motion.span,
+                                      {
+                                        animate: { scale: on ? 1.25 : 1 },
+                                        transition: POP,
+                                        className: "relative size-1.5 rounded-full",
+                                        style: { backgroundColor: STATUS[s].color }
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx("span", { className: "relative", children: STATUS[s].label })
+                                  ]
+                                },
+                                s
+                              );
+                            })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-3 gap-2", children: tiles.map(({ key, label, Icon, on, kbd }) => /* @__PURE__ */ jsxs(
+                        motion.button,
+                        {
+                          variants: ITEM,
+                          type: "button",
+                          role: "menuitem",
+                          "data-item": "",
+                          onClick: on,
+                          whileHover: still ? void 0 : { y: -3 },
+                          whileTap: still ? void 0 : { scale: 0.94 },
+                          transition: POP,
+                          className: "group relative flex h-[76px] cursor-pointer flex-col justify-between rounded-[18px] bg-[#242423]/[0.04] p-3 text-left outline-none transition-colors duration-200 hover:bg-[#242423]/[0.07] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                          children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex items-start justify-between", children: [
+                              /* @__PURE__ */ jsx(Icon, { className: "size-[18px] text-[#242423]/70 transition-colors group-hover:text-[#242423]" }),
+                              kbd && /* @__PURE__ */ jsx("span", { className: "grid h-5 min-w-5 place-items-center rounded-md bg-white px-1 text-[12px] font-medium text-[#242423]/50 shadow-[0_1px_0_rgba(36,36,35,0.08)]", children: kbd })
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium", children: label })
+                          ]
+                        },
+                        key
+                      )) }),
+                      /* @__PURE__ */ jsx(
+                        motion.p,
+                        {
+                          variants: ITEM,
+                          className: "px-3 pb-1 pt-3 text-[12px] font-medium text-[#242423]/45",
+                          children: "Workspaces"
+                        }
+                      ),
+                      workspaces.map((w) => {
+                        const on = w.id === space;
+                        const key = `ws-${w.id}`;
+                        return /* @__PURE__ */ jsxs(
+                          motion.button,
+                          {
+                            variants: ITEM,
+                            type: "button",
+                            role: "menuitemradio",
+                            "aria-checked": on,
+                            "data-item": "",
+                            onPointerEnter: () => setHover(key),
+                            onFocus: () => setHover(key),
+                            onClick: () => {
+                              setSpace(w.id);
+                              onWorkspaceChange?.(w.id);
+                            },
+                            whileTap: still ? void 0 : { scale: 0.98 },
+                            className: "group relative flex h-12 w-full cursor-pointer items-center gap-3 rounded-2xl px-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                            children: [
+                              glide(key),
+                              /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  animate: {
+                                    rotate: hover === key && !still ? -6 : 0,
+                                    scale: hover === key && !still ? 1.06 : 1
+                                  },
+                                  transition: POP,
+                                  className: "relative grid size-8 shrink-0 place-items-center rounded-[10px] text-[14px] font-semibold text-white",
+                                  style: { backgroundColor: w.color ?? "#242423" },
+                                  children: w.name[0]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("span", { className: "relative min-w-0 flex-1", children: [
+                                /* @__PURE__ */ jsx("span", { className: "block truncate text-[14px] font-medium leading-5", children: w.name }),
+                                /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] leading-4 text-[#242423]/50", children: w.plan })
+                              ] }),
+                              /* @__PURE__ */ jsx("span", { className: "relative grid size-6 place-items-center", children: on && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  layoutId: `${id}-ws-check`,
+                                  transition: still ? { duration: 0 } : POP,
+                                  className: "grid size-6 place-items-center rounded-full bg-[#242423] text-white",
+                                  children: /* @__PURE__ */ jsx(
+                                    CheckIcon,
+                                    {
+                                      className: "size-3.5",
+                                      strokeWidth: 2.75,
+                                      active: true
+                                    }
+                                  )
+                                }
+                              ) })
+                            ]
+                          },
+                          w.id
+                        );
+                      }),
+                      /* @__PURE__ */ jsxs(
+                        motion.button,
+                        {
+                          variants: ITEM,
+                          type: "button",
+                          role: "menuitem",
+                          "data-item": "",
+                          onPointerEnter: () => setHover("new"),
+                          onFocus: () => setHover("new"),
+                          onClick: onNewWorkspace,
+                          whileTap: still ? void 0 : { scale: 0.98 },
+                          className: "group relative flex h-11 w-full cursor-pointer items-center gap-3 rounded-2xl px-2 text-left text-[14px] font-medium text-[#242423]/70 outline-none hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                          children: [
+                            glide("new"),
+                            /* @__PURE__ */ jsx("span", { className: "relative grid size-8 place-items-center rounded-[10px] border border-dashed border-[#242423]/25 transition-colors group-hover:border-[#242423]/50", children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4", strokeWidth: 2.25 }) }),
+                            /* @__PURE__ */ jsx("span", { className: "relative", children: "New workspace" })
+                          ]
+                        }
+                      ),
+                      storage && /* @__PURE__ */ jsxs(
+                        motion.div,
+                        {
+                          variants: ITEM,
+                          className: "mx-1 mt-2 rounded-[18px] bg-[#242423]/[0.04] p-3",
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between text-[12px]", children: [
+                              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Storage" }),
+                              /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-[#242423]/55", children: [
+                                storage[0],
+                                " of ",
+                                storage[1],
+                                " GB"
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsx("div", { className: "relative mt-2 h-1.5 overflow-hidden rounded-full bg-[#242423]/[0.08]", children: /* @__PURE__ */ jsx(
+                              motion.div,
+                              {
+                                initial: still ? false : { width: 0 },
+                                animate: { width: `${used * 100}%` },
+                                transition: still ? { duration: 0 } : {
+                                  type: "spring",
+                                  stiffness: 120,
+                                  damping: 20,
+                                  delay: 0.35
+                                },
+                                className: "relative h-full overflow-hidden rounded-full bg-[#242423]",
+                                children: !still && /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    "aria-hidden": true,
+                                    className: "absolute inset-y-0 w-8 bg-gradient-to-r from-transparent via-white/60 to-transparent",
+                                    initial: { x: "-150%" },
+                                    animate: { x: "600%" },
+                                    transition: {
+                                      duration: 1.4,
+                                      delay: 0.9,
+                                      ease: "easeInOut",
+                                      repeat: Infinity,
+                                      repeatDelay: 2.6
+                                    }
+                                  }
+                                )
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                "data-item": "",
+                                onClick: onUpgrade,
+                                className: "group mt-2.5 flex cursor-pointer items-center gap-1.5 rounded-full text-[12px] font-medium text-[#242423]/70 outline-none transition-colors hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                                children: [
+                                  /* @__PURE__ */ jsx(SparklesIcon, { className: "size-3.5" }),
+                                  "Upgrade for 100 GB",
+                                  /* @__PURE__ */ jsx("span", { className: "transition-transform duration-300 group-hover:translate-x-0.5", children: "\u2192" })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          variants: ITEM,
+                          "aria-hidden": true,
+                          className: "mx-1 my-2 h-px bg-[#242423]/[0.07]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        motion.button,
+                        {
+                          variants: ITEM,
+                          type: "button",
+                          role: "menuitem",
+                          "data-item": "",
+                          onPointerEnter: () => setHover("out"),
+                          onFocus: () => setHover("out"),
+                          onClick: signOut,
+                          whileTap: still ? void 0 : { scale: 0.98 },
+                          className: cn(
+                            "group relative flex h-11 w-full cursor-pointer items-center gap-3 overflow-hidden rounded-2xl px-3 text-left text-[14px] font-medium outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                            leaving ? "text-[#d64545]" : "text-[#242423]"
+                          ),
+                          children: [
+                            !leaving && glide("out"),
+                            /* @__PURE__ */ jsx(AnimatePresence, { children: leaving && /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                "aria-hidden": true,
+                                initial: {
+                                  scaleX: leaving === "done" ? 1 : 0,
+                                  opacity: 1
+                                },
+                                animate: { scaleX: 1, opacity: 1 },
+                                exit: { opacity: 0 },
+                                transition: leaving === "ask" && !still ? { duration: 2.6, ease: "linear" } : { duration: 0.2 },
+                                style: { transformOrigin: "0% 50%" },
+                                className: "absolute inset-0 rounded-2xl bg-[#d64545]/[0.09]"
+                              },
+                              "wash"
+                            ) }),
+                            /* @__PURE__ */ jsx("span", { className: "relative grid", children: leaving === "done" ? /* @__PURE__ */ jsx(
+                              CheckIcon,
+                              {
+                                className: "size-[18px]",
+                                strokeWidth: 2.5,
+                                active: true
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              LogoutIcon,
+                              {
+                                className: "size-[18px]",
+                                active: hover === "out" || leaving === "ask"
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(
+                              Roll,
+                              {
+                                value: leaving === "done" ? "Signed out" : leaving === "ask" ? "Click again to log out" : "Log out",
+                                still,
+                                className: "relative"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  "card"
+                )
+              ) })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: leaving === "done" ? "Signed out." : `Status: ${STATUS[status].label}.` })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AccountMenu
+};