add ISO 8601 date picker, replace all native date inputs

custom DateInput component using react-day-picker + date-fns with
Calendar popover, always displays YYYY-MM-DD regardless of browser
locale. adds shadcn Popover and Calendar components. replaces all
<input type="date"> across process-stepper, contact-detail, contact-form

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/shared/components/ui/calendar.tsx

@@ -0,0 +1,70 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type { ComponentProps } from "react";
+import { DayPicker } from "react-day-picker";
+import { buttonVariants } from "@/shared/components/ui/button";
+import { cn } from "@/shared/lib/utils";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: ComponentProps<typeof DayPicker>) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row gap-2",
+				month: "flex flex-col gap-4",
+				month_caption: "flex justify-center pt-1 relative items-center h-7",
+				caption_label: "text-sm font-medium",
+				nav: "flex items-center gap-1",
+				button_previous: cn(
+					buttonVariants({ variant: "outline" }),
+					"absolute left-1 top-0 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				button_next: cn(
+					buttonVariants({ variant: "outline" }),
+					"absolute right-1 top-0 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				month_grid: "w-full border-collapse space-x-1",
+				weekdays: "flex",
+				weekday:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				week: "flex w-full mt-2",
+				day: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50",
+					"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+				),
+				day_button: cn(
+					buttonVariants({ variant: "ghost" }),
+					"size-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				range_end: "day-range-end",
+				selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				today: "bg-accent text-accent-foreground",
+				outside:
+					"day-outside text-muted-foreground aria-selected:text-muted-foreground",
+				disabled: "text-muted-foreground opacity-50",
+				range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				Chevron: ({ orientation }) =>
+					orientation === "left" ? (
+						<ChevronLeft className="size-4" />
+					) : (
+						<ChevronRight className="size-4" />
+					),
+			}}
+			weekStartsOn={1}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar };

src/shared/components/ui/date-input.tsx

@@ -0,0 +1,74 @@
+import { format, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { type ComponentProps, useState } from "react";
+import { Button } from "@/shared/components/ui/button";
+import { Calendar } from "@/shared/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { cn } from "@/shared/lib/utils";
+
+interface DateInputProps
+	extends Omit<ComponentProps<"button">, "value" | "onChange"> {
+	value: string;
+	onChange: (iso: string) => void;
+	placeholder?: string;
+}
+
+function toDate(iso: string): Date | undefined {
+	if (!iso) return undefined;
+	const d = parse(iso, "yyyy-MM-dd", new Date());
+	return Number.isNaN(d.getTime()) ? undefined : d;
+}
+
+function toISO(date: Date): string {
+	return format(date, "yyyy-MM-dd");
+}
+
+export function DateInput({
+	value,
+	onChange,
+	placeholder = "YYYY-MM-DD",
+	className,
+	id,
+	...props
+}: DateInputProps) {
+	const [open, setOpen] = useState(false);
+	const selected = toDate(value);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					id={id}
+					type="button"
+					variant="outline"
+					className={cn(
+						"h-9 w-full justify-start px-3 text-left font-normal",
+						!value && "text-muted-foreground",
+						className,
+					)}
+					{...props}
+				>
+					<CalendarIcon className="mr-2 size-4 shrink-0" />
+					{value || placeholder}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" align="start">
+				<Calendar
+					mode="single"
+					selected={selected}
+					onSelect={(day) => {
+						if (day) {
+							onChange(toISO(day));
+							setOpen(false);
+						}
+					}}
+					defaultMonth={selected}
+				/>
+			</PopoverContent>
+		</Popover>
+	);
+}

src/shared/components/ui/popover.tsx

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type ComponentProps, forwardRef } from "react";
+import { cn } from "@/shared/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = forwardRef<
+	HTMLDivElement,
+	ComponentProps<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };