motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-JGEV462J.js

@@ -0,0 +1,235 @@
+"use client";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/quota-gauge/quota-gauge.tsx
+import * as React from "react";
+import {
+  animate,
+  AnimatePresence,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform,
+  useVelocity
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var MAX_BLUR = 0.5;
+function Wheel({
+  value,
+  rate,
+  place
+}) {
+  const position = useTransform(value, (a) => {
+    const ticks = Math.max(0, a) + 1e-6;
+    const whole = Math.floor(ticks);
+    const turning = ticks - whole;
+    const digit = Math.floor(whole / place) % 10;
+    const turn = place === 1 ? turning : whole % place === place - 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({
+  value,
+  label,
+  group = ","
+}) {
+  const rate = useVelocity(value);
+  const places = (a) => Math.max(1, String(Math.floor(Math.max(0, a) + 1e-6)).length);
+  const [count, setCount] = React.useState(() => places(value.get()));
+  useMotionValueEvent(value, "change", (a) => {
+    const n = places(a);
+    if (n !== count) setCount(n);
+  });
+  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, { value, rate, place: 10 ** k })
+        },
+        `w${k}`
+      )
+    );
+    if (k > 0 && k % 3 === 0 && group)
+      cells.push(/* @__PURE__ */ jsx("span", { children: group }, `g${k}`));
+  }
+  return /* @__PURE__ */ jsxs("span", { "aria-label": label, className: "inline-flex leading-none tabular-nums", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible w-0", children: "0" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex", children: cells })
+  ] });
+}
+var SWEEP = 270;
+var SIZE = 240;
+var C = SIZE / 2;
+var R_OUT = 108;
+var R_IN = 94;
+var QuotaGauge = React.forwardRef(
+  function QuotaGauge2({
+    value = 2022,
+    goal = 2500,
+    unit = "credits used",
+    ticks = 44,
+    color = "#242423",
+    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 [hover, setHover] = React.useState(false);
+    const share = Math.min(1, value / Math.max(1, goal));
+    const amount = useMotionValue(still ? value : 0);
+    const [lit, setLit] = React.useState(still ? Math.round(share * ticks) : 0);
+    useMotionValueEvent(
+      amount,
+      "change",
+      (v) => setLit(Math.round(Math.min(v, goal) / goal * ticks))
+    );
+    React.useEffect(() => {
+      if (!shown || still) return;
+      const c = animate(amount, value, {
+        duration: 1.6,
+        delay: 0.25,
+        ease: GLIDE
+      });
+      return () => c.stop();
+    }, [shown, still, value, amount]);
+    const left = Math.max(0, goal - value);
+    const start = 90 + (360 - SWEEP) / 2;
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        onPointerEnter: () => setHover(true),
+        onPointerLeave: () => setHover(false),
+        initial: still ? false : { opacity: 0, y: 16 },
+        animate: shown ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "w-[320px] max-w-full rounded-3xl bg-white p-6 text-[#242423] 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(
+            "div",
+            {
+              className: "relative mx-auto size-[240px]",
+              role: "img",
+              "aria-label": `${value.toLocaleString()} of ${goal.toLocaleString()} ${unit}, ${Math.round(share * 100)} percent of the plan`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: `0 0 ${SIZE} ${SIZE}`,
+                    className: "size-full overflow-visible",
+                    children: Array.from({ length: ticks }, (_, i) => {
+                      const a = (start + i / (ticks - 1) * SWEEP) * Math.PI / 180;
+                      const on = i < lit;
+                      const tip = i === lit - 1;
+                      const long = on ? 8 : 0;
+                      return /* @__PURE__ */ jsx(
+                        motion.line,
+                        {
+                          x1: C + R_IN * Math.cos(a),
+                          y1: C + R_IN * Math.sin(a),
+                          x2: C + (R_OUT + long) * Math.cos(a),
+                          y2: C + (R_OUT + long) * Math.sin(a),
+                          strokeWidth: tip ? 5 : 3.5,
+                          strokeLinecap: "round",
+                          initial: false,
+                          animate: {
+                            stroke: on ? color : "rgba(36,36,35,0.1)",
+                            x2: C + (R_OUT + long) * Math.cos(a),
+                            y2: C + (R_OUT + long) * Math.sin(a),
+                            opacity: on ? tip ? 1 : 0.55 + 0.45 * (i / Math.max(1, lit)) : 1
+                          },
+                          transition: { type: "spring", stiffness: 420, damping: 22 },
+                          style: tip && !still ? { filter: `drop-shadow(0 0 6px ${color}66)` } : void 0
+                        },
+                        i
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center pb-2", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "grid size-10 place-items-center rounded-full bg-[#242423]/[0.06] dark:bg-white/[0.08]",
+                      initial: still ? false : { scale: 0.6, opacity: 0 },
+                      animate: shown ? { scale: 1, opacity: 1 } : void 0,
+                      transition: {
+                        type: "spring",
+                        stiffness: 380,
+                        damping: 18,
+                        delay: 0.2
+                      },
+                      children: /* @__PURE__ */ jsx(ZapIcon, { className: "size-5", active: hover })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "mt-3 text-[32px] font-semibold leading-none tracking-tight tabular-nums", children: /* @__PURE__ */ jsx(Odometer, { value: amount, label: `${value}` }) }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: unit })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative -mt-4 h-11 overflow-hidden text-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: still ? false : { y: 18, opacity: 0, filter: "blur(3px)" },
+              animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+              exit: still ? void 0 : { y: -18, opacity: 0, filter: "blur(3px)" },
+              transition: { type: "spring", stiffness: 380, damping: 30 },
+              children: hover ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: left > 0 ? `${left.toLocaleString()} left` : "Limit reached" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: left === 0 ? "Upgrade for more" : share >= 0.75 ? "Close to your limit" : "Plenty of room" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold", children: [
+                  Math.round(share * 100),
+                  "% of your plan"
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [
+                  "Monthly limit ",
+                  goal.toLocaleString()
+                ] })
+              ] })
+            },
+            hover ? "left" : "share"
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  QuotaGauge
+};

package/dist/chunk-JHT6RCGY.js

@@ -0,0 +1,127 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/check.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } 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 CheckIcon = 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(
+          "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: "M4 12 9 17L20 6",
+                initial: "normal",
+                variants: PATH_VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+CheckIcon.displayName = "CheckIcon";
+
+export {
+  CheckIcon
+};

package/dist/chunk-JJEWOQYQ.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/calendar-days.tsx
+import { AnimatePresence, motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DOTS = [
+  { cx: 8, cy: 14 },
+  { cx: 12, cy: 14 },
+  { cx: 16, cy: 14 },
+  { cx: 8, cy: 18 },
+  { cx: 12, cy: 18 },
+  { cx: 16, cy: 18 }
+];
+var VARIANTS = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.2
+    }
+  },
+  animate: (i) => ({
+    opacity: [1, 0.3, 1],
+    transition: {
+      delay: i * 0.1,
+      duration: 0.4,
+      times: [0, 0.5, 1]
+    }
+  })
+};
+var CalendarDaysIcon = 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: "M8 2v4" }),
+            /* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
+            /* @__PURE__ */ jsx("rect", { height: "18", rx: "2", width: "18", x: "3", y: "4" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: DOTS.map((dot, index) => /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                animate: controls,
+                custom: index,
+                cx: dot.cx,
+                cy: dot.cy,
+                fill: "currentColor",
+                initial: "normal",
+                r: "1",
+                stroke: "none",
+                variants: VARIANTS
+              },
+              `${dot.cx}-${dot.cy}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+});
+CalendarDaysIcon.displayName = "CalendarDaysIcon";
+
+export {
+  CalendarDaysIcon
+};

package/dist/chunk-JT2EIO5M.js

@@ -0,0 +1,129 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/user-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 CHECK_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3
+    }
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" }
+    }
+  }
+};
+var UserCheckIcon = 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: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+              /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M16 11L18 13L22 9",
+                  initial: "normal",
+                  style: { transformOrigin: "center" },
+                  variants: CHECK_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+UserCheckIcon.displayName = "UserCheckIcon";
+
+export {
+  UserCheckIcon
+};