motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-W46CBUFX.js

@@ -0,0 +1,425 @@
+"use client";
+import {
+  HeartIcon
+} from "./chunk-PKM6B4JJ.js";
+import {
+  SmartphoneNfcIcon
+} from "./chunk-OS6REIBR.js";
+import {
+  CloudUploadIcon
+} from "./chunk-2QCWELWT.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  WifiIcon
+} from "./chunk-XL4L2J6N.js";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/bill-list/bill-list.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICONS = {
+  wifi: WifiIcon,
+  power: ZapIcon,
+  phone: SmartphoneNfcIcon,
+  cloud: CloudUploadIcon,
+  health: HeartIcon
+};
+var EASE = [0.22, 1, 0.36, 1];
+var HEAD_AT = [0.15, 0.27, 0.39];
+var ROWS_AT = 0.55;
+var STEP = 0.16;
+var ARRIVE = { type: "spring", stiffness: 260, damping: 22 };
+var POP = { type: "spring", stiffness: 420, damping: 18 };
+var ROW = { type: "spring", stiffness: 420, damping: 36 };
+var DAY = 864e5;
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+function sampleBills() {
+  const today = /* @__PURE__ */ new Date();
+  const at = (d) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + d);
+  return [
+    { id: "internet", name: "Home internet", amount: 49, due: at(2), icon: "wifi", kind: "Bills" },
+    { id: "power", name: "Electricity", amount: 86.3, due: at(6), icon: "power", kind: "Bills" },
+    { id: "phone", name: "Phone plan", amount: 25, due: at(8), icon: "phone", kind: "Bills", autopay: true },
+    { id: "backup", name: "Cloud backup", amount: 9.99, due: at(11), icon: "cloud", kind: "Subscriptions", autopay: true },
+    { id: "gym", name: "Gym membership", amount: 42.19, due: at(14), icon: "health", kind: "Subscriptions" }
+  ];
+}
+function Total({ value, fmt, run, still }) {
+  const mv = useMotionValue(still ? value : 0);
+  const [text, setText] = React.useState(() => fmt(still ? value : 0));
+  useMotionValueEvent(mv, "change", (v) => setText(fmt(v)));
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) return mv.set(value);
+    const c = animate(mv, value, { duration: first.current ? 1.1 : 0.6, delay: first.current ? HEAD_AT[1] : 0, ease: EASE });
+    first.current = false;
+    return () => c.stop();
+  }, [value, run, still, mv]);
+  return /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: text });
+}
+function Row({
+  bill,
+  index,
+  shown,
+  intro,
+  still,
+  soonDays,
+  money,
+  onPay
+}) {
+  const [hover, setHover] = React.useState(false);
+  const [paying, setPaying] = React.useState(false);
+  const Icon = ICONS[bill.icon];
+  const today = /* @__PURE__ */ new Date();
+  const days = Math.round(
+    (new Date(bill.due.getFullYear(), bill.due.getMonth(), bill.due.getDate()).getTime() - new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()) / DAY
+  );
+  const soon = !bill.paid && days <= soonDays;
+  const dueText = days <= 0 ? "Due today" : days === 1 ? "Due tomorrow" : soon ? `In ${days} days` : `Due ${MONTHS[bill.due.getMonth()]} ${bill.due.getDate()}`;
+  const showPay = (hover || paying) && !bill.paid;
+  const delay = intro ? ROWS_AT + index * STEP : 0;
+  const pay = () => {
+    if (paying || bill.paid) return;
+    if (still) return onPay(bill);
+    setPaying(true);
+    window.setTimeout(() => {
+      setPaying(false);
+      onPay(bill);
+    }, 700);
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.li,
+    {
+      layout: still ? false : "position",
+      initial: still ? false : { opacity: 0, y: 18, scale: 0.96, filter: "blur(6px)" },
+      animate: shown ? {
+        opacity: 1,
+        y: 0,
+        filter: "blur(0px)",
+        scale: 1
+      } : void 0,
+      exit: still ? void 0 : { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: 0.18 } },
+      transition: {
+        ...ROW,
+        layout: ROW,
+        opacity: { duration: 0.35, delay },
+        filter: { duration: 0.4, delay },
+        y: { ...ARRIVE, delay },
+        scale: { ...ARRIVE, delay }
+      },
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => setHover(false),
+      onFocus: () => setHover(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setHover(false);
+      },
+      className: cn(
+        "-mx-2 flex items-center gap-3 rounded-2xl bg-white px-2 py-2.5 transition-colors duration-200 dark:bg-zinc-900",
+        hover && !bill.paid && "bg-[#f6f6f6] dark:bg-[#232326]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: still ? false : { scale: 0.5, opacity: 0 },
+            animate: shown ? { scale: 1, opacity: 1 } : void 0,
+            transition: { ...POP, opacity: { duration: 0.2, delay: delay + 0.08 }, delay: delay + 0.08 },
+            className: cn(
+              "grid size-11 shrink-0 place-items-center rounded-full transition-colors duration-200",
+              bill.paid ? "bg-[#242423]/[0.04] text-zinc-400 dark:bg-white/[0.05] dark:text-zinc-500" : "bg-[#242423]/[0.06] text-[#242423] dark:bg-white/[0.08] dark:text-zinc-100"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { className: "size-5", active: hover && !bill.paid, strokeWidth: 1.9 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "truncate text-sm font-medium transition-colors",
+                bill.paid ? "text-zinc-400 line-through decoration-zinc-300 dark:text-zinc-500" : "text-[#242423] dark:text-zinc-100"
+              ),
+              children: bill.name
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-zinc-500 dark:text-zinc-400", children: [
+            bill.paid ? /* @__PURE__ */ jsx("span", { children: "Paid" }) : soon ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full bg-[#f5a524]/15 px-2 py-0.5 font-medium text-[#b26b00] dark:text-[#f5b94a]", children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative grid size-1.5 place-items-center", children: [
+                !still && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "absolute inset-0 rounded-full bg-[#f5a524]",
+                    animate: { scale: [1, 2.6], opacity: [0.6, 0] },
+                    transition: { duration: 1.6, repeat: Infinity, ease: "easeOut" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "relative size-1.5 rounded-full bg-[#f5a524]" })
+              ] }),
+              dueText
+            ] }) : /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: dueText }),
+            bill.autopay && !bill.paid && /* @__PURE__ */ jsx("span", { className: "hidden whitespace-nowrap rounded-full bg-[#242423]/[0.05] px-1.5 py-0.5 text-[12px] @[22rem]:inline text-zinc-500 dark:bg-white/[0.06] dark:text-zinc-400", children: "Autopay" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: still ? false : { opacity: 0, x: 10, filter: "blur(4px)" },
+            animate: shown ? { opacity: 1, x: 0, filter: "blur(0px)" } : void 0,
+            transition: { ...ARRIVE, opacity: { duration: 0.3, delay: delay + 0.14 }, filter: { duration: 0.3, delay: delay + 0.14 }, delay: delay + 0.14 },
+            className: "relative grid h-8 min-w-[76px] shrink-0 place-items-end",
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: showPay ? /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                onClick: pay,
+                "aria-label": `Pay ${bill.name}, ${money(bill.amount)}`,
+                initial: still ? false : { opacity: 0, x: 8, filter: "blur(4px)" },
+                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
+                exit: still ? void 0 : { opacity: 0, x: 8, filter: "blur(4px)" },
+                whileTap: still ? void 0 : { scale: 0.94 },
+                transition: { duration: 0.18, ease: EASE },
+                className: "inline-flex h-8 min-w-[76px] items-center justify-center gap-1.5 rounded-full bg-[#242423] px-3.5 text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-100 dark:text-zinc-900 dark:focus-visible:ring-offset-zinc-900",
+                children: paying ? /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    "aria-label": "Paying",
+                    className: "size-3.5 rounded-full border-2 border-white/30 border-t-white dark:border-zinc-900/30 dark:border-t-zinc-900",
+                    animate: { rotate: 360 },
+                    transition: { duration: 0.7, repeat: Infinity, ease: "linear" }
+                  }
+                ) : "Pay"
+              },
+              "pay"
+            ) : /* @__PURE__ */ jsxs(
+              motion.span,
+              {
+                initial: still ? false : { opacity: 0, x: -8, filter: "blur(4px)" },
+                animate: { opacity: 1, x: 0, filter: "blur(0px)" },
+                exit: still ? void 0 : { opacity: 0, x: -8, filter: "blur(4px)" },
+                transition: { duration: 0.18, ease: EASE },
+                className: cn(
+                  "inline-flex h-8 items-center gap-1 rounded-full px-3 text-sm font-semibold tabular-nums",
+                  bill.paid ? "bg-[#16a36a]/10 text-[#16a36a]" : "bg-[#242423]/[0.06] text-[#242423] dark:bg-white/[0.08] dark:text-zinc-100"
+                ),
+                children: [
+                  bill.paid && /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", active: true, strokeWidth: 2.5 }),
+                  money(bill.amount)
+                ]
+              },
+              "amount"
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+var BillList = React.forwardRef(function BillList2({ title = "Coming up", bills: billsProp, currency = "USD", soonDays = 3, onPay, className }, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const inView = useInView(ref, { once: true, amount: 0.3 });
+  const still = !!useReducedMotion();
+  const shown = still || inView;
+  const [bills, setBills] = React.useState(() => billsProp ?? sampleBills());
+  const [intro, setIntro] = React.useState(true);
+  const introRows = React.useRef(bills.length);
+  React.useEffect(() => {
+    if (!shown) return;
+    const t = window.setTimeout(() => setIntro(false), (ROWS_AT + introRows.current * STEP + 0.8) * 1e3);
+    return () => window.clearTimeout(t);
+  }, [shown]);
+  React.useEffect(() => {
+    if (billsProp) setBills(billsProp);
+  }, [billsProp]);
+  const money = React.useMemo(() => {
+    const f = new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2 });
+    return (n) => f.format(n);
+  }, [currency]);
+  const kinds = React.useMemo(() => Array.from(new Set(bills.map((b) => b.kind))), [bills]);
+  const filters = ["All", ...kinds, "Due soon"];
+  const [filter, setFilter] = React.useState("All");
+  const soonCut = Date.now() + (soonDays + 1) * DAY;
+  const visible = bills.filter(
+    (b) => filter === "All" ? true : filter === "Due soon" ? !b.paid && b.due.getTime() < soonCut : b.kind === filter
+  ).sort((a, b) => a.due.getTime() - b.due.getTime());
+  const due = visible.filter((b) => !b.paid).reduce((a, b) => a + b.amount, 0);
+  const pay = (bill) => {
+    setBills((list) => list.map((b) => b.id === bill.id ? { ...b, paid: true } : b));
+    onPay?.({ ...bill, paid: true });
+  };
+  const [open, setOpen] = React.useState(false);
+  const menuRef = React.useRef(null);
+  const items = React.useRef([]);
+  React.useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (!menuRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    requestAnimationFrame(() => items.current[Math.max(0, filters.indexOf(filter))]?.focus());
+    return () => document.removeEventListener("pointerdown", close);
+  }, [open]);
+  const onMenuKey = (e) => {
+    const at = items.current.findIndex((el) => el === document.activeElement);
+    if (e.key === "Escape") {
+      setOpen(false);
+      menuRef.current?.querySelector("button[aria-haspopup]")?.focus();
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const n = (at + (e.key === "ArrowDown" ? 1 : -1) + filters.length) % filters.length;
+      items.current[n]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      initial: still ? false : { opacity: 0, y: 16 },
+      animate: shown ? { opacity: 1, y: 0 } : void 0,
+      transition: { duration: 0.6, ease: EASE },
+      className: cn(
+        "@container relative w-[400px] max-w-full rounded-3xl bg-white p-5 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] sm:p-6 dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              motion.h3,
+              {
+                initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+                animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+                transition: { ...ARRIVE, opacity: { duration: 0.35, delay: HEAD_AT[0] }, filter: { duration: 0.35, delay: HEAD_AT[0] }, delay: HEAD_AT[0] },
+                className: "text-base font-semibold tracking-tight",
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.p,
+              {
+                initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+                animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+                transition: { ...ARRIVE, opacity: { duration: 0.35, delay: HEAD_AT[1] }, filter: { duration: 0.35, delay: HEAD_AT[1] }, delay: HEAD_AT[1] },
+                className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-semibold text-[#242423] dark:text-zinc-100", children: /* @__PURE__ */ jsx(Total, { value: due, fmt: money, run: shown, still }) }),
+                  " ",
+                  due > 0 ? "still to pay" : "all paid"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              ref: menuRef,
+              initial: still ? false : { opacity: 0, scale: 0.6, filter: "blur(4px)" },
+              animate: shown ? { opacity: 1, scale: 1, filter: "blur(0px)" } : void 0,
+              transition: { ...POP, opacity: { duration: 0.25, delay: HEAD_AT[2] }, filter: { duration: 0.3, delay: HEAD_AT[2] }, delay: HEAD_AT[2] },
+              style: { transformOrigin: "right center" },
+              className: "relative shrink-0",
+              onKeyDown: onMenuKey,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": open,
+                    onClick: () => setOpen((o) => !o),
+                    className: "inline-flex h-8 items-center gap-1 rounded-full bg-[#242423]/[0.06] pl-3 pr-2 text-sm font-medium outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:hover:bg-white/[0.12]",
+                    children: [
+                      /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          initial: still ? false : { opacity: 0, y: 6 },
+                          animate: { opacity: 1, y: 0 },
+                          exit: still ? void 0 : { opacity: 0, y: -6 },
+                          transition: { duration: 0.16 },
+                          children: filter
+                        },
+                        filter
+                      ) }),
+                      /* @__PURE__ */ jsx(motion.span, { animate: { rotate: open ? 180 : 0 }, transition: { type: "spring", stiffness: 500, damping: 30 }, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", strokeWidth: 2.25 }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    role: "menu",
+                    "aria-label": "Filter",
+                    initial: still ? { opacity: 0 } : { opacity: 0, y: -6, scale: 0.96, filter: "blur(4px)" },
+                    animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+                    exit: still ? { opacity: 0 } : { opacity: 0, y: -4, scale: 0.98, filter: "blur(4px)" },
+                    transition: { duration: 0.18, ease: EASE },
+                    style: { transformOrigin: "top right" },
+                    className: "absolute right-0 top-full z-20 mt-2 w-44 rounded-2xl bg-white p-1.5 shadow-[0_2px_6px_rgba(0,0,0,0.06),0_16px_36px_-12px_rgba(0,0,0,0.25)] dark:bg-zinc-800",
+                    children: filters.map((f, i) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        ref: (el) => {
+                          items.current[i] = el;
+                        },
+                        type: "button",
+                        role: "menuitemradio",
+                        "aria-checked": f === filter,
+                        onClick: () => {
+                          setFilter(f);
+                          setOpen(false);
+                        },
+                        className: "flex h-9 w-full items-center justify-between rounded-xl px-3 text-left text-sm outline-none transition-colors hover:bg-[#242423]/[0.05] focus-visible:bg-[#242423]/[0.05] dark:hover:bg-white/[0.06] dark:focus-visible:bg-white/[0.06]",
+                        children: [
+                          f,
+                          f === filter && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", active: true, strokeWidth: 2.25 })
+                        ]
+                      },
+                      f
+                    ))
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs("ul", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible.map((b, i) => /* @__PURE__ */ jsx(Row, { bill: b, index: i, shown, intro, still, soonDays, money, onPay: pay }, b.id)) }),
+          visible.length === 0 && /* @__PURE__ */ jsx(
+            motion.li,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              className: "py-8 text-center text-sm text-zinc-400 dark:text-zinc-500",
+              children: "Nothing here right now."
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+});
+
+export {
+  BillList
+};

package/dist/chunk-WE7VCUOA.js

@@ -0,0 +1,130 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/shield-check.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: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    scale: [0.5, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var ShieldCheckIcon = 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("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "m9 12 2 2 4-4",
+                  initial: "normal",
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ShieldCheckIcon.displayName = "ShieldCheckIcon";
+
+export {
+  ShieldCheckIcon
+};

package/dist/chunk-WFWO2EIW.js

@@ -0,0 +1,120 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/message-circle.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ICON_VARIANTS = {
+  normal: {
+    scale: 1,
+    rotate: 0
+  },
+  animate: {
+    scale: 1.05,
+    rotate: [0, -7, 7, 0],
+    transition: {
+      rotate: {
+        duration: 0.5,
+        ease: "easeInOut"
+      },
+      scale: {
+        type: "spring",
+        stiffness: 400,
+        damping: 10
+      }
+    }
+  }
+};
+var MessageCircleIcon = 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__ */ jsx(
+        motion.svg,
+        {
+          animate: controls,
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          variants: ICON_VARIANTS,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })
+        }
+      )
+    }
+  );
+});
+MessageCircleIcon.displayName = "MessageCircleIcon";
+
+export {
+  MessageCircleIcon
+};