50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2d46,// Hairline UI · activity-rings · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * ACTIVITY RINGS: three daily goals as concentric rings * * arrive the first time it's on screen the rings sweep * round from the top, outer first, and every figure * rolls up from zero * day the week sits underneath as seven small rings: * pick a day and the big rings sweep to it, the * day's name morphs and every figure rolls; days * still to come are quiet and can't be picked * past a goal beaten carries on round for a second lap, * with a dot marking where it's got to * focus point at a ring or its row and the other two step * back * * The legend is real text (figure, goal and share), the week is * a radio group, and the rings themselves are decoration. * ───────────────────────────────────────────────────────── */ export interface RingGoal { id: string; label: string; /** The day's target. */ goal: number; format?: Intl.NumberFormatOptions; } export interface RingDay { key: string; /** Under the small ring, e.g. "F". */ label: string; /** In the title, e.g. "Friday 9 October". */ title?: string; /** One per goal; null for a day still to come. */ values: (number | null)[]; } export interface ActivityRingsProps extends Omit, "onChange"> { /** Up to three, outermost first. */ goals: RingGoal[]; /** The week, oldest first. */ days: RingDay[]; value?: string; defaultValue?: string; onValueChange?: (key: string) => void; locales?: string | string[]; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const COLORS = ["var(--chart-1, var(--primary))", "var(--chart-2, #e8743b)", "var(--chart-3, #1baf7a)"]; const BIG = { size: 132, stroke: 12, gap: 3 }; const SMALL = { size: 28, stroke: 3, gap: 1 }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); const radius = (g: typeof BIG, i: number) => g.size / 2 - g.stroke / 2 - i * (g.stroke + g.gap); /** One ring: its track, the first lap, and a second lap (with a dot at its lead) when the goal is beaten. */ function Ring({ geo, i, share, color, dim, reduced, delay = 0, tip = true }: { geo: typeof BIG; i: number; share: number; color: string; dim: boolean; reduced: boolean; delay?: number; tip?: boolean }) { const r = radius(geo, i); const c = 2 * Math.PI * r; const lap = Math.min(1, Math.max(0, share)); const over = Math.min(1, Math.max(0, share - 1)); const centre = geo.size / 2; const angle = over * 2 * Math.PI - Math.PI / 2; const sweep = reduced ? "none" : `stroke-dashoffset 1100ms ${EASE} ${delay}ms, opacity 300ms ${EASE}`; return ( 0 ? 1 : 0, transition: sweep }} /> {tip && ( <> 0 ? 1 : 0, transition: sweep }} /> {/* Where the second lap has got to: a dot ringed in the surface colour, so it reads over the first lap. */} 0.02 ? 1 : 0, transition: reduced ? "none" : `opacity 300ms ${EASE} ${over > 0.02 ? 900 + delay : 0}ms` }} /> )} ); } export function ActivityRings({ goals: allGoals, days, value, defaultValue, onValueChange, locales, className = "", ...props }: ActivityRingsProps) { const reduced = useReducedMotion(); const goals = allGoals.slice(0, 3); const lastDay = Math.max(0, days.reduce((last, d, i) => (d.values.some((v) => v !== null) ? i : last), 0)); const [own, setOwn] = React.useState(defaultValue ?? days[lastDay]?.key); const dayKey = value ?? own; const index = Math.max(0, days.findIndex((d) => d.key === dayKey)); const day = days[index]; const [visible, setVisible] = React.useState(false); const [focus, setFocus] = React.useState(null); const rootRef = React.useRef(null); const dayRefs = React.useRef<(HTMLButtonElement | null)[]>([]); React.useEffect(() => { const el = rootRef.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { rootMargin: "0px 0px -10% 0px" }, ); observer.observe(el); return () => observer.disconnect(); }, []); const pick = (i: number, moveFocus = false) => { const target = days[i]; if (!target || i > lastDay) return; if (value === undefined) setOwn(target.key); onValueChange?.(target.key); if (moveFocus) dayRefs.current[i]?.focus(); }; const share = (g: number, d = day) => (d && d.values[g] != null ? (d.values[g] as number) / (goals[g].goal || 1) : 0); const fmt = (n: number, g: RingGoal) => new Intl.NumberFormat(locales, g.format).format(n); return (

{day?.title ?? day?.label ?? ""}

setFocus(null)}>

setFocus(i)} className="py-1.5 transition-opacity duration-300 first:pt-0 last:pb-0 @md:py-2" style={{ opacity: focus !== null && focus !== i ? 0.45 : 1 }} > / {fmt(g.goal, g)} = 1 ? "font-medium text-foreground" : "text-muted-foreground"}`}>

{/* The week: seven small rings; pick one to see that day. */}

{ const moves: Record = { ArrowLeft: index - 1, ArrowRight: index + 1, Home: 0, End: lastDay }; if (!(e.key in moves)) return; e.preventDefault(); pick(Math.min(lastDay, Math.max(0, moves[e.key])), true); }} > {days.map((d, i) => { const selected = i === index; const future = i > lastDay; return ( ); })}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/activity-rings.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]