@podoba/react 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"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.14",
-		"@podoba/tailwind": "^0.0.14",
+		"@podoba/tokens": "^0.0.16",
+		"@podoba/tailwind": "^0.0.16",
 		"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/combobox.tsx

@@ -91,7 +91,7 @@ export const ComboBox = <T extends object>({
 					<SearchField aria-label={typeof label === 'string' ? label : 'Search'}>
 						<RACInput
 							placeholder={placeholder}
-							className="w-full border-0 bg-transparent p-0 text-3xl font-medium text-fg outline-none placeholder:text-fg-subtle"
+							className="w-full border-0 bg-transparent p-0 text-display font-medium text-fg outline-none placeholder:text-fg-subtle"
 						/>
 					</SearchField>
 					<ListBox

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-heading4 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/date-picker.tsx

@@ -88,7 +88,7 @@ export const DatePicker = <T extends DateValue>({ label, description, errorMessa
 			{/* In focus mode the field is bare + large and the calendar is borderless,
 			    so field + calendar read as one seamless editor rather than boxes. */}
 			<Group className={inFocus ? 'flex w-full items-center' : `${dateInputClass} pr-2`}>
-				<DateInput className={clsx('flex flex-1 items-center gap-0.5', inFocus && 'text-3xl font-medium')}>
+				<DateInput className={clsx('flex flex-1 items-center gap-0.5', inFocus && 'text-display font-medium')}>
 					{(segment) => <DateSegment segment={segment} className={segmentClass} />}
 				</DateInput>
 				{inFocus ? null : (

package/src/components/feature-tile.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+
+/**
+ * FeatureTile — a full-width media hero tile: a background image with an overlaid
+ * eyebrow (top-left), title (bottom-left), an optional action control and a badge.
+ * Generic — the common use is a "start here" tutorial banner, but it fits any
+ * promo/feature spotlight. Presentational only (hard rule #1): text arrives via props.
+ *
+ * The whole tile is pressable via `onPress` (rendered as a full-bleed overlay button
+ * labelled by `title`); `action` / `badge` sit ABOVE it (z-10) so their own handlers
+ * still work. Falls back to a dark surface when no `image` is given.
+ */
+export interface FeatureTileProps {
+	/** Background image URL. Falls back to a dark surface when omitted. */
+	image?: string
+	imageAlt?: string
+	/** Small category label, top-left (e.g. "Tutorial"). */
+	eyebrow?: ReactNode
+	/** Large title, bottom-left. */
+	title: ReactNode
+	/** Bottom-left action control (e.g. a round icon button). */
+	action?: ReactNode
+	/** Bottom-right badge (e.g. a duration pill). */
+	badge?: ReactNode
+	/** Makes the whole tile pressable. `pressLabel` names it for assistive tech. */
+	onPress?: () => void
+	pressLabel?: string
+	/** Override the default `aspect-[2/1]` ratio / sizing. */
+	className?: string
+}
+
+export function FeatureTile({
+	image,
+	imageAlt,
+	eyebrow,
+	title,
+	action,
+	badge,
+	onPress,
+	pressLabel,
+	className,
+}: FeatureTileProps) {
+	return (
+		<div
+			className={[
+				// A large fixed-aspect banner (default ~2:1); the image covers it. Override
+				// the ratio/size via `className` (e.g. `aspect-[1440/700]`). Not tied to the
+				// viewport, so it stays a predictable min size rather than reflowing.
+				'relative isolate aspect-[2/1] w-full overflow-hidden rounded-lg bg-surface-inverted',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+		>
+			{image ? (
+				<img
+					src={image}
+					alt={imageAlt ?? ''}
+					className="absolute inset-0 h-full w-full object-cover"
+				/>
+			) : null}
+			{/* Legibility scrim — darkens the top + bottom where the text sits. */}
+			<div
+				aria-hidden="true"
+				className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60"
+			/>
+
+			{/* Full-bleed press target (behind the content controls). */}
+			{onPress ? (
+				<button
+					type="button"
+					onClick={onPress}
+					aria-label={pressLabel}
+					className="absolute inset-0 z-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70"
+				/>
+			) : null}
+
+			{eyebrow ? (
+				<span className="pointer-events-none absolute left-6 top-6 z-10 text-compact font-medium text-white">
+					{eyebrow}
+				</span>
+			) : null}
+
+			<div className="absolute inset-x-6 bottom-6 z-10 flex flex-col gap-4">
+				<h2 className="max-w-md text-display-xl font-medium leading-tight text-white">{title}</h2>
+				<div className="flex items-center justify-between gap-4">
+					<span className="pointer-events-auto">{action}</span>
+					<span className="pointer-events-auto">{badge}</span>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/focus-field.tsx

@@ -85,8 +85,8 @@ export function FocusFields({ children, className }: { children: ReactNode; clas
 
 // In the overlay, enlarge and de-chrome text controls into a bare headline editor.
 const OVERLAY_EDITOR =
-	'[&_input]:w-full [&_input]:border-0 [&_input]:bg-transparent [&_input]:p-0 [&_input]:text-3xl [&_input]:font-medium [&_input]:text-fg [&_input]:outline-none [&_input]:shadow-none [&_input]:ring-0 [&_input]:placeholder:text-fg-subtle ' +
-	'[&_textarea]:min-h-40 [&_textarea]:w-full [&_textarea]:resize-none [&_textarea]:border-0 [&_textarea]:bg-transparent [&_textarea]:p-0 [&_textarea]:text-3xl [&_textarea]:font-medium [&_textarea]:text-fg [&_textarea]:outline-none [&_textarea]:placeholder:text-fg-subtle'
+	'[&_input]:w-full [&_input]:border-0 [&_input]:bg-transparent [&_input]:p-0 [&_input]:text-display [&_input]:font-medium [&_input]:text-fg [&_input]:outline-none [&_input]:shadow-none [&_input]:ring-0 [&_input]:placeholder:text-fg-subtle ' +
+	'[&_textarea]:min-h-40 [&_textarea]:w-full [&_textarea]:resize-none [&_textarea]:border-0 [&_textarea]:bg-transparent [&_textarea]:p-0 [&_textarea]:text-display [&_textarea]:font-medium [&_textarea]:text-fg [&_textarea]:outline-none [&_textarea]:placeholder:text-fg-subtle'
 
 function IconBadge({ icon }: { icon: ReactNode }) {
 	return (

package/src/components/icons.tsx

@@ -0,0 +1,142 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Icon set — the design system's curated line icons. One `<XxxIcon>` per glyph, all
+ * on a shared 24×24 grid, `currentColor`, 2px round stroke. Size via `className`
+ * (`h-4 w-4`, …) or width/height; colour via `text-*`. This replaces the ad-hoc inline
+ * `<svg>`s scattered across the app so every icon reads as one family.
+ *
+ * Fill-based glyphs (Play, Triangle) set `fill="currentColor" stroke="none"`; the rest
+ * are stroked. Add a glyph here (not inline) when a new one is needed.
+ */
+export type IconProps = SVGProps<SVGSVGElement>
+
+const STROKE: IconProps = {
+	width: 24,
+	height: 24,
+	viewBox: '0 0 24 24',
+	fill: 'none',
+	stroke: 'currentColor',
+	strokeWidth: 2,
+	strokeLinecap: 'round',
+	strokeLinejoin: 'round',
+	'aria-hidden': true,
+}
+const FILL: IconProps = {
+	width: 24,
+	height: 24,
+	viewBox: '0 0 24 24',
+	fill: 'currentColor',
+	stroke: 'none',
+	'aria-hidden': true,
+}
+
+// --- navigation / chevrons ---
+export const ChevronDownIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M6 9l6 6 6-6" /></svg>
+)
+export const ChevronUpIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M18 15l-6-6-6 6" /></svg>
+)
+export const ChevronRightIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M9 6l6 6-6 6" /></svg>
+)
+export const ChevronLeftIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M15 6l-6 6 6 6" /></svg>
+)
+export const ArrowRightIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+)
+
+// --- actions ---
+export const CloseIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M6 6l12 12M18 6L6 18" /></svg>
+)
+export const CheckIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M20 6L9 17l-5-5" /></svg>
+)
+export const PlusIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M12 5v14M5 12h14" /></svg>
+)
+export const MinusIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M5 12h14" /></svg>
+)
+export const SearchIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<circle cx="11" cy="11" r="7" />
+		<path d="M21 21l-4.3-4.3" />
+	</svg>
+)
+export const PlayIcon = (p: IconProps) => (
+	<svg {...FILL} {...p}><path d="M8 5v14l11-7z" /></svg>
+)
+export const MenuIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+)
+export const ExternalLinkIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<path d="M15 3h6v6M21 3l-9 9M10 5H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5" />
+	</svg>
+)
+export const ExpandIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" /></svg>
+)
+
+// --- theme ---
+export const SunIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<circle cx="12" cy="12" r="4" />
+		<path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4" />
+	</svg>
+)
+export const MoonIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" /></svg>
+)
+
+// --- objects ---
+export const FileTextIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+		<path d="M14 3v5h5M9 13h6M9 17h4" />
+	</svg>
+)
+export const FolderIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<path d="M3 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+	</svg>
+)
+export const ImageIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<rect x="3" y="4" width="18" height="16" rx="2" />
+		<circle cx="8.5" cy="9.5" r="1.5" />
+		<path d="M4 17l5-4 4 3 3-2 4 3" />
+	</svg>
+)
+export const CalendarIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<rect x="3" y="5" width="18" height="16" rx="2" />
+		<path d="M16 3v4M8 3v4M3 10h18" />
+	</svg>
+)
+export const TrashIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6" />
+	</svg>
+)
+export const StarIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<path d="M12 3l2.7 5.5 6 .9-4.4 4.2 1 6L12 17l-5.4 2.8 1-6L3.2 9.4l6-.9z" />
+	</svg>
+)
+export const UserIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}>
+		<circle cx="12" cy="8" r="4" />
+		<path d="M4 20a8 8 0 0 1 16 0" />
+	</svg>
+)
+export const UploadIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M12 16V4M8 8l4-4 4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" /></svg>
+)
+export const DownloadIcon = (p: IconProps) => (
+	<svg {...STROKE} {...p}><path d="M12 4v12M8 12l4 4 4-4M4 18v0a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2" /></svg>
+)

package/src/components/stats-card.tsx

@@ -85,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-display font-medium leading-[2rem] ${dark ? 'tracking-normal text-white' : 'tracking-wide text-fg'}`}
 			>
 				{value}
 			</span>

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/text.tsx

@@ -27,14 +27,15 @@ export const Text = uic('span', {
 		size: {
 			micro: 'text-micro',
 			caption: 'text-caption',
-			label: 'text-label',
+			label: 'text-compact',
 			compact: 'text-compact',
 			callout: 'text-callout',
 			body: 'text-body',
-			subtitle: 'text-subtitle',
-			title: 'text-title',
-			headline: 'text-headline',
+			subtitle: 'text-heading4',
+			title: 'text-heading3',
+			headline: 'text-heading2',
 			display: 'text-display',
+			'display-xl': 'text-display-xl',
 		},
 		// NC Fontina caps at medium (500) as the heaviest weight in the system, so
 		// `semibold` and `bold` are kept as API-compatible aliases that render

package/src/components/tile.tsx

@@ -64,7 +64,7 @@ function TileBody({ head, children, tail }: Pick<TileProps, 'head' | 'children'
 	)
 }
 
-const baseSurface = 'flex h-full min-h-[200px] flex-col gap-6 rounded-panel p-6'
+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(' ')

package/src/index.ts

@@ -52,6 +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/feature-tile";
+export * from "./components/icons";
+export * from "./components/subtle";
 export * from "./components/stats-card";
 export * from "./components/tile";
 export * from "./components/dashboard-grid";

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`.