@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/FilePicker/FilePicker.js

@@ -1,797 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.matchesAccept = exports.formatFileSize = exports.default = exports.FilePicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _defaultIcons = require("../AppIcon/defaultIcons.js");
-var _OptionSheet = require("../OptionSheet/OptionSheet.js");
-var _index4 = require("../Spinner/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * FilePicker — attachment picking UI with pluggable native sources.
- *
- * The library owns the UI and behaviour: trigger (dashed card / list row /
- * custom render prop), the source-chooser sheet (shared OptionSheet), enforced
- * validation (maxFiles / maxSizeMB / accept / custom), the canonical file
- * shape, per-file status + progress display, remove/retry affordances,
- * a11y, haptics and theming.
- *
- * What it deliberately does NOT own:
- *   - Native picking. Camera / gallery / document access lives in app-level
- *     `sources` adapters (`pick(): Promise<PickedFileInput[]>`), so the
- *     library stays zero-dependency and each app wires the native modules it
- *     already ships. Throwing inside `pick` surfaces as a field error;
- *     returning `[]` is a cancel.
- *   - Networking. Uploads belong to the app's API client / outbox; the app
- *     reflects them back via per-file `status` / `progress` and gets retry
- *     taps through `onRetry`.
- *   - Heavy processing. The async `process` hook runs per accepted file
- *     (compression, EXIF strip, local copy) before it lands in `files` —
- *     plug the app's image pipeline in there.
- */
-
-/** What a source's `pick()` resolves with — the library normalizes the rest. */
-
-/** Everything a custom `renderFile` template needs to paint one file. */
-
-let fileIdSeq = 0;
-const nextFileId = () => `wfp-${++fileIdSeq}`;
-const DEFAULT_LABELS = {
-  trigger: 'Attach file',
-  addMore: 'Add more',
-  sheetTitle: 'Add from',
-  removeFile: name => `Remove ${name}`,
-  retry: 'Retry upload',
-  errorTooMany: max => `You can attach up to ${max} files.`,
-  errorTooLarge: (name, maxSizeMB) => `${name} is larger than ${maxSizeMB} MB.`,
-  errorWrongType: name => `${name} is not an accepted file type.`
-};
-const formatFileSize = bytes => {
-  if (bytes === undefined || bytes <= 0) {
-    return '';
-  }
-  const units = ['B', 'KB', 'MB', 'GB'];
-  let value = bytes;
-  let unit = 0;
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit += 1;
-  }
-  const rounded = value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
-  return `${rounded} ${units[unit]}`;
-};
-exports.formatFileSize = formatFileSize;
-const matchesAccept = (type, accept) => {
-  if (!accept || accept.length === 0) {
-    return true;
-  }
-  if (!type) {
-    return false;
-  }
-  return accept.some(glob => {
-    if (glob === '*/*' || glob === '*') {
-      return true;
-    }
-    if (glob.endsWith('/*')) {
-      return type.startsWith(glob.slice(0, glob.length - 1));
-    }
-    return type === glob;
-  });
-};
-exports.matchesAccept = matchesAccept;
-const isImage = file => file.type?.startsWith('image/') === true || !file.type && /\.(png|jpe?g|gif|webp|heic)$/i.test(file.name);
-const imageSourceOf = file => file.thumbnailUrl ?? (isImage(file) ? file.uri ?? file.url : undefined);
-
-/** Uppercase extension for the non-image tile, capped for layout ("PDF", "DOCX", "FILE"). */
-const extensionOf = name => {
-  const dot = name.lastIndexOf('.');
-  if (dot <= 0 || dot === name.length - 1) {
-    return 'FILE';
-  }
-  return name.slice(dot + 1).toUpperCase().slice(0, 4);
-};
-const FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    files: filesProp,
-    defaultFiles,
-    onChange,
-    sources,
-    maxFiles,
-    maxSizeMB,
-    accept,
-    validate,
-    process,
-    variant = 'card',
-    renderFile,
-    renderTrigger,
-    disabled = false,
-    helperText,
-    error: errorProp,
-    labels: labelsProp,
-    haptic,
-    onPick,
-    onRemove,
-    onError,
-    onFilePress,
-    onRetry,
-    style,
-    accessibilityLabel,
-    testID
-  } = props;
-  const theme = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const labels = (0, _react.useMemo)(() => ({
-    ...DEFAULT_LABELS,
-    ...labelsProp
-  }), [labelsProp]);
-  const tokens = theme.components.filePicker;
-  const thumbnailSize = tokens?.thumbnailSize ?? 84;
-  const borderRadius = tokens?.borderRadius ?? theme.radius.md;
-  const dashedBorderColor = tokens?.dashedBorderColor ?? theme.colors.primary;
-  const [files, setFilesState] = (0, _index.useControllableState)({
-    value: filesProp,
-    defaultValue: defaultFiles ?? [],
-    onChange
-  });
-
-  // Async pick/process callbacks need the latest list, not a stale closure.
-  const filesRef = (0, _react.useRef)(files);
-  filesRef.current = files;
-  const setFiles = (0, _react.useCallback)(next => {
-    filesRef.current = next;
-    setFilesState(next);
-  }, [setFilesState]);
-  const [localError, setLocalError] = (0, _react.useState)(null);
-  const [sheetOpen, setSheetOpen] = (0, _react.useState)(false);
-  const fieldError = errorProp ?? localError ?? undefined;
-  const atCapacity = typeof maxFiles === 'number' && files.length >= maxFiles;
-  const reportErrors = (0, _react.useCallback)((messages, file) => {
-    if (messages.length === 0) {
-      return;
-    }
-    setLocalError(messages[0]);
-    messages.forEach(m => onError?.(m, file));
-    if (haptic !== false) {
-      (0, _index3.triggerHaptic)('notificationError');
-    }
-  }, [onError, haptic]);
-  const runSource = (0, _react.useCallback)(async source => {
-    let picked;
-    try {
-      picked = await source.pick();
-    } catch (e) {
-      reportErrors([e instanceof Error ? e.message : String(e)]);
-      return;
-    }
-    if (!picked || picked.length === 0) {
-      return;
-    }
-    const normalized = picked.map(p => ({
-      id: nextFileId(),
-      name: p.name ?? p.uri.split('/').pop() ?? 'file',
-      uri: p.uri,
-      type: p.type,
-      size: p.size,
-      meta: p.meta,
-      status: 'idle'
-    }));
-    const errors = [];
-    let candidates = normalized;
-    if (typeof maxFiles === 'number') {
-      const capacity = Math.max(0, maxFiles - filesRef.current.length);
-      if (candidates.length > capacity) {
-        errors.push(labels.errorTooMany(maxFiles));
-        candidates = candidates.slice(0, capacity);
-      }
-    }
-    const accepted = [];
-    for (const file of candidates) {
-      // `?? 0` here used to let an unknown size through as "0 bytes"; some
-      // document providers report no size at all. Only enforce when known.
-      if (typeof maxSizeMB === 'number' && typeof file.size === 'number' && file.size > maxSizeMB * 1024 * 1024) {
-        errors.push(labels.errorTooLarge(file.name, maxSizeMB));
-        continue;
-      }
-      if (!matchesAccept(file.type, accept)) {
-        errors.push(labels.errorWrongType(file.name));
-        continue;
-      }
-      const customError = validate?.(file);
-      if (customError) {
-        errors.push(customError);
-        continue;
-      }
-      accepted.push(file);
-    }
-    reportErrors(errors);
-    if (accepted.length === 0) {
-      return;
-    }
-    if (!process) {
-      setFiles([...filesRef.current, ...accepted]);
-      setLocalError(errors.length > 0 ? errors[0] : null);
-      const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-      if (h) {
-        (0, _index3.triggerHaptic)(h);
-      }
-      onPick?.(accepted);
-      return;
-    }
-
-    // With a process hook: land files immediately as 'processing', then
-    // swap each for its processed result (or drop it on failure).
-    const processing = accepted.map(f => ({
-      ...f,
-      status: 'processing'
-    }));
-    setFiles([...filesRef.current, ...processing]);
-    const succeeded = [];
-    for (const file of processing) {
-      try {
-        const result = await process({
-          ...file,
-          status: 'idle'
-        });
-        const finished = {
-          ...result,
-          id: file.id,
-          status: result.status ?? 'idle'
-        };
-        setFiles(filesRef.current.map(f => f.id === file.id ? finished : f));
-        succeeded.push(finished);
-      } catch (e) {
-        setFiles(filesRef.current.filter(f => f.id !== file.id));
-        reportErrors([e instanceof Error ? e.message : String(e)], file);
-      }
-    }
-    if (succeeded.length > 0) {
-      if (errors.length === 0) {
-        setLocalError(null);
-      }
-      const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-      if (h) {
-        (0, _index3.triggerHaptic)(h);
-      }
-      onPick?.(succeeded);
-    }
-  }, [maxFiles, maxSizeMB, accept, validate, process, labels, reportErrors, setFiles, onPick, haptic]);
-  const open = (0, _react.useCallback)(sourceKey => {
-    if (disabled || atCapacity) {
-      return;
-    }
-    const source = sourceKey ? sources.find(s => s.key === sourceKey) : sources.length === 1 ? sources[0] : undefined;
-    if (source) {
-      void runSource(source);
-      return;
-    }
-    if (sources.length > 1) {
-      setSheetOpen(true);
-    }
-  }, [disabled, atCapacity, sources, runSource]);
-  const removeFile = (0, _react.useCallback)(file => {
-    if (disabled) {
-      return;
-    }
-    setFiles(filesRef.current.filter(f => f.id !== file.id));
-    setLocalError(null);
-    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.triggerHaptic)(h);
-    }
-    onRemove?.(file);
-  }, [disabled, setFiles, onRemove, haptic]);
-  const clear = (0, _react.useCallback)(() => {
-    setFiles([]);
-    setLocalError(null);
-  }, [setFiles]);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    open,
-    clear
-  }), [open, clear]);
-  const a11ySummary = files.length === 0 ? labels.trigger : `${files.length} file${files.length === 1 ? '' : 's'} attached`;
-  const a11yLabel = accessibilityLabel ?? `Attachments. ${a11ySummary}`;
-  const statusText = file => {
-    switch (file.status) {
-      case 'processing':
-        return 'Processing…';
-      case 'uploading':
-        return `Uploading ${Math.round((file.progress ?? 0) * 100)}%`;
-      case 'done':
-        return 'Uploaded';
-      case 'error':
-        return file.error ?? 'Failed';
-      default:
-        return '';
-    }
-  };
-  const fileA11yLabel = file => [file.name, formatFileSize(file.size), statusText(file)].filter(Boolean).join(', ');
-  const attachmentIcon = theme.icons?.attachment ?? _defaultIcons.defaultIcons.attachment;
-  const renderStatusOverlay = file => {
-    if (file.status === 'processing') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Spinner, {
-          size: "sm"
-        })
-      });
-    }
-    if (file.status === 'uploading') {
-      const pct = Math.round((file.progress ?? 0) * 100);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.tileOverlayText, {
-            color: theme.colors.text.inverse
-          }],
-          children: `${pct}%`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.tileProgressTrack, {
-            backgroundColor: theme.colors.border.primary
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.tileProgressFill, {
-              width: `${pct}%`,
-              backgroundColor: theme.colors.primary
-            }]
-          })
-        })]
-      });
-    }
-    if (file.status === 'done') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.doneBadge, {
-          backgroundColor: theme.colors.success
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.doneBadgeText, {
-            color: theme.colors.text.inverse
-          }],
-          children: "\u2713"
-        })
-      });
-    }
-    return null;
-  };
-  const renderThumbnail = file => {
-    const src = imageSourceOf(file);
-    if (src) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-        source: {
-          uri: src
-        },
-        style: styles.thumbnailImage
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.extensionTile, {
-        backgroundColor: theme.colors.background.secondary
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.extensionText, {
-          color: theme.colors.text.secondary,
-          ...(0, _index2.fontFor)(theme, 'semibold')
-        }],
-        children: extensionOf(file.name)
-      })
-    });
-  };
-  const removeButton = file => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    onPress: () => removeFile(file),
-    disabled: disabled,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.removeFile(file.name),
-    style: [styles.removeButton, {
-      backgroundColor: theme.colors.background.overlay
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.removeButtonText, {
-        color: theme.colors.text.inverse
-      }],
-      children: "\xD7"
-    })
-  });
-  const retryButton = file => onRetry && file.status === 'error' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    onPress: () => onRetry(file),
-    disabled: disabled,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.retry,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.retryText, {
-        color: theme.colors.primary
-      }],
-      children: "\u21BB"
-    })
-  }) : null;
-  const defaultCardFile = state => {
-    const {
-      file
-    } = state;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.tile, {
-        width: thumbnailSize,
-        height: thumbnailSize,
-        borderRadius,
-        ..._corners.smoothCorners,
-        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary
-      }],
-      children: [renderThumbnail(file), renderStatusOverlay(file), file.status === 'error' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: retryButton(file)
-      }) : null, removeButton(file)]
-    });
-  };
-  const defaultListFile = state => {
-    const {
-      file
-    } = state;
-    const status = statusText(file);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.listRow, {
-        borderRadius,
-        ..._corners.smoothCorners,
-        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary,
-        backgroundColor: theme.colors.background.primary
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.listThumb, {
-          borderRadius: theme.radius.sm,
-          ..._corners.smoothCorners
-        }],
-        children: [renderThumbnail(file), file.status === 'processing' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.tileOverlay, {
-            backgroundColor: theme.colors.background.overlay
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Spinner, {
-            size: "sm"
-          })
-        }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.listTextWrap,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          numberOfLines: 1,
-          ellipsizeMode: "middle",
-          style: [styles.listName, {
-            color: theme.colors.text.primary,
-            fontSize: theme.typography.fontSize.sm,
-            ...(0, _index2.fontFor)(theme, 'medium')
-          }],
-          children: file.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          numberOfLines: 1,
-          style: [styles.listSubtitle, {
-            color: file.status === 'error' ? theme.colors.error : theme.colors.text.tertiary,
-            fontSize: theme.typography.fontSize.xs
-          }],
-          children: [formatFileSize(file.size), status].filter(Boolean).join(' · ')
-        }), file.status === 'uploading' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.listProgressTrack, {
-            backgroundColor: theme.colors.border.primary
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.listProgressFill, {
-              width: `${Math.round((file.progress ?? 0) * 100)}%`,
-              backgroundColor: theme.colors.primary
-            }]
-          })
-        }) : null]
-      }), retryButton(file), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: () => removeFile(file),
-        disabled: disabled,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: labels.removeFile(file.name),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.listRemoveText, {
-            color: theme.colors.text.tertiary
-          }],
-          children: "\xD7"
-        })
-      })]
-    });
-  };
-  const renderOneFile = (file, index) => {
-    const state = {
-      file,
-      index,
-      disabled,
-      remove: () => removeFile(file),
-      retry: onRetry ? () => onRetry(file) : undefined
-    };
-    const content = renderFile ? renderFile(state) : variant === 'card' ? defaultCardFile(state) : defaultListFile(state);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: onFilePress ? () => onFilePress(file) : undefined,
-      disabled: disabled || !onFilePress,
-      accessibilityLabel: fileA11yLabel(file),
-      children: content
-    }, file.id);
-  };
-  const triggerState = {
-    open,
-    disabled: disabled || atCapacity,
-    fileCount: files.length,
-    atCapacity
-  };
-  const dashedTrigger = compact => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-    onPress: () => open(),
-    disabled: disabled || atCapacity,
-    accessibilityRole: "button",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      disabled: disabled || atCapacity
-    },
-    style: ({
-      pressed
-    }) => [styles.trigger, compact ? styles.triggerCompact : null, {
-      borderRadius,
-      ..._corners.smoothCorners,
-      borderColor: dashedBorderColor,
-      backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
-      opacity: disabled || atCapacity ? 0.55 : 1
-    }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.triggerRow,
-      children: [attachmentIcon ? attachmentIcon({
-        size: 16,
-        color: theme.colors.primary
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.triggerText, {
-          color: theme.colors.primary,
-          fontSize: theme.typography.fontSize.sm,
-          ...(0, _index2.fontFor)(theme, 'medium')
-        }],
-        children: files.length === 0 ? labels.trigger : labels.addMore
-      })]
-    }), !compact && helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.helperText, {
-        color: theme.colors.text.tertiary,
-        fontSize: theme.typography.fontSize.xs
-      }],
-      children: helperText
-    }) : null]
-  });
-  const addMoreTile = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    onPress: () => open(),
-    disabled: disabled || atCapacity,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.addMore,
-    style: ({
-      pressed
-    }) => [styles.tile, styles.addTile, {
-      width: thumbnailSize,
-      height: thumbnailSize,
-      borderRadius,
-      ..._corners.smoothCorners,
-      borderColor: dashedBorderColor,
-      backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent',
-      opacity: disabled || atCapacity ? 0.55 : 1
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.addTileText, {
-        color: theme.colors.primary
-      }],
-      children: "+"
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.container, style],
-    testID: testID,
-    accessibilityLabel: a11yLabel,
-    children: [variant === 'card' ? files.length === 0 ? renderTrigger ? renderTrigger(triggerState) : dashedTrigger(false) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [styles.strip, {
-        columnGap: theme.spacing.sm
-      }],
-      children: [files.map(renderOneFile), renderTrigger ? renderTrigger(triggerState) : !atCapacity && !disabled ? addMoreTile : null]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        rowGap: theme.spacing.sm
-      },
-      children: [renderTrigger ? renderTrigger(triggerState) : !atCapacity ? dashedTrigger(files.length > 0) : null, files.map(renderOneFile)]
-    }), fieldError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      accessibilityLiveRegion: "polite",
-      style: [styles.errorText, {
-        color: theme.colors.error,
-        fontSize: theme.typography.fontSize.xs,
-        marginTop: theme.spacing.xxs
-      }],
-      children: fieldError
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.OptionSheet, {
-      open: sheetOpen,
-      onClose: () => setSheetOpen(false),
-      title: labels.sheetTitle,
-      options: sources,
-      labelOf: s => s.label,
-      getValue: s => s.key,
-      disabledOf: () => false,
-      descriptionOf: s => s.description,
-      iconOf: s => s.icon,
-      isSelected: () => false,
-      onSelect: s => {
-        setSheetOpen(false);
-        void runSource(s);
-      }
-    })]
-  });
-});
-FilePicker.displayName = 'FilePicker';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  trigger: {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    alignItems: 'center',
-    paddingVertical: 14,
-    paddingHorizontal: 16
-  },
-  triggerCompact: {
-    paddingVertical: 10
-  },
-  triggerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: 8
-  },
-  triggerText: {
-    includeFontPadding: false
-  },
-  helperText: {
-    includeFontPadding: false,
-    marginTop: 6,
-    textAlign: 'center'
-  },
-  strip: {
-    paddingVertical: 2
-  },
-  tile: {
-    borderWidth: 1,
-    overflow: 'hidden'
-  },
-  addTile: {
-    borderStyle: 'dashed',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  addTileText: {
-    fontSize: 28,
-    includeFontPadding: false
-  },
-  thumbnailImage: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover'
-  },
-  extensionTile: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  extensionText: {
-    fontSize: 12,
-    letterSpacing: 1,
-    includeFontPadding: false
-  },
-  tileOverlay: {
-    ..._reactNative.StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  tileOverlayText: {
-    fontSize: 12,
-    includeFontPadding: false,
-    marginBottom: 6
-  },
-  tileProgressTrack: {
-    position: 'absolute',
-    left: 8,
-    right: 8,
-    bottom: 8,
-    height: 3,
-    borderRadius: 2,
-    ..._corners.smoothCorners,
-    overflow: 'hidden'
-  },
-  tileProgressFill: {
-    height: '100%',
-    borderRadius: 2,
-    ..._corners.smoothCorners
-  },
-  doneBadge: {
-    position: 'absolute',
-    right: 4,
-    bottom: 4,
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    ..._corners.smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  doneBadgeText: {
-    fontSize: 11,
-    includeFontPadding: false
-  },
-  removeButton: {
-    position: 'absolute',
-    top: 4,
-    right: 4,
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    ..._corners.smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  removeButtonText: {
-    fontSize: 13,
-    lineHeight: 15,
-    includeFontPadding: false
-  },
-  retryText: {
-    fontSize: 20,
-    includeFontPadding: false
-  },
-  listRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    padding: 10,
-    columnGap: 10
-  },
-  listThumb: {
-    width: 40,
-    height: 40,
-    overflow: 'hidden'
-  },
-  listTextWrap: {
-    flex: 1
-  },
-  listName: {
-    includeFontPadding: false
-  },
-  listSubtitle: {
-    includeFontPadding: false,
-    marginTop: 2
-  },
-  listProgressTrack: {
-    height: 3,
-    borderRadius: 2,
-    ..._corners.smoothCorners,
-    overflow: 'hidden',
-    marginTop: 6
-  },
-  listProgressFill: {
-    height: '100%',
-    borderRadius: 2,
-    ..._corners.smoothCorners
-  },
-  listRemoveText: {
-    fontSize: 22,
-    includeFontPadding: false,
-    paddingHorizontal: 4
-  },
-  errorText: {
-    includeFontPadding: false
-  }
-});
-var _default = exports.default = FilePicker;
-//# sourceMappingURL=FilePicker.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.matchesAccept=exports.formatFileSize=exports.default=exports.FilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index4=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(n,t,s):n[t]=e[t]);return n})(e,t)}let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`},formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,i=0;for(;r>=1024&&i<t.length-1;)r/=1024,i+=1;return`${r>=10||0===i?Math.round(r):Math.round(10*r)/10} ${t[i]}`};exports.formatFileSize=formatFileSize;const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));exports.matchesAccept=matchesAccept;const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=exports.FilePicker=(0,_react.forwardRef)((e,t)=>{const{files:r,defaultFiles:i,onChange:o,sources:s,maxFiles:n,maxSizeMB:l,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:m,disabled:h=!1,helperText:x,error:p,labels:_,haptic:y,onPick:b,onRemove:f,onError:j,onFilePress:v,onRetry:R,style:S,accessibilityLabel:T,testID:C}=e,w=(0,_index2.useTheme)(),k=(0,_react.useMemo)(()=>buildStyles(w),[w]),P=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,..._}),[_]),F=w.components.filePicker,N=F?.thumbnailSize??84,z=F?.borderRadius??w.radius.md,O=F?.dashedBorderColor??w.colors.primary,[I,M]=(0,_index.useControllableState)({value:r,defaultValue:i??[],onChange:o}),V=(0,_react.useRef)(I);V.current=I;const B=(0,_react.useCallback)(e=>{V.current=e,M(e)},[M]),[L,W]=(0,_react.useState)(null),[q,A]=(0,_react.useState)(!1),$=p??L??void 0,H="number"==typeof n&&I.length>=n,E=(0,_react.useCallback)((e,t)=>{0!==e.length&&(W(e[0]),e.forEach(e=>j?.(e,t)),!1!==y&&(0,_index3.triggerHaptic)("notificationError"))},[j,y]),D=(0,_react.useCallback)(async e=>{let t;try{t=await e.pick()}catch(e){return void E([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let i=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof n){const e=Math.max(0,n-V.current.length);i.length>e&&(r.push(P.errorTooMany(n)),i=i.slice(0,e))}const o=[];for(const e of i){if("number"==typeof l&&"number"==typeof e.size&&e.size>1024*l*1024){r.push(P.errorTooLarge(e.name,l));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):o.push(e)}if(E(r),0===o.length)return;if(!d){B([...V.current,...o]),W(r.length>0?r[0]:null);const e=(0,_index3.resolveHaptic)(y,"selection");return e&&(0,_index3.triggerHaptic)(e),void b?.(o)}const s=o.map(e=>({...e,status:"processing"}));B([...V.current,...s]);const u=[];for(const e of s)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};B(V.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){B(V.current.filter(t=>t.id!==e.id)),E([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&W(null);const e=(0,_index3.resolveHaptic)(y,"selection");e&&(0,_index3.triggerHaptic)(e),b?.(u)}},[n,l,a,c,d,P,E,B,b,y]),U=(0,_react.useCallback)(e=>{if(h||H)return;const t=e?s.find(t=>t.key===e):1===s.length?s[0]:void 0;t?D(t):s.length>1&&A(!0)},[h,H,s,D]),G=(0,_react.useCallback)(e=>{if(h)return;B(V.current.filter(t=>t.id!==e.id)),W(null);const t=(0,_index3.resolveHaptic)(y,"selection");t&&(0,_index3.triggerHaptic)(t),f?.(e)},[h,B,f,y]),K=(0,_react.useCallback)(()=>{B([]),W(null)},[B]);(0,_react.useImperativeHandle)(t,()=>({open:U,clear:K}),[U,K]);const Y=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,J=T??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=w.icons?.attachment??_defaultIcons.defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index4.Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.tileOverlayText,{color:w.colors.onOverlay}],children:`${t}%`}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileProgressFill,{width:`${t}%`,backgroundColor:w.colors.primary}]})})]})}return"done"===e.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.doneBadge,{backgroundColor:w.colors.success}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.doneBadgeText,{color:w.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:t},style:k.thumbnailImage}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.extensionTile,{backgroundColor:w.colors.background.secondary}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.extensionText,{color:w.colors.text.secondary,...(0,_index2.fontFor)(w,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(e),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[k.removeButton,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.removeButtonText,{color:w.colors.onOverlay}],children:"×"})}),retryButton=e=>R&&"error"===e.status?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>R(e),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.retryText,{color:w.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:h,remove:()=>G(e),retry:R?()=>R(e):void 0},i=g?g(r):"card"===u?(e=>{const{file:t}=e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.tile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listRow,{borderRadius:z,..._corners.smoothCorners,borderColor:"error"===t.status?w.colors.error:w.colors.border.primary,backgroundColor:w.colors.background.primary}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.listThumb,{borderRadius:w.radius.sm,..._corners.smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.tileOverlay,{backgroundColor:w.colors.background.overlay}],children:(0,_jsxRuntime.jsx)(_index4.Spinner,{size:"sm"})}):null]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.listTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"middle",style:[k.listName,{color:w.colors.text.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:t.name}),(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:1,style:[k.listSubtitle,{color:"error"===t.status?w.colors.error:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressTrack,{backgroundColor:w.colors.border.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:w.colors.primary}]})}):null]}),retryButton(t),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>G(t),disabled:h,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.listRemoveText,{color:w.colors.text.tertiary}],children:"×"})})]})})(r);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:v?()=>v(e):void 0,disabled:h||!v,accessibilityLabel:fileA11yLabel(e),children:i},e.id)},X={open:U,disabled:h||H,fileCount:I.length,atCapacity:H},dashedTrigger=e=>(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>U(),disabled:h||H,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:h||H},style:({pressed:t})=>[k.trigger,e?k.triggerCompact:null,{borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:t?w.colors.surface.pressed:w.colors.background.primary,opacity:h||H?.55:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.triggerRow,children:[Q?Q({size:16,color:w.colors.primary}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.triggerText,{color:w.colors.primary,fontSize:w.typography.fontSize.sm,...(0,_index2.fontFor)(w,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&x?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.helperText,{color:w.colors.text.tertiary,fontSize:w.typography.fontSize.xs}],children:x}):null]}),Z=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>U(),disabled:h||H,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[k.tile,k.addTile,{width:N,height:N,borderRadius:z,..._corners.smoothCorners,borderColor:O,backgroundColor:e?w.colors.surface.pressed:"transparent",opacity:h||H?.55:1}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.addTileText,{color:w.colors.primary}],children:"+"})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.container,S],testID:C,accessibilityLabel:J,children:["card"===u?0===I.length?m?m(X):dashedTrigger(!1):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[k.strip,{columnGap:w.spacing.sm}],children:[I.map(renderOneFile),m?m(X):H||h?null:Z]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{rowGap:w.spacing.sm},children:[m?m(X):H?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),$?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessibilityLiveRegion:"polite",style:[k.errorText,{color:w.colors.error,fontSize:w.typography.fontSize.xs,marginTop:w.spacing.xxs}],children:$}):null,(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:q,onClose:()=>A(!1),title:P.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{A(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,..._corners.smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,..._corners.smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});var _default=exports.default=FilePicker;