@podoba/react 0.0.32 → 0.0.35

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

@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from 'react'
+import { type ReactNode, useEffect, useId, useRef, useState } from 'react'
 import { Button } from './button'
 import { DisplayHeading } from './text'
 
@@ -8,10 +8,9 @@ import { DisplayHeading } from './text'
  *
  * 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.
+ * `ExpandableCTA` — a collapsed teal pill that expands into a create-hub panel.
+ * The supplied hero `CtaPill` owns the source mobile fixed-bar treatment; this
+ * header switches to the desktop 2/3 + 1/3 grid at the matching 768px breakpoint.
  *
  * The expandable CTA is a controlled disclosure: the collapsed teal pill is a
  * React Aria `Button` (keyboard + focus ring + press handling) wired to a
@@ -28,27 +27,39 @@ export type BrandPageHeaderCrumb = {
 	onPress?: () => void
 }
 
+export type BrandPageHeaderCtaRenderProps = {
+	expanded: boolean
+	controls: string
+	toggle: () => void
+}
+
+export type BrandPageHeaderVariant = 'dashboard' | 'default' | 'navigation'
+
 export type BrandPageHeaderProps = {
 	/** The large greeting / page-title slot (e.g. "Good morning Jonas 👋"). */
 	greeting: ReactNode
+	/** Header geometry preset. Dashboard uses the source 20px desktop gutter. */
+	variant?: BrandPageHeaderVariant
 	/** Semantic heading level. Use 2 or 3 when the header is nested below a page title. */
 	headingLevel?: 1 | 2 | 3
 	/**
 	 * 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 uses the source's decorative `fg-subtle`
-	 * (#b3b3b3) with a hover→fg affordance.
+	 * like gs's `parentLink`. Rendered in `fg-muted` with a hover→fg affordance —
+	 * the source's decorative `fg-subtle` is 2.10:1 on `surface`, and this row is a
+	 * navigation link, not ornament (#25).
 	 */
 	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.
+	 * Arbitrary right-column CTA node (e.g. the gs hero `CtaPill` banner), or a
+	 * render function receiving the disclosure state and generated controls id.
+	 * Prefer the render function when the CTA opens `createHub`, so its trigger can
+	 * expose `aria-expanded` and `aria-controls`.
 	 */
-	cta?: ReactNode
+	cta?: ReactNode | ((state: BrandPageHeaderCtaRenderProps) => 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). */
@@ -60,13 +71,17 @@ export type BrandPageHeaderProps = {
 	closeLabel?: string
 	/** Sticky header on scroll. */
 	sticky?: boolean
+	/**
+	 * Dock the supplied CTA to the safe bottom edge below 768px, matching the
+	 * source Manager's collapsed ExpandableCTA. Enabled by default.
+	 */
+	mobileCtaDocked?: boolean
 	className?: string
 }
 
-const PANEL_ID = 'brand-page-header-create-hub'
-
 export function BrandPageHeader({
 	greeting,
+	variant = 'default',
 	headingLevel = 1,
 	parentLink,
 	breadcrumbs,
@@ -77,41 +92,196 @@ export function BrandPageHeader({
 	onExpandedChange,
 	closeLabel = 'Close',
 	sticky = false,
+	mobileCtaDocked = true,
 	className,
 }: BrandPageHeaderProps) {
 	const [internalExpanded, setInternalExpanded] = useState(false)
+	const [mobileSheet, setMobileSheet] = useState(false)
+	const [mobileFull, setMobileFull] = useState(false)
 	const isControlled = expandedProp !== undefined
 	const expanded = isControlled ? expandedProp : internalExpanded
 	const hasExpandable = Boolean(createHub)
 	const HeadingTag = `h${headingLevel}` as const
+	const panelId = useId()
+	const panelRef = useRef<HTMLDivElement>(null)
+	const contentRef = useRef<HTMLDivElement>(null)
+	const returnFocusRef = useRef<HTMLElement | null>(null)
+	const touchStartYRef = useRef(0)
+	const touchStartScrollTopRef = useRef(0)
 
 	const setExpanded = (next: boolean) => {
 		if (!isControlled) setInternalExpanded(next)
 		onExpandedChange?.(next)
 	}
+	const renderedCta =
+		typeof cta === 'function'
+			? cta({
+					expanded,
+					controls: panelId,
+					toggle: () => setExpanded(!expanded),
+				})
+			: cta
+	// Render the WHOLE trail the caller passed. Collapsing it to `breadcrumbs[-2]`
+	// silently dropped every other crumb (a three-crumb trail rendered one) and
+	// dropped a single crumb entirely unless it happened to be pressable. A caller
+	// that wants only the parent passes only the parent.
+	const visibleBreadcrumbs = breadcrumbs?.filter(Boolean) ?? []
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+
+		returnFocusRef.current =
+			document.activeElement instanceof HTMLElement ? document.activeElement : null
+
+		let lockedScrollY = 0
+		let restoreBody: (() => void) | undefined
+
+		const updateComposition = () => {
+			const isMobile = window.innerWidth < 768
+			setMobileSheet(isMobile)
+
+			const content = contentRef.current
+			setMobileFull(Boolean(isMobile && content && content.scrollHeight >= window.innerHeight * 0.4))
+
+			if (isMobile && !restoreBody) {
+				lockedScrollY = window.scrollY
+				const previous = {
+					overflow: document.body.style.overflow,
+					position: document.body.style.position,
+					top: document.body.style.top,
+					width: document.body.style.width,
+				}
+				document.body.style.overflow = 'hidden'
+				document.body.style.position = 'fixed'
+				document.body.style.top = `-${lockedScrollY}px`
+				document.body.style.width = '100%'
+				restoreBody = () => {
+					document.body.style.overflow = previous.overflow
+					document.body.style.position = previous.position
+					document.body.style.top = previous.top
+					document.body.style.width = previous.width
+					window.scrollTo(0, lockedScrollY)
+				}
+			} else if (!isMobile && restoreBody) {
+				restoreBody()
+				restoreBody = undefined
+			}
+		}
+
+		const keepFocusInsideMobileSheet = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				event.preventDefault()
+				setExpanded(false)
+				return
+			}
+			if (event.key !== 'Tab' || window.innerWidth >= 768 || !panelRef.current) return
+
+			const focusable = Array.from(
+				panelRef.current.querySelectorAll<HTMLElement>(
+					'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+				),
+			).filter((node) => {
+				const style = window.getComputedStyle(node)
+				return (
+					!node.hidden &&
+					!node.closest('[hidden]') &&
+					node.getAttribute('aria-hidden') !== 'true' &&
+					style.display !== 'none' &&
+					style.visibility !== 'hidden'
+				)
+			})
+			if (focusable.length === 0) {
+				event.preventDefault()
+				panelRef.current.focus()
+				return
+			}
+			const first = focusable[0]
+			const last = focusable[focusable.length - 1]
+			if (!panelRef.current.contains(document.activeElement)) {
+				event.preventDefault()
+				const boundary = event.shiftKey ? last : first
+				boundary?.focus()
+				return
+			}
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault()
+				last?.focus()
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault()
+				first?.focus()
+			}
+		}
+
+		updateComposition()
+		const observer =
+			typeof ResizeObserver === 'undefined' || !contentRef.current
+				? undefined
+				: new ResizeObserver(updateComposition)
+		if (contentRef.current) observer?.observe(contentRef.current)
+		window.addEventListener('resize', updateComposition)
+		document.addEventListener('keydown', keepFocusInsideMobileSheet)
+
+		return () => {
+			observer?.disconnect()
+			window.removeEventListener('resize', updateComposition)
+			document.removeEventListener('keydown', keepFocusInsideMobileSheet)
+			restoreBody?.()
+			returnFocusRef.current?.focus()
+			returnFocusRef.current = null
+			setMobileSheet(false)
+			setMobileFull(false)
+		}
+	}, [expanded, hasExpandable])
+
+	useEffect(() => {
+		if (!expanded || !hasExpandable || typeof window === 'undefined') return
+		const frame = window.requestAnimationFrame(() => {
+			const selector = mobileSheet
+				? '[data-create-hub-focus="mobile"]'
+				: '[data-create-hub-focus="desktop"]'
+			panelRef.current?.querySelector<HTMLElement>(selector)?.focus()
+		})
+		return () => window.cancelAnimationFrame(frame)
+	}, [expanded, hasExpandable, mobileSheet])
 
 	return (
 		<div
 			className={[
-				'mb-6 w-full',
-				sticky ? 'sticky top-0 z-30 bg-surface' : '',
+				'mb-6 box-border w-auto min-w-0',
+				sticky
+					? [
+						'relative -mx-3 px-3',
+						'md:sticky md:top-0 md:z-30 md:-mx-6 md:bg-surface md:px-6 md:pb-6 md:mb-0',
+						expanded ? 'md:pb-0' : '',
+					].join(' ')
+					: '',
 				className,
 			]
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<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) => (
+			<div
+				className={`grid grid-cols-1 grid-rows-[auto_auto] items-start gap-y-2 ${
+					variant === 'navigation' ? 'md:grid-cols-2' : 'md:grid-cols-[2fr_1fr]'
+				} ${variant === 'dashboard' ? 'md:gap-x-5' : 'md:gap-x-4'}`}
+			>
+				<div className="col-start-1 row-[1/-1] flex w-full min-w-0 flex-col gap-0">
+					{/* EXACTLY ONE Breadcrumb landmark. Rendering the trail and `parentLink`
+					    as siblings produced two <nav aria-label="Breadcrumb"> in one header —
+					    duplicate landmarks sharing an accessible name. `breadcrumbs` is the
+					    richer API, so it wins when a caller passes both.
+					    Ink is `fg-muted` (5.98:1), NOT `fg-subtle` (2.10:1 on surface): a
+					    crumb is a navigation link, which #25 keeps on the readable token. */}
+					{visibleBreadcrumbs.length > 0 ? (
+						<nav aria-label="Breadcrumb" className="m-0 flex w-full min-w-0 flex-wrap items-center gap-1 text-display-large font-medium tracking-wide text-fg-muted">
+							{visibleBreadcrumbs.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"
+											className="h-auto rounded-sm p-0 text-display-large font-medium tracking-wide text-fg-muted data-[hovered]:bg-transparent data-[hovered]:text-fg"
 										>
 											{crumb.label}
 										</Button>
@@ -121,35 +291,50 @@ export function BrandPageHeader({
 								</span>
 							))}
 						</nav>
+					) : parentLink ? (
+						// gs "title to go back". MERGE NOTE: the breadcrumb is a NAV LANDMARK,
+						// not part of the <h1> — a page title should not contain its own parent
+						// link. #25 still applies to the colour: the source's decorative grey is
+						// 2.10:1 on `surface`, and this row is a navigation LINK, so it keeps the
+						// readable `fg-muted` (5.98:1) rather than `fg-subtle`.
+						<nav
+							aria-label="Breadcrumb"
+							className="h-8 text-display-large font-medium leading-8 tracking-wide text-fg-muted transition-colors [&_a:hover]:text-fg [&_a]:block [&_a]:h-8 [&_a]:text-fg-muted [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline"
+						>
+							{parentLink}
+						</nav>
 					) : null}
-					<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-subtle transition-colors [&_a:hover]:text-fg [&_a]:text-fg-subtle [&_a]:no-underline [&_a]:outline-none [&_a:focus-visible]:underline">
-										{parentLink}
-									</span>
-									<br />
-								</>
-							) : null}
-							{greeting}
-						</HeadingTag>
-					</DisplayHeading>
+					<div className="flex w-full min-w-0 items-start overflow-visible">
+						<DisplayHeading
+							asChild
+							className="m-0 min-w-0 flex-1 overflow-visible break-words pb-0.5 tracking-[0]"
+						>
+							<HeadingTag>{greeting}</HeadingTag>
+						</DisplayHeading>
+					</div>
 				</div>
 
 				{cta ? (
 					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
-					<div className="h-full min-w-0">{cta}</div>
+					<div
+						className={
+							[
+								mobileCtaDocked
+									? 'fixed inset-x-0 bottom-0 z-40 min-w-0 px-3 pb-mobile-cta-bottom md:static md:inset-auto md:col-start-2 md:row-[1/-1] md:z-auto md:flex md:h-full md:max-w-full md:items-stretch md:justify-end md:self-stretch md:p-0'
+									: 'min-w-0 md:col-start-2 md:row-[1/-1] md:flex md:h-full md:max-w-full md:items-stretch md:justify-end md:self-stretch',
+								expanded ? 'hidden' : '',
+							].join(' ')
+						}
+					>
+						{renderedCta}
+					</div>
 				) : ctaLabel ? (
-					<div className="shrink-0">
+					<div className="shrink-0 md:col-start-2 md:row-[1/-1] md:flex md:items-start md:justify-end">
 						{hasExpandable ? (
 							<Button
 								onPress={() => setExpanded(!expanded)}
 								aria-expanded={expanded}
-								aria-controls={PANEL_ID}
+								aria-controls={panelId}
 								className="h-10 rounded-full bg-brand-secondary px-5 text-small font-medium text-fg data-[hovered]:opacity-90 data-[pressed]:opacity-80"
 							>
 								{ctaLabel}
@@ -163,35 +348,80 @@ export function BrandPageHeader({
 				) : 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>
+			{hasExpandable && expanded ? (
+				<>
+					<div
+						aria-hidden="true"
+						onClick={() => setExpanded(false)}
+						className="fixed inset-0 z-40 bg-black/50 animate-create-hub-backdrop md:hidden motion-reduce:animate-none"
+					/>
+					<div
+						ref={panelRef}
+						id={panelId}
+						role={mobileSheet ? 'dialog' : 'region'}
+						aria-modal={mobileSheet || undefined}
+						aria-label={typeof ctaLabel === 'string' ? ctaLabel : undefined}
+						tabIndex={-1}
+						onTouchStart={(event) => {
+							const touch = event.touches[0]
+							if (!touch || !contentRef.current) return
+							touchStartYRef.current = touch.clientY
+							touchStartScrollTopRef.current = contentRef.current.scrollTop
+						}}
+						onTouchMove={(event) => {
+							const touch = event.touches[0]
+							if (
+								!touch ||
+								touchStartScrollTopRef.current > 10 ||
+								touch.clientY - touchStartYRef.current < 80
+							) {
+								return
+							}
+							event.preventDefault()
+							setExpanded(false)
+						}}
+						className={[
+							'fixed inset-x-0 bottom-0 z-50 flex flex-col overflow-hidden bg-brand-green',
+							'outline-none motion-reduce:animate-none',
+							'md:relative md:inset-auto md:z-auto md:mt-4 md:max-h-none md:origin-top-right md:rounded-lg md:animate-create-hub-desktop',
+							mobileFull
+								? 'top-0 max-h-create-hub-full animate-create-hub-full'
+								: 'max-h-create-hub-partial animate-create-hub-sheet',
+						].join(' ')}
+					>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="mobile"
+							onPress={() => setExpanded(false)}
+							className="h-10 w-full shrink-0 rounded-none p-0 md:hidden data-[hovered]:bg-transparent"
+						>
+							<span className="h-1 w-10 rounded-full bg-fg/25" aria-hidden="true" />
+						</Button>
+						<Button
+							variant="ghost"
+							aria-label={closeLabel}
+							data-create-hub-focus="desktop"
+							onPress={() => setExpanded(false)}
+							className="absolute right-4 top-14 z-10 hidden h-8 w-8 rounded-md p-0 text-fg md:flex data-[hovered]:bg-black/5"
+						>
+							<svg width="18" height="18" 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>
+						<div
+							ref={contentRef}
+							className="min-h-0 flex-1 overflow-y-auto overscroll-contain md:overflow-visible"
+						>
 							{createHub}
 						</div>
-					) : null}
-				</div>
+					</div>
+				</>
 			) : null}
 		</div>
 	)

package/src/components/button.tsx

@@ -15,15 +15,29 @@ export const Button = uic(RACButton, {
 	baseClass:
 		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 transition-all duration-200 ease-in-out ' +
 		'outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
-		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none ' +
-		'data-[pending]:opacity-70 data-[pending]:cursor-progress',
+		// Inactive states (disabled / pending) soften the LABEL ONLY and leave every
+		// variant on its own surface. Two reasons:
+		//   - fading the whole control (`opacity-*`) blends the label into the parent
+		//     surface and drops it below WCAG AA;
+		//   - repainting every variant onto one muted surface makes a disabled button
+		//     indistinguishable from a hovered one (`secondary`/`ghost` both hover to
+		//     `surface-muted`) and strips the brand fill off a submitting primary CTA.
+		// `text-fg/60` is measured over surface / surface-card / surface-muted in both
+		// themes by packages/tokens `contrast.test.ts`; variants whose ink or surface
+		// differs override it below.
+		'data-[disabled]:text-fg/60 data-[disabled]:pointer-events-none ' +
+		'data-[pending]:text-fg/60 data-[pending]:cursor-progress',
 	variants: {
 		variant: {
 			// primary (gs `_primary`): base brand-primary (#0d0d0d light / brand-green on
 			// dark) → hover neutral-600 (#333333) + `0 0 5px rgba(0,0,0,.5)` shadow →
 			// active back to brand-primary (no shadow).
+			// Keeps the brand fill while inactive — a submitting CTA has to stay the
+			// primary action next to a disabled `secondary` Cancel — so it softens the
+			// INVERTED ink instead of the base one.
 			primary:
-				'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',
+				'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 ' +
+				'data-[disabled]:text-fg-inverted/70 data-[pending]:text-fg-inverted/70',
 			// secondary: #f7f6f2 (surface-card) + 1px #eceae1 (border); hover bg #eceae1
 			// (surface-muted) + border #aba89c (fg-subtle); active bg #eceae1.
 			secondary:
@@ -31,7 +45,16 @@ export const Button = uic(RACButton, {
 			// ghost: transparent → hover/active #eceae1 (surface-muted).
 			ghost: 'bg-transparent text-fg hover:bg-surface-muted data-[pressed]:bg-surface-muted',
 			// destructive: #ef4444 → danger token; hover/active dim via opacity (gs parity).
-			destructive: 'bg-danger text-danger-fg hover:opacity-90 data-[pressed]:opacity-80',
+			// Enabled white-on-danger is only ~4.8:1, so softening that ink would fail AA
+			// — an inactive destructive drops the red (it no longer affords the action)
+			// and falls back to the base muted ink on `surface-muted`. That pill is
+			// invisible on a `surface-muted` panel, so it outlines itself with an INSET
+			// shadow — a real border would resize the enabled button, and a `ring-*`
+			// would fight the focus ring a pending (still focusable) button can show.
+			destructive:
+				'bg-danger text-danger-fg hover:opacity-90 data-[pressed]:opacity-80 ' +
+				'data-[disabled]:bg-surface-muted data-[disabled]:shadow-[inset_0_0_0_1px_var(--color-border-muted)] ' +
+				'data-[pending]:bg-surface-muted data-[pending]:shadow-[inset_0_0_0_1px_var(--color-border-muted)]',
 		},
 		size: {
 			// gs sizes: PADDING ONLY (spacing-2/4, 3/6, 4/8) — text is a fixed 13px/400

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-display 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-muted"
 						/>
 					</SearchField>
 					<ListBox

package/src/components/compact-action-button.examples.tsx

@@ -0,0 +1,7 @@
+import { CompactActionButton } from './compact-action-button'
+export const examples = {
+	default: () => <CompactActionButton>Create Task</CompactActionButton>,
+	variants: () => <><CompactActionButton variant="linear">Cancel</CompactActionButton><CompactActionButton>Mark done</CompactActionButton></>,
+	states: () => <><CompactActionButton isDisabled>Create Task</CompactActionButton><CompactActionButton variant="linear" isDisabled>Cancel</CompactActionButton><CompactActionButton isPending>Marking...</CompactActionButton></>,
+}
+export const meta = { category: 'Primitives', description: 'Compact source Manager actions with primary/linear emphasis, keyboard focus and disabled states.' }

package/src/components/compact-action-button.tsx

@@ -0,0 +1,21 @@
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const COMPACT_ACTION_VARIANTS = ['primary', 'linear'] as const
+export type CompactActionVariant = (typeof COMPACT_ACTION_VARIANTS)[number]
+
+/** Compact Manager action; separate from the larger primitive dialog actions.
+ * Same semantic palette as Button / DialogActionButton. The hover shadow is the
+ * literal Button already uses — no shadow token covers a button lift, and the two
+ * must match. */
+export const CompactActionButton = uic(AriaButton, {
+	displayName: 'CompactActionButton',
+	baseClass: 'inline-flex items-center justify-center rounded-full px-3.5 py-1 text-compact font-normal leading-[normal] cursor-pointer transition-all duration-120 ease-[ease] motion-reduce:transition-none outline-none ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
+		'data-[hovered]:shadow-[0_0_5px_0_rgba(0,0,0,0.5)] data-[pressed]:shadow-none data-[disabled]:shadow-none data-[disabled]:cursor-not-allowed',
+	variants: { variant: {
+		primary: 'border-0 bg-brand-primary text-fg-inverted data-[hovered]:bg-neutral-600 data-[pressed]:bg-brand-primary data-[disabled]:bg-fg-subtle',
+		linear: 'border border-brand-primary bg-transparent text-brand-primary data-[hovered]:bg-surface-muted data-[pressed]:bg-transparent data-[disabled]:border-fg-subtle data-[disabled]:text-fg-subtle',
+	} },
+	defaultVariants: { variant: 'primary' },
+})

package/src/components/compact-settings-dialog.examples.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+import { Button } from './button'
+import { CompactSettingsDialog } from './compact-settings-dialog'
+
+function Example({ pending = false }: { pending?: boolean }) {
+	const [open, setOpen] = useState(false)
+	return <>
+		<Button onPress={() => setOpen(true)}>Manage members</Button>
+		<CompactSettingsDialog isOpen={open} onOpenChange={setOpen} isPending={pending} title="Manage project members" description="Add or remove collaborators for this project." closeLabel="Close">
+			<p>No members in this category.</p>
+		</CompactSettingsDialog>
+	</>
+}
+export const examples = { default: () => <Example />, pending: () => <Example pending /> }
+export const meta = { category: 'Composite', description: 'Intrinsic-height form modal with stacked title and description, responsive width, and pending dismissal lock.' }

package/src/components/compact-settings-dialog.tsx

@@ -0,0 +1,48 @@
+import { useId, type ReactNode } from 'react'
+import { Button } from './button'
+import { ModalDialog, ModalOverlay, ModalSurface } from './dialog'
+import { Heading } from './text'
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const MemberSelectionGrid = uic('ul', { displayName: 'MemberSelectionGrid', baseClass: 'm-0 mt-8 grid list-none grid-cols-1 gap-3 p-0 max-[767px]:gap-2 min-[640px]:grid-cols-2 min-[768px]:grid-cols-3 min-[1024px]:grid-cols-4' })
+export const TeamSelectionGrid = uic('ul', { displayName: 'TeamSelectionGrid', baseClass: 'm-0 mt-8 grid list-none grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4 p-0' })
+export const MemberSelectionCard = uic(AriaButton, {
+	displayName: 'MemberSelectionCard',
+	baseClass: 'flex w-full items-center gap-3 rounded-lg border border-border bg-surface-card p-4 text-start text-fg outline-none transition-all duration-200 data-[hovered]:-translate-y-0.5 data-[hovered]:border-brand-primary data-[hovered]:shadow-[0_4px_12px_rgba(0,0,0,0.1)] aria-pressed:border-brand-primary aria-pressed:bg-surface-muted data-[disabled]:cursor-default data-[disabled]:opacity-60 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+})
+export const TeamSelectionCard = uic(AriaButton, {
+	displayName: 'TeamSelectionCard',
+	baseClass: 'block w-full rounded-md border-2 border-border bg-transparent p-4 text-start text-fg outline-none transition-all duration-200 data-[hovered]:border-brand-primary aria-pressed:border-brand-primary aria-pressed:bg-surface-muted data-[disabled]:cursor-default data-[disabled]:opacity-60 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+})
+export const MemberSelectionInfo = uic('span', { displayName: 'MemberSelectionInfo', baseClass: 'min-w-0 flex-1' })
+export const MemberSelectionName = uic('span', { displayName: 'MemberSelectionName', baseClass: 'mb-1 block text-heading5 font-medium text-fg' })
+export const MemberSelectionEmail = uic('span', { displayName: 'MemberSelectionEmail', baseClass: 'block text-compact font-normal text-fg-subtle' })
+export const TeamSelectionName = uic('span', { displayName: 'TeamSelectionName', baseClass: 'mb-1 block font-medium text-fg' })
+export const TeamSelectionMeta = uic('span', { displayName: 'TeamSelectionMeta', baseClass: 'block text-small font-normal text-fg-subtle' })
+
+/** Intrinsic-height form surface. The tall settings and catalog surfaces remain separate. */
+export function CompactSettingsDialog({ isOpen, onOpenChange, isPending = false, title, description, closeLabel, children }: {
+	isOpen: boolean
+	onOpenChange: (open: boolean) => void
+	isPending?: boolean
+	title: string
+	description: string
+	closeLabel: string
+	children: ReactNode
+}) {
+	const titleId = useId()
+	const descriptionId = useId()
+	return <ModalOverlay className="p-0" isOpen={isOpen} onOpenChange={open => { if (!isPending) onOpenChange(open) }} isDismissable={!isPending} isKeyboardDismissDisabled={isPending}>
+		<ModalSurface className="relative w-[90vw] max-w-180 max-h-[85vh] overflow-y-auto p-5 min-[768px]:max-[1023px]:w-[85vw] max-[767px]:w-[calc(100vw-6*var(--spacing))] max-[767px]:max-w-[calc(100vw-6*var(--spacing))] max-[767px]:max-h-[calc(100vh-6*var(--spacing))]">
+			<ModalDialog aria-labelledby={titleId} aria-describedby={descriptionId} className="outline-none">
+				<Heading id={titleId} level="1" className="m-0 mb-4 max-w-5/6 tracking-normal">{title}</Heading>
+				<p id={descriptionId} className="m-0 mb-6 max-w-5/6 text-small font-normal text-fg-workflow-muted">{description}</p>
+				<div className="mt-4">{children}</div>
+				<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={() => onOpenChange(false)} className="absolute end-4 top-3.5 h-8 w-8 rounded-md p-0 text-fg-subtle max-[767px]:end-3">
+					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
+				</Button>
+			</ModalDialog>
+		</ModalSurface>
+	</ModalOverlay>
+}

package/src/components/context-action-glyph.examples.tsx

@@ -0,0 +1,9 @@
+import { ContextActionGlyph, CONTEXT_ACTION_GLYPHS } from './context-action-glyph'
+import { Button } from './button'
+export const examples = {
+	default: () => <ContextActionGlyph kind="edit" />,
+	variants: () => <>{CONTEXT_ACTION_GLYPHS.map(kind => <ContextActionGlyph key={kind} kind={kind} />)}</>,
+	sizes: () => <><ContextActionGlyph kind="settings" /><ContextActionGlyph kind="settings" className="size-5" /></>,
+	states: () => <><Button><ContextActionGlyph kind="open" />Open</Button><Button isDisabled><ContextActionGlyph kind="archive" />Archive</Button></>,
+}
+export const meta = { category: 'Primitives', description: 'Decorative compact action glyphs from the original Radix icon set; inherit the parent action color and accessible name.' }