@classic-homes/theme-svelte 0.1.54 → 0.1.55

package/dist/__tests__/FileUpload.test.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import FileUpload from '../lib/components/FileUpload.svelte';
+describe('FileUpload accepted-types label', () => {
+    it('derives a friendly label from MIME types instead of showing raw values', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: [
+                    'image/jpeg',
+                    'image/png',
+                    'application/pdf',
+                    'video/mp4',
+                    'video/quicktime',
+                ],
+            },
+        });
+        expect(screen.getByText(/Images, PDF, Videos \(max/)).toBeInTheDocument();
+        // Raw MIME types should not be shown
+        expect(screen.queryByText(/image\/jpeg/)).not.toBeInTheDocument();
+    });
+    it('uses the default accepted types (Images, PDF) when none are provided', () => {
+        render(FileUpload, { props: { label: 'Upload files' } });
+        expect(screen.getByText(/^Images, PDF \(max/)).toBeInTheDocument();
+    });
+    it('respects an explicit typesLabel override', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['image/png', 'video/mp4'],
+                typesLabel: 'Photos and clips',
+            },
+        });
+        expect(screen.getByText(/^Photos and clips \(max/)).toBeInTheDocument();
+    });
+    it('falls back to the uppercased subtype for unmapped types', () => {
+        render(FileUpload, {
+            props: {
+                label: 'Upload files',
+                acceptedTypes: ['application/zip'],
+            },
+        });
+        expect(screen.getByText(/^ZIP \(max/)).toBeInTheDocument();
+    });
+});

package/dist/lib/components/FileUpload.svelte

@@ -38,6 +38,12 @@
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
   }
@@ -56,6 +62,7 @@
     onUpload,
     label,
     hint,
+    typesLabel,
     class: className,
   }: Props = $props();
 
@@ -68,6 +75,33 @@
 
   const displayError = $derived(externalError || internalError);
 
+  /**
+   * Readable label for the accepted types shown in the drop zone.
+   * Uses the explicit `typesLabel` when provided, otherwise groups the
+   * accepted MIME types into friendly names (Images, PDF, Videos, ...).
+   */
+  const acceptedTypesLabel = $derived.by(() => {
+    if (typesLabel) return typesLabel;
+
+    const groups: string[] = [];
+    const add = (name: string) => {
+      if (!groups.includes(name)) groups.push(name);
+    };
+
+    for (const type of acceptedTypes) {
+      if (type.startsWith('image/')) add('Images');
+      else if (type === 'application/pdf') add('PDF');
+      else if (type.startsWith('video/')) add('Videos');
+      else if (type.startsWith('audio/')) add('Audio');
+      else {
+        const subtype = type.split('/')[1];
+        add(subtype ? subtype.toUpperCase() : type);
+      }
+    }
+
+    return groups.join(', ');
+  });
+
   // Helper to generate unique ID
   function generateId(): string {
     return `file-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
@@ -337,7 +371,7 @@
       <span class="font-medium text-foreground">Click to upload</span> or drag and drop
     </p>
     <p class="mt-1 text-xs text-muted-foreground">
-      {acceptedTypes.join(', ')} (max {formatSize(maxSizeBytes)})
+      {acceptedTypesLabel} (max {formatSize(maxSizeBytes)})
     </p>
 
     <!-- Hidden file input -->

package/dist/lib/components/FileUpload.svelte.d.ts

@@ -34,6 +34,12 @@ interface Props {
     label?: string;
     /** Hint text shown below the drop zone */
     hint?: string;
+    /**
+     * Human-friendly label for the accepted file types shown in the drop zone.
+     * When omitted, a readable label is derived from `acceptedTypes`
+     * (e.g. "Images, PDF, Videos") instead of showing raw MIME types.
+     */
+    typesLabel?: string;
     /** Additional classes */
     class?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",