beez-ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -4,6 +4,25 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [0.10.0] - 2026-10-03
+
+- 6769ea7 agrega funcionalidad de persistencia y animación al sidebar
+- 3a84ef1 agrega actualización de la dependencia «beez-rp» a la versión 0.6.1
+- 2723ab1 Bump beez-rp to 0.6.0 (#4)
+- 811829a update «beez-rp» dependency to version 0.5.0
+- ab5c997 build: bump beez-rp to 0.4.0
+- d267b0b add checks configuration to prevent redundant validation before version bump
+- 041a0f8 Migrate linting from ESLint to oxlint (#3)
+
+## [0.9.1] - 2026-09-27
+
+### Added
+
+- `FileUploadDropZone` acepta `labels.uploadActionMobileSuffix`, un texto que completa la acción de subir en pantallas chicas.
+- `FileUploadItem` acepta `icon` para mostrar un ícono propio por tipo de archivo y `progressVariant="fill"` para indicar el progreso rellenando el fondo del ítem.
+- `AccountMenu` acepta clases para el texto, nombre, email y chevron del disparador, el encabezado, su avatar y el ítem de sesión, por ejemplo para ocultar la identidad en un sidebar colapsado.
+- `FilterPresetSaveButton` acepta `className` para adaptar el botón al slot de acción de un input.
+
 ## [0.9.0] - 2026-09-27
 
 ### Added

package/README.md

@@ -80,7 +80,7 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
 - `Dialog` y `AlertDialog` suben con spring; `Sheet` entra desde su borde con spring
   y sale con la curva de cajón (0.24 s), sin demorar la siguiente interacción.
 - `GlideSlot` desliza el indicador activo entre ítems como un `layoutId` compartido:
-  la pestaña activa de `Tabs` (fondo o subrayado), el ítem activo de `SidebarMenu`, la
+  la pestaña activa de `Tabs` (fondo o subrayado), la
   página actual de `PaginationContent`, y al navegar con teclado el ítem resaltado de
   `DropdownMenu` y `Select` y la sugerencia activa de `FilterQueryBar`. Con el puntero,
   esos resaltados lo siguen al instante: el propio puntero ya marca la posición.
@@ -91,6 +91,10 @@ siguen los tokens de [beui motion](https://beui.dev/components/motion):
   (grupos y columnas) giran en lugar de cambiar de ícono; CSS define el ángulo final.
 - Las opciones del `Select` entran escalonadas con blur (las primeras 10; el resto
   solo se desvanece) y los checks de ítems de `Select` y `DropdownMenu` aparecen con pop.
+- `Sidebar` sigue a [beui animated sidebar](https://beui.dev/components/motion/animated-sidebar):
+  el ancho cambia con un spring entre el panel y el riel de íconos, las etiquetas se
+  desvanecen al colapsar, una píldora compartida sigue al ítem activo y al hovereado, los
+  submenús se despliegan escalonados y en pantallas chicas se abre como hoja con foco atrapado.
 - El ícono de `AnimatedThemeToggler` cambia con blur y escala; el botón de cierre de
   `Dialog` aparece con un pop demorado.
 - El contenido de `Tabs` entra con un desplazamiento de 4 px y `Alert` entra con blur.
@@ -158,7 +162,7 @@ Next y TanStack Router son peers opcionales aislados en sus entrypoints. El prov
 
 - Tema: `AnimatedThemeToggler` y `ThemedToaster` consumen el contexto compartido. Sus props explícitas de tema siguen disponibles para usos controlados.
 - Navegación: `PaginationNext`, `PaginationPrevious` y `PaginationLink` usan anclas nativas. El prop opcional `component` admite el adaptador del router que elija la app. Sin proveedor usa el elemento nativo; con el proveedor de Next usa su navegación cliente.
-- Sidebar: `defaultOpen` y el modo controlado conservan la semántica de LaTribu. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
+- Sidebar: en `SidebarProvider`, `defaultOpen` y el modo controlado conservan la semántica de LaTribu. Los ítems con `href` navegan con el adaptador de router del proveedor. `storageKey` activa opcionalmente persistencia local segura tras hidratar, sin cambiar la cookie pública `sidebar_state` ni sus siete días de duración.
 - Formularios y tablas: el consumidor provee sus datos, validaciones y callbacks. No se importan servicios, modelos de negocio ni endpoints de agenda-mensual.
 
 ## Componentes incorporados desde agenda-mensual
@@ -180,7 +184,7 @@ Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron des
 - Cuenta: `AccountMenu`, con inicio de sesión mediante `signInHref` o `onSignIn`.
 - Contenido: `RichTextContent`, `RichMarkdownContent`, `RichLinkEditor` y `useRichLinkEditor`. Solo interpretan links en markdown, URLs sueltas, listas y negrita; el HTML del contenido nunca se renderiza como markup.
 - Filtros guardados: `FilterPresetsBar` y `FilterPresetSaveButton` guardan, aplican, editan y borran consultas con nombre de `FilterQueryBar`. La app decide dónde persistirlas; `parseFilterPresets` valida lo que vuelve del almacenamiento.
-- Archivos: `FileUpload`, `FileUploadDropZone`, `FileUploadList` y `FileUploadItem` validan tipo y tamaño, pero no suben archivos: el progreso y los errores los informa la app.
+- Archivos: `FileUpload`, `FileUploadDropZone`, `FileUploadList` y `FileUploadItem` validan tipo y tamaño, pero no suben archivos: el progreso y los errores los informa la app. Cada ítem acepta un ícono propio y un progreso en barra (`bar`) o de relleno (`fill`).
 - Utilidades: `formatFileSize`, `copyTextToClipboard` y búsqueda difusa.
 
 Los hooks de uso general se importan desde `beez-ui/hooks`: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion` y `useHorizontalSwipe` (con `resolveHorizontalSwipe`). `useIsMobile` también sigue disponible desde la raíz.
@@ -222,11 +226,11 @@ pnpm build
 pnpm release:prepare
 ```
 
-`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta ESLint 10, los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
+`pnpm build` genera las declaraciones con TypeScript 7, JavaScript con Oxc/React Compiler y CSS con el CLI de Tailwind. `pnpm check` ejecuta oxlint (configurado en `.oxlintrc.json`), los typechecks separados de código y tests con TypeScript 7, y Vitest 5. `tests/tsconfig.json` incorpora los matchers de Testing Library y los tipos de Vite sin incluirlos en el código de producción. `test:browser` verifica una app React/Vite nativa y una app Next real en Chromium y WebKit, tanto en desktop como en móvil. Los tests unitarios importan los archivos compilados. Los consumidores de navegador no instalan plugins de Tailwind, y una prueba adicional sirve el tarball por HTTP sin procesadores CSS para verificar estilos computados y carga de fuentes. Una prueba adicional instala el tarball en un consumidor aislado sin Next y verifica render, filtrado y declaraciones públicas.
 
 Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/hooks` mediante rutas explícitas a las declaraciones compiladas en `tests/tsconfig.json`. Ejecutar `pnpm build` después de clonar o si falta `dist`; los comandos de validación completos ya lo hacen. Si el editor conserva diagnósticos anteriores después del build, reiniciar su servidor de TypeScript.
 
-El compilador `tsc` es TypeScript 7. Para `typescript-eslint`, se mantiene la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias; no reemplaza el compilador de los typechecks.
+El compilador `tsc` es TypeScript 7. El paquete `typescript` apunta a la [API de compatibilidad oficial de TypeScript 6](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0) mediante un alias, porque el plugin de docgen de Storybook lo declara como dependencia peer; no reemplaza el compilador de los typechecks. El lint no depende de él: oxlint analiza TypeScript sin el compilador.
 
 ## Crear y publicar una versión
 

package/dist/components/account-menu.d.ts

@@ -10,7 +10,17 @@ export interface AccountMenuLabels {
 export interface AccountMenuClassNames {
     trigger?: string;
     triggerAvatar?: string;
+    /** Name and email block of the `sidebar` trigger, for example to hide it in a collapsed sidebar. */
+    triggerText?: string;
+    triggerName?: string;
+    triggerEmail?: string;
+    triggerChevron?: string;
     content?: string;
+    /** Identity header at the top of the menu. */
+    header?: string;
+    headerAvatar?: string;
+    /** Sign-in and sign-out item. */
+    item?: string;
     /** Badge shown while authenticated, when `showStatusBadge` is enabled. */
     connectedBadge?: string;
     /** Badge shown while signed out, when `showStatusBadge` is enabled. */

package/dist/components/account-menu.js

@@ -105,7 +105,7 @@ function AccountAvatar(t0) {
 * @returns The trigger and its menu.
 */
 export function AccountMenu(t0) {
-	const $ = _c(70);
+	const $ = _c(79);
 	const { name, email, status, image: t1, avatarFallback, onSignOut, signOutDisabled: t2, onSignIn, signInHref, triggerVariant: t3, showStatusBadge: t4, tooltipLabel, labels, classNames, align: t5, side: t6, sideOffset: t7, children } = t0;
 	const image = t1 === undefined ? null : t1;
 	const signOutDisabled = t2 === undefined ? false : t2;
@@ -184,29 +184,33 @@ export function AccountMenu(t0) {
 		t16 = $[17];
 	}
 	let t17;
-	if ($[18] !== email || $[19] !== name || $[20] !== triggerVariant) {
+	if ($[18] !== classNames?.triggerChevron || $[19] !== classNames?.triggerEmail || $[20] !== classNames?.triggerName || $[21] !== classNames?.triggerText || $[22] !== email || $[23] !== name || $[24] !== triggerVariant) {
 		t17 = triggerVariant === "sidebar" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("span", {
-			className: "grid min-w-0 flex-1",
+			className: cn("grid min-w-0 flex-1", classNames?.triggerText),
 			children: [/* @__PURE__ */ _jsx("span", {
-				className: "truncate text-sm font-semibold",
+				className: cn("truncate text-sm font-semibold", classNames?.triggerName),
 				children: name
 			}), /* @__PURE__ */ _jsx("span", {
-				className: "truncate text-xs text-muted-foreground",
+				className: cn("truncate text-xs text-muted-foreground", classNames?.triggerEmail),
 				children: email
 			})]
 		}), /* @__PURE__ */ _jsx(ChevronDownIcon, {
 			"aria-hidden": "true",
-			className: "size-4 shrink-0 text-muted-foreground"
+			className: cn("size-4 shrink-0 text-muted-foreground", classNames?.triggerChevron)
 		})] }) : null;
-		$[18] = email;
-		$[19] = name;
-		$[20] = triggerVariant;
-		$[21] = t17;
+		$[18] = classNames?.triggerChevron;
+		$[19] = classNames?.triggerEmail;
+		$[20] = classNames?.triggerName;
+		$[21] = classNames?.triggerText;
+		$[22] = email;
+		$[23] = name;
+		$[24] = triggerVariant;
+		$[25] = t17;
 	} else {
-		t17 = $[21];
+		t17 = $[25];
 	}
 	let t18;
-	if ($[22] !== resolvedLabels.trigger || $[23] !== t14 || $[24] !== t16 || $[25] !== t17 || $[26] !== triggerVariant) {
+	if ($[26] !== resolvedLabels.trigger || $[27] !== t14 || $[28] !== t16 || $[29] !== t17 || $[30] !== triggerVariant) {
 		const triggerButton = /* @__PURE__ */ _jsxs("button", {
 			"data-slot": "account-menu-trigger",
 			"data-variant": triggerVariant,
@@ -219,187 +223,204 @@ export function AccountMenu(t0) {
 			asChild: true,
 			children: triggerButton
 		});
-		$[22] = resolvedLabels.trigger;
-		$[23] = t14;
-		$[24] = t16;
-		$[25] = t17;
-		$[26] = triggerVariant;
-		$[27] = t18;
+		$[26] = resolvedLabels.trigger;
+		$[27] = t14;
+		$[28] = t16;
+		$[29] = t17;
+		$[30] = triggerVariant;
+		$[31] = t18;
 	} else {
-		t18 = $[27];
+		t18 = $[31];
 	}
 	const trigger = t18;
 	let t19;
-	if ($[28] !== tooltipLabel || $[29] !== trigger) {
+	if ($[32] !== tooltipLabel || $[33] !== trigger) {
 		t19 = tooltipLabel ? /* @__PURE__ */ _jsx(TooltipTrigger, {
 			asChild: true,
 			children: trigger
 		}) : trigger;
-		$[28] = tooltipLabel;
-		$[29] = trigger;
-		$[30] = t19;
+		$[32] = tooltipLabel;
+		$[33] = trigger;
+		$[34] = t19;
 	} else {
-		t19 = $[30];
+		t19 = $[34];
 	}
 	const t20 = classNames?.content;
 	let t21;
-	if ($[31] !== t20) {
+	if ($[35] !== t20) {
 		t21 = cn("min-w-56", t20);
-		$[31] = t20;
-		$[32] = t21;
+		$[35] = t20;
+		$[36] = t21;
+	} else {
+		t21 = $[36];
+	}
+	const t22 = classNames?.header;
+	let t23;
+	if ($[37] !== t22) {
+		t23 = cn("grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5", t22);
+		$[37] = t22;
+		$[38] = t23;
 	} else {
-		t21 = $[32];
+		t23 = $[38];
 	}
-	let t22;
-	if ($[33] !== avatarProps) {
-		t22 = /* @__PURE__ */ _jsx(AccountAvatar, {
+	const t24 = classNames?.headerAvatar;
+	let t25;
+	if ($[39] !== avatarProps || $[40] !== t24) {
+		t25 = /* @__PURE__ */ _jsx(AccountAvatar, {
 			...avatarProps,
-			isDecorative: true
+			isDecorative: true,
+			className: t24
 		});
-		$[33] = avatarProps;
-		$[34] = t22;
+		$[39] = avatarProps;
+		$[40] = t24;
+		$[41] = t25;
 	} else {
-		t22 = $[34];
+		t25 = $[41];
 	}
-	let t23;
-	if ($[35] !== name) {
-		t23 = /* @__PURE__ */ _jsx("span", {
+	let t26;
+	if ($[42] !== name) {
+		t26 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-sm leading-tight font-semibold",
 			children: name
 		});
-		$[35] = name;
-		$[36] = t23;
+		$[42] = name;
+		$[43] = t26;
 	} else {
-		t23 = $[36];
+		t26 = $[43];
 	}
-	let t24;
-	if ($[37] !== email) {
-		t24 = /* @__PURE__ */ _jsx("span", {
+	let t27;
+	if ($[44] !== email) {
+		t27 = /* @__PURE__ */ _jsx("span", {
 			className: "truncate text-xs leading-tight text-muted-foreground",
 			children: email
 		});
-		$[37] = email;
-		$[38] = t24;
+		$[44] = email;
+		$[45] = t27;
 	} else {
-		t24 = $[38];
+		t27 = $[45];
 	}
-	let t25;
-	if ($[39] !== t23 || $[40] !== t24) {
-		t25 = /* @__PURE__ */ _jsxs("span", {
+	let t28;
+	if ($[46] !== t26 || $[47] !== t27) {
+		t28 = /* @__PURE__ */ _jsxs("span", {
 			className: "grid min-w-0 gap-px",
-			children: [t23, t24]
+			children: [t26, t27]
 		});
-		$[39] = t23;
-		$[40] = t24;
-		$[41] = t25;
+		$[46] = t26;
+		$[47] = t27;
+		$[48] = t28;
 	} else {
-		t25 = $[41];
+		t28 = $[48];
 	}
-	let t26;
-	if ($[42] !== t22 || $[43] !== t25) {
-		t26 = /* @__PURE__ */ _jsxs("div", {
-			className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 px-2 py-1.5",
-			children: [t22, t25]
+	let t29;
+	if ($[49] !== t23 || $[50] !== t25 || $[51] !== t28) {
+		t29 = /* @__PURE__ */ _jsxs("div", {
+			className: t23,
+			children: [t25, t28]
 		});
-		$[42] = t22;
-		$[43] = t25;
-		$[44] = t26;
+		$[49] = t23;
+		$[50] = t25;
+		$[51] = t28;
+		$[52] = t29;
 	} else {
-		t26 = $[44];
+		t29 = $[52];
 	}
-	let t27;
-	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-		t27 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
-		$[45] = t27;
+	let t30;
+	if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = /* @__PURE__ */ _jsx(DropdownMenuSeparator, {});
+		$[53] = t30;
 	} else {
-		t27 = $[45];
+		t30 = $[53];
 	}
-	let t28;
-	if ($[46] !== isAuthenticated || $[47] !== onSignIn || $[48] !== onSignOut || $[49] !== resolvedLabels.signIn || $[50] !== resolvedLabels.signOut || $[51] !== signInHref || $[52] !== signOutDisabled) {
-		t28 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+	let t31;
+	if ($[54] !== classNames?.item || $[55] !== isAuthenticated || $[56] !== onSignIn || $[57] !== onSignOut || $[58] !== resolvedLabels.signIn || $[59] !== resolvedLabels.signOut || $[60] !== signInHref || $[61] !== signOutDisabled) {
+		t31 = isAuthenticated ? /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+			className: classNames?.item,
 			disabled: signOutDisabled,
 			onSelect: () => void onSignOut(),
 			children: [/* @__PURE__ */ _jsx(LogOutIcon, { "aria-hidden": "true" }), resolvedLabels.signOut]
 		}) : signInHref ? /* @__PURE__ */ _jsx(DropdownMenuItem, {
 			asChild: true,
+			className: classNames?.item,
 			children: /* @__PURE__ */ _jsxs(Link, {
 				href: signInHref,
 				children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
 			})
 		}) : /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+			className: classNames?.item,
 			onSelect: () => onSignIn?.(),
 			children: [/* @__PURE__ */ _jsx(LogInIcon, { "aria-hidden": "true" }), resolvedLabels.signIn]
 		});
-		$[46] = isAuthenticated;
-		$[47] = onSignIn;
-		$[48] = onSignOut;
-		$[49] = resolvedLabels.signIn;
-		$[50] = resolvedLabels.signOut;
-		$[51] = signInHref;
-		$[52] = signOutDisabled;
-		$[53] = t28;
+		$[54] = classNames?.item;
+		$[55] = isAuthenticated;
+		$[56] = onSignIn;
+		$[57] = onSignOut;
+		$[58] = resolvedLabels.signIn;
+		$[59] = resolvedLabels.signOut;
+		$[60] = signInHref;
+		$[61] = signOutDisabled;
+		$[62] = t31;
 	} else {
-		t28 = $[53];
+		t31 = $[62];
 	}
-	let t29;
-	if ($[54] !== align || $[55] !== children || $[56] !== side || $[57] !== sideOffset || $[58] !== t21 || $[59] !== t26 || $[60] !== t28) {
-		t29 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+	let t32;
+	if ($[63] !== align || $[64] !== children || $[65] !== side || $[66] !== sideOffset || $[67] !== t21 || $[68] !== t29 || $[69] !== t31) {
+		t32 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
 			"data-slot": "account-menu-content",
 			align,
 			side,
 			sideOffset,
 			className: t21,
 			children: [
-				t26,
-				t27,
+				t29,
+				t30,
 				children,
-				t28
+				t31
 			]
 		});
-		$[54] = align;
-		$[55] = children;
-		$[56] = side;
-		$[57] = sideOffset;
-		$[58] = t21;
-		$[59] = t26;
-		$[60] = t28;
-		$[61] = t29;
+		$[63] = align;
+		$[64] = children;
+		$[65] = side;
+		$[66] = sideOffset;
+		$[67] = t21;
+		$[68] = t29;
+		$[69] = t31;
+		$[70] = t32;
 	} else {
-		t29 = $[61];
+		t32 = $[70];
 	}
-	let t30;
-	if ($[62] !== t19 || $[63] !== t29) {
-		t30 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t19, t29] });
-		$[62] = t19;
-		$[63] = t29;
-		$[64] = t30;
+	let t33;
+	if ($[71] !== t19 || $[72] !== t32) {
+		t33 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t19, t32] });
+		$[71] = t19;
+		$[72] = t32;
+		$[73] = t33;
 	} else {
-		t30 = $[64];
+		t33 = $[73];
 	}
-	const menu = t30;
+	const menu = t33;
 	if (!tooltipLabel) {
 		return menu;
 	}
-	let t31;
-	if ($[65] !== tooltipLabel) {
-		t31 = /* @__PURE__ */ _jsx(TooltipContent, {
+	let t34;
+	if ($[74] !== tooltipLabel) {
+		t34 = /* @__PURE__ */ _jsx(TooltipContent, {
 			side: "bottom",
 			sideOffset: 8,
 			children: tooltipLabel
 		});
-		$[65] = tooltipLabel;
-		$[66] = t31;
+		$[74] = tooltipLabel;
+		$[75] = t34;
 	} else {
-		t31 = $[66];
+		t34 = $[75];
 	}
-	let t32;
-	if ($[67] !== menu || $[68] !== t31) {
-		t32 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t31] });
-		$[67] = menu;
-		$[68] = t31;
-		$[69] = t32;
+	let t35;
+	if ($[76] !== menu || $[77] !== t34) {
+		t35 = /* @__PURE__ */ _jsxs(Tooltip, { children: [menu, t34] });
+		$[76] = menu;
+		$[77] = t34;
+		$[78] = t35;
 	} else {
-		t32 = $[69];
+		t35 = $[78];
 	}
-	return t32;
+	return t35;
 }

package/dist/components/file-upload.d.ts

@@ -2,9 +2,11 @@
  * File upload building blocks: a drop zone that validates picked or dropped files, and a list of
  * files with upload progress, failure and retry. Uploading itself stays with the application.
  */
-import { type ComponentProps } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 export interface FileUploadDropZoneLabels {
     uploadAction: string;
+    /** Appended to the action on narrow screens, where drag and drop is not offered. Empty by default. */
+    uploadActionMobileSuffix: string;
     /** Shown next to the action on wide screens. */
     dragAndDrop: string;
     /** Accessible name of the hidden file input. */
@@ -55,15 +57,23 @@ export interface FileUploadItemProps {
     onRetry?: () => void;
     locale?: string;
     labels?: Partial<FileUploadItemLabels>;
+    /** File illustration, such as an icon for its type. Defaults to a generic file icon. */
+    icon?: ReactNode;
+    /**
+     * `bar` shows a progress bar with the percentage under the name; `fill` tints the item
+     * background from left to right and shows the percentage next to the status.
+     */
+    progressVariant?: FileUploadProgressVariant;
     className?: string;
 }
+export type FileUploadProgressVariant = "bar" | "fill";
 /**
- * Renders one file with its size, status, progress bar, delete action and, after a failure, a
- * retry action. Place it inside `FileUploadList` so additions and removals animate.
+ * Renders one file with its size, status, progress (a bar or a background fill), delete action
+ * and, after a failure, a retry action. Place it inside `FileUploadList` so additions and removals animate.
  * @param props - File metadata, progress, callbacks and optional copy.
  * @returns The list item.
  */
-export declare function FileUploadItem({ name, size, progress, failed, onDelete, isDeleteDisabled, onRetry, locale, labels, className, }: FileUploadItemProps): import("react").JSX.Element;
+export declare function FileUploadItem({ name, size, progress, failed, onDelete, isDeleteDisabled, onRetry, locale, labels, icon, progressVariant, className, }: FileUploadItemProps): import("react").JSX.Element;
 /**
  * Lays out a drop zone and its file list.
  * @param props - Native `div` attributes.