/* ============================================================ F2 UI — Data display library Avatar · AvatarGroup · List · Timeline · Stat · Progress · Skeleton · EmptyState · CodeBlock · Accordion · DataTable ============================================================ */ (function () { const { Icon, Checkbox } = window.F2; const { injectCss, highlight } = window.SB; const STATUS = { neutral: 'var(--f2-gray-400)', active: 'var(--f2-accent)', success: 'var(--f2-success)', warning: 'var(--f2-warning)', error: 'var(--f2-error)' }; /* ====================== Avatar ====================== */ function initials(name) { return (name || '').split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase(); } function Avatar({ src, name = '', size = 40, shape = 'circle', status, style = {} }) { const radius = shape === 'circle' ? '50%' : 'var(--f2-radius-control)'; return ( {src ? {name} : {initials(name) || '—'}} {status && } ); } function AvatarGroup({ people = [], size = 36, max = 4, style = {} }) { const shown = people.slice(0, max); const extra = people.length - shown.length; return (
{shown.map((p, i) => )} {extra > 0 && +{extra}}
); } /* ====================== List ====================== */ function List({ items = [], divided = true, style = {} }) { return ( ); } /* ====================== Timeline ====================== */ function Timeline({ items = [], style = {} }) { return (
    {items.map((it, i) => { const last = i === items.length - 1; const c = STATUS[it.tone] || 'var(--f2-border-strong)'; const lit = it.tone && it.tone !== 'neutral'; return (
  1. {it.icon ? : } {!last && }
    {it.title} {it.time && {it.time}}
    {it.description &&
    {it.description}
    }
    2. ); })}
); } /* ====================== Stat ====================== */ function Stat({ label, value, delta, deltaTone = 'auto', hint, icon, style = {} }) { let tone = deltaTone; if (deltaTone === 'auto' && typeof delta === 'string') tone = delta.trim().startsWith('-') ? 'down' : 'up'; const dc = tone === 'down' ? 'var(--f2-error)' : tone === 'up' ? 'var(--f2-success)' : 'var(--f2-text-muted)'; return (
{icon && } {label}
{value} {delta != null && {tone !== 'flat' && }{delta} }
{hint &&
{hint}
}
); } /* ====================== Progress ====================== */ injectCss('f2-progress-css', `@keyframes f2-indet{0%{left:-40%}100%{left:100%}}@media (prefers-reduced-motion: reduce){.f2-indet{animation:none!important;left:0!important;width:100%!important}}`); function Progress({ value = 0, max = 100, tone = 'accent', showValue = false, indeterminate = false, size = 'md', style = {} }) { const pct = Math.max(0, Math.min(100, (value / max) * 100)); const h = size === 'sm' ? 4 : size === 'lg' ? 10 : 6; const fill = tone === 'success' ? 'var(--f2-success)' : tone === 'warning' ? 'var(--f2-warning)' : tone === 'error' ? 'var(--f2-error)' : 'var(--f2-accent)'; return (
{indeterminate ? : }
{showValue && {Math.round(pct)}%}
); } /* ====================== Skeleton ====================== */ injectCss('f2-skeleton-css', `@keyframes f2-pulse{0%,100%{opacity:.5}50%{opacity:.9}}@media (prefers-reduced-motion: reduce){.f2-sk{animation:none!important}}`); function Skeleton({ width = '100%', height, variant = 'text', radius, style = {} }) { const h = height || (variant === 'text' ? 13 : variant === 'circle' ? 40 : 80); const w = variant === 'circle' ? h : width; const r = radius != null ? radius : (variant === 'circle' ? '50%' : variant === 'text' ? 5 : 'var(--f2-radius-md)'); return ; } /* ====================== EmptyState ====================== */ function EmptyState({ icon = 'Inbox', title, description, action, style = {} }) { return (
{title &&
{title}
} {description &&
{description}
} {action &&
{action}
}
); } /* ====================== CodeBlock ====================== */ function CodeBlock({ code = '', title, showCopy = true, style = {} }) { const [copied, setCopied] = React.useState(false); return (
{(title || showCopy) && (
{title} {showCopy && }
)}
); } /* ====================== Accordion ====================== */ function Accordion({ items = [], allowMultiple = false, defaultOpen = [], style = {} }) { const [open, setOpen] = React.useState(() => new Set(defaultOpen)); function toggle(i) { setOpen((prev) => { const next = new Set(allowMultiple ? prev : []); if (prev.has(i)) next.delete(i); else next.add(i); return next; }); } return (
{items.map((it, i) => { const isOpen = open.has(i); return (
{it.content}
); })}
); } /* ====================== DataTable ====================== */ function DataTable({ columns = [], rows = [], getRowId = (r, i) => i, selectable = false, dense = false, onRowClick, style = {} }) { const [sort, setSort] = React.useState({ key: null, dir: 'asc' }); const [sel, setSel] = React.useState(() => new Set()); const sorted = React.useMemo(() => { if (!sort.key) return rows; const col = columns.find((c) => c.key === sort.key); const arr = [...rows].sort((a, b) => { const va = col && col.sortValue ? col.sortValue(a) : a[sort.key]; const vb = col && col.sortValue ? col.sortValue(b) : b[sort.key]; if (va < vb) return -1; if (va > vb) return 1; return 0; }); return sort.dir === 'desc' ? arr.reverse() : arr; }, [rows, sort, columns]); function toggleSort(c) { if (!c.sortable) return; setSort((s) => s.key === c.key ? { key: c.key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key: c.key, dir: 'asc' }); } const allIds = sorted.map(getRowId); const allSel = allIds.length > 0 && allIds.every((id) => sel.has(id)); const someSel = allIds.some((id) => sel.has(id)) && !allSel; function toggleAll() { setSel(allSel ? new Set() : new Set(allIds)); } function toggleRow(id) { setSel((prev) => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); } const pad = dense ? '8px 14px' : '13px 16px'; const th = { padding: dense ? '9px 14px' : '11px 16px', textAlign: 'left', fontFamily: 'var(--f2-font-mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--f2-text-faint)', fontWeight: 500, whiteSpace: 'nowrap', borderBottom: '1px solid var(--f2-border-strong)', background: 'var(--f2-surface-raised)' }; return (
{selectable && } {columns.map((c) => ( ))} {sorted.map((r, i) => { const id = getRowId(r, i); const isSel = sel.has(id); return ( onRowClick && onRowClick(r)} style={{ borderBottom: i === sorted.length - 1 ? 'none' : '1px solid var(--f2-border)', background: isSel ? 'var(--f2-surface-accent)' : 'transparent', cursor: onRowClick ? 'pointer' : 'default', transition: 'background var(--f2-dur-fast) var(--f2-ease)' }} onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = 'var(--f2-surface-raised)'; }} onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = 'transparent'; }}> {selectable && } {columns.map((c) => ( ))} ); })}
toggleSort(c)} aria-sort={sort.key === c.key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined}> {c.header} {c.sortable && }
e.stopPropagation()}> toggleRow(id)} /> {c.render ? c.render(r) : r[c.key]}
); } Object.assign(window.F2, { Avatar, AvatarGroup, List, Timeline, Stat, Progress, Skeleton, EmptyState, CodeBlock, Accordion, DataTable }); })();