@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/file-field/file-field.js

@@ -3,6 +3,11 @@ import { formatBytes } from "../../lib/format-bytes.js";
 import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
+import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
+import { useAttachmentPreview } from "../attachment-tile/attachment-preview.js";
+import { Button as Button$1, IconButton } from "../button/button.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Tooltip } from "../tooltip/tooltip.js";
 import { FileInput } from "./file-input.js";
 import { isOversized, oversizedFiles } from "./file-size.js";
 import { isAccepted, wrongTypeFiles } from "./file-type.js";
@@ -11,6 +16,97 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { isFileDropItem } from "react-aria-components";
 // src/components/file-field/file-field.tsx
+var StagedFile = (t0) => {
+	const $ = c(24);
+	const { id, file, hint, invalid, disabled, icon, removeLabel, removeIcon } = t0;
+	const preview = useAttachmentPreview(file);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AttachmentTile.Image, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== icon) {
+		t2 = /* @__PURE__ */ jsx(AttachmentTile.Icon, { children: icon });
+		$[1] = icon;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	let t4;
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(AttachmentTile.Extension, {});
+		t4 = /* @__PURE__ */ jsx(AttachmentTile.Skeleton, {});
+		t5 = /* @__PURE__ */ jsx(AttachmentTile.Name, {});
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== file.name || $[7] !== preview.pending || $[8] !== preview.src || $[9] !== t2) {
+		t6 = /* @__PURE__ */ jsxs(AttachmentTile.Preview, {
+			name: file.name,
+			src: preview.src,
+			pending: preview.pending,
+			children: [
+				t1,
+				t2,
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[6] = file.name;
+		$[7] = preview.pending;
+		$[8] = preview.src;
+		$[9] = t2;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== hint || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Tooltip, {
+			content: hint,
+			children: t6
+		});
+		$[11] = hint;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== removeIcon || $[15] !== removeLabel) {
+		t8 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx(AttachmentTile.Corner, { children: /* @__PURE__ */ jsx(AttachmentTile.Remove, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			size: "sm",
+			label: removeLabel,
+			children: removeIcon
+		}) }) });
+		$[14] = removeIcon;
+		$[15] = removeLabel;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== disabled || $[18] !== file.name || $[19] !== id || $[20] !== invalid || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(FileInput.Item, {
+			id,
+			textValue: file.name,
+			invalid,
+			disabled,
+			children: [t7, t8]
+		});
+		$[17] = disabled;
+		$[18] = file.name;
+		$[19] = id;
+		$[20] = invalid;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
+};
 /**
 * A labelled drop target holding the staged files as removable tiles, with a
 * file picker button. Files over `maxFileSize` or of a type outside `accept`
@@ -37,7 +133,7 @@ import { isFileDropItem } from "react-aria-components";
 * />
 */
 var FileField = (t0) => {
-	const $ = c(93);
+	const $ = c(91);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, onValueChange, onBlur, maxFileSize, accept, multiple, disabled, readOnly, dropTargetLabel, dropHint, dropIcon, chooseLabel, chooseIcon, filesLabel, removeLabel, removeIcon, fileIcon, fileHint, tooLargeError, wrongTypeError, className } = t0;
 	const locale = useLocale();
 	const ids = Field.useIds();
@@ -132,83 +228,79 @@ var FileField = (t0) => {
 	} else t6 = $[31];
 	const remove = t6;
 	let t7;
-	if ($[32] !== readOnly || $[33] !== removeIcon || $[34] !== removeLabel) {
-		t7 = readOnly === true ? {} : {
-			removeLabel,
-			removeIcon
-		};
-		$[32] = readOnly;
-		$[33] = removeIcon;
-		$[34] = removeLabel;
-		$[35] = t7;
-	} else t7 = $[35];
-	const removal = t7;
-	let t8;
-	if ($[36] !== accept || $[37] !== fieldState.disabled || $[38] !== fileHint || $[39] !== fileIcon || $[40] !== filesLabel || $[41] !== locale || $[42] !== maxFileSize || $[43] !== readOnly || $[44] !== removal || $[45] !== remove || $[46] !== value) {
-		t8 = value.length === 0 ? null : /* @__PURE__ */ jsx(FileInput.List, {
+	if ($[32] !== accept || $[33] !== fieldState.disabled || $[34] !== fileHint || $[35] !== fileIcon || $[36] !== filesLabel || $[37] !== locale || $[38] !== maxFileSize || $[39] !== readOnly || $[40] !== remove || $[41] !== removeIcon || $[42] !== removeLabel || $[43] !== value) {
+		t7 = value.length === 0 ? null : /* @__PURE__ */ jsx(FileInput.List, {
 			label: filesLabel,
 			onRemove: readOnly === true ? void 0 : remove,
-			children: value.map((file_3, index_1) => /* @__PURE__ */ jsx(FileInput.Item, {
+			children: value.map((file_3, index_1) => /* @__PURE__ */ jsx(StagedFile, {
 				id: keyOf(file_3, index_1),
 				file: file_3,
 				hint: fileHint(file_3.name, formatBytes(file_3.size, locale)),
 				invalid: isOversized(file_3, maxFileSize) || !isAccepted(file_3, accept ?? []),
 				disabled: fieldState.disabled,
 				icon: fileIcon,
-				...removal
+				removeLabel: readOnly === true ? void 0 : removeLabel,
+				removeIcon
 			}, keyOf(file_3, index_1)))
 		});
-		$[36] = accept;
-		$[37] = fieldState.disabled;
-		$[38] = fileHint;
-		$[39] = fileIcon;
-		$[40] = filesLabel;
-		$[41] = locale;
-		$[42] = maxFileSize;
-		$[43] = readOnly;
-		$[44] = removal;
-		$[45] = remove;
-		$[46] = value;
-		$[47] = t8;
-	} else t8 = $[47];
-	const tiles = t8;
-	let t9;
-	if ($[48] !== onBlur) {
-		t9 = (event) => {
+		$[32] = accept;
+		$[33] = fieldState.disabled;
+		$[34] = fileHint;
+		$[35] = fileIcon;
+		$[36] = filesLabel;
+		$[37] = locale;
+		$[38] = maxFileSize;
+		$[39] = readOnly;
+		$[40] = remove;
+		$[41] = removeIcon;
+		$[42] = removeLabel;
+		$[43] = value;
+		$[44] = t7;
+	} else t7 = $[44];
+	const tiles = t7;
+	let t8;
+	if ($[45] !== onBlur) {
+		t8 = (event) => {
 			if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) onBlur?.();
 		};
-		$[48] = onBlur;
-		$[49] = t9;
-	} else t9 = $[49];
+		$[45] = onBlur;
+		$[46] = t8;
+	} else t8 = $[46];
+	let t9;
+	if ($[47] !== optionalLabel) {
+		t9 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[47] = optionalLabel;
+		$[48] = t9;
+	} else t9 = $[48];
 	let t10;
-	if ($[50] !== label || $[51] !== optionalLabel || $[52] !== requiredness) {
-		t10 = /* @__PURE__ */ jsx(FileInput.Legend, {
-			requiredness,
-			optionalLabel,
-			children: label
-		});
-		$[50] = label;
-		$[51] = optionalLabel;
-		$[52] = requiredness;
-		$[53] = t10;
-	} else t10 = $[53];
+	if ($[49] !== label || $[50] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(FileInput.Legend, { children: [
+			label,
+			" ",
+			t9
+		] });
+		$[49] = label;
+		$[50] = t9;
+		$[51] = t10;
+	} else t10 = $[51];
 	const t11 = readOnly === true ? _temp2 : void 0;
 	let t12;
-	if ($[54] !== add) {
+	if ($[52] !== add) {
 		t12 = async (event_0) => {
 			add(await Promise.all(event_0.items.filter(isFileDropItem).map(_temp3)));
 		};
-		$[54] = add;
-		$[55] = t12;
-	} else t12 = $[55];
+		$[52] = add;
+		$[53] = t12;
+	} else t12 = $[53];
 	let t13;
-	if ($[56] !== accept || $[57] !== add || $[58] !== chooseIcon || $[59] !== chooseLabel || $[60] !== describedBy || $[61] !== dropHint || $[62] !== dropIcon || $[63] !== field.disabled || $[64] !== field.invalid || $[65] !== multiple || $[66] !== readOnly) {
-		t13 = readOnly === true ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileInput.Hint, {
-			icon: dropIcon,
-			children: dropHint
-		}), /* @__PURE__ */ jsx(FileInput.Trigger, {
-			label: chooseLabel,
-			icon: chooseIcon,
+	if ($[54] !== accept || $[55] !== add || $[56] !== chooseIcon || $[57] !== chooseLabel || $[58] !== describedBy || $[59] !== dropHint || $[60] !== dropIcon || $[61] !== field.disabled || $[62] !== field.invalid || $[63] !== multiple || $[64] !== readOnly) {
+		t13 = readOnly === true ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(FileInput.Hint, { children: [/* @__PURE__ */ jsx(FileInput.HintIcon, { children: dropIcon }), dropHint] }), /* @__PURE__ */ jsx(FileInput.Trigger, {
+			render: /* @__PURE__ */ jsx(Button$1, {
+				variant: "secondary",
+				size: "sm",
+				icon: chooseIcon,
+				children: chooseLabel
+			}),
 			disabled: field.disabled,
 			describedBy,
 			buttonRef: triggerRef,
@@ -217,27 +309,27 @@ var FileField = (t0) => {
 			acceptedFileTypes: accept,
 			onSelect: (files) => add(files === null ? [] : [...files])
 		})] });
-		$[56] = accept;
-		$[57] = add;
-		$[58] = chooseIcon;
-		$[59] = chooseLabel;
-		$[60] = describedBy;
-		$[61] = dropHint;
-		$[62] = dropIcon;
-		$[63] = field.disabled;
-		$[64] = field.invalid;
-		$[65] = multiple;
-		$[66] = readOnly;
-		$[67] = t13;
-	} else t13 = $[67];
+		$[54] = accept;
+		$[55] = add;
+		$[56] = chooseIcon;
+		$[57] = chooseLabel;
+		$[58] = describedBy;
+		$[59] = dropHint;
+		$[60] = dropIcon;
+		$[61] = field.disabled;
+		$[62] = field.invalid;
+		$[63] = multiple;
+		$[64] = readOnly;
+		$[65] = t13;
+	} else t13 = $[65];
 	let t14;
-	if ($[68] !== field.phase) {
-		t14 = field.phase !== "fresh" && /* @__PURE__ */ jsx(FileInput.Pending, {});
-		$[68] = field.phase;
-		$[69] = t14;
-	} else t14 = $[69];
+	if ($[66] !== field.phase) {
+		t14 = field.phase !== "fresh" && /* @__PURE__ */ jsx(FileInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[66] = field.phase;
+		$[67] = t14;
+	} else t14 = $[67];
 	let t15;
-	if ($[70] !== dropTargetLabel || $[71] !== field.disabled || $[72] !== fieldState || $[73] !== t11 || $[74] !== t12 || $[75] !== t13 || $[76] !== t14 || $[77] !== tiles) {
+	if ($[68] !== dropTargetLabel || $[69] !== field.disabled || $[70] !== fieldState || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t14 || $[75] !== tiles) {
 		t15 = /* @__PURE__ */ jsxs(FileInput.DropTarget, {
 			"aria-label": dropTargetLabel,
 			state: fieldState,
@@ -250,43 +342,43 @@ var FileField = (t0) => {
 				t14
 			]
 		});
-		$[70] = dropTargetLabel;
-		$[71] = field.disabled;
-		$[72] = fieldState;
-		$[73] = t11;
-		$[74] = t12;
-		$[75] = t13;
-		$[76] = t14;
-		$[77] = tiles;
-		$[78] = t15;
-	} else t15 = $[78];
+		$[68] = dropTargetLabel;
+		$[69] = field.disabled;
+		$[70] = fieldState;
+		$[71] = t11;
+		$[72] = t12;
+		$[73] = t13;
+		$[74] = t14;
+		$[75] = tiles;
+		$[76] = t15;
+	} else t15 = $[76];
 	let t16;
-	if ($[79] !== description || $[80] !== ids.descriptionId) {
+	if ($[77] !== description || $[78] !== ids.descriptionId) {
 		t16 = /* @__PURE__ */ jsx(FileInput.Description, {
 			id: ids.descriptionId,
 			children: description
 		});
-		$[79] = description;
-		$[80] = ids.descriptionId;
-		$[81] = t16;
-	} else t16 = $[81];
+		$[77] = description;
+		$[78] = ids.descriptionId;
+		$[79] = t16;
+	} else t16 = $[79];
 	let t17;
-	if ($[82] !== ids.errorId || $[83] !== messages) {
+	if ($[80] !== ids.errorId || $[81] !== messages) {
 		t17 = /* @__PURE__ */ jsx(FileInput.Error, {
 			id: ids.errorId,
 			children: messages
 		});
-		$[82] = ids.errorId;
-		$[83] = messages;
-		$[84] = t17;
-	} else t17 = $[84];
+		$[80] = ids.errorId;
+		$[81] = messages;
+		$[82] = t17;
+	} else t17 = $[82];
 	let t18;
-	if ($[85] !== className || $[86] !== fieldState || $[87] !== t10 || $[88] !== t15 || $[89] !== t16 || $[90] !== t17 || $[91] !== t9) {
+	if ($[83] !== className || $[84] !== fieldState || $[85] !== t10 || $[86] !== t15 || $[87] !== t16 || $[88] !== t17 || $[89] !== t8) {
 		t18 = /* @__PURE__ */ jsxs(FileInput.Root, {
 			state: fieldState,
 			disabled: fieldState.disabled,
 			className,
-			onBlur: t9,
+			onBlur: t8,
 			children: [
 				t10,
 				t15,
@@ -294,15 +386,15 @@ var FileField = (t0) => {
 				t17
 			]
 		});
-		$[85] = className;
-		$[86] = fieldState;
-		$[87] = t10;
-		$[88] = t15;
-		$[89] = t16;
-		$[90] = t17;
-		$[91] = t9;
-		$[92] = t18;
-	} else t18 = $[92];
+		$[83] = className;
+		$[84] = fieldState;
+		$[85] = t10;
+		$[86] = t15;
+		$[87] = t16;
+		$[88] = t17;
+		$[89] = t8;
+		$[90] = t18;
+	} else t18 = $[90];
 	return t18;
 };
 function _temp(file_1, index) {

package/dist/components/file-field/file-field.module.js

@@ -1,8 +1,8 @@
 import './file-field.css';// src/components/file-field/file-field.module.scss
-var dropTarget = "_dropTarget_1ap1m_3";
-var hint = "_hint_1ap1m_82";
-var hintIcon = "_hintIcon_1ap1m_92";
-var list = "_list_1ap1m_96";
+var dropTarget = "_dropTarget_1rv6d_3";
+var hint = "_hint_1rv6d_148";
+var hintIcon = "_hintIcon_1rv6d_158";
+var list = "_list_1rv6d_162";
 var file_field_module_default = {
 	dropTarget,
 	hint,

package/dist/components/file-field/file-input.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentProps, ReactNode, Ref } from "react";
+import type { useRender } from "@base-ui/react/use-render";
 import { type DropZoneProps as AriaDropZoneProps, type FileTriggerProps as AriaFileTriggerProps, type Key } from "react-aria-components";
+import { type AttachmentTileRootProps } from "../attachment-tile/index.ts";
 import { Field, type FieldLabelProps, type FieldRootProps, type FieldState } from "../field/index.ts";
-export type FileInputRootProps = FieldRootProps & Readonly<{
+export type FileInputRootProps = Omit<FieldRootProps, "requiredness"> & Readonly<{
     /** The states projected onto the field as `data-*` attributes. */
     state?: FieldState;
 }>;
@@ -18,15 +20,28 @@ export type FileInputDropTargetProps = Omit<AriaDropZoneProps, "className" | "ar
 }>;
 /** The area files are dropped on, holding the hint, the picker button and the staged files. */
 declare const FileInputDropTarget: ({ state, className, ...props }: FileInputDropTargetProps) => ReactNode;
-export type FileInputHintProps = ComponentProps<"p"> & Readonly<{
-    /** Drawn above the prompt, such as an upload icon. */
-    icon?: ReactNode;
-}>;
-/** The prompt inside the drop target, with an optional `icon` above it. */
-declare const FileInputHint: ({ className, icon, children, ...props }: FileInputHintProps) => ReactNode;
+/**
+ * The prompt inside the drop target, holding its text and an optional
+ * `HintIcon` above it.
+ *
+ * @example
+ * <FileInput.Hint>
+ * 	<FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+ * 	Drag files here
+ * </FileInput.Hint>
+ */
+declare const FileInputHint: ({ className, ...props }: ComponentProps<"p">) => ReactNode;
+/**
+ * The glyph above the prompt, such as an upload icon. Renders nothing without
+ * children.
+ *
+ * @example
+ * <FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+ */
+declare const FileInputHintIcon: ({ className, children, ...props }: ComponentProps<"span">) => ReactNode;
 export type FileInputTriggerProps = Omit<AriaFileTriggerProps, "children"> & Readonly<{
-    /** Visible label on the picker button. */
-    label: string;
+    /** The button to render, such as `<Button variant="secondary" size="sm">Choose files</Button>`. */
+    render: useRender.RenderProp;
     disabled?: boolean;
     /** Ids of the description and error text, chained onto the button. */
     describedBy?: string;
@@ -34,11 +49,18 @@ export type FileInputTriggerProps = Omit<AriaFileTriggerProps, "children"> & Rea
     buttonRef?: Ref<HTMLButtonElement>;
     /** Marks the picker button as the field's invalid control. */
     invalid?: boolean;
-    /** Drawn before the button's label, such as an attach icon. */
-    icon?: ReactNode;
 }>;
-/** The button that opens the file dialog. */
-declare const FileInputTrigger: ({ label, disabled, describedBy, buttonRef, invalid, icon, ...props }: FileInputTriggerProps) => ReactNode;
+/**
+ * The button that opens the file dialog. It renders whichever button it is
+ * given.
+ *
+ * @example
+ * <FileInput.Trigger
+ * 	onSelect={onSelect}
+ * 	render={<Button variant="secondary" size="sm" icon={<AttachFileIcon />}>Choose files</Button>}
+ * />
+ */
+declare const FileInputTrigger: ({ render, disabled, describedBy, buttonRef, invalid, ...props }: FileInputTriggerProps) => ReactNode;
 export type FileInputListProps = Readonly<{
     /** Accessible name for the group of tiles. */
     label: string;
@@ -49,36 +71,29 @@ export type FileInputListProps = Readonly<{
 }>;
 /** The staged files, as a group of removable tiles. */
 declare const FileInputList: ({ label, onRemove, children, className, }: FileInputListProps) => ReactNode;
-/** A tile's remove button: its name and icon together, or neither for a fixed tile. */
-export type FileInputItemRemoval = Readonly<{
-    /** Accessible name for the remove button. */
-    removeLabel: string;
-    /** The remove button's icon, such as a cross. */
-    removeIcon: ReactNode;
-}> | Readonly<{
-    removeLabel?: undefined;
-    removeIcon?: undefined;
-}>;
-export type FileInputItemProps = Readonly<{
+export type FileInputItemProps = Omit<AttachmentTileRootProps, "render" | "id"> & Readonly<{
     /** Key the surrounding list removes this file by. */
     id: string;
-    file: File;
-    /** Tooltip text for the tile, such as "invoice.pdf (12 kB)". */
-    hint: string;
-    /** Marks the tile as rejected, such as over the size limit. */
-    invalid?: boolean;
+    /** The file's name, which the tile is read and typed to as. */
+    textValue: string;
     disabled?: boolean;
-    /** Drawn on a tile that has no image preview, such as a file icon. */
-    icon?: ReactNode;
-}> & FileInputItemRemoval;
-/** One staged file as an `AttachmentTile`. */
-declare const FileInputItem: ({ invalid, disabled, ...props }: FileInputItemProps) => ReactNode;
+}>;
+/**
+ * One staged file's tile in the `List`, holding `AttachmentTile`'s parts.
+ *
+ * @example
+ * <FileInput.Item id={id} textValue={file.name}>
+ * 	<AttachmentTile.Preview name={file.name} src={src}>…</AttachmentTile.Preview>
+ * </FileInput.Item>
+ */
+declare const FileInputItem: ({ id, textValue, disabled, ...props }: FileInputItemProps) => ReactNode;
 /** The parts of a file input. */
 export type FileInputParts = Readonly<{
     Root: typeof FileInputRoot;
     Legend: typeof FileInputLegend;
     DropTarget: typeof FileInputDropTarget;
     Hint: typeof FileInputHint;
+    HintIcon: typeof FileInputHintIcon;
     Trigger: typeof FileInputTrigger;
     Pending: typeof Field.Pending;
     List: typeof FileInputList;
@@ -88,18 +103,29 @@ export type FileInputParts = Readonly<{
 }>;
 /**
  * The styled parts of a file input: the field frame around react-aria's
- * `DropZone` and `FileTrigger`, plus the staged files as removable
- * `AttachmentTile`s. The `Root` is a fieldset named by its `Legend`. For the
+ * `DropZone` and `FileTrigger`, plus the staged files as removable tiles built
+ * from `AttachmentTile`'s parts. The `Root` is a fieldset named by its `Legend`. For the
  * ordinary case, use `FileField`.
  *
  * @example
  * <FileInput.Root state={{ requiredness: "optional" }}>
- * 	<FileInput.Legend optionalLabel="optional">Attachments</FileInput.Legend>
+ * 	<FileInput.Legend>Attachments <Field.Requiredness optionalLabel="optional" /></FileInput.Legend>
  * 	<FileInput.DropTarget aria-label="Drop zone for attachments" onDrop={onDrop}>
- * 		<FileInput.Hint icon={<UploadFileIcon />}>Drag files here</FileInput.Hint>
- * 		<FileInput.Trigger label="Choose files" icon={<AttachFileIcon />} onSelect={onSelect} />
+ * 		<FileInput.Hint>
+ * 			<FileInput.HintIcon><UploadFileIcon /></FileInput.HintIcon>
+ * 			Drag files here
+ * 		</FileInput.Hint>
+ * 		<FileInput.Trigger
+ * 			onSelect={onSelect}
+ * 			render={<Button variant="secondary" size="sm" icon={<AttachFileIcon />}>Choose files</Button>}
+ * 		/>
  * 		<FileInput.List label="Files for attachments" onRemove={onRemove}>
- * 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" removeIcon={<CloseIcon />} />
+ * 			<FileInput.Item id={id} textValue={file.name}>
+ * 				<AttachmentTile.Preview name={file.name} src={undefined}>
+ * 					<AttachmentTile.Extension />
+ * 					<AttachmentTile.Name />
+ * 				</AttachmentTile.Preview>
+ * 			</FileInput.Item>
  * 		</FileInput.List>
  * 	</FileInput.DropTarget>
  * </FileInput.Root>