FileList

FileList renders attached files with their type icon, name, size, optional progress bar (uploading), and an error slot.

#Default usage

<FileList
  items={[
    { id: "a", name: "design.pdf", size: 524288 },
    { id: "b", name: "logo.png", size: 18432, status: "complete" }
  ]}
/>

#Import

import {
  AttachmentList,
  FileList,
  type FileListItem,
  type FileListItemStatus,
} from "@froggdesign/enter-ui-react";

#Accessibility

Each remove control is a real <button> with aria-label="Remove {name}". Items use data-status so consumer styles can target progress / error states.

#API

• items: FileListItem array (id, name, optional size, status, progress, error, icon).
• onRemove(id): when set, renders a remove icon-button per item with an accessible label.
• formatSize(bytes): customise the size formatter (defaults to KB/MB/GB).
• AttachmentList is an alias for comment and message attachment surfaces.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.