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:T1f79,'use client'; import { cn } from '@/lib/utils'; export interface TableProps extends React.ComponentProps<'table'> { /** * Classes for the scroll wrapper rather than the `` , the only place a * surface treatment belongs. See the glass rule in the docblock. */ containerClassName?: string; /** * The wrapper's material. `glass` (the default) is Tier S , the same * `.glass-surface` a `Card` uses, and **never** `.glass-surface-blur`: this * wrapper is a scroll container, so a live backdrop layer here re-samples on * every scroll frame. `panel` is the opaque fallback, and `none` leaves the * wrapper bare for a table already sitting inside a Card or a Dialog , which * is the case that matters, because a surface inside a surface is nested * glass and both layers cancel. */ surface?: 'glass' | 'panel' | 'none'; } /** * Native `

` elements, thinly styled. Not a data grid: sorting, selection * and virtualisation live in the feature that renders the rows. * * ───────────────────────────────────────────────────────────────────────────── * ## THE GLASS RULE: THE CONTAINER MAY BE A SURFACE, A ROW MAY NOT * * **A `TableRow` must never be glass and must never carry `backdrop-filter`.** * * `backdrop-filter` is per-element. Fifty rows means fifty blur layers, and each * one has to re-sample and re-composite its own slice of the backdrop on every * frame the table scrolls , the cost scales with visible rows, so the table gets * *worse* the more data it has, which is the opposite of how anyone tests it. * Two further consequences make it wrong even when it is fast enough: * `backdrop-filter` forms a stacking context on every row (so a row-level * `z-index`, e.g. a sticky action column, is scoped to that row and cannot rise * above its neighbours), and it establishes a containing block for `position: * fixed` descendants (so a fixed-position child of a cell is trapped in the row). * * The wrapper is also a **scroll container** (`overflow-x-auto`), and glass is * forbidden inside a scroll container by `@velobitsio/tokens/glass.css` for the * same repaint reason , so if this table sits *inside* a glass Dialog, the glass * stops at the Dialog panel. * * What that leaves: the wrapper carries the surface, and rows use the opaque * wash tokens (`--highlight` for hover, `--bg2` for selected) that the * implementation below already uses. Those are flat colours , no filter, no * compositing layer. * * Since 2026-08-06 the wrapper does that by DEFAULT (`surface="glass"`) rather * than leaving it to `containerClassName` at every call site. It is Tier S * without the blur, for the reason above , a scroll container is the one place * `.glass-surface-blur` must never appear, and `glass.css` forbids it. * * **Pass `surface="none"` for a table already inside a Card or a Dialog.** That * is nested glass: the inner surface composites over the outer one and the two * land ~2/255 apart, so the table shell vanishes and the Card looks like it has * a hole in it. * ───────────────────────────────────────────────────────────────────────────── * * ## `caption-bottom` * * The `

` is the table's accessible name, and it is the first thing a * screen reader announces regardless of where it is painted , so rendering it * below the data costs nothing semantically and keeps a visible caption from * competing with the page heading above the table. */ function Table({ className, containerClassName, surface = 'glass', ...props }: TableProps) { return (

); } function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) { return ( ); } function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) { return ( ); } function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) { return ( tr]:last:border-b-0', className, )} {...props} /> ); } /** * Opaque washes only, by design , see the glass rule on `Table`. * * `--highlight` is the system's hover wash (a 5–6% ink/paper overlay) and * `--bg2` the selected surface; both are flat colours, so a row costs one paint * of one rectangle and creates no compositing layer. `transition-colors` rather * than `transition-all` keeps it that way even if a caller adds a layout utility * through `className`. * * `has-aria-expanded:` matches the dashboard app's behaviour of keeping a row * washed while the detail panel it opened is on screen, so the row you are reading * about stays findable. */ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) { return ( ); } /** * `scope="col"` by default rather than relying on the implicit scope a `` gets. The implicit rule is real HTML but assistive tech applies it * unevenly once a table has a footer, a caption, or cells that span , and the * failure mode is a screen reader reading the wrong column name for every cell in * a row, which nobody notices visually. * * A `

); } export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }; 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":"@velobits","registryDependencies":["https://ui.velobits.dev/r/cn.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/velobits/ui/table.tsx","content":"$52","type":"registry:ui","target":"@ui/velobits/table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
` in * a `
` that heads a row rather than a column must pass `scope="row"` * explicitly; the prop spread below lets it override. * * `text-start` and `pe-0` rather than `text-left` / `pr-0`: both are logical, so * a table under `dir="rtl"` needs no variant. */ function TableHead({ className, scope = 'col', ...props }: React.ComponentProps<'th'>) { return (	[role=checkbox]]:translate-y-[2px]', className, )} {...props} /> ); } function TableCell({ className, ...props }: React.ComponentProps<'td'>) { return (	[role=checkbox]]:translate-y-[2px]', className, )} {...props} /> ); } /** * The table's accessible name. Not optional in practice: a data table with no * caption and no `aria-label` is announced as "table" with a row and column * count, which tells a screen-reader user nothing about which of the three tables * on the page they landed in. */ function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) { return (