motion-brew 0.0.0-stage → 0.1.0

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-RZ2UCZ3C.js

@@ -0,0 +1,212 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/blur-accordion/blur-accordion.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ITEMS = [
+  {
+    id: "install",
+    title: "How do I add a component?",
+    content: "Copy the file into your project, or install the package and import it. Each one only needs Motion or GSAP, plus a small cn() helper."
+  },
+  {
+    id: "motion",
+    title: "Does it respect reduced motion?",
+    content: "Yes. Every component reads the system setting and swaps travel, blur and springs for instant changes, so nothing moves that does not have to."
+  },
+  {
+    id: "license",
+    title: "Can I use it in client work?",
+    content: "Yes. It is free and open source under the MIT license, for personal and commercial projects alike."
+  },
+  {
+    id: "style",
+    title: "How do I change the style?",
+    content: "Everything is plain Tailwind. Pass a className to restyle the shell, or edit the copied file directly. Nothing is locked away."
+  }
+];
+var MASS = 1;
+var critical = (k) => 2 * Math.sqrt(k * MASS);
+var PANEL_CONTENT = {
+  closed: { opacity: 0, y: -6, filter: "blur(4px)" },
+  open: { opacity: 1, y: 0, filter: "blur(0px)" }
+};
+function Row({ item, open, onToggle, blur, stiffness, still, uid, headerRef }) {
+  const filterId = `${uid}-blur-${item.id}`;
+  const headerId = `${uid}-h-${item.id}`;
+  const panelId = `${uid}-p-${item.id}`;
+  const inner = React.useRef(null);
+  const panel = React.useRef(null);
+  const blurNode = React.useRef(null);
+  const placed = React.useRef(false);
+  const height = useMotionValue(0);
+  const speed = useVelocity(height);
+  useMotionValueEvent(speed, "change", (v) => {
+    const sd = blur > 0 && !still ? Math.min(blur, Math.abs(v) / 110) : 0;
+    blurNode.current?.setAttribute("stdDeviation", `0 ${sd.toFixed(2)}`);
+    if (panel.current) panel.current.style.filter = sd > 0.05 ? `url(#${filterId})` : "none";
+  });
+  React.useLayoutEffect(() => {
+    const target = open ? inner.current?.offsetHeight ?? 0 : 0;
+    if (!placed.current || still) {
+      height.set(target);
+      placed.current = true;
+      return;
+    }
+    const controls = animate(height, target, {
+      type: "spring",
+      stiffness,
+      damping: critical(stiffness) * 0.92,
+      mass: MASS
+    });
+    return () => controls.stop();
+  }, [open, still, stiffness, height]);
+  React.useEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      if (open && Math.abs(speed.get()) < 1) height.set(el.offsetHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [open, height, speed]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: false,
+      animate: open ? "open" : "closed",
+      className: cn(
+        "rounded-[18px] transition-colors duration-300",
+        open ? "bg-[#242423]/[0.045] dark:bg-white/[0.06]" : "bg-transparent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "absolute size-0", children: /* @__PURE__ */ jsx("filter", { id: filterId, x: "-5%", y: "-20%", width: "110%", height: "140%", children: /* @__PURE__ */ jsx("feGaussianBlur", { ref: blurNode, stdDeviation: "0 0" }) }) }),
+        /* @__PURE__ */ jsx("h3", { className: "m-0", children: /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            ref: headerRef,
+            type: "button",
+            id: headerId,
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            onClick: onToggle,
+            whileTap: still ? void 0 : { scale: 0.985 },
+            className: cn(
+              "group flex w-full cursor-pointer items-center justify-between gap-4 rounded-[18px] px-5 py-4 text-left text-base font-medium outline-none",
+              "focus-visible:ring-2 focus-visible:ring-zinc-400",
+              open ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+            ),
+            children: [
+              item.title,
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "relative grid size-7 shrink-0 place-items-center rounded-full transition-colors duration-300",
+                    open ? "bg-[#242423] text-white dark:bg-white dark:text-zinc-900" : "bg-[#242423]/6 text-zinc-700 group-hover:bg-[#242423]/11 dark:bg-white/10 dark:text-zinc-200"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "absolute h-[1.75px] w-3 rounded-full bg-current" }),
+                    /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "absolute h-3 w-[1.75px] rounded-full bg-current",
+                        variants: { closed: { rotate: 0, scaleY: 1 }, open: { rotate: 90, scaleY: 0 } },
+                        transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            ref: panel,
+            id: panelId,
+            role: "region",
+            "aria-labelledby": headerId,
+            "aria-hidden": !open,
+            style: { height },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                ref: inner,
+                variants: PANEL_CONTENT,
+                transition: { duration: still ? 0 : 0.4, ease: [0.22, 1, 0.36, 1], delay: open && !still ? 0.06 : 0 },
+                className: "px-5 pb-5 text-[14px] leading-relaxed text-zinc-500 dark:text-zinc-400",
+                children: item.content
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var BlurAccordion = React.forwardRef(function BlurAccordion2({ items = DEFAULT_ITEMS, multiple = false, defaultOpen, blur = 6, stiffness = 380, onOpenChange, className }, ref) {
+  const still = !!useReducedMotion();
+  const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  const [openIds, setOpenIds] = React.useState(defaultOpen ?? (items[0] ? [items[0].id] : []));
+  const headers = React.useRef([]);
+  const toggle = (id) => {
+    setOpenIds((prev) => {
+      const isOpen = prev.includes(id);
+      const next = isOpen ? prev.filter((x) => x !== id) : multiple ? [...prev, id] : [id];
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+  const focusAt = (i) => headers.current[(i + items.length) % items.length]?.focus();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onKeyDown: (e) => {
+        const at = headers.current.indexOf(document.activeElement);
+        if (at < 0) return;
+        if (e.key === "ArrowDown") e.preventDefault(), focusAt(at + 1);
+        if (e.key === "ArrowUp") e.preventDefault(), focusAt(at - 1);
+        if (e.key === "Home") e.preventDefault(), focusAt(0);
+        if (e.key === "End") e.preventDefault(), focusAt(items.length - 1);
+      },
+      className: cn(
+        "flex w-[420px] max-w-full flex-col gap-1 rounded-[26px] bg-white p-2 dark:bg-zinc-900",
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        Row,
+        {
+          item,
+          open: openIds.includes(item.id),
+          onToggle: () => toggle(item.id),
+          blur,
+          stiffness,
+          still,
+          uid,
+          headerRef: (el) => void (headers.current[i] = el)
+        },
+        item.id
+      ))
+    }
+  );
+});
+
+export {
+  BlurAccordion
+};