@voila.dev/ui 1.1.9

package/src/components/ui/empty.tsx

@@ -0,0 +1,131 @@
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+import { cn } from "#/lib/utils.ts";
+
+type EmptyProps = React.ComponentProps<"div"> & {
+	bordered?: boolean;
+};
+
+function Empty({ className, bordered = false, ...props }: EmptyProps) {
+	return (
+		<div
+			data-slot="empty"
+			data-bordered={bordered || undefined}
+			className={cn(
+				"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl p-6 text-center text-balance",
+				bordered && "border border-dashed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-header"
+			className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+const emptyMediaVariants = cva({
+	base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			icon: "rounded-lg bg-muted text-foreground",
+		},
+		size: {
+			sm: "",
+			default: "",
+			lg: "",
+		},
+	},
+	compoundVariants: [
+		{
+			variant: "icon",
+			size: "sm",
+			className: "size-6 [&_svg:not([class*='size-'])]:size-3.5",
+		},
+		{
+			variant: "icon",
+			size: "default",
+			className: "size-8 [&_svg:not([class*='size-'])]:size-4",
+		},
+		{
+			variant: "icon",
+			size: "lg",
+			className: "size-10 [&_svg:not([class*='size-'])]:size-6",
+		},
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+function EmptyMedia({
+	className,
+	variant = "default",
+	size = "default",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+	return (
+		<div
+			data-slot="empty-media"
+			data-variant={variant}
+			data-size={size}
+			className={cn(emptyMediaVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="empty-title"
+			className={cn("text-sm font-medium tracking-tight", className)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="empty-description"
+			className={cn(
+				"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="empty-content"
+			className={cn(
+				"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Empty,
+	EmptyContent,
+	EmptyDescription,
+	EmptyHeader,
+	EmptyMedia,
+	type EmptyProps,
+	EmptyTitle,
+};

package/src/components/ui/field.tsx

@@ -0,0 +1,257 @@
+import { useMemo } from "react";
+import { Label } from "#/components/ui/label.tsx";
+import { Separator } from "#/components/ui/separator.tsx";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const fieldLegendVariants = cva({
+	base: "mb-1.5 font-medium",
+	variants: {
+		variant: {
+			legend: "text-base",
+			label: "text-sm",
+		},
+	},
+	defaultVariants: {
+		variant: "legend",
+	},
+});
+
+function FieldLegend({
+	className,
+	variant = "legend",
+	...props
+}: React.ComponentProps<"legend"> & VariantProps<typeof fieldLegendVariants>) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(fieldLegendVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const fieldVariants = cva({
+	base: "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+	variants: {
+		orientation: {
+			vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+			// Direct checkbox/radio children get a 1px nudge (`mt-px`) so they
+			// optically align with the first line of an adjacent FieldContent.
+			horizontal:
+				"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			// Vertical below the @md container breakpoint, horizontal above it.
+			responsive:
+				"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		},
+	},
+	defaultVariants: {
+		orientation: "vertical",
+	},
+});
+
+function Field({
+	className,
+	orientation = "vertical",
+	invalid,
+	...props
+}: React.ComponentProps<"div"> &
+	VariantProps<typeof fieldVariants> & { invalid?: boolean }) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			data-invalid={invalid || undefined}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn(
+				"group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-title"
+			className={cn(
+				"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				// `[[data-variant=legend]+&]` tightens the gap when the description
+				// directly follows a legend-sized FieldLegend.
+				"text-left text-sm leading-normal font-normal text-muted-foreground group-data-[orientation=horizontal]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+				// `nth-last-2` pulls the description toward the control when it sits
+				// just above it (i.e. it is the second-to-last child of the Field).
+				"last:mt-0 nth-last-2:-mt-1",
+				"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	children?: React.ReactNode;
+}) {
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+				className,
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
+}
+
+function FieldError({
+	className,
+	children,
+	errors,
+	...props
+}: React.ComponentProps<"div"> & {
+	errors?: Array<{ message?: string } | undefined>;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		if (!errors?.length) {
+			return null;
+		}
+
+		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) =>
+						error?.message && <li key={error.message}>{error.message}</li>,
+				)}
+			</ul>
+		);
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn(
+				"text-sm font-normal text-destructive",
+				"animate-in fade-in slide-in-from-top-1 motion-reduce:animate-none",
+				className,
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+}
+
+export {
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldTitle,
+};

package/src/components/ui/formatted-input.tsx

@@ -0,0 +1,219 @@
+import * as React from "react";
+
+import { Input } from "#/components/ui/input.tsx";
+
+/**
+ * Digit masks for the French identifiers the apps collect. `#` is a digit
+ * slot; any other character is a literal separator inserted while typing.
+ */
+const rppsMask = "###########";
+const siretMask = "### ### ### #####";
+const frenchPhoneMask = "## ## ## ## ##";
+
+function countDigitSlots(mask: string): number {
+	let count = 0;
+	for (const maskCharacter of mask) {
+		if (maskCharacter === "#") count += 1;
+	}
+	return count;
+}
+
+function extractDigits(text: string, maximumDigits: number): string {
+	return text.replace(/\D/g, "").slice(0, maximumDigits);
+}
+
+function applyMask(digits: string, mask: string): string {
+	let formatted = "";
+	let digitIndex = 0;
+	for (const maskCharacter of mask) {
+		if (digitIndex >= digits.length) break;
+		if (maskCharacter === "#") {
+			formatted += digits[digitIndex];
+			digitIndex += 1;
+		} else {
+			formatted += maskCharacter;
+		}
+	}
+	return formatted;
+}
+
+function caretPositionAfterDigits(
+	formatted: string,
+	digitCount: number,
+): number {
+	if (digitCount <= 0) return 0;
+	let digitsSeen = 0;
+	for (let index = 0; index < formatted.length; index += 1) {
+		if (/\d/.test(formatted.charAt(index))) {
+			digitsSeen += 1;
+			if (digitsSeen === digitCount) return index + 1;
+		}
+	}
+	return formatted.length;
+}
+
+type InputChangeEvent = Parameters<
+	NonNullable<React.ComponentProps<typeof Input>["onChange"]>
+>[0];
+
+/**
+ * Deleting a literal separator leaves the digits untouched, which would
+ * reformat to the exact same string and trap the caret. Forward the deletion
+ * to the adjacent digit instead.
+ */
+function forwardSeparatorDeletion(input: {
+	digits: string;
+	digitsBeforeCaret: number;
+	inputType: string | undefined;
+}): { digits: string; digitsBeforeCaret: number } {
+	if (
+		input.inputType === "deleteContentBackward" &&
+		input.digitsBeforeCaret > 0
+	) {
+		return {
+			digits:
+				input.digits.slice(0, input.digitsBeforeCaret - 1) +
+				input.digits.slice(input.digitsBeforeCaret),
+			digitsBeforeCaret: input.digitsBeforeCaret - 1,
+		};
+	}
+	if (input.inputType === "deleteContentForward") {
+		return {
+			digits:
+				input.digits.slice(0, input.digitsBeforeCaret) +
+				input.digits.slice(input.digitsBeforeCaret + 1),
+			digitsBeforeCaret: input.digitsBeforeCaret,
+		};
+	}
+	return { digits: input.digits, digitsBeforeCaret: input.digitsBeforeCaret };
+}
+
+function computeMaskedChange(input: {
+	rawText: string;
+	selectionStart: number | null;
+	inputType: string | undefined;
+	currentDigits: string;
+	formattedValue: string;
+	mask: string;
+	maximumDigits: number;
+}): { nextDigits: string; caretPosition: number } {
+	const selectionStart = input.selectionStart ?? input.rawText.length;
+	let nextDigits = extractDigits(input.rawText, input.maximumDigits);
+	let digitsBeforeCaret = extractDigits(
+		input.rawText.slice(0, selectionStart),
+		input.maximumDigits,
+	).length;
+
+	if (
+		nextDigits === input.currentDigits &&
+		input.rawText.length < input.formattedValue.length
+	) {
+		const forwarded = forwardSeparatorDeletion({
+			digits: nextDigits,
+			digitsBeforeCaret,
+			inputType: input.inputType,
+		});
+		nextDigits = forwarded.digits;
+		digitsBeforeCaret = forwarded.digitsBeforeCaret;
+	}
+
+	const caretPosition = caretPositionAfterDigits(
+		applyMask(nextDigits, input.mask),
+		Math.min(digitsBeforeCaret, nextDigits.length),
+	);
+	return { nextDigits, caretPosition };
+}
+
+type FormattedInputProps = Omit<
+	React.ComponentProps<typeof Input>,
+	"value" | "defaultValue" | "onValueChange" | "type"
+> & {
+	/** Digit mask, e.g. `"### ### ### #####"` for SIRET. `#` marks a digit slot. */
+	mask: string;
+	/** Raw digits (unformatted). */
+	value?: string;
+	/** Raw digits (unformatted). */
+	defaultValue?: string;
+	/** Receives the raw digits whenever they change. */
+	onValueChange?: (value: string) => void;
+};
+
+function FormattedInput({
+	mask,
+	value,
+	defaultValue,
+	onValueChange,
+	onChange,
+	ref,
+	...props
+}: FormattedInputProps) {
+	const maximumDigits = countDigitSlots(mask);
+	const [internalDigits, setInternalDigits] = React.useState(() =>
+		extractDigits(defaultValue ?? "", maximumDigits),
+	);
+	const digits =
+		value !== undefined ? extractDigits(value, maximumDigits) : internalDigits;
+	const formattedValue = applyMask(digits, mask);
+
+	const inputRef = React.useRef<HTMLInputElement | null>(null);
+	const pendingCaret = React.useRef<number | null>(null);
+
+	// The caret can only be repositioned once React has re-rendered the input
+	// with the reformatted value, hence the layout effect rather than doing it
+	// inside the change handler.
+	React.useLayoutEffect(() => {
+		if (pendingCaret.current === null) return;
+		inputRef.current?.setSelectionRange(
+			pendingCaret.current,
+			pendingCaret.current,
+		);
+		pendingCaret.current = null;
+	});
+
+	const commitDigits = (nextDigits: string) => {
+		if (value === undefined) setInternalDigits(nextDigits);
+		if (nextDigits !== digits) onValueChange?.(nextDigits);
+	};
+
+	const handleChange = (event: InputChangeEvent) => {
+		const { nextDigits, caretPosition } = computeMaskedChange({
+			rawText: event.target.value,
+			selectionStart: event.target.selectionStart,
+			inputType: (event.nativeEvent as InputEvent).inputType,
+			currentDigits: digits,
+			formattedValue,
+			mask,
+			maximumDigits,
+		});
+		pendingCaret.current = caretPosition;
+		commitDigits(nextDigits);
+		onChange?.(event);
+	};
+
+	return (
+		<Input
+			data-slot="formatted-input"
+			type="text"
+			inputMode="numeric"
+			autoComplete="off"
+			spellCheck={false}
+			{...props}
+			ref={(element: HTMLInputElement | null) => {
+				inputRef.current = element;
+				if (typeof ref === "function") return ref(element);
+				if (ref) ref.current = element;
+			}}
+			value={formattedValue}
+			onChange={handleChange}
+		/>
+	);
+}
+
+export {
+	applyMask,
+	FormattedInput,
+	type FormattedInputProps,
+	frenchPhoneMask,
+	rppsMask,
+	siretMask,
+};