@podoba/react 0.0.34 → 0.0.36

package/src/components/csv-binding-presentation.examples.tsx

@@ -0,0 +1,14 @@
+import { CsvActionButton, CsvMappingSelect, CsvPreviewTable } from './csv-binding-presentation'
+import { SelectItem } from './select'
+
+const headers = ['Headline', 'City']
+const rows = [{ Headline: 'Annual report', City: 'Prague' }]
+const choice = <CsvMappingSelect label="Headline" placeholder="Not bound" defaultSelectedKey="headline">
+	<SelectItem id="headline">Headline (headline)</SelectItem>
+</CsvMappingSelect>
+export const examples = {
+	default: () => <CsvPreviewTable headers={headers} rows={rows} label="CSV preview" emptyMessage="No preview rows available." />,
+	mapping: () => <CsvPreviewTable headers={headers} rows={rows} mapping={[choice, 'Not bound']} label="CSV mapping" emptyMessage="No columns available for mapping." />,
+	states: () => <><CsvActionButton>Review Mapping</CsvActionButton><CsvActionButton isDisabled>Bind CSV</CsvActionButton></>,
+}
+export const meta = { category: 'Form', description: 'Source CSV worksheet, hidden-label mapping select and footer action typography; preview rows do not sort or hover.' }

package/src/components/csv-binding-presentation.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { uic } from '../utils/uic'
+import { Table } from './table'
+import { Select, type SelectProps } from './select'
+import { DialogActionButton } from './dialog-action-button'
+
+const PreviewScroll = uic('div', { displayName: 'CsvPreviewScroll', baseClass: 'w-full min-w-0 overflow-x-auto' })
+
+/** CSV preview has one header per original column; a mapping row precedes data. */
+export function CsvPreviewTable({ headers, rows, mapping, label, emptyMessage, ...rest }: {
+	headers: string[]
+	rows: Readonly<Record<string, string>>[]
+	mapping?: ReactNode[]
+	label: string
+	emptyMessage: string
+	'data-testid'?: string
+}) {
+	const [compact, setCompact] = useState(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches)
+	useEffect(() => {
+		const media = window.matchMedia('(max-width: 900px)')
+		const update = () => setCompact(media.matches)
+		update()
+		media.addEventListener('change', update)
+		return () => media.removeEventListener('change', update)
+	}, [])
+	const data: ReactNode[][] = rows.map(row => headers.map(header => row[header] ?? ''))
+	if (mapping) data.unshift(mapping)
+	return <PreviewScroll {...rest}>
+		<Table<ReactNode[]> appearance="worksheet" className={compact ? 'min-w-168' : 'min-w-256'}
+			aria-label={label} emptyMessage={emptyMessage} data={data}
+			columns={headers.map((header, index) => ({ key: String(index), header, render: row => row[index] }))} />
+	</PreviewScroll>
+}
+
+export function CsvMappingSelect<T extends object>(props: SelectProps<T>) {
+	return <Select {...props} appearance="filled" isLabelHidden rootClassName="w-full min-w-48" />
+}
+
+/** Original UI Button md (16/20 medium, 12x24 padding), without global button changes. */
+export const CsvActionButton = DialogActionButton

package/src/components/dashboard-grid.tsx

@@ -34,7 +34,7 @@ export type DashboardGridProps = {
 
 export function DashboardGrid({ children, className }: DashboardGridProps) {
 	return (
-		<div className={['grid grid-cols-12 gap-4', className].filter(Boolean).join(' ')}>{children}</div>
+		<div className={['grid grid-cols-12 gap-3', className].filter(Boolean).join(' ')}>{children}</div>
 	)
 }
 

package/src/components/date-picker.tsx

@@ -42,9 +42,11 @@ const Chevron = ({ dir }: { dir: 'left' | 'right' }) => (
 
 const calendarCellClass =
 	'flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-small text-fg outline-none transition-colors ' +
-	'data-[outside-month]:text-fg-subtle data-[hovered]:bg-surface-muted ' +
+	// #25: out-of-month and unavailable days stay de-emphasised, but they are dates a
+	// user reads and (outside-month) can click — `fg-muted`, not the 2.10:1 decorative grey.
+	'data-[outside-month]:text-fg-muted 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-[unavailable]:text-fg-muted data-[unavailable]:line-through ' +
 	'data-[disabled]:opacity-40 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring'
 
 function CalendarBody() {
@@ -62,7 +64,7 @@ function CalendarBody() {
 			<CalendarGrid className="w-full border-collapse">
 				<CalendarGridHeader>
 					{(day) => (
-						<CalendarHeaderCell className="pb-1 text-micro font-medium uppercase tracking-wide text-fg-subtle">
+						<CalendarHeaderCell className="pb-1 text-micro font-medium uppercase tracking-wide text-fg-muted">
 							{day}
 						</CalendarHeaderCell>
 					)}

package/src/components/date-selection-calendar.examples.tsx

@@ -0,0 +1,8 @@
+import { DateSelectionCalendar } from './date-selection-calendar'
+const props = { monthLabel: 'September 2026', weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], previousLabel: 'Previous month', nextLabel: 'Next month', onPrevious: () => {}, onNext: () => {}, onSelect: () => {}, weeks: [[null, ...Array.from({ length: 6 }, (_, i) => ({ id: String(i + 1), label: String(i + 1), accessibleLabel: 'September ' + (i + 1) + ', 2026', selected: i === 2, today: i === 4 }))]] }
+export const examples = {
+ default: () => <DateSelectionCalendar {...props} />,
+ emptySelection: () => <DateSelectionCalendar {...props} weeks={props.weeks.map(week => week.map(day => day ? { ...day, selected: false } : null))} />,
+ states: () => <DateSelectionCalendar {...props} isDisabled />,
+}
+export const meta = { category: 'Form', description: 'Month navigation and date cells with selected, today, disabled and keyboard focus states.' }

package/src/components/date-selection-calendar.tsx

@@ -0,0 +1,47 @@
+import { Button as AriaButton } from 'react-aria-components'
+import { uic } from '../utils/uic'
+
+export const CalendarDialogContent = uic('div', { displayName: 'CalendarDialogContent', baseClass: 'flex flex-col gap-8' })
+export const CalendarDateHint = uic('p', { displayName: 'CalendarDateHint', baseClass: 'm-0 min-h-9 text-small font-normal text-fg-workflow-muted', style: { maxWidth: '48ch' } })
+const Frame = uic('div', { displayName: 'DateSelectionCalendar', baseClass: 'mt-6 overflow-hidden border border-border bg-surface' })
+const Header = uic('div', { displayName: 'DateSelectionCalendarHeader', baseClass: 'flex min-h-15 items-center border-b border-border px-5' })
+const Navigation = uic(AriaButton, { displayName: 'DateSelectionCalendarNavigation', baseClass: 'mx-1.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-sm bg-transparent text-2xl font-normal leading-none text-fg outline-none data-[hovered]:bg-surface-card data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring' })
+const Month = uic('div', { displayName: 'DateSelectionCalendarMonth', baseClass: 'flex-1 text-center text-small font-normal text-fg' })
+const Week = uic('div', { displayName: 'DateSelectionCalendarWeek', baseClass: 'grid grid-cols-7 border-b border-border last:border-b-0' })
+const Weekday = uic('div', { displayName: 'DateSelectionCalendarWeekday', baseClass: 'border-e border-border px-3 pb-2 pt-4 text-center font-mono text-small font-normal tracking-normal text-fg-workflow-muted last:border-e-0' })
+const Day = uic(AriaButton, { displayName: 'DateSelectionCalendarDay', baseClass: 'inline-flex min-h-16 w-full items-center justify-center rounded-none border-e border-border bg-transparent text-small font-normal text-fg outline-none last:border-e-0 data-[hovered]:bg-surface-card data-[focus-visible]:ring-2 data-[focus-visible]:ring-inset data-[focus-visible]:ring-ring data-[disabled]:cursor-not-allowed' })
+const Placeholder = uic('div', { displayName: 'DateSelectionCalendarPlaceholder', baseClass: 'min-h-16 border-e border-border last:border-e-0' })
+
+export interface DateSelectionCell {
+ id: string
+ label: string
+ accessibleLabel: string
+ selected: boolean
+ today: boolean
+}
+export function DateSelectionCalendar({ monthLabel, weekdays, weeks, previousLabel, nextLabel, onPrevious, onNext, onSelect, isDisabled = false, autoFocus = false }: {
+ monthLabel: string
+ weekdays: string[]
+ weeks: Array<Array<DateSelectionCell | null>>
+ previousLabel: string
+ nextLabel: string
+ onPrevious: () => void
+ onNext: () => void
+ onSelect: (id: string) => void
+ isDisabled?: boolean
+ autoFocus?: boolean
+}) {
+ return <Frame>
+  <Header>
+   <Navigation aria-label={previousLabel} onPress={onPrevious} isDisabled={isDisabled} autoFocus={autoFocus}>‹</Navigation>
+   <Month aria-live="polite">{monthLabel}</Month>
+   <Navigation aria-label={nextLabel} onPress={onNext} isDisabled={isDisabled}>›</Navigation>
+  </Header>
+  <Week>{weekdays.map((label, index) => <Weekday key={index}>{label}</Weekday>)}</Week>
+  {weeks.map((week, index) => <Week key={index}>{week.map((day, column) => day
+   ? <Day key={day.id} aria-label={day.accessibleLabel} aria-pressed={day.selected} aria-current={day.today ? 'date' : undefined} isDisabled={isDisabled} onPress={() => onSelect(day.id)}
+      style={day.selected ? { boxShadow: 'inset 0 calc(var(--spacing) * -0.5) 0 var(--color-brand-green)' } : undefined}
+      className={day.selected ? 'bg-surface-card' : day.today ? 'bg-brand-green/14 ring-1 ring-inset ring-brand-green data-[hovered]:bg-brand-green/18' : undefined}>{day.label}</Day>
+   : <Placeholder key={`blank-${column}`} />)}</Week>)}
+ </Frame>
+}

package/src/components/delivery/send-to-print-modal.tsx

@@ -21,9 +21,9 @@
 // field is aria-invalid when invalid; the server error is role="alert"; confirm
 // shows a pending state and disables while in flight / invalid.
 
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useState } from 'react'
 import { Button } from '../button'
-import { Dialog } from '../dialog'
+import { ModalDialog, ModalOverlay, ModalSurface } from '../dialog'
 import { Input } from '../input'
 
 /** The validated print spec the modal yields on confirm. */
@@ -36,6 +36,20 @@ export interface PrintSpec {
 	quantity: number
 	/** Delivery address — non-blank. */
 	address: string
+	/** Company / recipient. */
+	company?: string
+	/** Street address. */
+	street?: string
+	/** City. */
+	city?: string
+	/** ZIP / postcode. */
+	zip?: string
+	/** Contact person. */
+	contactName?: string
+	/** Contact phone. */
+	phone?: string
+	/** Optional print-production note. */
+	note?: string
 }
 
 /** Strings the send-to-print modal renders — supplied by the app (i18n). */
@@ -50,6 +64,7 @@ export interface SendToPrintModalLabels {
 	/** Material field label + placeholder. */
 	materialLabel: string
 	materialPlaceholder: string
+	materialDefault?: string
 	/** Quantity field label + placeholder. */
 	quantityLabel: string
 	quantityPlaceholder: string
@@ -64,6 +79,34 @@ export interface SendToPrintModalLabels {
 	confirm: string
 	/** Confirm button — pending state. */
 	submitting: string
+	/** Optional old-Manager section label. */
+	sectionLabel?: string
+	outputName?: string
+	outputDescription?: string
+	/** Optional no-material message. */
+	noMaterialConfigured?: string
+	companyLabel?: string
+	companyPlaceholder?: string
+	streetLabel?: string
+	streetPlaceholder?: string
+	cityLabel?: string
+	cityPlaceholder?: string
+	zipLabel?: string
+	zipPlaceholder?: string
+	contactNameLabel?: string
+	contactNamePlaceholder?: string
+	phoneLabel?: string
+	phonePlaceholder?: string
+	noteLabel?: string
+	notePlaceholder?: string
+	priceEyebrow?: string
+	priceIdle?: string
+	closeLabel?: string
+}
+
+export interface PrintMaterialOption {
+	id: string
+	label: string
 }
 
 export interface SendToPrintModalProps {
@@ -79,6 +122,16 @@ export interface SendToPrintModalProps {
 	error?: string
 	/** App-supplied i18n strings. */
 	labels: SendToPrintModalLabels
+	/** Output title shown in the old Manager print-order summary card. */
+	outputName?: string
+	/** Output dimension / format line shown in the old Manager print-order summary card. */
+	outputDescription?: string
+	/** Available print materials. Empty means the old Manager disabled the order action. */
+	materialOptions?: PrintMaterialOption[]
+	/** Initial quantity. Old Manager opens print with a production-like quantity instead of blank. */
+	initialQuantity?: number
+	/** Modal family. Dashboard Workspace print orders use the old wider source panel. */
+	surfaceVariant?: 'standard' | 'dashboard'
 	/** Optional test id forwarded to the dialog. */
 	'data-testid'?: string
 }
@@ -92,6 +145,12 @@ function parseQuantity(raw: string): number | null {
 	return value
 }
 
+function capitalizeFirstAddressLetter(value: string): string {
+	const index = value.search(/\p{L}/u)
+	if (index < 0) return value
+	return `${value.slice(0, index)}${value.charAt(index).toUpperCase()}${value.slice(index + 1)}`
+}
+
 /** Send-to-print modal with validated size / material / quantity / address. */
 export function SendToPrintModal({
 	isOpen,
@@ -100,31 +159,69 @@ export function SendToPrintModal({
 	isPending = false,
 	error,
 	labels,
+	outputName,
+	outputDescription,
+	materialOptions = [],
+	initialQuantity = 500,
+	surfaceVariant = 'standard',
 	'data-testid': testId,
 }: SendToPrintModalProps): React.ReactNode {
-	const [size, setSize] = useState('')
-	const [material, setMaterial] = useState('')
-	const [quantityRaw, setQuantityRaw] = useState('')
-	const [address, setAddress] = useState('')
+	const titleId = useId()
+	const descriptionId = useId()
+	// `materialOptions` is normally fetched, so it is [] on mount. Seeding useState
+	// from it captures that empty first render forever; deriving the fallback each
+	// render selects the first option as soon as the list arrives. '' means
+	// "untouched", not "nothing selected".
+	const [materialId, setMaterialId] = useState('')
+	const [sizeRaw, setSizeRaw] = useState('')
+	const [quantityRaw, setQuantityRaw] = useState(String(initialQuantity))
+	const [company, setCompany] = useState('')
+	const [street, setStreet] = useState('')
+	const [city, setCity] = useState('')
+	const [zip, setZip] = useState('')
+	const [contactName, setContactName] = useState('')
+	const [phone, setPhone] = useState('')
+	const [note, setNote] = useState('')
 
 	const quantity = useMemo(() => parseQuantity(quantityRaw), [quantityRaw])
+	const effectiveMaterialId = materialId || (materialOptions[0]?.id ?? '')
+	const selectedMaterial = useMemo(
+		() => materialOptions.find((option) => option.id === effectiveMaterialId) ?? null,
+		[effectiveMaterialId, materialOptions],
+	)
+	// `size` is the caller's output description when it supplies one, and a collected
+	// field otherwise — the documented `print_specs` rule is that it is non-blank, and
+	// `outputDescription` is optional, so it cannot be the only source.
+	const derivedSize = outputDescription?.trim() ?? ''
+	const size = derivedSize || sizeRaw.trim()
 	// Surface the quantity error only once the user has typed something invalid
 	// (not on the initial blank state — that would scream before any input).
 	const quantityInvalid = quantityRaw.trim().length > 0 && quantity === null
 
 	const reset = (): void => {
-		setSize('')
-		setMaterial('')
-		setQuantityRaw('')
-		setAddress('')
+		setMaterialId('')
+		setSizeRaw('')
+		setQuantityRaw(String(initialQuantity))
+		setCompany('')
+		setStreet('')
+		setCity('')
+		setZip('')
+		setContactName('')
+		setPhone('')
+		setNote('')
 	}
 
 	const canConfirm =
 		!isPending &&
-		size.trim().length > 0 &&
-		material.trim().length > 0 &&
+		size.length > 0 &&
 		quantity !== null &&
-		address.trim().length > 0
+		selectedMaterial !== null &&
+		company.trim().length > 0 &&
+		street.trim().length > 0 &&
+		city.trim().length > 0 &&
+		zip.trim().length > 0 &&
+		contactName.trim().length > 0 &&
+		phone.trim().length > 0
 
 	const handleOpenChange = (open: boolean): void => {
 		if (!open) reset()
@@ -132,85 +229,255 @@ export function SendToPrintModal({
 	}
 
 	const handleConfirm = (): void => {
-		if (!canConfirm || quantity === null) return
+		if (!canConfirm || quantity === null || selectedMaterial === null) return
+		const address = [company, street, `${zip} ${city}`, contactName, phone]
+			.map((part) => part.trim())
+			.filter(Boolean)
+			.join(', ')
 		onConfirm({
-			size: size.trim(),
-			material: material.trim(),
+			size,
+			material: selectedMaterial.label.trim(),
 			quantity,
-			address: address.trim(),
+			address,
+			company: company.trim(),
+			street: street.trim(),
+			city: city.trim(),
+			zip: zip.trim(),
+			contactName: contactName.trim(),
+			phone: phone.trim(),
+			note: note.trim(),
 		})
 	}
 
+	const surfaceClassName = surfaceVariant === 'dashboard'
+		? 'box-border flex h-[min(90vh,72rem)] max-h-[min(90vh,72rem)] w-[min(50vw,72rem)] max-w-[min(50vw,72rem)] flex-col overflow-hidden p-0 max-[900px]:h-[90vh] max-[900px]:w-[92vw] max-[900px]:max-w-[92vw]'
+		: 'box-border flex h-[min(90vh,72rem)] max-h-[min(90vh,72rem)] w-[min(90vw,51rem)] max-w-[min(90vw,51rem)] flex-col overflow-hidden p-0 max-[900px]:h-[90vh] max-[900px]:w-[92vw] max-[900px]:max-w-[92vw]'
+
 	return (
-		<Dialog
-			title={labels.title}
-			data-testid={testId ?? 'delivery-print-modal'}
+		<ModalOverlay
 			isOpen={isOpen}
 			onOpenChange={handleOpenChange}
+			isDismissable
 		>
-			<div className="flex flex-col gap-3">
-				<p className="text-small text-fg-muted">{labels.body}</p>
-
-				<Input
-					label={labels.sizeLabel}
-					placeholder={labels.sizePlaceholder}
-					value={size}
-					onChange={setSize}
-					data-testid="delivery-print-size"
-				/>
-				<Input
-					label={labels.materialLabel}
-					placeholder={labels.materialPlaceholder}
-					value={material}
-					onChange={setMaterial}
-					data-testid="delivery-print-material"
-				/>
-				<Input
-					label={labels.quantityLabel}
-					placeholder={labels.quantityPlaceholder}
-					value={quantityRaw}
-					onChange={setQuantityRaw}
-					type="number"
-					inputMode="numeric"
-					isInvalid={quantityInvalid}
-					errorMessage={quantityInvalid ? labels.quantityError : undefined}
-					data-testid="delivery-print-quantity"
-				/>
-				<Input
-					label={labels.addressLabel}
-					placeholder={labels.addressPlaceholder}
-					value={address}
-					onChange={setAddress}
-					data-testid="delivery-print-address"
-				/>
-
-				{error ? (
-					<p data-testid="delivery-print-error" role="alert" className="text-small text-danger">
-						{error}
-					</p>
-				) : null}
-
-				<div className="mt-2 flex justify-end gap-2">
-					<Button
-						variant="secondary"
-						size="sm"
-						isDisabled={isPending}
-						onPress={() => handleOpenChange(false)}
-					>
-						{labels.cancel}
-					</Button>
-					<Button
-						data-testid="delivery-print-confirm"
-						variant="primary"
-						size="sm"
-						isDisabled={!canConfirm}
-						isPending={isPending}
-						onPress={handleConfirm}
-					>
-						{isPending ? labels.submitting : labels.confirm}
-					</Button>
-				</div>
-			</div>
-		</Dialog>
+			<ModalSurface className={surfaceClassName}>
+				<ModalDialog
+					aria-labelledby={titleId}
+					aria-describedby={descriptionId}
+					data-testid={testId ?? 'delivery-print-modal'}
+					className="flex min-h-0 flex-1 flex-col outline-none"
+				>
+					{({ close }) => (
+						<form
+							className="flex min-h-0 flex-1 flex-col gap-6 py-10"
+							onSubmit={(event) => {
+								event.preventDefault()
+								handleConfirm()
+							}}
+							noValidate
+						>
+							<div className="mx-auto box-border w-full max-w-[50rem] px-5">
+								<div className="flex items-start justify-between gap-4">
+									<h2 id={titleId} className="m-0 max-w-[19ch] text-heading1 font-medium leading-[1.02] tracking-tight text-fg">
+										{labels.title}
+									</h2>
+									<button
+										type="button"
+										onClick={close}
+										aria-label={labels.closeLabel ?? 'Close'}
+										className="-mr-1 -mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-subtle outline-none transition-colors hover:bg-surface-muted hover:text-fg focus-visible:ring-2 focus-visible:ring-ring"
+									>
+										<svg
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth="2"
+											strokeLinecap="round"
+											aria-hidden="true"
+										>
+											<path d="M6 6l12 12M18 6 6 18" />
+										</svg>
+									</button>
+								</div>
+							</div>
+
+							<div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+								<div className="mx-auto box-border flex w-full max-w-[50rem] flex-col gap-6 px-5">
+									<div className="flex flex-col gap-1">
+										<p className="m-0 text-body font-medium text-fg">
+											{labels.sectionLabel ?? labels.title}
+										</p>
+										<p id={descriptionId} className="m-0 max-w-[48ch] text-body font-normal text-fg">
+											{labels.body}
+										</p>
+									</div>
+
+									<div className="flex flex-col gap-1 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted">
+										<span>{outputName?.trim() || labels.outputName || labels.sizeLabel}</span>
+										{outputDescription?.trim() || labels.outputDescription || labels.sizePlaceholder ? (
+											<strong className="font-medium text-fg">
+												{outputDescription?.trim() || labels.outputDescription || labels.sizePlaceholder}
+											</strong>
+										) : null}
+									</div>
+
+									<div className="grid gap-3">
+										{derivedSize ? null : (
+											<Input
+												label={labels.sizeLabel}
+												placeholder={labels.sizePlaceholder}
+												value={sizeRaw}
+												onChange={setSizeRaw}
+												data-testid="delivery-print-size"
+											/>
+										)}
+
+										<Input
+											label={labels.quantityLabel}
+											placeholder={labels.quantityPlaceholder}
+											value={quantityRaw}
+											onChange={setQuantityRaw}
+											type="number"
+											inputMode="numeric"
+											isInvalid={quantityInvalid}
+											errorMessage={quantityInvalid ? labels.quantityError : undefined}
+											data-testid="delivery-print-quantity"
+										/>
+
+										{materialOptions.length > 1 ? (
+											<label className="grid gap-1.5 text-small font-medium text-fg">
+												<span>{labels.materialLabel}</span>
+												<select
+													value={effectiveMaterialId}
+													onChange={(event) => setMaterialId(event.currentTarget.value)}
+													data-testid="delivery-print-material"
+													className="h-12 rounded-md border border-border bg-surface px-3 text-body font-normal text-fg outline-none transition-colors hover:border-border-muted focus:border-fg focus:ring-2 focus:ring-ring"
+												>
+													{materialOptions.map((option) => (
+														<option key={option.id} value={option.id}>
+															{option.label}
+														</option>
+													))}
+												</select>
+											</label>
+										) : selectedMaterial ? (
+											<div
+												data-testid="delivery-print-material"
+												className="flex flex-col gap-1 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted"
+											>
+												<span>{labels.materialLabel}</span>
+												<strong className="font-medium text-fg">{selectedMaterial.label}</strong>
+											</div>
+										) : (
+											<p
+												role="note"
+												data-testid="delivery-print-material"
+												className="m-0 rounded-md bg-surface-card p-3 text-caption leading-4 text-fg-muted"
+											>
+												{labels.noMaterialConfigured ?? labels.materialPlaceholder}
+											</p>
+										)}
+
+										<Input
+											label={labels.companyLabel ?? labels.addressLabel}
+											placeholder={labels.companyPlaceholder ?? labels.addressPlaceholder}
+											value={company}
+											onChange={setCompany}
+											data-testid="delivery-print-company"
+										/>
+										<Input
+											label={labels.streetLabel ?? labels.addressLabel}
+											placeholder={labels.streetPlaceholder ?? labels.addressPlaceholder}
+											value={street}
+											onChange={(value) => setStreet(capitalizeFirstAddressLetter(value))}
+											data-testid="delivery-print-street"
+										/>
+										<div className="grid gap-4 sm:grid-cols-[1fr_10rem]">
+											<Input
+												label={labels.cityLabel ?? labels.addressLabel}
+												placeholder={labels.cityPlaceholder ?? labels.addressPlaceholder}
+												value={city}
+												onChange={setCity}
+												data-testid="delivery-print-city"
+											/>
+											<Input
+												label={labels.zipLabel ?? labels.addressLabel}
+												placeholder={labels.zipPlaceholder ?? labels.addressPlaceholder}
+												value={zip}
+												onChange={setZip}
+												data-testid="delivery-print-zip"
+											/>
+										</div>
+										<div className="grid gap-4 sm:grid-cols-2">
+											<Input
+												label={labels.contactNameLabel ?? labels.addressLabel}
+												placeholder={labels.contactNamePlaceholder ?? labels.addressPlaceholder}
+												value={contactName}
+												onChange={setContactName}
+												data-testid="delivery-print-contact"
+											/>
+											<Input
+												label={labels.phoneLabel ?? labels.addressLabel}
+												placeholder={labels.phonePlaceholder ?? labels.addressPlaceholder}
+												value={phone}
+												onChange={setPhone}
+												type="tel"
+												data-testid="delivery-print-phone"
+											/>
+										</div>
+										<Input
+											label={labels.noteLabel ?? labels.addressLabel}
+											placeholder={labels.notePlaceholder ?? labels.addressPlaceholder}
+											value={note}
+											onChange={setNote}
+											data-testid="delivery-print-note"
+										/>
+									</div>
+
+									{error ? (
+										<p data-testid="delivery-print-error" role="alert" className="m-0 text-small text-danger">
+											{error}
+										</p>
+									) : null}
+								</div>
+							</div>
+
+							<div className="sticky bottom-0 mt-0 w-full border-border border-t bg-surface pt-4">
+								<div className="mx-auto box-border flex w-full max-w-[50rem] items-center justify-between gap-4 px-5">
+									<div className="flex min-w-0 flex-col gap-1 text-small text-fg-muted">
+										{/* No fallback: borrowing `sizeLabel` / `materialPlaceholder` put
+										    "Size" and "e.g. Matte 250g" in a money slot for every consumer
+										    that had not adopted the new label set. */}
+										{labels.priceEyebrow ? <span>{labels.priceEyebrow}</span> : null}
+										{labels.priceIdle ? <span className="truncate">{labels.priceIdle}</span> : null}
+									</div>
+									<div className="flex shrink-0 justify-end gap-2">
+										<Button
+											variant="secondary"
+											size="sm"
+											isDisabled={isPending}
+											onPress={() => handleOpenChange(false)}
+										>
+											{labels.cancel}
+										</Button>
+										<Button
+											data-testid="delivery-print-confirm"
+											variant="primary"
+											size="sm"
+											isDisabled={!canConfirm}
+											isPending={isPending}
+											onPress={handleConfirm}
+										>
+											{isPending ? labels.submitting : labels.confirm}
+										</Button>
+									</div>
+								</div>
+							</div>
+						</form>
+					)}
+				</ModalDialog>
+			</ModalSurface>
+		</ModalOverlay>
 	)
 }