63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T3b33,"use client"; import { useEffect, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent, PointerEvent, ReactNode } from "react"; const DEFAULT_OPTIONS = ["Day", "Week", "Month"]; const SAFE_COLOR = /^(#[0-9a-f]{3,8}|[a-z]{3,20})$/i; // Springs, [stiffness, damping]. SETTLE has ~5% overshoot, FOLLOW trails a finger without wobble. const SETTLE: [number, number] = [420, 28]; const FOLLOW: [number, number] = [900, 52]; const PRESS: [number, number] = [600, 34]; // How far the thumb may poke past the inner edge of the track (the track has 4px padding). const EDGE = 3; const SIZES = { sm: { h: "30px", fs: "13px", px: "12px" }, md: { h: "36px", fs: "14px", px: "16px" }, lg: { h: "44px", fs: "16px", px: "20px" }, } as const; const TRACK = { light: { bg: "#f5f5f5", border: "#e5e5e5", inset: "inset 0 1px 2px rgba(0,0,0,0.06)", text: "#737373", hover: "#262626" }, dark: { bg: "rgba(255,255,255,0.06)", border: "rgba(255,255,255,0.1)", inset: "inset 0 1px 3px rgba(0,0,0,0.5)", text: "rgba(255,255,255,0.55)", hover: "#ffffff" }, } as const; type Engine = { go: (i: number, snap: boolean) => void; down: (px: number) => boolean; move: (px: number) => boolean; up: (commit: boolean) => number; }; /** * An iOS-style segmented control. One thumb rides the track on a spring with a touch of overshoot, * stretches and flattens with its own velocity, grows slightly under your finger, and can be * dragged: release it and it settles on the nearest segment (a flick carries it further). * Labels flip colour exactly where the thumb passes. Radiogroup semantics, roving tabindex, * arrow keys / Home / End. Hand-written springs, no dependencies. */ export function SegmentedControl({ options = DEFAULT_OPTIONS, defaultIndex = 0, onChange, icons, size = "md", shape = "pill", variant = "accent", accent = "#ef4444", accentText = "#ffffff", tone = "light", disabled = false, className = "", ariaLabel = "Segmented control", }: { options?: string[]; defaultIndex?: number; onChange?: (index: number) => void; icons?: ReactNode[]; size?: "sm" | "md" | "lg"; shape?: "pill" | "rounded"; variant?: "accent" | "neutral"; accent?: string; accentText?: string; tone?: "light" | "dark"; disabled?: boolean; className?: string; ariaLabel?: string; }) { const count = options.length; const [picked, setPicked] = useState(defaultIndex); const active = Math.max(0, Math.min(picked, count - 1)); const dark = tone === "dark"; const t = TRACK[dark ? "dark" : "light"]; const dims = SIZES[size === "sm" || size === "lg" ? size : "md"]; const pill = shape === "pill"; const accentColor = SAFE_COLOR.test(accent) ? accent : "#ef4444"; const accentInk = SAFE_COLOR.test(accentText) ? accentText : "#ffffff"; const neutral = variant === "neutral"; const thumbInk = neutral ? (dark ? "#0a0a0a" : "#171717") : accentInk; const thumbBg = neutral ? (dark ? "#f4f4f5" : "#ffffff") : accentColor; const thumbShadow = neutral ? dark ? "0 1px 2px rgba(0,0,0,0.5), 0 8px 18px -6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.9)" : "0 0 0 0.5px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12), 0 6px 14px -4px rgba(0,0,0,0.16)" : "0 6px 16px -6px color-mix(in srgb, " + accentColor + " 70%, transparent), 0 1px 2px color-mix(in srgb, " + accentColor + " 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.12)"; const thumbGloss = neutral ? "none" : "linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 60%)"; const round = pill ? "rounded-full" : "rounded-lg"; const roundFocus = pill ? "focus-visible:!rounded-full" : "focus-visible:!rounded-lg"; const innerRef = useRef(null); const thumbRef = useRef(null); const overRef = useRef(null); const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); const engine = useRef(null); const activeRef = useRef(active); const onChangeRef = useRef(onChange); const draggedRef = useRef(false); useEffect(() => { activeRef.current = active; onChangeRef.current = onChange; }); // The engine: one rAF loop that sleeps at rest. Everything it touches is written straight to the DOM. useEffect(() => { const inner = innerRef.current; const thumb = thumbRef.current; const over = overRef.current; if (!inner || !thumb || !over || count === 0) return; let centers: number[] = []; let segW = 0; let top = 0; let h = 0; let boxW = 0; let boxH = 0; let x = 0; let v = 0; let tx = 0; let k = SETTLE[0]; let c = SETTLE[1]; let p = 0; let pv = 0; let pt = 0; let armed = false; let dragging = false; let startPx = 0; let grab = 0; let near = -1; let shown = false; let raf = 0; let last = 0; const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; const measure = () => { const list = btnRefs.current.slice(0, count); if (list.length < count || list.some((b) => !b)) return false; centers = list.map((b) => (b ? b.offsetLeft + b.offsetWidth / 2 : 0)); const first = list[0]; if (!first) return false; segW = first.offsetWidth; top = first.offsetTop; h = first.offsetHeight; boxW = inner.offsetWidth; boxH = inner.offsetHeight; return segW > 0; }; const nearest = (px: number) => { let best = 0; let bd = Infinity; centers.forEach((cx, i) => { const d = Math.abs(cx - px); if (d < bd) { bd = d; best = i; } }); return best; }; const write = () => { const s = reduced() ? 0 : Math.min(1, Math.abs(v) / 1800); const grow = 1 + 0.05 * p; const w = segW * (1 + 0.16 * s) * grow; const ht = h * (1 - 0.09 * s) * grow; const left = Math.max(-EDGE, Math.min(boxW + EDGE - w, x - w / 2)); const y = top + (h - ht) / 2; const r = pill ? ht / 2 : Math.min(8, ht / 2); thumb.style.transform = "translate3d(" + left.toFixed(2) + "px," + y.toFixed(2) + "px,0)"; thumb.style.width = w.toFixed(2) + "px"; thumb.style.height = ht.toFixed(2) + "px"; thumb.style.borderRadius = r.toFixed(2) + "px"; over.style.clipPath = "inset(" + y.toFixed(2) + "px " + (boxW - left - w).toFixed(2) + "px " + (boxH - y - ht).toFixed(2) + "px " + left.toFixed(2) + "px round " + r.toFixed(2) + "px)"; if (!shown) { shown = true; thumb.style.visibility = "visible"; } }; const tick = (now: number) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; const n = Math.max(1, Math.ceil(dt / 0.004)); const sub = dt / n; for (let s = 0; s < n; s++) { v += (-k * (x - tx) - c * v) * sub; x += v * sub; pv += (-PRESS[0] * (p - pt) - PRESS[1] * pv) * sub; p += pv * sub; } const rest = !dragging && Math.abs(x - tx) < 0.02 && Math.abs(v) < 0.05 && Math.abs(p - pt) < 0.001 && Math.abs(pv) < 0.01; if (rest) { x = tx; v = 0; p = pt; pv = 0; write(); raf = 0; return; } write(); raf = requestAnimationFrame(tick); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const settleTo = (i: number) => { tx = centers[i] ?? tx; k = SETTLE[0]; c = SETTLE[1]; wake(); }; engine.current = { go(i, snap) { if (!measure() || dragging) return; tx = centers[i] ?? tx; if (snap || !shown || reduced()) { x = tx; v = 0; write(); return; } settleTo(i); }, down(px) { if (!measure() || Math.abs(px - x) > segW / 2) return false; armed = true; dragging = false; startPx = px; grab = px - x; if (!reduced()) { pt = 1; wake(); } return true; }, move(px) { if (!armed) return false; let started = false; if (!dragging && Math.abs(px - startPx) > 3) { dragging = true; started = true; near = nearest(x); k = FOLLOW[0]; c = FOLLOW[1]; } if (dragging) { const lo = centers[0] ?? 0; const hi = centers[count - 1] ?? 0; let target = px - grab; if (target < lo) target = lo - (lo - target) * 0.25; else if (target > hi) target = hi + (target - hi) * 0.25; tx = target; if (reduced()) { x = tx; write(); } else wake(); const nn = nearest(tx); if (nn !== near) { near = nn; if (typeof navigator.vibrate === "function") navigator.vibrate(4); } } return started; }, up(commit) { if (!armed) return -1; armed = false; pt = 0; const was = dragging; dragging = false; if (!was) { wake(); return -1; } const idx = commit ? nearest(x + v * 0.1) : activeRef.current; settleTo(idx); return idx; }, }; engine.current.go(activeRef.current, true); const ro = new ResizeObserver(() => engine.current?.go(activeRef.current, true)); ro.observe(inner); for (const b of btnRefs.current) if (b) ro.observe(b); const fonts = document.fonts; if (fonts) void fonts.ready.then(() => engine.current?.go(activeRef.current, true)); return () => { ro.disconnect(); if (raf) cancelAnimationFrame(raf); engine.current = null; }; }, [count, pill]); useEffect(() => { engine.current?.go(active, false); }, [active]); const choose = (i: number) => { if (disabled || i === active) return; setPicked(i); onChangeRef.current?.(i); }; const layoutX = (e: PointerEvent) => { const el = e.currentTarget; const r = el.getBoundingClientRect(); return (e.clientX - r.left) * (el.offsetWidth / (r.width || 1)); }; const onPointerDown = (e: PointerEvent) => { if (disabled || (e.pointerType === "mouse" && e.button !== 0)) return; draggedRef.current = false; engine.current?.down(layoutX(e)); }; const onPointerMove = (e: PointerEvent) => { const started = engine.current?.move(layoutX(e)); if (started) { draggedRef.current = true; try { e.currentTarget.setPointerCapture(e.pointerId); } catch { /* the pointer may already be gone */ } } }; const finish = (e: PointerEvent, commit: boolean) => { const idx = engine.current?.up(commit) ?? -1; try { e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* not captured */ } if (idx >= 0) choose(idx); // The click that follows a drag must not re-select the segment under the pointer. setTimeout(() => { draggedRef.current = false; }, 0); }; const onKeyDown = (e: KeyboardEvent) => { if (disabled) return; const key = e.key; let next = -1; if (key === "ArrowRight" || key === "ArrowDown") next = (active + 1) % count; else if (key === "ArrowLeft" || key === "ArrowUp") next = (active - 1 + count) % count; else if (key === "Home") next = 0; else if (key === "End") next = count - 1; if (next < 0) return; e.preventDefault(); choose(next); btnRefs.current[next]?.focus(); }; const labelBox = "flex h-[var(--scx-h)] items-center justify-center gap-[0.5em] whitespace-nowrap px-[var(--scx-px)] text-[length:var(--scx-fs)] font-semibold leading-none"; const iconBox = "inline-flex h-[1.15em] w-[1.15em] shrink-0 items-center justify-center [&>svg]:h-full [&>svg]:w-full"; const rootStyle = { "--scx-h": "var(--sc-h, " + dims.h + ")", "--scx-fs": "var(--sc-fs, " + dims.fs + ")", "--scx-px": "var(--sc-px, " + dims.px + ")", "--scx-text": t.text, "--scx-hover": t.hover, background: t.bg, borderColor: t.border, boxShadow: t.inset, opacity: disabled ? 0.5 : 1, WebkitTapHighlightColor: "transparent", } as CSSProperties; return (

finish(e, true)} onPointerCancel={(e) => finish(e, false)} className="relative grid min-w-0 flex-1 auto-cols-fr grid-flow-col" style={{ touchAction: "pan-y" }} > {options.map((option, i) => { const on = i === active; return ( ); })}

{options.map((option, i) => ( {icons?.[i] ? {icons[i]} : null} {option} ))}

); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"components/viberdy/segmented-control.tsx","content":"$64","type":"registry:component","target":"components/viberdy/segmented-control.tsx"}],"className":"h-[70svh] min-h-80"}]]}]