@podoba/react 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.27",
+	"version": "0.0.29",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -16,17 +16,19 @@
 		".": "./src/index.ts"
 	},
 	"files": [
-		"src"
+		"src",
+		"!src/**/*.test.*"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
 	"scripts": {
+		"test": "bun test src",
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.27",
-		"@podoba/tailwind": "^0.0.27",
+		"@podoba/tokens": "^0.0.29",
+		"@podoba/tailwind": "^0.0.29",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/brand-page-header.tsx

@@ -30,6 +30,8 @@ export type BrandPageHeaderCrumb = {
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
+	/** Semantic heading level. Use 2 or 3 when the header is nested below a page title. */
+	headingLevel?: 1 | 2 | 3
 	/**
 	 * gs-style "title to go back": a muted, clickable PARENT link rendered as the
 	 * line ABOVE the title (so the title reads "Parent ⏎ Current"). Pass a real
@@ -63,6 +65,7 @@ const PANEL_ID = 'brand-page-header-create-hub'
 
 export function BrandPageHeader({
 	greeting,
+	headingLevel = 1,
 	parentLink,
 	breadcrumbs,
 	cta,
@@ -78,6 +81,7 @@ export function BrandPageHeader({
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
+	const Heading = `h${headingLevel}` as const
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
@@ -116,7 +120,7 @@ export function BrandPageHeader({
 							))}
 						</nav>
 					) : null}
-					<h1 className="text-display font-medium leading-[1.12] tracking-wide text-fg">
+					<Heading className="text-display font-medium leading-[1.12] tracking-wide text-fg">
 						{parentLink ? (
 							// gs "title to go back": muted clickable parent line above the title.
 							// `[&_a]` styles the nested router <Link> (anchor) without @app/ui
@@ -129,7 +133,7 @@ export function BrandPageHeader({
 							</>
 						) : null}
 						{greeting}
-					</h1>
+					</Heading>
 				</div>
 
 				{cta ? (

package/src/components/cta-pill.tsx

@@ -8,15 +8,16 @@ import type { ReactNode } from 'react'
  * translate each per-locale while keeping the middle-word highlight. Presentational
  * only (hard rule #1): every string arrives via props — no i18n, no domain data.
  *
- * a11y NOTE: the background is the light brand-green (#6eddb1); the emphasised word is
- * rendered WHITE per the gs design — white-on-green is ~1.66:1, below WCAG AA, so it
- * reads as a decorative highlight (it also carries a bold weight), not load-bearing
- * copy. The surrounding text stays on the dark `fg` (~10:1).
+ * a11y NOTE: the background is the FIXED light brand-secondary (#6eddb1) — it does
+ * not flip with the theme, so every sentence fragment sits on `fg-on-brand` (stable
+ * dark ink, ~11:1 in both themes). The gs design's white emphasis word failed WCAG AA
+ * (~1.66:1) and turned the whole sentence white-on-green in a dark shell; the
+ * emphasis is now carried by weight alone.
  */
 export interface CtaPillProps {
 	/** Regular lead-in before the emphasised word (e.g. "Let's"). */
 	lead: ReactNode
-	/** The emphasised bold, white middle word (e.g. "create"). */
+	/** The emphasised bold middle word (e.g. "create"). */
 	emphasis: ReactNode
 	/** Regular trailing text after the emphasis (e.g. "something"). */
 	tail: ReactNode
@@ -27,8 +28,8 @@ export interface CtaPillProps {
 export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
 	return (
 		<div className="flex w-full items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
-			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg">
-				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
+			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg-on-brand">
+				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>
 		</div>

package/src/components/table.tsx

@@ -0,0 +1,193 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { ChevronDownIcon, ChevronUpIcon } from './icons'
+
+/**
+ * Table — the design-system data table (port of gs-platform's `GSTable`). A light,
+ * presentational grid: a header row of (optionally sortable) column labels over a
+ * body of rows. Rows can be clickable (whole-row press → `onRowClick`, keyboard
+ * accessible). Sorting is CLIENT-SIDE and OPTIONAL: enable it with `enableSorting`
+ * and mark the sortable columns; clicking a sortable header cycles asc → desc.
+ *
+ * Presentational only (hard rule #3): no data fetching, no domain coupling. The
+ * caller supplies `columns` (how to render + sort each cell) and `data` (the rows).
+ * Styling = Tailwind + design-token CSS vars, matching the rest of podoba.
+ */
+export type TableAlign = 'left' | 'right' | 'center'
+
+export type TableColumn<Row> = {
+	/** Stable column id (also the default sort key). */
+	key: string
+	/** Header label. */
+	header: ReactNode
+	/** Cell renderer. Defaults to `String(row[key])` when omitted. */
+	render?: (row: Row) => ReactNode
+	/** Whether this column participates in sorting (needs `enableSorting` on the table). */
+	sortable?: boolean
+	/**
+	 * Value used to sort this column (string / number). Defaults to the raw
+	 * `row[key]` when the row is an object, else the stringified render output.
+	 */
+	sortValue?: (row: Row) => string | number
+	/** Horizontal alignment of the header + cells (default `left`). */
+	align?: TableAlign
+	/** Optional fixed width (CSS length, e.g. `'12rem'` or `'30%'`). */
+	width?: string
+}
+
+export type TableProps<Row> = {
+	columns: TableColumn<Row>[]
+	data: Row[]
+	/** Stable per-row key. Defaults to the row index (fine for static lists). */
+	getRowKey?: (row: Row, index: number) => string
+	/** Enable client-side sorting on `sortable` columns. */
+	enableSorting?: boolean
+	/** Whole-row press handler — renders rows as interactive (hover + keyboard). */
+	onRowClick?: (row: Row) => void
+	/** Message shown in place of the body when `data` is empty. */
+	emptyMessage?: ReactNode
+	/** Accessible name for the table. */
+	'aria-label'?: string
+	className?: string
+}
+
+const ALIGN_CLASS: Record<TableAlign, string> = {
+	left: 'text-left',
+	right: 'text-right',
+	center: 'text-center',
+}
+
+function defaultSortValue<Row>(column: TableColumn<Row>, row: Row): string | number {
+	if (column.sortValue) return column.sortValue(row)
+	if (row && typeof row === 'object' && column.key in row) {
+		const raw = (row as Record<string, unknown>)[column.key]
+		if (typeof raw === 'number' || typeof raw === 'string') return raw
+	}
+	return ''
+}
+
+export function Table<Row>({
+	columns,
+	data,
+	getRowKey,
+	enableSorting = false,
+	onRowClick,
+	emptyMessage = 'No rows.',
+	className,
+	...aria
+}: TableProps<Row>) {
+	const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' } | null>(null)
+
+	const toggleSort = (key: string) => {
+		setSort((prev) => {
+			if (prev?.key !== key) return { key, dir: 'asc' }
+			return { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' }
+		})
+	}
+
+	const sorted = useMemo(() => {
+		if (!enableSorting || !sort) return data
+		const column = columns.find((c) => c.key === sort.key)
+		if (!column) return data
+		const dir = sort.dir === 'asc' ? 1 : -1
+		// Copy before sort — never mutate the caller's array.
+		return [...data].sort((a, b) => {
+			const av = defaultSortValue(column, a)
+			const bv = defaultSortValue(column, b)
+			if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir
+			return String(av).localeCompare(String(bv), undefined, { numeric: true }) * dir
+		})
+	}, [data, columns, enableSorting, sort])
+
+	const rowKey = getRowKey ?? ((_row: Row, index: number) => String(index))
+	const interactive = Boolean(onRowClick)
+
+	return (
+		<div className={['w-full overflow-x-auto', className].filter(Boolean).join(' ')}>
+			<table className="w-full border-collapse text-small" {...aria}>
+				<thead>
+					<tr className="border-b border-border">
+						{columns.map((column) => {
+							const align = column.align ?? 'left'
+							const canSort = enableSorting && column.sortable
+							const active = sort?.key === column.key
+							return (
+								<th
+									key={column.key}
+									scope="col"
+									style={column.width ? { width: column.width } : undefined}
+									aria-sort={
+										canSort ? (active ? (sort?.dir === 'asc' ? 'ascending' : 'descending') : 'none') : undefined
+									}
+									className={`${ALIGN_CLASS[align]} px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase`}
+								>
+									{canSort ? (
+										<button
+											type="button"
+											onClick={() => toggleSort(column.key)}
+											className={`inline-flex items-center gap-1 outline-none transition-colors hover:text-fg focus-visible:text-fg ${
+												align === 'right' ? 'flex-row-reverse' : ''
+											} ${active ? 'text-fg' : ''}`}
+										>
+											{column.header}
+											{active ? (
+												sort?.dir === 'asc' ? (
+													<ChevronUpIcon className="h-3.5 w-3.5" />
+												) : (
+													<ChevronDownIcon className="h-3.5 w-3.5" />
+												)
+											) : null}
+										</button>
+									) : (
+										column.header
+									)}
+								</th>
+							)
+						})}
+					</tr>
+				</thead>
+				<tbody>
+					{sorted.length === 0 ? (
+						<tr>
+							<td colSpan={columns.length} className="px-4 py-10 text-center text-small text-fg-muted">
+								{emptyMessage}
+							</td>
+						</tr>
+					) : (
+						sorted.map((row, index) => (
+							<tr
+								key={rowKey(row, index)}
+								{...(interactive
+									? {
+											tabIndex: 0,
+											role: 'button',
+											onClick: () => onRowClick?.(row),
+											onKeyDown: (event: React.KeyboardEvent) => {
+												if (event.key === 'Enter' || event.key === ' ') {
+													event.preventDefault()
+													onRowClick?.(row)
+												}
+											},
+										}
+									: {})}
+								className={`border-b border-border/60 outline-none ${
+									interactive
+										? 'cursor-pointer transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring'
+										: ''
+								}`}
+							>
+								{columns.map((column) => {
+									const align = column.align ?? 'left'
+									return (
+										<td key={column.key} className={`${ALIGN_CLASS[align]} px-4 py-3 align-middle text-fg`}>
+											{column.render ? column.render(row) : String(defaultSortValue(column, row))}
+										</td>
+									)
+								})}
+							</tr>
+						))
+					)}
+				</tbody>
+			</table>
+		</div>
+	)
+}

package/src/components/tile.tsx

@@ -31,10 +31,14 @@ export type TileAlign = 'top' | 'center'
 const THEME: Record<TileTheme, string> = {
 	// Light tiles carry a visible hairline; dark/colored use a transparent border so
 	// every tile keeps the same box size (no 1px shift between themes).
+	// Every surface pairs with ITS semantic foreground (never raw white / bare fg):
+	// `surface-inverted` flips with the theme so it needs the flipping `fg-inverted`;
+	// teal/yellow are FIXED light surfaces so they need the stable `fg-on-brand` ink
+	// (theme-flipping `fg` went white-on-pastel in a dark shell).
 	light: 'border border-border bg-surface-card text-fg',
-	dark: 'border border-transparent bg-surface-inverted text-white',
-	teal: 'border border-transparent bg-brand-secondary text-fg',
-	yellow: 'border border-transparent bg-accent-yellow text-fg',
+	dark: 'border border-transparent bg-surface-inverted text-fg-inverted',
+	teal: 'border border-transparent bg-brand-secondary text-fg-on-brand',
+	yellow: 'border border-transparent bg-accent-yellow text-fg-on-brand',
 }
 
 // The shared inner for EVERY tile (gs `DashboardContentCard`): 16px padding
@@ -95,10 +99,23 @@ export type TileProps = {
 export const tileStatClass = 'text-display font-medium leading-[30px] tracking-wide'
 
 function titleTone(theme: TileTheme, subtle: boolean): string {
-	if (theme === 'dark') return subtle ? 'text-white/60' : 'text-white'
+	if (theme === 'dark') return subtle ? 'text-fg-inverted/60' : 'text-fg-inverted'
+	if (theme === 'teal' || theme === 'yellow') return subtle ? 'text-fg-on-brand/70' : 'text-fg-on-brand'
 	return subtle ? 'text-fg-muted' : 'text-fg'
 }
 
+/**
+ * Muted supporting text / footer tone per surface. `fg-muted` is tuned for white —
+ * on the colored surfaces it drops below AA, so those blend their own paired ink
+ * instead (/60 · /70 keep ≥4.5:1 in both themes — verified by the contrast test
+ * in @podoba/tokens).
+ */
+function mutedTone(theme: TileTheme): string {
+	if (theme === 'dark') return 'text-fg-inverted/60'
+	if (theme === 'teal' || theme === 'yellow') return 'text-fg-on-brand/70'
+	return 'text-fg-muted'
+}
+
 /** head / content / tail bands — the normal (non-media) layout. */
 function TileBands({
 	theme,
@@ -123,7 +140,7 @@ function TileBands({
 		) : null
 	const textNode =
 		text != null ? (
-			<p className={`text-small leading-4 ${theme === 'dark' ? 'text-white/60' : 'text-fg-muted'} ${title != null ? 'mt-3' : ''}`}>
+			<p className={`text-small leading-4 ${mutedTone(theme)} ${title != null ? 'mt-3' : ''}`}>
 				{text}
 			</p>
 		) : null
@@ -153,8 +170,9 @@ function TileBands({
 	}
 
 	// Footer defaults to 14px muted (gs supporting text); self-styled footer content
-	// (links, buttons) overrides both size and colour.
-	const footerTone = theme === 'dark' ? 'text-white/50' : theme === 'light' ? 'text-fg-muted' : 'text-fg/70'
+	// (links, buttons) overrides both size and colour. Shares `mutedTone` — the old
+	// white/50 (dark) and fg/70 (teal/yellow) both broke AA in a dark shell.
+	const footerTone = mutedTone(theme)
 
 	return (
 		<>
@@ -197,7 +215,7 @@ function MediaHero({
 
 	return (
 		<div
-			className={['relative isolate h-full min-h-[200px] w-full overflow-hidden rounded-lg bg-surface-inverted', className]
+			className={['@container relative isolate h-full min-h-[200px] w-full overflow-hidden rounded-lg bg-surface-inverted', className]
 				.filter(Boolean)
 				.join(' ')}
 		>
@@ -239,20 +257,36 @@ function MediaHero({
 						/>
 					) : null}
 
-					{eyebrow ? (
-						<span className="pointer-events-none absolute left-6 top-6 z-10 text-compact font-medium text-white">{eyebrow}</span>
-					) : null}
-
-					{/* Content is click-through so pressing the title/badge falls to the
-					    press overlay; only `footer` re-enables its own pointer events. */}
-					<div className="pointer-events-none absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
-						{title ? <h2 className="max-w-md text-display font-medium leading-tight text-white">{title}</h2> : null}
-						{footer != null || badge != null ? (
-							<div className="flex items-center justify-between gap-4">
-								<span className="pointer-events-auto">{footer}</span>
-								<span>{badge}</span>
-							</div>
+					{/* Keep every text overlay in one flex flow. The old independent
+					    top eyebrow and bottom title bands could overlap when a long title
+					    wrapped on a narrow card. Compact mobile insets/type preserve the
+					    200px floor; the spacious composition returns when the card itself,
+					    rather than merely the viewport, is wide enough. */}
+					<div
+						data-slot="media-overlay"
+						className="pointer-events-none absolute inset-4 z-10 flex min-h-0 flex-col @sm:inset-6"
+					>
+						{eyebrow ? (
+							<span data-slot="media-eyebrow" className="shrink-0 text-compact font-medium text-white">
+								{eyebrow}
+							</span>
 						) : null}
+
+						{/* Content is click-through so pressing the title/badge falls to the
+						    press overlay; only `footer` re-enables its own pointer events. */}
+						<div data-slot="media-content" className="mt-auto flex min-h-0 flex-col gap-2 @sm:gap-4">
+							{title ? (
+								<h2 className="max-w-md text-title font-medium leading-tight text-white @sm:text-display">
+									{title}
+								</h2>
+							) : null}
+							{footer != null || badge != null ? (
+								<div className="flex items-center justify-between gap-3 @sm:gap-4">
+									<span className="pointer-events-auto">{footer}</span>
+									<span>{badge}</span>
+								</div>
+							) : null}
+						</div>
 					</div>
 				</>
 			)}
@@ -350,10 +384,14 @@ export type BadgeColor = 'green' | 'yellow' | 'grey' | 'dark'
 const BADGE: Record<BadgeColor, string> = {
 	// gs `GSTag` green = the brand green (not the pale accent-mint). One saturated
 	// brand green for every green tag (New, Active, Published), matching gs 1:1.
-	green: 'bg-brand-green text-fg',
-	yellow: 'bg-accent-yellow text-fg',
-	grey: 'bg-surface-muted text-fg-muted',
-	dark: 'bg-surface-inverted text-white',
+	// Pairing rule (same as Tile THEME): fixed light surfaces take the stable
+	// `fg-on-brand` ink, the flipping inverted surface takes `fg-inverted`, and grey
+	// takes full `fg` — `fg-muted` on `surface-muted` was ~3.7:1, under the 4.5:1
+	// AA floor for caption-size text.
+	green: 'bg-brand-green text-fg-on-brand',
+	yellow: 'bg-accent-yellow text-fg-on-brand',
+	grey: 'bg-surface-muted text-fg',
+	dark: 'bg-surface-inverted text-fg-inverted',
 }
 
 export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {

package/src/index.ts

@@ -60,6 +60,7 @@ export * from "./components/icons";
 export * from "./components/subtle";
 export * from "./components/stats-card";
 export * from "./components/tile";
+export * from "./components/table";
 export * from "./components/dashboard-grid";
 export * from "./components/task-approval-modal";
 export * from "./components/request-changes-modal";