@podoba/react 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.13",
-		"@podoba/tailwind": "^0.0.13",
+		"@podoba/tokens": "^0.0.15",
+		"@podoba/tailwind": "^0.0.15",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

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

@@ -116,7 +116,7 @@ export function BrandPageHeader({
 							))}
 						</nav>
 					) : null}
-					<h1 className="text-display font-medium leading-[1.12] tracking-[-0.56px] text-fg">
+					<h1 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

package/src/components/context-menu.tsx

@@ -126,7 +126,7 @@ const MenuItem = uic(RACMenuItem, {
 // gs `.panel`: 258px, radius 12px, 8px/6px padding, 180deg #242424→#1f1f1f
 // gradient, 0 12px 28px rgba(0,0,0,.22) shadow. No token covers the gradient/shadow.
 const panelClass =
-	'w-[258px] max-w-[calc(100vw-16px)] rounded-xl bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
+	'w-[258px] max-w-[calc(100vw-16px)] rounded-lg bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
 	'px-1.5 py-2 shadow-[0_12px_28px_rgba(0,0,0,0.22)] outline-none'
 const menuClass = 'grid max-h-[calc(100vh-16px)] gap-0.5 overflow-y-auto outline-none'
 
@@ -178,7 +178,7 @@ function ContextMenuBody({
 								<span className="min-w-0 flex-1 truncate">{item.label}</span>
 								{badge ? (
 									// gs `.badge`: 24px pill, #333437 bg / #c8c8ca text, 10px (text-micro).
-									<span className="ml-auto inline-flex h-6 items-center justify-center rounded-full bg-[#333437] px-3 py-0.5 text-micro font-medium leading-5 tracking-[-0.2px] text-[#c8c8ca]">
+									<span className="ml-auto inline-flex h-6 items-center justify-center rounded-full bg-[#333437] px-3 py-0.5 text-micro font-medium leading-5 tracking-tight text-[#c8c8ca]">
 										{badge}
 									</span>
 								) : null}

package/src/components/cta-pill.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+/**
+ * CtaPill — the gs Brand Core hero CTA: a GS-green bar reading "Let's create
+ * something" (the middle word emphasised) with an action control on the right.
+ *
+ * The copy is three fragments (`lead` · `emphasis` · `tail`) so a consumer can
+ * 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).
+ */
+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"). */
+	emphasis: ReactNode
+	/** Regular trailing text after the emphasis (e.g. "something"). */
+	tail: ReactNode
+	/** Right-side action control (e.g. a Create button). */
+	children: ReactNode
+}
+
+export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
+	return (
+		<div className="flex min-w-[560px] items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
+			<p className="text-subtitle font-medium leading-[22px] tracking-normal text-fg">
+				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
+			</p>
+			<div className="shrink-0">{children}</div>
+		</div>
+	)
+}

package/src/components/stats-card.tsx

@@ -22,6 +22,10 @@ export type StatsCardProps = {
 	value: ReactNode
 	/** Optional supporting footer line (e.g. "+3 this week"). */
 	footer?: ReactNode
+	/** Optional status pill shown at the end of the title row (e.g. a `<Badge>`). */
+	badge?: ReactNode
+	/** Optional muted line under the title (e.g. "Plan sections, tasks and outputs"). */
+	description?: ReactNode
 	/** When provided the card becomes a clickable React Aria Button. */
 	onPress?: () => void
 	/**
@@ -54,15 +58,23 @@ function StatsCardBody({
 	title,
 	value,
 	footer,
+	badge,
+	description,
 	dark,
-}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'dark'>) {
+}: Pick<StatsCardProps, 'title' | 'value' | 'footer' | 'badge' | 'description' | 'dark'>) {
 	return (
 		<>
-			<span
-				className={`text-body font-medium leading-5 ${dark ? 'text-white' : 'text-fg'}`}
-			>
-				{title}
-			</span>
+			<div className="flex items-center justify-between gap-2">
+				<span className={`text-body font-medium leading-5 ${dark ? 'text-white' : 'text-fg'}`}>
+					{title}
+				</span>
+				{badge ?? null}
+			</div>
+			{description ? (
+				<span className={`text-compact leading-4 ${dark ? 'text-white/60' : 'text-fg-muted'}`}>
+					{description}
+				</span>
+			) : null}
 			{/*
 			 * gs Tile `contentAlign="center"`: the value sits in the CENTRE band of the
 			 * three-band tile (title top / value centred / footer bottom). The `flex-1`
@@ -73,7 +85,7 @@ function StatsCardBody({
 			 * `-0.02em` (`AssetsTile.module.scss .count`).
 			 */}
 			<span
-				className={`flex flex-1 items-center text-[1.875rem] font-medium leading-[2rem] ${dark ? 'tracking-[-0.02em] text-white' : 'tracking-wide text-fg'}`}
+				className={`flex flex-1 items-center text-[1.875rem] font-medium leading-[2rem] ${dark ? 'tracking-normal text-white' : 'tracking-wide text-fg'}`}
 			>
 				{value}
 			</span>
@@ -108,6 +120,8 @@ export function StatsCard({
 	title,
 	value,
 	footer,
+	badge,
+	description,
 	onPress,
 	asChild,
 	children,
@@ -122,7 +136,7 @@ export function StatsCard({
 		const cardClass = [baseSurface, dark ? darkSkin : lightSkin, anchorInteractive, child.props.className, className]
 			.filter(Boolean)
 			.join(' ')
-		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} dark={dark} />)
+		return cloneElement(child, { className: cardClass } as { className: string }, <StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />)
 	}
 
 	if (onPress) {
@@ -134,13 +148,13 @@ export function StatsCard({
 				className={[dark ? darkSkin : '', className].filter(Boolean).join(' ')}
 				aria-label={rest['aria-label']}
 			>
-				<StatsCardBody title={title} value={value} footer={footer} dark={dark} />
+				<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />
 			</PressableCard>
 		)
 	}
 	return (
 		<div className={[baseSurface, dark ? darkSkin : lightSkin, className].filter(Boolean).join(' ')}>
-			<StatsCardBody title={title} value={value} footer={footer} dark={dark} />
+			<StatsCardBody title={title} value={value} footer={footer} badge={badge} description={description} dark={dark} />
 		</div>
 	)
 }

package/src/components/subtle.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Subtle — inline de-emphasised text (the light `fg-subtle` grey, #b3b3b3). Wraps its
+ * children in a `text-fg-subtle` span; anything OUTSIDE it stays at the surrounding
+ * full-contrast `fg`. Compose it freely to two-tone arbitrary runs of a line — unlike
+ * a fixed-slot header it handles mid-line emphasis in ANY order and ANY language:
+ *
+ *   <h1>
+ *     <Subtle>Good afternoon</Subtle> {name} 👋
+ *     <br />
+ *     <Subtle>You have</Subtle> {count} planned tasks <Subtle>today</Subtle>
+ *   </h1>
+ *
+ * With i18n, put the `<subtle>…</subtle>` runs INSIDE the translation string and render
+ * it via `<Trans components={{ subtle: <Subtle /> }} />`, so each locale places the
+ * emphasis where its own word order needs it. Presentational only (hard rule #1).
+ */
+export function Subtle({ children }: { children: ReactNode }) {
+	return <span className="text-fg-subtle">{children}</span>
+}

package/src/components/tile.tsx

@@ -0,0 +1,120 @@
+import { type ReactElement, type ReactNode, cloneElement, isValidElement } from 'react'
+
+/**
+ * Tile — the canonical dashboard CARD (port of gs-platform's `Tile`).
+ *
+ * Layout: `head` (label row, optional trailing badge) · `children` (the big
+ * content band, fills + top-aligned) · `tail` (footer — links, avatars). 8px
+ * panel radius, generous padding, row-gap. Four themes mirror gs's Figma palette
+ * via the design tokens: light (surface-card), dark (inverted, light text), teal
+ * (brand green), yellow (accent).
+ *
+ * Router-agnostic link (hard rule #1 — podoba never imports a router): pass a
+ * link ELEMENT as `link` (e.g. a `<Link/>` from your router, self-closing). The
+ * tile clones it, merges the card styling + a hover-lift onto it, and injects the
+ * tile body as its children — so the whole tile is a real anchor (cmd/middle-click,
+ * open in new tab) without podoba knowing about any router. `children` stays the
+ * content band (unlike StatsCard's `asChild`, because a Tile's children is content).
+ *
+ * Presentational only: all copy via props, no API/i18n.
+ */
+export type TileTheme = 'light' | 'dark' | 'teal' | 'yellow'
+
+const THEME: Record<TileTheme, string> = {
+	light: 'bg-surface-card text-fg',
+	dark: 'bg-surface-inverted text-white',
+	teal: 'bg-brand-secondary text-fg',
+	yellow: 'bg-accent-yellow text-fg',
+}
+
+/** Hover-lift + focus ring applied only when the tile is a link. */
+const linkInteractive =
+	'block no-underline outline-none transition-[transform,box-shadow] duration-150 ' +
+	'hover:-translate-y-1 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-ring'
+
+export type TileProps = {
+	/** Surface theme (gs's Figma palette). */
+	theme?: TileTheme
+	/** Label row at the top (optionally a trailing `<Badge>`). */
+	head?: ReactNode
+	/** The big content band — grows to fill, top-aligned. */
+	children?: ReactNode
+	/** Footer band (links, avatars, meta). */
+	tail?: ReactNode
+	/**
+	 * A link ELEMENT to render the whole tile as (e.g. a router `<Link/>`). The tile
+	 * styling + hover-lift merge onto it and the tile body becomes its children.
+	 */
+	link?: ReactElement
+	className?: string
+}
+
+/** The head/content/tail bands, shared by the plain + linked renders. */
+function TileBody({ head, children, tail }: Pick<TileProps, 'head' | 'children' | 'tail'>) {
+	return (
+		<>
+			{head ? (
+				<div className="flex items-center justify-between gap-2 text-body font-medium leading-5">
+					{head}
+				</div>
+			) : null}
+			<div className="flex min-h-0 flex-1 flex-col items-start">{children}</div>
+			{tail ? <div className="min-w-0">{tail}</div> : null}
+		</>
+	)
+}
+
+const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 rounded-lg p-6'
+
+export function Tile({ theme = 'light', head, children, tail, link, className }: TileProps) {
+	const surface = [baseSurface, THEME[theme], className].filter(Boolean).join(' ')
+
+	// Link element supplied → render the tile AS that element (real anchor semantics).
+	if (link && isValidElement(link)) {
+		const el = link as ReactElement<{ className?: string }>
+		const cardClass = [surface, linkInteractive, el.props.className].filter(Boolean).join(' ')
+		return cloneElement(el, { className: cardClass } as { className: string }, (
+			<TileBody head={head} tail={tail}>
+				{children}
+			</TileBody>
+		))
+	}
+
+	return (
+		<div className={surface}>
+			<TileBody head={head} tail={tail}>
+				{children}
+			</TileBody>
+		</div>
+	)
+}
+
+/**
+ * The big "stat" content typography used inside a tile's content band (gs `.content`:
+ * 28px / 500 / tight tracking). Apply to the element wrapping a tile's headline value.
+ */
+export const tileStatClass = 'text-display font-medium leading-[30px] tracking-wide'
+
+/**
+ * Badge — a small presentational status pill (gs `GSTag`). NOTE: this is a plain
+ * label pill, distinct from podoba's interactive React-Aria `Tag` (tag-group.tsx);
+ * named `Badge` to avoid the collision.
+ */
+export type BadgeColor = 'green' | 'yellow' | 'grey' | 'dark'
+
+const BADGE: Record<BadgeColor, string> = {
+	green: 'bg-accent-mint text-fg',
+	yellow: 'bg-accent-yellow text-fg',
+	grey: 'bg-surface-muted text-fg-muted',
+	dark: 'bg-surface-inverted text-white',
+}
+
+export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {
+	return (
+		<span
+			className={`inline-flex items-center rounded-full px-2 py-0.5 text-caption font-medium leading-none ${BADGE[color]}`}
+		>
+			{label}
+		</span>
+	)
+}

package/src/index.ts

@@ -52,7 +52,10 @@ export * from "./layout/persistent-page-shell";
 
 // --- product patterns (label-driven; no domain coupling) ---
 export * from "./components/brand-page-header";
+export * from "./components/cta-pill";
+export * from "./components/subtle";
 export * from "./components/stats-card";
+export * from "./components/tile";
 export * from "./components/dashboard-grid";
 export * from "./components/task-approval-modal";
 export * from "./components/request-changes-modal";

package/src/layout/card.tsx

@@ -4,9 +4,8 @@ import { uic } from '../utils/uic'
  * Card — surface panel (port of gs-manager's `Card`).
  *
  * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
- *   - `--radius-lg` (8px) → `rounded-lg` (our `--radius-lg` is 0.5rem = 8px). NB the
- *     `rounded-panel` token is 1.1rem (~17.6px), NOT the 8px card radius — gs's Card
- *     used `--radius-lg`, so this maps to `rounded-lg`.
+ *   - `rounded-lg` (`--radius-lg` = 0.5rem = 8px) — the single unified card/panel
+ *     radius across the design system (the old 1.1rem soft-panel radius was retired).
  *   - `--color-background-secondary` (the light card fill) → `bg-surface-card`
  *     (our `--color-surface-card` = #f7f6f2).
  *   - `outlined` → 1px `--color-border` (#eceae1) → `border border-border`.