pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/fab/MODULE.md

@@ -0,0 +1,181 @@
+# fab/ — a floating action button, and its speed-dial sibling
+
+`Fab` is an absolutely-positioned, safe-area-aware primary-action control — a circle, or an
+EXTENDED pill (icon + label) when `label` is given. `FabGroup` is a speed-dial: a Fab-shaped
+trigger that expands a vertical stack of labeled mini actions above itself, behind a dismiss scrim.
+Neither uses React Native's own `<Modal>` — both must stay visually anchored exactly where placed,
+which a Modal's own separate native surface can't do (see `FabGroup.tsx`'s top comment).
+
+## Files
+
+| File | Role |
+|------|------|
+| `Fab.tsx` | The button. Discriminated icon-only/extended props, tone/press/focus, safe-area anchor. |
+| `FabGroup.tsx` | The speed-dial. Controlled/uncontrolled expand state, mount-through-exit-animation lifecycle (mirrors `Drawer.tsx`), scrim, mini-action rows. |
+| `Fab.variants.ts` | Pure resolvers (`resolveFabTone`, `resolveFabAccessibility`, `resolveFabAnchorStyle`, `resolveFabFocusRingStyle`, `resolveFabGroupActionWindow`, the inset/direction/align/label resolvers) + the themed structural resolvers. No React, no lucide. |
+| `index.ts` | Public surface: `Fab`, `FabGroup`, their prop/action types, the closed unions, `IconName`. |
+| `__tests__/Fab.test.ts` | Pure: WCAG contrast (all 9 brands × both modes) + touch target + a11y + positioning/animation resolvers. |
+| `__tests__/Fab.render.test.tsx` | Render: press wiring for both, extended/icon-only, focus rings (Fab + the speed-dial trigger), FabGroup's full expand/collapse lifecycle (uncontrolled + controlled), scrim, its modal semantics, reduced motion. |
+| `__tests__/FabGroup.keyboard.web.test.tsx` | Escape, Tab confinement, focus return, and the trigger-before-actions source order. |
+
+## Props
+
+**Fab** — `icon: IconName` (required), `label?: string` (renders the EXTENDED pill), `onPress: () => void`
+(required), `tone?: accent \| neutral \| danger` (`accent`), `size?: md \| lg` (`lg`; 48/56dp — both
+already clear 44dp), `position?: bottom-right \| bottom-left \| bottom-center \| static` (`bottom-right`),
+`disabled?`, `loading?` (spinner replaces the icon, press suppressed), `accessibilityLabel?` —
+**required** when `label` is absent (type-enforced discriminated union, the same shape `ButtonProps`
+uses), `offset?: { bottom?; horizontal? }`, `style?: LayoutStyle`, `testID?`, plus the tooltip-trigger
+set `onLongPress?`/`onPressOut?`/`onHoverIn?`/`onHoverOut?`/`onFocus?`/`onBlur?`/`accessibilityHint?`/
+`aria-describedby?` (the web half of the hint — react-native-web has no `accessibilityHint`) —
+declared explicitly (no `{...rest}`) so a wrapping `Tooltip` actually reaches the control; each chains
+after the Fab's own press/focus ring rather than replacing it. **`FabGroup` does not accept them**, so
+its trigger is not a tooltip target.
+
+**FabGroup** — `actions: { icon, label, onPress, tone? }[]`, `icon?` (`"plus"`), `open?` +
+`onOpenChange?` (uncontrolled if both omitted), plus `tone?`/`size?`/`position?`/`disabled?`/
+`accessibilityLabel?`/`offset?`/`style?`/`testID?` (the trigger's own Fab-shaped props).
+`testID` seeds `${testID}-anchor`, `${testID}-trigger`, `${testID}-trigger-focus-ring`,
+`${testID}-scrim`, `${testID}-action-${index}`.
+
+## Accessibility contract (WCAG)
+
+- **2.5.5 / 2.5.8 target size** — both Fab sizes (48/56dp) and every FabGroup mini action (44dp)
+  clear the 44dp floor directly, no `hitSlop` needed.
+- **1.4.3 / 1.4.11** — `resolveFabTone`'s `onFill` is measured ≥ 4.5:1 against `fill` for every tone
+  × brand × mode (covers both the icon's 3:1 non-text floor and the extended variant's 4.5:1 text
+  label in one pairing); a FabGroup mini action's label chip text (`fg.default` on `bg.raised`) is
+  measured the same way.
+- **Icon-only rule** — `FabProps` is a discriminated union: `label?: never` + required
+  `accessibilityLabel` makes an unlabelled icon-only Fab a type error, mirroring `ButtonProps`.
+- **4.1.2** — the speed-dial trigger carries `aria-expanded`; every mini action carries its own
+  `accessibilityLabel` (always its visible `label` — a mini action is never icon-only).
+- **Flat `aria-*`, never `accessibilityState={{…}}`** — react-native-web 0.21 forwards only a flat
+  vocabulary and discards the object, so the object form shipped a role with no state at all on web.
+  `resolveFabAccessibility` returns `"aria-disabled"`/`"aria-busy"`; FabGroup's trigger adds
+  `aria-expanded`. RN's own `Pressable` merges the flat props back into `accessibilityState`, so one
+  flat form is correct on both platforms (same migration `resolveCheckboxAccessibility` documents).
+- **4.1.2 / modal semantics** — while the scrim is mounted, FabGroup's ANCHOR carries BOTH
+  `accessibilityViewIsModal` and `aria-modal` — RN's `View` understands only the first,
+  react-native-web only the second — plus `onAccessibilityEscape={closeGroup}`; the scrim itself stays
+  `accessible={false}`. Menu's `accessible={false}` backdrop is **not** a precedent for omitting
+  this: Menu's backdrop sits inside an RN `<Modal>`, whose separate native surface removes the
+  covered screen from the accessibility tree by construction. FabGroup is deliberately not a
+  `<Modal>`, so nothing did that here — the scrim blocked touch while a swipe still reached the
+  whole screen behind it. On the anchor (not the action stack) so the trigger — the "Close actions
+  menu" affordance — stays inside the modal view, and gated on `mounted` so the modality lasts
+  exactly as long as the scrim, exit animation included.
+- **2.1.1 keyboard (web only)** — FabGroup is not a `<Modal>`, so `react-native-web` gave it
+  nothing: no Escape, no Tab confinement, no focus return. (`onAccessibilityEscape` above is a
+  VoiceOver gesture; RNW does not forward it.) While the scrim is mounted the anchor now wires
+  `useDismissOnEscape` + `useFocusTrap` (`core/a11y/keyboard`), so Escape collapses the dial, Tab
+  cycles within trigger+actions, and focus returns to the trigger on collapse — including after an
+  action runs, since `runAction` collapses first.
+- **2.4.3 focus order** — the trigger and action 0 are declared FIRST in the tree, with
+  `flexDirection: "column-reverse"` on the anchor and on the action stack restoring the painted
+  layout (trigger at the bottom, action 0 just above it). Tab order follows source order, so before
+  this the actions were reachable only by Shift+Tab, bottom-to-top, after Tab had already left the
+  group. This also changes the order a screen reader walks the group on native: trigger first, then
+  the actions outward from it.
+- **2.4.7 focus indicator** — the speed-dial trigger draws the same offset `border.focus` ring `Fab`
+  does (`resolveFabFocusRingStyle`, shared by both since they are the same circular silhouette).
+- **1.4.1** — `loading` (Fab only) sets `aria-busy`; the spinner is hidden from AT with
+  `aria-hidden` — the one spelling that works natively AND on web, where
+  `accessibilityElementsHidden`/`importantForAccessibility` are discarded and left it exposed.
+- **2.3.3** — every animation in this module runs through `useMotion()` (`core/motion`), which
+  folds the OS reduce-motion setting and the device tier into one resolved duration. With motion
+  off, Fab's press state and FabGroup's expand/collapse `setValue` their final state — no tween,
+  no frozen frame — and the speed-dial unmounts immediately instead of waiting out an exit.
+
+## Patterns copied from Button / Card / Drawer / Toast (the reference modules)
+
+1. **Structure vs colour split**, **closed unions**, **discriminated icon-only prop**, **the
+   animated state-layer press overlay + offset focus ring** — all duplicated from `Button.tsx`
+   rather than imported (module isolation; same status `Toast.variants.ts` documents for its own
+   duplicated `MIN_TOUCH_TARGET`). Inside this module the ring is NOT duplicated a second time:
+   `Fab` and `FabGroup`'s trigger both call `resolveFabFocusRingStyle`.
+2. **Elevation applied directly** from `theme.elevation.lg`/`.md`/`.sm`, the same idiom `Card`/`Toast` use.
+3. **Safe-area-less bottom-inset approximation** (`resolveFabBottomInset`) — the identical formula
+   and value `Drawer.variants.ts`/`BottomNav.variants.ts` each already carry independently.
+   `react-native-safe-area-context` is an optional peer but not a real dependency of this package, so
+   `useSafeAreaInsets` is never imported here either (see "Known gaps").
+4. **Mount-through-exit-animation lifecycle** (`mounted` state + a `useEffect` on the resolved
+   `expanded` value + a plain `setTimeout` unmount) — copied from `Drawer.tsx` verbatim, including
+   *why* it's a `useEffect` reacting to the value rather than the trigger's own handler: a controlled
+   caller flipping `open` externally still animates correctly.
+5. **Source-order stacking, no `zIndex` between siblings** — the scrim declared before the
+   trigger+actions anchor, the same idiom `Menu.tsx`'s backdrop-then-sheet pair relies on.
+
+## Design decisions specific to this module
+
+- **Not RN's `<Modal>`.** A speed dial must stay visually anchored to its own on-screen position;
+  `<Modal>` presents an unrelated native surface. The scrim and the anchor are declared as siblings
+  at `FabGroup`'s own root (no wrapping node), so both resolve `position: "absolute"` against the
+  same ancestor — ordinarily the screen's own root container. The cost of that choice is that
+  nothing hides the covered screen from assistive tech for free, so the anchor declares
+  `accessibilityViewIsModal` itself (see 4.1.2 above) — a `<Modal>`-based overlay never has to.
+- **`bottom-center` centers via `alignItems`, not a measured `translateX`** — works regardless of an
+  extended Fab's caller-length-driven rendered width, the same idiom `Toast`'s centered card uses.
+- **FabGroup action rows are NOT stretched to the widest row.** The anchor's and the action stack's
+  `alignItems` are both set to the same edge (`resolveFabGroupStackAlign`), so rows size to their own
+  natural width and align flush to that edge, instead of flexbox's default `stretch` forcing every
+  row to the widest row's width and bunching shorter content at one end.
+- **A mini action's label chip is a constant neutral surface, never the action's own tone fill** —
+  the same "state isn't conveyed by a background swap" reasoning `Select`'s row fill documents.
+
+## Known gaps
+
+- **No safe-area inset awareness** beyond the static iOS home-indicator approximation (see pattern
+  #3) — same documented gap `Toast`/`Drawer`/`BottomNav` already carry.
+- **No focus ring on the mini action ROWS.** The trigger reached parity with `Fab` (identical
+  circular control, identical ring geometry), but a row is a two-part composite — label chip + icon
+  circle, with a gap — and one pill ring around both would claim a silhouette the control doesn't
+  have. A design decision, not a copied style, so it is deliberately left out the way
+  `button-group`/`radio-group` record theirs; the same `onFocus`/`onBlur` pattern extends cleanly.
+- **No sibling-hiding on Android for the expanded speed dial** — `accessibilityViewIsModal` is an
+  iOS prop (react-native-web ignores it entirely, which is why `aria-modal` is emitted alongside it);
+  Android's equivalent would mean setting
+  `importantForAccessibility="no-hide-descendants"` on a tree FabGroup does not own. Same gap
+  `Modal`'s own docs record for its "no full screen-reader trap".
+- **The web focus trap only cycles Tab** — it does not pull focus back if a click outside or a
+  programmatic `focus()` takes it out of the group. Inherited from `core/a11y/keyboard`; the fix is
+  sentinel nodes at the anchor's edges.
+- **No hardware-back dismissal for FabGroup** on Android — Menu/Select/Drawer get this for free from
+  RN's own `<Modal onRequestClose>`; FabGroup deliberately isn't a Modal (see "Design decisions"), so
+  there is no `BackHandler` wiring in v1. The scrim press and the trigger's own toggle remain the
+  dismissal paths.
+- **`static` FabGroup's mini-action stack has no real anchor edge** — it defaults to the same
+  trailing (`flex-end`) alignment `bottom-right` uses, an arbitrary but documented default.
+
+## Motion
+
+Nothing in this module owns a duration, easing or `Animated.timing` config — all of it comes from
+`useMotion()` / `usePressMotion()` in `core/motion`, so retuning `core/motion/config.ts` retunes the
+Fab too. Everything animates `opacity`/`transform` only, always on the native driver.
+
+- **Fab press** — one `Animated.Value` drives both the tone-aware state-layer scrim and the press
+  scale (`motion.transform.pressScale`), so the two can never desync.
+- **FabGroup expand/collapse** — one `progress` value; the trigger glyph rotates 0→45°, the scrim
+  fades, and each action row reveals over its own slice of that same value.
+- **The action stagger is decorative** (`motion.decorative`, high tier only). It is expressed as a
+  per-row interpolation *window* (`resolveFabGroupActionWindow`), not per-row animations: no extra
+  timers or `Animated.Value`s, and it reverses correctly on close. On low/mid tier every row shares
+  the full `[0, 1]` window and the rows reveal together.
+- **Action rows and the trigger** use `usePressMotion`; a row's reveal opacity and its press opacity
+  are combined with `Animated.multiply` rather than fighting over the same style key.
+- In-flight animations are stopped on effect cleanup and on unmount.
+
+## Performance
+
+Both wrapped in `React.memo`. `toggle`/`closeGroup`/`requestExpandedChange`/`runAction` are
+`useCallback`'d, and each action row is its own `React.memo`'d `FabGroupActionRow` with a stable
+`onSelect` — the per-row `onPress` closure, tone lookup and style arrays are no longer rebuilt on
+every parent render. The reversed row list is `useMemo`'d. The action stack and scrim are built only
+while `mounted` (never while the trigger alone is on screen), matching Menu/Select/Drawer's
+identical "sheet content built only while open" convention.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/fab/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/fab`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures a Fab/FabGroup through
+ * their props, never by importing internals.
+ */
+
+export { Fab } from "./Fab.js";
+export { FabGroup } from "./FabGroup.js";
+
+// Re-exported so a caller can type an `icon`/action `icon` prop without a separate import from `core/icon`.
+//# sourceMappingURL=index.js.map

package/lib/module/modules/file-grid/FileGrid.js

@@ -0,0 +1,149 @@
+"use strict";
+
+/**
+ * FileGrid — thumbnail grid for attachments or folders. Icon + label cells in 2–4 columns.
+ *
+ * Items are chunked into fixed-height rows and rendered through `core/list`'s `VirtualList`, so a
+ * folder with thousands of files mounts a window of rows rather than every cell.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { fileGridCellStructure, fileGridRowHeight, fileGridRowStructure, resolveFileGridItemLabel } from "./FileGrid.variants.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const ICON_SIZE = 28;
+const DEFAULT_ICON = "file-text";
+function rowKeyExtractor(row) {
+  return row.key;
+}
+export const FileGrid = /*#__PURE__*/memo(function FileGrid({
+  items,
+  columns = 3,
+  onItemPress,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rows = useMemo(() => {
+    const chunks = [];
+    for (let start = 0; start < items.length; start += columns) {
+      const chunk = items.slice(start, start + columns);
+      chunks.push({
+        key: chunk[0]?.id ?? `row-${start}`,
+        items: chunk
+      });
+    }
+    return chunks;
+  }, [items, columns]);
+  const rowStyle = useMemo(() => fileGridRowStructure(theme), [theme]);
+  const cellStyle = useMemo(() => [fileGridCellStructure(theme, {
+    columns
+  }), {
+    borderColor: theme.colors.border.default,
+    backgroundColor: theme.colors.bg.surface
+  }], [theme, columns]);
+  const pressedStyle = useMemo(() => ({
+    backgroundColor: theme.colors.bg.sunken
+  }), [theme]);
+  const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    textAlign: "center",
+    marginTop: theme.space[1]
+  }], [theme]);
+  const itemHeight = useMemo(() => fileGridRowHeight(theme.space[2]), [theme]);
+  const renderRow = useCallback(({
+    item: row
+  }) => /*#__PURE__*/_jsx(FileGridRow, {
+    row: row,
+    rowStyle: rowStyle,
+    cellStyle: cellStyle,
+    pressedStyle: pressedStyle,
+    textStyle: textStyle,
+    iconColor: theme.colors.accent.text,
+    onItemPress: onItemPress,
+    testID: testID
+  }), [rowStyle, cellStyle, pressedStyle, textStyle, theme, onItemPress, testID]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: /*#__PURE__*/_jsx(VirtualList, {
+      data: rows,
+      renderItem: renderRow,
+      keyExtractor: rowKeyExtractor,
+      itemHeight: itemHeight
+    })
+  });
+});
+const FileGridCell = /*#__PURE__*/memo(function FileGridCell({
+  item,
+  cellStyle,
+  pressedStyle,
+  textStyle,
+  iconColor,
+  onItemPress,
+  testID
+}) {
+  const handlePress = useCallback(() => onItemPress?.(item.id), [onItemPress, item.id]);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [cellStyle, pressed ? pressedStyle : null], [cellStyle, pressedStyle]);
+  const accessibleLabel = resolveFileGridItemLabel(item.label, item.typeLabel);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      name: item.icon ?? DEFAULT_ICON,
+      size: ICON_SIZE,
+      color: iconColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 2,
+      style: textStyle,
+      children: item.label
+    })]
+  });
+  if (onItemPress === undefined) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      accessible: true,
+      accessibilityLabel: accessibleLabel,
+      style: cellStyle,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibleLabel,
+    onPress: handlePress,
+    style: pressableStyle,
+    children: content
+  });
+});
+const FileGridRow = /*#__PURE__*/memo(function FileGridRow({
+  row,
+  rowStyle,
+  cellStyle,
+  pressedStyle,
+  textStyle,
+  iconColor,
+  onItemPress,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: rowStyle,
+    children: row.items.map(item => /*#__PURE__*/_jsx(FileGridCell, {
+      item: item,
+      cellStyle: cellStyle,
+      pressedStyle: pressedStyle,
+      textStyle: textStyle,
+      iconColor: iconColor,
+      onItemPress: onItemPress,
+      testID: testID === undefined ? undefined : `${testID}-cell-${item.id}`
+    }, item.id))
+  });
+});
+//# sourceMappingURL=FileGrid.js.map

package/lib/module/modules/file-grid/FileGrid.variants.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * A cell's accessible name. The glyph is the ONLY thing that says whether a cell is a folder, an
+ * image or a document, and a glyph has no text equivalent (WCAG 1.3.1) — `typeLabel` is that
+ * equivalent. It has to come from the consumer: an `IconName` is a drawing, not a file type.
+ */
+export function resolveFileGridItemLabel(label, typeLabel) {
+  return typeLabel === undefined ? label : `${label}, ${typeLabel}`;
+}
+export const FILE_GRID_CELL_MIN_HEIGHT = 88;
+
+/** Fixed row height is what lets `VirtualList` derive `getItemLayout` for the grid. */
+export function fileGridRowHeight(gap) {
+  return FILE_GRID_CELL_MIN_HEIGHT + gap;
+}
+export const fileGridRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    columnGap: theme.space[2],
+    marginBottom: theme.space[2]
+  }
+}));
+export const fileGridCellStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.base,
+    borderWidth: theme.borderWidths.thin,
+    padding: theme.space[2],
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: FILE_GRID_CELL_MIN_HEIGHT
+  },
+  variants: {
+    columns: {
+      2: {
+        width: "48%"
+      },
+      3: {
+        width: "31%"
+      },
+      4: {
+        width: "23%"
+      }
+    }
+  },
+  defaultVariants: {
+    columns: 3
+  }
+}));
+//# sourceMappingURL=FileGrid.variants.js.map

package/lib/module/modules/file-grid/MODULE.md

@@ -0,0 +1,12 @@
+# file-grid/
+
+Grid of file/folder cells with icon + label. `columns`: 2 | 3 | 4.
+
+## Accessibility contract (WCAG)
+
+- **1.3.1** — file **type** (folder vs. image vs. document) is conveyed only by the icon glyph, and a
+  glyph has no text equivalent. `FileGridItem.typeLabel` (optional) supplies it; a cell's accessible
+  name is `resolveFileGridItemLabel(label, typeLabel)` → `"<label>, <typeLabel>"`, falling back to
+  `label` alone when the consumer names no type. Applies to both a pressable cell
+  (`accessibilityLabel`) and a read-only one (wrapped `accessible` + `accessibilityLabel`, which it
+  did not carry at all before).

package/lib/module/modules/file-grid/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { FileGrid } from "./FileGrid.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/file-upload/FileUpload.js

@@ -19,12 +19,109 @@
  * resolver" for why that's a deliberate departure from every sibling module's structure/colour split.
  */
 
-import { memo, useCallback, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/index.js";
 import { Button } from "../button/index.js";
-import { FILE_UPLOAD_PICK_ERROR_MESSAGE, fileUploadContainerStructure, fileUploadRowStructure, pickDocumentFile, pickImageFile, resolveFileUploadRemoveLabel, resolveFileUploadTriggerLabel } from "./FileUpload.variants.js";
+import { FILE_UPLOAD_PICK_ERROR_MESSAGE, FILE_UPLOAD_PROGRESS_LABEL, fileUploadContainerStructure, fileUploadProgressFillStructure, fileUploadProgressTrackStructure, fileUploadRowStructure, pickDocumentFile, pickImageFile, resolveFileUploadProgressFraction, resolveFileUploadProgressPercent, resolveFileUploadRemoveLabel, resolveFileUploadTriggerLabel } from "./FileUpload.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileUploadRow = /*#__PURE__*/memo(function FileUploadRow({
+  name,
+  disabled,
+  onRemove,
+  testID,
+  removeTestID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => [fileUploadRowStructure(theme), {
+    borderColor: theme.colors.border.interactive,
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+  const nameStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flex: 1,
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.fg.default
+  }, disabled ? styles.dimmedText : null], [theme, disabled]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: nameStyle,
+      children: name
+    }), /*#__PURE__*/_jsx(Button, {
+      icon: "trash",
+      accessibilityLabel: resolveFileUploadRemoveLabel(name),
+      onPress: onRemove,
+      disabled: disabled,
+      size: "sm",
+      variant: "ghost",
+      tone: "neutral",
+      testID: removeTestID
+    })]
+  });
+});
+/**
+ * The upload-progress track. State-driven (it moves when `progress` moves, never during a scroll),
+ * and driven entirely by `scaleX` on the native driver — `width` would force a layout pass per
+ * frame and cannot leave the JS thread at all.
+ */
+const FileUploadProgress = /*#__PURE__*/memo(function FileUploadProgress({
+  progress,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const fraction = resolveFileUploadProgressFraction(progress);
+  const percent = resolveFileUploadProgressPercent(progress);
+  const scaleX = useAnimatedValue(fraction);
+  const running = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    if (!motion.enabled) {
+      scaleX.setValue(fraction);
+      return undefined;
+    }
+    running.current = motion.timing(scaleX, fraction, {
+      easing: "decelerate"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [fraction, motion, scaleX]);
+  useEffect(() => () => running.current?.stop(), []);
+  const trackStyle = useMemo(() => [fileUploadProgressTrackStructure(theme), {
+    backgroundColor: theme.colors.bg.sunken
+  }], [theme]);
+  const fillStyle = useMemo(() => [fileUploadProgressFillStructure(), {
+    backgroundColor: theme.colors.accent.solid,
+    transform: [{
+      scaleX
+    }]
+  }], [theme, scaleX]);
+  return (
+    /*#__PURE__*/
+    // Flat `aria-value*`, not `accessibilityValue={{…}}`: react-native-web 0.21 drops the object, so
+    // on web this announced `role="progressbar"` with no percentage. `View` merges the flat props
+    // into the object form natively, so this one form is correct on both platforms.
+    _jsx(View, {
+      testID: testID,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: FILE_UPLOAD_PROGRESS_LABEL,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percent,
+      style: trackStyle,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-fill` : undefined,
+        style: fillStyle
+      })
+    })
+  );
+});
 export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
   const {
     source,
@@ -35,6 +132,7 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     disabled = false,
     allowedMimeTypes,
     allowsEditing = false,
+    progress,
     style,
     testID
   } = props;
@@ -42,6 +140,7 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
   // Distinct from `value`: a pick attempt can fail (denied permission, or any other native error)
   // independently of whether a file was already selected — see `openPicker`'s catch block.
   const [pickError, setPickError] = useState(false);
+  useAnnounce(pickError ? FILE_UPLOAD_PICK_ERROR_MESSAGE : undefined);
   const openPicker = useCallback(async () => {
     if (disabled) return;
     setPickError(false);
@@ -75,47 +174,38 @@ export const FileUpload = /*#__PURE__*/memo(function FileUpload(props) {
     setPickError(false);
     onChange(null);
   }, [onChange]);
+  const rootStyle = useMemo(() => [fileUploadContainerStructure(theme), style], [theme, style]);
+  const errorStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: theme.colors.status.danger.text
+  }], [theme]);
+  const triggerLabel = useMemo(() => resolveFileUploadTriggerLabel(label, value), [label, value]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
-    style: [fileUploadContainerStructure(theme), style],
+    style: rootStyle,
     children: [/*#__PURE__*/_jsx(Button, {
       label: label,
       icon: "upload",
       onPress: handlePick,
       disabled: disabled,
       size: size,
-      accessibilityLabel: resolveFileUploadTriggerLabel(label, value),
+      accessibilityLabel: triggerLabel,
       testID: testID ? `${testID}-trigger` : undefined
-    }), value && /*#__PURE__*/_jsxs(View, {
+    }), value && /*#__PURE__*/_jsx(FileUploadRow, {
+      name: value.name,
+      disabled: disabled,
+      onRemove: handleRemove,
       testID: testID ? `${testID}-row` : undefined,
-      style: [fileUploadRowStructure(theme), {
-        borderColor: theme.colors.border.interactive,
-        backgroundColor: theme.colors.bg.surface
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        numberOfLines: 1,
-        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-          flex: 1,
-          fontSize: theme.fontSizes.md,
-          color: theme.colors.fg.default
-        }, disabled && styles.dimmedText],
-        children: value.name
-      }), /*#__PURE__*/_jsx(Button, {
-        icon: "trash",
-        accessibilityLabel: resolveFileUploadRemoveLabel(value.name),
-        onPress: handleRemove,
-        disabled: disabled,
-        size: "sm",
-        variant: "ghost",
-        tone: "neutral",
-        testID: testID ? `${testID}-remove` : undefined
-      })]
-    }), pickError && /*#__PURE__*/_jsx(Text, {
-      accessibilityLiveRegion: "polite",
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.xs,
-        color: theme.colors.status.danger.text
-      }],
+      removeTestID: testID ? `${testID}-remove` : undefined
+    }), progress !== undefined && /*#__PURE__*/_jsx(FileUploadProgress, {
+      progress: progress,
+      testID: testID ? `${testID}-progress` : undefined
+    }), pickError &&
+    /*#__PURE__*/
+    // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
+    // already announces on both platforms — keeping both would double-announce on Android.
+    _jsx(Text, {
+      style: errorStyle,
       children: FILE_UPLOAD_PICK_ERROR_MESSAGE
     })]
   });