motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-RE74K7KI.js

@@ -0,0 +1,370 @@
+"use client";
+import {
+  ArrowUpIcon
+} from "./chunk-2IMPUH4H.js";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/growth-stream/growth-stream.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 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__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx(motion.span, { className: "absolute inset-x-0 top-0 flex flex-col", style: { y, filter }, children: [...DIGITS, 0].map((d, i) => /* @__PURE__ */ jsx("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__ */ jsx(
+        motion.span,
+        {
+          className: "inline-flex",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx(Wheel, { amount, rate, place: 10 ** k, unit: 10 ** -fractionDigits })
+        },
+        `w${k}`
+      )
+    );
+    if (k > 0 && k % 3 === 0) cells.push(/* @__PURE__ */ jsx("span", { children: group }, `g${k}`));
+  }
+  if (fractionDigits > 0) cells.push(/* @__PURE__ */ jsx("span", { children: decimal }, "dec"));
+  for (let f = 1; f <= fractionDigits; f++) {
+    cells.push(/* @__PURE__ */ jsx(Wheel, { amount, rate, place: 10 ** -f, unit: 10 ** -fractionDigits }, `f${f}`));
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": label, className: "inline-flex leading-none tabular-nums", children: /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "inline-flex", children: [
+    before,
+    cells,
+    after
+  ] }) });
+}
+var POP = {
+  initial: { opacity: 0, y: 6 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -4 },
+  transition: { duration: 0.25, ease: GLIDE }
+};
+var W = 340;
+var H = 188;
+var MID = H / 2;
+var MIN_HALF = 4;
+var MAX_HALF = 76;
+var RAMP = 44;
+var BANDS = [
+  { scale: 1, alpha: 0.22 },
+  { scale: 0.68, alpha: 0.45 },
+  { scale: 0.36, alpha: 1 }
+];
+var smooth = (t) => {
+  const x = Math.min(1, Math.max(0, t));
+  return x * x * (3 - 2 * x);
+};
+var DEFAULT_CHECKPOINTS = [
+  { label: "Week 1", value: 8120 },
+  { label: "Week 2", value: 19480 },
+  { label: "Week 3", value: 32134 }
+];
+var GrowthStream = React.forwardRef(function GrowthStream2({
+  checkpoints = DEFAULT_CHECKPOINTS,
+  previous = 31350,
+  title = "Income",
+  previousLabel = "last month",
+  periodLabel = "the month",
+  color = "#8b5cf6",
+  currency = "USD",
+  locale = "en-US",
+  duration = 1.6,
+  onAction,
+  actionLabel = "View report",
+  className
+}, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const inView = useInView(root, { once: true, amount: 0.4 });
+  const reduceMotion = !!useReducedMotion();
+  const [active, setActive] = React.useState(null);
+  const [reached, setReached] = React.useState(0);
+  const money = React.useMemo(
+    () => new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: 0 }),
+    [locale, currency]
+  );
+  const plain = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }), [locale]);
+  const total = checkpoints[checkpoints.length - 1]?.value ?? 0;
+  const change = previous > 0 ? (total - previous) / previous * 100 : 0;
+  const xs = checkpoints.map((_, i) => W * ((i + 0.6) / (checkpoints.length + 0.2)));
+  const segments = xs.map((x, i) => ({ from: i === 0 ? 0 : xs[i - 1], to: i === xs.length - 1 ? W : x }));
+  const half = React.useCallback(
+    (x, scale) => {
+      let h = MIN_HALF;
+      checkpoints.forEach((cp, i) => {
+        const before = i === 0 ? 0 : checkpoints[i - 1].value;
+        const grow = (cp.value - before) / Math.max(1, total) * (MAX_HALF - MIN_HALF);
+        h += grow * smooth((x - (xs[i] - RAMP - 8)) / RAMP);
+      });
+      return h * scale;
+    },
+    [checkpoints, total, xs]
+  );
+  const bandPath = React.useCallback(
+    (scale) => {
+      const top = [];
+      const bottom = [];
+      for (let x = 0; x <= W; x += 4) {
+        const h = Math.max(1.5, half(x, scale));
+        top.push(`${x} ${(MID - h).toFixed(2)}`);
+        bottom.unshift(`${x} ${(MID + h).toFixed(2)}`);
+      }
+      return `M ${top.join(" L ")} L ${bottom.join(" L ")} Z`;
+    },
+    [half]
+  );
+  const amount = useMotionValue(0);
+  const shown = useMotionValue(0);
+  const reveal = useTransform(amount, (a) => total > 0 ? Math.min(1, a / total) : 1);
+  const clipPath = useTransform(reveal, (r) => `inset(-60% ${((1 - r) * 100).toFixed(2)}% -60% 0) view-box`);
+  const lagged = (r, lag) => {
+    const t = Math.min(1, Math.max(0, (r - lag) / (1 - lag)));
+    return `inset(-60% ${((1 - t) * 100).toFixed(2)}% -60% 0) view-box`;
+  };
+  const outerClip = useTransform(reveal, (r) => lagged(r, 0));
+  const middleClip = useTransform(reveal, (r) => lagged(r, 0.08));
+  const coreClip = useTransform(reveal, (r) => lagged(r, 0.16));
+  const bandClips = [outerClip, middleClip, coreClip];
+  const glowId = `glow${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  useMotionValueEvent(amount, "change", (a) => {
+    if (active === null) shown.set(a);
+    const r = total > 0 ? a / total : 1;
+    const count = xs.filter((x) => x / W <= r + 1e-6).length;
+    if (count !== reached) setReached(count);
+  });
+  React.useEffect(() => {
+    if (!inView) return;
+    if (reduceMotion) {
+      amount.set(total);
+      shown.set(total);
+      setReached(checkpoints.length);
+      return;
+    }
+    const controls = animate(amount, total, { duration, ease: FILL });
+    return () => controls.stop();
+  }, [inView, total, duration, reduceMotion]);
+  React.useEffect(() => {
+    const target = active === null ? amount.get() : checkpoints[active].value;
+    if (reduceMotion) {
+      shown.set(target);
+      return;
+    }
+    const controls = animate(shown, target, { duration: 0.6, ease: GLIDE });
+    return () => controls.stop();
+  }, [active, checkpoints, amount, shown, reduceMotion]);
+  const caption = active !== null ? `By ${checkpoints[active].label} \xB7 ${Math.round(checkpoints[active].value / Math.max(1, total) * 100)}% of ${periodLabel}` : `Compared to ${money.format(previous)} ${previousLabel}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: cn(
+        "w-[340px] max-w-full overflow-hidden rounded-3xl bg-white pb-6 pt-6 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__ */ jsxs("header", { className: "flex items-start justify-between gap-4 px-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-[32px] font-medium tracking-tight", children: /* @__PURE__ */ jsx(Odometer, { amount: shown, format: money, label: money.format(total) }) }),
+              active === null && /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  ...POP,
+                  className: cn(
+                    "inline-flex items-center gap-0.5 text-sm font-medium",
+                    change >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(ArrowUpIcon, { className: cn("size-3.5", change < 0 && "rotate-180"), strokeWidth: 2.5 }),
+                    Math.abs(change).toFixed(1),
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 grid text-sm text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx(motion.span, { ...POP, className: "col-start-1 row-start-1 truncate", children: caption }, caption) }) })
+          ] }),
+          onAction && /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              onClick: onAction,
+              "aria-label": actionLabel,
+              initial: "rest",
+              whileHover: "hover",
+              whileTap: "press",
+              variants: { rest: { scale: 1 }, hover: { scale: 1 }, press: { scale: 0.94 } },
+              transition: { duration: 0.15, ease: GLIDE },
+              className: "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full bg-[#242423]/6 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__ */ jsx(
+                motion.span,
+                {
+                  variants: { rest: { x: 0, y: 0, opacity: 1 }, hover: { x: 2, y: -2, opacity: 1 } },
+                  transition: { duration: 0.25, ease: GLIDE },
+                  className: "flex",
+                  children: /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-4", strokeWidth: 2.5 })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "img",
+            "aria-label": `${typeof title === "string" ? title : "Total"} over time: ${checkpoints.map((cp) => `${cp.label} ${money.format(cp.value)}`).join(", ")}`,
+            className: "relative mt-6",
+            onPointerLeave: () => setActive(null),
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${W} ${H}`, className: "block w-full overflow-visible", "aria-hidden": true, children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowId, x: "-10%", y: "-100%", width: "120%", height: "300%", children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "14" }) }) }),
+                /* @__PURE__ */ jsx(motion.g, { style: { clipPath }, children: /* @__PURE__ */ jsx("path", { d: bandPath(1.25), fill: color, fillOpacity: 0.15, filter: `url(#${glowId})` }) }),
+                segments.map((seg, i) => /* @__PURE__ */ jsx("clipPath", { id: `${glowId}-seg${i}`, children: /* @__PURE__ */ jsx("rect", { x: seg.from, y: -H, width: seg.to - seg.from, height: H * 3 }) }, `clip-${i}`)),
+                /* @__PURE__ */ jsx("g", { children: segments.map((_, i) => /* @__PURE__ */ jsx(
+                  motion.g,
+                  {
+                    clipPath: `url(#${glowId}-seg${i})`,
+                    animate: { opacity: active === null || active === i ? 1 : 0.28 },
+                    transition: { duration: 0.25, ease: GLIDE },
+                    children: BANDS.map((band, k) => /* @__PURE__ */ jsx(
+                      motion.path,
+                      {
+                        d: bandPath(band.scale),
+                        fill: color,
+                        fillOpacity: band.alpha,
+                        style: { clipPath: bandClips[k] }
+                      },
+                      band.scale
+                    ))
+                  },
+                  i
+                )) }),
+                xs.map((x, i) => /* @__PURE__ */ jsx(
+                  motion.line,
+                  {
+                    x1: x,
+                    x2: x,
+                    y1: 0,
+                    y2: H,
+                    strokeWidth: 1.5,
+                    className: "stroke-white dark:stroke-zinc-900",
+                    initial: false,
+                    animate: { opacity: i < reached ? active === null || active === i ? 0.9 : 0.4 : 0 },
+                    transition: { duration: 0.3, ease: GLIDE }
+                  },
+                  i
+                ))
+              ] }),
+              segments.map((seg, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-y-0",
+                  style: { left: `${seg.from / W * 100}%`, width: `${(seg.to - seg.from) / W * 100}%` },
+                  onPointerEnter: () => setActive(i)
+                },
+                `hit-${i}`
+              )),
+              checkpoints.map((cp, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${cp.label}: ${money.format(cp.value)}`,
+                  onPointerEnter: () => setActive(i),
+                  onFocus: () => setActive(i),
+                  onBlur: () => setActive(null),
+                  className: "absolute inset-y-0 w-14 -translate-x-1/2 cursor-default rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                  style: { left: `${xs[i] / W * 100}%` },
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: i < reached && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      initial: { opacity: 0, scale: 0.6, y: 4 },
+                      animate: active === null || active === i ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.85, y: 0 },
+                      exit: { opacity: 0, scale: 0.8 },
+                      transition: { duration: 0.35, ease: GLIDE },
+                      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-white px-2.5 py-1 text-xs font-medium tabular-nums text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_-4px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+                      children: plain.format(cp.value)
+                    },
+                    "pill"
+                  ) })
+                },
+                cp.label
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  GrowthStream
+};

package/dist/chunk-RP22J4NX.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/bell-toggle/bell-toggle.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var UNFURL = { type: "spring", stiffness: 420, damping: 32 };
+var BellToggle = React.forwardRef(
+  function BellToggle2({
+    on: controlled,
+    defaultOn = false,
+    onChange,
+    label = "Notify me",
+    onLabel = "Notifications on",
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const [inner, setInner] = React.useState(defaultOn);
+    const on = controlled ?? inner;
+    const bell = React.useRef(null);
+    const first = React.useRef(true);
+    const { contextSafe } = useGSAP(
+      () => {
+        gsap.set("[data-slash]", { strokeDashoffset: on ? 1 : 0 });
+        gsap.set("[data-wave]", { strokeDashoffset: 1, opacity: 0 });
+        gsap.set("[data-body], [data-clapper]", {
+          rotation: 0,
+          svgOrigin: "12 4"
+        });
+      },
+      { scope: bell }
+    );
+    const ring = contextSafe(() => {
+      if (still) {
+        gsap.set("[data-slash]", { strokeDashoffset: 1 });
+        return;
+      }
+      const tl = gsap.timeline();
+      tl.to("[data-slash]", {
+        strokeDashoffset: 1,
+        duration: 0.25,
+        ease: "power2.in"
+      }).to(
+        "[data-body]",
+        {
+          keyframes: { rotation: [0, 22, -18, 13, -9, 5, -2, 0] },
+          duration: 0.9,
+          ease: "sine.inOut",
+          svgOrigin: "12 4"
+        },
+        0.08
+      ).to(
+        "[data-clapper]",
+        {
+          keyframes: { rotation: [0, -26, 22, -16, 10, -5, 0] },
+          duration: 0.95,
+          ease: "sine.inOut",
+          svgOrigin: "12 4"
+        },
+        0.14
+      ).fromTo(
+        "[data-wave]",
+        { strokeDashoffset: 1, opacity: 1, scale: 0.85, svgOrigin: "12 12" },
+        {
+          strokeDashoffset: 0,
+          scale: 1.1,
+          duration: 0.35,
+          ease: "power2.out",
+          stagger: 0.06
+        },
+        0.15
+      ).to(
+        "[data-wave]",
+        { opacity: 0, duration: 0.35, ease: "power1.in" },
+        0.6
+      );
+    });
+    const silence = contextSafe(() => {
+      if (still) {
+        gsap.set("[data-slash]", { strokeDashoffset: 0 });
+        return;
+      }
+      gsap.killTweensOf("[data-body], [data-clapper], [data-wave]");
+      gsap.set("[data-wave]", { opacity: 0 });
+      gsap.timeline().to("[data-body], [data-clapper]", {
+        keyframes: { rotation: [0, -8, 0] },
+        duration: 0.4,
+        ease: "sine.inOut",
+        svgOrigin: "12 4"
+      }).to(
+        "[data-slash]",
+        { strokeDashoffset: 0, duration: 0.3, ease: "power2.out" },
+        0.05
+      );
+    });
+    const nudge = contextSafe(() => {
+      if (!on || still) return;
+      gsap.to("[data-body]", {
+        keyframes: { rotation: [0, 9, -6, 0] },
+        duration: 0.5,
+        ease: "sine.inOut",
+        svgOrigin: "12 4",
+        overwrite: true
+      });
+    });
+    React.useEffect(() => {
+      if (first.current) {
+        first.current = false;
+        return;
+      }
+      if (on) ring();
+      else silence();
+    }, [on]);
+    const toggle = () => {
+      const next = !on;
+      if (controlled === void 0) setInner(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": on,
+        "aria-label": on ? onLabel : label,
+        onClick: toggle,
+        onPointerEnter: nudge,
+        layout: true,
+        transition: still ? { duration: 0 } : UNFURL,
+        style: { borderRadius: 999 },
+        whileTap: still ? void 0 : { scale: 0.96 },
+        className: cn(
+          "inline-flex h-11 cursor-pointer items-center overflow-hidden whitespace-nowrap text-sm font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+          on ? "gap-2.5 bg-white pl-4 pr-5 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "gap-2 bg-[#242423]/6 pl-3.5 pr-4 text-zinc-600 hover:bg-[#242423]/10 dark:bg-white/8 dark:text-zinc-300 dark:hover:bg-white/12",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layout: "position",
+              transition: still ? { duration: 0 } : UNFURL,
+              className: "grid",
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  ref: bell,
+                  viewBox: "0 0 24 24",
+                  className: "size-[18px] overflow-visible",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.9",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-wave": true,
+                        d: "M3.2 8.5a9 9 0 0 0 0 5",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-wave": true,
+                        d: "M20.8 8.5a9 9 0 0 1 0 5",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-wave": true,
+                        d: "M1 6.5a12.5 12.5 0 0 0 0 9",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-wave": true,
+                        d: "M23 6.5a12.5 12.5 0 0 1 0 9",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("g", { "data-clapper": true, children: /* @__PURE__ */ jsx("path", { d: "M10.2 19.4a1.9 1.9 0 0 0 3.6 0" }) }),
+                    /* @__PURE__ */ jsxs("g", { "data-body": true, children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 3v1" }),
+                      /* @__PURE__ */ jsx("path", { d: "M6.2 10.4a5.8 5.8 0 0 1 11.6 0c0 3.9 1.4 5.6 2.2 6.4H4c.8-.8 2.2-2.5 2.2-6.4Z" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-slash": true,
+                        d: "M4 3.5 20 20.5",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layout: "position",
+              transition: still ? { duration: 0 } : UNFURL,
+              className: "relative inline-grid overflow-hidden",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: still ? { opacity: 0 } : { opacity: 0, y: "60%", filter: "blur(4px)" },
+                  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                  exit: still ? { opacity: 0 } : { opacity: 0, y: "-60%", filter: "blur(4px)" },
+                  transition: { duration: 0.3, ease: GLIDE },
+                  children: on ? onLabel : label
+                },
+                on ? "on" : "off"
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  BellToggle
+};