motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-NJWTPRGJ.js

@@ -0,0 +1,806 @@
+"use client";
+import {
+  RefreshCWIcon
+} from "./chunk-VEC5QAOY.js";
+import {
+  ArrowUpIcon
+} from "./chunk-2IMPUH4H.js";
+import {
+  ReceiptIcon
+} from "./chunk-IYZOANPX.js";
+import {
+  SmartphoneNfcIcon
+} from "./chunk-OS6REIBR.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  TrendingUpIcon
+} from "./chunk-SSWKGVRI.js";
+import {
+  CreditCardIcon
+} from "./chunk-GVWOJJ3T.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/wallet-card/wallet-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  useAnimate,
+  motion as motion3,
+  useMotionValue,
+  useInView,
+  useMotionValueEvent,
+  useReducedMotion as useReducedMotion3,
+  useTransform,
+  useVelocity
+} from "motion/react";
+
+// src/icons/arrow-down.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 PATH_VARIANTS = {
+  normal: { d: "m19 12-7 7-7-7", translateY: 0 },
+  animate: {
+    d: "m19 12-7 7-7-7",
+    translateY: [0, -3, 0],
+    transition: {
+      duration: 0.4
+    }
+  }
+};
+var SECOND_PATH_VARIANTS = {
+  normal: { d: "M12 5v14" },
+  animate: {
+    d: ["M12 5v14", "M12 5v9", "M12 5v14"],
+    transition: {
+      duration: 0.4
+    }
+  }
+};
+var ArrowDownIcon = 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.path,
+                {
+                  animate: controls,
+                  d: "m19 12-7 7-7-7",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M12 5v14",
+                  variants: SECOND_PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ArrowDownIcon.displayName = "ArrowDownIcon";
+
+// src/icons/hand-coins.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 CIRCLE_VARIANTS = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8
+    }
+  }
+};
+var SECOND_CIRCLE_VARIANTS = {
+  normal: {
+    translateY: 0,
+    opacity: 1,
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    translateY: [-20, 0],
+    transition: {
+      opacity: { duration: 0.2 },
+      delay: 0.15,
+      type: "spring",
+      stiffness: 150,
+      damping: 15,
+      bounce: 0.8
+    }
+  }
+};
+var HandCoinsIcon = 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: "M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17" }),
+              /* @__PURE__ */ jsx2("path", { d: "m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" }),
+              /* @__PURE__ */ jsx2("path", { d: "m2 16 6 6" }),
+              /* @__PURE__ */ jsx2(
+                motion2.circle,
+                {
+                  animate: controls,
+                  cx: "16",
+                  cy: "9",
+                  r: "2.9",
+                  variants: CIRCLE_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.circle,
+                {
+                  animate: controls,
+                  cx: "6",
+                  cy: "5",
+                  r: "3",
+                  variants: SECOND_CIRCLE_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+HandCoinsIcon.displayName = "HandCoinsIcon";
+
+// src/components/wallet-card/wallet-card.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var LIST = {
+  hidden: { opacity: 0, scale: 0.94, y: -6 },
+  shown: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: { type: "spring", stiffness: 520, damping: 34, mass: 0.7, staggerChildren: 0.035, delayChildren: 0.04 }
+  }
+};
+var ROW = {
+  hidden: { opacity: 0, y: 6 },
+  shown: { opacity: 1, y: 0, transition: { duration: 0.32, ease: [0.5, 1, 0.89, 1] } }
+};
+var FILL = [0.5, 1, 0.89, 1];
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var MAX_BLUR = 0.5;
+function Wheel({
+  amount,
+  rate,
+  place,
+  unit
+}) {
+  const position = useTransform(amount, (a) => {
+    const ticks = Math.max(0, a) / unit + 1e-6;
+    const whole = Math.floor(ticks);
+    const turning = ticks - whole;
+    const span = Math.round(place / unit);
+    const digit = Math.floor(whole / span) % 10;
+    const turn = span === 1 ? turning : whole % span === span - 1 ? turning : 0;
+    return digit + turn;
+  });
+  const y = useTransform(position, (p) => `${-p * 100 / 11}%`);
+  const filter = useTransform(rate, (v) => {
+    const px = Math.min(MAX_BLUR, Math.abs(v) / place * 0.015);
+    return px < 0.1 ? "none" : `blur(${px.toFixed(2)}px)`;
+  });
+  return /* @__PURE__ */ jsx3("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx3(motion3.span, { className: "absolute inset-x-0 top-0 flex flex-col", style: { y, filter }, children: [...DIGITS, 0].map((d, i) => /* @__PURE__ */ jsx3("span", { className: "flex h-[1em] items-center justify-center", children: d }, i)) }) });
+}
+function Odometer({
+  amount,
+  format,
+  label
+}) {
+  const parts = React.useMemo(() => format.formatToParts(1234.5), [format]);
+  const before = parts.slice(
+    0,
+    parts.findIndex((p) => p.type === "integer")
+  ).map((p) => p.value).join("");
+  const numeric = ["integer", "group", "decimal", "fraction"];
+  const lastNum = parts.reduce((last, p, i) => numeric.includes(p.type) ? i : last, -1);
+  const after = parts.slice(lastNum + 1).map((p) => p.value).join("");
+  const group = parts.find((p) => p.type === "group")?.value ?? ",";
+  const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+  const fractionDigits = parts.find((p) => p.type === "fraction")?.value.length ?? 0;
+  const rate = useVelocity(amount);
+  const wholeDigits = (a) => Math.max(1, String(Math.floor(Math.max(0, a) + 1e-6)).length);
+  const [count, setCount] = React.useState(() => wholeDigits(amount.get()));
+  useMotionValueEvent(amount, "change", (a) => {
+    const next = wholeDigits(a);
+    if (next !== count) setCount(next);
+  });
+  const cells = [];
+  for (let k = count - 1; k >= 0; k--) {
+    cells.push(
+      /* @__PURE__ */ jsx3(
+        motion3.span,
+        {
+          className: "inline-flex",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx3(Wheel, { amount, rate, place: 10 ** k, unit: 10 ** -fractionDigits })
+        },
+        `w${k}`
+      )
+    );
+    if (k > 0 && k % 3 === 0) cells.push(/* @__PURE__ */ jsx3("span", { children: group }, `g${k}`));
+  }
+  if (fractionDigits > 0) cells.push(/* @__PURE__ */ jsx3("span", { children: decimal }, "dec"));
+  for (let f = 1; f <= fractionDigits; f++) {
+    cells.push(/* @__PURE__ */ jsx3(Wheel, { amount, rate, place: 10 ** -f, unit: 10 ** -fractionDigits }, `f${f}`));
+  }
+  return /* @__PURE__ */ jsx3("span", { "aria-label": label, className: "inline-flex leading-none tabular-nums", children: /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "inline-flex", children: [
+    before,
+    cells,
+    after
+  ] }) });
+}
+var DEFAULT_CURRENCIES = [
+  { code: "USD", flag: "\u{1F1FA}\u{1F1F8}", name: "US dollar", rate: 1, locale: "en-US" },
+  { code: "EUR", flag: "\u{1F1EA}\u{1F1FA}", name: "Euro", rate: 0.92, locale: "de-DE" },
+  { code: "GBP", flag: "\u{1F1EC}\u{1F1E7}", name: "British pound", rate: 0.79, locale: "en-GB" },
+  { code: "IDR", flag: "\u{1F1EE}\u{1F1E9}", name: "Indonesian rupiah", rate: 15947, locale: "id-ID", digits: 0 }
+];
+var DEFAULT_ACTIONS = [
+  { label: "Transfer", icon: "transfer" },
+  { label: "Top up", icon: "topup" },
+  { label: "Exchange", icon: "exchange" },
+  { label: "Pay later", icon: "paylater" }
+];
+var DEFAULT_MORE = [
+  { label: "Bills", icon: "bills" },
+  { label: "Savings", icon: "savings" },
+  { label: "Mobile", icon: "mobile" },
+  { label: "Invest", icon: "invest" }
+];
+var ICONS = {
+  transfer: ArrowUpIcon,
+  topup: ArrowDownIcon,
+  exchange: RefreshCWIcon,
+  paylater: CreditCardIcon,
+  bills: ReceiptIcon,
+  savings: HandCoinsIcon,
+  mobile: SmartphoneNfcIcon,
+  invest: TrendingUpIcon
+};
+var ENTER = {
+  transfer: { y: 16 },
+  topup: { y: -16 },
+  exchange: { rotate: -180, scale: 0.6 },
+  paylater: { x: -16 },
+  bills: { y: 16 },
+  savings: { scale: 0.4 },
+  mobile: { rotate: -30, scale: 0.6 },
+  invest: { x: -14, y: 14 }
+};
+function ActionButton({
+  action,
+  color,
+  index,
+  appear
+}) {
+  const Icon = ICONS[action.icon];
+  const [ripples, setRipples] = React.useState([]);
+  const [well, animateWell] = useAnimate();
+  const reduceMotion = useReducedMotion3();
+  React.useEffect(() => {
+    if (appear === null || !well.current) return;
+    if (reduceMotion) {
+      animateWell(well.current, { opacity: 1, x: 0, y: 0, rotate: 0, scale: 1 }, { duration: 0 });
+      return;
+    }
+    const from = ENTER[action.icon];
+    animateWell(
+      well.current,
+      {
+        opacity: [0, 1],
+        x: [from.x ?? 0, 0],
+        y: [from.y ?? 0, 0],
+        rotate: [from.rotate ?? 0, 0],
+        scale: [from.scale ?? 1, 1]
+      },
+      { duration: 0.5, ease: GLIDE, delay: appear }
+    );
+  }, [appear, action.icon, animateWell, well, reduceMotion]);
+  return /* @__PURE__ */ jsxs3(
+    motion3.button,
+    {
+      type: "button",
+      onClick: () => {
+        setRipples((r) => [...r, Date.now()]);
+        action.onSelect?.();
+      },
+      initial: "rest",
+      whileHover: "hover",
+      whileFocus: "hover",
+      whileTap: "press",
+      custom: index,
+      className: "group flex w-full cursor-pointer flex-col items-center gap-2 rounded-2xl py-1 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+      children: [
+        /* @__PURE__ */ jsxs3(
+          motion3.span,
+          {
+            variants: { rest: { scale: 1 }, hover: { scale: 1.06 }, press: { scale: 0.9 } },
+            transition: { type: "spring", stiffness: 500, damping: 26 },
+            className: "relative grid size-11 place-items-center rounded-full text-white",
+            style: { background: color },
+            children: [
+              /* @__PURE__ */ jsx3(AnimatePresence, { children: ripples.map((key) => /* @__PURE__ */ jsx3(
+                motion3.span,
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-0 rounded-full",
+                  style: { boxShadow: `0 0 0 2px ${color}` },
+                  initial: { scale: 1, opacity: 0.5 },
+                  animate: { scale: 1.6, opacity: 0 },
+                  transition: { duration: 0.55, ease: GLIDE },
+                  onAnimationComplete: () => setRipples((r) => r.filter((k) => k !== key))
+                },
+                key
+              )) }),
+              /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 grid place-items-center rounded-full", children: /* @__PURE__ */ jsx3("span", { ref: well, className: "flex", style: { opacity: 0 }, children: /* @__PURE__ */ jsx3(motion3.span, { whileTap: { scale: 0.85 }, className: "flex", children: /* @__PURE__ */ jsx3(Icon, { className: "size-5", strokeWidth: 2.25 }) }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "text-[12px] font-medium text-zinc-700 dark:text-zinc-300", children: action.label })
+      ]
+    }
+  );
+}
+var WalletCard = React.forwardRef(function WalletCard2({
+  balance = 3840.52,
+  currencies = DEFAULT_CURRENCIES,
+  actions = DEFAULT_ACTIONS,
+  moreActions = DEFAULT_MORE,
+  color = "#2a2e3c",
+  duration = 1.4,
+  className
+}, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const reduceMotion = !!useReducedMotion3();
+  const uid = React.useId();
+  const [code, setCode] = React.useState(currencies[0]?.code ?? "USD");
+  const [listOpen, setListOpen] = React.useState(false);
+  const [hoverCode, setHoverCode] = React.useState(null);
+  const [more, setMore] = React.useState(false);
+  const [moreSettled, setMoreSettled] = React.useState(false);
+  const pillRef = React.useRef(null);
+  const currency = currencies.find((c) => c.code === code) ?? currencies[0];
+  const format = React.useMemo(
+    () => new Intl.NumberFormat(currency.locale ?? "en-US", {
+      style: "currency",
+      currency: currency.code,
+      currencyDisplay: "narrowSymbol",
+      ...currency.digits !== void 0 ? { minimumFractionDigits: currency.digits, maximumFractionDigits: currency.digits } : {}
+    }),
+    [currency]
+  );
+  const shownDigits = format.resolvedOptions().maximumFractionDigits ?? 2;
+  const target = Math.round(balance * currency.rate * 10 ** shownDigits) / 10 ** shownDigits;
+  const inView = useInView(root, { once: true, amount: 0.4 });
+  const amount = useMotionValue(0);
+  React.useEffect(() => {
+    if (!inView) return;
+    if (reduceMotion) {
+      amount.set(target);
+      return;
+    }
+    const controls = animate(amount, target, { duration, ease: FILL });
+    return () => controls.stop();
+  }, [inView, target, duration, reduceMotion, amount]);
+  React.useEffect(() => {
+    if (!listOpen) return;
+    const onDown = (e) => {
+      if (!root.current?.contains(e.target)) setListOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [listOpen]);
+  const pick = (next) => {
+    setCode(next);
+    setListOpen(false);
+    pillRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: root,
+      className: cn(
+        "w-[384px] max-w-full rounded-3xl bg-white p-5 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("header", { className: "flex items-start justify-between gap-4 px-1", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx3(
+              motion3.p,
+              {
+                initial: { opacity: 0, y: 4 },
+                animate: inView ? { opacity: 1, y: 0 } : void 0,
+                transition: { duration: 0.4, ease: GLIDE },
+                className: "text-[12px] text-zinc-500 dark:text-zinc-400",
+                children: "Total balance"
+              }
+            ),
+            /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-[32px] font-medium leading-none tracking-tight", children: /* @__PURE__ */ jsx3(Odometer, { amount, format, label: format.format(target) }) })
+          ] }),
+          /* @__PURE__ */ jsxs3(
+            motion3.div,
+            {
+              className: "relative shrink-0",
+              initial: { opacity: 0, y: -4 },
+              animate: inView ? { opacity: 1, y: 0 } : void 0,
+              transition: { duration: 0.4, ease: GLIDE, delay: 0.1 },
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  motion3.button,
+                  {
+                    ref: pillRef,
+                    type: "button",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": listOpen,
+                    "aria-label": `Currency: ${currency.name}`,
+                    onClick: () => setListOpen((o) => !o),
+                    whileTap: { scale: 0.96 },
+                    className: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-[#242423]/6 py-1.5 pl-1.5 pr-3 text-sm font-medium text-[#242423] transition-colors hover:bg-[#242423]/10 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/8 dark:text-zinc-100 dark:hover:bg-white/12",
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { className: "grid size-6 place-items-center rounded-full bg-white text-sm leading-none shadow-sm dark:bg-zinc-800", children: /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx3(
+                        motion3.span,
+                        {
+                          initial: { opacity: 0, scale: 0.5, rotate: -30 },
+                          animate: { opacity: 1, scale: 1, rotate: 0 },
+                          exit: { opacity: 0, scale: 0.5, rotate: 30 },
+                          transition: { duration: 0.25, ease: GLIDE },
+                          children: currency.flag
+                        },
+                        currency.code
+                      ) }) }),
+                      currency.code,
+                      /* @__PURE__ */ jsx3(
+                        motion3.span,
+                        {
+                          animate: { rotate: listOpen ? 180 : 0 },
+                          transition: { duration: 0.3, ease: GLIDE },
+                          className: "flex",
+                          children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-4", strokeWidth: 2.25 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(AnimatePresence, { children: listOpen && /* @__PURE__ */ jsx3(
+                  motion3.ul,
+                  {
+                    role: "listbox",
+                    "aria-label": "Currency",
+                    initial: "hidden",
+                    animate: "shown",
+                    exit: { opacity: 0, scale: 0.96, y: -4, transition: { duration: 0.15, ease: GLIDE } },
+                    variants: LIST,
+                    style: { transformOrigin: "top right" },
+                    onPointerLeave: () => setHoverCode(null),
+                    onKeyDown: (e) => {
+                      const i = currencies.findIndex((c) => c.code === (hoverCode ?? code));
+                      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                        e.preventDefault();
+                        const next = currencies[(i + (e.key === "ArrowDown" ? 1 : -1) + currencies.length) % currencies.length];
+                        setHoverCode(next.code);
+                        e.currentTarget.querySelector(`[data-code="${next.code}"]`)?.focus();
+                      }
+                      if (e.key === "Escape") e.preventDefault(), setListOpen(false), pillRef.current?.focus();
+                    },
+                    className: "absolute right-0 top-full z-20 mt-2 w-56 rounded-2xl bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_16px_40px_-12px_rgba(0,0,0,0.22)] ring-1 ring-black/5 dark:bg-zinc-900 dark:ring-white/10",
+                    children: currencies.map((c) => /* @__PURE__ */ jsx3(motion3.li, { variants: ROW, children: /* @__PURE__ */ jsxs3(
+                      "button",
+                      {
+                        type: "button",
+                        role: "option",
+                        "aria-selected": c.code === code,
+                        "data-code": c.code,
+                        onPointerEnter: () => setHoverCode(c.code),
+                        onFocus: () => setHoverCode(c.code),
+                        onClick: () => pick(c.code),
+                        className: "relative flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm outline-none",
+                        children: [
+                          hoverCode === c.code && /* @__PURE__ */ jsx3(
+                            motion3.span,
+                            {
+                              layoutId: `${uid}-hl`,
+                              transition: { duration: 0.25, ease: GLIDE },
+                              className: "absolute inset-0 rounded-xl bg-[#242423]/6 dark:bg-white/8"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3("span", { className: "relative text-base leading-none", children: c.flag }),
+                          /* @__PURE__ */ jsx3("span", { className: "relative font-medium", children: c.code }),
+                          /* @__PURE__ */ jsx3("span", { className: "relative flex-1 truncate text-zinc-500 dark:text-zinc-400", children: c.name }),
+                          c.code === code && /* @__PURE__ */ jsx3("span", { className: "relative size-1.5 rounded-full bg-zinc-900 dark:bg-zinc-100" })
+                        ]
+                      }
+                    ) }, c.code))
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "mt-6 rounded-[22px] bg-[#242423]/[0.035] px-3 pb-2 pt-4 dark:bg-white/5", children: [
+          /* @__PURE__ */ jsx3(
+            motion3.div,
+            {
+              className: "grid grid-cols-4 gap-1",
+              initial: "hidden",
+              animate: inView ? "shown" : "hidden",
+              variants: { shown: { transition: { staggerChildren: 0.06, delayChildren: 0.15 } } },
+              children: actions.map((action, i) => /* @__PURE__ */ jsx3(
+                motion3.div,
+                {
+                  variants: { hidden: { opacity: 0, y: 10, scale: 0.9 }, shown: { opacity: 1, y: 0, scale: 1 } },
+                  transition: { type: "spring", stiffness: 420, damping: 28 },
+                  children: /* @__PURE__ */ jsx3(ActionButton, { action, color, index: i, appear: inView ? 0.28 + i * 0.06 : null })
+                },
+                action.label
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, children: more && /* @__PURE__ */ jsx3(
+            motion3.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              transition: { duration: 0.35, ease: GLIDE },
+              onAnimationStart: () => setMoreSettled(false),
+              onAnimationComplete: () => setMoreSettled(more),
+              style: { overflow: moreSettled ? "visible" : "hidden" },
+              children: /* @__PURE__ */ jsx3(
+                motion3.div,
+                {
+                  className: "grid grid-cols-4 gap-1 pt-3",
+                  initial: "hidden",
+                  animate: "shown",
+                  variants: { shown: { transition: { staggerChildren: 0.05, delayChildren: 0.08 } } },
+                  children: moreActions.map((action, i) => /* @__PURE__ */ jsx3(
+                    motion3.div,
+                    {
+                      variants: { hidden: { opacity: 0, y: 8 }, shown: { opacity: 1, y: 0 } },
+                      transition: { duration: 0.3, ease: GLIDE },
+                      children: /* @__PURE__ */ jsx3(ActionButton, { action, color, index: i, appear: inView ? 0.28 + i * 0.06 : null })
+                    },
+                    action.label
+                  ))
+                }
+              )
+            },
+            "more"
+          ) }),
+          moreActions.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "-mx-3 mt-3 h-px bg-[#242423]/8 dark:bg-white/10" }),
+            /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": more,
+                onClick: () => setMore((m) => !m),
+                className: "mt-1 flex w-full cursor-pointer items-center justify-center gap-1 rounded-xl py-2 text-[12px] font-medium text-zinc-700 transition-colors hover:text-zinc-900 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-100",
+                children: [
+                  /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx3(
+                    motion3.span,
+                    {
+                      initial: { opacity: 0, y: 4 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: -4 },
+                      transition: { duration: 0.2, ease: GLIDE },
+                      children: more ? "Fewer features" : "More features"
+                    },
+                    more ? "less" : "more"
+                  ) }),
+                  /* @__PURE__ */ jsx3(
+                    motion3.span,
+                    {
+                      animate: { rotate: more ? 180 : 0 },
+                      transition: { duration: 0.3, ease: GLIDE },
+                      className: "flex",
+                      children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-3.5", strokeWidth: 2.25 })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  WalletCard
+};