rechta-ds 0.0.0

package/packages/ui/src/components/charts/Charts.tsx

@@ -0,0 +1,380 @@
+/**
+ * Charts — @rechta/ui v2.1.0
+ *
+ * Stripe/Linear visual style — Sessions 6-7 overhaul:
+ * - Ultra-thin 1.5px strokes
+ * - Gradient fills capped at 0.2–0.3 opacity, fade to transparent
+ * - Dashed comparison/benchmark line (Stripe "prior period" pattern)
+ * - Slim bars (maxBarSize 18-22), generous breathing room
+ * - Chart palette: violet #5E6AD2 primary, blue #60A5FA, indigo #818CF8
+ * - KPI strip: mono label → Ruda 900 number → delta badge
+ *
+ * Charts:
+ *  1. AreaChartStripe   — area with dashed prior-period comparison
+ *  2. BarChartStripe    — slim grouped bars
+ *  3. BarChartHorizontal— platform/creator ranking
+ *  4. BarChartStacked   — campaign post status
+ *  5. AreaChartStacked  — authenticity stacked area
+ *  6. DonutChart        — audience demographics
+ *  7. KpiStrip          — 4-cell Stripe-style KPI row
+ *  8. Sparkline         — inline SVG micro-chart
+ *  9. ChartCard         — wrapper with badge + subtitle
+ */
+
+import * as React from "react";
+import {
+  AreaChart, Area, BarChart, Bar, LineChart, Line,
+  PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+  ResponsiveContainer, ReferenceLine,
+} from "recharts";
+
+// ─── Palette ───────────────────────────────────────────────────────────────────
+export const CHART = {
+  brand:   "var(--c-chart-1)",   // violet
+  blue:    "var(--c-chart-2)",   // blue
+  indigo:  "var(--c-chart-3)",   // indigo
+  emerald: "var(--c-chart-4)",
+  amber:   "var(--c-chart-5)",
+  axis:    "var(--c-text-muted)",
+  grid:    "var(--c-border-subtle)",
+  tooltip: { bg: "var(--c-bg-elevated)", border: "var(--c-border)" },
+} as const;
+
+// ─── Tooltip ───────────────────────────────────────────────────────────────────
+interface TooltipPayloadItem {
+  name: string;
+  value: number;
+  color?: string;
+  fill?: string;
+}
+interface TooltipProps {
+  active?: boolean;
+  payload?: TooltipPayloadItem[];
+  label?: string;
+  formatter?: (v: number, name: string) => string;
+  labelFormatter?: (label: string) => string;
+}
+
+export const RechtaTooltip: React.FC<TooltipProps> = ({
+  active, payload, label, formatter, labelFormatter,
+}) => {
+  if (!active || !payload?.length) return null;
+  const filtered = payload.filter(p => p.value !== undefined && p.value !== null);
+  return (
+    <div style={{
+      background: "var(--c-bg-elevated)",
+      border: "1px solid var(--c-border)",
+      borderRadius: 10,
+      padding: "10px 13px",
+      boxShadow: "0 8px 30px rgba(0,0,0,.3)",
+      minWidth: 130,
+      backdropFilter: "blur(8px)",
+      fontFamily: "var(--font-sans)",
+    }}>
+      {label && (
+        <div style={{ fontSize: 11, color: "var(--c-text-muted)", marginBottom: 7, fontWeight: 500 }}>
+          {labelFormatter ? labelFormatter(label) : label}
+        </div>
+      )}
+      {filtered.map((p, i) => (
+        <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: i < filtered.length - 1 ? 5 : 0 }}>
+          <span style={{ width: 6, height: 6, borderRadius: "50%", background: p.color || p.fill, flexShrink: 0, display: "inline-block" }} />
+          <span style={{ fontSize: 12, color: "var(--c-text-muted)", flex: 1 }}>{p.name}</span>
+          <span style={{ fontSize: 12, color: "var(--c-text)", fontWeight: 600, marginLeft: 8 }}>
+            {formatter ? formatter(p.value, p.name) : p.value?.toLocaleString()}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ─── ChartCard ─────────────────────────────────────────────────────────────────
+interface BadgeInfo { label: string; variant?: "success" | "default"; }
+interface ChartCardProps {
+  title: string;
+  subtitle?: string;
+  badge?: BadgeInfo;
+  children: React.ReactNode;
+  span2?: boolean;
+}
+
+export const ChartCard: React.FC<ChartCardProps> = ({ title, subtitle, badge, children, span2 }) => (
+  <div style={{
+    background: "var(--c-bg-surface)",
+    border: "1px solid var(--c-border)",
+    borderRadius: 14,
+    padding: "20px 22px 18px",
+    gridColumn: span2 ? "span 2" : undefined,
+    position: "relative",
+    overflow: "hidden",
+  }}>
+    <div style={{ marginBottom: 16 }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 3 }}>
+        <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--c-text)", letterSpacing: "-.01em" }}>
+          {title}
+        </div>
+        {badge && (
+          <span style={{
+            fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 500,
+            padding: "2px 7px", borderRadius: 999,
+            background: badge.variant === "success" ? "rgba(34,197,94,.1)" : "rgba(100,116,139,.1)",
+            color: badge.variant === "success" ? "#4ade80" : "var(--c-text-muted)",
+            border: `1px solid ${badge.variant === "success" ? "rgba(74,222,128,.2)" : "rgba(100,116,139,.15)"}`,
+          }}>{badge.label}</span>
+        )}
+      </div>
+      {subtitle && (
+        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--c-text-muted)" }}>{subtitle}</div>
+      )}
+    </div>
+    {children}
+  </div>
+);
+
+// ─── KpiStrip ──────────────────────────────────────────────────────────────────
+// Stripe-style 4-cell row: mono label → Ruda 900 number → delta badge
+interface KpiCell {
+  label: string;
+  value: string;
+  delta?: string;
+  up?: boolean;
+  accent?: "brand" | "blue" | "emerald";
+}
+
+export const KpiStrip: React.FC<{ cells: KpiCell[] }> = ({ cells }) => (
+  <div className="chart-kpi-strip">
+    {cells.map((k, i) => (
+      <div key={i} className={`chart-kpi-cell ${k.accent ?? "accent"}`}>
+        <div className="chart-kpi-label">{k.label}</div>
+        <div className="chart-kpi-value">{k.value}</div>
+        {k.delta && (
+          <span className={`chart-delta ${k.up ? "up" : "down"}`}>
+            {k.up ? "↑" : "↓"} {k.delta}
+          </span>
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+// ─── 1. AreaChartStripe ────────────────────────────────────────────────────────
+// Stripe "Today" pattern: thin stroke, low-opacity fill, dashed prior-period line
+interface AreaStripeProps {
+  data: Array<Record<string, string | number>>;
+  xKey: string;
+  series: Array<{ key: string; name: string; color: string; dashed?: boolean }>;
+  referenceY?: number;
+  referenceLabel?: string;
+  height?: number;
+  formatter?: (v: number) => string;
+}
+
+export const AreaChartStripe: React.FC<AreaStripeProps> = ({
+  data, xKey, series, referenceY, referenceLabel, height = 200, formatter,
+}) => (
+  <ResponsiveContainer width="100%" height={height}>
+    <AreaChart data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
+      <defs>
+        {series.filter(s => !s.dashed).map(s => (
+          <linearGradient key={s.key} id={`ag-${s.key}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%"  stopColor={s.color} stopOpacity={0.22} />
+            <stop offset="95%" stopColor={s.color} stopOpacity={0} />
+          </linearGradient>
+        ))}
+      </defs>
+      <CartesianGrid strokeDasharray="3 3" stroke="var(--c-border-subtle)" vertical={false} />
+      <XAxis dataKey={xKey} tick={{ fill: "var(--c-text-muted)", fontSize: 10, fontFamily: "var(--font-mono)" }} axisLine={false} tickLine={false} />
+      <YAxis tickFormatter={formatter} tick={{ fill: "var(--c-text-muted)", fontSize: 10, fontFamily: "var(--font-mono)" }} axisLine={false} tickLine={false} width={44} />
+      <Tooltip content={<RechtaTooltip formatter={formatter} />} />
+      {referenceY !== undefined && (
+        <ReferenceLine y={referenceY} stroke="var(--c-border-mid)" strokeDasharray="4 4"
+          label={{ value: referenceLabel ?? "", fill: "var(--c-text-muted)", fontSize: 9, fontFamily: "var(--font-mono)" }} />
+      )}
+      {series.map(s => (
+        <Area
+          key={s.key}
+          type="monotone"
+          dataKey={s.key}
+          name={s.name}
+          stroke={s.color}
+          strokeWidth={s.dashed ? 1.5 : 1.5}
+          strokeDasharray={s.dashed ? "5 4" : undefined}
+          strokeOpacity={s.dashed ? 0.5 : 1}
+          fill={s.dashed ? "none" : `url(#ag-${s.key})`}
+          dot={false}
+          activeDot={{ r: 4, strokeWidth: 2, stroke: "var(--c-bg)" }}
+        />
+      ))}
+    </AreaChart>
+  </ResponsiveContainer>
+);
+
+// ─── 2. BarChartStripe ─────────────────────────────────────────────────────────
+// Slim bars (maxBarSize 20), lots of breathing room
+interface BarStripeProps {
+  data: Array<Record<string, string | number>>;
+  xKey: string;
+  series: Array<{ key: string; name: string; color: string }>;
+  stacked?: boolean;
+  height?: number;
+  formatter?: (v: number) => string;
+}
+
+export const BarChartStripe: React.FC<BarStripeProps> = ({
+  data, xKey, series, stacked, height = 200, formatter,
+}) => (
+  <ResponsiveContainer width="100%" height={height}>
+    <BarChart data={data} margin={{ top: 4, right: 4, left: 0, bottom: 0 }} barGap={3} barCategoryGap="30%">
+      <CartesianGrid strokeDasharray="3 3" stroke="var(--c-border-subtle)" vertical={false} />
+      <XAxis dataKey={xKey} tick={{ fill: "var(--c-text-muted)", fontSize: 10, fontFamily: "var(--font-mono)" }} axisLine={false} tickLine={false} />
+      <YAxis tickFormatter={formatter} tick={{ fill: "var(--c-text-muted)", fontSize: 10, fontFamily: "var(--font-mono)" }} axisLine={false} tickLine={false} width={44} />
+      <Tooltip content={<RechtaTooltip formatter={formatter} />} />
+      {series.map((s, i) => (
+        <Bar
+          key={s.key}
+          dataKey={s.key}
+          name={s.name}
+          fill={s.color}
+          stackId={stacked ? "a" : undefined}
+          radius={!stacked || i === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0]}
+          maxBarSize={stacked ? 32 : 20}
+        />
+      ))}
+    </BarChart>
+  </ResponsiveContainer>
+);
+
+// ─── 3. BarChartHorizontal ─────────────────────────────────────────────────────
+interface BarHorizProps {
+  data: Array<Record<string, string | number>>;
+  yKey: string;
+  valueKey: string;
+  valueName: string;
+  height?: number;
+  formatter?: (v: number) => string;
+}
+
+export const BarChartHorizontal: React.FC<BarHorizProps> = ({
+  data, yKey, valueKey, valueName, height = 200, formatter,
+}) => (
+  <ResponsiveContainer width="100%" height={height}>
+    <BarChart data={data} layout="vertical" margin={{ top: 0, right: 40, left: 0, bottom: 0 }}>
+      <CartesianGrid strokeDasharray="3 3" stroke="var(--c-border-subtle)" horizontal={false} />
+      <XAxis type="number" tickFormatter={formatter} tick={{ fill: "var(--c-text-muted)", fontSize: 9, fontFamily: "var(--font-mono)" }} axisLine={false} tickLine={false} />
+      <YAxis type="category" dataKey={yKey} tick={{ fill: "var(--c-text-muted)", fontSize: 10, fontFamily: "var(--font-sans)" }} axisLine={false} tickLine={false} width={80} />
+      <Tooltip content={<RechtaTooltip formatter={formatter} />} />
+      <Bar dataKey={valueKey} name={valueName} radius={[0, 3, 3, 0]} maxBarSize={18}>
+        {data.map((_, i) => (
+          <Cell key={i} fill={i === 0 ? "var(--c-chart-1)" : i < 3 ? "var(--c-chart-2)" : "var(--c-bg-surface-hover)"} />
+        ))}
+      </Bar>
+    </BarChart>
+  </ResponsiveContainer>
+);
+
+// ─── 4. DonutChart ─────────────────────────────────────────────────────────────
+interface DonutSlice { name: string; value: number; color: string; }
+interface DonutProps {
+  data: DonutSlice[];
+  centerLabel?: string;
+  centerSublabel?: string;
+  height?: number;
+  showLegend?: boolean;
+  showProgressBars?: boolean;
+}
+
+export const DonutChart: React.FC<DonutProps> = ({
+  data, centerLabel, centerSublabel, height = 180, showLegend = true, showProgressBars = false,
+}) => {
+  const [active, setActive] = React.useState<number | null>(null);
+  return (
+    <div>
+      <div style={{ position: "relative" }}>
+        <ResponsiveContainer width="100%" height={height}>
+          <PieChart>
+            <Pie
+              data={data} cx="50%" cy="50%"
+              innerRadius={52} outerRadius={76}
+              paddingAngle={3} dataKey="value" stroke="none"
+              onMouseEnter={(_, i) => setActive(i)}
+              onMouseLeave={() => setActive(null)}
+            >
+              {data.map((entry, i) => (
+                <Cell key={i} fill={entry.color} opacity={active === null || active === i ? 1 : 0.35} />
+              ))}
+            </Pie>
+            <Tooltip formatter={(v: number, n: string) => [`${v}%`, n]} />
+          </PieChart>
+        </ResponsiveContainer>
+        {(centerLabel || centerSublabel) && (
+          <div style={{
+            position: "absolute", top: "50%", left: "50%",
+            transform: "translate(-50%,-50%)", textAlign: "center", pointerEvents: "none",
+          }}>
+            {centerLabel && <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 900, color: "var(--c-text)" }}>{centerLabel}</div>}
+            {centerSublabel && <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--c-text-muted)", letterSpacing: ".08em" }}>{centerSublabel}</div>}
+          </div>
+        )}
+      </div>
+      {showLegend && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }}>
+          {data.map((item, i) => (
+            <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", opacity: active === null || active === i ? 1 : 0.4, transition: "opacity .15s" }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                <div style={{ width: 8, height: 8, borderRadius: 2, background: item.color, flexShrink: 0 }} />
+                <span style={{ fontSize: 12, color: "var(--c-text-2)", fontFamily: "var(--font-sans)" }}>{item.name}</span>
+              </div>
+              {showProgressBars ? (
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <div style={{ width: 60, height: 4, borderRadius: 2, background: "var(--c-bg-surface-hover)", overflow: "hidden" }}>
+                    <div style={{ height: "100%", width: `${item.value}%`, background: item.color, borderRadius: 2 }} />
+                  </div>
+                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--c-text-3)", minWidth: 28, textAlign: "right" }}>{item.value}%</span>
+                </div>
+              ) : (
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--c-text-3)", fontWeight: 500 }}>{item.value}%</span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── 5. Sparkline ──────────────────────────────────────────────────────────────
+interface SparklineProps {
+  data: number[];
+  color?: string;
+  width?: number;
+  height?: number;
+}
+
+export const Sparkline: React.FC<SparklineProps> = ({
+  data, color = "var(--c-chart-1)", width = 72, height = 24,
+}) => {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pts = data.map((v, i) => {
+    const x = (i / (data.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 4) - 2;
+    return `${x},${y}`;
+  }).join(" ");
+  const last = pts.split(" ").at(-1)!.split(",");
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+      <defs>
+        <linearGradient id={`sp-g`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%"   stopColor={color} stopOpacity={0.22} />
+          <stop offset="100%" stopColor={color} stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <polygon points={`0,${height} ${pts} ${width},${height}`} fill="url(#sp-g)" />
+      <polyline points={pts} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx={parseFloat(last[0])} cy={parseFloat(last[1])} r={2.5} fill={color} />
+    </svg>
+  );
+};

package/packages/ui/src/components/charts/DataTable.tsx

@@ -0,0 +1,222 @@
+/**
+ * DataTable — @rechta/ui
+ *
+ * Sortable, filterable creator roster table with:
+ * - Column header sort buttons (WCAG AA: aria-label with sort direction)
+ * - Status badge with dot indicator
+ * - Inline Sparkline for trend visualization
+ * - Platform colour-coded indicator
+ * - Row hover states
+ * - Filter tabs + pagination footer
+ *
+ * Use case: Creator roster, campaign list, component usage scan (like Componly screenshot)
+ */
+
+import * as React from "react";
+import { Sparkline } from "./Charts";
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+export interface DataTableColumn<T> {
+  key: keyof T | null;
+  label: string;
+  width?: number | string;
+  sortable?: boolean;
+  render?: (row: T, idx: number) => React.ReactNode;
+  align?: "left" | "right" | "center";
+}
+
+export interface DataTableProps<T extends Record<string, unknown>> {
+  data: T[];
+  columns: DataTableColumn<T>[];
+  filterKey?: keyof T;
+  filterOptions?: string[];
+  defaultSortKey?: keyof T;
+  defaultSortDir?: "asc" | "desc";
+  pageSize?: number;
+}
+
+// ─── SortButton ────────────────────────────────────────────────────────────────
+const SortBtn: React.FC<{
+  col: string;
+  label: string;
+  active: boolean;
+  dir: "asc" | "desc";
+  onClick: () => void;
+}> = ({ label, active, dir, onClick }) => (
+  <button
+    onClick={onClick}
+    style={{
+      display: "flex", alignItems: "center", gap: 4,
+      fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600,
+      letterSpacing: ".08em", textTransform: "uppercase" as const,
+      color: active ? "var(--text-brand)" : "var(--text-3)",
+      cursor: "pointer", background: "none", border: "none", padding: 0,
+    }}
+    aria-label={`Sort by ${label} ${dir === "desc" ? "ascending" : "descending"}`}
+  >
+    {label}
+    <span style={{ fontSize: 9, opacity: active ? 1 : 0.4 }}>
+      {active ? (dir === "desc" ? "↓" : "↑") : "↕"}
+    </span>
+  </button>
+);
+
+// ─── DataTable ─────────────────────────────────────────────────────────────────
+export function DataTable<T extends Record<string, unknown>>({
+  data,
+  columns,
+  filterKey,
+  filterOptions = [],
+  defaultSortKey,
+  defaultSortDir = "desc",
+  pageSize = 10,
+}: DataTableProps<T>) {
+  const [sortCol, setSortCol] = React.useState<keyof T | null>(defaultSortKey ?? null);
+  const [sortDir, setSortDir] = React.useState<"asc" | "desc">(defaultSortDir);
+  const [filter, setFilter] = React.useState<string>("all");
+  const [page, setPage] = React.useState(1);
+
+  const toggleSort = (col: keyof T) => {
+    if (sortCol === col) setSortDir((d) => (d === "desc" ? "asc" : "desc"));
+    else { setSortCol(col); setSortDir("desc"); }
+  };
+
+  const filtered = React.useMemo(() => {
+    let d = filter === "all" || !filterKey ? data : data.filter((r) => r[filterKey] === filter);
+    if (sortCol) {
+      d = [...d].sort((a, b) => {
+        const av = a[sortCol] as number;
+        const bv = b[sortCol] as number;
+        return sortDir === "desc" ? bv - av : av - bv;
+      });
+    }
+    return d;
+  }, [data, filter, sortCol, sortDir, filterKey]);
+
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);
+
+  return (
+    <div style={{ background: "var(--surface)", border: "1px solid var(--border-subtle)", borderRadius: 14, overflow: "hidden" }}>
+      {/* Toolbar */}
+      {(filterKey && filterOptions.length > 0) && (
+        <div style={{
+          padding: "12px 20px", borderBottom: "1px solid var(--border-subtle)",
+          display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" as const,
+        }}>
+          {["all", ...filterOptions].map((f) => (
+            <button
+              key={f}
+              onClick={() => { setFilter(f); setPage(1); }}
+              style={{
+                padding: "4px 10px", borderRadius: 6, fontSize: 11, fontWeight: 500,
+                fontFamily: "var(--font-body)", cursor: "pointer",
+                border: `1px solid ${filter === f ? "var(--border-brand)" : "var(--border-subtle)"}`,
+                background: filter === f ? "var(--brand-muted)" : "var(--surface)",
+                color: filter === f ? "var(--text-brand)" : "var(--text-muted)",
+                transition: "all .15s", textTransform: "capitalize" as const,
+              }}
+            >{f}</button>
+          ))}
+          <span style={{
+            marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 10,
+            color: "var(--text-muted)",
+          }}>{filtered.length} rows</span>
+        </div>
+      )}
+
+      {/* Table */}
+      <div style={{ overflowX: "auto" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-body)" }}>
+          <thead>
+            <tr style={{ borderBottom: "1px solid var(--border-subtle)" }}>
+              {columns.map(({ key, label, width, sortable, align }, i) => (
+                <th
+                  key={i}
+                  style={{
+                    padding: "10px 16px", textAlign: align ?? "left",
+                    width, whiteSpace: "nowrap" as const,
+                  }}
+                >
+                  {sortable && key ? (
+                    <SortBtn
+                      col={String(key)}
+                      label={label}
+                      active={sortCol === key}
+                      dir={sortDir}
+                      onClick={() => toggleSort(key)}
+                    />
+                  ) : (
+                    <span style={{
+                      fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600,
+                      letterSpacing: ".08em", textTransform: "uppercase" as const,
+                      color: "var(--text-3)",
+                    }}>{label}</span>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {paged.map((row, i) => (
+              <tr
+                key={i}
+                style={{ borderBottom: "1px solid var(--border-subtle)", transition: "background .12s", cursor: "pointer" }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-hover)")}
+                onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+              >
+                {columns.map(({ key, render, align }, j) => (
+                  <td key={j} style={{ padding: "12px 16px", textAlign: align ?? "left" }}>
+                    {render ? render(row, i) : (
+                      <span style={{ fontSize: 13, color: "var(--text-2)" }}>
+                        {key ? String(row[key] ?? "") : ""}
+                      </span>
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer */}
+      <div style={{
+        padding: "12px 20px", borderTop: "1px solid var(--border-subtle)",
+        display: "flex", justifyContent: "space-between", alignItems: "center",
+      }}>
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-muted)" }}>
+          Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, filtered.length)} of {filtered.length}
+          {sortCol ? ` · sorted by ${String(sortCol)} ${sortDir}` : ""}
+        </span>
+        <div style={{ display: "flex", gap: 4 }}>
+          {["←", ...Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1), "→"].map((p, i) => {
+            const isActive = typeof p === "number" && p === page;
+            return (
+              <button
+                key={i}
+                onClick={() => {
+                  if (p === "←") setPage((n) => Math.max(1, n - 1));
+                  else if (p === "→") setPage((n) => Math.min(totalPages, n + 1));
+                  else setPage(p as number);
+                }}
+                style={{
+                  width: 28, height: 28, borderRadius: 6, fontSize: 11,
+                  fontFamily: "var(--font-mono)", cursor: "pointer",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  border: `1px solid ${isActive ? "var(--border-brand)" : "var(--border-subtle)"}`,
+                  background: isActive ? "var(--brand-muted)" : "var(--surface)",
+                  color: isActive ? "var(--text-brand)" : "var(--text-muted)",
+                  transition: "all .15s",
+                }}
+              >{p}</button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Re-export Sparkline for convenience
+export { Sparkline };

package/packages/ui/src/components/charts/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @rechta/ui/charts — chart component index
+ * Requires: recharts >= 2.8
+ */
+
+export {
+  CHART,
+  RechtaTooltip,
+  ChartCard,
+  KpiStrip,
+  AreaChartStripe,
+  BarChartStripe,
+  BarChartHorizontal,
+  DonutChart,
+  Sparkline,
+} from "./Charts";
+
+export { DataTable } from "./DataTable";
+export type { DataTableColumn, DataTableProps } from "./DataTable";