@aurostack/stacks 0.1.0

package/templates/react-monorepo/files/packages/ui/src/components/brand/logo.tsx

@@ -0,0 +1,51 @@
+import { cn } from '../../lib/utils';
+
+/** Acme Corp "in" monogram mark (fills with currentColor). */
+export function LogoMark({ width = 18, className }: { width?: number; className?: string }) {
+	return (
+		<svg width={width} height={(width * 319) / 368} viewBox="0 0 368 319" aria-hidden="true" className={className}>
+			<g transform="translate(0,319) scale(0.1,-0.1)" fill="currentColor" stroke="none">
+				<path d="M20 2865 l0 -305 410 0 410 0 0 305 0 305 -410 0 -410 0 0 -305z" />
+				<path d="M20 1021 c0 -649 3 -1002 10 -1006 5 -3 376 -3 824 1 l814 7 5 166 c5 187 13 221 92 370 127 238 337 445 560 551 147 70 337 115 460 108 l60 -3 2 -590 c2 -324 3 -593 3 -597 0 -5 182 -8 405 -8 l405 0 0 1000 0 1000 -475 0 c-602 0 -716 -12 -980 -101 -439 -148 -809 -447 -1070 -864 -145 -232 -235 -474 -282 -760 -14 -87 -19 260 -14 1018 l4 707 -411 0 -412 0 0 -999z" />
+			</g>
+		</svg>
+	);
+}
+
+const DISC_SIZE = {
+	md: 'size-9 rounded-xl',
+	sm: 'size-8 rounded-[10px]'
+} as const;
+
+/**
+ * The brand mark on its green disc (no wordmark) — the reusable app icon.
+ * Ink-on-green is the approved primary treatment from the logo guidelines
+ * (the earlier yellow-on-ink disc is the superseded legacy mark). The mark is
+ * always ink #0e0f0c on Nerd Green, independent of light/dark theme.
+ */
+export function LogoDisc({ size = 'md', className }: { size?: 'sm' | 'md'; className?: string }) {
+	return (
+		<span
+			className={cn('flex flex-none items-center justify-center bg-primary text-[#0e0f0c]', DISC_SIZE[size], className)}
+		>
+			<LogoMark width={size === 'md' ? 18 : 16} />
+		</span>
+	);
+}
+
+/** Full brand lockup: the mark on its disc plus the "Acme Corp" wordmark. */
+export function Logo({ size = 'md', className }: { size?: 'sm' | 'md'; className?: string }) {
+	return (
+		<span className={cn('inline-flex items-center gap-2.5', className)}>
+			<LogoDisc size={size} />
+			<span
+				className={cn(
+					'font-display font-extrabold leading-none tracking-tight text-foreground',
+					size === 'md' ? 'text-[15px]' : 'text-sm'
+				)}
+			>
+				Acme Corp
+			</span>
+		</span>
+	);
+}

package/templates/react-monorepo/files/packages/ui/src/components/brand/social-icons.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { Link2 } from 'lucide-react';
+
+/**
+ * Brand marks for the platforms in the `socials` table.
+ *
+ * The backend stores an Iconify key (`bxl:twitter-x`), but pulling in Iconify
+ * would add a CDN fetch at runtime and break offline in the PWA, and lucide
+ * dropped brand icons entirely. So these are drawn locally and keyed on the
+ * platform `name`, which is unique in the table and stable.
+ */
+const MARKS: Record<string, string> = {
+	linkedin:
+		'M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z',
+	x: 'M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.67l7.73-8.84L1.25 2.25h6.83l4.71 6.23 5.45-6.23zm-1.16 17.52h1.83L7.08 4.13H5.11l11.97 15.64z',
+	facebook:
+		'M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z',
+	instagram:
+		'M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.66-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z',
+	youtube:
+		'M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.08 0 12 0 12s0 3.92.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.92 24 12 24 12s0-3.92-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z',
+	tiktok:
+		'M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+	whatsapp:
+		'M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35zM12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.9-9.88 2.64 0 5.13 1.03 7 2.9a9.82 9.82 0 0 1 2.9 6.99c0 5.45-4.44 9.88-9.91 9.88zM20.52 3.45A11.81 11.81 0 0 0 12.05 0C5.5 0 .17 5.33.17 11.88c0 2.09.55 4.14 1.59 5.94L.07 24l6.33-1.66a11.86 11.86 0 0 0 5.65 1.44h.01c6.55 0 11.88-5.33 11.88-11.88 0-3.17-1.24-6.15-3.48-8.39z'
+};
+
+/** Look up a mark by platform name; unknown platforms get a generic link glyph. */
+export function socialMark(name: string): ReactNode {
+	const path = MARKS[name.trim().toLowerCase()];
+	if (!path) return <Link2 className="size-4" aria-hidden="true" />;
+	return (
+		<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="size-4">
+			<path d={path} />
+		</svg>
+	);
+}

package/templates/react-monorepo/files/packages/ui/src/components/form/form.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Textarea } from '../ui/textarea';
+import { DatePicker } from '../ui/date-picker';
+import { cn } from '../../lib/utils';
+
+/** Inline field error message (used by the fields below, also usable standalone). */
+function FormError({ className, children }: { className?: string; children: React.ReactNode }) {
+	return (
+		<p role="alert" className={cn('text-sm text-negative', className)}>
+			{children}
+		</p>
+	);
+}
+
+/** Label + control wrapper shared by the form fields. */
+function Field({
+	id,
+	label,
+	hint,
+	error,
+	className,
+	children
+}: {
+	id: string;
+	label?: string;
+	hint?: string;
+	error?: string;
+	className?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className={cn('flex flex-col gap-1.5', className)}>
+			{label ? <Label htmlFor={id}>{label}</Label> : null}
+			{children}
+			{error ? <FormError>{error}</FormError> : hint ? <p className="text-sm text-mute">{hint}</p> : null}
+		</div>
+	);
+}
+
+type FormFieldProps = Omit<React.ComponentProps<typeof Input>, 'name'> & {
+	name: string;
+	label?: string;
+	hint?: string;
+};
+
+/**
+ * Formik-bound labelled input with error display. Must render inside a <Formik>.
+ * The form primitives wrap shadcn parts so a future RHF swap stays contained here.
+ */
+function FormField({ name, label, hint, className, id, ...props }: FormFieldProps) {
+	const [field, meta] = useField(name);
+	const fieldId = id ?? name;
+	const showError = meta.touched && Boolean(meta.error);
+
+	return (
+		<Field id={fieldId} label={label} hint={hint} error={showError ? meta.error : undefined} className={className}>
+			<Input id={fieldId} aria-invalid={showError || undefined} {...field} {...props} />
+		</Field>
+	);
+}
+
+type FormTextareaProps = Omit<React.ComponentProps<typeof Textarea>, 'name'> & {
+	name: string;
+	label?: string;
+	hint?: string;
+};
+
+/** Formik-bound multiline text field. */
+function FormTextarea({ name, label, hint, className, id, ...props }: FormTextareaProps) {
+	const [field, meta] = useField(name);
+	const fieldId = id ?? name;
+	const showError = meta.touched && Boolean(meta.error);
+
+	return (
+		<Field id={fieldId} label={label} hint={hint} error={showError ? meta.error : undefined} className={className}>
+			<Textarea id={fieldId} aria-invalid={showError || undefined} {...field} {...props} />
+		</Field>
+	);
+}
+
+type FormDateFieldProps = {
+	name: string;
+	label?: string;
+	hint?: string;
+	className?: string;
+	id?: string;
+	placeholder?: string;
+};
+
+/**
+ * Formik-bound date field: an input-styled trigger opening a Popover calendar.
+ * Stores `yyyy-MM-dd`.
+ *
+ * The composition lives in `DatePicker` so the Formik-less apps (`admin`,
+ * `landing`) get the same control without a second copy to keep in sync.
+ */
+function FormDateField({ name, label, hint, className, id, placeholder = 'Pick a date' }: FormDateFieldProps) {
+	const [field, meta, helpers] = useField<string>(name);
+	const fieldId = id ?? name;
+	const showError = meta.touched && Boolean(meta.error);
+
+	return (
+		<Field id={fieldId} label={label} hint={hint} error={showError ? meta.error : undefined} className={className}>
+			<DatePicker
+				id={fieldId}
+				value={field.value}
+				placeholder={placeholder}
+				invalid={showError}
+				onChange={(value) => void helpers.setValue(value)}
+				onCommit={() => void helpers.setTouched(true)}
+			/>
+		</Field>
+	);
+}
+
+export { FormField, FormTextarea, FormDateField, FormError };
+export type { FormFieldProps, FormTextareaProps, FormDateFieldProps };

package/templates/react-monorepo/files/packages/ui/src/components/ui/alert.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva('flex items-start gap-2.5 rounded-xl border px-3.5 py-2.5 text-sm font-medium', {
+	variants: {
+		variant: {
+			default: 'border-border bg-secondary text-foreground',
+			destructive: 'border-negative/30 bg-negative/10 text-negative',
+			success: 'border-primary/40 bg-accent text-accent-foreground'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+type AlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants>;
+
+function Alert({ className, variant, role = 'alert', ...props }: AlertProps) {
+	return <div role={role} className={cn(alertVariants({ variant }), className)} {...props} />;
+}
+
+export { Alert, alertVariants };
+export type { AlertProps };

package/templates/react-monorepo/files/packages/ui/src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full font-semibold transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				primary: 'bg-primary text-primary-foreground hover:bg-primary-active',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-muted',
+				outline: 'border border-foreground bg-transparent text-foreground hover:bg-secondary',
+				ghost: 'bg-transparent text-foreground hover:bg-secondary',
+				destructive: 'bg-destructive text-destructive-foreground hover:opacity-90',
+				link: 'text-ink-deep underline-offset-4 hover:underline'
+			},
+			size: {
+				sm: 'h-9 px-4 text-sm',
+				md: 'h-11 px-5 text-base',
+				lg: 'h-12 px-6 text-base',
+				icon: 'size-11 rounded-full'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			size: 'md'
+		}
+	}
+);
+
+type ButtonProps = React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	};
+
+function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+	const Comp = asChild ? Slot : 'button';
+	return <Comp className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/templates/react-monorepo/files/packages/ui/src/components/ui/calendar.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+import { cn } from '../../lib/utils';
+
+/**
+ * Calendar (react-day-picker v9) styled to the Wise design — self-contained, no external CSS.
+ * Defaults to month + year dropdown navigation (spanning ~60 years back) so users can jump to
+ * old dates without clicking through months. Override captionLayout / startMonth / endMonth as needed.
+ */
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = 'dropdown',
+	startMonth,
+	endMonth,
+	...props
+}: React.ComponentProps<typeof DayPicker>) {
+	const currentYear = new Date().getFullYear();
+	const start = startMonth ?? new Date(currentYear - 60, 0);
+	const end = endMonth ?? new Date(currentYear + 1, 11);
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			captionLayout={captionLayout}
+			startMonth={start}
+			endMonth={end}
+			className={cn('p-1', className)}
+			classNames={{
+				root: 'w-fit',
+				months: 'relative flex flex-col gap-4',
+				month: 'flex flex-col gap-3',
+				month_caption: 'flex h-8 items-center justify-center',
+				caption_label:
+					'flex items-center gap-1 px-1 text-sm font-semibold text-foreground [&>svg]:size-3.5 [&>svg]:text-mute',
+				dropdowns: 'flex items-center justify-center gap-1.5',
+				dropdown_root:
+					'relative inline-flex items-center rounded-lg border border-input focus-within:border-foreground focus-within:ring-2 focus-within:ring-ring hover:bg-secondary',
+				dropdown: 'absolute inset-0 cursor-pointer opacity-0',
+				nav: 'absolute inset-x-0 top-0 flex items-center justify-between',
+				button_previous:
+					'inline-flex size-8 items-center justify-center rounded-full text-mute outline-none hover:bg-secondary hover:text-foreground disabled:opacity-40',
+				button_next:
+					'inline-flex size-8 items-center justify-center rounded-full text-mute outline-none hover:bg-secondary hover:text-foreground disabled:opacity-40',
+				month_grid: 'w-full border-collapse',
+				weekdays: 'flex',
+				weekday: 'w-9 text-[11px] font-semibold text-mute',
+				week: 'mt-1 flex w-full',
+				day: 'size-9 p-0 text-center',
+				day_button:
+					'flex size-9 items-center justify-center rounded-full text-sm font-normal text-foreground outline-none hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring aria-selected:bg-foreground aria-selected:text-background aria-selected:hover:bg-foreground',
+				today: 'font-bold text-ink-deep',
+				outside: 'text-mute/50',
+				disabled: 'text-mute/40 opacity-50',
+				hidden: 'invisible',
+				...classNames
+			}}
+			components={{
+				Chevron: ({ orientation, className: chevronClassName }) => {
+					const Icon =
+						orientation === 'left'
+							? ChevronLeft
+							: orientation === 'right'
+								? ChevronRight
+								: orientation === 'up'
+									? ChevronUp
+									: ChevronDown;
+					return <Icon className={cn('size-4', chevronClassName)} />;
+				}
+			}}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar };

package/templates/react-monorepo/files/packages/ui/src/components/ui/card.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+/**
+ * Wise card anatomy: white surface, 24px radius, 24px padding, NO shadow.
+ * Elevation comes from surface contrast (white card on sage), not shadows.
+ */
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn('flex flex-col gap-6 rounded-3xl bg-card p-6 text-card-foreground', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-header" className={cn('flex flex-col gap-1.5', className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('font-display text-2xl font-semibold tracking-tight', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-description" className={cn('text-sm text-mute', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-footer" className={cn('flex items-center gap-3', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/templates/react-monorepo/files/packages/ui/src/components/ui/checkbox.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+/** Native checkbox tinted with the brand accent (matches the Wise auth design). */
+function Checkbox({ className, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<input
+			type="checkbox"
+			data-slot="checkbox"
+			className={cn('size-4 shrink-0 cursor-pointer rounded accent-primary', className)}
+			{...props}
+		/>
+	);
+}
+
+export { Checkbox };

package/templates/react-monorepo/files/packages/ui/src/components/ui/date-picker.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { CalendarIcon } from 'lucide-react';
+import { format, isValid, parseISO } from 'date-fns';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { cn } from '../../lib/utils';
+
+// Calendar (react-day-picker) is heavy — load it only when a date field opens.
+const LazyCalendar = React.lazy(() => import('./calendar').then((module) => ({ default: module.Calendar })));
+
+type DatePickerProps = {
+	/** `yyyy-MM-dd`, or '' for empty — the same wire shape as a native `<input type="date">`. */
+	value: string;
+	onChange: (value: string) => void;
+	id?: string;
+	placeholder?: string;
+	invalid?: boolean;
+	/** Called after a date is picked — `FormDateField` uses it to mark the field touched. */
+	onCommit?: () => void;
+};
+
+/**
+ * Controlled date field: an input-styled trigger opening a Popover calendar.
+ *
+ * Unbound to any form library, so it works in `admin` and `landing` (neither
+ * has Formik). `FormDateField` wraps this for the Formik apps — keep the
+ * composition here only, so the two can't drift.
+ */
+function DatePicker({ value, onChange, id, placeholder = 'Pick a date', invalid, onCommit }: DatePickerProps) {
+	const [open, setOpen] = React.useState(false);
+
+	const parsed = value ? parseISO(value) : undefined;
+	const selected = parsed && isValid(parsed) ? parsed : undefined;
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					id={id}
+					aria-invalid={invalid || undefined}
+					className={cn(
+						'flex h-11 w-full items-center justify-between gap-2 rounded-xl border border-input bg-card px-3.5 text-sm outline-none transition-colors',
+						'focus-visible:border-foreground focus-visible:ring-2 focus-visible:ring-ring',
+						'aria-invalid:border-negative'
+					)}
+				>
+					{selected ? (
+						<span className="text-foreground">{format(selected, 'd MMM yyyy')}</span>
+					) : (
+						<span className="text-mute">{placeholder}</span>
+					)}
+					<CalendarIcon className="size-4 shrink-0 text-mute" />
+				</button>
+			</PopoverTrigger>
+			<PopoverContent align="start">
+				<React.Suspense
+					fallback={<div className="flex h-72 w-64 items-center justify-center text-sm text-mute">Loading…</div>}
+				>
+					<LazyCalendar
+						mode="single"
+						autoFocus
+						selected={selected}
+						onSelect={(date) => {
+							onChange(date ? format(date, 'yyyy-MM-dd') : '');
+							onCommit?.();
+							setOpen(false);
+						}}
+					/>
+				</React.Suspense>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export { DatePicker };
+export type { DatePickerProps };

package/templates/react-monorepo/files/packages/ui/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				'flex h-11 w-full min-w-0 rounded-xl border border-input bg-card px-3.5 py-2 text-base text-foreground transition-colors',
+				'placeholder:text-mute selection:bg-primary selection:text-primary-foreground',
+				'outline-none focus-visible:border-foreground focus-visible:ring-2 focus-visible:ring-ring',
+				'aria-invalid:border-negative aria-invalid:focus-visible:ring-negative/30',
+				'disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };

package/templates/react-monorepo/files/packages/ui/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				'text-sm font-semibold leading-none text-foreground',
+				'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

package/templates/react-monorepo/files/packages/ui/src/components/ui/modal.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../lib/utils';
+
+// Open modals, oldest first — so Escape only closes the topmost when nested.
+const modalStack: symbol[] = [];
+
+type ModalProps = {
+	/** Called on overlay click, Escape, and by the dialog's own close controls. */
+	onClose: () => void;
+	children: ReactNode;
+	/** Accessible label for the dialog. */
+	label?: string;
+	/** Extra classes for the panel — e.g. a wider `sm:max-w-lg`. */
+	className?: string;
+	/** Show the mobile drag-handle grabber (default true). */
+	handle?: boolean;
+	/** Allow closing via overlay click / Escape (default true). */
+	dismissible?: boolean;
+	/** ARIA role — use "alertdialog" for destructive confirms. */
+	role?: 'dialog' | 'alertdialog';
+};
+
+/**
+ * App modal: a **bottom sheet on mobile** (slides up, rounded top, safe-area
+ * aware) and a **centered card on ≥sm**. Rendered in a portal on `document.body`;
+ * closes on overlay click + Escape, locks background scroll while open, and caps
+ * its height with internal scroll. Enter animation only (unmounts instantly on
+ * close, matching the conditional-render pattern callers use).
+ */
+export function Modal({
+	onClose,
+	children,
+	label,
+	className,
+	handle = true,
+	dismissible = true,
+	role = 'dialog'
+}: ModalProps) {
+	const [shown, setShown] = useState(false);
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	// Animate in on mount.
+	useEffect(() => {
+		const raf = requestAnimationFrame(() => setShown(true));
+		return () => cancelAnimationFrame(raf);
+	}, []);
+
+	// Escape to close (topmost only) + lock background scroll while open.
+	useEffect(() => {
+		const id = Symbol('modal');
+		modalStack.push(id);
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape' && dismissible && modalStack[modalStack.length - 1] === id) onClose();
+		};
+		document.addEventListener('keydown', onKey);
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.removeEventListener('keydown', onKey);
+			const index = modalStack.indexOf(id);
+			if (index !== -1) modalStack.splice(index, 1);
+			// Restore the overflow value this modal saw (keeps the lock while a parent stays open).
+			document.body.style.overflow = previousOverflow;
+		};
+	}, [onClose, dismissible]);
+
+	return createPortal(
+		<div className="fixed inset-0 z-60 flex items-end justify-center sm:items-center sm:p-4">
+			<div
+				aria-hidden="true"
+				onClick={dismissible ? onClose : undefined}
+				className={cn('fixed inset-0 bg-scrim transition-opacity duration-200', shown ? 'opacity-100' : 'opacity-0')}
+			/>
+			<div
+				ref={panelRef}
+				role={role}
+				aria-modal="true"
+				aria-label={label}
+				className={cn(
+					'relative flex max-h-[92dvh] w-full flex-col overflow-y-auto bg-card p-6',
+					'rounded-t-3xl pb-[calc(1.5rem+env(safe-area-inset-bottom))] sm:max-w-md sm:rounded-3xl sm:pb-6',
+					'transition duration-200 ease-out',
+					shown ? 'translate-y-0 opacity-100 sm:scale-100' : 'translate-y-full opacity-0 sm:translate-y-0 sm:scale-95',
+					className
+				)}
+			>
+				{handle ? <div className="mx-auto mb-3 h-1 w-9 shrink-0 rounded-full bg-border sm:hidden" /> : null}
+				{children}
+			</div>
+		</div>,
+		document.body
+	);
+}

package/templates/react-monorepo/files/packages/ui/src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+function PopoverContent({
+	className,
+	align = 'start',
+	sideOffset = 6,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'z-80 w-auto rounded-2xl border border-border bg-card p-3 text-foreground shadow-[0_12px_32px_rgba(14,15,12,0.18)] outline-none',
+					className
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };