@salesforce/webapp-template-feature-react-authentication-experimental 1.44.0 → 1.45.0

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

@@ -1,22 +1,102 @@
-import * as React from "react";
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 import { Label } from "./label";
+import { Separator } from "./separator";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLegend({
+	className,
+	variant = "legend",
+	...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
+	variants: {
+		orientation: {
+			vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+			horizontal:
+				"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			responsive:
+				"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		},
+	},
+	defaultVariants: {
+		orientation: "vertical",
+	},
+});
 
 function Field({
 	className,
 	orientation = "vertical",
 	...props
-}: React.ComponentProps<"div"> & {
-	orientation?: "horizontal" | "vertical";
-}) {
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
 	return (
 		<div
+			role="group"
 			data-slot="field"
 			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
 			className={cn(
-				"grid gap-2",
-				orientation === "horizontal" && "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+				"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
+				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
 				className,
 			)}
 			{...props}
@@ -24,12 +104,12 @@ function Field({
 	);
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
 	return (
-		<Label
+		<div
 			data-slot="field-label"
 			className={cn(
-				"data-[disabled]:opacity-50 group-data-[disabled]:opacity-50 peer-disabled:opacity-50",
+				"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
 				className,
 			)}
 			{...props}
@@ -41,71 +121,102 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
 	return (
 		<p
 			data-slot="field-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn(
+				"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+				"last:mt-0 nth-last-2:-mt-1",
+				"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
 			{...props}
 		/>
 	);
 }
 
-function FieldError({
+function FieldSeparator({
+	children,
 	className,
-	errors,
 	...props
-}: React.ComponentProps<"p"> & { errors?: (Error | undefined | null)[] }) {
-	const errorMessages = errors?.filter(Boolean).map((e) => e?.message);
-
-	if (!errorMessages?.length) {
-		return null;
-	}
-
+}: React.ComponentProps<"div"> & {
+	children?: React.ReactNode;
+}) {
 	return (
-		<p
-			data-slot="field-error"
-			className={cn("text-destructive text-sm", className)}
-			aria-live="polite"
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+				className,
+			)}
 			{...props}
 		>
-			{errorMessages.join(", ")}
-		</p>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
 	);
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-	return <div data-slot="field-group" className={cn("grid gap-6", className)} {...props} />;
-}
+function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: React.ComponentProps<"div"> & {
+	errors?: Array<{ message?: string } | undefined>;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-	return <fieldset data-slot="field-set" className={cn("grid gap-4", className)} {...props} />;
-}
+		if (!errors?.length) {
+			return null;
+		}
 
-function FieldLegend({ className, ...props }: React.ComponentProps<"legend">) {
-	return (
-		<legend
-			data-slot="field-legend"
-			className={cn("text-foreground font-medium leading-none", className)}
-			{...props}
-		/>
-	);
-}
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+		if (uniqueErrors?.length == 1) {
+			return uniqueErrors[0]?.message;
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+			</ul>
+		);
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
 
-function FieldSeparator({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
-			data-slot="field-separator"
-			role="separator"
-			className={cn("bg-border -mx-6 h-px", className)}
+			role="alert"
+			data-slot="field-error"
+			className={cn("text-destructive text-sm font-normal", className)}
 			{...props}
-		/>
+		>
+			{content}
+		</div>
 	);
 }
 
 export {
 	Field,
+	FieldLabel,
 	FieldDescription,
 	FieldError,
 	FieldGroup,
-	FieldLabel,
 	FieldLegend,
 	FieldSeparator,
 	FieldSet,
+	FieldContent,
+	FieldTitle,
 };

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

@@ -69,3 +69,4 @@ export {
 	PaginationNext,
 	PaginationPrevious,
 } from "./pagination";
+export { Separator } from "./separator";

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

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import { cn } from "../../lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
@@ -6,9 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"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",
+				"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import { Label as LabelPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/utils";
 
@@ -8,7 +8,7 @@ function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimiti
 		<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",
+				"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
 				className,
 			)}
 			{...props}

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

@@ -1,92 +1,105 @@
 import * as React from "react";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-import { Button, buttonVariants } from "./button";
+import { Button } from "./button";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-	<nav
-		role="navigation"
-		aria-label="pagination"
-		className={cn("flex justify-center", className)}
-		{...props}
-	/>
-);
-Pagination.displayName = "Pagination";
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+	return (
+		<nav
+			role="navigation"
+			aria-label="pagination"
+			data-slot="pagination"
+			className={cn("mx-auto flex w-full justify-center", className)}
+			{...props}
+		/>
+	);
+}
 
-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";
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="pagination-content"
+			className={cn("gap-0.5 flex items-center", className)}
+			{...props}
+		/>
+	);
+}
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-	({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
-);
-PaginationItem.displayName = "PaginationItem";
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="pagination-item" {...props} />;
+}
 
 type PaginationLinkProps = {
 	isActive?: boolean;
-} & React.ComponentProps<"button">;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+	React.ComponentProps<"a">;
 
-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";
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+	return (
+		<Button asChild variant={isActive ? "outline" : "ghost"} size={size} className={cn(className)}>
+			<a
+				aria-current={isActive ? "page" : undefined}
+				data-slot="pagination-link"
+				data-active={isActive}
+				{...props}
+			/>
+		</Button>
+	);
+}
 
-const PaginationPrevious = ({
+function PaginationPrevious({
 	className,
-	disabled,
+	text = "Previous",
 	...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";
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+	return (
+		<PaginationLink
+			aria-label="Go to previous page"
+			size="default"
+			className={cn("pl-1.5!", className)}
+			{...props}
+		>
+			<ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+			<span className="hidden sm:block">{text}</span>
+		</PaginationLink>
+	);
+}
 
-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";
+function PaginationNext({
+	className,
+	text = "Next",
+	...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+	return (
+		<PaginationLink
+			aria-label="Go to next page"
+			size="default"
+			className={cn("pr-1.5!", className)}
+			{...props}
+		>
+			<span className="hidden sm:block">{text}</span>
+			<ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+		</PaginationLink>
+	);
+}
 
-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";
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			aria-hidden
+			data-slot="pagination-ellipsis"
+			className={cn(
+				"size-8 [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
+				className,
+			)}
+			{...props}
+		>
+			<MoreHorizontalIcon />
+			<span className="sr-only">More pages</span>
+		</span>
+	);
+}
 
 export {
 	Pagination,