motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-RU2Q2XVP.js

@@ -0,0 +1,287 @@
+"use client";
+import {
+  ArrowDownRightIcon
+} from "./chunk-25254AZA.js";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/score-card/score-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useReducedMotion,
+  useTransform,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PALETTE = ["#8b7cf6", "#3b9eea", "#269a5a", "#e2a33b", "#e0607e"];
+var DEFAULT_BARS = [
+  { label: "Sleep", value: 16, max: 20 },
+  { label: "Activity", value: 18, max: 20 },
+  { label: "Nutrition", value: 19, max: 20 }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var COUNT = [0.5, 1, 0.89, 1];
+var SLIDE = { type: "spring", stiffness: 140, damping: 17, mass: 0.9 };
+var share = (bars) => {
+  const v = bars.reduce((s, b) => s + b.value, 0);
+  const m = bars.reduce((s, b) => s + b.max, 0);
+  return m ? v / m * 100 : 0;
+};
+function Count({
+  value,
+  decimals,
+  className
+}) {
+  const text = useTransform(value, (v) => v.toFixed(decimals));
+  const rate = useVelocity(value);
+  const filter = useTransform(rate, (r) => {
+    const px = Math.min(1.2, Math.abs(r) * 0.012);
+    return px < 0.15 ? "none" : `blur(${px.toFixed(2)}px)`;
+  });
+  return /* @__PURE__ */ jsx(motion.span, { className: cn("tabular-nums", className), style: { filter }, children: text });
+}
+function Bar({
+  bar,
+  index,
+  shown,
+  active,
+  dim,
+  still,
+  onEnter,
+  onLeave
+}) {
+  const color = bar.color ?? PALETTE[index % PALETTE.length];
+  const ratio = bar.max ? Math.min(1, Math.max(0, bar.value / bar.max)) : 0;
+  const target = shown ? Math.max(0.42, ratio) : 0;
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      onPointerEnter: onEnter,
+      onPointerLeave: onLeave,
+      onFocus: onEnter,
+      onBlur: onLeave,
+      whileTap: still ? void 0 : { scale: 0.98 },
+      animate: { opacity: dim ? 0.45 : 1 },
+      transition: { duration: 0.25, ease: GLIDE },
+      "aria-label": `${bar.label}, ${bar.value} of ${bar.max}`,
+      className: "group/bar relative block h-11 w-full cursor-pointer overflow-hidden rounded-full bg-[#242423]/[0.06] text-left outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-white/[0.06]",
+      children: /* @__PURE__ */ jsxs(
+        motion.span,
+        {
+          className: "absolute inset-y-0 left-0 overflow-hidden rounded-full",
+          initial: false,
+          animate: {
+            width: `${target * 100}%`
+          },
+          transition: still ? { duration: 0 } : {
+            width: { ...SLIDE, delay: shown ? index * 0.09 : 0 }
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0 opacity-25",
+                style: { backgroundColor: color }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0",
+                style: { backgroundColor: color },
+                initial: false,
+                animate: { opacity: active ? 1 : 0 },
+                transition: { duration: still ? 0 : 0.3, ease: GLIDE }
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: active && !still && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                "aria-hidden": true,
+                className: "absolute inset-y-0 w-1/3 bg-gradient-to-r from-transparent via-white/20 to-transparent",
+                initial: { left: "-40%" },
+                animate: { left: "110%" },
+                exit: { opacity: 0 },
+                transition: { duration: 0.8, ease: GLIDE }
+              },
+              "sheen"
+            ) }),
+            /* @__PURE__ */ jsxs(
+              motion.span,
+              {
+                className: "relative flex h-full items-center justify-between gap-3 whitespace-nowrap px-4 text-sm",
+                animate: { color: active ? "#ffffff" : "#242423" },
+                transition: { duration: 0.3, ease: GLIDE },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: bar.label }),
+                  /* @__PURE__ */ jsxs("span", { className: "tabular-nums opacity-60", children: [
+                    /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "inline-block",
+                        initial: still ? false : { y: 8, opacity: 0, filter: "blur(2px)" },
+                        animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+                        transition: { duration: 0.35, ease: GLIDE },
+                        children: bar.value
+                      },
+                      bar.value
+                    ),
+                    "/",
+                    bar.max
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var ScoreCard = React.forwardRef(
+  function ScoreCard2({
+    title = "Health score",
+    avatar = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&h=120&fit=crop&crop=faces",
+    bars = DEFAULT_BARS,
+    change = 4.1,
+    period = "month",
+    decimals = 1,
+    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(null);
+    const lit = hover ?? bars.length - 1;
+    const focusBar = hover === null ? null : bars[hover];
+    const target = focusBar ? focusBar.value / Math.max(1, focusBar.max) * 100 : share(bars);
+    const score = useMotionValue(0);
+    const first = React.useRef(true);
+    React.useEffect(() => {
+      if (!shown) return;
+      if (still) return void score.set(target);
+      const intro = first.current;
+      first.current = false;
+      const c = animate(score, target, {
+        duration: intro ? 1.2 : 0.6,
+        delay: intro ? 0.1 : 0,
+        ease: COUNT
+      });
+      return () => c.stop();
+    }, [shown, still, target, score]);
+    const up = (change ?? 0) >= 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        className: cn(
+          "relative w-[360px] 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: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "relative mt-1 h-5 overflow-hidden text-sm text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                motion.p,
+                {
+                  initial: still ? false : { y: 12, opacity: 0, filter: "blur(2px)" },
+                  animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+                  exit: still ? void 0 : { y: -12, opacity: 0, filter: "blur(2px)" },
+                  transition: { duration: 0.3, ease: GLIDE },
+                  children: focusBar ? `${focusBar.label} this ${period}` : `Overall this ${period}`
+                },
+                focusBar ? focusBar.label : "overall"
+              ) }) })
+            ] }),
+            avatar && /* @__PURE__ */ jsx(
+              motion.img,
+              {
+                src: avatar,
+                alt: "",
+                draggable: false,
+                initial: still ? false : { scale: 0.6, opacity: 0 },
+                animate: shown ? { scale: 1, opacity: 1 } : void 0,
+                whileHover: still ? void 0 : { scale: 1.06, rotate: -4 },
+                transition: { type: "spring", stiffness: 380, damping: 22 },
+                className: "size-10 shrink-0 select-none rounded-full object-cover ring-2 ring-white shadow-[0_1px_2px_rgba(0,0,0,0.08),0_0_0_3px_rgba(36,36,35,0.06)] dark:ring-zinc-900"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-end justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: "flex items-baseline text-[32px] font-medium leading-none tracking-tight",
+                "aria-label": `${target.toFixed(decimals)} percent`,
+                children: [
+                  /* @__PURE__ */ jsx(Count, { value: score, decimals }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-xl text-zinc-400 dark:text-zinc-500", children: "%" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: change != null && hover === null && /* @__PURE__ */ jsxs(
+              motion.span,
+              {
+                initial: still ? false : { opacity: 0, y: 6, scale: 0.9 },
+                animate: { opacity: 1, y: 0, scale: 1 },
+                exit: still ? void 0 : { opacity: 0, y: -6, scale: 0.9 },
+                transition: { type: "spring", stiffness: 420, damping: 26 },
+                className: cn(
+                  "mb-0.5 inline-flex h-7 items-center gap-1 rounded-full px-2.5 text-sm font-medium tabular-nums",
+                  up ? "bg-[#269a5a]/10 text-[#269a5a]" : "bg-[#242423]/[0.06] text-zinc-500 dark:bg-white/[0.06] dark:text-zinc-400"
+                ),
+                children: [
+                  up ? /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(ArrowDownRightIcon, { className: "size-4", "aria-hidden": true }),
+                  up ? "+" : "",
+                  change.toFixed(1)
+                ]
+              },
+              "change"
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mt-12 flex flex-col gap-2",
+              onPointerLeave: () => setHover(null),
+              children: bars.map((b, i) => /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  bar: b,
+                  index: i,
+                  shown,
+                  active: i === lit,
+                  dim: hover !== null && i !== hover,
+                  still,
+                  onEnter: () => setHover(i),
+                  onLeave: () => setHover((h) => h === i ? null : h)
+                },
+                b.label
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: focusBar ? `${focusBar.label}, ${focusBar.value} of ${focusBar.max}` : `${title} ${share(bars).toFixed(decimals)} percent this ${period}` })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ScoreCard
+};

package/dist/chunk-RWUARRFZ.js

@@ -0,0 +1,267 @@
+"use client";
+import {
+  FlameIcon
+} from "./chunk-YVYYDPE2.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/deploy-streak/deploy-streak.tsx
+import * as React from "react";
+import {
+  animate,
+  AnimatePresence,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_DAYS = Array.from(
+  { length: 70 },
+  (_, i) => i < 11 ? ![2, 5, 9].includes(i) : true
+);
+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 COUNT = [0.5, 1, 0.89, 1];
+var streakOf = (days) => {
+  let n = 0;
+  for (let i = days.length - 1; i >= 0 && days[i]; i--) n++;
+  return n;
+};
+var DeployStreak = React.forwardRef(
+  function DeployStreak2({
+    title = "Deploys",
+    days = DEFAULT_DAYS,
+    columns = 14,
+    color = "#269a5a",
+    today,
+    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(null);
+    const [cardHover, setCardHover] = React.useState(false);
+    const streak = streakOf(days);
+    const count = useMotionValue(still ? streak : 0);
+    React.useEffect(() => {
+      if (!shown || still) return;
+      const c = animate(count, streak, {
+        duration: 1.3,
+        delay: 0.2,
+        ease: COUNT
+      });
+      return () => c.stop();
+    }, [shown, still, streak, count]);
+    const end = today ?? /* @__PURE__ */ new Date();
+    const fmt = React.useMemo(
+      () => new Intl.DateTimeFormat("en", {
+        weekday: "short",
+        month: "short",
+        day: "numeric"
+      }),
+      []
+    );
+    const dateOf = (i) => {
+      const d = new Date(end);
+      d.setDate(d.getDate() - (days.length - 1 - i));
+      return fmt.format(d);
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        onPointerEnter: () => setCardHover(true),
+        onPointerLeave: () => {
+          setCardHover(false);
+          setHover(null);
+        },
+        initial: still ? false : { opacity: 0, y: 16 },
+        animate: shown ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "w-[340px] 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: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-[#242423]/[0.06] dark:bg-white/[0.08]", children: /* @__PURE__ */ jsx(FlameIcon, { className: "size-4", active: cardHover }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tracking-tight", children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-end gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[48px] font-semibold leading-[0.85] tracking-tight tabular-nums", children: /* @__PURE__ */ jsx(Odometer, { value: count, label: `${streak}` }) }),
+            /* @__PURE__ */ jsxs("span", { className: "pb-0.5 text-sm leading-tight text-zinc-500 dark:text-zinc-400", children: [
+              "days",
+              /* @__PURE__ */ jsx("br", {}),
+              "in a row"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "img",
+              "aria-label": `Shipped ${streak} days in a row. ${days.filter(Boolean).length} of the last ${days.length} days had a deploy.`,
+              className: "relative mt-5 grid gap-1.5",
+              style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+              children: days.map((done, i) => {
+                const r = Math.floor(i / columns);
+                const c = i % columns;
+                const isToday = i === days.length - 1;
+                const on = hover === i;
+                return /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "relative grid aspect-square place-items-center",
+                    onPointerEnter: () => setHover(i),
+                    children: [
+                      isToday && !still && shown && /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0 rounded-full",
+                          style: { boxShadow: `0 0 0 2px ${color}` },
+                          animate: { scale: [1, 1.5], opacity: [0.6, 0] },
+                          transition: {
+                            duration: 1.6,
+                            repeat: Infinity,
+                            ease: "easeOut",
+                            delay: 1.4
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "absolute inset-0 rounded-full",
+                          style: {
+                            backgroundColor: done ? color : "rgba(36,36,35,0.08)"
+                          },
+                          initial: still ? false : { scale: 0, opacity: 0 },
+                          animate: shown ? {
+                            scale: on ? 1.35 : 1,
+                            opacity: done ? 1 : 1,
+                            y: on ? -2 : 0
+                          } : void 0,
+                          transition: {
+                            type: "spring",
+                            stiffness: 420,
+                            damping: 20,
+                            delay: on || hover !== null ? 0 : still ? 0 : 0.15 + (r + c) * 0.025
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(AnimatePresence, { children: on && /* @__PURE__ */ jsxs(
+                        motion.span,
+                        {
+                          initial: { opacity: 0, y: 4, scale: 0.9 },
+                          animate: { opacity: 1, y: 0, scale: 1 },
+                          exit: { opacity: 0, y: 2, scale: 0.95 },
+                          transition: {
+                            type: "spring",
+                            stiffness: 500,
+                            damping: 30
+                          },
+                          className: cn(
+                            "pointer-events-none absolute bottom-full z-10 mb-2 inline-flex h-7 items-center gap-1.5 whitespace-nowrap rounded-full bg-[#242423] px-2.5 text-xs font-medium text-white dark:bg-zinc-100 dark:text-[#242423]",
+                            c < 3 ? "left-0" : c > columns - 4 ? "right-0" : "left-1/2 -translate-x-1/2"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "size-1.5 rounded-full",
+                                style: {
+                                  backgroundColor: done ? color : "rgba(255,255,255,0.4)"
+                                }
+                              }
+                            ),
+                            isToday ? "Today" : dateOf(i),
+                            /* @__PURE__ */ jsx("span", { className: "text-white/60 dark:text-[#242423]/60", children: done ? "Shipped" : "No deploy" })
+                          ]
+                        }
+                      ) })
+                    ]
+                  },
+                  i
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  DeployStreak
+};