feat(ui): add data display primitives

packages/ui/package.json

@@ -84,6 +84,14 @@
       "types": "./dist/components/Switch.d.ts",
       "import": "./dist/components/Switch.js"
     },
+    "./data-list": {
+      "types": "./dist/components/DataList.d.ts",
+      "import": "./dist/components/DataList.js"
+    },
+    "./data-table": {
+      "types": "./dist/components/DataTable.d.ts",
+      "import": "./dist/components/DataTable.js"
+    },
     "./separator": {
       "types": "./dist/components/Separator.d.ts",
       "import": "./dist/components/Separator.js"

packages/ui/src/components/DataList.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+
+export interface DataListProps extends React.HTMLAttributes<HTMLDivElement> {
+  density?: 'compact' | 'normal' | 'spacious';
+}
+
+const densityClasses: Record<NonNullable<DataListProps['density']>, string> = {
+  compact: 'gap-1',
+  normal: 'gap-2',
+  spacious: 'gap-3',
+};
+
+export function DataList({ density = 'normal', className, children, ...props }: DataListProps) {
+  return (
+    <div className={clsx('grid', densityClasses[density], className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+}
+
+export function DataListItem({ selected, className, children, ...props }: DataListItemProps) {
+  return (
+    <div
+      data-selected={selected ? 'true' : undefined}
+      className={clsx(
+        'rounded-lg border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-3 text-[var(--bl-text-primary)]',
+        selected && 'border-[var(--bl-accent)] bg-[var(--bl-accent-muted,var(--bl-surface-muted))]',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface DataListMetaProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function DataListMeta({ className, children, ...props }: DataListMetaProps) {
+  return (
+    <div
+      className={clsx(
+        'flex flex-wrap items-center gap-2 text-xs text-[var(--bl-text-secondary)]',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

packages/ui/src/components/DataTable.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+
+export type DataTableProps = React.TableHTMLAttributes<HTMLElement>;
+
+export function DataTable({ className, children, ...props }: DataTableProps) {
+  return (
+    <div className="w-full overflow-x-auto rounded-lg border border-[var(--bl-border)]">
+      <table
+        className={clsx(
+          'w-full border-collapse text-left text-sm text-[var(--bl-text-primary)]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export type DataTableHeaderProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataTableHeader({ className, ...props }: DataTableHeaderProps) {
+  return <thead className={clsx('bg-[var(--bl-surface-muted)]', className)} {...props} />;
+}
+
+export type DataTableBodyProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataTableBody({ className, ...props }: DataTableBodyProps) {
+  return <tbody className={clsx('divide-y divide-[var(--bl-border)]', className)} {...props} />;
+}
+
+export type DataTableRowProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataTableRow({ className, ...props }: DataTableRowProps) {
+  return (
+    <tr
+      className={clsx('transition-colors hover:bg-[var(--bl-surface-muted)]', className)}
+      {...props}
+    />
+  );
+}
+
+export type DataTableHeadProps = React.ThHTMLAttributes<HTMLElement>;
+
+export function DataTableHead({ className, ...props }: DataTableHeadProps) {
+  return (
+    <th
+      className={clsx('px-3 py-2 text-xs font-medium text-[var(--bl-text-secondary)]', className)}
+      {...props}
+    />
+  );
+}
+
+export type DataTableCellProps = React.TdHTMLAttributes<HTMLElement>;
+
+export function DataTableCell({ className, ...props }: DataTableCellProps) {
+  return <td className={clsx('px-3 py-2 align-middle', className)} {...props} />;
+}

packages/ui/src/index.ts

@@ -44,6 +44,28 @@ export {
 export { ListItemButton, type ListItemButtonProps } from './components/ListItemButton';
 export { Timeline, type TimelineItem, type TimelineProps } from './components/Timeline';
 export { DiffCard, type DiffCardProps } from './components/DiffCard';
+export {
+  DataList,
+  DataListItem,
+  DataListMeta,
+  type DataListItemProps,
+  type DataListMetaProps,
+  type DataListProps,
+} from './components/DataList';
+export {
+  DataTable,
+  DataTableBody,
+  DataTableCell,
+  DataTableHead,
+  DataTableHeader,
+  DataTableRow,
+  type DataTableBodyProps,
+  type DataTableCellProps,
+  type DataTableHeadProps,
+  type DataTableHeaderProps,
+  type DataTableProps,
+  type DataTableRowProps,
+} from './components/DataTable';
 export { Label, type LabelProps } from './components/Label';
 export { Select, type SelectProps } from './components/Select';
 export {