@podoba/react 0.0.1

package/src/components/dialog.tsx

@@ -0,0 +1,203 @@
+import type { ReactNode } from 'react'
+import {
+	Dialog as RACDialog,
+	DialogTrigger as RACDialogTrigger,
+	type DialogProps as RACDialogProps,
+	Heading,
+	Modal,
+	ModalOverlay,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Dialog — modal dialog built on React Aria Components.
+ *
+ * RAC `Modal` provides focus trapping, scroll locking, `Esc` to close and
+ * `aria-modal` semantics automatically. Compose with `DialogTrigger` for the
+ * open/close state, or drive it controlled via `Modal`'s `isOpen`.
+ */
+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, {
+	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',
+})
+
+// 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, {
+	displayName: 'DialogModal',
+	baseClass:
+		'rounded-lg bg-surface p-5 outline-none shadow-[0px_2px_8px_0px_rgba(0,0,0,0.06)]',
+})
+
+/**
+ * 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
+ * (e.g. a multi-step workspace stepper); `full` is a near-fullscreen canvas (e.g.
+ * the output-template picker gallery). The taller presets cap height with an internal
+ * scroll so content never overflows the viewport.
+ */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+// gs size presets (exact px max-widths from the designer's spec): sm 420 / md 586
+// / lg 720 / xl 900. All cap to `90vw` width and `85vh` height with internal
+// scroll. Default is `md` (gs DialogContent default = 586px).
+const SIZE_CLASS: Record<DialogSize, string> = {
+	sm: 'w-[90vw] max-w-[420px] max-h-[85vh] overflow-y-auto',
+	md: 'w-[90vw] max-w-[586px] max-h-[85vh] overflow-y-auto',
+	lg: 'w-[90vw] max-w-[720px] max-h-[85vh] overflow-y-auto',
+	xl: 'w-[90vw] max-w-[900px] max-h-[85vh] overflow-y-auto',
+	// Our addition (not in gs): a fixed near-fullscreen canvas (flex column so the
+	// body fills and any inner region can scroll with the header/footer pinned).
+	full: 'w-[95vw] max-w-[95vw] h-[92vh] flex flex-col',
+}
+
+/** Title size scales with the modal: small dialogs stay compact, large canvases get
+ *  a proper heading (gs picker headline). */
+// gs `.title` = heading-1 (1.75rem/28px) · weight 500 (medium) · 30px line. sm/md
+// were 18px/600; all sizes now use the gs medium weight (not semibold).
+const TITLE_CLASS: Record<DialogSize, string> = {
+	sm: 'text-heading1 font-medium tracking-tight',
+	md: 'text-heading1 font-medium tracking-tight',
+	lg: 'text-heading2 font-medium tracking-tight',
+	xl: 'text-heading2 font-medium tracking-tight',
+	full: 'text-heading1 font-medium tracking-tight',
+}
+
+export type DialogProps = RACDialogProps & {
+	/** Accessible dialog title — rendered as the labelling heading. */
+	title?: ReactNode
+	/**
+	 * Optional sub-text under the title (e.g. "Invite collaborators and manage
+	 * visibility"). Rendered muted; pairs with `title` to form a header block.
+	 */
+	description?: ReactNode
+	/**
+	 * Optional pill rendered inline beside the title (e.g. a status / step / count
+	 * badge). Caller supplies the content; the Dialog supplies the pill chrome.
+	 */
+	badge?: ReactNode
+	/** Width preset — `md` (default) for forms; `sm` for tight confirms; `lg`/`xl` for wide stepper content. */
+	size?: DialogSize
+	children: ReactNode | ((opts: { close: () => void }) => ReactNode)
+	/**
+	 * Controlled open state. Provide together with `onOpenChange` to drive the
+	 * dialog from caller state (the modal renders only when `isOpen`). Omit both
+	 * to let an enclosing `DialogTrigger` own the open/close state instead.
+	 */
+	isOpen?: boolean
+	/** Uncontrolled initial open state (ignored when `isOpen` is provided). */
+	defaultOpen?: boolean
+	/** Notified on open/close — fires with `false` on Esc / click-outside / close(). */
+	onOpenChange?: (isOpen: boolean) => void
+	/** Allow dismissing via Esc and click-outside (default true). */
+	isDismissable?: boolean
+	/** Accessible label for the close (✕) control. Defaults to "Close". */
+	closeLabel?: string
+}
+
+export const Dialog = ({
+	title,
+	description,
+	badge,
+	// gs DialogContent defaults to `md` (586px form width).
+	size = 'md',
+	children,
+	isOpen,
+	defaultOpen,
+	onOpenChange,
+	isDismissable = true,
+	closeLabel = 'Close',
+	...props
+}: DialogProps) => {
+	// `full` is a fixed-height flex canvas: the body fills and scrolls internally so
+	// the header (+ a footer the content pins) stay put. Other sizes are content-height.
+	const isFlex = size === 'full'
+	return (
+		// `isOpen`/`defaultOpen`/`onOpenChange` go to the RAC ModalOverlay: when
+		// provided the dialog is controlled (renders independently of a DialogTrigger);
+		// 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
+			isOpen={isOpen}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+			isDismissable={isDismissable}
+		>
+			<StyledModal className={SIZE_CLASS[size]}>
+				<RACDialog
+					{...props}
+					className={isFlex ? 'flex min-h-0 flex-1 flex-col outline-none' : 'outline-none'}
+				>
+					{(renderProps) => (
+						<>
+							<div className="mb-4 flex shrink-0 items-start justify-between gap-4">
+								{title || description ? (
+									<div className="min-w-0">
+										{title ? (
+											<div className="flex items-center gap-2">
+												<Heading slot="title" className={`${TITLE_CLASS[size]} text-fg`}>
+													{title}
+												</Heading>
+												{badge ? (
+													<span className="inline-flex shrink-0 items-center rounded-full bg-surface-muted px-2 py-0.5 text-xs font-medium text-fg-muted">
+														{badge}
+													</span>
+												) : null}
+											</div>
+										) : null}
+										{description ? (
+											// gs `.description` = base 16px, text-secondary (=fg).
+											<p className="mt-1 text-body text-fg">{description}</p>
+										) : null}
+									</div>
+								) : (
+									<span aria-hidden="true" />
+								)}
+								<button
+									type="button"
+									onClick={renderProps.close}
+									aria-label={closeLabel}
+									// gs close: 32px square (`h-8 w-8`), medium radius (`rounded-md`),
+									// tertiary icon color (`text-fg-subtle`) → primary (`text-fg`) +
+									// subtle hover bg on hover. Smooth color transition.
+									className="-mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+								>
+									<svg
+										width="18"
+										height="18"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+										aria-hidden="true"
+									>
+										<path d="M6 6l12 12M18 6 6 18" />
+									</svg>
+								</button>
+							</div>
+							{isFlex ? (
+								<div className="flex min-h-0 flex-1 flex-col">
+									{typeof children === 'function' ? children(renderProps) : children}
+								</div>
+							) : typeof children === 'function' ? (
+								children(renderProps)
+							) : (
+								children
+							)}
+						</>
+					)}
+				</RACDialog>
+			</StyledModal>
+		</Overlay>
+	)
+}

package/src/components/disclosure.tsx

@@ -0,0 +1,36 @@
+import {
+	Disclosure as RACDisclosure,
+	type DisclosureProps as RACDisclosureProps,
+	DisclosurePanel as RACDisclosurePanel,
+	type DisclosurePanelProps as RACDisclosurePanelProps,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Disclosure — collapsible section built on React Aria Components `Disclosure`.
+ *
+ * RAC supplies the WAI-ARIA disclosure pattern: `aria-expanded` /
+ * `aria-controls` wiring between the trigger and the panel, keyboard
+ * activation and hidden-until-expanded panel semantics. Compose with the
+ * `@app/ui` `Button` as the trigger (pass `slot="trigger"`):
+ *
+ *   <Disclosure>
+ *     <Button slot="trigger" variant="ghost">Details</Button>
+ *     <DisclosurePanel>…</DisclosurePanel>
+ *   </Disclosure>
+ *
+ * Deliberately unstyled — consumers shape the row (border, background,
+ * padding) via `className`; `uic` merges it with `tailwind-merge`.
+ */
+export const Disclosure = uic(RACDisclosure, {
+	displayName: 'Disclosure',
+}) as (props: RACDisclosureProps & { 'data-testid'?: string }) => ReturnType<typeof RACDisclosure>
+
+export const DisclosurePanel = uic(RACDisclosurePanel, {
+	displayName: 'DisclosurePanel',
+}) as (
+	props: RACDisclosurePanelProps & { 'data-testid'?: string },
+) => ReturnType<typeof RACDisclosurePanel>
+
+export type DisclosureProps = RACDisclosureProps
+export type DisclosurePanelProps = RACDisclosurePanelProps

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react'
+import {
+	Header,
+	Menu as RACMenu,
+	MenuItem as RACMenuItem,
+	type MenuItemProps as RACMenuItemProps,
+	type MenuProps as RACMenuProps,
+	MenuSection as RACMenuSection,
+	type MenuSectionProps as RACMenuSectionProps,
+	MenuTrigger as RACMenuTrigger,
+	Popover as RACPopover,
+	type PopoverProps as RACPopoverProps,
+	Separator as RACSeparator,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * DropdownMenu — trigger-anchored action menu (port of gs-platform's LIGHT
+ * `DropdownMenu`).
+ *
+ * Distinct from {@link ContextMenu} (the dark, pointer-positioned right-click
+ * `ContextActionPanel`): this is a BUTTON → menu, anchored to its trigger. gs
+ * builds it on Radix `DropdownMenu` + an SCSS module; we re-implement on React
+ * Aria Components `MenuTrigger` + `Popover` + `Menu`, which provides the WAI-ARIA
+ * menu pattern for free — roving focus, arrow / Home / End navigation, type-ahead,
+ * Escape-to-close, outside-press dismissal, focus restoration and viewport-aware
+ * collision handling (the popover flips / shifts to stay on-screen).
+ *
+ * Compose it like the RAC primitive — a trigger element next to the menu:
+ *
+ * ```tsx
+ * <DropdownMenuTrigger>
+ *   <Button>Actions</Button>
+ *   <DropdownMenu aria-label="Actions" onAction={(key) => …}>
+ *     <DropdownMenuItem id="rename">Rename</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem id="delete" destructive>Delete</DropdownMenuItem>
+ *   </DropdownMenu>
+ * </DropdownMenuTrigger>
+ * ```
+ *
+ * gs token map (this is the LIGHT menu, so the gs literals map cleanly to our
+ * tokens): content bg white → `surface` · 1px `#eceae1` border → `border` · 8px
+ * radius → `rounded-lg` · `shadow-lg` · item 12/16px padding → `py-3 px-4` · 6px
+ * item radius → `rounded-md` · item hover `#f7f6f2` → `surface-card` · item text
+ * `#0d0d0d` → `fg` · section label `#aba89c` 13px → `text-fg-subtle text-compact`
+ * · separator `#eceae1` → `border`. The destructive item uses `text-danger`
+ * (`#dc2626`) — a light-surface red that reads correctly here (unlike the dark
+ * ContextMenu, which needs the lighter `#ffb5b5`).
+ *
+ * Presentational only (hard rule #1) — no app imports.
+ */
+
+/** Re-export of RAC `MenuTrigger`; owns the open/close state for the pair. */
+export const DropdownMenuTrigger = RACMenuTrigger
+
+// gs `.item`: 12/16px padding, 6px radius, base text on white; hover/focus wash
+// `#f7f6f2` (→ surface-card). We light up both `data-[focused]` (keyboard) and
+// `data-[hovered]` (pointer) so keyboard focus stays clearly visible. Item text
+// size follows the house light Select (`text-sm`) rather than gs's 16px base so
+// the two light dropdowns stay consistent.
+export const DropdownMenuItem = uic(RACMenuItem, {
+	displayName: 'DropdownMenuItem',
+	baseClass:
+		'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
+		'text-sm text-fg outline-none ' +
+		'data-[focused]:bg-surface-card data-[hovered]:bg-surface-card ' +
+		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+	variants: {
+		// gs has no destructive item style on the light menu; we add the house danger
+		// token (red text), which reads correctly on the white / cream surface.
+		destructive: { true: 'text-danger data-[focused]:text-danger data-[hovered]:text-danger' },
+	},
+}) as (props: RACMenuItemProps & { destructive?: boolean }) => ReactNode
+
+// gs `.separator`: 1px rule, 8px vertical margin (`my-2`), `#eceae1` (→ border).
+export const DropdownMenuSeparator = uic(RACSeparator, {
+	displayName: 'DropdownMenuSeparator',
+	baseClass: 'my-2 h-px border-0 bg-border',
+})
+
+export interface DropdownMenuSectionProps<T extends object> extends Omit<RACMenuSectionProps<T>, 'children'> {
+	/**
+	 * Section label (gs `.label`). Rendered as a non-interactive `Header` — 13px
+	 * medium, `fg-subtle` — above the section's items.
+	 */
+	label?: ReactNode
+	/** Static section items (each a {@link DropdownMenuItem}). */
+	children: ReactNode
+}
+
+/** A labelled group of items. Optional `label` renders the gs section header. */
+export function DropdownMenuSection<T extends object>({
+	label,
+	children,
+	...props
+}: DropdownMenuSectionProps<T>) {
+	return (
+		<RACMenuSection {...props}>
+			{label ? (
+				<Header className="px-4 py-3 text-compact font-medium text-fg-subtle">{label}</Header>
+			) : null}
+			{children}
+		</RACMenuSection>
+	)
+}
+
+export type DropdownMenuProps<T extends object> = RACMenuProps<T> & {
+	/** Popover placement relative to the trigger (default `bottom start`). */
+	placement?: RACPopoverProps['placement']
+	/** Extra classes merged onto the popover container. */
+	popoverClassName?: string
+}
+
+/**
+ * The popover + menu body. Anchors to the enclosing {@link DropdownMenuTrigger}.
+ * Pass `onAction` for a single keyed handler, or per-item `onAction` on each
+ * {@link DropdownMenuItem}. `disabledKeys` / `aria-label` flow through to the
+ * underlying RAC `Menu`.
+ */
+export function DropdownMenu<T extends object>({
+	placement = 'bottom start',
+	popoverClassName,
+	className,
+	...props
+}: DropdownMenuProps<T>) {
+	return (
+		// gs `.content`: min-width 220px, 8px padding (`p-2`), 8px radius, 1px
+		// `#eceae1` border, white fill, `shadow-lg`.
+		<RACPopover
+			placement={placement}
+			className={
+				'min-w-[220px] rounded-lg border border-border bg-surface p-2 shadow-lg outline-none' +
+				(popoverClassName ? ` ${popoverClassName}` : '')
+			}
+		>
+			<RACMenu
+				{...props}
+				className={typeof className === 'string' && className ? `outline-none ${className}` : 'outline-none'}
+			/>
+		</RACPopover>
+	)
+}

package/src/components/input.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react'
+import {
+	FieldError,
+	Input as RACInput,
+	Label,
+	Text,
+	TextField,
+	type TextFieldProps,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Input — labelled single-line text field.
+ *
+ * Ported 1:1 from gs-platform's `Input` (filled field, brand-green focus
+ * border). Built on React Aria Components `TextField` (associates label /
+ * description / error automatically via `aria-describedby` + `aria-invalid`).
+ * The inner `<input>` styling comes from `uic` and matches our `Textarea`
+ * (same filled-field spec) so the two controls stay visually consistent.
+ */
+const StyledInput = uic(RACInput, {
+	displayName: 'InputControl',
+	// gs token map: bg #f7f6f2 → surface-card · 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).
+	baseClass:
+		'w-full rounded-lg border border-border bg-surface-card px-4 text-sm 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]: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).
+		fieldSize: {
+			sm: 'h-8',
+			md: 'h-10',
+			lg: 'h-12',
+		},
+	},
+	defaultVariants: {
+		fieldSize: 'md',
+	},
+})
+
+export type InputProps = TextFieldProps & {
+	/** Visible field label (required for accessibility). */
+	label: ReactNode
+	/** Helper text rendered under the field. */
+	description?: ReactNode
+	/** Error message; pass a string for a static error or rely on validation. */
+	errorMessage?: string
+	placeholder?: string
+	size?: 'sm' | 'md' | 'lg'
+}
+
+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} />
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	</TextField>
+)

package/src/components/radio.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react'
+import {
+	FieldError,
+	Label,
+	Radio as RACRadio,
+	RadioGroup as RACRadioGroup,
+	type RadioGroupProps as RACRadioGroupProps,
+	type RadioProps as RACRadioProps,
+	Text,
+} from 'react-aria-components'
+
+/**
+ * RadioGroup + Radio — labelled single-choice control.
+ *
+ * Ported 1:1 from gs-platform's `Radio` (20px round, 2px border, selected =
+ * ring + 10px filled `fg` dot, 200ms transition). Built on React Aria
+ * Components `RadioGroup` + `Radio` — roving tabindex, arrow-key navigation and
+ * ARIA grouping come for free; the group label / description / error are
+ * associated automatically. Callers compose `<Radio>` children inside
+ * `<RadioGroup>`. Styling = Tailwind + `@app/tokens`.
+ */
+export type RadioGroupProps = RACRadioGroupProps & {
+	/** Visible group label. */
+	label?: ReactNode
+	/** Helper text rendered under the group. */
+	description?: ReactNode
+	/** Error message; pass a string for a static error or rely on validation. */
+	errorMessage?: string
+	children: ReactNode
+}
+
+export const RadioGroup = ({ label, description, errorMessage, children, ...props }: RadioGroupProps) => (
+	<RACRadioGroup {...props} className="flex flex-col gap-2">
+		{label ? <Label className="text-sm font-medium text-fg">{label}</Label> : null}
+		<div className="flex flex-col gap-3">{children}</div>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	</RACRadioGroup>
+)
+
+export type RadioProps = Omit<RACRadioProps, 'children'> & {
+	/** Visible label rendered next to the dot. */
+	children?: ReactNode
+}
+
+export const Radio = ({ children, ...props }: RadioProps) => (
+	<RACRadio
+		{...props}
+		className="group flex cursor-pointer select-none items-center gap-3 text-sm text-fg data-[disabled]:cursor-not-allowed"
+	>
+		{/* gs token map: border #eceae1 → border · hover #aba89c → fg-subtle ·
+		    selected dot/border #0d0d0d → fg · error → danger. */}
+		<span
+			className={
+				'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-border bg-surface ' +
+				'transition-all duration-200 ' +
+				'group-data-[hovered]:border-fg-subtle ' +
+				'group-data-[selected]:border-fg ' +
+				'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-ring group-data-[focus-visible]:ring-offset-2 ' +
+				'group-data-[invalid]:border-danger ' +
+				'group-data-[disabled]:opacity-50'
+			}
+		>
+			<span className="h-2.5 w-2.5 rounded-full bg-fg opacity-0 transition-opacity duration-200 group-data-[selected]:opacity-100" />
+		</span>
+		{children}
+	</RACRadio>
+)

package/src/components/section-tabs.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react'
+import { Button } from './button'
+
+/**
+ * SectionTabs — horizontal section/filter tab row (port of gs-platform
+ * `SectionTabs`, also the reusable form of `apps/web`'s `FilterBar`).
+ *
+ * gs-platform renders left-aligned text tabs (active = subtle pill) with an
+ * optional leading "reset" glyph button. Disabled sections are dimmed; here we
+ * additionally surface a small "Soon" badge on disabled tabs so unbuilt sections
+ * read as upcoming rather than broken.
+ *
+ * Controlled: the consumer owns `active` and handles `onChange`. Each tab is a
+ * React Aria `Button`, so keyboard activation, focus rings and disabled handling
+ * come for free. The selected tab carries `aria-pressed` for SR state.
+ *
+ * Presentational only (hard rule #1): all labels via props, no API/i18n.
+ */
+
+export type SectionTab = {
+	key: string
+	label: ReactNode
+	/** Disabled tabs render dimmed with a "Soon" badge and cannot be selected. */
+	disabled?: boolean
+}
+
+export type SectionTabsProps = {
+	tabs: SectionTab[]
+	active: string
+	onChange: (key: string) => void
+	/** Label shown on disabled tabs. Defaults to "Soon" (override per-locale). */
+	soonLabel?: ReactNode
+	/** When set, renders a leading reset control. */
+	onReset?: () => void
+	/** Accessible label for the reset control (e.g. translated "Reset filters"). */
+	resetLabel?: string
+	/** Glyph for the reset control; defaults to a small grid icon. */
+	resetIcon?: ReactNode
+	className?: string
+}
+
+const GridGlyph = () => (
+	<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+		<rect x="3" y="3" width="7.5" height="7.5" rx="1.5" />
+		<rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" />
+		<rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" />
+		<rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" />
+	</svg>
+)
+
+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 ' +
+	'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'
+
+export function SectionTabs({
+	tabs,
+	active,
+	onChange,
+	soonLabel = 'Soon',
+	onReset,
+	resetLabel = 'Reset',
+	resetIcon,
+	className,
+}: SectionTabsProps) {
+	return (
+		<div className={['flex flex-wrap items-center gap-1', 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>
+			) : null}
+			{tabs.map((tab) => {
+				const selected = active === tab.key
+				return (
+					<Button
+						key={tab.key}
+						variant="ghost"
+						isDisabled={tab.disabled}
+						aria-pressed={selected}
+						onPress={() => onChange(tab.key)}
+						className={[tabBase, selected && !tab.disabled ? tabActive : ''].filter(Boolean).join(' ')}
+					>
+						<span>{tab.label}</span>
+						{tab.disabled ? (
+							<span className="inline-flex items-center rounded-full bg-surface-muted px-1.5 py-0.5 text-micro font-medium leading-none text-fg-muted">
+								{soonLabel}
+							</span>
+						) : null}
+					</Button>
+				)
+			})}
+		</div>
+	)
+}