@lovett/ui 0.0.1

package/src/data-grid/sortable-parts.tsx

@@ -0,0 +1,215 @@
+/**
+ * SortableHeaderCell + SortableColumnOptionItem — dnd-kit-driven
+ * column reorder UI.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/sortable-parts.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR:
+ *  • Token reskin to workspace vocabulary per ADR-025 D7
+ *  • @tabler/icons-react → lucide-react per CLAUDE.md §6 (DEV-4)
+ *  • Imports DropdownMenuCheckboxItem from the workspace
+ *    dropdown-menu (BUILD_FRESH per DEV-3) and TableHead from the
+ *    local table-elements (inlined per DEV-1)
+ */
+
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+} from 'react'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { ChevronDown, ChevronsUpDown, ChevronUp, GripVertical } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+import { DropdownMenuCheckboxItem } from '../dropdown-menu'
+import { TableHead } from './table-elements'
+
+import type { DataGridColumn } from './types'
+
+type SortableHeaderCellProps<ColumnId extends string> = {
+  column: DataGridColumn<ColumnId>
+  width: number
+  onResize: (
+    event: ReactPointerEvent<HTMLButtonElement>,
+    columnId: ColumnId,
+  ) => void
+  /** ADR-027 — current sort direction for THIS column, or null when this
+   * column is not the active sort. */
+  sortDir: 'asc' | 'desc' | null
+  /** ADR-027 — header click handler. When omitted the header is non-
+   * interactive for sort (column reorder + resize still work). */
+  onSortChange: ((columnId: ColumnId) => void) | undefined
+}
+
+type SortableColumnOptionItemProps<ColumnId extends string> = {
+  column: DataGridColumn<ColumnId>
+  checked: boolean
+  disabled: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+function ColumnHead<ColumnId extends string>({
+  icon: Icon,
+  label,
+}: Pick<DataGridColumn<ColumnId>, 'icon' | 'label'>) {
+  // `leading-tight` (1.25) keeps the header compact but gives descenders
+  // ('y','g','p','q') enough vertical room so they don't get clipped by
+  // the parent th's overflow-hidden. The previous `leading-none` (= font
+  // size) clipped the bottom of descenders.
+  return (
+    <span className="flex min-w-0 items-center gap-1.5 leading-tight">
+      <Icon className="h-3.5 w-3.5 shrink-0" />
+      <span className="truncate">{label}</span>
+    </span>
+  )
+}
+
+export function SortableColumnOptionItem<ColumnId extends string>({
+  column,
+  checked,
+  disabled,
+  onCheckedChange,
+}: SortableColumnOptionItemProps<ColumnId>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: column.id,
+    disabled,
+  })
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Translate.toString(transform),
+        transition,
+      }}
+    >
+      <DropdownMenuCheckboxItem
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={(next) => onCheckedChange(next === true)}
+        className={cn(
+          'touch-none pl-1.5',
+          isDragging && 'opacity-70',
+        )}
+        style={isDragging ? { background: 'rgb(var(--surface-overlay))' } : undefined}
+      >
+        <span
+          {...attributes}
+          {...listeners}
+          role="button"
+          aria-label={`Reorder ${column.label}`}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          className="inline-flex h-5 w-5 shrink-0 cursor-grab items-center justify-center rounded-[4px] transition-colors active:cursor-grabbing"
+          style={{ color: 'rgb(var(--text-muted))' }}
+        >
+          <GripVertical className="h-3.5 w-3.5" />
+        </span>
+        <span className="truncate">{column.label}</span>
+      </DropdownMenuCheckboxItem>
+    </div>
+  )
+}
+
+export function SortableHeaderCell<ColumnId extends string>({
+  column,
+  width,
+  onResize,
+  sortDir,
+  onSortChange,
+}: SortableHeaderCellProps<ColumnId>) {
+  // ADR-027 — column sortability: explicit `sortable: false` opts out;
+  // missing `onSortChange` also disables (no parent handler).
+  const isSortable =
+    column.sortable !== false && typeof onSortChange === 'function'
+  const ariaSort: 'ascending' | 'descending' | 'none' = !isSortable
+    ? 'none'
+    : sortDir === 'asc'
+      ? 'ascending'
+      : sortDir === 'desc'
+        ? 'descending'
+        : 'none'
+
+  function handleSortClick() {
+    if (!isSortable) return
+    onSortChange!(column.id)
+  }
+
+  function handleSortKey(event: ReactKeyboardEvent<HTMLDivElement>) {
+    if (!isSortable) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onSortChange!(column.id)
+    }
+  }
+
+  return (
+    <TableHead
+      aria-sort={ariaSort}
+      tabIndex={isSortable ? 0 : undefined}
+      onClick={isSortable ? handleSortClick : undefined}
+      onKeyDown={isSortable ? handleSortKey : undefined}
+      className={cn(
+        'group/column-head relative h-10 overflow-hidden px-2 text-sm',
+        isSortable && 'cursor-pointer select-none',
+      )}
+      style={{
+        width,
+        minWidth: width,
+        transition: 'none',
+        borderRight: '1px solid rgb(var(--border))',
+        background: 'rgb(var(--surface-overlay-soft))',
+        color: 'rgb(var(--foreground))',
+      }}
+    >
+      <div className="flex h-full min-w-0 items-center justify-between gap-1 overflow-hidden">
+        <ColumnHead icon={column.icon} label={column.label} />
+        {isSortable &&
+          (sortDir === 'asc' ? (
+            <ChevronUp
+              className="h-3.5 w-3.5 shrink-0"
+              style={{ color: 'rgb(var(--foreground))' }}
+              aria-hidden
+            />
+          ) : sortDir === 'desc' ? (
+            <ChevronDown
+              className="h-3.5 w-3.5 shrink-0"
+              style={{ color: 'rgb(var(--foreground))' }}
+              aria-hidden
+            />
+          ) : (
+            <ChevronsUpDown
+              className="h-3.5 w-3.5 shrink-0 opacity-40"
+              style={{ color: 'rgb(var(--text-muted))' }}
+              aria-hidden
+            />
+          ))}
+      </div>
+      <button
+        type="button"
+        aria-label={`Resize ${column.label} column`}
+        className="absolute top-0 right-0 flex h-full w-3 cursor-col-resize items-center justify-center transition-colors"
+        style={{ color: 'rgb(var(--text-muted))' }}
+        onPointerDown={(event) => {
+          // Don't bubble the resize-pointer-down up to the th's onClick
+          // sort handler — resize is its own interaction.
+          event.stopPropagation()
+          onResize(event, column.id)
+        }}
+      />
+    </TableHead>
+  )
+}

package/src/data-grid/table-body.tsx

@@ -0,0 +1,238 @@
+/**
+ * DataGridTableBody — row + cell render with editing state, focus,
+ * keyboard navigation, and the open-drawer affordance.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-body.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR:
+ *  • Token reskin per ADR-025 D7
+ *  • @tabler/icons-react → lucide-react (DEV-4)
+ *  • Checkbox + Button from workspace primitives (DEV-2 + existing
+ *    @lovett/ui Button)
+ *  • Source's `size="xs"` Button maps to workspace `size="sm"`
+ *    (workspace Button only ships sm/md/lg)
+ *  • Inline edit input uses workspace token vocabulary directly
+ *    rather than the Input primitive — the input is intentionally
+ *    compact (h-7) and edge-to-edge inside the cell, not a typical
+ *    form input.
+ */
+
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  ReactNode,
+  RefObject,
+} from 'react'
+
+import { ExternalLink } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+import { Button } from '../button'
+import { Checkbox } from '../checkbox'
+import { TableBody, TableCell, TableRow } from './table-elements'
+
+import type {
+  DataGridColumn,
+  DataGridRowBase,
+  EditingCell,
+} from './types'
+
+type DataGridTableBodyProps<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+> = {
+  visibleRows: Row[]
+  getRowLabel: (row: Row) => string
+  visibleColumns: DataGridColumn<ColumnId>[]
+  editingCell: EditingCell<ColumnId> | null
+  isEditableColumn: (columnId: ColumnId) => boolean
+  startEditing: (row: Row, columnId: ColumnId) => void
+  onCellKeyDown: (
+    event: ReactKeyboardEvent<HTMLTableCellElement>,
+    row: Row,
+    rowIndex: number,
+    column: DataGridColumn<ColumnId>,
+    colIndex: number,
+  ) => void
+  inputRef: RefObject<HTMLInputElement | null>
+  draftValue: string
+  setDraftValue: (value: string) => void
+  commitEdit: () => void
+  cancelEdit: () => void
+  canOpenDrawer: (columnId: ColumnId) => boolean
+  renderCell: (row: Row, column: DataGridColumn<ColumnId>) => ReactNode
+  onOpenDrawer: (cell: EditingCell<ColumnId>) => void
+  selectedRowIds: string[]
+  onToggleRowSelection: (rowId: string, checked: boolean) => void
+  columnWidths: Record<ColumnId, number>
+  draggingColumnId: ColumnId | null
+}
+
+export function DataGridTableBody<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+>({
+  visibleRows,
+  getRowLabel,
+  visibleColumns,
+  editingCell,
+  isEditableColumn,
+  startEditing,
+  onCellKeyDown,
+  inputRef,
+  draftValue,
+  setDraftValue,
+  commitEdit,
+  cancelEdit,
+  canOpenDrawer,
+  renderCell,
+  onOpenDrawer,
+  selectedRowIds,
+  onToggleRowSelection,
+  columnWidths,
+  draggingColumnId,
+}: DataGridTableBodyProps<Row, ColumnId>) {
+  return (
+    <TableBody>
+      {visibleRows.map((row, rowIndex) => (
+        <TableRow key={row.id}>
+          <TableCell
+            className="h-10 px-0 text-center"
+            style={{ borderRight: '1px solid rgb(var(--border))' }}
+          >
+            <Checkbox
+              aria-label={`Select ${getRowLabel(row)}`}
+              checked={selectedRowIds.includes(row.id)}
+              onCheckedChange={(checked) =>
+                onToggleRowSelection(row.id, checked === true)
+              }
+              className="mx-auto"
+            />
+          </TableCell>
+          {visibleColumns.map((column, colIndex) => {
+            const isEditing =
+              editingCell?.rowId === row.id &&
+              editingCell.columnId === column.id
+            const editable = isEditableColumn(column.id)
+            const showDrawerAction = canOpenDrawer(column.id)
+            const isDraggingThisColumn = draggingColumnId === column.id
+
+            return (
+              <TableCell
+                key={`${row.id}-${column.id}`}
+                data-grid-cell="true"
+                data-row-index={rowIndex}
+                data-col-index={colIndex}
+                tabIndex={isEditing ? -1 : 0}
+                className={cn(
+                  'group/cell relative h-10 overflow-hidden px-2 py-1 whitespace-nowrap outline-none',
+                  editable && 'cursor-text',
+                )}
+                style={{
+                  width: columnWidths[column.id],
+                  minWidth: columnWidths[column.id],
+                  borderRight: '1px solid rgb(var(--border))',
+                  background: isDraggingThisColumn
+                    ? 'rgb(var(--surface-overlay-soft))'
+                    : undefined,
+                }}
+                onDoubleClick={() => {
+                  if (editable) startEditing(row, column.id)
+                }}
+                onKeyDown={(event) =>
+                  onCellKeyDown(event, row, rowIndex, column, colIndex)
+                }
+              >
+                {isEditing ? (
+                  <input
+                    ref={inputRef}
+                    value={draftValue}
+                    onChange={(event) => setDraftValue(event.target.value)}
+                    onBlur={commitEdit}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault()
+                        commitEdit()
+                      }
+
+                      if (event.key === 'Escape') {
+                        event.preventDefault()
+                        cancelEdit()
+                      }
+                    }}
+                    className="h-7 w-full px-2 text-xs outline-none rounded-[var(--radius-sm)]"
+                    style={{
+                      background: 'rgb(var(--bg-input))',
+                      border: '1px solid rgb(var(--border-strong))',
+                      color: 'rgb(var(--foreground))',
+                    }}
+                  />
+                ) : (
+                  <>
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute inset-0 transition-colors duration-150"
+                      style={{ border: '1px solid transparent' }}
+                    />
+                    <div
+                      className={cn(
+                        'min-w-0 truncate transition-[padding] duration-150',
+                        showDrawerAction &&
+                          'group-hover/cell:pr-16 group-focus-within/cell:pr-16',
+                      )}
+                      style={{ color: 'rgb(var(--foreground))' }}
+                    >
+                      {renderCell(row, column)}
+                    </div>
+                    {showDrawerAction ? (
+                      <div className="pointer-events-none absolute top-1/2 right-1.5 z-10 -translate-y-1/2 opacity-0 transition-all group-focus-within/cell:pointer-events-auto group-focus-within/cell:opacity-100 group-hover/cell:pointer-events-auto group-hover/cell:opacity-100">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          aria-label={`Open details for ${getRowLabel(row)} ${column.label}`}
+                          title="Open drawer"
+                          className="h-7 px-2.5"
+                          onPointerDown={(event) => {
+                            event.stopPropagation()
+                          }}
+                          onDoubleClick={(event) => {
+                            event.stopPropagation()
+                          }}
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            const originElement =
+                              event.currentTarget.closest('td') ??
+                              event.currentTarget
+                            const originRect =
+                              originElement.getBoundingClientRect()
+
+                            onOpenDrawer({
+                              rowId: row.id,
+                              columnId: column.id,
+                              originRect: {
+                                x: originRect.x,
+                                y: originRect.y,
+                                width: originRect.width,
+                                height: originRect.height,
+                              },
+                            })
+                          }}
+                          leadingIcon={<ExternalLink className="h-3.5 w-3.5" />}
+                        >
+                          Open
+                        </Button>
+                      </div>
+                    ) : null}
+                  </>
+                )}
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      ))}
+    </TableBody>
+  )
+}

package/src/data-grid/table-elements.tsx

@@ -0,0 +1,135 @@
+/**
+ * Table* — thin <table> / <thead> / <tbody> sub-components used
+ * internally by DataGrid.
+ *
+ * Inlined locally (NOT promoted to a top-level @lovett/ui Table
+ * primitive) per ADR-025 DEVIATION-1. Recon §5 anticipated this
+ * ("Probably LEAVE_BEHIND — DataGrid's table-view supersedes a
+ * standalone Table primitive"); the deviation realizes that
+ * assumption by keeping these wrappers scoped to data-grid/.
+ *
+ * Inspired by gray-ui-csm `components/ui/table.tsx` (MIT,
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/ui/table.tsx)
+ * — see packages/ui/licenses/gray-ui-csm-LICENSE.txt.
+ *
+ * Workspace ADR: ADR-025
+ * Ported 2026-05-18
+ */
+
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ThHTMLAttributes,
+  type TdHTMLAttributes,
+} from 'react'
+import { cn } from '../lib/utils'
+
+export const Table = forwardRef<
+  HTMLTableElement,
+  HTMLAttributes<HTMLTableElement> & { containerClassName?: string | undefined }
+>(function Table({ className, containerClassName, ...props }, ref) {
+  return (
+    <div
+      className={cn('relative w-full overflow-auto', containerClassName)}
+      style={{
+        border: '1px solid rgb(var(--border))',
+        borderRadius: 'var(--radius-lg)',
+      }}
+    >
+      <table
+        ref={ref}
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+})
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableHeader({ className, ...props }, ref) {
+  return (
+    <thead
+      ref={ref}
+      className={cn(className)}
+      style={{ borderBottom: '1px solid rgb(var(--border))' }}
+      {...props}
+    />
+  )
+})
+
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableBody({ className, ...props }, ref) {
+  return (
+    <tbody
+      ref={ref}
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+})
+
+export const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(function TableFooter({ className, ...props }, ref) {
+  return (
+    <tfoot
+      ref={ref}
+      className={cn('font-normal [&>tr]:last:border-b-0', className)}
+      style={{
+        borderTop: '1px solid rgb(var(--border))',
+        background: 'rgb(var(--surface-overlay-soft))',
+      }}
+      {...props}
+    />
+  )
+})
+
+export const TableRow = forwardRef<
+  HTMLTableRowElement,
+  HTMLAttributes<HTMLTableRowElement>
+>(function TableRow({ className, ...props }, ref) {
+  // border-b is a Tailwind class so the `[&_tr:last-child]:border-0`
+  // selector on <TableBody> can override it. (Previously this was an
+  // inline style, which `border-0` couldn't override — combined with
+  // the new outer container border it would have produced a double
+  // line on the bottom edge.)
+  return (
+    <tr
+      ref={ref}
+      className={cn(
+        'transition-colors',
+        'border-b border-[rgb(var(--border))]',
+        'hover:bg-[rgb(var(--surface-overlay-soft))]',
+        'data-[state=selected]:bg-[rgb(var(--surface-overlay))]',
+        className,
+      )}
+      {...props}
+    />
+  )
+})
+
+export const TableHead = forwardRef<
+  HTMLTableCellElement,
+  ThHTMLAttributes<HTMLTableCellElement>
+>(function TableHead({ className, ...props }, ref) {
+  return (
+    <th
+      ref={ref}
+      className={cn('h-10 px-4 text-left align-middle font-medium', className)}
+      style={{ color: 'rgb(var(--text-muted))' }}
+      {...props}
+    />
+  )
+})
+
+export const TableCell = forwardRef<
+  HTMLTableCellElement,
+  TdHTMLAttributes<HTMLTableCellElement>
+>(function TableCell({ className, ...props }, ref) {
+  return <td ref={ref} className={cn('p-4 align-middle', className)} {...props} />
+})

package/src/data-grid/table-header.tsx

@@ -0,0 +1,95 @@
+/**
+ * DataGridTableHeader — the column-header row including the
+ * select-all checkbox cell.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/table-header.tsx
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR:
+ *  • Token reskin per ADR-025 D7
+ *  • Checkbox imported from workspace BUILD_FRESH primitive (DEV-2)
+ *  • Table sub-components from local table-elements (DEV-1)
+ */
+
+import type { PointerEvent as ReactPointerEvent } from 'react'
+
+import { Checkbox } from '../checkbox'
+import { TableHead, TableHeader, TableRow } from './table-elements'
+
+import { SortableHeaderCell } from './sortable-parts'
+import type { DataGridColumn, DataGridSortState } from './types'
+
+const CONTROL_COLUMN_WIDTH = 40
+
+type DataGridTableHeaderProps<ColumnId extends string> = {
+  visibleColumns: DataGridColumn<ColumnId>[]
+  columnWidths: Record<ColumnId, number>
+  allVisibleRowsSelected: boolean
+  someVisibleRowsSelected: boolean
+  onToggleAllRows: (checked: boolean) => void
+  onResizeStart: (
+    event: ReactPointerEvent<HTMLButtonElement>,
+    columnId: ColumnId,
+  ) => void
+  sort: DataGridSortState<ColumnId> | null
+  onSortChange: ((columnId: ColumnId) => void) | undefined
+}
+
+export function DataGridTableHeader<ColumnId extends string>({
+  visibleColumns,
+  columnWidths,
+  allVisibleRowsSelected,
+  someVisibleRowsSelected,
+  onToggleAllRows,
+  onResizeStart,
+  sort,
+  onSortChange,
+}: DataGridTableHeaderProps<ColumnId>) {
+  return (
+    <>
+      <colgroup>
+        <col style={{ width: CONTROL_COLUMN_WIDTH }} />
+        {visibleColumns.map((column) => (
+          <col
+            key={`col-${column.id}`}
+            style={{ width: columnWidths[column.id] }}
+          />
+        ))}
+      </colgroup>
+
+      <TableHeader style={{ background: 'rgb(var(--bg-card))' }}>
+        <TableRow style={{ background: 'rgb(var(--surface-overlay-soft))' }}>
+          <TableHead
+            className="h-10 w-10 px-0 text-center"
+            style={{
+              borderRight: '1px solid rgb(var(--border))',
+              background: 'rgb(var(--surface-overlay-soft))',
+            }}
+          >
+            <Checkbox
+              aria-label="Select all rows"
+              checked={allVisibleRowsSelected}
+              indeterminate={someVisibleRowsSelected}
+              onCheckedChange={(checked) => onToggleAllRows(checked === true)}
+              className="mx-auto"
+            />
+          </TableHead>
+          {visibleColumns.map((column) => (
+            <SortableHeaderCell
+              key={column.id}
+              column={column}
+              width={columnWidths[column.id]}
+              onResize={onResizeStart}
+              sortDir={
+                sort?.columnId === column.id ? sort.dir : null
+              }
+              onSortChange={onSortChange}
+            />
+          ))}
+        </TableRow>
+      </TableHeader>
+    </>
+  )
+}