motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-DR4DUSNF.js

@@ -0,0 +1,265 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/prism-flow/prism-flow.tsx
+import * as React from "react";
+import { useInView, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_COLORS = [
+  "#ff2d55",
+  "#ff9f0a",
+  "#ffe08a",
+  "#7a5cff"
+];
+var VERTEX = `attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}`;
+var FRAGMENT = `precision highp float;
+uniform vec2 r;uniform float t;uniform float now;uniform vec3 c0;uniform vec3 c1;uniform vec3 c2;uniform vec3 c3;uniform vec3 bg;
+uniform float uw;uniform float us;uniform float uwarp;uniform float ui;uniform float ug;uniform float uecho;uniform vec3 m;
+float hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}
+float vn(vec2 p){vec2 i=floor(p),f=fract(p);vec2 u=f*f*(3.-2.*f);
+return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);}
+float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<4;i++){v+=a*vn(p);p*=2.02;a*=.5;}return v;}
+// Four colours across the band, edge to edge.
+vec3 pal(float k){k=clamp(k,0.,1.)*3.;return k<1.?mix(c0,c1,k):k<2.?mix(c1,c2,k-1.):mix(c2,c3,k-2.);}
+// The centre line of a band, and the light around it.
+vec3 band(vec2 p,float seed,float amp,float tilt,float lift){
+  // A slow, smooth warp: low frequency sines, so the band sweeps rather than wobbles.
+  vec2 q=p;
+  q+=uwarp*.35*vec2(sin(p.y*1.1+t*.23+seed),sin(p.x*.9-t*.19+seed*1.7));
+  q+=uwarp*.08*vec2(sin(p.y*2.1-t*.31+seed*2.),sin(p.x*1.7+t*.27));
+  float ph=q.x*.95+t*.32+seed;
+  float y=lift+tilt*q.x+amp*sin(ph)+amp*.28*sin(q.x*1.7-t*.21+seed*3.);
+  float slope=tilt+amp*.95*cos(ph)+amp*.28*1.7*cos(q.x*1.7-t*.21+seed*3.);
+  // The pointer pulls the line toward it.
+  float pull=m.z*exp(-pow((q.x-m.x)/.6,2.));
+  y=mix(y,m.y,pull*.5);
+  float d=(q.y-y)/sqrt(1.+slope*slope);
+  float w=.052*uw;
+  vec3 col=vec3(0.);
+  // A spectral fan: each colour is its own soft band, offset across the line.
+  for(int i=0;i<7;i++){
+    float k=float(i)/6.;
+    float o=(k-.5)*.2*us*(.6+.4*uw);
+    float g=exp(-pow((d-o)/(w*(1.+abs(k-.5)*1.4)),2.));
+    col+=pal(k)*g*.5;
+  }
+  col+=vec3(1.,.98,.95)*exp(-pow(d/(w*.6),2.))*.85;
+  col+=pal(.5+.35*sign(d))*exp(-pow(d/(w*5.),2.))*.1;
+  return col;
+}
+void main(){
+  vec2 uv=gl_FragCoord.xy/r;float a=r.x/r.y;
+  vec2 p=vec2((uv.x-.5)*a,uv.y-.5)*2.;
+  vec3 col=band(p,0.,.55,-.32,-.05);
+  // A fainter echo, off toward a corner.
+  if(uecho>.5)col+=band(p,2.6,.35,.4,-1.15)*.38;
+  col*=ui;
+  col=1.-exp(-col*1.25);
+  vec3 o=bg+col*(1.-bg*.6);
+  o+=(hash(gl_FragCoord.xy+fract(now*7.3)*vec2(91.,37.))-.5)*.06*ug;
+  float v=smoothstep(1.6,.35,length(vec2((uv.x-.5)*a,uv.y-.5)));
+  o=mix(bg,o,.55+.45*v);
+  gl_FragColor=vec4(o,1.);
+}`;
+var rgb = (hex) => {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, "$&$&") : h, 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+};
+var PrismFlow = React.forwardRef(
+  function PrismFlow2({
+    colors = DEFAULT_COLORS,
+    background = "#050507",
+    speed = 2.7,
+    width = 2.75,
+    spread = 1.45,
+    warp = 1,
+    intensity = 2.25,
+    grain = 1.75,
+    echo = true,
+    interactive = true,
+    children,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const canvas = React.useRef(null);
+    const visible = useInView(root, { amount: 0.05 });
+    const params = React.useRef({
+      colors,
+      background,
+      speed,
+      width,
+      spread,
+      warp,
+      intensity,
+      grain,
+      echo,
+      interactive
+    });
+    params.current = {
+      colors,
+      background,
+      speed,
+      width,
+      spread,
+      warp,
+      intensity,
+      grain,
+      echo,
+      interactive
+    };
+    const pointer = React.useRef({
+      x: 0,
+      y: 0,
+      tx: 0,
+      ty: 0,
+      on: 0,
+      target: 0
+    });
+    const clock = React.useRef({ t: 4, now: 0 });
+    React.useEffect(() => {
+      const el = canvas.current;
+      if (!el) return;
+      const gl = el.getContext("webgl", {
+        antialias: false,
+        premultipliedAlpha: false
+      });
+      if (!gl) {
+        const c = params.current.colors;
+        el.style.background = `radial-gradient(60% 30% at 40% 55%, #fff8, transparent 60%), linear-gradient(160deg, transparent 30%, ${c[0]} 42%, ${c[1]} 48%, ${c[2]} 54%, ${c[3]} 60%, transparent 72%), ${params.current.background}`;
+        return;
+      }
+      const compile = (type, src) => {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        return s;
+      };
+      const prog = gl.createProgram();
+      gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERTEX));
+      gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAGMENT));
+      gl.linkProgram(prog);
+      gl.useProgram(prog);
+      gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+        gl.STATIC_DRAW
+      );
+      const loc = gl.getAttribLocation(prog, "p");
+      gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+      const U = Object.fromEntries(
+        [
+          "r",
+          "t",
+          "now",
+          "c0",
+          "c1",
+          "c2",
+          "c3",
+          "bg",
+          "uw",
+          "us",
+          "uwarp",
+          "ui",
+          "ug",
+          "uecho",
+          "m"
+        ].map((n) => [n, gl.getUniformLocation(prog, n)])
+      );
+      const draw = () => {
+        const dpr = Math.min(1.25, window.devicePixelRatio || 1);
+        const w = Math.max(1, Math.round(el.clientWidth * dpr));
+        const h = Math.max(1, Math.round(el.clientHeight * dpr));
+        if (el.width !== w || el.height !== h) {
+          el.width = w;
+          el.height = h;
+        }
+        const p = params.current;
+        const ptr = pointer.current;
+        gl.viewport(0, 0, w, h);
+        gl.uniform2f(U.r, w, h);
+        gl.uniform1f(U.t, clock.current.t);
+        gl.uniform1f(U.now, clock.current.now);
+        gl.uniform3fv(U.c0, rgb(p.colors[0]));
+        gl.uniform3fv(U.c1, rgb(p.colors[1]));
+        gl.uniform3fv(U.c2, rgb(p.colors[2]));
+        gl.uniform3fv(U.c3, rgb(p.colors[3]));
+        gl.uniform3fv(U.bg, rgb(p.background));
+        gl.uniform1f(U.uw, p.width);
+        gl.uniform1f(U.us, p.spread);
+        gl.uniform1f(U.uwarp, p.warp);
+        gl.uniform1f(U.ui, p.intensity);
+        gl.uniform1f(U.ug, p.grain);
+        gl.uniform1f(U.uecho, p.echo ? 1 : 0);
+        gl.uniform3f(U.m, ptr.x, ptr.y, ptr.on);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      };
+      if (still || !visible) {
+        draw();
+        const ro = new ResizeObserver(draw);
+        ro.observe(el);
+        return () => ro.disconnect();
+      }
+      let raf = 0;
+      let last = performance.now();
+      const frame = (ms) => {
+        raf = requestAnimationFrame(frame);
+        if (document.hidden) return;
+        const dt = Math.min(0.05, (ms - last) / 1e3);
+        last = ms;
+        clock.current.now += dt;
+        clock.current.t += dt * params.current.speed;
+        const ptr = pointer.current;
+        const k = 1 - Math.exp(-dt * 3);
+        ptr.x += (ptr.tx - ptr.x) * k;
+        ptr.y += (ptr.ty - ptr.y) * k;
+        ptr.on += ((params.current.interactive ? ptr.target : 0) - ptr.on) * (1 - Math.exp(-dt * 2.5));
+        draw();
+      };
+      raf = requestAnimationFrame(frame);
+      return () => cancelAnimationFrame(raf);
+    }, [still, visible]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        onPointerMove: (e) => {
+          const r = e.currentTarget.getBoundingClientRect();
+          const a = r.width / r.height;
+          pointer.current.tx = ((e.clientX - r.left) / r.width - 0.5) * a * 2;
+          pointer.current.ty = (0.5 - (e.clientY - r.top) / r.height) * 2;
+          pointer.current.target = 1;
+        },
+        onPointerLeave: () => {
+          pointer.current.target = 0;
+        },
+        className: cn(
+          "relative isolate min-h-[320px] w-full overflow-hidden",
+          className
+        ),
+        style: { backgroundColor: background },
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvas,
+              "aria-hidden": true,
+              className: "absolute inset-0 -z-10 size-full"
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export {
+  PrismFlow
+};

package/dist/chunk-EDPCK6VU.js

@@ -0,0 +1,419 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/range-chart/range-chart.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_DATA = (() => {
+  let seed = 7;
+  const rand = () => ((seed = seed * 16807 % 2147483647) - 1) / 2147483646;
+  const end = new Date(2026, 8, 17);
+  return Array.from({ length: 30 }, (_, i) => {
+    const date = new Date(end);
+    date.setDate(end.getDate() - (29 - i));
+    const low = Math.round(46 + rand() * 22);
+    const high = Math.round(108 + rand() * 80);
+    const ranges = [[low, high]];
+    if (rand() > 0.72) {
+      const above = rand() > 0.5;
+      const v = above ? Math.min(196, high + 14 + Math.round(rand() * 14)) : Math.max(38, low - 16 - Math.round(rand() * 6));
+      ranges.push([v, v + 8]);
+    }
+    return { date, ranges };
+  });
+})();
+var GLIDE = [0.22, 1, 0.36, 1];
+var GROW = { type: "spring", stiffness: 190, damping: 21 };
+var PILL = { type: "spring", stiffness: 480, damping: 38 };
+var ROLL = {
+  type: "spring",
+  stiffness: 280,
+  damping: 26,
+  mass: 0.8
+};
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var CHART_H = 200;
+var LABEL_H = 24;
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.6em] overflow-hidden", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Rolling({ value, still }) {
+  const chars = Array.from(String(Math.round(value)));
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => /* @__PURE__ */ jsx(Digit, { digit: Number(ch), still }, chars.length - i)) });
+}
+var weekday = new Intl.DateTimeFormat("en", { weekday: "short" });
+var longDay = new Intl.DateTimeFormat("en", {
+  weekday: "short",
+  day: "numeric",
+  month: "short"
+});
+var shortDate = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  month: "short"
+});
+var RangeChart = React.forwardRef(
+  function RangeChart2({
+    title = "Heart rate",
+    unit = "bpm",
+    data = DEFAULT_DATA,
+    spans = [7, 15, 30],
+    defaultSpan = 7,
+    average,
+    color = "#e5484d",
+    onFullStats,
+    className
+  }, ref) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const still = !!useReducedMotion();
+    const inView = useInView(root, { once: true, amount: 0.3 });
+    const shown = inView || still;
+    const id = React.useId();
+    const [span, setSpan] = React.useState(
+      spans.includes(defaultSpan) ? defaultSpan : spans[0]
+    );
+    const [hover, setHover] = React.useState(null);
+    const days = data.slice(-span);
+    const n = days.length;
+    const all = days.flatMap((d) => d.ranges.flat());
+    const lo = Math.min(...all);
+    const hi = Math.max(...all);
+    const avg = Math.round(
+      average ?? all.reduce((s, v) => s + v, 0) / Math.max(1, all.length)
+    );
+    const floor = Math.max(0, lo - 12);
+    const ceil = hi + 12;
+    const y = (v) => (v - floor) / (ceil - floor) * CHART_H;
+    const avgY = y(avg);
+    const day = hover === null ? null : days[hover];
+    const vals = day ? day.ranges.flat() : all;
+    const showLo = Math.min(...vals);
+    const showHi = Math.max(...vals);
+    const showAvg = day ? Math.round(vals.reduce((s, v) => s + v, 0) / vals.length) : avg;
+    const period = `${shortDate.format(days[0].date)} to ${shortDate.format(days[n - 1].date)}`;
+    const barW = n <= 7 ? 22 : n <= 15 ? 12 : 6;
+    const label = (d, i) => n <= 7 ? weekday.format(d).slice(0, 2) : n <= 15 ? String(d.getDate()) : (n - 1 - i) % 5 === 0 ? String(d.getDate()) : "";
+    const move = (to) => {
+      const next = (to + n) % n;
+      setHover(next);
+      root.current?.querySelectorAll("[data-day]")[next]?.focus();
+    };
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 20 },
+        animate: shown ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "w-[380px] 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 justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "tablist",
+                "aria-label": "Days shown",
+                className: "flex rounded-full bg-[#242423]/[0.06] p-0.5 dark:bg-white/[0.08]",
+                children: spans.map((s) => {
+                  const on = s === span;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "tab",
+                      "aria-selected": on,
+                      onClick: () => {
+                        setHover(null);
+                        setSpan(s);
+                      },
+                      className: cn(
+                        "relative h-7 cursor-pointer rounded-full px-2.5 text-xs font-medium tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400",
+                        on ? "text-white dark:text-[#242423]" : "text-zinc-500 hover:text-[#242423] dark:text-zinc-400 dark:hover:text-zinc-100"
+                      ),
+                      children: [
+                        on && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            layoutId: `${id}-span`,
+                            className: "absolute inset-0 rounded-full bg-[#242423] dark:bg-zinc-100",
+                            transition: still ? { duration: 0 } : PILL
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                          s,
+                          "D"
+                        ] })
+                      ]
+                    },
+                    s
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "p",
+            {
+              className: "mt-5 flex items-end gap-2 font-semibold tracking-tight",
+              "aria-live": "polite",
+              "aria-label": `${showLo} to ${showHi} ${unit}, ${day ? longDay.format(day.date) : period}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[48px] leading-none", children: /* @__PURE__ */ jsx(Rolling, { value: showLo, still }) }),
+                /* @__PURE__ */ jsx("span", { className: "pb-1 text-xl font-medium text-zinc-400", children: "to" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[48px] leading-none", children: /* @__PURE__ */ jsx(Rolling, { value: showHi, still }) }),
+                /* @__PURE__ */ jsx("span", { className: "pb-1 text-xl font-medium text-zinc-400", children: unit })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative mt-2 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.25, ease: GLIDE },
+              children: day ? longDay.format(day.date) : `${period}, last ${span} days`
+            },
+            day ? day.date.toISOString() : `span-${span}`
+          ) }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative mt-5",
+              onPointerLeave: () => setHover(null),
+              onKeyDown: (e) => {
+                if (e.key === "ArrowRight")
+                  e.preventDefault(), move((hover ?? -1) + 1);
+                else if (e.key === "ArrowLeft")
+                  e.preventDefault(), move((hover ?? n) - 1);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "relative grid gap-x-0.5",
+                    style: { gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` },
+                    children: days.map((d, i) => {
+                      const on = hover === i;
+                      const dim = hover !== null && !on;
+                      const flat = d.ranges.flat();
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          "data-day": true,
+                          "aria-label": `${longDay.format(d.date)}: ${Math.min(...flat)} to ${Math.max(...flat)} ${unit}`,
+                          onPointerEnter: () => setHover(i),
+                          onFocus: () => setHover(i),
+                          className: "relative flex cursor-pointer flex-col items-center outline-none",
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "relative w-full", style: { height: CHART_H }, children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "absolute inset-y-0 left-1/2 -translate-x-1/2 rounded-full transition-colors duration-300",
+                                    on ? "bg-[#242423]/[0.07] dark:bg-white/[0.1]" : "bg-[#242423]/[0.03] dark:bg-white/[0.04]"
+                                  ),
+                                  style: { width: barW + 8 }
+                                }
+                              ),
+                              d.ranges.map(([a, b], k) => {
+                                const bottom = y(a);
+                                const top = y(b);
+                                const tall = Math.max(barW, top - bottom);
+                                const bubble = tall === barW;
+                                return /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    className: "absolute left-1/2 rounded-full",
+                                    style: {
+                                      width: barW,
+                                      marginLeft: -barW / 2,
+                                      bottom: bubble ? (bottom + top) / 2 - barW / 2 : bottom,
+                                      height: tall,
+                                      background: `linear-gradient(to bottom, ${color}, ${color}b3)`,
+                                      // Grow out from the average line.
+                                      originY: Math.min(
+                                        1,
+                                        Math.max(0, (top - avgY) / tall)
+                                      )
+                                    },
+                                    initial: still ? false : { scaleY: 0, opacity: 0 },
+                                    animate: shown ? {
+                                      scaleY: 1,
+                                      opacity: dim ? 0.28 : 1,
+                                      scaleX: on && !still ? 1.18 : 1
+                                    } : void 0,
+                                    transition: {
+                                      scaleY: {
+                                        ...GROW,
+                                        delay: still ? 0 : 0.2 + i * (0.42 / n) + k * 0.04
+                                      },
+                                      opacity: { duration: 0.25 },
+                                      scaleX: {
+                                        type: "spring",
+                                        stiffness: 500,
+                                        damping: 26
+                                      }
+                                    },
+                                    children: /* @__PURE__ */ jsx(AnimatePresence, { children: on && tall > barW + 12 && barW >= 10 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                      /* @__PURE__ */ jsx(
+                                        motion.span,
+                                        {
+                                          className: "absolute left-1/2 top-1 size-1.5 -translate-x-1/2 rounded-full bg-white",
+                                          initial: { scale: 0 },
+                                          animate: { scale: 1 },
+                                          exit: { scale: 0 },
+                                          transition: {
+                                            type: "spring",
+                                            stiffness: 500,
+                                            damping: 22
+                                          }
+                                        },
+                                        "top"
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        motion.span,
+                                        {
+                                          className: "absolute bottom-1 left-1/2 size-1.5 -translate-x-1/2 rounded-full bg-white",
+                                          initial: { scale: 0 },
+                                          animate: { scale: 1 },
+                                          exit: { scale: 0 },
+                                          transition: {
+                                            type: "spring",
+                                            stiffness: 500,
+                                            damping: 22,
+                                            delay: 0.04
+                                          }
+                                        },
+                                        "bottom"
+                                      )
+                                    ] }) })
+                                  },
+                                  k
+                                );
+                              })
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "mt-2 h-4 text-xs leading-4 tabular-nums transition-colors",
+                                  on ? "font-medium text-[#242423] dark:text-zinc-100" : "text-zinc-400"
+                                ),
+                                children: on && n > 7 ? d.date.getDate() : label(d.date, i)
+                              }
+                            )
+                          ]
+                        },
+                        `${span}-${i}`
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-x-0 h-px border-t border-dashed border-[#242423]/25 dark:border-white/25",
+                    style: { bottom: avgY + LABEL_H, originX: 0 },
+                    initial: still ? false : { scaleX: 0 },
+                    animate: shown ? { scaleX: 1 } : void 0,
+                    transition: { duration: 0.8, delay: 0.15, ease: GLIDE }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    className: "pointer-events-none absolute -right-2 inline-flex h-6 items-center rounded-full bg-white px-2 text-xs font-medium tabular-nums text-[#242423] ring-1 ring-[#242423]/15 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-white/20",
+                    style: { bottom: avgY + LABEL_H - 12 },
+                    initial: still ? false : { opacity: 0, x: 10 },
+                    animate: shown ? { opacity: 1, x: 0 } : void 0,
+                    transition: { duration: 0.5, delay: 0.5, ease: GLIDE },
+                    children: [
+                      "Avg ",
+                      avg
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-5 grid grid-cols-3 gap-2", children: [
+            { label: "Lowest", value: showLo },
+            { label: "Average", value: showAvg },
+            { label: "Peak", value: showHi }
+          ].map((t) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "rounded-2xl bg-[#242423]/[0.04] px-3 py-2.5 dark:bg-white/[0.05]",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: t.label }),
+                /* @__PURE__ */ jsxs("p", { className: "mt-1 flex items-center text-base font-semibold", children: [
+                  /* @__PURE__ */ jsx(Rolling, { value: t.value, still }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs font-normal text-zinc-400", children: unit })
+                ] })
+              ]
+            },
+            t.label
+          )) }),
+          /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              onClick: onFullStats,
+              whileTap: still ? void 0 : { scale: 0.98 },
+              className: "group/stats mt-3 flex h-10 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-[#242423]/[0.06] text-sm font-medium outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:hover:bg-white/[0.12]",
+              children: [
+                "Full stats",
+                /* @__PURE__ */ jsxs("span", { className: "relative size-4 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx(
+                    ArrowRight,
+                    {
+                      "aria-hidden": true,
+                      className: "absolute inset-0 size-4 transition-transform duration-300 ease-out group-hover/stats:translate-x-5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ArrowRight,
+                    {
+                      "aria-hidden": true,
+                      className: "absolute inset-0 size-4 -translate-x-5 transition-transform duration-300 ease-out group-hover/stats:translate-x-0"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  RangeChart
+};