@podoba/react 0.0.32 → 0.0.35

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/cta-pill.tsx

@@ -5,8 +5,11 @@ import type { ReactNode } from 'react'
  * something" (the middle word emphasised) with an action control on the right.
  *
  * The copy is three fragments (`lead` · `emphasis` · `tail`) so a consumer can
- * translate each per-locale while keeping the middle-word highlight. Presentational
- * only (hard rule #1): every string arrives via props — no i18n, no domain data.
+ * translate each per-locale while keeping the middle-word highlight. With
+ * `mobileHeader`, it adopts the source ExpandableCTA's 99px mobile touch surface;
+ * `BrandPageHeader` owns the safe-bottom positioning and returns it to the one-third
+ * desktop grid at the `md` breakpoint. Presentational only (hard rule #1): every
+ * string arrives via props — no i18n, no domain data.
  *
  * a11y NOTE: the background is the FIXED light brand-secondary (#6eddb1) — it does
  * not flip with the theme, so every sentence fragment sits on `fg-on-brand` (stable
@@ -23,11 +26,23 @@ export interface CtaPillProps {
 	tail: ReactNode
 	/** Right-side action control (e.g. a Create button). */
 	children: ReactNode
+	/**
+	 * Use the source mobile header density (99px minimum height and doubled
+	 * horizontal content padding). Positioning stays with `BrandPageHeader`.
+	 */
+	mobileHeader?: boolean
 }
 
-export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
+export function CtaPill({ lead, emphasis, tail, children, mobileHeader = false }: CtaPillProps) {
 	return (
-		<div className="flex h-full min-h-16 w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green py-2.5 pr-3 pl-4.5">
+		<div
+			className={[
+				'flex h-full w-full items-center justify-between gap-nav-x rounded-lg bg-brand-green',
+				mobileHeader
+					? 'min-h-mobile-cta px-12 py-5 shadow-mobile-cta md:min-h-16 md:py-2.5 md:pr-3 md:pl-4.5 md:shadow-none'
+					: 'min-h-16 py-2.5 pr-3 pl-4.5',
+			].join(' ')}
+		>
 			<p className="min-w-0 text-heading4 font-medium leading-5 tracking-tight text-fg-on-brand">
 				{lead} <span className="font-semibold">{emphasis}</span> {tail}
 			</p>

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>
+}