@podoba/react 0.0.7 → 0.0.9

package/package.json

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

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

@@ -0,0 +1,189 @@
+import { type ReactNode, useState } from 'react'
+import { Button } from './button'
+
+/**
+ * BrandPageHeader — the brand-workspace page header (port of gs-platform
+ * `GSPageHeader` + `ExpandableCTA`).
+ *
+ * gs-platform's header is a two-column grid: a left "welcome" section
+ * (optional breadcrumbs + a large greeting line) and a right section holding an
+ * `ExpandableCTA` — a collapsed teal pill that expands into an inline
+ * create-hub panel. We port that interaction to React Aria + Tailwind + the
+ * teal accent token (`brand-secondary`), dropping gs-platform's mobile
+ * fixed-sheet behaviour for a simpler inline disclosure.
+ *
+ * The expandable CTA is a controlled disclosure: the collapsed teal pill is a
+ * React Aria `Button` (keyboard + focus ring + press handling) wired to a
+ * `region` with `aria-expanded`/`aria-controls`, so it follows the WAI-ARIA
+ * disclosure pattern without pulling in extra markup.
+ *
+ * Presentational only (hard rule #1): every string (greeting, breadcrumb
+ * labels, CTA label) arrives via props — no API, no i18n.
+ */
+
+export type BrandPageHeaderCrumb = {
+	label: ReactNode
+	/** Optional click handler — when set the crumb renders as a button. */
+	onPress?: () => void
+}
+
+export type BrandPageHeaderProps = {
+	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
+	greeting: ReactNode
+	/**
+	 * 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
+	 * router `<Link>` so it's an anchor (cmd/middle-click, deep-link-safe), exactly
+	 * like gs's `parentLink`. The header styles it muted with a hover→fg affordance.
+	 */
+	parentLink?: ReactNode
+	/** Optional breadcrumb trail rendered above the greeting. */
+	breadcrumbs?: BrandPageHeaderCrumb[]
+	/**
+	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner). When
+	 * set it REPLACES the collapsed-pill ExpandableCTA — use this for the
+	 * gs-faithful "Let's create something" hero. `ctaLabel`/`createHub` are ignored.
+	 */
+	cta?: ReactNode
+	/** Label on the collapsed teal "Create" pill. Required to render the CTA. */
+	ctaLabel?: ReactNode
+	/** Inline content revealed when the CTA expands (the create hub). */
+	createHub?: ReactNode
+	/** Controlled expansion (optional — uncontrolled by default). */
+	expanded?: boolean
+	onExpandedChange?: (expanded: boolean) => void
+	/** Accessible label for the close control when expanded. Defaults to "Close". */
+	closeLabel?: string
+	/** Sticky header on scroll. */
+	sticky?: boolean
+	className?: string
+}
+
+const PANEL_ID = 'brand-page-header-create-hub'
+
+export function BrandPageHeader({
+	greeting,
+	parentLink,
+	breadcrumbs,
+	cta,
+	ctaLabel,
+	createHub,
+	expanded: expandedProp,
+	onExpandedChange,
+	closeLabel = 'Close',
+	sticky = false,
+	className,
+}: BrandPageHeaderProps) {
+	const [internalExpanded, setInternalExpanded] = useState(false)
+	const isControlled = expandedProp !== undefined
+	const expanded = isControlled ? expandedProp : internalExpanded
+	const hasExpandable = Boolean(createHub)
+
+	const setExpanded = (next: boolean) => {
+		if (!isControlled) setInternalExpanded(next)
+		onExpandedChange?.(next)
+	}
+
+	return (
+		<div
+			className={[
+				'mb-6 w-full',
+				sticky ? 'sticky top-0 z-30 bg-surface' : '',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+		>
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+				<div className="flex min-w-0 flex-col gap-1">
+					{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) => (
+								<span key={i} className="inline-flex items-center gap-1">
+									{i > 0 ? <span aria-hidden="true">/</span> : null}
+									{crumb.onPress ? (
+										<Button
+											variant="ghost"
+											onPress={crumb.onPress}
+											className="h-auto rounded-sm p-0 text-compact font-normal text-fg-muted data-[hovered]:bg-transparent data-[hovered]:text-fg data-[hovered]:underline"
+										>
+											{crumb.label}
+										</Button>
+									) : (
+										<span>{crumb.label}</span>
+									)}
+								</span>
+							))}
+						</nav>
+					) : null}
+					<h1 className="text-display font-medium leading-[1.12] tracking-[-0.56px] 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}
+					</h1>
+				</div>
+
+				{cta ? (
+					<div className="w-full shrink-0 sm:w-auto sm:min-w-[360px]">{cta}</div>
+				) : ctaLabel ? (
+					<div className="shrink-0">
+						{hasExpandable ? (
+							<Button
+								onPress={() => setExpanded(!expanded)}
+								aria-expanded={expanded}
+								aria-controls={PANEL_ID}
+								className="h-10 rounded-full bg-brand-secondary px-5 text-sm font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
+							>
+								{ctaLabel}
+							</Button>
+						) : (
+							<Button className="h-10 rounded-full bg-brand-secondary px-5 text-sm font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80">
+								{ctaLabel}
+							</Button>
+						)}
+					</div>
+				) : null}
+			</div>
+
+			{hasExpandable ? (
+				<div
+					id={PANEL_ID}
+					role="region"
+					aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
+					hidden={!expanded}
+					className="mt-4"
+				>
+					{expanded ? (
+						<div className="relative rounded-lg border border-border bg-surface-card p-4 animate-expand-cta motion-reduce:animate-none">
+							<Button
+								variant="ghost"
+								aria-label={closeLabel}
+								onPress={() => setExpanded(false)}
+								className="absolute right-2 top-2 h-7 w-7 rounded-full p-0 text-fg-muted data-[hovered]:bg-surface-muted data-[hovered]:text-fg"
+							>
+								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+									<path
+										d="M6 6l12 12M18 6L6 18"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+									/>
+								</svg>
+							</Button>
+							{createHub}
+						</div>
+					) : null}
+				</div>
+			) : null}
+		</div>
+	)
+}

package/src/components/collapsible-card.tsx

@@ -0,0 +1,121 @@
+import {
+	Button as RACButton,
+	Disclosure as RACDisclosure,
+	DisclosurePanel as RACDisclosurePanel,
+	type DisclosureProps as RACDisclosureProps,
+} from 'react-aria-components'
+import type { ReactNode } from 'react'
+
+/**
+ * CollapsibleCard — a titled, expandable card (title + description + chevron,
+ * expanding to reveal a body).
+ *
+ * Styled composition over React Aria Components' `Disclosure` (see
+ * `./disclosure.tsx` for the unstyled primitive): RAC supplies the WAI-ARIA
+ * disclosure wiring (`aria-expanded` / `aria-controls`, keyboard activation,
+ * hidden-until-expanded panel) and, on its root element, a `data-expanded`
+ * attribute. We make the root a Tailwind `group`, so the chevron rotates via
+ * `group-data-[expanded]:rotate-90` — no render-prop plumbing needed.
+ *
+ * Token mapping (Tailwind + `@podoba/tokens` CSS vars — no SCSS, hard rule #3):
+ *   - surface → `bg-surface-card` (#f7f6f2), 1px `border-border`, `rounded-lg`
+ *     (8px) — same skin as `Card` / `StatsCard`.
+ *   - title → `text-heading4` (1.125rem) `font-semibold text-fg`.
+ *   - description → `text-body text-fg-muted`.
+ *
+ * Presentational only (hard rule #1): all copy via props, no API/i18n.
+ *
+ * Controlled or uncontrolled — pass `isExpanded` + `onExpandedChange` to control,
+ * or `defaultExpanded` to seed the uncontrolled state.
+ *
+ *   <CollapsibleCard title="Variables" description="Shared variables applied across this template.">
+ *     <Select label="Color theme" …/>
+ *   </CollapsibleCard>
+ */
+export type CollapsibleCardProps = {
+	/** Bold card title (the always-visible header line). */
+	title: ReactNode
+	/** Optional muted supporting line under the title. */
+	description?: ReactNode
+	/** The collapsible body, revealed when expanded. */
+	children?: ReactNode
+	/** Seed the uncontrolled expanded state. */
+	defaultExpanded?: boolean
+	/** Controlled expanded state (pair with `onExpandedChange`). */
+	isExpanded?: boolean
+	/** Fires when the user toggles the card. */
+	onExpandedChange?: (isExpanded: boolean) => void
+	/** Disable expand/collapse. */
+	isDisabled?: boolean
+	/** Extra classes merged onto the card root. */
+	className?: string
+	'data-testid'?: string
+}
+
+const Chevron = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+		className="mt-0.5 shrink-0 text-fg transition-transform duration-150 group-data-[expanded]:rotate-90"
+	>
+		<path
+			d="M6 4l4 4-4 4"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+)
+
+export function CollapsibleCard({
+	title,
+	description,
+	children,
+	defaultExpanded,
+	isExpanded,
+	onExpandedChange,
+	isDisabled,
+	className,
+	...rest
+}: CollapsibleCardProps) {
+	const disclosureProps: RACDisclosureProps = {
+		defaultExpanded,
+		isExpanded,
+		onExpandedChange,
+		isDisabled,
+	}
+	return (
+		<RACDisclosure
+			{...disclosureProps}
+			data-testid={rest['data-testid']}
+			className={[
+				'group overflow-hidden rounded-lg border border-border bg-surface-card',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+		>
+			<RACButton
+				slot="trigger"
+				className={
+					'flex w-full items-center justify-between gap-4 rounded-lg p-6 text-left outline-none ' +
+					'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60 ' +
+					'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-inset'
+				}
+			>
+				<span className="flex flex-col gap-1">
+					<span className="text-heading4 font-semibold leading-tight text-fg">{title}</span>
+					{description ? (
+						<span className="text-body leading-snug text-fg-muted">{description}</span>
+					) : null}
+				</span>
+				<Chevron />
+			</RACButton>
+			<RACDisclosurePanel className="px-6 pb-6">{children}</RACDisclosurePanel>
+		</RACDisclosure>
+	)
+}

package/src/components/combobox.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import {
+	Autocomplete,
 	Button as RACButton,
 	ComboBox as RACComboBox,
 	type ComboBoxProps as RACComboBoxProps,
@@ -10,9 +11,12 @@ import {
 	ListBoxItem,
 	type ListBoxItemProps,
 	Popover,
+	SearchField,
 	Text,
+	useFilter,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * ComboBox — a filterable single-select: a text input that narrows a listbox as
@@ -65,32 +69,78 @@ export const ComboBox = <T extends object>({
 	errorMessage,
 	placeholder,
 	children,
+	selectedKey,
+	onSelectionChange,
 	...props
-}: ComboBoxProps<T>) => (
-	// `menuTrigger="focus"` opens the list on focus/click (not only on typing), so
-	// the options are always one interaction away. Consumers can override via props.
-	<RACComboBox menuTrigger="focus" {...props} className="group flex flex-col gap-2">
-		<Label className="text-heading5 font-medium text-fg">{label}</Label>
-		<div className="relative">
-			<ComboBoxInput placeholder={placeholder} />
-			{/* RAC uses this Button to toggle the listbox open/closed. */}
-			<RACButton className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring">
-				<Chevron />
-			</RACButton>
-		</div>
-		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
-				{description}
-			</Text>
-		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
-		<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
-			<ListBox
-				className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
-				renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
-			>
-				{children}
-			</ListBox>
-		</Popover>
-	</RACComboBox>
-)
+}: ComboBoxProps<T>) => {
+	const inFocus = useInFocusOverlay()
+	const { contains } = useFilter({ sensitivity: 'base' })
+	const desc = description ? (
+		<Text slot="description" className="text-xs text-fg-muted">
+			{description}
+		</Text>
+	) : null
+
+	// Focus overlay: a bare search input + an inline filtered list (RAC ComboBox
+	// only fills its listbox while open, so compose Autocomplete + ListBox here).
+	if (inFocus) {
+		return (
+			<div className="flex flex-col gap-2">
+				<span className="text-heading5 font-medium text-fg">{label}</span>
+				<Autocomplete filter={contains}>
+					<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"
+						/>
+					</SearchField>
+					<ListBox
+						selectionMode="single"
+						selectedKeys={selectedKey != null ? new Set([selectedKey]) : new Set()}
+						onSelectionChange={(keys) => {
+							const k = keys === 'all' ? undefined : [...keys][0]
+							onSelectionChange?.(k ?? null)
+						}}
+						renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
+						className="mt-2 flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
+					>
+						{children}
+					</ListBox>
+				</Autocomplete>
+				{desc}
+				{errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
+			</div>
+		)
+	}
+
+	return (
+		// `menuTrigger="focus"` opens the list on focus/click (not only on typing), so
+		// the options are always one interaction away. Consumers can override via props.
+		<RACComboBox
+			menuTrigger="focus"
+			selectedKey={selectedKey}
+			onSelectionChange={onSelectionChange}
+			{...props}
+			className="group flex flex-col gap-2"
+		>
+			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+			<div className="relative">
+				<ComboBoxInput placeholder={placeholder} />
+				{/* RAC uses this Button to toggle the listbox open/closed. */}
+				<RACButton className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring">
+					<Chevron />
+				</RACButton>
+			</div>
+			{desc}
+			<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+			<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
+				<ListBox
+					className="flex max-h-72 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
+					renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
+				>
+					{children}
+				</ListBox>
+			</Popover>
+		</RACComboBox>
+	)
+}

package/src/components/dashboard-grid.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+
+/**
+ * DashboardGrid + DashboardTile — responsive 12-column dashboard grid
+ * (port of gs-platform `DashboardGrid`).
+ *
+ * gs-platform's grid is a 12-col CSS grid where each item declares a `width`
+ * (3/4/6/12) and tiles collapse to full width on mobile. We reproduce that with
+ * Tailwind responsive column spans — no SCSS, no external grid lib.
+ *
+ * **Drag-to-reorder is DEFERRED** for this issue: gs-platform implements it with
+ * `@dnd-kit/core` + `@dnd-kit/sortable`, which are not dependencies of this repo
+ * and adding them is out of scope (no dependency bumps). A static responsive grid
+ * is acceptable per the issue spec; the `DashboardTile` API is shaped so a future
+ * sortable wrapper can slot in without changing call sites.
+ *
+ * Presentational only (hard rule #1).
+ */
+
+export type DashboardTileSpan = 3 | 4 | 6 | 12
+
+const SPAN_CLASS: Record<DashboardTileSpan, string> = {
+	// Mobile: always full width. ≥sm: take the requested fraction of 12 cols.
+	3: 'col-span-12 sm:col-span-6 lg:col-span-3',
+	4: 'col-span-12 sm:col-span-6 lg:col-span-4',
+	6: 'col-span-12 sm:col-span-6',
+	12: 'col-span-12',
+}
+
+export type DashboardGridProps = {
+	children: ReactNode
+	className?: string
+}
+
+export function DashboardGrid({ children, className }: DashboardGridProps) {
+	return (
+		<div className={['grid grid-cols-12 gap-4', className].filter(Boolean).join(' ')}>{children}</div>
+	)
+}
+
+export type DashboardTileProps = {
+	/** Column span out of 12 (collapses to full width below `lg`). Default 3. */
+	span?: DashboardTileSpan
+	children: ReactNode
+	className?: string
+}
+
+export function DashboardTile({ span = 3, children, className }: DashboardTileProps) {
+	return <div className={[SPAN_CLASS[span], className].filter(Boolean).join(' ')}>{children}</div>
+}

package/src/components/date-picker.tsx

@@ -20,7 +20,9 @@ import {
 	Popover,
 	Text,
 } from 'react-aria-components'
+import { clsx } from 'clsx'
 import { dateInputClass, segmentClass } from './date-field'
+import { useInFocusOverlay } from './focus-context'
 
 /**
  * DatePicker — a `DateField` with a calendar popover. Built on React Aria
@@ -38,74 +40,86 @@ const Chevron = ({ dir }: { dir: 'left' | 'right' }) => (
 	</svg>
 )
 
+const calendarCellClass =
+	'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-sm text-fg outline-none transition-colors ' +
+	'data-[outside-month]:text-fg-subtle data-[hovered]:bg-surface-muted ' +
+	'data-[selected]:bg-fg data-[selected]:text-fg-inverted data-[selected]:font-medium ' +
+	'data-[unavailable]:text-fg-subtle data-[unavailable]:line-through ' +
+	'data-[disabled]:opacity-40 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
+
+function CalendarBody() {
+	return (
+		<Calendar className="w-[17.5rem]">
+			<header className="flex items-center justify-between pb-3">
+				<RACButton slot="previous" className={navButton}>
+					<Chevron dir="left" />
+				</RACButton>
+				<Heading className="text-sm font-medium text-fg" />
+				<RACButton slot="next" className={navButton}>
+					<Chevron dir="right" />
+				</RACButton>
+			</header>
+			<CalendarGrid className="w-full border-collapse">
+				<CalendarGridHeader>
+					{(day) => (
+						<CalendarHeaderCell className="pb-1 text-micro font-medium uppercase tracking-wide text-fg-subtle">
+							{day}
+						</CalendarHeaderCell>
+					)}
+				</CalendarGridHeader>
+				<CalendarGridBody>{(date) => <CalendarCell date={date} className={calendarCellClass} />}</CalendarGridBody>
+			</CalendarGrid>
+		</Calendar>
+	)
+}
+
 export type DatePickerProps<T extends DateValue> = RACDatePickerProps<T> & {
 	label: ReactNode
 	description?: ReactNode
 	errorMessage?: string
 }
 
-export const DatePicker = <T extends DateValue>({ label, description, errorMessage, ...props }: DatePickerProps<T>) => (
-	<RACDatePicker {...props} className="group flex flex-col gap-2">
-		<Label className="text-heading5 font-medium text-fg">{label}</Label>
-		<Group className={`${dateInputClass} pr-2`}>
-			<DateInput className="flex flex-1 items-center gap-0.5">
-				{(segment) => <DateSegment segment={segment} className={segmentClass} />}
-			</DateInput>
-			<RACButton
-				aria-label="Open calendar"
-				className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-muted outline-none transition-colors hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
-			>
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-					<rect x="3" y="4" width="18" height="18" rx="2" />
-					<path d="M16 2v4M8 2v4M3 10h18" />
-				</svg>
-			</RACButton>
-		</Group>
-		{description ? (
-			<Text slot="description" className="text-xs text-fg-muted">
-				{description}
-			</Text>
-		) : null}
-		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
-		<Popover className="rounded-lg border border-border bg-surface p-4 shadow-lg outline-none">
-			<Dialog className="outline-none">
-				<Calendar className="w-[17.5rem]">
-					<header className="flex items-center justify-between pb-3">
-						<RACButton slot="previous" className={navButton}>
-							<Chevron dir="left" />
-						</RACButton>
-						<Heading className="text-sm font-medium text-fg" />
-						<RACButton slot="next" className={navButton}>
-							<Chevron dir="right" />
-						</RACButton>
-					</header>
-					<CalendarGrid className="w-full border-collapse">
-						<CalendarGridHeader>
-							{(day) => (
-								<CalendarHeaderCell className="pb-1 text-micro font-medium uppercase tracking-wide text-fg-subtle">
-									{day}
-								</CalendarHeaderCell>
-							)}
-						</CalendarGridHeader>
-						<CalendarGridBody>
-							{(date) => (
-								<CalendarCell
-									date={date}
-									className={
-										'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-sm text-fg outline-none transition-colors ' +
-										'data-[outside-month]:text-fg-subtle ' +
-										'data-[hovered]:bg-surface-muted ' +
-										'data-[selected]:bg-fg data-[selected]:text-fg-inverted data-[selected]:font-medium ' +
-										'data-[unavailable]:text-fg-subtle data-[unavailable]:line-through ' +
-										'data-[disabled]:opacity-40 ' +
-										'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
-									}
-								/>
-							)}
-						</CalendarGridBody>
-					</CalendarGrid>
-				</Calendar>
-			</Dialog>
-		</Popover>
-	</RACDatePicker>
-)
+export const DatePicker = <T extends DateValue>({ label, description, errorMessage, ...props }: DatePickerProps<T>) => {
+	// In a focus overlay, show the calendar inline (open) instead of a popover.
+	const inFocus = useInFocusOverlay()
+	return (
+		<RACDatePicker {...props} className="group flex flex-col gap-2">
+			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+			{/* 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')}>
+					{(segment) => <DateSegment segment={segment} className={segmentClass} />}
+				</DateInput>
+				{inFocus ? null : (
+					<RACButton
+						aria-label="Open calendar"
+						className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-muted outline-none transition-colors hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+					>
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+							<rect x="3" y="4" width="18" height="18" rx="2" />
+							<path d="M16 2v4M8 2v4M3 10h18" />
+						</svg>
+					</RACButton>
+				)}
+			</Group>
+			{description ? (
+				<Text slot="description" className="text-xs text-fg-muted">
+					{description}
+				</Text>
+			) : null}
+			<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+			{inFocus ? (
+				<div className="mt-2 -ml-2">
+					<CalendarBody />
+				</div>
+			) : (
+				<Popover className="rounded-lg border border-border bg-surface p-4 shadow-lg outline-none">
+					<Dialog className="outline-none">
+						<CalendarBody />
+					</Dialog>
+				</Popover>
+			)}
+		</RACDatePicker>
+	)
+}