motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-VT2FNWQF.js

@@ -0,0 +1,240 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/column-card/column-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_COLUMNS = [
+  { label: "Out of range", value: 19 },
+  { label: "In range", value: 148 }
+];
+var PALETTE = ["#8b7cf6", "#242423", "#3b9eea", "#269a5a"];
+var GLIDE = [0.22, 1, 0.36, 1];
+var COUNT = [0.5, 1, 0.89, 1];
+var GROW = { type: "spring", stiffness: 120, damping: 16, mass: 1 };
+var STAGGER = 0.14;
+function Count({
+  to,
+  delay,
+  run,
+  still
+}) {
+  const v = useMotionValue(still ? to : 0);
+  const text = useTransform(v, (n) => Math.round(n).toLocaleString());
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) return void v.set(to);
+    const c = animate(v, to, { duration: 1.1, delay, ease: COUNT });
+    return () => c.stop();
+  }, [run, still, to, delay, v]);
+  return /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: text });
+}
+var ColumnCard = React.forwardRef(
+  function ColumnCard2({
+    title = "Data that puts your health in motion",
+    description = "You have seen the specialists and done the tests. Now every result finally lines up in one place.",
+    columns = DEFAULT_COLUMNS,
+    columnHeight = 220,
+    eyebrow = "Last 30 days",
+    unit = "readings",
+    className
+  }, ref) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const still = !!useReducedMotion();
+    const inView = useInView(root, { once: true, amount: 0.35 });
+    const shown = inView || still;
+    const [hover, setHover] = React.useState(null);
+    const top = Math.max(1, ...columns.map((c) => c.value));
+    const sum = columns.reduce((s, c) => s + c.value, 0);
+    const total = sum || 1;
+    const focus = hover === null ? null : columns[hover];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        className: cn(
+          "relative flex w-[340px] max-w-full flex-col overflow-hidden rounded-3xl bg-white 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(
+            motion.div,
+            {
+              className: "px-6 pt-6",
+              initial: still ? false : { opacity: 0, y: 12 },
+              animate: shown ? { opacity: 1, y: 0 } : void 0,
+              transition: { duration: 0.6, ease: GLIDE },
+              children: [
+                eyebrow && /* @__PURE__ */ jsxs("span", { className: "mb-5 inline-flex h-7 items-center gap-2 rounded-full bg-[#242423]/[0.06] px-3 text-xs font-medium text-zinc-500 dark:bg-white/[0.06] dark:text-zinc-400", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "relative flex size-1.5", children: [
+                    !still && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 animate-ping rounded-full bg-[#269a5a]/60" }),
+                    /* @__PURE__ */ jsx("span", { className: "relative size-1.5 rounded-full bg-[#269a5a]" })
+                  ] }),
+                  eyebrow
+                ] }),
+                /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold leading-tight tracking-tight", children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: "mt-3 text-base leading-relaxed text-zinc-500 dark:text-zinc-400", children: description })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative mx-3 mt-8 overflow-hidden rounded-[20px] bg-[#242423]/[0.04] dark:bg-white/[0.04]", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-x-4 bottom-4",
+                style: { height: columnHeight },
+                children: [0.25, 0.5, 0.75, 1].map((f) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-x-0 border-t border-dashed border-[#242423]/10 dark:border-white/10",
+                    style: { bottom: `${f * 100}%` }
+                  },
+                  f
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "relative flex items-end gap-3 p-4",
+                style: { height: columnHeight + 40 + 32 },
+                onPointerLeave: () => setHover(null),
+                children: columns.map((c, i) => {
+                  const color = c.color ?? PALETTE[i % PALETTE.length];
+                  const h = Math.max(48, c.value / top * columnHeight);
+                  const delay = 0.15 + i * STAGGER;
+                  const on = hover === i;
+                  const dim = hover !== null && !on;
+                  return /* @__PURE__ */ jsxs(
+                    motion.button,
+                    {
+                      type: "button",
+                      "aria-label": `${c.label}, ${c.value}, ${Math.round(c.value / total * 100)} percent`,
+                      onPointerEnter: () => setHover(i),
+                      onFocus: () => setHover(i),
+                      onBlur: () => setHover((x) => x === i ? null : x),
+                      whileTap: still ? void 0 : { scale: 0.97 },
+                      animate: { opacity: dim ? 0.4 : 1, y: on && !still ? -6 : 0 },
+                      transition: { type: "spring", stiffness: 380, damping: 28 },
+                      className: "flex min-w-0 flex-1 cursor-pointer flex-col justify-end rounded-2xl text-left outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4 dark:focus-visible:ring-offset-zinc-900",
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "relative h-10", children: /* @__PURE__ */ jsx(AnimatePresence, { children: on && /* @__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: 4, scale: 0.95 },
+                            transition: {
+                              type: "spring",
+                              stiffness: 420,
+                              damping: 26
+                            },
+                            className: "absolute bottom-2 left-1/2 inline-flex h-7 -translate-x-1/2 items-center whitespace-nowrap rounded-full bg-[#242423] px-3 text-xs font-medium tabular-nums text-white shadow-[0_6px_16px_-8px_rgba(0,0,0,0.5)] dark:bg-zinc-100 dark:text-[#242423]",
+                            children: [
+                              Math.round(c.value / total * 100),
+                              "% of all"
+                            ]
+                          }
+                        ) }) }),
+                        /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            "aria-hidden": true,
+                            className: "relative block w-full overflow-hidden rounded-2xl",
+                            style: { backgroundColor: color },
+                            initial: still ? false : { height: 0 },
+                            animate: shown ? { height: h } : void 0,
+                            transition: still ? { duration: 0 } : { ...GROW, delay },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-gradient-to-b from-white/15 to-transparent" }),
+                              /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  className: "absolute left-3.5 top-3 text-xl font-medium leading-none tracking-tight text-white",
+                                  initial: still ? false : { opacity: 0 },
+                                  animate: shown ? { opacity: 1 } : void 0,
+                                  transition: { duration: 0.3, delay: delay + 0.1 },
+                                  children: /* @__PURE__ */ jsx(
+                                    Count,
+                                    {
+                                      to: c.value,
+                                      delay,
+                                      run: shown,
+                                      still
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(AnimatePresence, { children: on && !still && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  className: "absolute inset-x-0 h-1/3 bg-gradient-to-t from-transparent via-white/20 to-transparent",
+                                  initial: { top: "110%" },
+                                  animate: { top: "-40%" },
+                                  exit: { opacity: 0 },
+                                  transition: { duration: 0.8, ease: GLIDE }
+                                },
+                                "sheen"
+                              ) })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    c.label
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-6 pb-5 pt-4 text-sm text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1", children: columns.map((c, i) => /* @__PURE__ */ jsxs(
+              motion.span,
+              {
+                className: "inline-flex items-center gap-2",
+                animate: { opacity: hover !== null && hover !== i ? 0.4 : 1 },
+                transition: { duration: 0.25, ease: GLIDE },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-2 rounded-full",
+                      style: {
+                        backgroundColor: c.color ?? PALETTE[i % PALETTE.length]
+                      }
+                    }
+                  ),
+                  c.label
+                ]
+              },
+              c.label
+            )) }),
+            /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-[#242423] dark:text-zinc-100", children: /* @__PURE__ */ jsx(Count, { to: sum, delay: 0.15, run: shown, still }) }),
+              " ",
+              unit
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: focus ? `${focus.label}, ${focus.value}` : "" })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ColumnCard
+};