@voila.dev/ui 1.1.9

package/src/components/ui/image-upload-field.tsx

@@ -0,0 +1,344 @@
+import { TrashIcon, UploadSimpleIcon } from "@phosphor-icons/react";
+import * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import {
+	ImageCropper,
+	ImageCropperArea,
+	ImageCropperDropzone,
+	useImageCropper,
+} from "#/components/ui/image-cropper.tsx";
+import { Progress } from "#/components/ui/progress.tsx";
+import { cn } from "#/lib/utils.ts";
+
+type ImageUploadShape = "circle" | "rectangle";
+
+/**
+ * Confirm / cancel controls for an active crop. Rendered inside
+ * <ImageCropper> so it can reach `cropToBlob`; shown only once a file is
+ * picked. On confirm it produces a Blob and hands it to the parent — this
+ * component never performs the network upload itself.
+ */
+function CropControls({
+	hasPicked,
+	isUploading,
+	cancelLabel,
+	confirmLabel,
+	outputSize,
+	onCropped,
+}: {
+	hasPicked: boolean;
+	isUploading: boolean;
+	cancelLabel: string;
+	confirmLabel: string;
+	outputSize?: { readonly width: number; readonly height: number };
+	onCropped: (blob: Blob) => void;
+}) {
+	const { cropToBlob, removeImage } = useImageCropper();
+	if (!hasPicked) return null;
+	return (
+		<div data-slot="image-upload-field-crop-controls" className="flex gap-2">
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				className="flex-1"
+				disabled={isUploading}
+				onClick={removeImage}
+			>
+				{cancelLabel}
+			</Button>
+			<Button
+				type="button"
+				size="sm"
+				className="flex-1"
+				loading={isUploading}
+				onClick={async () => {
+					onCropped(await cropToBlob({ ...outputSize, type: "image/png" }));
+				}}
+			>
+				{confirmLabel}
+			</Button>
+		</div>
+	);
+}
+
+/**
+ * The "view" state: the current image with Replace / Remove, or a Progress bar
+ * while the parent's upload is in flight.
+ */
+function ImageUploadFieldView({
+	value,
+	shape,
+	aspectRatio,
+	isUploading,
+	replaceLabel,
+	removeLabel,
+	onReplace,
+	onRemove,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	value: string;
+	shape: ImageUploadShape;
+	aspectRatio: number;
+	isUploading: boolean;
+	replaceLabel: React.ReactNode;
+	removeLabel: React.ReactNode;
+	onReplace: () => void;
+	onRemove?: () => void;
+}) {
+	const isCircle = shape === "circle";
+	return (
+		<div
+			data-slot="image-upload-field"
+			data-shape={shape}
+			data-state="view"
+			className={cn("flex flex-col items-center gap-3", className)}
+			{...props}
+		>
+			<img
+				src={value}
+				alt=""
+				data-slot="image-upload-field-preview"
+				style={{ aspectRatio: String(aspectRatio) }}
+				className={cn(
+					"w-full max-w-xs border border-border object-cover",
+					isCircle ? "mx-auto size-32 rounded-full" : "rounded-lg",
+				)}
+			/>
+			{isUploading ? (
+				<Progress
+					value={null}
+					className="w-full max-w-xs"
+					data-slot="image-upload-field-progress"
+				/>
+			) : (
+				<div className="flex items-center gap-2">
+					<Button type="button" variant="outline" size="sm" onClick={onReplace}>
+						<UploadSimpleIcon />
+						{replaceLabel}
+					</Button>
+					{onRemove ? (
+						<Button type="button" variant="ghost" size="sm" onClick={onRemove}>
+							<TrashIcon />
+							{removeLabel}
+						</Button>
+					) : null}
+				</div>
+			)}
+		</div>
+	);
+}
+
+type ImageUploadCropperProps = {
+	shape: ImageUploadShape;
+	aspectRatio: number;
+	isUploading: boolean;
+	label: React.ReactNode;
+	description: React.ReactNode;
+	cancelLabel: string;
+	confirmLabel: string;
+	outputSize?: { readonly width: number; readonly height: number };
+	hasPicked: boolean;
+	onPickedChange: (hasPicked: boolean) => void;
+	onFileCropped: (blob: Blob) => void;
+};
+
+/** The dropzone → crop → confirm flow itself, minus the surrounding chrome. */
+function ImageUploadCropper({
+	shape,
+	aspectRatio,
+	isUploading,
+	label,
+	description,
+	cancelLabel,
+	confirmLabel,
+	outputSize,
+	hasPicked,
+	onPickedChange,
+	onFileCropped,
+}: ImageUploadCropperProps) {
+	const isCircle = shape === "circle";
+	// The dropzone renders its own chrome around plain text, so a rich node has
+	// no slot to go in and the dropzone falls back to its built-in copy.
+	const dropzoneLabel = typeof label === "string" ? label : undefined;
+	const dropzoneDescription =
+		typeof description === "string" ? description : undefined;
+	return (
+		<ImageCropper
+			aspectRatio={aspectRatio}
+			disabled={isUploading}
+			onImageChange={(file) => onPickedChange(file !== null)}
+		>
+			<ImageCropperDropzone
+				label={dropzoneLabel}
+				description={dropzoneDescription}
+				className={isCircle ? "mx-auto size-40 rounded-full" : undefined}
+			/>
+			<ImageCropperArea shape={isCircle ? "circle" : "rectangle"} />
+			{isUploading ? (
+				<Progress value={null} data-slot="image-upload-field-progress" />
+			) : null}
+			<CropControls
+				hasPicked={hasPicked}
+				isUploading={isUploading}
+				cancelLabel={cancelLabel}
+				confirmLabel={confirmLabel}
+				outputSize={outputSize}
+				onCropped={onFileCropped}
+			/>
+		</ImageCropper>
+	);
+}
+
+/** The "edit" state: the crop flow, plus the way back to an existing image. */
+function ImageUploadFieldEditor({
+	cropper,
+	canCancel,
+	onCancel,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	cropper: ImageUploadCropperProps;
+	/** Show the escape hatch back to the existing image (only when one exists). */
+	canCancel: boolean;
+	onCancel: () => void;
+}) {
+	return (
+		<div
+			data-slot="image-upload-field"
+			data-shape={cropper.shape}
+			data-state="edit"
+			className={cn("flex w-full flex-col gap-3", className)}
+			{...props}
+		>
+			<ImageUploadCropper {...cropper} />
+			{canCancel ? (
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					disabled={cropper.isUploading}
+					onClick={onCancel}
+				>
+					{cropper.cancelLabel}
+				</Button>
+			) : null}
+		</div>
+	);
+}
+
+/**
+ * Controlled presentational bridge over <ImageCropper> for avatar / cover
+ * uploads. It is deliberately network-free: it surfaces the cropped `Blob`
+ * through `onFileCropped` and the parent owns the actual upload, passing back
+ * the resulting URL as `value` and toggling `isUploading`.
+ *
+ * Two states:
+ * - "view": there is a `value` and no edit in progress — shows the current
+ *   image with Replace / Remove.
+ * - "edit": the dropzone → crop → confirm flow.
+ */
+function ImageUploadField({
+	value,
+	aspectRatio = 1,
+	shape = "circle",
+	isUploading = false,
+	outputSize,
+	onFileCropped,
+	onRemove,
+	label = "Upload an image",
+	description = "Click to browse or drag and drop",
+	replaceLabel = "Replace",
+	removeLabel = "Remove",
+	cancelLabel = "Cancel",
+	confirmLabel = "Save",
+	className,
+	...props
+}: Omit<React.ComponentProps<"div">, "onChange"> & {
+	/** Current image URL, or null/undefined when nothing is set yet. */
+	value?: string | null;
+	/** Crop aspect ratio: 1 for avatars, 3 for covers. */
+	aspectRatio?: number;
+	shape?: ImageUploadShape;
+	/** While `true`, the confirm button spins and a Progress bar shows. */
+	isUploading?: boolean;
+	/**
+	 * Fixed output dimensions for the cropped image (e.g. a 512×512 avatar).
+	 * Defaults to the cropped region's natural size.
+	 */
+	outputSize?: { readonly width: number; readonly height: number };
+	/** Fired with the cropped Blob once the user confirms — parent uploads it. */
+	onFileCropped: (blob: Blob) => void;
+	onRemove?: () => void;
+	label?: React.ReactNode;
+	description?: React.ReactNode;
+	replaceLabel?: React.ReactNode;
+	removeLabel?: React.ReactNode;
+	cancelLabel?: string;
+	confirmLabel?: string;
+}) {
+	const hasValue = value !== null && value !== undefined && value !== "";
+	// Start in "view" when there's already an image; otherwise show the cropper.
+	const [mode, setMode] = React.useState<"view" | "edit">(
+		hasValue ? "view" : "edit",
+	);
+	const [hasPicked, setHasPicked] = React.useState(false);
+
+	// If the parent finishes an upload (value appears) while we're editing,
+	// return to the view state and clear the picked flag.
+	const previousValueRef = React.useRef(value);
+	React.useEffect(() => {
+		if (value !== previousValueRef.current) {
+			previousValueRef.current = value;
+			if (value) {
+				setMode("view");
+				setHasPicked(false);
+			}
+		}
+	}, [value]);
+
+	if (hasValue && mode === "view") {
+		return (
+			<ImageUploadFieldView
+				value={value}
+				shape={shape}
+				aspectRatio={aspectRatio}
+				isUploading={isUploading}
+				replaceLabel={replaceLabel}
+				removeLabel={removeLabel}
+				onReplace={() => {
+					setHasPicked(false);
+					setMode("edit");
+				}}
+				onRemove={onRemove}
+				className={className}
+				{...props}
+			/>
+		);
+	}
+
+	return (
+		<ImageUploadFieldEditor
+			cropper={{
+				shape,
+				aspectRatio,
+				isUploading,
+				label,
+				description,
+				cancelLabel,
+				confirmLabel,
+				outputSize,
+				hasPicked,
+				onPickedChange: setHasPicked,
+				onFileCropped,
+			}}
+			canCancel={hasValue && !hasPicked}
+			onCancel={() => setMode("view")}
+			className={className}
+			{...props}
+		/>
+	);
+}
+
+export { ImageUploadField, type ImageUploadShape };

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

@@ -0,0 +1,175 @@
+import type * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { Input } from "#/components/ui/input.tsx";
+import { Textarea } from "#/components/ui/textarea.tsx";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+import { cn } from "#/lib/utils.ts";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return (
+		<fieldset
+			data-slot="input-group"
+			className={cn(
+				"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-[color,background-color,border-color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const inputGroupAddonVariants = cva({
+	base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
+	variants: {
+		align: {
+			"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:-ml-0.5",
+			"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:-mr-0.5",
+			"block-start":
+				"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+			"block-end":
+				"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+		},
+	},
+	defaultVariants: {
+		align: "inline-start",
+	},
+});
+
+/**
+ * `align` is mirrored as a `data-align` attribute because the `InputGroup`
+ * root styles off it (`has-[>[data-align=block-end]]:flex-col`, control
+ * padding, ...) - overriding `data-align` from the outside breaks that
+ * coupling. Clicking the addon's EMPTY SPACE forwards focus to the group's
+ * control (input or textarea); a consumer `onClick` runs first and can cancel
+ * the forwarding with `event.preventDefault()`.
+ *
+ * A click that lands on an interactive element inside the addon is left alone.
+ * That covers more than buttons: `TranslationInput` and `MoneyInput` both put a
+ * `<select>` in a trailing addon, and forwarding focus to the input on
+ * mousedown-then-click closed the native dropdown the moment it opened - the
+ * locale/currency simply could not be changed with the pointer.
+ */
+function InputGroupAddon({
+	className,
+	align = "inline-start",
+	onClick,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) {
+					return;
+				}
+				if (
+					(event.target as HTMLElement).closest(
+						"button, a, input, select, textarea, label",
+					)
+				) {
+					return;
+				}
+				event.currentTarget.parentElement
+					?.querySelector<HTMLElement>("[data-slot=input-group-control]")
+					?.focus();
+			}}
+			{...props}
+		/>
+	);
+}
+
+const inputGroupButtonVariants = cva({
+	base: "flex items-center gap-2 text-sm shadow-none",
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+			// `sm` intentionally adds nothing: it falls through to the underlying
+			// `Button` default size (h-8), filling the group's full height.
+			sm: "",
+			"icon-xs":
+				"size-6 rounded-[min(var(--radius-md),10px)] p-0 has-[>svg]:p-0",
+			"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+		},
+	},
+	defaultVariants: {
+		size: "xs",
+	},
+});
+
+function InputGroupButton({
+	className,
+	type = "button",
+	variant = "ghost",
+	size = "xs",
+	...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+	VariantProps<typeof inputGroupButtonVariants> & {
+		type?: "button" | "submit" | "reset";
+	}) {
+	return (
+		<Button
+			type={type}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="input-group-text"
+			className={cn(
+				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupInput({
+	className,
+	...props
+}: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupTextarea({
+	className,
+	...props
+}: React.ComponentProps<typeof Textarea>) {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+	InputGroupText,
+	InputGroupTextarea,
+};

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

@@ -0,0 +1,83 @@
+import { MinusIcon } from "@phosphor-icons/react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput> & {
+	containerClassName?: string;
+}) {
+	return (
+		<OTPInput
+			data-slot="input-otp"
+			containerClassName={cn(
+				"flex items-center has-disabled:opacity-50 [&:has(:disabled)_[data-slot=input-otp-slot]]:cursor-not-allowed [&:has(:disabled)_[data-slot=input-otp-slot]]:bg-muted",
+				containerClassName,
+			)}
+			spellCheck={false}
+			className={cn("disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	);
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="input-otp-group"
+			className={cn(
+				"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	index: number;
+}) {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+	return (
+		<div
+			data-slot="input-otp-slot"
+			data-active={isActive}
+			className={cn(
+				"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="h-4 w-px animate-caret-blink bg-foreground motion-reduce:animate-none" />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="input-otp-separator"
+			className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+			role="separator"
+			{...props}
+		>
+			<MinusIcon />
+		</div>
+	);
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+
+import { cn } from "#/lib/utils.ts";
+
+function Input({ className, ...props }: InputPrimitive.Props) {
+	return (
+		<InputPrimitive
+			data-slot="input"
+			className={cn(
+				// `text-base` then `md:text-sm` is an iOS zoom guard: Safari auto-zooms
+				// a focused field whose font is < 16px, so we ship 16px on small screens
+				// and drop to 14px from `md` up.
+				"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };