beez-ui 0.8.2 → 0.9.1

package/CHANGELOG.md

@@ -4,6 +4,35 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [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
+
+- `ReactionButton` acepta `activeColor` para elegir el color del ícono activo (por defecto, el color destructivo).
+- Entrypoint `beez-ui/hooks` con los hooks de uso general: `useIsMobile`, `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe` y `resolveHorizontalSwipe`.
+- `FilterPresetsBar` y `FilterPresetSaveButton` para guardar, aplicar, editar y borrar consultas con nombre de `FilterQueryBar`, con `parseFilterPresets` para validar las que la app restaura de su almacenamiento.
+
+### Changed
+
+- `useIsHydrated`, `useViewerTimeZone`, `usePrefersReducedMotion`, `useHorizontalSwipe`, `resolveHorizontalSwipe` y `HORIZONTAL_SWIPE_DIRECTION` se importan desde `beez-ui/hooks` en lugar de la raíz; `useIsMobile` sigue también en la raíz.
+
+### Removed
+
+- Se retiran `EmptyState`, `ErrorState`, `BouncingDotsLoader` e `InfoPopover`: son envoltorios simples que cada app mantiene con su propio diseño.
+- `getNameInitials` deja de ser público.
+- Se retiran componentes atados a un solo producto que llegaron en 0.8.0: `ExternalBrowserHandoff`, `OpenInBrowserCta`, `detectInAppBrowser`, `buildExternalBrowserUrl`, `NotificationBell`, `NotificationPanel`, `MonthGrid`, `MonthCalendarHeader`, `PwaUpdateControl` y `ConfirmDeleteButton`. Quien los use debe mantener su propia versión.
+- Se retiran los helpers `createMonthGridDays`, `splitCalendarWeeks`, `groupItemsByDateKey`, `shiftMonthKey`, `useMonthTransitionDirection`, `useMinuteClock`, `advanceMinuteClockTo`, `navigateToUrl`, `reloadCurrentPage`, `replaceCurrentUrlSearchParams` y `replaceCurrentUrlSearchParamValues`.
+- Se retira el entrypoint opcional `beez-ui/emoji-picker` y la dependencia opcional `emoji-picker-react`.
+
 ## [0.8.2] - 2026-09-27
 
 ### Fixed

package/README.md

@@ -173,19 +173,21 @@ Los componentes compartidos conservan el tema de LaTribu. Se incorporaron atribu
 
 ## Componentes de producto reutilizables
 
-Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español.
+Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron desacoplados de su dominio: reciben datos ya resueltos y textos por props, con valores por defecto en español. Solo se incorporan piezas genéricas que no fijan decisiones de un producto y que no son una composición trivial de primitivas existentes; los flujos propios de una app (notificaciones, calendarios de eventos, handoff de navegadores internos, actualización de PWA) y los envoltorios simples (estados vacío y de error, loaders, popovers de ayuda) se mantienen en esa app.
 
 - Movimiento: `PresenceSwap`, `AnimatedCount`, `AnimatedCollapse` y `AnimatedListItem`. Los tokens que usa la biblioteca se exportan desde la raíz y desde `beez-ui/motion-tokens`, así las apps animan sus superficies con las mismas curvas y springs en lugar de copiarlos.
-- Feedback: `BouncingDotsLoader`, `ProgressRing`, `EmptyState`, `ErrorState`, `InfoPopover`, `ConfirmDeleteButton` y `ReactionButton`. El loader y la entrada del título de `MonthCalendarHeader` usan keyframes CSS porque se renderizan en el servidor; el fallback de movimiento reducido los detiene.
-- Cuenta y sesión: `AccountMenu` (inicio de sesión mediante `signInHref` o `onSignIn`), `OpenInBrowserCta`, `ExternalBrowserHandoff` y los helpers `detectInAppBrowser` y `buildExternalBrowserUrl`.
+- Indicadores: `ProgressRing` y `ReactionButton`. El color del ícono activo de la reacción se configura con `activeColor`.
+- 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.
-- Notificaciones: `NotificationBell` y `NotificationPanel` reciben `NotificationPanelItem` (`id`, `title`, `detail`, `sentAtLabel`, `href`, `isUnread`); la app traduce sus notificaciones a ese formato. Con `surface="responsive"` se renderizan el popover y el sheet hasta hidratar, y después solo el que corresponde al viewport.
-- Calendario: `MonthGrid` y `MonthCalendarHeader` trabajan con claves `YYYY-MM` y `YYYY-MM-DD` sin zona horaria; la app decide en qué zona convierte cada instante en día. La navegación acepta `href` (link del router) o `onSelect`.
-- Archivos: `FileUpload`, `FileUploadDropZone`, `FileUploadList` y `FileUploadItem` validan tipo y tamaño, pero no suben archivos: el progreso y los errores los informa la app.
-- PWA: `PwaUpdateControl` aparece solo cuando hay un service worker en espera y le envía `{ type: "SKIP_WAITING" }` (configurable con `skipWaitingMessage`).
-- Hooks y utilidades: `useIsHydrated`, `useMinuteClock`, `useViewerTimeZone`, `useHorizontalSwipe`, `usePrefersReducedMotion`, `formatFileSize`, `copyTextToClipboard`, `getNameInitials`, búsqueda difusa y helpers de URL.
+- 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. Cada ítem acepta un ícono propio y un progreso en barra (`bar`) o de relleno (`fill`).
+- Utilidades: `formatFileSize`, `copyTextToClipboard` y búsqueda difusa.
 
-`EmojiPicker` vive en el entrypoint opcional `beez-ui/emoji-picker` para no sumar `emoji-picker-react` a quien no lo usa. Hay que instalarlo como dependencia de la app (`pnpm add emoji-picker-react`); la librería se carga recién al abrir el selector, nunca durante el render del servidor.
+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.
+
+```tsx
+import { useIsHydrated } from "beez-ui/hooks";
+```
 
 ## React Compiler
 
@@ -222,7 +224,7 @@ 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.
 
-Los tests resuelven `beez-ui`, `beez-ui/next`, `beez-ui/tanstack` y `beez-ui/emoji-picker` 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.
+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.
 

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.