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:Tac6,.cr-table { display: grid; gap: var(--cr-space-3); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-table__scroll { overflow-x: auto; border-radius: var(--cr-radius-lg); } .cr-table__table { width: 100%; border-collapse: collapse; } .cr-table__caption { padding: var(--cr-space-3) 14px 0; font-weight: var(--cr-font-weight-semibold); text-align: start; } .cr-table__table th, .cr-table__table td { padding: var(--cr-space-3) 14px; border-bottom: 1px solid var(--cr-color-border-default); text-align: start; } .cr-table__table tbody tr:last-child > * { border-bottom: 0; } .cr-table__table thead th { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-semibold); white-space: nowrap; } .cr-table__table tbody th { font-weight: var(--cr-font-weight-semibold); } .cr-table__table [data-align='end'] { text-align: end; font-variant-numeric: tabular-nums; } .cr-table__table tr[data-selected] > * { background: var(--cr-color-bg-subtle); } .cr-table__check { width: 20px; } .cr-table__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--cr-color-ink-bg); } .cr-table__check input:focus-visible, .cr-table__sort:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .cr-table__sort .cr-icon { opacity: 0; transition: transform var(--cr-motion-duration-fast) var(--cr-motion-easing-standard); } .cr-table__sort:hover .cr-icon { opacity: 0.5; } .cr-table__sort[data-active] { color: var(--cr-color-text-default); } .cr-table__sort[data-active] .cr-icon { opacity: 1; } .cr-table__sort .cr-icon[data-direction='ascending'] { transform: rotate(180deg); } .cr-table__empty { padding: var(--cr-space-8) 14px; color: var(--cr-color-text-muted); text-align: center !important; } .cr-table__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-3); justify-self: end; padding: 6px 6px 6px var(--cr-space-4); border-radius: var(--cr-radius-full); background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-table__bulk .cr-button { min-height: 30px; border-color: transparent; background: transparent; box-shadow: none; color: inherit; } .cr-table__bulk .cr-button:hover:not(:disabled) { background: var(--cr-color-ink-bg-hover); } 53:T1b58,'use client'; import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ArrowDownIcon } from '@/lib/creance/icons'; import './Table.css'; export type SortDirection = 'ascending' | 'descending'; export interface TableColumn { key: string; header: ReactNode; cell: (row: T) => ReactNode; /** Makes the column sortable by this value. */ sortValue?: (row: T) => string | number; align?: 'start' | 'end'; /** The column that names each row; its cell becomes a row header for screen readers. */ rowHeader?: boolean; width?: string; } export interface TableProps { columns: TableColumn[]; rows: T[]; rowKey: (row: T) => string; /** Describes the table. Visually hidden unless `showCaption`. */ caption: ReactNode; showCaption?: boolean; /** Starting sort, or a controlled one with `onSortChange`. */ sort?: { key: string; direction: SortDirection } | null; defaultSort?: { key: string; direction: SortDirection } | null; onSortChange?: (sort: { key: string; direction: SortDirection }) => void; /** Adds a checkbox column. Shift-click selects a range. */ selectable?: boolean; selected?: string[]; onSelectedChange?: (keys: string[]) => void; /** Shown in a bar above the table while rows are selected. */ bulkActions?: (keys: string[]) => ReactNode; /** How a row is named in its checkbox label: "Select Run 41". Defaults to the row key. */ rowLabel?: (row: T) => string; emptyMessage?: ReactNode; className?: string; } /** A real table: sortable headers announce their order, rows can be selected for bulk actions. */ export function Table({ columns, rows, rowKey, caption, showCaption, sort, defaultSort = null, onSortChange, selectable, selected, onSelectedChange, bulkActions, rowLabel, emptyMessage = 'Nothing here yet', className, }: TableProps) { const [ownSort, setOwnSort] = useState(defaultSort); const activeSort = sort === undefined ? ownSort : sort; const [ownSelected, setOwnSelected] = useState([]); const picked = selected ?? ownSelected; const lastClicked = useRef(null); const all = useRef(null); const sorted = useMemo(() => { const col = columns.find((c) => c.key === activeSort?.key); if (!col?.sortValue || !activeSort) return rows; const dir = activeSort.direction === 'ascending' ? 1 : -1; return [...rows].sort((a, b) => { const x = col.sortValue!(a); const y = col.sortValue!(b); return (x < y ? -1 : x > y ? 1 : 0) * dir; }); }, [rows, columns, activeSort]); const keys = sorted.map(rowKey); const allPicked = keys.length > 0 && keys.every((k) => picked.includes(k)); const somePicked = !allPicked && keys.some((k) => picked.includes(k)); useEffect(() => { if (all.current) all.current.indeterminate = somePicked; }, [somePicked]); const setPicked = (next: string[]) => { if (selected === undefined) setOwnSelected(next); onSelectedChange?.(next); }; const toggleSort = (key: string) => { const next = { key, direction: (activeSort?.key === key && activeSort.direction === 'ascending' ? 'descending' : 'ascending') as SortDirection, }; if (sort === undefined) setOwnSort(next); onSortChange?.(next); }; const toggleRow = (index: number, shift: boolean) => { const key = keys[index]!; const on = !picked.includes(key); let range = [key]; if (shift && lastClicked.current !== null) { const [a, b] = [lastClicked.current, index].sort((m, n) => m - n); range = keys.slice(a, b! + 1); } lastClicked.current = index; setPicked(on ? [...new Set([...picked, ...range])] : picked.filter((k) => !range.includes(k))); }; return (

{selectable && bulkActions && picked.length > 0 && (

{picked.length} selected {bulkActions(picked)}

)}

{selectable && ( )} {columns.map((c) => { const dir = activeSort?.key === c.key ? activeSort.direction : undefined; return ( ); })} {sorted.length === 0 && ( )} {sorted.map((row, i) => { const key = keys[i]!; const on = picked.includes(key); return ( {selectable && ( )} {columns.map((c) => { const Cell = c.rowHeader ? 'th' : 'td'; return ( {c.cell(row)} ); })} ); })}

{caption}
setPicked(allPicked ? picked.filter((k) => !keys.includes(k)) : [...new Set([...picked, ...keys])])} />	{c.sortValue ? ( ) : ( c.header )}
{emptyMessage}
{}} onClick={(e) => toggleRow(i, e.shiftKey)} />

); } 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":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"table/Table.css","content":"$52","type":"registry:file","target":"@components/creance/table/Table.css"},{"path":"table/Table.tsx","content":"$53","type":"registry:ui","target":"@components/creance/table/Table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]