@podoba/react 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"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.15",
-		"@podoba/tailwind": "^0.0.15",
+		"@podoba/tokens": "^0.0.17",
+		"@podoba/tailwind": "^0.0.17",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

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/cta-pill.tsx

@@ -27,7 +27,7 @@ export interface CtaPillProps {
 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">
+			<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>

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,140 @@
+import { useState, type ReactNode } from 'react'
+import { CloseIcon } from './icons'
+
+/**
+ * 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.
+ *
+ * Pressing the tile either PLAYS an inline video (when `video` is set — the poster
+ * image + overlays are replaced by a `<video controls autoPlay>` filling the tile, no
+ * modal) or fires `onPress` (e.g. navigate). `action` / `badge` sit ABOVE the press
+ * target (z-10) so their own handlers still work. Falls back to a dark surface when no
+ * `image` is given.
+ */
+export interface FeatureTileProps {
+	/** Background/poster image URL. Falls back to a dark surface when omitted. */
+	image?: string
+	imageAlt?: string
+	/** When set, pressing the tile plays this video INLINE (no modal). */
+	video?: 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
+	/** Press behaviour when there is NO `video`. `pressLabel` names it for a11y. */
+	onPress?: () => void
+	pressLabel?: string
+	/** Accessible label for the "stop / back to poster" control while playing. */
+	closeLabel?: string
+	/** Override the default `aspect-[2/1]` ratio / sizing. */
+	className?: string
+}
+
+export function FeatureTile({
+	image,
+	imageAlt,
+	video,
+	eyebrow,
+	title,
+	action,
+	badge,
+	onPress,
+	pressLabel,
+	closeLabel = 'Close video',
+	className,
+}: FeatureTileProps) {
+	const [playing, setPlaying] = useState(false)
+	const hasVideo = Boolean(video)
+	const pressable = hasVideo || Boolean(onPress)
+
+	const handlePress = () => {
+		if (hasVideo) setPlaying(true)
+		else onPress?.()
+	}
+
+	return (
+		<div
+			className={[
+				// A large fixed-aspect banner (default ~2:1); media covers it. Override the
+				// ratio/size via `className` (e.g. `aspect-[1440/700]`).
+				'relative isolate aspect-[2/1] w-full overflow-hidden rounded-lg bg-surface-inverted',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+		>
+			{playing && video ? (
+				<>
+					{/* eslint-disable-next-line jsx-a11y/media-has-caption -- caption track is
+					    supplied by the consumer via a fuller player when needed. */}
+					<video
+						src={video}
+						poster={image}
+						className="absolute inset-0 z-0 h-full w-full bg-black object-cover"
+						controls
+						autoPlay
+						playsInline
+					/>
+					<button
+						type="button"
+						aria-label={closeLabel}
+						onClick={() => setPlaying(false)}
+						className="absolute right-4 top-4 z-20 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white outline-none transition-colors hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-white/70"
+					>
+						<CloseIcon className="h-4 w-4" />
+					</button>
+				</>
+			) : (
+				<>
+					{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). */}
+					{pressable ? (
+						<button
+							type="button"
+							onClick={handlePress}
+							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}
+
+					{/* Content is click-through (pointer-events-none) so pressing the title
+					    or badge falls through to the play/press overlay; only `action`
+					    re-enables its own pointer events. */}
+					<div className="pointer-events-none 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>{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-normal 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/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/index.ts

@@ -53,6 +53,8 @@ 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";