4e: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"] 4f: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"] 50:Tdf0,"use client"; import { useState } from "react"; import { Button } from "../button/button"; import { DemoFrame } from "../lib/demo-frame"; import { easedColumns, Table } from "../table/table"; import { DeltaCell, PersonCell, ProgressCell, RelativeTimeCell, StatusCell } from "./cells"; type Account = { id: string; name: string; mrr: number; delta: number; onboarding: number; state: "Active" | "Trial" | "Paused"; seen: number; }; const NOW = Date.UTC(2026, 9, 18, 12); const M = 60_000; const START: Account[] = [ { id: "a1", name: "Northwind", mrr: 12_480, delta: 0.124, onboarding: 100, state: "Active", seen: NOW - 4 * M }, { id: "a2", name: "Lumen Labs", mrr: 8_920, delta: -0.038, onboarding: 82, state: "Active", seen: NOW - 52 * M }, { id: "a3", name: "Fieldnote", mrr: 4_310, delta: 0.061, onboarding: 64, state: "Trial", seen: NOW - 3 * 60 * M }, { id: "a4", name: "Ostrava Co.", mrr: 3_750, delta: 0, onboarding: 45, state: "Active", seen: NOW - 26 * 60 * M }, { id: "a5", name: "Pine & Pixel", mrr: 2_180, delta: -0.117, onboarding: 30, state: "Paused", seen: NOW - 5 * 24 * 60 * M }, { id: "a6", name: "Halcyon", mrr: 1_640, delta: 0.219, onboarding: 18, state: "Trial", seen: NOW - 9 * M }, { id: "a7", name: "Brightwell", mrr: 1_205, delta: 0.042, onboarding: 72, state: "Active", seen: NOW - 7 * 60 * M }, { id: "a8", name: "Marlow Studio", mrr: 980, delta: -0.021, onboarding: 55, state: "Active", seen: NOW - 2 * 24 * 60 * M }, { id: "a9", name: "Quill", mrr: 640, delta: 0.087, onboarding: 9, state: "Trial", seen: NOW - 31 * M }, ]; const TONE = { Active: "success", Trial: "info", Paused: "neutral" } as const; const usd = { style: "currency", currency: "USD", maximumFractionDigits: 0 } as const; const col = easedColumns(); const columns = col.columns([ col.accessor("name", { header: "Account", cell: (c) => , meta: { emphasis: true, grow: true } }), col.accessor("mrr", { header: "MRR", cell: (c) => , meta: { align: "end" }, }), col.accessor("onboarding", { header: "Onboarding", cell: (c) => , meta: { className: "@max-[24rem]:hidden" }, }), col.accessor("state", { header: "Status", cell: (c) => ( {c.getValue()} ), meta: { className: "@max-[36rem]:hidden" }, }), col.accessor("seen", { header: "Last seen", cell: (c) => , meta: { align: "end", className: "@max-[36rem]:hidden" }, }), ]); // A month passes: revenue drifts, onboarding moves forward. const advance = (rows: Account[]) => rows.map((r) => { const delta = Math.round((Math.random() * 0.3 - 0.12) * 1000) / 1000; return { ...r, mrr: Math.max(200, Math.round(r.mrr * (1 + delta))), delta, onboarding: Math.min(100, r.onboarding + Math.round(Math.random() * 25)), }; }); export function CellsDemo() { const [rows, setRows] = useState(START); return ( setRows(advance)}> Next month } > r.id} className="min-h-0 flex-1" /> ); } 4d:["$","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,["$","$L4e",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/cells.json","https://eased.dev/r/table.json","https://eased.dev/r/button.json","https://eased.dev/r/eased-demo-frame.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/eased/cells/cells-demo.tsx","content":"$50","type":"registry:example","target":"@components/eased/cells/cells-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]