@tribepad/themis 1.0.0

package/src/elements/FileField/FileField.stories.tsx

@@ -0,0 +1,1021 @@
+/**
+ * FileField Component Stories
+ * Storybook stories for FileField component demonstrating all variants, states, and features
+ *
+ * @see plan.md for architecture details
+ * @see filefield-prd.md for requirements
+ */
+
+import { useState, type FormEvent } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { FileField } from './FileField';
+import { formatFileSize, formatAcceptedTypes } from './utils';
+
+const meta = {
+  title: 'Elements/FileField',
+  component: FileField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible file selection input with drag-and-drop support. Built with React Aria FileTrigger primitive and WCAG 2.2 AAA compliance (7:1 contrast ratio, 44x44px touch targets).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the file field',
+    },
+    description: {
+      control: 'text',
+      description: 'Helper text below the drop zone',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Size variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    allowsMultiple: {
+      control: 'boolean',
+      description: 'Allow multiple file selection',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    acceptedFileTypes: {
+      control: 'object',
+      description: 'Array of accepted MIME types or extensions',
+    },
+    maxFileSize: {
+      control: 'number',
+      description: 'Maximum file size in bytes',
+    },
+    maxFiles: {
+      control: 'number',
+      description: 'Maximum number of files (for multiple mode)',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Mark field as required',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable the field',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Show error state',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isValid: {
+      control: 'boolean',
+      description: 'Show success state',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message to display',
+    },
+    successMessage: {
+      control: 'text',
+      description: 'Success message to display',
+    },
+    triggerText: {
+      control: 'text',
+      description: 'Custom text for the trigger button',
+    },
+  },
+} satisfies Meta<typeof FileField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story
+export const Default: Story = {
+  args: {
+    label: 'Upload File',
+    description: 'Select a file to upload',
+  },
+};
+
+// ============================================================================
+// Size Variants
+// ============================================================================
+
+export const Small: Story = {
+  args: {
+    label: 'Upload File',
+    size: 'sm',
+    description: 'Small size variant',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Upload File',
+    size: 'lg',
+    description: 'Large size variant',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-[400px]">
+      <FileField label="Small" size="sm" description="Size: sm" />
+      <FileField label="Default" size="default" description="Size: default" />
+      <FileField label="Large" size="lg" description="Size: lg" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 size variants for comparison.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Multiple File Selection
+// ============================================================================
+
+export const MultipleFiles: Story = {
+  args: {
+    label: 'Upload Documents',
+    allowsMultiple: true,
+    description: 'Select multiple files',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Allows selecting multiple files at once.',
+      },
+    },
+  },
+};
+
+export const MultipleWithLimit: Story = {
+  args: {
+    label: 'Upload Photos',
+    allowsMultiple: true,
+    maxFiles: 5,
+    description: 'Maximum 5 files allowed',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple file selection with a maximum count limit.',
+      },
+    },
+  },
+};
+
+// Interactive story with state
+export const InteractiveMultiple: Story = {
+  render: function InteractiveMultipleStory() {
+    const [files, setFiles] = useState<File[]>([]);
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Documents"
+          allowsMultiple
+          maxFiles={5}
+          description={`${files.length}/5 files selected`}
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example with file state management.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// File Type Restrictions
+// ============================================================================
+
+export const ImageOnly: Story = {
+  args: {
+    label: 'Upload Image',
+    acceptedFileTypes: ['image/*'],
+    description: 'Accepts: images only',
+  },
+};
+
+export const PDFOnly: Story = {
+  args: {
+    label: 'Upload PDF',
+    acceptedFileTypes: ['application/pdf'],
+    description: 'Accepts: PDF files only',
+  },
+};
+
+export const DocumentTypes: Story = {
+  args: {
+    label: 'Upload Document',
+    acceptedFileTypes: ['application/pdf', '.doc', '.docx', '.txt'],
+    description: 'Accepts: PDF, DOC, DOCX, TXT',
+  },
+};
+
+export const MultipleTypes: Story = {
+  args: {
+    label: 'Upload Media',
+    acceptedFileTypes: ['image/*', 'video/*', 'audio/*'],
+    description: 'Accepts: images, videos, audio files',
+  },
+};
+
+// ============================================================================
+// Size Limits
+// ============================================================================
+
+export const WithSizeLimit: Story = {
+  args: {
+    label: 'Upload Resume',
+    acceptedFileTypes: ['application/pdf'],
+    maxFileSize: 5 * 1024 * 1024, // 5MB
+    description: `Maximum size: ${formatFileSize(5 * 1024 * 1024)}`,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'File field with maximum file size validation.',
+      },
+    },
+  },
+};
+
+export const SmallSizeLimit: Story = {
+  args: {
+    label: 'Upload Avatar',
+    acceptedFileTypes: ['image/*'],
+    maxFileSize: 1024 * 1024, // 1MB
+    description: `Maximum size: ${formatFileSize(1024 * 1024)}`,
+  },
+};
+
+// ============================================================================
+// Validation States
+// ============================================================================
+
+export const Required: Story = {
+  args: {
+    label: 'Upload Resume',
+    isRequired: true,
+    description: 'This field is required',
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    label: 'Upload File',
+    isInvalid: true,
+    errorMessage: 'Please upload a valid file',
+  },
+};
+
+export const Valid: Story = {
+  args: {
+    label: 'Upload File',
+    isValid: true,
+    successMessage: 'File is ready for upload',
+  },
+};
+
+export const CustomValidation: Story = {
+  render: function CustomValidationStory() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [error, setError] = useState<string | undefined>();
+
+    const handleChange = (newFiles: File[]) => {
+      setFiles(newFiles);
+      setError(undefined);
+    };
+
+    const validate = (filesToValidate: File[]) => {
+      const file = filesToValidate[0];
+      if (file && !file.name.toLowerCase().includes('resume')) {
+        return 'File name must contain "resume"';
+      }
+      return undefined;
+    };
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Resume"
+          description='File name must contain "resume"'
+          acceptedFileTypes={['application/pdf']}
+          value={files}
+          onChange={handleChange}
+          validate={validate}
+          errorMessage={error}
+          isInvalid={!!error}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom validation function to check file names.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Disabled State
+// ============================================================================
+
+export const Disabled: Story = {
+  args: {
+    label: 'Upload File',
+    isDisabled: true,
+    description: 'This field is disabled',
+  },
+};
+
+export const DisabledWithFiles: Story = {
+  render: function DisabledWithFilesStory() {
+    const mockFile = new File(['content'], 'existing-file.pdf', {
+      type: 'application/pdf',
+    });
+    Object.defineProperty(mockFile, 'size', { value: 1024 * 100 }); // 100KB
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload File"
+          isDisabled
+          value={[mockFile]}
+          description="Field is disabled but shows existing files"
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state with pre-selected files visible.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Custom Trigger Text
+// ============================================================================
+
+export const CustomTriggerText: Story = {
+  args: {
+    label: 'Upload Photo',
+    triggerText: 'Select photo from device',
+    acceptedFileTypes: ['image/*'],
+  },
+};
+
+export const DragDropHint: Story = {
+  args: {
+    label: 'Upload Documents',
+    triggerText: 'Click to browse or drag files here',
+    allowsMultiple: true,
+  },
+};
+
+// ============================================================================
+// Real-World Examples
+// ============================================================================
+
+export const ResumeUpload: Story = {
+  render: function ResumeUploadStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[400px] rounded-lg border border-[var(--border)] p-6">
+        <h3 className="mb-4 text-lg font-semibold">Job Application</h3>
+        <FileField
+          label="Resume"
+          description="PDF format, max 5MB"
+          acceptedFileTypes={['application/pdf']}
+          maxFileSize={5 * 1024 * 1024}
+          isRequired
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Real-world example: Resume upload for job applications.',
+      },
+    },
+  },
+};
+
+export const ProfilePictureUpload: Story = {
+  render: function ProfilePictureUploadStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[400px] rounded-lg border border-[var(--border)] p-6">
+        <h3 className="mb-4 text-lg font-semibold">Profile Settings</h3>
+        <FileField
+          label="Profile Picture"
+          description="JPG, PNG or GIF, max 2MB"
+          acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
+          maxFileSize={2 * 1024 * 1024}
+          size="sm"
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Real-world example: Profile picture upload.',
+      },
+    },
+  },
+};
+
+export const DocumentPortfolio: Story = {
+  render: function DocumentPortfolioStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[500px] rounded-lg border border-[var(--border)] p-6">
+        <h3 className="mb-4 text-lg font-semibold">Portfolio Submission</h3>
+        <FileField
+          label="Portfolio Documents"
+          description="Upload up to 10 documents (PDF, DOC, images)"
+          acceptedFileTypes={['application/pdf', '.doc', '.docx', 'image/*']}
+          maxFileSize={10 * 1024 * 1024}
+          maxFiles={10}
+          allowsMultiple
+          size="lg"
+          value={files}
+          onChange={setFiles}
+        />
+        {files.length > 0 && (
+          <p className="mt-4 text-sm text-[var(--muted-foreground)]">
+            {files.length} file{files.length > 1 ? 's' : ''} selected,{' '}
+            {formatFileSize(files.reduce((acc, f) => acc + f.size, 0))} total
+          </p>
+        )}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Real-world example: Portfolio document upload with multiple files.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Accessibility Stories
+// ============================================================================
+
+export const FocusVisible: Story = {
+  args: {
+    label: 'Upload File',
+    description: 'Tab to see focus ring',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Press Tab to see the focus ring. Meets WCAG 2.2 AAA standards with visible focus indicator.',
+      },
+    },
+  },
+};
+
+export const TouchTarget: Story = {
+  args: {
+    label: 'Upload File',
+    size: 'sm',
+    description: 'Trigger button has 44x44px minimum touch target',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Even with small size, the trigger button maintains 44x44px minimum touch targets (WCAG 2.2 AAA).',
+      },
+    },
+  },
+};
+
+export const ScreenReaderFriendly: Story = {
+  args: {
+    label: 'Upload Resume',
+    description: 'PDF format only, maximum 5MB',
+    isRequired: true,
+    acceptedFileTypes: ['application/pdf'],
+    maxFileSize: 5 * 1024 * 1024,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All elements have proper ARIA attributes. Label, description, and error messages are associated with the input for screen readers.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Theme Integration
+// ============================================================================
+
+export const LightTheme: Story = {
+  args: {
+    label: 'Upload File',
+    description: 'Light theme',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  args: {
+    label: 'Upload File',
+    description: 'Dark theme',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'FileField adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Form Integration
+// ============================================================================
+
+export const FormWithFileField: Story = {
+  render: function FormWithFileFieldStory() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [submitted, setSubmitted] = useState(false);
+
+    const handleSubmit = (e: FormEvent) => {
+      e.preventDefault();
+      if (files.length > 0) {
+        setSubmitted(true);
+        setTimeout(() => setSubmitted(false), 2000);
+      }
+    };
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[400px] space-y-4">
+        <div className="rounded-lg border border-[var(--border)] p-6">
+          <h3 className="mb-4 text-lg font-semibold">Contact Form</h3>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Name</label>
+              <input
+                type="text"
+                className="w-full rounded-md border border-[var(--input)] px-3 py-2"
+                placeholder="Your name"
+              />
+            </div>
+            <FileField
+              label="Attachment"
+              name="attachment"
+              description="Optional file attachment"
+              value={files}
+              onChange={setFiles}
+            />
+            <button
+              type="submit"
+              className="w-full rounded-md bg-[var(--primary)] px-4 py-2 text-[var(--primary-foreground)] hover:bg-[var(--primary)]/90"
+            >
+              {submitted ? 'Submitted!' : 'Submit'}
+            </button>
+          </div>
+        </div>
+      </form>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'FileField integrated into a form with name prop for form data.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Phase 1: Image Previews
+// ============================================================================
+
+export const WithImagePreviews: Story = {
+  render: function WithImagePreviewsStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Images"
+          description="Select images to see thumbnails"
+          acceptedFileTypes={['image/*']}
+          allowsMultiple
+          showPreviews
+          previewSize={64}
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Enable `showPreviews` to display thumbnail previews for image files. Memory-efficient with automatic cleanup.',
+      },
+    },
+  },
+};
+
+export const LargeImagePreviews: Story = {
+  render: function LargeImagePreviewsStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[500px]">
+        <FileField
+          label="Upload Photos"
+          description="Large preview thumbnails (80px)"
+          acceptedFileTypes={['image/*']}
+          allowsMultiple
+          showPreviews
+          previewSize={80}
+          size="lg"
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Larger preview thumbnails with `previewSize={80}` and large field size.',
+      },
+    },
+  },
+};
+
+export const SmallImagePreviews: Story = {
+  render: function SmallImagePreviewsStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[350px]">
+        <FileField
+          label="Upload Icons"
+          description="Small preview thumbnails"
+          acceptedFileTypes={['image/*']}
+          allowsMultiple
+          showPreviews
+          previewSize={40}
+          size="sm"
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small preview thumbnails with `previewSize={40}` and small field size.',
+      },
+    },
+  },
+};
+
+export const MixedFilesWithPreviews: Story = {
+  render: function MixedFilesWithPreviewsStory() {
+    const [files, setFiles] = useState<File[]>([]);
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Documents & Images"
+          description="Images show previews, other files show icons"
+          acceptedFileTypes={['image/*', 'application/pdf', '.doc', '.docx']}
+          allowsMultiple
+          showPreviews
+          value={files}
+          onChange={setFiles}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When `showPreviews` is enabled with mixed file types, images get thumbnails while other files show type-appropriate icons.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Phase 1: Upload Progress
+// ============================================================================
+
+export const UploadProgressPending: Story = {
+  render: function UploadProgressPendingStory() {
+    // Create mock files
+    const mockFiles = [
+      new File(['content1'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content2'], 'image.jpg', { type: 'image/jpeg' }),
+      new File(['content3'], 'report.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }),
+    ];
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Files"
+          description="Files waiting to upload (shimmer animation)"
+          allowsMultiple
+          showProgress
+          value={mockFiles}
+          uploadStatus={['pending', 'pending', 'pending']}
+          uploadProgress={[0, 0, 0]}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pending upload state shows shimmer animation indicating files are queued for upload.',
+      },
+    },
+  },
+};
+
+export const UploadProgressUploading: Story = {
+  render: function UploadProgressUploadingStory() {
+    const mockFiles = [
+      new File(['content1'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content2'], 'image.jpg', { type: 'image/jpeg' }),
+      new File(['content3'], 'report.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }),
+    ];
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Files"
+          description="Files currently uploading"
+          allowsMultiple
+          showProgress
+          value={mockFiles}
+          uploadStatus={['uploading', 'uploading', 'pending']}
+          uploadProgress={[75, 30, 0]}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uploading state shows progress percentage with primary color fill.',
+      },
+    },
+  },
+};
+
+export const UploadProgressComplete: Story = {
+  render: function UploadProgressCompleteStory() {
+    const mockFiles = [
+      new File(['content1'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content2'], 'image.jpg', { type: 'image/jpeg' }),
+    ];
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Files"
+          description="Files successfully uploaded"
+          allowsMultiple
+          showProgress
+          value={mockFiles}
+          uploadStatus={['complete', 'complete']}
+          uploadProgress={[100, 100]}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete state shows success color (green) with 100% progress. Screen readers announce completion.',
+      },
+    },
+  },
+};
+
+export const UploadProgressError: Story = {
+  render: function UploadProgressErrorStory() {
+    const mockFiles = [
+      new File(['content1'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content2'], 'large-file.zip', { type: 'application/zip' }),
+    ];
+
+    const errors = new Map<number, string>();
+    errors.set(1, 'Network timeout - please try again');
+
+    const handleRetry = (index: number) => {
+      alert(`Retrying upload for file at index ${index}`);
+    };
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Files"
+          description="One file failed to upload"
+          allowsMultiple
+          showProgress
+          value={mockFiles}
+          uploadStatus={['complete', 'error']}
+          uploadProgress={[100, 45]}
+          uploadErrors={errors}
+          onRetry={handleRetry}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Error state shows destructive color (red) with error message and retry button. Screen readers announce failure.',
+      },
+    },
+  },
+};
+
+export const UploadProgressMixed: Story = {
+  render: function UploadProgressMixedStory() {
+    const mockFiles = [
+      new File(['content1'], 'document.pdf', { type: 'application/pdf' }),
+      new File(['content2'], 'image.jpg', { type: 'image/jpeg' }),
+      new File(['content3'], 'video.mp4', { type: 'video/mp4' }),
+      new File(['content4'], 'report.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }),
+    ];
+
+    const errors = new Map<number, string>();
+    errors.set(2, 'File too large');
+
+    return (
+      <div className="w-[400px]">
+        <FileField
+          label="Upload Files"
+          description="Mixed upload states"
+          allowsMultiple
+          showProgress
+          value={mockFiles}
+          uploadStatus={['complete', 'uploading', 'error', 'pending']}
+          uploadProgress={[100, 60, 30, 0]}
+          uploadErrors={errors}
+          onRetry={(index) => alert(`Retry file ${index}`)}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Real-world scenario showing multiple files in different upload states simultaneously.',
+      },
+    },
+  },
+};
+
+export const SimulatedUpload: Story = {
+  render: function SimulatedUploadStory() {
+    const [files, setFiles] = useState<File[]>([]);
+    const [progress, setProgress] = useState<number[]>([]);
+    const [status, setStatus] = useState<Array<'pending' | 'uploading' | 'complete' | 'error'>>([]);
+    const [isUploading, setIsUploading] = useState(false);
+
+    const simulateUpload = async () => {
+      if (files.length === 0) return;
+
+      setIsUploading(true);
+      // Initialize all files as pending
+      setStatus(files.map(() => 'pending'));
+      setProgress(files.map(() => 0));
+
+      // Simulate uploading each file
+      for (let i = 0; i < files.length; i++) {
+        // Set current file to uploading
+        setStatus(prev => {
+          const next = [...prev];
+          next[i] = 'uploading';
+          return next;
+        });
+
+        // Simulate progress
+        for (let p = 0; p <= 100; p += 10) {
+          await new Promise(resolve => setTimeout(resolve, 100));
+          setProgress(prev => {
+            const next = [...prev];
+            next[i] = p;
+            return next;
+          });
+        }
+
+        // Mark as complete
+        setStatus(prev => {
+          const next = [...prev];
+          next[i] = 'complete';
+          return next;
+        });
+      }
+
+      setIsUploading(false);
+    };
+
+    return (
+      <div className="w-[400px] space-y-4">
+        <FileField
+          label="Upload Files"
+          description="Select files and click Upload to simulate"
+          allowsMultiple
+          showProgress={status.length > 0}
+          value={files}
+          onChange={(newFiles) => {
+            setFiles(newFiles);
+            setStatus([]);
+            setProgress([]);
+          }}
+          uploadStatus={status}
+          uploadProgress={progress}
+        />
+        <button
+          type="button"
+          onClick={simulateUpload}
+          disabled={files.length === 0 || isUploading}
+          className="w-full rounded-md bg-[var(--primary)] px-4 py-2 text-[var(--primary-foreground)] hover:bg-[var(--primary)]/90 disabled:opacity-50"
+        >
+          {isUploading ? 'Uploading...' : 'Simulate Upload'}
+        </button>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive demo: Select files and click "Simulate Upload" to see progress animation in action.',
+      },
+    },
+  },
+};