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[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T1033,"use client" import * as React from "react" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" type TableProps = React.ComponentProps<"table"> & { /** * ink: the column you sort by is set in ink. forte: it is also set loud, in large thin figures, * against the small print of the rest. cross: as on a road atlas's distance chart, the row and * column of the cell you point at cross in ink, the cell itself in the accent, the rest in pencil. */ variant?: "ink" | "forte" | "cross" } /** Hairline rows in tabular figures. The column you sort by is set in ink. */ function Table({ className, variant = "ink", ...props }: TableProps) { return } function TableHeader(props: React.ComponentProps<"thead">) { return } /** Re-sorted, each row glides from where it was to where it is now (FLIP), andante. Still under reduced motion. */ function TableBody({ ref, ...props }: React.ComponentProps<"tbody">) { const own = React.useRef(null) const was = React.useRef(new WeakMap()) React.useLayoutEffect(() => { const body = own.current if (!body) return const still = matchMedia("(prefers-reduced-motion: reduce)").matches const cs = getComputedStyle(body) const tempo = { duration: parseFloat(cs.getPropertyValue("--ot-andante")) || 640, easing: cs.getPropertyValue("--ot-breath").trim() || "ease" } for (const row of body.rows) { const from = was.current.get(row) was.current.set(row, row.offsetTop) // offsetTop, not the viewport: scrolling between renders isn't a move if (still || from === undefined || from === row.offsetTop) continue row.animate([{ translate: `0 ${from - row.offsetTop}px` }, { translate: "0 0" }], tempo) } }) const composedRef = useComposedRefs(own, ref) return ( ) } function TableFooter(props: React.ComponentProps<"tfoot">) { return } type TableRowProps = React.ComponentProps<"tr"> & { /** A chosen row: its name turns italic. */ picked?: boolean } function TableRow({ picked, ...props }: TableRowProps) { return } type TableHeadProps = React.ComponentProps<"th"> & { /** Right-align a column of figures. */ numeric?: boolean /** The column the rows are sorted by. Put a button inside to make it sortable. */ sort?: "ascending" | "descending" } function TableHead({ numeric, sort, scope = "col", ...props }: TableHeadProps) { return

} /** A ring that fills when the row is chosen. Give it an aria-label naming the row. */ function TablePick({ className, ...props }: Omit, "type">) { return } export { type TableProps, Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, TablePick } 55:T191c,@layer components { /* ── ot-table ── hairline rows; the column you sort by is set in ink */ .ot-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; } .ot-table :is(th, td) { padding: var(--ot-space-3) var(--ot-space-4) var(--ot-space-3) 0; text-align: start; vertical-align: baseline; border-bottom: var(--ot-hairline) solid var(--ot-rule); } .ot-table :is(th, td):last-child { padding-inline-end: 0; } /* figures end flush with the rule */ .ot-table thead th { padding-top: 0; font-size: var(--ot-pp); font-weight: 400; color: var(--ot-pencil); border-bottom-color: var(--ot-ink); white-space: nowrap; } .ot-table :is(tbody, tfoot) th { font-weight: 400; color: var(--ot-graphite); } .ot-table tfoot :is(th, td) { color: var(--ot-ink); border-bottom: 0; } .ot-table td { color: var(--ot-graphite); transition: color var(--ot-moderato); } .ot-table :is(th, td)[data-num] { text-align: end; } .ot-table :is(th, td):first-child:has(.ot-table-pick) { width: 1.6em; } .ot-table th button { appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; position: relative; } /* The arrow hangs outside the word (after it; before it in a figures column), so headings keep their column's edge. */ .ot-table th button::after { content: "↓" / ""; position: absolute; inset-inline-start: calc(100% + 0.25em); opacity: 0; transition: rotate var(--ot-moderato) var(--ot-spiccato), opacity var(--ot-allegro); } .ot-table th[data-num] button::after { inset-inline: auto calc(100% + 0.25em); } .ot-table th button:hover::after { opacity: 0.5; } .ot-table th[aria-sort] { color: var(--ot-ink); } .ot-table th[aria-sort] button::after { opacity: 1; } .ot-table th[aria-sort="ascending"] button::after { rotate: 180deg; } .ot-table td[data-sorted] { color: var(--ot-ink); } .ot-table tr[data-picked] .ot-table-name { font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1; color: var(--ot-ink); } /* Choosing is a ring that fills; some chosen is half a moon. */ @media (max-width: 30rem) { .ot-table :is(th, td) { padding-inline-end: var(--ot-space-3); } } .ot-table-pick { appearance: none; margin: 0; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0.05em; cursor: pointer; box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); transition: background-color var(--ot-allegro), box-shadow var(--ot-allegro); } .ot-table-pick:hover { box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-ink); } .ot-table-pick:checked { background: var(--ot-ink); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-ink); animation: ot-land var(--ot-moderato) var(--ot-spiccato); } .ot-table-pick:indeterminate { background: linear-gradient(90deg, var(--ot-ink) 50%, transparent 50%); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-ink); } /* ── forte ── SPECTRA's giant type against tiny data: the column you sort by is also set loud, in large thin figures, and the rest stays small print on the same baselines. Re-sorted, the loudness passes to the new column as the rows glide. */ .ot-table[data-variant="forte"] td { transition: color var(--ot-moderato), font-size var(--ot-moderato) var(--ot-breath); } .ot-table[data-variant="forte"] td[data-sorted] { font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); font-weight: 250; } .ot-table[data-variant="forte"] tr[data-picked] td[data-sorted].ot-table-name { font-size: calc(var(--ot-expression-scale) * var(--ot-mf)); } @media (max-width: 40rem) { .ot-table[data-variant="forte"] td[data-sorted] { font-size: var(--ot-mp); line-height: var(--ot-mp-lh); letter-spacing: var(--ot-mp-tr); } } /* ── cross ── the road atlas's distance chart: point at a cell (or focus inside it) and its row and its column cross in ink, their headings too; the cell where they meet is the accent; everything else steps back to pencil. A reading aid only: every figure reads in full without it. ponytail: one rule per column, to eight columns; add rules if a chart grows wider. */ .ot-table[data-variant="cross"] :is(th, td) { transition: color var(--ot-allegro); } @media (max-width: 30rem) { .ot-table[data-variant="cross"] { font-size: var(--ot-pp); line-height: var(--ot-pp-lh); } } /* a distance chart is small print; on a phone it keeps its columns */ .ot-table[data-variant="cross"]:has(tbody td:is(:hover, :focus-within, [data-force~="hover"])) :is(th, td) { color: var(--ot-pencil); } .ot-table[data-variant="cross"]:has(tbody td:is(:hover, :focus-within, [data-force~="hover"])) tbody tr:has(> td:is(:hover, :focus-within, [data-force~="hover"])) > *, .ot-table[data-variant="cross"]:has(tbody td:nth-child(1):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(1), .ot-table[data-variant="cross"]:has(tbody td:nth-child(2):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(2), .ot-table[data-variant="cross"]:has(tbody td:nth-child(3):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(3), .ot-table[data-variant="cross"]:has(tbody td:nth-child(4):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(4), .ot-table[data-variant="cross"]:has(tbody td:nth-child(5):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(5), .ot-table[data-variant="cross"]:has(tbody td:nth-child(6):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(6), .ot-table[data-variant="cross"]:has(tbody td:nth-child(7):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(7), .ot-table[data-variant="cross"]:has(tbody td:nth-child(8):is(:hover, :focus-within, [data-force~="hover"])) :is(th, td):nth-child(8) { color: var(--ot-ink); } .ot-table[data-variant="cross"]:has(tbody td:is(:hover, :focus-within, [data-force~="hover"])) tbody td:is(:hover, :focus-within, [data-force~="hover"]):is(:hover, :focus-within, [data-force~="hover"]) { color: var(--ot-accent); } @media (forced-colors: active) { .ot-table[data-variant="cross"]:has(tbody td:is(:hover, :focus-within, [data-force~="hover"])) tbody td:is(:hover, :focus-within, [data-force~="hover"]):is(:hover, :focus-within, [data-force~="hover"]) { color: Highlight; } } } 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":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/table.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/table.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/table.css","content":"$55","type":"registry:file","target":"styles/0nlytype/table.css"}],"className":"h-[70svh] min-h-80"}]]}]
} type TableCellProps = React.ComponentProps<"td"> & { numeric?: boolean /** The cell sits in the sorted column, so it is set in ink. / sorted?: boolean /* The row's name: it turns italic when the row is picked. */ primary?: boolean } function TableCell({ numeric, sorted, primary, className, ...props }: TableCellProps) { return (	) } /** Names the table for screen readers; visually hidden. */ function TableCaption({ className, ...props }: React.ComponentProps<"caption">) { return