@aurostack/stacks 0.1.0

package/templates/react-app/files/src/shared/layouts/states/forbidden.tsx

@@ -0,0 +1,14 @@
+import { Button, PageMeta } from '@/shared/ui';
+import { StateScreen } from './state-screen';
+
+/** 403 — authenticated but lacking the required role. */
+export function Forbidden({ homeHref = '/' }: { homeHref?: string }) {
+	return (
+		<StateScreen code="403" title="Not authorized" description="You don't have permission to view this page.">
+			<PageMeta title="Not authorized" robots="noindex" />
+			<Button asChild variant="outline">
+				<a href={homeHref}>Go back</a>
+			</Button>
+		</StateScreen>
+	);
+}

package/templates/react-app/files/src/shared/layouts/states/loading.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from '@/shared/ui';
+
+/** Full-page loading state (route suspense / session bootstrap). */
+export function Loading({ label = 'Loading…' }: { label?: string }) {
+	return (
+		<div className="flex min-h-screen w-full flex-col items-center justify-center gap-3 bg-background text-mute">
+			<Spinner className="size-6" />
+			<span className="text-sm">{label}</span>
+		</div>
+	);
+}

package/templates/react-app/files/src/shared/layouts/states/not-found.tsx

@@ -0,0 +1,21 @@
+import { Button, PageMeta } from '@/shared/ui';
+import { StateScreen } from './state-screen';
+
+/** 404 — no matching route. */
+export function NotFound({ homeHref = '/' }: { homeHref?: string }) {
+	return (
+		<StateScreen
+			code="404"
+			title="Page not found"
+			description="The page you're looking for doesn't exist or has moved."
+		>
+			{/* All four apps route here, so the title comes from the shared layer.
+			    `noindex` because a 404 body served at an arbitrary URL should never
+			    be listed — the landing app is public and does get crawled. */}
+			<PageMeta title="Page not found" robots="noindex" />
+			<Button asChild>
+				<a href={homeHref}>Go home</a>
+			</Button>
+		</StateScreen>
+	);
+}

package/templates/react-app/files/src/shared/layouts/states/page-skeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from '@/shared/ui';
+
+/**
+ * Route-agnostic placeholder for a page's content area: heading, a summary card,
+ * then a card grid.
+ *
+ * Deliberately the *only* generic loading shape in the app, shared by the
+ * authenticated bootstrap (`AppShellSkeleton`) and by route transitions
+ * (`RouteFallback`). Keeping them identical means a reload and a navigation look
+ * the same, and a route's own skeleton takes over from a shape it already
+ * resembles rather than replacing a different kind of loading indicator.
+ *
+ * Renders no padding or max-width of its own — `AppShell`'s `<main>` already
+ * supplies those, so this can drop straight into the content slot.
+ */
+export function PageSkeleton() {
+	return (
+		<div className="flex flex-col gap-6">
+			<Skeleton className="h-8 w-48" />
+			<div className="flex flex-col gap-5 rounded-3xl bg-card p-6">
+				<Skeleton className="h-4 w-24" />
+				<Skeleton className="h-10 w-52" />
+				<Skeleton className="h-4 w-40" />
+			</div>
+			<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+				{Array.from({ length: 3 }).map((_, i) => (
+					<div key={i} className="flex flex-col rounded-3xl bg-card p-5">
+						<div className="flex items-start justify-between gap-2">
+							<Skeleton className="h-4 w-28" />
+							<Skeleton className="h-3 w-14" />
+						</div>
+						<Skeleton className="mt-3 h-7 w-32" />
+						<Skeleton className="mt-2 h-3 w-24" />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

package/templates/react-app/files/src/shared/layouts/states/route-fallback.tsx

@@ -0,0 +1,26 @@
+import { PageSkeleton } from './page-skeleton';
+
+/**
+ * Suspense fallback for a lazily-loaded route.
+ *
+ * Rendered *inside* the app shell, so the sidebar and topbar stay mounted while
+ * the route's chunk arrives — the user sees the app frame, not a blank page.
+ *
+ * **A skeleton, not a spinner.** A spinner here meant a navigation showed two
+ * different loading languages back to back: spinner while the chunk downloaded,
+ * then the route's own `Skeleton` blocks while its data loaded. Reusing
+ * `PageSkeleton` — the same shape the authenticated bootstrap uses — makes the
+ * whole sequence one continuous skeleton that the route's more specific one
+ * replaces in kind.
+ *
+ * `role="status"` with a visually-hidden label keeps the state announced without
+ * putting a second visible indicator on screen.
+ */
+export function RouteFallback({ label = 'Loading…' }: { label?: string }) {
+	return (
+		<div role="status" aria-busy="true">
+			<span className="sr-only">{label}</span>
+			<PageSkeleton />
+		</div>
+	);
+}

package/templates/react-app/files/src/shared/layouts/states/state-screen.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+type StateScreenProps = {
+	code?: string;
+	title: string;
+	description?: string;
+	children?: ReactNode;
+};
+
+/** Full-page centered message used by Forbidden / NotFound / error fallbacks. */
+export function StateScreen({ code, title, description, children }: StateScreenProps) {
+	return (
+		<div className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-background p-6 text-center">
+			{code ? <div className="font-display text-6xl font-black text-primary">{code}</div> : null}
+			<div className="flex flex-col gap-1.5">
+				<h1 className="font-display text-2xl font-semibold text-foreground">{title}</h1>
+				{description ? <p className="max-w-sm text-mute">{description}</p> : null}
+			</div>
+			{children ? <div className="flex items-center gap-3">{children}</div> : null}
+		</div>
+	);
+}

package/templates/react-app/files/src/shared/types/README.md

@@ -0,0 +1,28 @@
+# @/shared/types
+
+Generated TypeScript types + Zod schemas from the backend OpenAPI document.
+Imported by the API layer and by feature code, so a stale copy here shows up as
+a type error at build time rather than as a surprise at runtime.
+
+## Usage
+
+```ts
+import type { UserEntity, GetUsersResponse } from '@/shared/types';
+import { zUserEntity } from '@/shared/types/api/zod.gen';
+```
+
+## Regenerating
+
+Requires the backend's docs credentials in `.env` (see `.env.example`).
+
+```bash
+yarn gen
+```
+
+That fetches `openapi.json` from the running backend and runs
+`@hey-api/openapi-ts` over it, rewriting `src/shared/types/api/*`.
+**Commit the regenerated files** — they are the contract the app compiles
+against.
+
+`api/*` ships as an empty placeholder so a freshly scaffolded app
+typechecks before the backend exists. The first `gen` replaces it.

package/templates/react-app/files/src/shared/types/api/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Placeholder for the generated OpenAPI types.
+ *
+ * `yarn workspace @/shared/types gen` fetches the backend's `openapi.json` and
+ * rewrites this directory with `@hey-api/openapi-ts` — overwriting this file.
+ * It exists only so a freshly scaffolded monorepo typechecks before the backend
+ * is running; there is nothing here worth keeping.
+ */
+export {};

package/templates/react-app/files/src/shared/types/api/zod.gen.ts

@@ -0,0 +1,5 @@
+/**
+ * Placeholder for the generated Zod schemas. Overwritten by
+ * `yarn workspace @/shared/types gen` — see ./index.ts.
+ */
+export {};

package/templates/react-app/files/src/shared/types/index.ts

@@ -0,0 +1,4 @@
+// Public entry for @/shared/types.
+// Generated API types live under ./api and are refreshed by `yarn gen`.
+export * from './api';
+export * from './api/zod.gen';

package/templates/react-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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-app/files/src/shared/ui/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 };