@podoba/react 0.0.3 → 0.0.4

package/package.json

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

package/src/components/combobox.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	ComboBox as RACComboBox,
+	type ComboBoxProps as RACComboBoxProps,
+	FieldError,
+	Input as RACInput,
+	Label,
+	ListBox,
+	ListBoxItem,
+	type ListBoxItemProps,
+	Popover,
+	Text,
+} from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+/**
+ * ComboBox — a filterable single-select: a text input that narrows a listbox as
+ * you type. Built on React Aria Components `ComboBox` (typeahead, keyboard nav,
+ * ARIA all handled). Styling mirrors our `Input` (white filled field) and shares
+ * `Select`'s cream dropdown, so the form controls stay visually consistent. Pass
+ * options as `ComboBoxItem` children.
+ */
+const Chevron = () => (
+	<svg width="9.5" height="9.5" viewBox="0 0 12 12" fill="none" aria-hidden="true" className="text-fg">
+		<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+	</svg>
+)
+
+// Same filled-field skin as input.tsx, with room on the right for the toggle.
+// Invalid is owned by the ComboBox root, so it comes through `group-data-invalid`.
+const ComboBoxInput = uic(RACInput, {
+	displayName: 'ComboBoxInput',
+	baseClass:
+		'h-12 w-full rounded-lg border border-border bg-surface pl-4 pr-11 text-sm text-fg ' +
+		'outline-none transition-colors placeholder:text-fg-muted ' +
+		'data-[hovered]:border-fg-subtle ' +
+		'data-[focused]:border-brand-green data-[focused]:ring-2 data-[focused]:ring-ring ' +
+		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60',
+})
+
+export const ComboBoxItem = uic(ListBoxItem, {
+	displayName: 'ComboBoxItem',
+	// Matches SelectItem so the two dropdowns are indistinguishable.
+	baseClass:
+		'flex cursor-pointer select-none items-center rounded-md px-5 py-1 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 ComboBoxProps<T extends object> = RACComboBoxProps<T> & {
+	/** Visible label (required for accessibility). */
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+	/** Placeholder shown in the empty input. */
+	placeholder?: string
+	children: ReactNode
+}
+
+export const ComboBox = <T extends object>({
+	label,
+	description,
+	errorMessage,
+	placeholder,
+	children,
+	...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-3 overflow-auto py-5 outline-none"
+				renderEmptyState={() => <div className="px-5 py-1 text-sm text-fg-muted">No results</div>}
+			>
+				{children}
+			</ListBox>
+		</Popover>
+	</RACComboBox>
+)

package/src/components/dialog.tsx

@@ -127,6 +127,10 @@ export const Dialog = ({
 		// Either way the RACDialog render-prop `close` resolves against the active
 		// overlay state, so `close()` works in both modes.
 		<Overlay
+			// Full-screen is an immersive takeover: swap the light 2px scrim for a
+			// heavier backdrop blur so the page behind reads as clearly blurred around
+			// the near-fullscreen canvas. (tailwind-merge dedupes the base blur/scrim.)
+			className={isFlex ? "bg-black/25 backdrop-blur-lg" : undefined}
 			isOpen={isOpen}
 			defaultOpen={defaultOpen}
 			onOpenChange={onOpenChange}

package/src/components/input.tsx

@@ -20,17 +20,20 @@ import { uic } from '../utils/uic'
  */
 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.
+	// White fill so the field reads as editable. The gs original used a cream
+	// (#f7f6f2 → surface-card) fill, but our Card surface is ALSO surface-card, so
+	// a filled field inside a card vanished and read as disabled. Inverted: active
+	// = white (surface), disabled = the muted cream. border #eceae1 → border ·
+	// hover #aba89c → fg-subtle · focus #75e7b8 → brand-green · error → danger.
 	// Identical to textarea.tsx's filled-field skin; `fieldSize` adds the
 	// single-line height (gs sizes the field via padding only).
 	baseClass:
-		'w-full rounded-lg border border-border bg-surface-card px-4 text-sm text-fg ' +
+		'w-full rounded-lg border border-border bg-surface 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',
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 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).

package/src/components/multiselect.tsx

@@ -0,0 +1,146 @@
+import { type ReactNode, useId, useRef, useState } from 'react'
+import {
+	Button as RACButton,
+	Label,
+	ListBox,
+	ListBoxItem,
+	type ListBoxItemProps,
+	Popover,
+	type Selection,
+	Text,
+} from 'react-aria-components'
+import { clsx } from 'clsx'
+import { uic } from '../utils/uic'
+
+/**
+ * MultiSelect — a dropdown that selects several options at once.
+ *
+ * React Aria Components ships no multi-select control at 1.x, so this composes
+ * one from primitives: a `Select`-styled trigger (white filled field) plus a
+ * controlled `Popover` + `ListBox selectionMode="multiple"` (RAC gives the
+ * listbox ARIA + keyboard multi-selection). The trigger summarises the choice —
+ * up to two labels, then an "N selected" count. Options come as `{ id, label }`
+ * data (not children) because the trigger needs the value→label map. Selection
+ * is uncontrolled by default; pass `selectedKeys` + `onChange` to control it.
+ */
+const Chevron = () => (
+	<svg width="9.5" height="9.5" viewBox="0 0 12 12" fill="none" aria-hidden="true" className="shrink-0 text-fg">
+		<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+	</svg>
+)
+
+const Check = () => (
+	<svg
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+		className="h-4 w-4 shrink-0 text-fg opacity-0 group-data-[selected]:opacity-100"
+	>
+		<path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+	</svg>
+)
+
+const MultiSelectItem = uic(ListBoxItem, {
+	displayName: 'MultiSelectItem',
+	// `group` so the leading Check can react to this item's data-selected.
+	baseClass:
+		'group flex cursor-pointer select-none items-center gap-2 rounded-md px-5 py-1 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 MultiSelectOption = { id: string; label: string; isDisabled?: boolean }
+
+export type MultiSelectProps = {
+	/** Visible label (required for accessibility). */
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+	/** Shown in the trigger when nothing is selected. */
+	placeholder: string
+	options: MultiSelectOption[]
+	/** Controlled selected ids. Omit for uncontrolled (see `defaultSelectedKeys`). */
+	selectedKeys?: Set<string>
+	/** Initial selection when uncontrolled. */
+	defaultSelectedKeys?: Iterable<string>
+	/** Fired with the full set of selected ids after each toggle. */
+	onChange?: (ids: Set<string>) => void
+	isDisabled?: boolean
+	isInvalid?: boolean
+	className?: string
+}
+
+export const MultiSelect = ({
+	label,
+	description,
+	errorMessage,
+	placeholder,
+	options,
+	selectedKeys,
+	defaultSelectedKeys,
+	onChange,
+	isDisabled,
+	isInvalid,
+	className,
+}: MultiSelectProps) => {
+	const labelId = useId()
+	const triggerRef = useRef<HTMLButtonElement>(null)
+	const [open, setOpen] = useState(false)
+	const [internal, setInternal] = useState<Set<string>>(() => new Set(defaultSelectedKeys ?? []))
+	const selected = selectedKeys ?? internal
+
+	const handleChange = (keys: Selection) => {
+		const next = keys === 'all' ? new Set(options.map((o) => o.id)) : new Set([...keys].map(String))
+		if (selectedKeys === undefined) setInternal(next)
+		onChange?.(next)
+	}
+
+	const chosen = options.filter((o) => selected.has(o.id)).map((o) => o.label)
+	const summary = chosen.length === 0 ? placeholder : chosen.length <= 2 ? chosen.join(', ') : `${chosen.length} selected`
+
+	return (
+		<div className={clsx('flex flex-col gap-2', className)}>
+			<span id={labelId} className="text-heading5 font-medium text-fg">
+				{label}
+			</span>
+			<RACButton
+				ref={triggerRef}
+				aria-labelledby={labelId}
+				isDisabled={isDisabled}
+				onPress={() => setOpen(true)}
+				className={clsx(
+					'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border bg-surface px-4 text-sm text-fg outline-none transition-colors',
+					'data-[hovered]:border-fg-subtle data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring',
+					'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
+					isInvalid ? 'border-danger ring-2 ring-danger' : 'border-border',
+				)}
+			>
+				<span className={clsx('truncate', chosen.length === 0 && 'text-fg-muted')}>{summary}</span>
+				<Chevron />
+			</RACButton>
+			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
+			{isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
+			<Popover
+				triggerRef={triggerRef}
+				isOpen={open}
+				onOpenChange={setOpen}
+				className="min-w-[var(--trigger-width)] overflow-hidden rounded-lg bg-surface-card shadow-lg"
+			>
+				<ListBox
+					aria-labelledby={labelId}
+					selectionMode="multiple"
+					selectedKeys={selected}
+					onSelectionChange={handleChange}
+					className="flex max-h-64 flex-col gap-3 overflow-auto py-5 outline-none"
+				>
+					{options.map((o) => (
+						<MultiSelectItem key={o.id} id={o.id} textValue={o.label} isDisabled={o.isDisabled}>
+							<Check />
+							<span>{o.label}</span>
+						</MultiSelectItem>
+					))}
+				</ListBox>
+			</Popover>
+		</div>
+	)
+}

package/src/components/select.tsx

@@ -29,19 +29,17 @@ import { uic } from '../utils/uic'
  */
 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-`.
+	// Sized to match the other form fields (Input / ComboBox): h-12, 16px side
+	// padding, 8px radius. White fill + border so the trigger doesn't vanish inside
+	// a Card (also surface-card) and read as disabled; hover darkens the border.
+	// Error → 2px danger ring driven off the RACSelect root's `data-invalid`.
 	baseClass:
-		'flex min-h-[58px] w-full items-center justify-between gap-2.5 rounded-lg bg-surface-card p-5 ' +
+		'flex h-12 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-surface px-4 ' +
 		'text-sm text-fg outline-none transition-colors ' +
-		'data-[hovered]:bg-surface-muted ' +
+		'data-[hovered]:border-fg-subtle ' +
 		'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',
+		'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger ' +
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
 })
 
 export const SelectItem = uic(ListBoxItem, {
@@ -50,7 +48,7 @@ export const SelectItem = uic(ListBoxItem, {
 	// 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 ' +
+		'flex cursor-pointer select-none items-center rounded-md px-5 py-1 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

package/src/components/textarea.tsx

@@ -20,17 +20,19 @@ import { uic } from '../utils/uic'
  */
 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.
+	// White fill so the field reads as editable — matches input.tsx. The gs
+	// original used cream (surface-card), but our Card surface is also surface-card,
+	// so a field inside a card vanished / looked disabled. Inverted: active = white
+	// (surface), disabled = muted cream. 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.
 	baseClass:
-		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface-card px-4 py-3 text-sm text-fg ' +
+		'min-h-[120px] w-full resize-y rounded-lg border border-border bg-surface 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',
+		'data-[disabled]:bg-surface-muted data-[disabled]:opacity-60 data-[disabled]:pointer-events-none',
 })
 
 export type TextareaProps = TextFieldProps & {

package/src/index.ts

@@ -16,6 +16,8 @@ export * from "./components/checkbox";
 export * from "./components/radio";
 export * from "./components/switch";
 export * from "./components/select";
+export * from "./components/combobox";
+export * from "./components/multiselect";
 export * from "./components/dialog";
 export * from "./components/dropdown-menu";
 export * from "./components/context-menu";