@getmicdrop/svelte-components 5.16.2 → 5.17.0

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -41,6 +41,22 @@
   type AspectRatio = '1:1' | '2:1' | '16:9' | '4:3' | 'free';
   type Size = 'sm' | 'md' | 'lg';
 
+  /**
+   * Default labels for user-visible strings in ImageUploader.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    uploadPhotoTitle: 'Upload photo',
+    mainBadge: 'Main',
+    replace: 'Replace',
+    delete: 'Delete',
+    removePhoto: 'Remove photo',
+    addPhotoAria: 'Add photo - drag and drop or click to upload',
+    fileTypes: 'JPG, PNG, WebP',
+    uploadedAlt: 'Uploaded',
+    closeModal: 'Close',
+  };
+
   interface Props {
     /** Single image or array of images (URLs) */
     images?: string | string[];
@@ -88,6 +104,8 @@
     disabled?: boolean;
     /** Custom class for wrapper */
     class?: string;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -113,8 +131,11 @@
     error = '',
     disabled = false,
     class: className = '',
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Normalize images to array
   let imageArray = $derived(
     Array.isArray(images)
@@ -235,7 +256,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
         <span class="text-sm font-medium text-gray-600 dark:text-gray-300">${emptyLabel}</span>
-        <span class="text-[11px] text-gray-400 dark:text-gray-500 mt-2 block">JPG, PNG, WebP</span>
+        <span class="text-[11px] text-gray-400 dark:text-gray-500 mt-2 block">${labels.fileTypes}</span>
         ${constraintsText ? `<span class="text-[10px] text-gray-400/50 dark:text-gray-500/50 mt-1 block">${constraintsText}</span>` : ''}
       </div>
     `,
@@ -592,7 +613,7 @@
       <div class="relative {shapeAspects[shape]} bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden group">
         <img
           src={imageArray[0]}
-          alt="Uploaded"
+          alt={labels.uploadedAlt}
           class="w-full h-full object-contain"
         />
         {#if !disabled}
@@ -603,7 +624,7 @@
               onclick={() => singleModeFileInput?.click()}
             >
               <ImageOutline class="w-4 h-4 mr-1.5" />
-              Replace
+              {labels.replace}
             </Button>
             <Button
               variant="red"
@@ -611,7 +632,7 @@
               onclick={() => handleRemoveImage(0)}
             >
               <TrashBinOutline class="w-4 h-4 mr-1.5" />
-              Delete
+              {labels.delete}
             </Button>
           </div>
           <!-- Hidden file input for replace -->
@@ -620,6 +641,7 @@
             type="file"
             accept={acceptedTypes.join(',')}
             class="hidden"
+            data-testid="image-upload-input"
             onchange={handleSingleModeFileSelect}
           />
         {/if}
@@ -683,13 +705,13 @@
               >
                 <img
                   src={slot.image}
-                  alt="Uploaded"
+                  alt={labels.uploadedAlt}
                   class="w-full h-full object-contain pointer-events-none"
                   draggable="false"
                 />
                 {#if showMainBadge && index === 0}
                   <div class="absolute bottom-1 left-1 z-10 pointer-events-none">
-                    <Badge variant="info" size={currentSizeConfig.badgeSize}>Main</Badge>
+                    <Badge variant="info" size={currentSizeConfig.badgeSize}>{labels.mainBadge}</Badge>
                   </div>
                 {/if}
                 {#if !disabled}
@@ -697,7 +719,7 @@
                     type="button"
                     class="remove-btn absolute top-1 right-1 {currentSizeConfig.removeSize} bg-white/90 dark:bg-gray-900/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-900"
                     onclick={(e) => { e.stopPropagation(); handleRemoveImage(index); }}
-                    aria-label="Remove photo"
+                    aria-label={labels.removePhoto}
                   >
                     <CloseOutline class="w-3 h-3 text-gray-700 dark:text-gray-300" />
                   </button>
@@ -719,7 +741,7 @@
                 ondragover={(e) => { e.preventDefault(); e.stopPropagation(); isDropzoneDragOver = true; }}
                 ondragleave={(e) => { e.preventDefault(); e.stopPropagation(); isDropzoneDragOver = false; }}
                 ondrop={(e) => handleDropzoneDrop(e, index)}
-                aria-label="Add photo - drag and drop or click to upload"
+                aria-label={labels.addPhotoAria}
               >
                 <PlusOutline class={currentSizeConfig.iconClass + ' text-gray-400 dark:text-gray-500'} />
               </div>
@@ -755,12 +777,12 @@
         onclick={(e) => e.stopPropagation()}
       >
         <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 class={typography.h3}>Upload photo</h3>
+          <h3 class={typography.h3}>{labels.uploadPhotoTitle}</h3>
           <button
             type="button"
             class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
             onclick={() => (showFilePondModal = false)}
-            aria-label="Close"
+            aria-label={labels.closeModal}
           >
             <CloseOutline class="w-5 h-5" />
           </button>
@@ -783,13 +805,14 @@
           >
             <PlusOutline class="w-8 h-8 mb-2 text-gray-400" />
             <span class={typography.smMuted}>{emptyLabel}</span>
-            <span class={`${typography.xsMuted} mt-1`}>JPG, PNG, WebP</span>
+            <span class={`${typography.xsMuted} mt-1`}>{labels.fileTypes}</span>
           </div>
           <input
             bind:this={modalFileInput}
             type="file"
             accept={acceptedTypes.join(',')}
             class="hidden"
+            data-testid="image-upload-modal-input"
             onchange={handleModalFileSelect}
           />
         </div>

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts

@@ -1,9 +1,6 @@
 import 'filepond/dist/filepond.min.css';
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
-type Shape = 'square' | 'wide';
-type AspectRatio = '1:1' | '2:1' | '16:9' | '4:3' | 'free';
-type Size = 'sm' | 'md' | 'lg';
-interface Props {
+declare const ImageUploader: import("svelte").Component<{
     /** Single image or array of images (URLs) */
     images?: string | string[];
     /** Maximum number of images (only for multi mode) */
@@ -11,13 +8,13 @@ interface Props {
     /** Enable cropping step */
     enableCrop?: boolean;
     /** Crop aspect ratio */
-    cropAspectRatio?: AspectRatio;
+    cropAspectRatio?: "1:1" | "2:1" | "16:9" | "4:3" | "free";
     /** Enable drag-to-reorder (only for multi mode) */
     enableReorder?: boolean;
     /** Dropzone shape - affects aspect ratio and styling */
-    shape?: Shape;
+    shape?: "wide" | "square";
     /** Size of image slots: sm (~64px), md (~96px), lg (~200px+) */
-    size?: Size;
+    size?: "sm" | "md" | "lg";
     /** Show "Main" badge on first image (multi mode) */
     showMainBadge?: boolean;
     /** Maximum file size (e.g., "10MB") */
@@ -55,8 +52,19 @@ interface Props {
     disabled?: boolean;
     /** Custom class for wrapper */
     class?: string;
-}
-declare const ImageUploader: import("svelte").Component<Props, {}, "images">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        uploadPhotoTitle: string;
+        mainBadge: string;
+        replace: string;
+        delete: string;
+        removePhoto: string;
+        addPhotoAria: string;
+        fileTypes: string;
+        uploadedAlt: string;
+        closeModal: string;
+    }>;
+}, {}, "images">;
 type ImageUploader = ReturnType<typeof ImageUploader>;
 export default ImageUploader;
 //# sourceMappingURL=ImageUploader.svelte.d.ts.map

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAY5E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;sEAEkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkpBH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAkuB9E,QAAA,MAAM,aAAa;IAtqBf,6CAA6C;aACpC,MAAM,GAAG,MAAM,EAAE;IAC1B,qDAAqD;gBACzC,MAAM;IAClB,2BAA2B;iBACd,OAAO;IACpB,wBAAwB;;IAExB,mDAAmD;oBACnC,OAAO;IACvB,wDAAwD;;IAExD,gEAAgE;;IAEhE,oDAAoD;oBACpC,OAAO;IACvB,uCAAuC;kBACzB,MAAM;IACpB,0BAA0B;oBACV,MAAM,EAAE;IACxB,6BAA6B;iBAChB,MAAM;IACnB,wEAAwE;sBACtD,MAAM;IACxB,uCAAuC;iBAC1B,MAAM;IACnB;;sEAEkE;eACvD,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI;IAC/D,qCAAqC;eAC1B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAClC,8DAA8D;gBAClD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACtC,oFAAoF;uBACjE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC/D,4EAA4E;gBAChE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;IAC7C,2DAA2D;eAChD,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI;IACrC,wBAAwB;YAChB,MAAM;IACd,qBAAqB;eACV,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,oCAAoC;aAC3B,OAAO;;;;;;;;;;MAAsB;gBAunBiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}