@salesforce/webapp-template-feature-react-authentication-experimental 1.3.4

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/layout/card-layout.tsx

@@ -0,0 +1,23 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+interface CardLayoutProps {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+}
+
+/**
+ * Card layout component for authentication pages.
+ * Provides CardHeader with title and optional description, and CardContent.
+ */
+export function CardLayout({ title, description, children }: CardLayoutProps) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="text-2xl">{title}</CardTitle>
+				{description && <CardDescription>{description}</CardDescription>}
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/layout/centered-page-layout.tsx

@@ -0,0 +1,73 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+/**
+ * Variant styles for the content container's maximum width.
+ * Controls the maximum width of the inner content area within the page layout.
+ */
+const contentContainerVariants = cva("w-full", {
+	variants: {
+		contentMaxWidth: {
+			sm: "max-w-sm",
+			md: "max-w-md",
+			lg: "max-w-lg",
+		},
+	},
+	defaultVariants: {
+		contentMaxWidth: "sm",
+	},
+});
+
+/**
+ * Props for the CenteredPageLayout component.
+ */
+interface CenteredPageLayoutProps
+	extends React.ComponentProps<"div">,
+		VariantProps<typeof contentContainerVariants> {
+	/** The content to be displayed within the page layout */
+	children: React.ReactNode;
+	/**
+	 * Maximum width of the content container.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Optional page title. If provided, will render a <title> component that React will place in the document head.
+	 */
+	title?: string;
+}
+
+/**
+ * CenteredPageLayout component that provides consistent page structure and spacing.
+ *
+ * This component creates a full-viewport-height container that centers its content
+ * both horizontally and vertically. The inner content area has a configurable maximum width
+ * to prevent content from becoming too wide on large screens.
+ *
+ * @example
+ * ```tsx
+ * <CenteredPageLayout contentMaxWidth="md">
+ *   <YourPageContent />
+ * </CenteredPageLayout>
+ * ```
+ */
+export function CenteredPageLayout({
+	contentMaxWidth,
+	className,
+	children,
+	title,
+	...props
+}: CenteredPageLayoutProps) {
+	return (
+		<>
+			{title && <title>{title}</title>}
+			<main
+				className={cn("flex min-h-svh w-full items-center justify-center p-6 md:p-10", className)}
+				data-slot="page-layout"
+				{...props}
+			>
+				<div className={contentContainerVariants({ contentMaxWidth })}>{children}</div>
+			</main>
+		</>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/layout/loading-page.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { CenteredPageLayout } from "./centered-page-layout";
+import { Spinner } from "../ui/spinner";
+
+/**
+ * Spinner size variants based on content width.
+ */
+const spinnerVariants = cva("", {
+	variants: {
+		contentMaxWidth: {
+			sm: "size-6",
+			md: "size-8",
+			lg: "size-10",
+		},
+	},
+	defaultVariants: {
+		contentMaxWidth: "sm",
+	},
+});
+
+interface LoadingPageProps extends VariantProps<typeof spinnerVariants> {
+	/**
+	 * Maximum width of the content container. Also scales the spinner size.
+	 * @default "sm"
+	 */
+	contentMaxWidth?: "sm" | "md" | "lg";
+	/**
+	 * Accessible label for screen readers.
+	 * @default "Loading…"
+	 */
+	loadingText?: string;
+}
+
+/**
+ * Full-page loading indicator with centered spinner.
+ */
+export function LoadingPage({ contentMaxWidth, loadingText = "Loading…" }: LoadingPageProps) {
+	return (
+		<CenteredPageLayout contentMaxWidth={contentMaxWidth}>
+			<div className="flex justify-center" role="status" aria-live="polite">
+				<Spinner className={spinnerVariants({ contentMaxWidth })} aria-hidden="true" />
+				<span className="sr-only">{loadingText}</span>
+			</div>
+		</CenteredPageLayout>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/alert.tsx

@@ -0,0 +1,65 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	role,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role={role ?? (variant === "destructive" ? "alert" : "status")}
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+// Maintenance/A11y: Added 'asChild' pattern or a simple 'as' prop
+// to allow rendering semantic headings (h1-h6).
+interface AlertTitleProps extends React.ComponentProps<"div"> {
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p";
+}
+function AlertTitle({ className, as: Component = "div", ...props }: AlertTitleProps) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+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-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/card.tsx

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({
+	className,
+	as: Component = "h3",
+	...props
+}: React.ComponentProps<"div"> & { as?: any }) {
+	return (
+		<Component
+			data-slot="card-title"
+			className={cn("leading-none font-semibold tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/field.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Label } from "./label";
+
+function Field({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<"div"> & {
+	orientation?: "horizontal" | "vertical";
+}) {
+	return (
+		<div
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(
+				"grid gap-2",
+				orientation === "horizontal" && "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				"data-[disabled]:opacity-50 group-data-[disabled]:opacity-50 peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldError({
+	className,
+	errors,
+	...props
+}: React.ComponentProps<"p"> & { errors?: (Error | undefined | null)[] }) {
+	const errorMessages = errors?.filter(Boolean).map((e) => e?.message);
+
+	if (!errorMessages?.length) {
+		return null;
+	}
+
+	return (
+		<p
+			data-slot="field-error"
+			className={cn("text-destructive text-sm", className)}
+			aria-live="polite"
+			{...props}
+		>
+			{errorMessages.join(", ")}
+		</p>
+	);
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="field-group" className={cn("grid gap-6", className)} {...props} />;
+}
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return <fieldset data-slot="field-set" className={cn("grid gap-4", className)} {...props} />;
+}
+
+function FieldLegend({ className, ...props }: React.ComponentProps<"legend">) {
+	return (
+		<legend
+			data-slot="field-legend"
+			className={cn("text-foreground font-medium leading-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldSeparator({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-separator"
+			role="separator"
+			className={cn("bg-border -mx-6 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+};

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/index.ts

@@ -0,0 +1,71 @@
+/**
+ * UI Components Index
+ *
+ * Re-exports all UI components for easier imports.
+ *
+ * Usage:
+ *   import { Button, Input, Tabs } from "@/components/ui"
+ *
+ * Instead of:
+ *   import { Button } from "@/components/ui/button"
+ *   import { Input } from "@/components/ui/input"
+ *   import { Tabs } from "@/components/ui/tabs"
+ */
+
+export { Alert, AlertTitle, AlertDescription } from "./alert";
+export { Button, buttonVariants } from "./button";
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardAction,
+	CardDescription,
+	CardContent,
+} from "./card";
+export {
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+} from "./field";
+export { Input } from "./input";
+export { Label } from "./label";
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+} from "./select";
+export { Spinner } from "./spinner";
+export { Skeleton } from "./skeleton";
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+} from "./table";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "./pagination";

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };

package/dist/force-app/main/default/webapplications/feature-react-authentication/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(
+				"flex items-center gap-2 text-sm font-medium leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

package/dist/force-app/main/default/webapplications/feature-react-authentication/src/components/ui/pagination.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button, buttonVariants } from "./button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("flex justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+	({ className, ...props }, ref) => (
+		<ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+	),
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+	({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
+);
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & React.ComponentProps<"button">;
+
+const PaginationLink = ({ className, isActive, disabled, ...props }: PaginationLinkProps) => (
+	<button
+		aria-current={isActive ? "page" : undefined}
+		disabled={disabled}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "default" : "outline",
+				size: "sm",
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	disabled,
+	...props
+}: React.ComponentProps<typeof Button>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		className={cn("gap-1 pl-2.5", className)}
+		disabled={disabled}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, disabled, ...props }: React.ComponentProps<typeof Button>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		className={cn("gap-1 pr-2.5", className)}
+		disabled={disabled}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+};