motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-VAPHE4G4.js

@@ -0,0 +1,442 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/gradient-card/gradient-card.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { Minus, Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PALETTE = {
+  // Younger: bright and playful.
+  young: ["#ff4fa3", "#ffc93c", "#8b5cf6", "#38d6c4"],
+  // Around the reference: warm orange.
+  even: ["#f07a1f", "#f3a52b", "#e98a9a", "#b9c4d4"],
+  // Older: a deep mix of reds.
+  old: ["#e3262f", "#ff5a36", "#9e1238", "#4a1621"]
+};
+var defaultCaption = (_, gap) => {
+  const g = Math.abs(gap);
+  const n = Number.isInteger(g) ? g.toFixed(0) : g.toFixed(1);
+  if (g < 0.05) return "Right in step with your years";
+  return `${n} ${g === 1 ? "year" : "years"} ${gap < 0 ? "ahead of the clock" : "behind the clock"}`;
+};
+var GLYPHS = {
+  "0": ["01110", "10001", "10011", "10101", "11001", "10001", "01110"],
+  "1": ["00100", "01100", "00100", "00100", "00100", "00100", "01110"],
+  "2": ["01110", "10001", "00001", "00010", "00100", "01000", "11111"],
+  "3": ["11110", "00001", "00001", "01110", "00001", "00001", "11110"],
+  "4": ["00010", "00110", "01010", "10010", "11111", "00010", "00010"],
+  "5": ["11111", "10000", "11110", "00001", "00001", "10001", "01110"],
+  "6": ["00110", "01000", "10000", "11110", "10001", "10001", "01110"],
+  "7": ["11111", "00001", "00010", "00100", "01000", "01000", "01000"],
+  "8": ["01110", "10001", "10001", "01110", "10001", "10001", "01110"],
+  "9": ["01110", "10001", "10001", "01111", "00001", "00010", "01100"]
+};
+var DOT_SPRING = { type: "spring", stiffness: 520, damping: 30 };
+var SNAP = { type: "spring", stiffness: 260, damping: 30 };
+var GLIDE = [0.22, 1, 0.36, 1];
+var RADIUS = 300;
+var STEP = 2.4;
+var UNIT = RADIUS * STEP * Math.PI / 180;
+function DotDigit({ ch, still }) {
+  const rows = GLYPHS[ch] ?? GLYPHS["0"];
+  return /* @__PURE__ */ jsx("span", { className: "grid grid-cols-5 gap-[3px]", "aria-hidden": true, children: rows.flatMap(
+    (row, r) => Array.from(row).map((bit, c) => {
+      const on = bit === "1";
+      return /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "size-[6px] rounded-full bg-white",
+          initial: false,
+          animate: { opacity: on ? 1 : 0.1, scale: on ? 1 : 0.55 },
+          transition: still ? { duration: 0 } : { ...DOT_SPRING, delay: (r + c) * 8e-3 }
+        },
+        `${r}-${c}`
+      );
+    })
+  ) });
+}
+function Tick({
+  i,
+  min,
+  pos
+}) {
+  const v = min + i;
+  const major = v % 5 === 0;
+  const scaleY = useTransform(pos, (p) => {
+    const d = v - p;
+    return 1 + 0.8 * Math.exp(-(d * d) / 14);
+  });
+  const opacity = useTransform(pos, (p) => {
+    const d = Math.abs(v - p);
+    return Math.max(0.3, 0.9 - d * 0.035);
+  });
+  return (
+    // Spun to its place on the wheel; the tick hangs inward from the rim.
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "absolute left-0 top-0",
+        style: { transform: `rotate(${i * STEP}deg)` },
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "absolute left-[-0.75px] w-[1.5px] origin-top rounded-full bg-white",
+              style: { top: -RADIUS, height: major ? 16 : 9, scaleY, opacity }
+            }
+          ),
+          v % 10 === 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute w-8 -translate-x-1/2 text-center text-xs font-medium tabular-nums text-white/75",
+              style: { top: -RADIUS + 30 },
+              children: v
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+function StepButton({
+  label,
+  onPress,
+  still,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": label,
+      onClick: onPress,
+      whileHover: still ? void 0 : { scale: 1.06 },
+      whileTap: still ? void 0 : { scale: 0.9 },
+      transition: { type: "spring", stiffness: 500, damping: 26 },
+      className: "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full bg-white/20 text-white outline-none ring-1 ring-white/25 transition-colors hover:bg-white/30 focus-visible:ring-2 focus-visible:ring-white/70",
+      children
+    }
+  );
+}
+var GradientCard = React.forwardRef(
+  function GradientCard2({
+    label = "Body age",
+    value: initial = 25,
+    reference = 27.5,
+    min = 18,
+    max = 90,
+    caption = defaultCaption,
+    palette = DEFAULT_PALETTE,
+    speed = 1,
+    onChange,
+    className
+  }, ref) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const still = !!useReducedMotion();
+    const inView = useInView(root, { once: true, amount: 0.4 });
+    const shown = inView || still;
+    const clamp = (v) => Math.min(max, Math.max(min, v));
+    const target = clamp(Math.round(initial));
+    const pos = useMotionValue(still ? target : clamp(target - 12));
+    const [shownValue, setShownValue] = React.useState(Math.round(pos.get()));
+    useMotionValueEvent(pos, "change", (p) => {
+      const r = Math.round(clamp(p));
+      setShownValue((cur) => cur === r ? cur : r);
+    });
+    const settled = React.useRef(target);
+    const settle = (v) => {
+      if (settled.current !== v) {
+        settled.current = v;
+        onChange?.(v);
+      }
+    };
+    React.useEffect(() => {
+      if (!shown || still) return;
+      const c = animate(pos, target, {
+        duration: 1.4,
+        delay: 0.25,
+        ease: GLIDE
+      });
+      return () => c.stop();
+    }, [shown]);
+    const snapTo = (v, velocity = 0) => {
+      const to = clamp(Math.round(v));
+      animate(pos, to, still ? { duration: 0 } : { ...SNAP, velocity });
+      settle(to);
+    };
+    const drag = React.useRef(null);
+    const onDown = (e) => {
+      if (e.button !== 0) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pos.stop();
+      drag.current = { x: e.clientX, p: pos.get(), t: performance.now(), v: 0 };
+    };
+    const onMove = (e) => {
+      const g = drag.current;
+      if (!g) return;
+      const now = performance.now();
+      let next = g.p - (e.clientX - g.x) / UNIT;
+      if (next < min) next = min - (min - next) * 0.3;
+      if (next > max) next = max + (next - max) * 0.3;
+      const dt = Math.max(1, now - g.t);
+      g.v = g.v * 0.6 + (next - pos.get()) / dt * 1e3 * 0.4;
+      g.t = now;
+      pos.set(next);
+    };
+    const onUp = () => {
+      const g = drag.current;
+      if (!g) return;
+      drag.current = null;
+      snapTo(pos.get() + Math.max(-12, Math.min(12, g.v * 0.22)), g.v);
+    };
+    const wheelEnd = React.useRef(0);
+    const onWheel = (e) => {
+      const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      pos.stop();
+      pos.set(clamp(pos.get() + d / UNIT / 2));
+      window.clearTimeout(wheelEnd.current);
+      wheelEnd.current = window.setTimeout(() => snapTo(pos.get()), 140);
+    };
+    const knock = useSpring(0, { stiffness: 900, damping: 18 });
+    const last = React.useRef(shownValue);
+    React.useEffect(() => {
+      if (last.current !== shownValue && !still) {
+        knock.set(shownValue > last.current ? -2 : 2);
+        window.setTimeout(() => knock.set(0), 40);
+      }
+      last.current = shownValue;
+    }, [shownValue, knock, still]);
+    const dialRotate = useTransform(pos, (p) => -(p - min) * STEP);
+    const stops = [reference - 10, reference, reference + 14];
+    const blend = (k2) => [
+      palette.young[k2],
+      palette.even[k2],
+      palette.old[k2]
+    ];
+    const c0 = useTransform(pos, stops, blend(0));
+    const c1 = useTransform(pos, stops, blend(1));
+    const c2 = useTransform(pos, stops, blend(2));
+    const c3 = useTransform(pos, stops, blend(3));
+    const px = useSpring(0, { stiffness: 60, damping: 18 });
+    const py = useSpring(0, { stiffness: 60, damping: 18 });
+    const onHover = (e) => {
+      if (still) return;
+      const r = root.current.getBoundingClientRect();
+      px.set(((e.clientX - r.left) / r.width - 0.5) * 120);
+      py.set(((e.clientY - r.top) / r.height - 0.5) * 90);
+    };
+    const gap = Math.round((shownValue - reference) * 10) / 10;
+    const digits = String(shownValue).split("");
+    const k = 1 / Math.max(0.1, speed);
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        onPointerMove: onHover,
+        onPointerLeave: () => {
+          px.set(0);
+          py.set(0);
+        },
+        initial: still ? false : { opacity: 0, y: 24, scale: 0.97 },
+        animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+        transition: { duration: 0.7, ease: GLIDE },
+        className: cn(
+          "relative isolate h-[300px] w-[400px] max-w-full overflow-hidden rounded-[28px] text-white shadow-[0_2px_6px_rgba(0,0,0,0.06),0_24px_48px_-24px_rgba(0,0,0,0.35)]",
+          className
+        ),
+        style: { backgroundColor: c3 },
+        children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute -inset-16 -z-10", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 blur-[48px]", children: [
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute left-[30%] top-[25%] size-[70%] rounded-full",
+                style: { backgroundColor: c0 },
+                animate: still ? void 0 : {
+                  x: [0, 40, -20, 0],
+                  y: [0, -20, 30, 0],
+                  scale: [1, 1.1, 0.95, 1]
+                },
+                transition: {
+                  duration: 14 * k,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute left-[10%] top-[30%] size-[55%] rounded-full",
+                style: { backgroundColor: c1 },
+                animate: still ? void 0 : { x: [0, -30, 30, 0], y: [0, 30, -10, 0] },
+                transition: {
+                  duration: 17 * k,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute right-[0%] top-[0%] size-[50%] rounded-full",
+                style: { backgroundColor: c2 },
+                animate: still ? void 0 : { x: [0, -40, 10, 0], y: [0, 20, 40, 0] },
+                transition: {
+                  duration: 19 * k,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute left-[35%] top-[35%] size-[40%] rounded-full",
+                style: { backgroundColor: c0, x: px, y: py, opacity: 0.85 }
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 -z-10 opacity-[0.18] mix-blend-overlay",
+              style: {
+                backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-white/10 to-transparent"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col px-6 pt-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-base font-medium tracking-tight text-white", children: label }),
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex h-7 items-center gap-1.5 rounded-full bg-white/20 px-3 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur-md", children: [
+                /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-white" }),
+                "Your years ",
+                reference
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-6 flex gap-[10px]", "aria-hidden": true, children: digits.map((d, i) => /* @__PURE__ */ jsx(DotDigit, { ch: d, still }, digits.length - i)) }),
+            /* @__PURE__ */ jsx(
+              motion.p,
+              {
+                className: "mt-3 text-sm text-white/90",
+                initial: still ? false : { opacity: 0, y: 4, filter: "blur(2px)" },
+                animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                transition: { duration: 0.3, ease: GLIDE },
+                children: caption(shownValue, gap)
+              },
+              caption(shownValue, gap)
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative -mx-2 mb-4 mt-auto flex h-[88px] items-center gap-1 rounded-[22px] bg-white/15 px-2 ring-1 ring-white/25 backdrop-blur-md", children: [
+              /* @__PURE__ */ jsx(
+                StepButton,
+                {
+                  label: "Step down",
+                  onPress: () => snapTo(settled.current - 1),
+                  still,
+                  children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true, className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": label,
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-valuenow": shownValue,
+                  "aria-valuetext": `${shownValue}, ${caption(shownValue, gap)}`,
+                  onPointerDown: onDown,
+                  onPointerMove: onMove,
+                  onPointerUp: onUp,
+                  onPointerCancel: onUp,
+                  onWheel,
+                  onKeyDown: (e) => {
+                    const by = {
+                      ArrowLeft: -1,
+                      ArrowDown: -1,
+                      ArrowRight: 1,
+                      ArrowUp: 1,
+                      PageDown: -5,
+                      PageUp: 5
+                    };
+                    let to = null;
+                    if (e.key in by) to = settled.current + by[e.key];
+                    else if (e.key === "Home") to = min;
+                    else if (e.key === "End") to = max;
+                    if (to === null) return;
+                    e.preventDefault();
+                    snapTo(to);
+                  },
+                  className: "relative h-full min-w-0 flex-1 cursor-grab touch-none select-none overflow-hidden rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-white/70 active:cursor-grabbing",
+                  style: {
+                    maskImage: "linear-gradient(to right, transparent, black 26%, black 74%, transparent)",
+                    WebkitMaskImage: "linear-gradient(to right, transparent, black 26%, black 74%, transparent)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: "absolute left-1/2 size-0",
+                        style: { top: 16 + RADIUS, rotate: dialRotate },
+                        children: Array.from({ length: max - min + 1 }, (_, i) => /* @__PURE__ */ jsx(Tick, { i, min, pos }, i))
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      motion.span,
+                      {
+                        "aria-hidden": true,
+                        className: "absolute left-1/2 top-2 flex -translate-x-1/2 flex-col items-center",
+                        style: { x: knock },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-white" }),
+                          /* @__PURE__ */ jsx("span", { className: "mt-0.5 h-6 w-[3px] rounded-full bg-white shadow-[0_0_10px_rgba(255,255,255,0.7)]" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StepButton,
+                {
+                  label: "Step up",
+                  onPress: () => snapTo(settled.current + 1),
+                  still,
+                  children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-4" })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  GradientCard
+};

package/dist/chunk-VEC5QAOY.js

@@ -0,0 +1,104 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/refresh-cw.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 RefreshCWIcon = 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(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: { type: "spring", stiffness: 250, damping: 25 },
+            variants: {
+              normal: { rotate: "0deg" },
+              animate: { rotate: "50deg" }
+            },
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+              /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+              /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+              /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+RefreshCWIcon.displayName = "RefreshCWIcon";
+
+export {
+  RefreshCWIcon
+};

package/dist/chunk-VIR5NV5W.js

@@ -0,0 +1,118 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/bookmark.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var BOOKMARK_VARIANTS = {
+  normal: { scaleY: 1, scaleX: 1 },
+  animate: {
+    scaleY: [1, 1.3, 0.9, 1.05, 1],
+    scaleX: [1, 0.9, 1.1, 0.95, 1],
+    transition: {
+      duration: 0.6,
+      ease: "easeOut"
+    }
+  }
+};
+var BookmarkIcon = forwardRef(
+  ({ className, onMouseEnter, onMouseLeave, 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(
+          "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 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z",
+                style: { originY: 0.5, originX: 0.5 },
+                variants: BOOKMARK_VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+BookmarkIcon.displayName = "BookmarkIcon";
+
+export {
+  BookmarkIcon
+};