@podoba/react 0.0.1

package/src/components/select.tsx

@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	FieldError,
+	Label,
+	ListBox,
+	ListBoxItem,
+	type ListBoxItemProps,
+	Popover,
+	Select as RACSelect,
+	type SelectProps as RACSelectProps,
+	SelectValue,
+	Text,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Select — accessible dropdown built on React Aria Components `Select`.
+ *
+ * RAC handles the listbox ARIA pattern, keyboard navigation, typeahead and
+ * focus management. Styling via `uic`. Pass options as `SelectItem` children.
+ *
+ * Re-skinned 1:1 to gs-platform's designer spec (Figma GraphicStandard 1.5,
+ * node 2115-4271 — `Select.module.scss`): a tall (min-h 58px) borderless filled
+ * trigger on the cream `surface-card`, matching our `Input` / `Textarea` fill so
+ * the form controls stay consistent. gs token map: bg #f7f6f2 → surface-card ·
+ * hover #eceae1 → surface-muted · text #0d0d0d → fg · placeholder → fg-muted ·
+ * 8px radius → rounded-lg · 6px item radius → rounded-md · error → danger.
+ */
+const SelectTrigger = uic(RACButton, {
+	displayName: 'SelectTrigger',
+	// gs trigger: min-h 58px, 20px padding (p-5), 10px text↔chevron gap (gap-2.5),
+	// 8px radius, NO border (filled fill only). We keep a focus-visible ring for
+	// WCAG (a borderless trigger that still shows a visible focus indicator is the
+	// correct a11y adaptation of gs's borderless look). Error → 2px danger ring
+	// (gs uses a box-shadow ring since the trigger has no border to colour); the
+	// ring is driven off the RACSelect root's `data-invalid` via `group-`.
+	baseClass:
+		'flex min-h-[58px] w-full items-center justify-between gap-2.5 rounded-lg bg-surface-card p-5 ' +
+		'text-sm text-fg outline-none transition-colors ' +
+		'data-[hovered]:bg-surface-muted ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
+		'group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
+		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+})
+
+export const SelectItem = uic(ListBoxItem, {
+	displayName: 'SelectItem',
+	// gs item: 0/20px padding (px-5, no vertical pad), 6px radius, selected =
+	// medium weight. We add a `surface-muted` focus background (gs highlights with
+	// weight only) so keyboard focus stays clearly visible on the cream content.
+	baseClass:
+		'flex cursor-pointer select-none items-center rounded-md px-5 text-sm text-fg outline-none ' +
+		'data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
+		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+}) as (props: ListBoxItemProps) => ReactNode
+
+export type SelectProps<T extends object> = RACSelectProps<T> & {
+	/** Visible label (required for accessibility). */
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+	/**
+	 * Placeholder shown while nothing is selected. REQUIRED — `@app/ui` ships no
+	 * i18n, so the consumer passes a translated string (otherwise RAC would fall
+	 * back to its own hardcoded English "Select an item").
+	 */
+	placeholder: string
+	children: ReactNode
+}
+
+export const Select = <T extends object>({
+	label,
+	description,
+	errorMessage,
+	placeholder,
+	children,
+	...props
+}: SelectProps<T>) => (
+	<RACSelect {...props} placeholder={placeholder} className="group flex flex-col gap-2">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<SelectTrigger>
+			<SelectValue className="data-[placeholder]:text-fg-muted" />
+			{/* gs chevron: 9.5px caret, dark (neutral-400 → fg), non-interactive. */}
+			<svg
+				width="9.5"
+				height="9.5"
+				viewBox="0 0 12 12"
+				fill="none"
+				aria-hidden="true"
+				className="pointer-events-none shrink-0 text-fg"
+			>
+				<path
+					d="M3 4.5L6 7.5L9 4.5"
+					stroke="currentColor"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</svg>
+		</SelectTrigger>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		{/* gs content: cream fill, 8px radius, shadow-lg, NO border; viewport pads
+		    20px vertical / 0 horizontal (items own their 20px side padding) with a
+		    12px gap between items. */}
+		<Popover className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg">
+			<ListBox className="flex flex-col gap-3 py-5 outline-none">{children}</ListBox>
+		</Popover>
+	</RACSelect>
+)

package/src/components/separator.tsx

@@ -0,0 +1,36 @@
+import { Separator as RACSeparator, type SeparatorProps as RACSeparatorProps } from 'react-aria-components'
+
+/**
+ * Separator — thin 1px rule (port of gs-platform's `Separator`).
+ *
+ * Built on React Aria Components `Separator`, which renders the element with
+ * `role="separator"` and the correct `aria-orientation` for assistive tech.
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule
+ * #3): the gs `1px` rule on `var(--color-border)` (#eceae1) maps to our
+ * `border` token. Horizontal = full-width 1px-tall line; vertical = full-height
+ * 1px-wide line. Driven with `bg-border` so the rule paints regardless of the
+ * element's own border-box.
+ */
+
+export type SeparatorProps = RACSeparatorProps & {
+	/** Rule direction. Defaults to horizontal. */
+	orientation?: 'horizontal' | 'vertical'
+	className?: string
+}
+
+export function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {
+	return (
+		<RACSeparator
+			{...props}
+			orientation={orientation}
+			className={[
+				'shrink-0 bg-border',
+				orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
+				className,
+			]
+				.filter(Boolean)
+				.join(' ')}
+		/>
+	)
+}

package/src/components/switch.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components'
+
+/**
+ * Switch — labelled on/off toggle.
+ *
+ * Ported 1:1 from gs-platform's `Switch` (44×24 track, off = `surface-muted`,
+ * on = filled `fg`, 20px white thumb translating 2px→22px, 200ms transition).
+ * Built on React Aria Components `Switch` (renders the `<label>` + hidden native
+ * checkbox with `role="switch"`, full keyboard + ARIA). The track / thumb are
+ * styled `<span>`s driven by `group-data-[…]` hooks. Styling = Tailwind +
+ * `@app/tokens`.
+ */
+export type SwitchProps = Omit<RACSwitchProps, 'children'> & {
+	/** Visible label rendered next to the track. */
+	children?: ReactNode
+}
+
+export const Switch = ({ children, ...props }: SwitchProps) => (
+	<RACSwitch
+		{...props}
+		className="group flex cursor-pointer select-none items-center gap-3 text-sm text-fg data-[disabled]:cursor-not-allowed"
+	>
+		{/* gs token map: off track #eceae1 → surface-muted · on track #0d0d0d → fg ·
+		    thumb #ffffff → surface. gs hovers the track at opacity .9 (not a border). */}
+		<span
+			className={
+				'flex h-6 w-11 shrink-0 items-center rounded-full bg-surface-muted px-0.5 ' +
+				'transition-colors duration-200 ' +
+				'group-data-[selected]:bg-fg ' +
+				'group-data-[hovered]:opacity-90 ' +
+				'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-ring group-data-[focus-visible]:ring-offset-2 ' +
+				'group-data-[disabled]:opacity-50'
+			}
+		>
+			<span className="h-5 w-5 translate-x-0 rounded-full bg-surface transition-transform duration-200 group-data-[selected]:translate-x-5" />
+		</span>
+		{children}
+	</RACSwitch>
+)

package/src/components/tabs.tsx

@@ -0,0 +1,40 @@
+import {
+	Tab as RACTab,
+	type TabProps,
+	TabList as RACTabList,
+	type TabListProps,
+	TabPanel as RACTabPanel,
+	type TabPanelProps,
+	Tabs as RACTabs,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Tabs — built on React Aria Components `Tabs`.
+ *
+ * RAC supplies the WAI-ARIA tabs pattern: roving tabindex, arrow-key
+ * navigation, `aria-selected` / `aria-controls` wiring and panel association.
+ * Styling via `uic`.
+ */
+export const Tabs = RACTabs
+
+export const TabList = uic(RACTabList, {
+	displayName: 'TabList',
+	baseClass: 'flex gap-2 border-b border-border',
+}) as <T extends object>(props: TabListProps<T>) => ReturnType<typeof RACTabList>
+
+export const Tab = uic(RACTab, {
+	displayName: 'Tab',
+	baseClass:
+		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-sm font-medium text-fg-muted ' +
+		'outline-none transition-colors ' +
+		'data-[hovered]:text-fg ' +
+		'data-[selected]:border-brand-primary data-[selected]:text-fg ' +
+		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
+		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+}) as (props: TabProps) => ReturnType<typeof RACTab>
+
+export const TabPanel = uic(RACTabPanel, {
+	displayName: 'TabPanel',
+	baseClass: 'py-4 text-sm text-fg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+}) as (props: TabPanelProps) => ReturnType<typeof RACTabPanel>

package/src/components/text.tsx

@@ -0,0 +1,68 @@
+import { uic } from '../utils/uic'
+
+/**
+ * Text + Heading — the typography primitives for the management SPA.
+ *
+ * They express the `@app/tokens` type ramp as variant props so screens stop
+ * hand-writing `text-[NNpx]` literals (the scale, not arbitrary pixels). Two ramps:
+ *
+ *   • <Text> — the SIZE-ONLY UI ramp (micro · caption · label · compact · callout ·
+ *     body · subtitle · title · headline · display). Like the tokens, these set
+ *     font-size only; pair with `leading-*` via `className` where a fixed leading
+ *     matters. `weight` + `tone` cover the common cases.
+ *   • <Heading> — the semantic heading ramp (`level` 1–5 → text-heading1…5), which
+ *     DO carry a matching line-height. Renders an <h2> by default; pass `asChild`
+ *     to project the styles onto the correct heading element for the document
+ *     outline (e.g. `<Heading asChild level="1"><h1>…</h1></Heading>`).
+ *
+ * Both are `uic` factories, so they accept `className` (merged, conflict-resolved),
+ * `asChild`, refs, and all native props. Presentational only (hard rule #1): no API,
+ * no i18n.
+ */
+
+export const Text = uic('span', {
+	displayName: 'Text',
+	baseClass: 'text-fg',
+	variants: {
+		size: {
+			micro: 'text-micro',
+			caption: 'text-caption',
+			label: 'text-label',
+			compact: 'text-compact',
+			callout: 'text-callout',
+			body: 'text-body',
+			subtitle: 'text-subtitle',
+			title: 'text-title',
+			headline: 'text-headline',
+			display: 'text-display',
+		},
+		weight: {
+			regular: 'font-normal',
+			medium: 'font-medium',
+			semibold: 'font-semibold',
+			bold: 'font-bold',
+		},
+		tone: {
+			default: 'text-fg',
+			muted: 'text-fg-muted',
+			subtle: 'text-fg-subtle',
+			inverted: 'text-fg-inverted',
+		},
+	},
+	defaultVariants: { size: 'body', weight: 'regular', tone: 'default' },
+})
+
+export const Heading = uic('h2', {
+	displayName: 'Heading',
+	baseClass: 'font-medium tracking-tight text-fg',
+	variants: {
+		level: {
+			'1': 'text-heading1',
+			'2': 'text-heading2',
+			'3': 'text-heading3',
+			'4': 'text-heading4',
+			'5': 'text-heading5',
+		},
+	},
+	defaultVariants: { level: '2' },
+})

package/src/components/textarea.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react'
+import {
+	FieldError,
+	Label,
+	Text,
+	TextArea as RACTextArea,
+	TextField,
+	type TextFieldProps,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * Textarea — labelled multi-line text field.
+ *
+ * Ported 1:1 from gs-platform's `Textarea` (filled field, 120px min-height,
+ * vertical resize, brand-green focus border). Built on React Aria Components
+ * `TextField` + `TextArea` so the label / description / error are associated
+ * automatically via `aria-describedby` + `aria-invalid`. Styling comes from
+ * `uic` (Tailwind + `@app/tokens` CSS vars). API mirrors our `Input`.
+ */
+const StyledTextArea = uic(RACTextArea, {
+	displayName: 'TextAreaControl',
+	// gs token map: bg #f7f6f2 → surface-card · border #eceae1 → border · hover
+	// #aba89c → fg-subtle · focus #75e7b8 → brand-green · error → danger.
+	// min-h-[120px] is a control dimension (not a design token) — gs uses a literal
+	// 120px here too; there is no spacing token for it.
+	baseClass:
+		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface-card px-4 py-3 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',
+})
+
+export type TextareaProps = 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
+	/** Initial visible row count (the field still grows / resizes vertically). */
+	rows?: number
+}
+
+export const Textarea = ({ label, description, errorMessage, placeholder, rows, ...props }: TextareaProps) => (
+	<TextField {...props} className="flex w-full flex-col gap-2">
+		<Label className="text-sm font-medium text-fg">{label}</Label>
+		<StyledTextArea placeholder={placeholder} rows={rows} />
+		{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/toast.tsx

@@ -0,0 +1,177 @@
+import type { ReactElement } from 'react'
+import {
+	Button as RACButton,
+	Text,
+	UNSTABLE_Toast as RACToast,
+	UNSTABLE_ToastContent as RACToastContent,
+	UNSTABLE_ToastQueue as RACToastQueue,
+	UNSTABLE_ToastRegion as RACToastRegion,
+	type ToastOptions,
+} from 'react-aria-components'
+
+/**
+ * Toast — transient notification, ported 1:1 from gs-platform's `Toast` designer
+ * component (`packages/ui/src/components/ui/Toast.{tsx,module.scss}`).
+ *
+ * RAC version note: `react-aria-components@1.18` ships the (still UNSTABLE) Toast
+ * API — `UNSTABLE_ToastQueue` + `UNSTABLE_ToastRegion`/`Toast`/`ToastContent`. We
+ * build on it (rather than rolling a custom queue) so we inherit RAC's a11y for
+ * free: a single off-screen `aria-live` announcer, keyboard focus management
+ * (F6 / arrow nav into the region), hover/focus auto-pause of the dismiss timer,
+ * and a focusable close control (`<Button slot="close">`).
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
+ *   - `--color-background-secondary` (#f7f6f2) → `bg-surface-card`
+ *   - `1px solid --color-border`     (#eceae1) → `border border-border`
+ *   - `--radius-lg` (8px)                      → `rounded-lg`
+ *   - `--shadow-lg`                            → `shadow-lg`
+ *   - `--spacing-4` (16px) padding            → `p-md`
+ *   - `--spacing-2` (8px) gap between toasts  → `gap-sm`
+ *   - title  heading-5 / weight-medium / text-primary  → `text-heading5 font-medium text-fg`
+ *   - desc   base / text-secondary                     → `text-body text-fg-muted`
+ *   - close  24px / radius-md / text-tertiary→primary  → `h-6 w-6 rounded-md text-fg-subtle hover:text-fg`
+ *   - viewport `--z-index-tooltip` (1070), width 390px → `z-[1070] w-[390px]`
+ * Entrance: gs `slideIn` 300ms cubic-bezier(.16,1,.3,1) translateX(100%)→0 — kept
+ * via an injected `@keyframes gsToastSlideIn` (one-shot on mount; RAC toasts have
+ * no `data-entering` hook, so we animate on render rather than via a state attr).
+ *
+ * Variant is our additive extension (gs's base toast is neutral): `success` /
+ * `error` tint a leading status dot; `default` shows none. The card stays neutral.
+ */
+
+export type ToastVariant = 'default' | 'success' | 'error'
+
+/** The payload carried by each queued toast. */
+export interface ToastContent {
+	/** Primary line — required. Announced to screen readers via RAC's live region. */
+	title: string
+	/** Optional secondary line, rendered muted under the title. */
+	description?: string
+	/** Visual status accent (leading dot). Default = neutral. */
+	variant?: ToastVariant
+}
+
+// Module-level queue: the single source of truth. Mount exactly one <ToastRegion>
+// (typically at the app root); call `toast.add(...)` from anywhere. `maxVisibleToasts`
+// caps the stack — overflow is queued and shown as visible slots free up.
+export const toastQueue = new RACToastQueue<ToastContent>({ maxVisibleToasts: 5 })
+
+const DEFAULT_TIMEOUT = 5000
+
+/**
+ * Imperative toast API. `add` returns the toast key (pass to `toastQueue.close`).
+ * `success` / `error` are thin convenience wrappers that preset the variant.
+ */
+export const toast = {
+	add(content: ToastContent, options?: ToastOptions): string {
+		return toastQueue.add(content, { timeout: DEFAULT_TIMEOUT, ...options })
+	},
+	success(title: string, description?: string, options?: ToastOptions): string {
+		return toastQueue.add(
+			{ title, description, variant: 'success' },
+			{ timeout: DEFAULT_TIMEOUT, ...options },
+		)
+	},
+	error(title: string, description?: string, options?: ToastOptions): string {
+		return toastQueue.add(
+			{ title, description, variant: 'error' },
+			{ timeout: DEFAULT_TIMEOUT, ...options },
+		)
+	},
+}
+
+/** Hook form for components that prefer a hook over the module singleton. */
+export const useToast = () => toast
+
+const DOT_CLASS: Record<ToastVariant, string | null> = {
+	default: null,
+	success: 'bg-success',
+	error: 'bg-danger',
+}
+
+const CloseIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		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>
+)
+
+export interface ToastRegionProps {
+	/** Accessible label for the toast landmark region. Defaults to "Notifications". */
+	'aria-label'?: string
+	/** Accessible label for each toast's close control. Defaults to "Close". */
+	closeLabel?: string
+}
+
+/**
+ * ToastRegion — the fixed bottom-right viewport that renders the live queue.
+ * Mount once near the app root. Subscribes to `toastQueue` and renders each toast.
+ */
+export const ToastRegion = ({
+	'aria-label': ariaLabel = 'Notifications',
+	closeLabel = 'Close',
+}: ToastRegionProps): ReactElement => (
+	<>
+		{/* Injected once: the gs `slideIn` keyframe. Scoped name avoids collisions; a
+		    duplicate identical @keyframes (if two regions mount) is harmless. */}
+		<style>{KEYFRAMES}</style>
+		<RACToastRegion
+			queue={toastQueue}
+			aria-label={ariaLabel}
+			className="fixed bottom-0 right-0 z-[1070] m-0 flex w-[390px] max-w-[100vw] list-none flex-col gap-sm p-md outline-none"
+		>
+			{({ toast: t }) => {
+				const variant = t.content.variant ?? 'default'
+				const dot = DOT_CLASS[variant]
+				return (
+					<RACToast
+						toast={t}
+						style={{
+							animation: 'gsToastSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+							willChange: 'transform, opacity',
+						}}
+						className="relative flex items-start gap-sm rounded-lg border border-border bg-surface-card p-md shadow-lg outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+					>
+						{dot ? (
+							<span
+								aria-hidden="true"
+								className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${dot}`}
+							/>
+						) : null}
+						<RACToastContent className="flex min-w-0 flex-1 flex-col gap-1">
+							<Text slot="title" className="text-heading5 font-medium text-fg">
+								{t.content.title}
+							</Text>
+							{t.content.description ? (
+								<Text slot="description" className="text-body text-fg-muted">
+									{t.content.description}
+								</Text>
+							) : null}
+						</RACToastContent>
+						<RACButton
+							slot="close"
+							aria-label={closeLabel}
+							className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+						>
+							<CloseIcon />
+						</RACButton>
+					</RACToast>
+				)
+			}}
+		</RACToastRegion>
+	</>
+)
+
+// gs `slideIn`: translateX(100% + viewport padding) → 0, opacity in.
+const KEYFRAMES = `@keyframes gsToastSlideIn {
+	from { transform: translateX(calc(100% + 16px)); opacity: 0; }
+	to { transform: translateX(0); opacity: 1; }
+}`

package/src/components/tooltip.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import {
+	OverlayArrow,
+	Tooltip as RACTooltip,
+	type TooltipProps as RACTooltipProps,
+	TooltipTrigger as RACTooltipTrigger,
+} from 'react-aria-components'
+
+/**
+ * Tooltip — dark hover/focus hint, ported 1:1 from gs-platform's `Tooltip` designer
+ * component (`packages/ui/src/components/ui/Tooltip.{tsx,module.scss}`).
+ *
+ * Built on React Aria Components `TooltipTrigger` + `Tooltip` (which gs faked with
+ * Radix): RAC gives us hover-intent + focus + touch handling, an `OverlayArrow`
+ * primitive, and correct `aria-describedby` wiring on the trigger for free. Wrap
+ * any focusable element (e.g. our `Button`) in `TooltipTrigger`, then render a
+ * `Tooltip`.
+ *
+ * gs SCSS → our tokens (Tailwind + `@app/tokens` CSS vars, no SCSS — hard rule #3):
+ *   - `--color-brand-black` (#0d0d0d) bg + arrow fill → `bg-fg` / `fill-fg`
+ *   - `--color-white` text                            → `text-fg-inverted`
+ *   - `--font-size-small-body` (13px)                 → `text-compact`
+ *   - `--spacing-3` / `--spacing-4` (12px / 16px) pad → `py-3 px-4`
+ *   - `--radius-md` (6px)                             → `rounded-md`
+ *   - `--shadow-lg`                                   → `shadow-lg`
+ *   - `--z-index-tooltip` (1070)                      → `z-[1070]`
+ * Motion: gs `slideUpAndFade` 200ms cubic-bezier(.16,1,.3,1) translateY(2px)→0,
+ * gated on RAC's `data-[entering]` (and reversed on `data-[exiting]`) via an
+ * injected `@keyframes` pair.
+ */
+
+export const TooltipTrigger = RACTooltipTrigger
+
+export interface TooltipProps extends Omit<RACTooltipProps, 'children'> {
+	/** Tooltip body — text or rich content. */
+	children: ReactNode
+	/** Hide the small pointer arrow (shown by default). */
+	hideArrow?: boolean
+}
+
+export const Tooltip = ({ children, hideArrow = false, ...props }: TooltipProps) => (
+	<RACTooltip
+		// gs default offset (`sideOffset={5}`); RAC adds arrow size automatically.
+		offset={6}
+		{...props}
+		className="z-[1070] select-none rounded-md bg-fg px-4 py-3 text-compact text-fg-inverted shadow-lg outline-none data-[entering]:[animation:gsTooltipSlideUpFade_200ms_cubic-bezier(0.16,1,0.3,1)] data-[exiting]:[animation:gsTooltipSlideUpFade_150ms_cubic-bezier(0.16,1,0.3,1)_reverse]"
+	>
+		{/* Injected keyframes (gs `slideUpAndFade`). No SCSS; scoped name. */}
+		<style>{KEYFRAMES}</style>
+		{hideArrow ? null : (
+			<OverlayArrow>
+				<svg width="10" height="5" viewBox="0 0 10 5" className="fill-fg" aria-hidden="true">
+					<path d="M0 0 L5 5 L10 0 Z" />
+				</svg>
+			</OverlayArrow>
+		)}
+		{children}
+	</RACTooltip>
+)
+
+// gs `slideUpAndFade`: translateY(2px) + opacity 0 → settled. RAC flips the
+// rendered arrow per placement, so the keyframe only needs the fade/rise.
+const KEYFRAMES = `@keyframes gsTooltipSlideUpFade {
+	from { opacity: 0; transform: translateY(2px); }
+	to { opacity: 1; transform: translateY(0); }
+}`