@podoba/react 0.0.29 → 0.0.30

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from 'react'
 import { Button } from './button'
+import { DisplayHeading } from './text'
 
 /**
  * BrandPageHeader — the brand-workspace page header (port of gs-platform
@@ -81,7 +82,7 @@ export function BrandPageHeader({
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
-	const Heading = `h${headingLevel}` as const
+	const HeadingTag = `h${headingLevel}` as const
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
@@ -98,8 +99,8 @@ export function BrandPageHeader({
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-4">
-				<div className="flex min-w-0 flex-1 flex-col gap-1">
+			<div className="flex flex-col gap-2 sm:grid sm:grid-cols-3 sm:items-stretch sm:gap-4">
+				<div className="flex min-w-0 flex-1 flex-col gap-1 sm:col-span-2">
 					{breadcrumbs && breadcrumbs.length > 0 ? (
 						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
 							{breadcrumbs.map((crumb, i) => (
@@ -120,25 +121,27 @@ export function BrandPageHeader({
 							))}
 						</nav>
 					) : null}
-					<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
-							// importing the router.
-							<>
-								<span className="text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
-									{parentLink}
-								</span>
-								<br />
-							</>
-						) : null}
-						{greeting}
-					</Heading>
+					<DisplayHeading asChild className="tracking-tight">
+						<HeadingTag>
+							{parentLink ? (
+								// gs "title to go back": muted clickable parent line above the title.
+								// `[&_a]` styles the nested router <Link> (anchor) without @app/ui
+								// importing the router.
+								<>
+									<span className="text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
+										{parentLink}
+									</span>
+									<br />
+								</>
+							) : null}
+							{greeting}
+						</HeadingTag>
+					</DisplayHeading>
 				</div>
 
 				{cta ? (
 					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
-					<div className="w-full shrink-0 sm:w-1/3">{cta}</div>
+					<div className="h-full min-w-0">{cta}</div>
 				) : ctaLabel ? (
 					<div className="shrink-0">
 						{hasExpandable ? (

package/src/components/button.tsx

@@ -23,7 +23,7 @@ export const Button = uic(RACButton, {
 			// hover neutral-600 (#333333) + `0 0 5px rgba(0,0,0,.5)` shadow → active back
 			// to neutral-400 (surface-inverted, no shadow).
 			primary:
-				'bg-surface-inverted text-fg-inverted hover:bg-neutral-600 hover:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:bg-surface-inverted data-[pressed]:shadow-none',
+				'bg-brand-primary text-fg-inverted hover:bg-neutral-600 hover:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:bg-brand-primary data-[pressed]:shadow-none',
 			// secondary: #f7f6f2 (surface-card) + 1px #eceae1 (border); hover bg #eceae1
 			// (surface-muted) + border #aba89c (fg-subtle); active bg #eceae1.
 			secondary:
@@ -39,6 +39,9 @@ export const Button = uic(RACButton, {
 			sm: 'py-2 px-4',
 			md: 'py-3 px-6',
 			lg: 'py-4 px-8',
+			// Task/workflow CTA: exact source 44px height, 24px inline padding,
+			// 17/20 medium text.
+			prominent: 'h-11 px-6 py-0 text-panel-heading font-medium',
 		},
 	},
 	defaultVariants: {
@@ -49,5 +52,5 @@ export const Button = uic(RACButton, {
 
 export type ButtonProps = RACButtonProps & {
 	variant?: 'primary' | 'secondary' | 'ghost' | 'destructive'
-	size?: 'sm' | 'md' | 'lg'
+	size?: 'sm' | 'md' | 'lg' | 'prominent'
 }

package/src/components/cta-pill.tsx

@@ -27,8 +27,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-on-brand">
+		<div className="flex h-full min-h-16 w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green py-2.5 pr-3 pl-4.5">
+			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-tight text-fg-on-brand">
 				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>

package/src/components/dialog.tsx

@@ -4,8 +4,8 @@ import {
 	DialogTrigger as RACDialogTrigger,
 	type DialogProps as RACDialogProps,
 	Heading,
-	Modal,
-	ModalOverlay,
+	Modal as RACModal,
+	ModalOverlay as RACModalOverlay,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
 
@@ -18,25 +18,31 @@ import { uic } from '../utils/uic'
  */
 export const DialogTrigger = RACDialogTrigger
 
-// gs modal backdrop — gs `Dialog.module.scss` overlay: a neutral grey scrim
-// (`rgba(179,179,179,0.5)`) under a light `blur(2px)`.
-const Overlay = uic(ModalOverlay, {
+// Current gs modal backdrop: warm surface-card scrim at 66% under a 10px blur.
+export const ModalOverlay = uic(RACModalOverlay, {
 	displayName: 'DialogOverlay',
 	baseClass:
 		'fixed inset-0 z-50 flex items-center justify-center p-4 ' +
-		'bg-[rgba(179,179,179,0.5)] backdrop-blur-[2px] ' +
-		'data-[entering]:animate-in data-[exiting]:animate-out',
+		'bg-modal-backdrop backdrop-blur-modal-backdrop ' +
+		'data-[entering]:animate-modal-overlay-in data-[exiting]:animate-modal-overlay-out',
 })
 
-// gs content card: white bg, 20px padding (`p-5`), 8px radius (`rounded-lg`), and
-// the gs `Dialog.module.scss` card shadow — a light single-layer
-// `0 2px 8px rgba(0,0,0,.06)`. No border: gs defines the card with the shadow alone.
-const StyledModal = uic(Modal, {
+// gs content card: white bg, 20px padding, 8px radius and the shared two-layer
+// modal elevation.
+export const ModalSurface = uic(RACModal, {
 	displayName: 'DialogModal',
 	baseClass:
-		'rounded-lg bg-surface p-5 outline-none shadow-[0px_2px_8px_0px_rgba(0,0,0,0.06)]',
+		'rounded-lg bg-surface p-5 outline-none shadow-modal-surface ' +
+		'data-[entering]:animate-modal-surface-in data-[exiting]:animate-modal-surface-out',
 })
 
+/**
+ * Unstyled accessible dialog body for edge-to-edge / split modal compositions.
+ * Pair only with the shared {@link ModalOverlay} and {@link ModalSurface}; ordinary
+ * form and confirmation dialogs should use the composed {@link Dialog}.
+ */
+export const ModalDialog = RACDialog
+
 /**
  * Modal width presets. `md` (default) is the form/confirm dialog (gs DialogContent
  * default, 586px); `sm` is a tighter confirm; `lg`/`xl` host wider, taller content
@@ -126,18 +132,14 @@ export const Dialog = ({
 		// when omitted the overlay reads its state from an enclosing DialogTrigger.
 		// Either way the RACDialog render-prop `close` resolves against the active
 		// overlay state, so `close()` works in both modes.
-		<Overlay
-			// Full-screen is an immersive takeover: swap the light 2px scrim for a
-			// heavier backdrop blur so the page behind reads as clearly blurred around
-			// the near-fullscreen canvas. (tailwind-merge dedupes the base blur/scrim.)
-			className={isFlex ? "bg-black/25 backdrop-blur-lg" : undefined}
+		<ModalOverlay
 			isOpen={isOpen}
 			defaultOpen={defaultOpen}
 			onOpenChange={onOpenChange}
 			isDismissable={isDismissable}
 		>
-			<StyledModal className={SIZE_CLASS[size]}>
-				<RACDialog
+			<ModalSurface className={SIZE_CLASS[size]}>
+				<ModalDialog
 					{...props}
 					className={isFlex ? 'flex min-h-0 flex-1 flex-col outline-none' : 'outline-none'}
 				>
@@ -200,8 +202,8 @@ export const Dialog = ({
 							)}
 						</>
 					)}
-				</RACDialog>
-			</StyledModal>
-		</Overlay>
+				</ModalDialog>
+			</ModalSurface>
+		</ModalOverlay>
 	)
 }

package/src/components/input.tsx

@@ -20,20 +20,15 @@ import { uic } from '../utils/uic'
  */
 const StyledInput = uic(RACInput, {
 	displayName: 'InputControl',
-	// White fill so the field reads as editable. The gs original used a cream
-	// (#f7f6f2 → surface-card) fill, but our Card surface is ALSO surface-card, so
-	// a filled field inside a card vanished and read as disabled. Inverted: active
-	// = white (surface), disabled = the muted cream. border #eceae1 → border ·
-	// hover #aba89c → fg-subtle · focus #75e7b8 → brand-green · error → danger.
-	// Identical to textarea.tsx's filled-field skin; `fieldSize` adds the
-	// single-line height (gs sizes the field via padding only).
+	// gs source: borderless cream fill, 8px radius, 14/18 text and 16px inline
+	// padding. Focus keeps an explicit ring for keyboard accessibility.
 	baseClass:
-		'w-full rounded-lg border border-border bg-surface px-4 text-small text-fg ' +
+		'w-full rounded-lg border-0 bg-surface-card px-4 text-small text-fg ' +
 		'outline-none transition-colors duration-200 placeholder:text-fg-muted ' +
-		'data-[hovered]:border-fg-subtle ' +
-		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
-		'data-[invalid]:border-danger data-[invalid]:ring-danger ' +
-		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+		'data-[hovered]:bg-surface-muted ' +
+		'data-[focused]:ring-2 data-[focused]:ring-ring ' +
+		'data-[invalid]:ring-2 data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 	variants: {
 		// `fieldSize` (not `size`) to avoid colliding with the native <input size>
 		// attribute, which RAC's Input inherits (a numeric prop).
@@ -41,6 +36,7 @@ const StyledInput = uic(RACInput, {
 			sm: 'h-8',
 			md: 'h-10',
 			lg: 'h-12',
+			tall: 'h-control-tall',
 		},
 	},
 	defaultVariants: {
@@ -56,13 +52,17 @@ export type InputProps = TextFieldProps & {
 	/** Error message; pass a string for a static error or rely on validation. */
 	errorMessage?: string
 	placeholder?: string
-	size?: 'sm' | 'md' | 'lg'
+	size?: 'sm' | 'md' | 'lg' | 'tall'
+	/** Optional class for the TextField root. */
+	rootClassName?: string
+	/** Optional class for the inner native input (for product-specific composition). */
+	inputClassName?: string
 }
 
-export const Input = ({ label, description, errorMessage, placeholder, size, ...props }: InputProps) => (
-	<TextField {...props} className="flex w-full flex-col gap-2">
-		<Label className="text-heading5 font-medium text-fg">{label}</Label>
-		<StyledInput placeholder={placeholder} fieldSize={size} />
+export const Input = ({ label, description, errorMessage, placeholder, size, rootClassName, inputClassName, ...props }: InputProps) => (
+	<TextField {...props} className={`flex w-full flex-col gap-3 ${rootClassName ?? ''}`}>
+		<Label className="text-panel-heading font-medium text-fg">{label}</Label>
+		<StyledInput className={inputClassName} placeholder={placeholder} fieldSize={size} />
 		{description ? (
 			<Text slot="description" className="text-label text-fg-muted">
 				{description}

package/src/components/section-tabs.tsx

@@ -36,6 +36,10 @@ export type SectionTabsProps = {
 	resetLabel?: string
 	/** Glyph for the reset control; defaults to a small grid icon. */
 	resetIcon?: ReactNode
+	/** Visible reset content. When set, renders a source-style text tab (e.g. "Summary"). */
+	resetContent?: ReactNode
+	/** Whether the reset/overview destination is the currently selected section. */
+	isResetSelected?: boolean
 	className?: string
 }
 
@@ -49,12 +53,12 @@ const GridGlyph = () => (
 )
 
 const tabBase =
-	'inline-flex h-7 items-center gap-2 rounded-sm px-3 text-compact text-fg-muted outline-none ' +
-	'transition-colors duration-[120ms] ease-[ease] data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
+	'inline-flex h-7 shrink-0 items-center gap-2 rounded-sm px-nav-x py-1.5 text-compact font-normal text-fg-muted outline-none ' +
+	'transition-colors duration-150 ease-in-out data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
 	'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
 	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-transparent data-[disabled]:text-fg-muted'
 
-const tabActive = 'bg-surface-muted font-medium text-fg'
+const tabActive = 'bg-surface-muted text-fg'
 
 export function SectionTabs({
 	tabs,
@@ -64,19 +68,37 @@ export function SectionTabs({
 	onReset,
 	resetLabel = 'Reset',
 	resetIcon,
+	resetContent,
+	isResetSelected = false,
 	className,
 }: SectionTabsProps) {
 	return (
-		<div className={['flex flex-wrap items-center gap-1', className].filter(Boolean).join(' ')} role="group">
+		<div
+			className={[
+				'flex min-h-9 w-full flex-nowrap items-start gap-2 overflow-x-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:w-2/3 lg:flex-wrap lg:overflow-visible lg:pb-0',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+			role="group"
+		>
 			{onReset ? (
-				<Button
-					variant="ghost"
-					aria-label={resetLabel}
-					onPress={onReset}
-					className="h-7 w-7 rounded-sm p-0 text-fg-muted data-[hovered]:text-fg"
-				>
-					{resetIcon ?? <GridGlyph />}
-				</Button>
+				<div className="sticky left-0 z-10 shrink-0 bg-surface pr-1 lg:static lg:bg-transparent lg:pr-0">
+					<Button
+						variant="ghost"
+						aria-label={resetLabel}
+						aria-pressed={isResetSelected}
+						onPress={onReset}
+						className={[
+							resetContent ? tabBase : 'h-7 w-7 rounded-sm p-0 text-fg-muted data-[hovered]:text-fg',
+							isResetSelected ? tabActive : '',
+						]
+							.filter(Boolean)
+							.join(' ')}
+					>
+						{resetContent ?? resetIcon ?? <GridGlyph />}
+					</Button>
+				</div>
 			) : null}
 			{tabs.map((tab) => {
 				const selected = active === tab.key

package/src/components/select.tsx

@@ -30,17 +30,15 @@ import { useInFocusOverlay } from './focus-context'
  */
 const SelectTrigger = uic(RACButton, {
 	displayName: 'SelectTrigger',
-	// Sized to match the other form fields (Input / ComboBox): h-12, 16px side
-	// padding, 8px radius. White fill + border so the trigger doesn't vanish inside
-	// a Card (also surface-card) and read as disabled; hover darkens the border.
-	// Error → 2px danger ring driven off the RACSelect root's `data-invalid`.
+	// Exact gs source control: 58px tall, 20px inline padding, borderless cream
+	// fill and 8px radius.
 	baseClass:
-		'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-surface px-4 ' +
+		'flex h-control-tall w-full items-center justify-between gap-2.5 rounded-lg border-0 bg-surface-card px-5 ' +
 		'text-small text-fg outline-none transition-colors ' +
-		'data-[hovered]:border-fg-subtle ' +
+		'data-[hovered]:bg-surface-muted ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
-		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
-		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+		'group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 })
 
 export const SelectItem = uic(ListBoxItem, {
@@ -66,6 +64,10 @@ export type SelectProps<T extends object> = RACSelectProps<T> & {
 	 */
 	placeholder: string
 	children: ReactNode
+	/** Optional class for the Select root. */
+	rootClassName?: string
+	/** Optional class for the trigger (for product-specific composition). */
+	triggerClassName?: string
 }
 
 export const Select = <T extends object>({
@@ -74,6 +76,8 @@ export const Select = <T extends object>({
 	errorMessage,
 	placeholder,
 	children,
+	rootClassName,
+	triggerClassName,
 	...props
 }: SelectProps<T>) => {
 	// In a focus overlay, show the options inline (seamless) instead of a popover.
@@ -91,8 +95,8 @@ export const Select = <T extends object>({
 	const err = <FieldError className="text-label text-danger">{errorMessage}</FieldError>
 
 	return (
-		<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
-			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<RACSelect {...props} placeholder={placeholder} className={`group flex flex-col gap-3 ${rootClassName ?? ''}`}>
+			<Label className="text-panel-heading font-medium text-fg">{label}</Label>
 			{inFocus ? (
 				<>
 					{listbox}
@@ -101,7 +105,7 @@ export const Select = <T extends object>({
 				</>
 			) : (
 				<>
-					<SelectTrigger>
+					<SelectTrigger className={triggerClassName}>
 						<SelectValue className="data-[placeholder]:text-fg-muted" />
 						{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
 						<svg

package/src/components/text.tsx

@@ -20,6 +20,25 @@ import { uic } from '../utils/uic'
  * no i18n.
  */
 
+/**
+ * The large product heading from the GS reference UI (`label-1` in its original
+ * token vocabulary): 30px / 32px / medium with -2px tracking.
+ *
+ * Kept separate from the 28px semantic Heading ramp because it is a reusable
+ * product-display treatment, not a document-outline level. Use `asChild` to project
+ * it onto the correct h1–h6 element.
+ */
+export const DisplayHeading = uic('h2', {
+	displayName: 'DisplayHeading',
+	baseClass: 'text-display-large font-medium text-fg',
+})
+
+/** Compact 17px / 20px section title used in workflow and dialog panels. */
+export const PanelHeading = uic('h3', {
+	displayName: 'PanelHeading',
+	baseClass: 'text-panel-heading font-medium text-fg',
+})
+
 export const Text = uic('span', {
 	displayName: 'Text',
 	baseClass: 'text-fg',

package/src/utils/uic.ts

@@ -58,12 +58,15 @@ const twMerge = extendTailwindMerge({
 						'caption',
 						'label',
 						'compact',
+						'small',
 						'callout',
 						'body',
 						'subtitle',
 						'title',
 						'headline',
 						'display',
+						'display-large',
+						'panel-heading',
 						// Heading ramp (size + line-height).
 						'heading1',
 						'heading2',
@@ -75,7 +78,7 @@ const twMerge = extendTailwindMerge({
 			],
 		},
 		theme: {
-			spacing: ['nav-x'],
+			spacing: ['nav-x', 'control-tall'],
 			// Custom card/panel radius key (rounded-panel) → dedupes against other
 			// rounded-* utilities. xl/2xl are stock keys tailwind-merge already knows.
 			radius: ['panel'],