@podoba/react 0.0.4 → 0.0.6

package/package.json

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

package/src/components/combobox.tsx

@@ -44,8 +44,8 @@ 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 ' +
+		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
 
@@ -86,8 +86,8 @@ export const ComboBox = <T extends object>({
 		<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>}
+				className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none"
+				renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No results</div>}
 			>
 				{children}
 			</ListBox>

package/src/components/date-field.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react'
+import {
+	DateField as RACDateField,
+	type DateFieldProps as RACDateFieldProps,
+	DateInput,
+	DateSegment,
+	type DateValue,
+	FieldError,
+	Label,
+	Text,
+	TimeField as RACTimeField,
+	type TimeFieldProps as RACTimeFieldProps,
+	type TimeValue,
+} from 'react-aria-components'
+
+/**
+ * DateField / TimeField — segmented, keyboard-first date and time entry (type or
+ * arrow each segment; no free-text parsing). Built on React Aria Components, so
+ * they're locale- and timezone-aware. Pass `@internationalized/date` values for
+ * controlled use. For a calendar popover, use `DatePicker`.
+ */
+
+// Each editable segment; the focused one gets a brand-green highlight.
+export const segmentClass =
+	'rounded px-0.5 tabular-nums text-fg caret-transparent outline-none ' +
+	'data-[placeholder]:text-fg-muted ' +
+	'data-[focused]:bg-brand-green data-[focused]:text-fg ' +
+	'data-[disabled]:opacity-50 data-[type=literal]:px-0 data-[type=literal]:text-fg-muted'
+
+export const dateInputClass =
+	'flex h-12 w-full items-center gap-0.5 rounded-lg border border-border bg-surface px-4 text-sm text-fg transition-colors ' +
+	'hover:border-fg-subtle focus-within:border-brand-green focus-within:ring-2 focus-within:ring-ring ' +
+	'group-data-[invalid]:border-danger group-data-[invalid]:ring-2 group-data-[invalid]:ring-danger'
+
+export type DateFieldProps<T extends DateValue> = RACDateFieldProps<T> & {
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+}
+
+export const DateField = <T extends DateValue>({ label, description, errorMessage, ...props }: DateFieldProps<T>) => (
+	<RACDateField {...props} className="group flex flex-col gap-2">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	</RACDateField>
+)
+
+export type TimeFieldProps<T extends TimeValue> = RACTimeFieldProps<T> & {
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+}
+
+export const TimeField = <T extends TimeValue>({ label, description, errorMessage, ...props }: TimeFieldProps<T>) => (
+	<RACTimeField {...props} className="group flex flex-col gap-2">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<DateInput className={dateInputClass}>{(segment) => <DateSegment segment={segment} className={segmentClass} />}</DateInput>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	</RACTimeField>
+)

package/src/components/date-picker.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	Calendar,
+	CalendarCell,
+	CalendarGrid,
+	CalendarGridBody,
+	CalendarGridHeader,
+	CalendarHeaderCell,
+	DateInput,
+	DatePicker as RACDatePicker,
+	type DatePickerProps as RACDatePickerProps,
+	DateSegment,
+	type DateValue,
+	Dialog,
+	FieldError,
+	Group,
+	Heading,
+	Label,
+	Popover,
+	Text,
+} from 'react-aria-components'
+import { dateInputClass, segmentClass } from './date-field'
+
+/**
+ * DatePicker — a `DateField` with a calendar popover. Built on React Aria
+ * Components (locale/timezone-aware, full keyboard support). Uncontrolled by
+ * default; pass `@internationalized/date` values to control it. Set `granularity`
+ * to `"minute"` for a datetime picker (adds time segments to the field).
+ */
+const navButton =
+	'flex h-8 w-8 items-center justify-center rounded-md text-fg-muted outline-none transition-colors ' +
+	'hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[disabled]:opacity-40'
+
+const Chevron = ({ dir }: { dir: 'left' | 'right' }) => (
+	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+		<path d={dir === 'left' ? 'M15 6l-6 6 6 6' : 'M9 6l6 6-6 6'} />
+	</svg>
+)
+
+export type DatePickerProps<T extends DateValue> = RACDatePickerProps<T> & {
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+}
+
+export const DatePicker = <T extends DateValue>({ label, description, errorMessage, ...props }: DatePickerProps<T>) => (
+	<RACDatePicker {...props} className="group flex flex-col gap-2">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<Group className={`${dateInputClass} pr-2`}>
+			<DateInput className="flex flex-1 items-center gap-0.5">
+				{(segment) => <DateSegment segment={segment} className={segmentClass} />}
+			</DateInput>
+			<RACButton
+				aria-label="Open calendar"
+				className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-muted outline-none transition-colors hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+					<rect x="3" y="4" width="18" height="18" rx="2" />
+					<path d="M16 2v4M8 2v4M3 10h18" />
+				</svg>
+			</RACButton>
+		</Group>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+		<Popover className="rounded-lg border border-border bg-surface p-4 shadow-lg outline-none">
+			<Dialog className="outline-none">
+				<Calendar className="w-[17.5rem]">
+					<header className="flex items-center justify-between pb-3">
+						<RACButton slot="previous" className={navButton}>
+							<Chevron dir="left" />
+						</RACButton>
+						<Heading className="text-sm font-medium text-fg" />
+						<RACButton slot="next" className={navButton}>
+							<Chevron dir="right" />
+						</RACButton>
+					</header>
+					<CalendarGrid className="w-full border-collapse">
+						<CalendarGridHeader>
+							{(day) => (
+								<CalendarHeaderCell className="pb-1 text-micro font-medium uppercase tracking-wide text-fg-subtle">
+									{day}
+								</CalendarHeaderCell>
+							)}
+						</CalendarGridHeader>
+						<CalendarGridBody>
+							{(date) => (
+								<CalendarCell
+									date={date}
+									className={
+										'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-sm text-fg outline-none transition-colors ' +
+										'data-[outside-month]:text-fg-subtle ' +
+										'data-[hovered]:bg-surface-muted ' +
+										'data-[selected]:bg-fg data-[selected]:text-fg-inverted data-[selected]:font-medium ' +
+										'data-[unavailable]:text-fg-subtle data-[unavailable]:line-through ' +
+										'data-[disabled]:opacity-40 ' +
+										'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
+									}
+								/>
+							)}
+						</CalendarGridBody>
+					</CalendarGrid>
+				</Calendar>
+			</Dialog>
+		</Popover>
+	</RACDatePicker>
+)

package/src/components/file-upload.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode, useState } from 'react'
+import { DropZone, FileTrigger, Text } from 'react-aria-components'
+import { Button } from './button'
+
+/**
+ * FileUpload — a drop zone + "choose file" trigger over React Aria Components
+ * `DropZone` + `FileTrigger` (keyboard-accessible, drag-and-drop highlight).
+ * Uncontrolled: it tracks selected file names for display and reports the raw
+ * `File[]` via `onFiles`. Wire `onFiles` to your own upload.
+ */
+export type FileUploadProps = {
+	label?: ReactNode
+	description?: ReactNode
+	/** Accepted MIME types / extensions, e.g. ["image/*"] or ["image/png", ".pdf"]. */
+	accept?: string[]
+	allowsMultiple?: boolean
+	/** Called with the chosen files (from either the picker or a drop). */
+	onFiles?: (files: File[]) => void
+	className?: string
+}
+
+export const FileUpload = ({ label, description, accept, allowsMultiple, onFiles, className }: FileUploadProps) => {
+	const [names, setNames] = useState<string[]>([])
+
+	const handle = (files: File[]) => {
+		if (files.length === 0) return
+		setNames(files.map((f) => f.name))
+		onFiles?.(files)
+	}
+
+	return (
+		<div className={className ? `flex flex-col gap-2 ${className}` : 'flex flex-col gap-2'}>
+			{label ? <span className="text-heading5 font-medium text-fg">{label}</span> : null}
+			<DropZone
+				onDrop={async (e) => {
+					// Narrow to file items via `'getFile' in i` (avoids importing FileDropItem).
+					const files = await Promise.all(e.items.flatMap((i) => ('getFile' in i ? [i.getFile()] : [])))
+					handle(allowsMultiple ? files : files.slice(0, 1))
+				}}
+				className={
+					'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-surface p-6 text-center outline-none transition-colors ' +
+					'data-[hovered]:border-fg-subtle ' +
+					'data-[drop-target]:border-brand-green data-[drop-target]:bg-surface-card ' +
+					'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
+				}
+			>
+				<Text slot="label" className="text-sm text-fg-muted">
+					Drag &amp; drop {allowsMultiple ? 'files' : 'a file'} here, or
+				</Text>
+				<FileTrigger
+					acceptedFileTypes={accept}
+					allowsMultiple={allowsMultiple}
+					onSelect={(list) => handle(list ? Array.from(list) : [])}
+				>
+					<Button variant="secondary" size="sm">
+						Choose {allowsMultiple ? 'files' : 'file'}
+					</Button>
+				</FileTrigger>
+				{names.length > 0 ? <span className="max-w-full truncate text-xs text-fg">{names.join(', ')}</span> : null}
+			</DropZone>
+			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
+		</div>
+	)
+}

package/src/components/multiselect.tsx

@@ -1,13 +1,15 @@
 import { type ReactNode, useId, useRef, useState } from 'react'
 import {
+	Autocomplete,
 	Button as RACButton,
-	Label,
+	Input as RACInput,
 	ListBox,
 	ListBoxItem,
 	type ListBoxItemProps,
 	Popover,
+	SearchField,
 	type Selection,
-	Text,
+	useFilter,
 } from 'react-aria-components'
 import { clsx } from 'clsx'
 import { uic } from '../utils/uic'
@@ -22,6 +24,10 @@ import { uic } from '../utils/uic'
  * 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.
+ *
+ * Pass `searchable` to make it a filterable "combobox multi": RAC `Autocomplete`
+ * wires a search field to the listbox (type to filter, arrow keys into the list,
+ * Enter/click to toggle). Handy once the option list gets long.
  */
 const Chevron = () => (
 	<svg width="9.5" height="9.5" viewBox="0 0 12 12" fill="none" aria-hidden="true" className="shrink-0 text-fg">
@@ -44,8 +50,8 @@ 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 ' +
+		'group flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
 
@@ -65,6 +71,8 @@ export type MultiSelectProps = {
 	defaultSelectedKeys?: Iterable<string>
 	/** Fired with the full set of selected ids after each toggle. */
 	onChange?: (ids: Set<string>) => void
+	/** Add a search field to filter options — a filterable "combobox multi". */
+	searchable?: boolean
 	isDisabled?: boolean
 	isInvalid?: boolean
 	className?: string
@@ -79,6 +87,7 @@ export const MultiSelect = ({
 	selectedKeys,
 	defaultSelectedKeys,
 	onChange,
+	searchable,
 	isDisabled,
 	isInvalid,
 	className,
@@ -86,6 +95,7 @@ export const MultiSelect = ({
 	const labelId = useId()
 	const triggerRef = useRef<HTMLButtonElement>(null)
 	const [open, setOpen] = useState(false)
+	const { contains } = useFilter({ sensitivity: 'base' })
 	const [internal, setInternal] = useState<Set<string>>(() => new Set(defaultSelectedKeys ?? []))
 	const selected = selectedKeys ?? internal
 
@@ -98,6 +108,24 @@ export const MultiSelect = ({
 	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`
 
+	const list = (
+		<ListBox
+			aria-labelledby={labelId}
+			selectionMode="multiple"
+			selectedKeys={selected}
+			onSelectionChange={handleChange}
+			renderEmptyState={() => <div className="px-3 py-2 text-sm text-fg-muted">No matches</div>}
+			className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 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>
+	)
+
 	return (
 		<div className={clsx('flex flex-col gap-2', className)}>
 			<span id={labelId} className="text-heading5 font-medium text-fg">
@@ -126,20 +154,19 @@ export const MultiSelect = ({
 				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>
+				{searchable ? (
+					<Autocomplete filter={contains}>
+						<SearchField aria-label="Filter options" autoFocus className="border-b border-border p-1">
+							<RACInput
+								placeholder="Search…"
+								className="w-full rounded-md bg-surface px-3 py-2 text-sm text-fg outline-none placeholder:text-fg-muted"
+							/>
+						</SearchField>
+						{list}
+					</Autocomplete>
+				) : (
+					list
+				)}
 			</Popover>
 		</div>
 	)

package/src/components/number-field.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	FieldError,
+	Group,
+	Input as RACInput,
+	Label,
+	NumberField as RACNumberField,
+	type NumberFieldProps as RACNumberFieldProps,
+	Text,
+} from 'react-aria-components'
+
+/**
+ * NumberField — numeric input with steppers, min/max and locale-aware formatting
+ * (pass `formatOptions` for currency/percent/units). Built on React Aria
+ * Components `NumberField`; styled to match the other form fields.
+ */
+const stepper =
+	'flex h-full w-9 shrink-0 items-center justify-center text-base text-fg-muted outline-none transition-colors ' +
+	'hover:bg-surface-muted hover:text-fg data-[pressed]:bg-surface-muted data-[disabled]:opacity-40'
+
+export type NumberFieldProps = RACNumberFieldProps & {
+	/** Visible label (required for accessibility). */
+	label: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+	placeholder?: string
+}
+
+export const NumberField = ({ label, description, errorMessage, placeholder, ...props }: NumberFieldProps) => (
+	<RACNumberField {...props} className="group flex flex-col gap-2">
+		<Label className="text-heading5 font-medium text-fg">{label}</Label>
+		<Group
+			className={
+				'flex h-12 w-full items-center overflow-hidden rounded-lg border border-border bg-surface text-sm text-fg transition-colors ' +
+				'data-[hovered]:border-fg-subtle ' +
+				'data-[focus-within]:border-brand-green data-[focus-within]:ring-2 data-[focus-within]: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'
+			}
+		>
+			<RACButton slot="decrement" className={`${stepper} border-r border-border`}>
+				–
+			</RACButton>
+			<RACInput
+				placeholder={placeholder}
+				className="min-w-0 flex-1 bg-transparent px-4 text-sm tabular-nums text-fg outline-none placeholder:text-fg-muted"
+			/>
+			<RACButton slot="increment" className={`${stepper} border-l border-border`}>
+				+
+			</RACButton>
+		</Group>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+		<FieldError className="text-xs text-danger">{errorMessage}</FieldError>
+	</RACNumberField>
+)

package/src/components/rich-text-editor.tsx

@@ -0,0 +1,158 @@
+import { type ClipboardEvent as ReactClipboardEvent, type ReactNode, useEffect, useRef } from 'react'
+import { clsx } from 'clsx'
+
+/**
+ * RichTextEditor — a dependency-free contentEditable WYSIWYG that emits an HTML
+ * string (round-trips with any `set:html` / `dangerouslySetInnerHTML` renderer,
+ * so no value migration and no bundled ProseMirror). Ported from pramen's
+ * cms-editor `RichText`; TipTap is the upgrade path if tables/embeds are needed.
+ *
+ * The `prose prose-sm` body relies on the @tailwindcss/typography plugin, which
+ * @podoba/tailwind's preset already registers.
+ *
+ * SECURITY: `scrubHtml` here is cosmetic paste/load cleaning, NOT an XSS boundary
+ * — an editor can POST any HTML straight to a server. Sanitise rich-text values
+ * on the SERVER on write. This just keeps obviously-unwanted markup out of the DOM.
+ */
+
+const RT_TOOLS: Array<{ label: string; title: string; run: (exec: (c: string, a?: string) => void) => void }> = [
+	{ label: 'B', title: 'Bold', run: (x) => x('bold') },
+	{ label: 'I', title: 'Italic', run: (x) => x('italic') },
+	{ label: 'H2', title: 'Heading', run: (x) => x('formatBlock', 'H2') },
+	{ label: 'H3', title: 'Subheading', run: (x) => x('formatBlock', 'H3') },
+	{ label: '¶', title: 'Paragraph', run: (x) => x('formatBlock', 'P') },
+	{ label: '• List', title: 'Bulleted list', run: (x) => x('insertUnorderedList') },
+	{ label: '1. List', title: 'Numbered list', run: (x) => x('insertOrderedList') },
+	{
+		label: 'Link',
+		title: 'Add link',
+		run: (x) => {
+			const raw = window.prompt('Link URL (https://, mailto:, /path)', 'https://')
+			if (!raw) return
+			const url = safeLinkUrl(raw)
+			if (!url) {
+				window.alert('Only http(s), mailto, tel, or relative (/, #) links are allowed.')
+				return
+			}
+			x('createLink', url)
+		},
+	},
+	{ label: 'Unlink', title: 'Remove link', run: (x) => x('unlink') },
+	{ label: 'Clear', title: 'Clear formatting', run: (x) => x('removeFormat') },
+]
+
+/** Allow-list for a link href: http(s), mailto, tel, or a relative/anchor path.
+ * The prefix allow-list inherently rejects `javascript:`/`data:`/`vbscript:`. */
+function safeLinkUrl(raw: string): string | null {
+	const url = raw.trim()
+	return /^(https?:\/\/|mailto:|tel:|\/|#)/i.test(url) ? url : null
+}
+
+/** Cosmetic scrub (NOT a security boundary — sanitise on the server). */
+function scrubHtml(html: string): string {
+	return html
+		.replace(/<\s*(script|style)[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
+		.replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+		.replace(/(href|src)\s*=\s*("javascript:[^"]*"|'javascript:[^']*')/gi, '$1="#"')
+}
+
+export type RichTextEditorProps = {
+	/** Current HTML value (controlled). */
+	value: string
+	/** Fired with the scrubbed HTML on every edit. */
+	onChange: (html: string) => void
+	label?: ReactNode
+	description?: ReactNode
+	errorMessage?: string
+	/** Placeholder shown while the body is empty. */
+	placeholder?: string
+	/** Minimum body height in px (default 180). */
+	minHeight?: number
+	isInvalid?: boolean
+	className?: string
+}
+
+export function RichTextEditor({
+	value,
+	onChange,
+	label,
+	description,
+	errorMessage,
+	placeholder = 'Write…',
+	minHeight = 180,
+	isInvalid,
+	className,
+}: RichTextEditorProps) {
+	const ref = useRef<HTMLDivElement>(null)
+	const last = useRef<string>('')
+
+	// Sync only EXTERNAL value changes into the DOM — never on our own keystrokes,
+	// or the caret would jump to the start on every character.
+	useEffect(() => {
+		const el = ref.current
+		if (el && value !== last.current) {
+			el.innerHTML = scrubHtml(value || '')
+			last.current = value || ''
+		}
+	}, [value])
+
+	const emit = () => {
+		const html = scrubHtml(ref.current?.innerHTML ?? '')
+		last.current = html
+		onChange(html)
+	}
+	const exec = (command: string, arg?: string) => {
+		ref.current?.focus()
+		document.execCommand(command, false, arg)
+		emit()
+	}
+	// Paste as plain text — avoids importing Word/Docs style-junk into the HTML.
+	const onPaste = (e: ReactClipboardEvent<HTMLDivElement>) => {
+		e.preventDefault()
+		document.execCommand('insertText', false, e.clipboardData.getData('text/plain'))
+	}
+
+	return (
+		<div className={clsx('flex flex-col gap-2', className)}>
+			{label ? <span className="text-heading5 font-medium text-fg">{label}</span> : null}
+			<div
+				className={clsx(
+					'overflow-hidden rounded-lg border bg-surface transition-colors',
+					'focus-within:ring-2 focus-within:ring-ring',
+					isInvalid
+						? 'border-danger focus-within:border-danger focus-within:ring-danger'
+						: 'border-border focus-within:border-brand-green',
+				)}
+			>
+				<div className="flex flex-wrap gap-0.5 border-b border-border bg-surface-muted px-2 py-1.5">
+					{RT_TOOLS.map((t) => (
+						// preventDefault on mousedown keeps the editor selection while the button is clicked.
+						<button
+							key={t.label}
+							type="button"
+							title={t.title}
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={() => t.run(exec)}
+							className="rounded border-0 bg-transparent px-2.5 py-0.5 text-xs text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+						>
+							{t.label}
+						</button>
+					))}
+				</div>
+				<div
+					ref={ref}
+					className="prose prose-sm max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
+					style={{ minHeight }}
+					contentEditable
+					suppressContentEditableWarning
+					data-placeholder={placeholder}
+					onInput={emit}
+					onBlur={emit}
+					onPaste={onPaste}
+				/>
+			</div>
+			{description ? <span className="text-xs text-fg-muted">{description}</span> : null}
+			{isInvalid && errorMessage ? <span className="text-xs text-danger">{errorMessage}</span> : null}
+		</div>
+	)
+}

package/src/components/search-field.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	Input as RACInput,
+	Label,
+	SearchField as RACSearchField,
+	type SearchFieldProps as RACSearchFieldProps,
+	Text,
+} from 'react-aria-components'
+
+/**
+ * SearchField — a text input for search, with a clear (✕) button that appears
+ * once there's a value and a leading search glyph. Built on React Aria
+ * Components `SearchField` (Esc clears, `type=search` semantics). Styled to
+ * match the other form fields.
+ */
+const SearchGlyph = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		aria-hidden="true"
+		className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-fg-subtle"
+	>
+		<circle cx="11" cy="11" r="7" />
+		<path d="M21 21l-4.3-4.3" strokeLinecap="round" />
+	</svg>
+)
+
+export type SearchFieldProps = RACSearchFieldProps & {
+	label?: ReactNode
+	description?: ReactNode
+	placeholder?: string
+}
+
+export const SearchField = ({ label, description, placeholder, ...props }: SearchFieldProps) => (
+	<RACSearchField {...props} className="group flex flex-col gap-2">
+		{label ? <Label className="text-heading5 font-medium text-fg">{label}</Label> : null}
+		<div className="relative flex items-center">
+			<SearchGlyph />
+			<RACInput
+				placeholder={placeholder}
+				className={
+					'h-12 w-full rounded-lg border border-border bg-surface pl-10 pr-10 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 ' +
+					'[&::-webkit-search-cancel-button]:hidden'
+				}
+			/>
+			{/* RAC hides this automatically when the field is empty. */}
+			<RACButton className="absolute right-2 flex h-7 w-7 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg group-data-[empty]:hidden data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring">
+				<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>
+			</RACButton>
+		</div>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+	</RACSearchField>
+)

package/src/components/select.tsx

@@ -48,8 +48,8 @@ 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 py-1 text-sm text-fg outline-none ' +
-		'data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
+		'flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm text-fg outline-none ' +
+		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
 }) as (props: ListBoxItemProps) => ReactNode
 
@@ -103,11 +103,12 @@ export const Select = <T extends object>({
 			</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. */}
+		{/* Cream fill, 8px radius, shadow-lg, NO border. 4px inset so each option's
+		    highlight sits as a padded pill; small gap for an even list rhythm. */}
 		<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>
+			<ListBox className="flex max-h-64 flex-col gap-0.5 overflow-auto overscroll-contain p-1 outline-none">
+				{children}
+			</ListBox>
 		</Popover>
 	</RACSelect>
 )

package/src/components/slider.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import {
+	Label,
+	Slider as RACSlider,
+	type SliderProps as RACSliderProps,
+	SliderOutput,
+	SliderThumb,
+	SliderTrack,
+} from 'react-aria-components'
+
+/**
+ * Slider — a draggable value selector (single value or a range when `value`/
+ * `defaultValue` is a two-number array). Built on React Aria Components `Slider`
+ * (keyboard support, RTL, ARIA). The filled portion is brand-green.
+ */
+export type SliderProps<T extends number | number[]> = RACSliderProps<T> & {
+	/** Visible label (required for accessibility). */
+	label: ReactNode
+	/** Hide the numeric readout next to the label. */
+	hideOutput?: boolean
+}
+
+export const Slider = <T extends number | number[]>({ label, hideOutput, ...props }: SliderProps<T>) => (
+	<RACSlider {...props} className="flex flex-col gap-2 data-[disabled]:opacity-50">
+		<div className="flex items-baseline justify-between gap-4">
+			<Label className="text-heading5 font-medium text-fg">{label}</Label>
+			{hideOutput ? null : <SliderOutput className="text-sm tabular-nums text-fg-muted" />}
+		</div>
+		<SliderTrack className="relative flex h-6 w-full items-center">
+			{({ state }) => {
+				const start = state.values.length > 1 ? state.getThumbPercent(0) : 0
+				const end = state.getThumbPercent(state.values.length - 1)
+				return (
+					<>
+						<div className="h-1.5 w-full rounded-full bg-surface-muted" />
+						<div
+							className="absolute h-1.5 rounded-full bg-brand-green"
+							style={{ left: `${start * 100}%`, width: `${(end - start) * 100}%` }}
+						/>
+						{state.values.map((_, i) => (
+							<SliderThumb
+								// biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional and fixed-count
+								key={i}
+								index={i}
+								className="h-4 w-4 rounded-full border-2 border-fg bg-surface outline-none transition-transform data-[dragging]:scale-110 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+							/>
+						))}
+					</>
+				)
+			}}
+		</SliderTrack>
+	</RACSlider>
+)

package/src/components/tag-group.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import {
+	Button as RACButton,
+	Label,
+	Tag as RACTag,
+	type TagProps as RACTagProps,
+	TagGroup as RACTagGroup,
+	type TagGroupProps as RACTagGroupProps,
+	TagList,
+	Text,
+} from 'react-aria-components'
+
+/**
+ * TagGroup + Tag — a set of chips (labels, filters, or a removable tag input).
+ * Built on React Aria Components `TagGroup` (roving focus, optional selection,
+ * removal via `onRemove` + a per-tag ✕). Pass `Tag`s as `TagList` children.
+ */
+export type TagGroupProps = Omit<RACTagGroupProps, 'children'> & {
+	label?: ReactNode
+	description?: ReactNode
+	children: ReactNode
+}
+
+export const TagGroup = ({ label, description, children, ...props }: TagGroupProps) => (
+	<RACTagGroup {...props} className="flex flex-col gap-2">
+		{label ? <Label className="text-heading5 font-medium text-fg">{label}</Label> : null}
+		<TagList className="flex flex-wrap gap-2 outline-none">{children}</TagList>
+		{description ? (
+			<Text slot="description" className="text-xs text-fg-muted">
+				{description}
+			</Text>
+		) : null}
+	</RACTagGroup>
+)
+
+export const Tag = ({ children, textValue, ...props }: RACTagProps) => (
+	<RACTag
+		{...props}
+		// We wrap children in a render fn (for the remove button), so RAC can't infer
+		// the tag's text — derive it from a string child for accessibility.
+		textValue={textValue ?? (typeof children === 'string' ? children : undefined)}
+		className={
+			'inline-flex cursor-default select-none items-center gap-1.5 rounded-full border border-border bg-surface-card px-3 py-1 text-sm text-fg outline-none transition-colors ' +
+			'data-[hovered]:border-fg-subtle ' +
+			'data-[selected]:border-fg data-[selected]:bg-surface-muted ' +
+			'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
+			'data-[disabled]:opacity-50'
+		}
+	>
+		{({ allowsRemoving }) => (
+			<>
+				{children as ReactNode}
+				{allowsRemoving ? (
+					<RACButton
+						slot="remove"
+						className="-mr-1 flex h-4 w-4 items-center justify-center rounded-full text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring"
+					>
+						<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" aria-hidden="true">
+							<path d="M6 6l12 12M18 6 6 18" />
+						</svg>
+					</RACButton>
+				) : null}
+			</>
+		)}
+	</RACTag>
+)

package/src/index.ts

@@ -12,12 +12,20 @@ export { uic, uiconfig, type ConfigVariants, type NoInfer } from "./utils/uic";
 export * from "./components/button";
 export * from "./components/input";
 export * from "./components/textarea";
+export * from "./components/rich-text-editor";
 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/number-field";
+export * from "./components/search-field";
+export * from "./components/slider";
+export * from "./components/tag-group";
+export * from "./components/file-upload";
+export * from "./components/date-field";
+export * from "./components/date-picker";
 export * from "./components/dialog";
 export * from "./components/dropdown-menu";
 export * from "./components/context-menu";