@minutemailer/kit 1.2.1 → 1.2.2

package/components/image-slot.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type S3ImageProps } from '../components/s3-image.js';
 export interface ImageSlotAction {
     name: string;
@@ -19,6 +19,7 @@ export interface ImageSlotProps {
     loading?: boolean;
     accept?: string[];
     className?: string;
+    style?: CSSProperties;
 }
-declare function ImageSlot({ src, s3, alt, width, height, actions, onAction, onRemove, onFile, loading, accept, className, }: ImageSlotProps): import("react/jsx-runtime").JSX.Element;
+declare function ImageSlot({ src, s3, alt, width, height, actions, onAction, onRemove, onFile, loading, accept, className, style, }: ImageSlotProps): import("react/jsx-runtime").JSX.Element;
 export { ImageSlot };

package/components/image-slot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useRef, useState, } from 'react';
 import { cn } from '../utils/utils.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
 import { Button } from '../components/ui/button.js';
@@ -7,11 +7,12 @@ 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, }) {
+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;
     const [dragState, setDragState] = useState('idle');
     const dragCounterRef = useRef(0);
     const fileInputRef = useRef(null);
+    const [s3ImageData, setS3ImageData] = useState(null);
     const handleAction = (action) => {
         onAction?.(action);
     };
@@ -78,8 +79,22 @@ function ImageSlot({ src, s3, alt = '', width, height, actions = [], onAction, o
             });
         }
     };
+    const onS3ImageLoaded = (result) => {
+        s3?.onLoaded?.(result);
+        setS3ImageData(result);
+    };
+    const handleRemove = () => {
+        onRemove?.();
+        setS3ImageData(null);
+    };
+    const containerWidth = s3ImageData ? s3ImageData.width : width;
+    const containerHeight = s3ImageData ? s3ImageData.height : height;
     if (src || s3) {
-        return (_jsxs("div", { className: cn('relative group', className), style: { width, height }, children: [s3 ? (_jsx(S3Image, { ...s3, width: width, height: height, 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: onRemove, children: _jsx(Trash2Icon, {}) }) }))] }));
+        return (_jsxs("div", { className: cn('relative group', className), style: {
+                width: containerWidth,
+                height: containerHeight,
+                ...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: {
@@ -87,6 +102,7 @@ function ImageSlot({ src, s3, alt = '', width, height, actions = [], onAction, o
             maxHeight: height,
             maxWidth: '100%',
             height: width / aspectRatio,
+            ...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))) })] })] })) }));
 }
 export { ImageSlot };

package/components/s3-image.d.ts

@@ -1,5 +1,5 @@
 import { type ImgHTMLAttributes } from 'react';
-import type { FitOptions, ImageEdits, OverlayOptions } from '../utils/s3Image/types.js';
+import type { FitOptions, ImageEdits, OverlayOptions, S3ImageResult } from '../utils/s3Image/types.js';
 export interface S3ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     imageKey: string;
     width: number | string | 'auto';
@@ -9,7 +9,7 @@ export interface S3ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     overlayWith?: OverlayOptions;
     edits?: ImageEdits;
     containerClassName?: string;
-    onLoaded?: () => void;
+    onLoaded?: (result: S3ImageResult) => void;
     onError?: () => void;
 }
 declare function S3Image({ imageKey, width, height, fit, retina, overlayWith, edits, containerClassName, className, alt, onLoaded, onError, ...imgProps }: S3ImageProps): import("react/jsx-runtime").JSX.Element | null;

package/components/s3-image.js

@@ -31,7 +31,7 @@ function S3Image({ imageKey, width, height = 0, fit = 'inside', retina = true, o
             .then((result) => {
             setImageData(result);
             setLoading(false);
-            onLoaded?.();
+            onLoaded?.(result);
         })
             .catch(() => {
             setError(true);

package/package.json

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