@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/containers/data-grid/data-grid.tsx

@@ -4,22 +4,6 @@
 // biome-ignore-all lint/a11y/useFocusableInteractive: footer and empty-state cells are read, not navigated.
 "use client";
 
-import {
-  ArrowDown,
-  ArrowDownToLine,
-  ArrowUp,
-  ArrowUpToLine,
-  BarChart3,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  CircleAlert,
-  Copy,
-  GripVertical,
-  PinOff,
-} from "lucide-react";
 import {
   type ClipboardEvent,
   type CSSProperties,
@@ -41,6 +25,22 @@ import {
 import { Chip } from "../../atoms/chip/chip.js";
 import { formatCurrency, formatNumber } from "../../charts/core/format.js";
 import { Sparkline } from "../../charts/sparkline/sparkline.js";
+import {
+  ArrowDown,
+  ArrowDownToLine,
+  ArrowUp,
+  ArrowUpToLine,
+  BarChart3,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  CircleAlert,
+  Copy,
+  GripVertical,
+  PinOff,
+} from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { computePinOffsets, type PinPosition, sanitizePinned } from "../table/pin.js";
 import { type GridChartKind, type RangeChartData, rangeToChart } from "./chart-range.js";
@@ -2110,7 +2110,7 @@ export function DataGrid<T>({
         className={cn(
           cellBase,
           sticky,
-          "select-none whitespace-nowrap font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]",
+          "select-none whitespace-nowrap font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]",
           sortable && "cursor-pointer hover:text-ink",
           drop === "before" && "shadow-[inset_2px_0_0_var(--accent)]",
           drop === "after" && "shadow-[inset_-2px_0_0_var(--accent)]",
@@ -2125,7 +2125,7 @@ export function DataGrid<T>({
             {formulasOn ? (
               <span
                 aria-hidden="true"
-                className="shrink-0 rounded-xs bg-surface-2 px-1 font-[650] text-[10px] text-ink-3 normal-case tracking-normal"
+                className="shrink-0 rounded-xs bg-surface-2 px-1 font-[650] text-fs-100 text-ink-3 normal-case tracking-normal"
               >
                 {cellLetter(column.id)}
               </span>
@@ -2141,7 +2141,7 @@ export function DataGrid<T>({
                   <ArrowDown aria-hidden="true" className="size-3" />
                 )}
                 {sort.length > 1 ? (
-                  <span className="text-[10px] tabular-nums">{state.index + 1}</span>
+                  <span className="text-fs-100 tabular-nums">{state.index + 1}</span>
                 ) : null}
                 {state.index > 0 ? (
                   <span className="sr-only">
@@ -2252,7 +2252,7 @@ export function DataGrid<T>({
     if (!editing) return null;
     const errorId = `${helpId}-error`;
     const editorClass = cn(
-      "h-[calc(100%-6px)] w-full min-w-0 rounded-xs border bg-surface px-1.5 text-[13px] text-ink outline-none",
+      "h-[calc(100%-6px)] w-full min-w-0 rounded-xs border bg-surface px-1.5 text-fs-130 text-ink outline-none",
       editing.error ? "border-danger" : "border-accent",
     );
     const common = {
@@ -2299,7 +2299,7 @@ export function DataGrid<T>({
           <span
             id={errorId}
             role="alert"
-            className="absolute top-full left-1 z-5 mt-0.5 flex max-w-64 items-center gap-1.5 rounded-xs border border-danger bg-surface px-2 py-1 text-[12px] text-danger shadow-overlay"
+            className="absolute top-full left-1 z-5 mt-0.5 flex max-w-64 items-center gap-1.5 rounded-xs border border-danger bg-surface px-2 py-1 text-fs-120 text-danger shadow-overlay"
           >
             <CircleAlert aria-hidden="true" className="size-3.5 shrink-0" />
             {editing.error}
@@ -2335,7 +2335,7 @@ export function DataGrid<T>({
             tabIndex={labelActive ? 0 : -1}
             role="gridcell"
             aria-expanded={!row.collapsed}
-            className={cn(cellBase, "cursor-pointer overflow-visible text-[13px]")}
+            className={cn(cellBase, "cursor-pointer overflow-visible text-fs-130")}
           >
             <span
               className="sticky left-3 flex w-fit max-w-full min-w-0 items-center gap-1.5 whitespace-nowrap font-[650] text-ink"
@@ -2354,7 +2354,7 @@ export function DataGrid<T>({
               </span>
               <span className="shrink-0 font-normal text-ink-3">{header}:</span>
               <span className="min-w-0 truncate">{row.label}</span>
-              <Chip className="h-5 shrink-0 px-2 text-[11px]">{row.count}</Chip>
+              <Chip className="h-5 shrink-0 px-2 text-fs-110">{row.count}</Chip>
             </span>
           </td>
         );
@@ -2372,7 +2372,7 @@ export function DataGrid<T>({
           style={pinStyle(position)}
           className={cn(
             cellBase,
-            "cursor-pointer text-[13px]",
+            "cursor-pointer text-fs-130",
             position && "sticky z-1 bg-surface-2",
             pinShadow(position),
             column && alignClass[columnAlign(column)],
@@ -2702,7 +2702,7 @@ export function DataGrid<T>({
         onDragOver={reorderAllowed ? (event) => onRowDragOver(event, row.key) : undefined}
         onDrop={reorderAllowed ? (event) => onRowDrop(event, row.key) : undefined}
         className={cn(
-          "group/row text-[13px] text-ink hover:bg-surface-2 aria-selected:bg-accent-soft",
+          "group/row text-fs-130 text-ink hover:bg-surface-2 aria-selected:bg-accent-soft",
           "data-[drop=before]:[&>td]:shadow-[inset_0_2px_0_var(--accent)] data-[drop=after]:[&>td]:shadow-[inset_0_-2px_0_var(--accent)]",
           "data-[divider=top]:[&>td]:border-b-line-strong",
         )}
@@ -2781,7 +2781,7 @@ export function DataGrid<T>({
         key={idOfColumn(entry)}
         style={pinStyle(position)}
         className={cn(
-          "sticky bottom-0 overflow-hidden border-t-divider bg-surface px-3 font-[650] text-[13px] text-ink @max-sm/grid:px-2",
+          "sticky bottom-0 overflow-hidden border-t-divider bg-surface px-3 font-[650] text-fs-130 text-ink @max-sm/grid:px-2",
           position ? "z-3" : "z-2",
           pinShadow(position),
           column && alignClass[columnAlign(column)],
@@ -2794,7 +2794,7 @@ export function DataGrid<T>({
             {formatAggregate(value, column.aggregate, column)}
           </span>
         ) : c === firstDataIndex ? (
-          <span className="text-[11px] text-ink-3 uppercase tracking-[.07em]">{labels.total}</span>
+          <span className="text-fs-110 text-ink-3 uppercase tracking-[.07em]">{labels.total}</span>
         ) : null}
       </td>
     );
@@ -2858,7 +2858,7 @@ export function DataGrid<T>({
           role={cell.label ? "columnheader" : "presentation"}
           colSpan={cell.span}
           className={cn(
-            "sticky overflow-clip border-b-divider bg-surface px-3 text-center font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/grid:px-2",
+            "sticky overflow-clip border-b-divider bg-surface px-3 text-center font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em] @max-sm/grid:px-2",
             zone === "center" ? "z-2" : "z-3",
             cell.label && "border-x",
           )}
@@ -3074,13 +3074,13 @@ export function DataGrid<T>({
       {sourceActive && remote.failed && remote.total !== null ? (
         <div
           role="alert"
-          className="flex flex-wrap items-center gap-2 border-b-divider bg-danger-soft px-3 py-2 text-[13px] text-danger"
+          className="flex flex-wrap items-center gap-2 border-b-divider bg-danger-soft px-3 py-2 text-fs-130 text-danger"
         >
           <CircleAlert aria-hidden="true" className="size-4 shrink-0" />
           <span className="min-w-0 flex-1">{labels.loadError}</span>
           <button
             type="button"
-            className="rounded-control border border-danger px-2.5 py-1 font-[600] text-[12.5px] hover:bg-surface"
+            className="rounded-control border border-danger px-2.5 py-1 font-[600] text-fs-125 hover:bg-surface"
             onClick={remote.retry}
           >
             {labels.retry}
@@ -3171,7 +3171,7 @@ export function DataGrid<T>({
                 ))
               ) : bodyLength === 0 ? (
                 <tr aria-rowindex={groupLevels + 2}>
-                  <td colSpan={colSpan} className="px-4 py-10 text-center text-[13px] text-ink-3">
+                  <td colSpan={colSpan} className="px-4 py-10 text-center text-fs-130 text-ink-3">
                     <div className="sticky left-0 inline-flex max-w-[calc(100cqw-2rem)] flex-col items-center gap-2">
                       <span>
                         {sourceActive && remote.failed
@@ -3183,7 +3183,7 @@ export function DataGrid<T>({
                       {sourceActive && remote.failed ? (
                         <button
                           type="button"
-                          className="rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink"
+                          className="rounded-control border-divider px-2.5 py-1 font-[600] text-fs-125 text-ink-2 hover:text-ink"
                           onClick={remote.retry}
                         >
                           {labels.retry}
@@ -3191,7 +3191,7 @@ export function DataGrid<T>({
                       ) : emptyFiltered ? (
                         <button
                           type="button"
-                          className="rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink"
+                          className="rounded-control border-divider px-2.5 py-1 font-[600] text-fs-125 text-ink-2 hover:text-ink"
                           onClick={() => {
                             setFiltersState({});
                             setSearch("");
@@ -3230,7 +3230,7 @@ export function DataGrid<T>({
         </div>
       </div>
       {rangeSelection ? (
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t-divider px-3 py-1.5 text-[12.5px] text-ink-2">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t-divider px-3 py-1.5 text-fs-125 text-ink-2">
           {stats && cellRange ? (
             <>
               <span className="font-[650] text-ink">{labels.rangeCells(rangeCellCount)}</span>
@@ -3262,7 +3262,7 @@ export function DataGrid<T>({
                 <button
                   type="button"
                   onClick={openChart}
-                  className="ml-auto inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5"
+                  className="ml-auto inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-fs-120 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5"
                 >
                   <BarChart3 aria-hidden="true" />
                   {labels.chart}
@@ -3272,7 +3272,7 @@ export function DataGrid<T>({
                 type="button"
                 onClick={copyRange}
                 className={cn(
-                  "inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
+                  "inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-fs-120 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
                   !charts && "ml-auto",
                 )}
               >
@@ -3355,14 +3355,14 @@ function Pagination({
   return (
     <nav
       aria-label={labels.rowsPerPage}
-      className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 border-t-divider px-2 py-1.5 text-[12.5px] text-ink-2"
+      className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 border-t-divider px-2 py-1.5 text-fs-125 text-ink-2"
     >
       <label className="flex items-center gap-2">
         <span>{labels.rowsPerPage}</span>
         <select
           value={pageSize}
           onChange={(event) => onPageSize(Number(event.target.value))}
-          className="h-control-sm rounded-input border-control bg-surface-control px-1.5 text-[12.5px] text-ink"
+          className="h-control-sm rounded-input border-control bg-surface-control px-1.5 text-fs-125 text-ink"
         >
           {[...new Set([...options, pageSize])]
             .sort((a, b) => a - b)

package/src/containers/data-grid/filter-builder-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2 } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   addChild,
@@ -30,9 +30,9 @@ export interface FilterBuilderProps<T> {
 }
 
 const fieldClass =
-  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
 const buttonClass =
-  "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+  "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
 
 /**
  * Builds a filter of nested AND / OR groups of conditions (column, operator, value). It is a
@@ -98,7 +98,7 @@ function GroupEditor<T>({
               onClick={() =>
                 onChange(updateNode(root, group.id, (n) => ({ ...n, logic }) as FilterNode))
               }
-              className="h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink"
+              className="h-full rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink"
             >
               {logic === "and" ? labels.matchAll : labels.matchAny}
             </button>
@@ -136,13 +136,13 @@ function GroupEditor<T>({
         )}
       </div>
       {group.children.length === 0 ? (
-        <p className="px-1 text-[12.5px] text-ink-3">{labels.noConditions}</p>
+        <p className="px-1 text-fs-125 text-ink-3">{labels.noConditions}</p>
       ) : (
         <ul className="grid gap-2">
           {group.children.map((child, index) => (
             <li key={child.id} className="grid gap-1">
               {index > 0 ? (
-                <span className="font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]">
+                <span className="font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]">
                   {group.logic === "and" ? labels.filterAnd : labels.filterOr}
                 </span>
               ) : null}

package/src/containers/data-grid/formula-bar.tsx

@@ -36,12 +36,12 @@ export function FormulaBar({
     <div className="flex min-w-0 items-center gap-2 border-b-divider px-2 py-1.5">
       <span
         title={labels.cell}
-        className="grid h-control-sm min-w-12 shrink-0 place-items-center rounded-xs bg-surface-2 px-2 font-[650] text-[12px] text-ink-2 tabular-nums"
+        className="grid h-control-sm min-w-12 shrink-0 place-items-center rounded-xs bg-surface-2 px-2 font-[650] text-fs-120 text-ink-2 tabular-nums"
       >
         <span className="sr-only">{labels.cell}: </span>
         {address || "—"}
       </span>
-      <span aria-hidden="true" className="shrink-0 font-[650] text-[13px] text-accent-ink italic">
+      <span aria-hidden="true" className="shrink-0 font-[650] text-fs-130 text-accent-ink italic">
         fx
       </span>
       <input
@@ -66,12 +66,12 @@ export function FormulaBar({
           }
         }}
         className={cn(
-          "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 font-mono text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none disabled:opacity-60",
+          "h-control-sm min-w-0 flex-1 rounded-input border-control bg-surface-control px-2 font-mono text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none disabled:opacity-60",
           error && "border-danger",
         )}
       />
       {error ? (
-        <span role="alert" className="shrink-0 text-[12px] text-danger">
+        <span role="alert" className="shrink-0 text-fs-120 text-danger">
           {error}
         </span>
       ) : null}

package/src/containers/data-grid/grid-toolbar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ReactNode } from "react";
 import {
   Columns3,
   Download,
@@ -12,8 +13,7 @@ import {
   Trash2,
   Undo2,
   X,
-} from "lucide-react";
-import type { ReactNode } from "react";
+} from "../../icons/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlays/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 import type { DataGridLabels } from "./labels.js";
@@ -22,7 +22,7 @@ import type { DataGridColumn, Density } from "./types.js";
 const DENSITIES: Density[] = ["compact", "normal", "comfortable"];
 
 const buttonClass =
-  "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+  "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
 
 export interface GridToolbarProps<T> {
   labels: DataGridLabels;
@@ -106,7 +106,7 @@ export function GridToolbar<T>({
           value={search}
           placeholder={labels.searchPlaceholder}
           onChange={(event) => onSearch(event.target.value)}
-          className="h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none"
+          className="h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none"
         />
       </label>
 
@@ -167,7 +167,7 @@ export function GridToolbar<T>({
         );
       })}
 
-      <p className="mr-auto text-[12px] text-ink-3" aria-live="polite">
+      <p className="mr-auto text-fs-120 text-ink-3" aria-live="polite">
         {labels.rowsCount(rowCount)}
         {selectedCount ? ` · ${labels.selectedCount(selectedCount)}` : ""}
       </p>
@@ -226,7 +226,7 @@ export function GridToolbar<T>({
             type="button"
             aria-pressed={density === option}
             onClick={() => onDensity(option)}
-            className="h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink"
+            className="h-full rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink"
           >
             {labels.densities[option]}
           </button>
@@ -247,7 +247,7 @@ export function GridToolbar<T>({
                 return (
                   <label
                     key={column.id}
-                    className="flex min-h-8 items-center gap-2 rounded-xs px-1.5 text-[13px] text-ink hover:bg-surface-2"
+                    className="flex min-h-8 items-center gap-2 rounded-xs px-1.5 text-fs-130 text-ink hover:bg-surface-2"
                   >
                     <input
                       type="checkbox"

package/src/containers/data-grid/spreadsheet.demos.tsx

@@ -13,7 +13,7 @@ import type { CellValue, DataGridColumn } from "./types.js";
 
 export type SheetControls = Pick<DataGridProps<Venta>, "density" | "height">;
 
-export const note = "text-[12.5px] text-ink-3";
+export const note = "text-fs-125 text-ink-3";
 
 export function Stack({ children }: { children: ReactNode }) {
   return <div className="grid gap-2">{children}</div>;

package/src/containers/data-grid/tool-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ArrowDown, ArrowUp } from "lucide-react";
 import { type ReactNode, useId } from "react";
+import { ArrowDown, ArrowUp } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import type { DataGridLabels } from "./labels.js";
 import type { PivotConfig } from "./pivot.js";
@@ -41,14 +41,14 @@ export interface GridToolPanelProps<T> {
 }
 
 const selectClass =
-  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink focus-visible:border-accent focus-visible:outline-none";
+  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink focus-visible:border-accent focus-visible:outline-none";
 const iconButton =
   "grid size-6 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface hover:text-ink disabled:pointer-events-none disabled:opacity-30 [&_svg]:size-3.5";
 
 function Section({ title, children }: { title: string; children: ReactNode }) {
   return (
     <section className="grid gap-1 border-b-divider p-2 last:border-b-0">
-      <h3 className="px-1 pb-0.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]">
+      <h3 className="px-1 pb-0.5 font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]">
         {title}
       </h3>
       {children}
@@ -68,7 +68,7 @@ function Check({
   children: ReactNode;
 }) {
   return (
-    <label className="flex min-h-7 min-w-0 flex-1 items-center gap-2 text-[13px] text-ink">
+    <label className="flex min-h-7 min-w-0 flex-1 items-center gap-2 text-fs-130 text-ink">
       <input
         type="checkbox"
         className="size-4 shrink-0 accent-accent"
@@ -122,7 +122,7 @@ export function GridToolPanel<T>({
       aria-label={labels.toolPanel}
       style={maxHeight ? { maxHeight } : undefined}
       className={cn(
-        "min-h-0 min-w-0 overflow-y-auto bg-surface-2/40 text-[13px] @max-2xl/grid:max-h-72 @max-2xl/grid:border-b-divider @2xl/grid:w-64 @2xl/grid:shrink-0 @2xl/grid:border-l-divider",
+        "min-h-0 min-w-0 overflow-y-auto bg-surface-2/40 text-fs-130 @max-2xl/grid:max-h-72 @max-2xl/grid:border-b-divider @2xl/grid:w-64 @2xl/grid:shrink-0 @2xl/grid:border-l-divider",
         className,
       )}
     >
@@ -181,7 +181,7 @@ export function GridToolPanel<T>({
                   {column.header}
                 </Check>
                 {groupBy.includes(column.id) ? (
-                  <span className="text-[11px] text-ink-3 tabular-nums">
+                  <span className="text-fs-110 text-ink-3 tabular-nums">
                     {groupBy.indexOf(column.id) + 1}
                   </span>
                 ) : null}
@@ -203,7 +203,7 @@ export function GridToolPanel<T>({
           {pivotOn ? (
             <div className="grid gap-2 pt-1">
               <fieldset className="grid gap-0.5 border-0 p-0">
-                <legend className="px-1 pb-0.5 text-[12px] text-ink-3">{labels.pivotRows}</legend>
+                <legend className="px-1 pb-0.5 text-fs-120 text-ink-3">{labels.pivotRows}</legend>
                 {dimensions
                   .filter((column) => column.id !== pivot.column)
                   .map((column) => (
@@ -224,7 +224,7 @@ export function GridToolPanel<T>({
                   ))}
               </fieldset>
               <label className="grid gap-1" htmlFor={`${id}-column`}>
-                <span className="px-1 text-[12px] text-ink-3">{labels.pivotColumn}</span>
+                <span className="px-1 text-fs-120 text-ink-3">{labels.pivotColumn}</span>
                 <select
                   id={`${id}-column`}
                   className={selectClass}
@@ -245,7 +245,7 @@ export function GridToolPanel<T>({
                 </select>
               </label>
               <label className="grid gap-1" htmlFor={`${id}-value`}>
-                <span className="px-1 text-[12px] text-ink-3">{labels.pivotValue}</span>
+                <span className="px-1 text-fs-120 text-ink-3">{labels.pivotValue}</span>
                 <select
                   id={`${id}-value`}
                   className={selectClass}
@@ -261,7 +261,7 @@ export function GridToolPanel<T>({
                 </select>
               </label>
               <label className="grid gap-1" htmlFor={`${id}-aggregate`}>
-                <span className="px-1 text-[12px] text-ink-3">{labels.pivotAggregate}</span>
+                <span className="px-1 text-fs-120 text-ink-3">{labels.pivotAggregate}</span>
                 <select
                   id={`${id}-aggregate`}
                   className={selectClass}
@@ -276,7 +276,7 @@ export function GridToolPanel<T>({
                 </select>
               </label>
               {pivotValid ? null : (
-                <p role="status" className="px-1 text-[12px] text-ink-3">
+                <p role="status" className="px-1 text-fs-120 text-ink-3">
                   {labels.pivotIncomplete}
                 </p>
               )}

package/src/containers/description-list/description-list.tsx

@@ -13,7 +13,7 @@ export function DescriptionList({ className, ...props }: DescriptionListProps) {
     <div className="@container/dl min-w-0">
       <dl
         className={cn(
-          "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-[9px] text-[13px]",
+          "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2.25 text-fs-130",
           "[&_dt]:text-ink-3 [&_dd]:m-0 [&_dd]:min-w-0 [&_dd]:break-words [&_dd]:text-right [&_dd]:font-semibold",
           "@max-sm/dl:grid-cols-1 @max-sm/dl:gap-y-0.5 @max-sm/dl:[&_dd]:mb-2 @max-sm/dl:[&_dd]:text-left",
           className,

package/src/containers/facts/facts.tsx

@@ -14,8 +14,8 @@ export function Facts({ className, ...props }: FactsProps) {
       <dl
         className={cn(
           "mt-3.5 grid grid-cols-3 gap-3.5 border-t-divider border-dashed pt-3.5",
-          "[&_dt]:font-semibold [&_dt]:text-[11.5px] [&_dt]:text-ink-3",
-          "[&_dd]:mt-0.5 [&_dd]:font-[620] [&_dd]:text-[13px]",
+          "[&_dt]:font-semibold [&_dt]:text-fs-115 [&_dt]:text-ink-3",
+          "[&_dd]:mt-0.5 [&_dd]:font-[620] [&_dd]:text-fs-130",
           "[&_dt]:break-words [&_dd]:break-words @max-[560px]/facts:grid-cols-1",
           className,
         )}

package/src/containers/file-tree/file-tree.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { type KeyboardEvent, useMemo, useRef, useState } from "react";
 import {
   ChevronRight,
   File,
@@ -8,9 +9,9 @@ import {
   FileText,
   Folder,
   FolderOpen,
-  type LucideIcon,
-} from "lucide-react";
-import { type KeyboardEvent, useMemo, useRef, useState } from "react";
+  type IconComponent,
+} from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import {
   type FileTreeNode,
@@ -21,6 +22,8 @@ import {
   typeahead,
 } from "./model.js";
 
+export type FileTreePart = "root" | "tree" | "item" | "chevron" | "icon" | "name";
+
 export interface FileTreeProps {
   nodes: FileTreeNode[];
   /** Accessible name of the tree. */
@@ -32,6 +35,8 @@ export interface FileTreeProps {
   defaultExpandedIds?: string[];
   onExpandedChange?: (ids: string[]) => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<FileTreePart>;
 }
 
 const TREE_KEYS: readonly string[] = [
@@ -43,7 +48,7 @@ const TREE_KEYS: readonly string[] = [
   "End",
 ];
 
-function iconFor(name: string): LucideIcon {
+function iconFor(name: string): IconComponent {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   if (["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return FileImage;
   if (["ts", "tsx", "js", "jsx", "json", "css", "html"].includes(ext)) return FileCode;
@@ -65,6 +70,7 @@ export function FileTree({
   defaultExpandedIds = [],
   onExpandedChange,
   className,
+  classNames,
 }: FileTreeProps) {
   const [selectedState, setSelectedState] = useState(defaultSelectedId);
   const [expandedState, setExpandedState] = useState(defaultExpandedIds);
@@ -127,8 +133,13 @@ export function FileTree({
   };
 
   return (
-    <div className={cn("@container/tree min-w-0", className)}>
-      <div ref={listRef} role="tree" aria-label={label} className="flex flex-col gap-0.5">
+    <div className={cn("@container/tree min-w-0", classNames?.root, className)}>
+      <div
+        ref={listRef}
+        role="tree"
+        aria-label={label}
+        className={cn("flex flex-col gap-0.5", classNames?.tree)}
+      >
         {rows.map((row) => {
           const isSelected = row.node.id === selected;
           const Icon = row.isFolder ? (row.expanded ? FolderOpen : Folder) : iconFor(row.node.name);
@@ -158,9 +169,15 @@ export function FileTree({
               className={cn(
                 "pressable flex min-h-control-sm min-w-0 cursor-pointer items-center gap-density-sm rounded-button pe-control-x text-body text-ink outline-none hover:bg-surface-2 focus-visible:focus-ring",
                 isSelected && "bg-accent-soft font-semibold text-accent-ink shadow-selected",
+                classNames?.item,
               )}
             >
-              <span className="flex size-4 shrink-0 items-center justify-center text-ink-3">
+              <span
+                className={cn(
+                  "flex size-4 shrink-0 items-center justify-center text-ink-3",
+                  classNames?.chevron,
+                )}
+              >
                 {row.isFolder ? (
                   <ChevronRight
                     aria-hidden="true"
@@ -173,9 +190,13 @@ export function FileTree({
               </span>
               <Icon
                 aria-hidden="true"
-                className={cn("size-4 shrink-0", row.isFolder ? "text-accent-ink" : "text-ink-3")}
+                className={cn(
+                  "size-4 shrink-0",
+                  row.isFolder ? "text-accent-ink" : "text-ink-3",
+                  classNames?.icon,
+                )}
               />
-              <span className="min-w-0 truncate">{row.node.name}</span>
+              <span className={cn("min-w-0 truncate", classNames?.name)}>{row.node.name}</span>
             </div>
           );
         })}

package/src/containers/file-tree/index.ts

@@ -1,4 +1,4 @@
-export { FileTree, type FileTreeProps } from "./file-tree.js";
+export { FileTree, type FileTreePart, type FileTreeProps } from "./file-tree.js";
 export {
   ancestorsOf,
   type FileTreeNode,

package/src/containers/generic-row/generic-row.tsx

@@ -12,7 +12,7 @@ export function GenericRow({ className, ...props }: GenericRowProps) {
   return (
     <div
       className={cn(
-        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-t-divider px-4 py-[11px] first:border-t-0",
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-t-divider px-4 py-2.75 first:border-t-0",
         className,
       )}
       {...props}
@@ -30,12 +30,12 @@ export function GenericRowContent({ className, ...props }: GenericRowContentProp
 export type GenericRowTitleProps = ComponentPropsWithoutRef<"div">;
 
 export function GenericRowTitle({ className, ...props }: GenericRowTitleProps) {
-  return <div className={cn("break-words font-[650] text-[13px]", className)} {...props} />;
+  return <div className={cn("break-words font-[650] text-fs-130", className)} {...props} />;
 }
 
 export type GenericRowMetaProps = ComponentPropsWithoutRef<"div">;
 
 /** Secondary metadata under the title. */
 export function GenericRowMeta({ className, ...props }: GenericRowMetaProps) {
-  return <div className={cn("break-words text-[12px] text-ink-3", className)} {...props} />;
+  return <div className={cn("break-words text-fs-120 text-ink-3", className)} {...props} />;
 }