@minutemailer/kit 1.2.2 → 1.2.4

package/components/image-slot.d.ts

@@ -12,6 +12,7 @@ export interface ImageSlotProps {
     alt?: string;
     width: number;
     height: number;
+    scale?: number;
     actions?: ImageSlotAction[];
     onAction?: (action: string) => void;
     onRemove?: () => void;
@@ -21,5 +22,5 @@ export interface ImageSlotProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function ImageSlot({ src, s3, alt, width, height, actions, onAction, onRemove, onFile, loading, accept, className, style, }: ImageSlotProps): import("react/jsx-runtime").JSX.Element;
+declare function ImageSlot({ src, s3, alt, width, height, scale, actions, onAction, onRemove, onFile, loading, accept, className, style, }: ImageSlotProps): import("react/jsx-runtime").JSX.Element;
 export { ImageSlot };

package/components/image-slot.js

@@ -7,8 +7,7 @@ import { Spinner } from '../components/ui/spinner.js';
 import { toast } from 'sonner';
 import { ChevronDownIcon, ImageIcon, Trash2Icon } from 'lucide-react';
 import { S3Image } from '../components/s3-image.js';
-function ImageSlot({ src, s3, alt = '', width, height, actions = [], onAction, onRemove, onFile, loading = false, accept = ['image/gif', 'image/png', 'image/jpeg'], className, style, }) {
-    const aspectRatio = width / height;
+function ImageSlot({ src, s3, alt = '', width, height, scale = 1, actions = [], onAction, onRemove, onFile, loading = false, accept = ['image/gif', 'image/png', 'image/jpeg'], className, style, }) {
     const [dragState, setDragState] = useState('idle');
     const dragCounterRef = useRef(0);
     const fileInputRef = useRef(null);
@@ -87,21 +86,20 @@ function ImageSlot({ src, s3, alt = '', width, height, actions = [], onAction, o
         onRemove?.();
         setS3ImageData(null);
     };
-    const containerWidth = s3ImageData ? s3ImageData.width : width;
-    const containerHeight = s3ImageData ? s3ImageData.height : height;
+    const maxWidth = s3ImageData ? s3ImageData.width * scale : width * scale;
     if (src || s3) {
         return (_jsxs("div", { className: cn('relative group', className), style: {
-                width: containerWidth,
-                height: containerHeight,
+                width: '100%',
+                maxWidth,
+                aspectRatio: `${width} / ${height}`,
                 ...style,
             }, children: [s3 ? (_jsx(S3Image, { ...s3, width: width, height: height, onLoaded: onS3ImageLoaded, alt: alt, className: "block w-full h-full object-cover" })) : (_jsx("img", { src: src, alt: alt, width: width, height: height, className: "block w-full h-full object-cover" })), onRemove && (_jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: _jsx(Button, { variant: "outline", className: "rounded-full", size: "icon", onClick: handleRemove, children: _jsx(Trash2Icon, {}) }) }))] }));
     }
     // Placeholder view
     return (_jsx("div", { "data-slot": "image-slot", className: cn('bg-muted flex items-center justify-center @container transition-colors', dragState === 'over' && 'bg-green-100 dark:bg-green-950', className), style: {
-            width: width,
-            maxHeight: height,
-            maxWidth: '100%',
-            height: width / aspectRatio,
+            width: '100%',
+            maxWidth: width * scale,
+            aspectRatio: `${width} / ${height}`,
             ...style,
         }, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: loading ? (_jsx(Spinner, { className: "size-8" })) : dragState === 'over' ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Drop image to upload" })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: accept.join(','), onChange: handleFileInputChange, className: "hidden" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(ImageIcon, { className: "@xs:hidden" }), _jsx("span", { className: "hidden @xs:inline", children: "Add image" }), _jsx(ChevronDownIcon, { className: "hidden @xs:inline" })] }) }), _jsx(DropdownMenuContent, { children: actions.map((action) => (_jsxs(DropdownMenuItem, { onClick: () => handleActionClick(action), children: [action.icon, action.name] }, action.value))) })] })] })) }));
 }

package/components/s3-image.js

@@ -9,12 +9,12 @@ function S3Image({ imageKey, width, height = 0, fit = 'inside', retina = true, o
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     // Calculate container dimensions
-    const containerWidth = width === 'auto'
+    const containerWidth = imageData?.width || width === 'auto'
         ? undefined
         : typeof width === 'string'
             ? parseInt(width, 10)
             : width;
-    const containerHeight = height === 'auto'
+    const containerHeight = imageData?.height || height === 'auto'
         ? undefined
         : typeof height === 'string'
             ? parseInt(height, 10)
@@ -48,9 +48,13 @@ function S3Image({ imageKey, width, height = 0, fit = 'inside', retina = true, o
         JSON.stringify(edits),
         s3Image,
     ]);
+    const aspectRatio = containerWidth && containerHeight
+        ? `${containerWidth} / ${containerHeight}`
+        : undefined;
     const containerStyle = {
-        width: imageData ? imageData.width : containerWidth || 'auto',
-        height: imageData ? imageData.height : containerHeight || 'auto',
+        width: '100%',
+        maxWidth: imageData ? imageData.width : containerWidth || undefined,
+        aspectRatio: aspectRatio,
     };
     if (!imageKey) {
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",