@minutemailer/kit 1.2.0 → 1.2.2

package/components/engagement-chart.js

@@ -27,7 +27,7 @@ export function EngagementChart({ data = defaultData }) {
                 left: 0,
                 right: 0,
                 top: 12,
-            }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "opensGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-opens)", stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: "var(--color-opens)", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "clicksGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-clicks)", stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: "var(--color-clicks)", stopOpacity: 0 })] })] }), _jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "hour", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(Area, { dataKey: "opens", type: "linear", fill: "url(#opensGradient)", stroke: "var(--color-opens)", strokeWidth: 2, dot: false, activeDot: {
+            }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "opensGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-opens)", stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: "var(--color-opens)", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "clicksGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "var(--color-clicks)", stopOpacity: 0.3 }), _jsx("stop", { offset: "100%", stopColor: "var(--color-clicks)", stopOpacity: 0 })] })] }), _jsx(CartesianGrid, { vertical: false, strokeOpacity: 0.2 }), _jsx(XAxis, { dataKey: "hour", tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(Area, { dataKey: "opens", type: "linear", fill: "url(#opensGradient)", stroke: "var(--color-opens)", strokeWidth: 2, dot: false, activeDot: {
                         r: 4,
                         fill: 'var(--color-opens)',
                         stroke: 'var(--color-opens)',

package/components/image-slot.d.ts

@@ -1,4 +1,5 @@
-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;
     value: string;
@@ -7,6 +8,7 @@ export interface ImageSlotAction {
 }
 export interface ImageSlotProps {
     src?: string;
+    s3?: Omit<S3ImageProps, 'width' | 'height'>;
     alt?: string;
     width: number;
     height: number;
@@ -17,6 +19,7 @@ export interface ImageSlotProps {
     loading?: boolean;
     accept?: string[];
     className?: string;
+    style?: CSSProperties;
 }
-declare function ImageSlot({ src, 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,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { 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';
 import { Spinner } from '../components/ui/spinner.js';
 import { toast } from 'sonner';
 import { ChevronDownIcon, ImageIcon, Trash2Icon } from 'lucide-react';
-function ImageSlot({ src, alt = '', width, height, actions = [], onAction, onRemove, onFile, loading = false, accept = ['image/gif', 'image/png', 'image/jpeg'], className, }) {
+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;
     const [dragState, setDragState] = useState('idle');
-    const dragCounterRef = React.useRef(0);
-    const fileInputRef = React.useRef(null);
+    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, alt = '', width, height, actions = [], onAction, onRem
             });
         }
     };
-    if (src) {
-        return (_jsxs("div", { className: cn('relative group', className), style: { width, height }, children: [_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, {}) }) }))] }));
+    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: 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, alt = '', width, height, actions = [], onAction, onRem
             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/minutemailer-kit.d.ts

@@ -1,10 +1,19 @@
 import { type ReactNode } from 'react';
-export declare const Context: import("react").Context<{
+type S3Config = {
+    bucket: string;
+    cloudFrontUrl: string;
+    resizeCloudUrl: string;
+};
+type ContextValue = {
     t: (key: string) => string;
-}>;
+    s3?: S3Config;
+};
+export declare const Context: import("react").Context<ContextValue>;
 type MinutemailerKitProps = {
     children: ReactNode;
     t: (key: string) => string;
+    s3?: S3Config;
 };
-export declare function MinutemailerKit({ children, t }: MinutemailerKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function MinutemailerKit({ children, t, s3 }: MinutemailerKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function useS3Config(): S3Config;
 export {};

package/components/minutemailer-kit.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 export const Context = createContext({
     t: (key) => key,
 });
-export function MinutemailerKit({ children, t }) {
-    return _jsx(Context.Provider, { value: { t }, children: children });
+export function MinutemailerKit({ children, t, s3 }) {
+    return _jsx(Context.Provider, { value: { t, s3 }, children: children });
+}
+export function useS3Config() {
+    const context = useContext(Context);
+    if (!context.s3) {
+        throw new Error('S3 configuration not provided in MinutemailerKit');
+    }
+    return context.s3;
 }

package/components/more.d.ts

@@ -1,6 +1,8 @@
+import * as React from 'react';
 export type MoreOption = {
     value: string;
     name: string;
+    icon?: React.ComponentType<any>;
     variant?: 'default' | 'destructive';
     disabled?: boolean;
     separator?: boolean;

package/components/more.js

@@ -10,5 +10,5 @@ export function More({ options, loading = false, onChange, disabled = false, })
             onChange(value);
         }
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled || loading, "aria-label": "More options", children: loading ? _jsx(Spinner, {}) : _jsx(MoreIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: options.map((option, index) => (_jsxs(React.Fragment, { children: [option.separator && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { variant: option.variant, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: option.name })] }, option.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled || loading, "aria-label": "More options", children: loading ? _jsx(Spinner, {}) : _jsx(MoreIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: options.map((option, index) => (_jsxs(React.Fragment, { children: [option.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "py-2.5", variant: option.variant, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: [option.icon && _jsx(option.icon, {}), option.name] })] }, option.value))) })] }));
 }

package/components/page-tabs.d.ts

@@ -0,0 +1,12 @@
+export interface PageTab {
+    id: string;
+    label: string;
+    href?: string;
+}
+export interface PageTabsProps {
+    tabs: PageTab[];
+    activeTab: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+}
+export declare function PageTabs({ tabs, activeTab, onTabChange, className, }: PageTabsProps): import("react/jsx-runtime").JSX.Element;

package/components/page-tabs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../components/ui/button.js';
+import { cn } from '../utils/utils.js';
+export function PageTabs({ tabs, activeTab, onTabChange, className, }) {
+    return (_jsx("div", { className: cn('flex items-center border-b bg-background px-6', className), children: _jsx("div", { className: "flex h-12 items-center gap-6", children: tabs.map((tab) => (_jsx(Button, { variant: "ghost", className: cn('h-12 rounded-none border-b-2 px-2 font-medium hover:bg-transparent hover:text-foreground text-base', activeTab === tab.id
+                    ? 'border-black text-foreground'
+                    : 'border-transparent text-muted-foreground'), onClick: () => onTabChange?.(tab.id), children: tab.label }, tab.id))) }) }));
+}

package/components/s3-image.d.ts

@@ -0,0 +1,16 @@
+import { type ImgHTMLAttributes } from 'react';
+import type { FitOptions, ImageEdits, OverlayOptions, S3ImageResult } from '../utils/s3Image/types.js';
+export interface S3ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    imageKey: string;
+    width: number | string | 'auto';
+    height?: number | string | 'auto';
+    fit?: FitOptions;
+    retina?: boolean;
+    overlayWith?: OverlayOptions;
+    edits?: ImageEdits;
+    containerClassName?: string;
+    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;
+export { S3Image };

package/components/s3-image.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cn } from '../utils/utils.js';
+import { Spinner } from '../components/ui/spinner.js';
+import { useS3Image } from '../hooks/use-s3-image.js';
+function S3Image({ imageKey, width, height = 0, fit = 'inside', retina = true, overlayWith, edits = {}, containerClassName, className, alt = '', onLoaded, onError, ...imgProps }) {
+    const s3Image = useS3Image();
+    const [imageData, setImageData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    // Calculate container dimensions
+    const containerWidth = width === 'auto'
+        ? undefined
+        : typeof width === 'string'
+            ? parseInt(width, 10)
+            : width;
+    const containerHeight = height === 'auto'
+        ? undefined
+        : typeof height === 'string'
+            ? parseInt(height, 10)
+            : height;
+    useEffect(() => {
+        if (!imageKey) {
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(false);
+        const imageLoader = s3Image(imageKey, width, height, fit, retina, overlayWith, edits);
+        imageLoader()
+            .then((result) => {
+            setImageData(result);
+            setLoading(false);
+            onLoaded?.(result);
+        })
+            .catch(() => {
+            setError(true);
+            setLoading(false);
+            onError?.();
+        });
+    }, [
+        imageKey,
+        width,
+        height,
+        fit,
+        retina,
+        JSON.stringify(overlayWith),
+        JSON.stringify(edits),
+        s3Image,
+    ]);
+    const containerStyle = {
+        width: imageData ? imageData.width : containerWidth || 'auto',
+        height: imageData ? imageData.height : containerHeight || 'auto',
+    };
+    if (!imageKey) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('relative inline-block', containerClassName), style: containerStyle, children: [loading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: _jsx(Spinner, { className: "size-6" }) })), error && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted text-muted-foreground text-sm", children: "Failed to load image" })), imageData && !loading && (_jsx("img", { src: imageData.src, alt: alt, width: imageData.width, height: imageData.height, loading: "lazy", className: cn(className), ...imgProps }))] }));
+}
+export { S3Image };

package/components/ui/accordion.js

@@ -12,6 +12,6 @@ function AccordionTrigger({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Header, { className: "flex", "data-slot": "accordion-header", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('flex flex-1 cursor-pointer items-center justify-between rounded-md px-4 py-5 font-medium transition-all hover:bg-accent/50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) }));
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden px-4 py-4 text-sm transition-all", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) }));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/components/ui/alert.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/utils.js';
-const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
+const alertVariants = cva('relative w-full rounded-lg border px-4 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
     variants: {
         variant: {
             default: 'bg-card text-card-foreground',
-            destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+            destructive: 'text-destructive bg-destructive/5 border-destructive/20 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
         },
     },
     defaultVariants: {

package/components/ui/checkbox.js

@@ -4,6 +4,6 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 import { cn } from '../../utils/utils.js';
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-black/20 cursor-pointer hover:border-foreground/40 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border-2 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center transition-none", children: _jsx(CheckIcon, { className: "size-3.5 !text-white" }) }) }));
 }
 export { Checkbox };

package/components/ui/dialog.js

@@ -18,7 +18,7 @@ function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-8 shadow-lg duration-200 sm:max-w-lg', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
@@ -27,7 +27,7 @@ function DialogFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
 }
 function DialogTitle({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-lg leading-none font-semibold', className), ...props }));
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-lg leading-none font-semibold mb-4', className), ...props }));
 }
 function DialogDescription({ className, ...props }) {
     return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-muted-foreground text-sm', className), ...props }));

package/components/ui/sidebar.js

@@ -16,7 +16,7 @@ const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_ICON = '4.5rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 const SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -98,9 +98,9 @@ function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas'
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "group peer text-sidebar-foreground hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (_jsxs("div", { className: "group peer text-sidebar-foreground hidden sm:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear sm:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
@@ -159,7 +159,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:mx-auto! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',

package/components/ui/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/components/ui/tabs.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../utils/utils.js';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow', className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/components/view-title.d.ts

@@ -0,0 +1,7 @@
+export interface ViewTitleProps {
+    title: string;
+    showBackButton?: boolean;
+    onBackClick?: () => void;
+    className?: string;
+}
+export declare function ViewTitle({ title, showBackButton, onBackClick, className, }: ViewTitleProps): import("react/jsx-runtime").JSX.Element;

package/components/view-title.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '../components/ui/button.js';
+import { cn } from '../utils/utils.js';
+export function ViewTitle({ title, showBackButton = false, onBackClick, className, }) {
+    return (_jsxs("div", { className: cn('flex items-center gap-3', className), children: [showBackButton && (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Go back", onClick: onBackClick, children: _jsx(ArrowLeft, {}) })), _jsx("h1", { className: "text-lg font-semibold lg:text-xl", children: title })] }));
+}

package/hooks/use-mobile.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 640;
 export function useIsMobile() {
     const [isMobile, setIsMobile] = React.useState(undefined);
     React.useEffect(() => {

package/hooks/use-s3-image.d.ts

@@ -0,0 +1,2 @@
+import { FitOptions, ImageEdits, OverlayOptions } from '../utils/s3Image/types.js';
+export declare function useS3Image(): (key: string, width: number | string | "auto", height?: number | string | "auto", fit?: FitOptions, retina?: boolean, overlayWith?: OverlayOptions | undefined, edits?: ImageEdits) => () => Promise<import("../utils/s3Image/types.js").S3ImageResult>;

package/hooks/use-s3-image.js

@@ -0,0 +1,7 @@
+import { useS3Config } from '../components/minutemailer-kit.js';
+import { useCallback } from 'react';
+import { s3Image } from '../utils/s3Image/index.js';
+export function useS3Image() {
+    const { bucket, resizeCloudUrl, cloudFrontUrl } = useS3Config();
+    return useCallback((key, width, height = 0, fit = 'inside', retina = true, overlayWith = undefined, edits = {}) => s3Image(key, width, height, fit, retina, overlayWith, edits, bucket, resizeCloudUrl, cloudFrontUrl), [bucket, resizeCloudUrl, cloudFrontUrl]);
+}

package/icons/MinutemailerLogo.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+declare const SvgMinutemailerLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgMinutemailerLogo;

package/icons/MinutemailerLogo.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgMinutemailerLogo = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 120 14", ...props, children: [_jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M15.958 13.938 22.283 0 0 7.373 8.539 9.27 8.579 14l2.561-2.529-1.993-2.006z", clipRule: "evenodd" }), _jsx("path", { fill: "currentColor", d: "M39.66 2.872c0-.65.52-1.138 1.146-1.138.677 0 1.145.487 1.145 1.083 0 .65-.468 1.192-1.145 1.192a1.133 1.133 0 0 1-1.146-1.137m.26 2.492h1.823v6.935H39.92zM99.273 2.872c0-.65.521-1.138 1.146-1.138.677 0 1.145.487 1.145 1.083 0 .65-.468 1.192-1.145 1.192a1.133 1.133 0 0 1-1.146-1.137m.26 2.492h1.823v6.935h-1.822zM51.22 7.64v4.66h-1.822V7.91c0-1.462-.677-2.112-1.875-2.112-1.25-.054-2.134.758-2.134 2.384v4.117h-1.823V4.172h1.719v1.03c.572-.759 1.562-1.138 2.707-1.138 1.822.054 3.228 1.138 3.228 3.576M60.483 4.172V12.3h-1.718v-1.03c-.573.76-1.51 1.139-2.5 1.139-1.978 0-3.331-1.138-3.331-3.576v-4.66h1.822v4.389c0 1.463.677 2.167 1.822 2.167 1.25 0 2.135-.813 2.135-2.438V4.172zM67.095 11.865c-.417.38-1.094.542-1.77.542-1.719 0-2.708-.92-2.708-2.709v-3.9h-1.25V4.28h1.302V1.734h1.822v2.492h2.083v1.517H64.49V9.59c0 .813.365 1.192 1.094 1.192.364 0 .729-.109 1.04-.325zM75.117 8.832h-6.092c.209 1.192 1.146 1.95 2.5 1.95.885 0 1.562-.27 2.134-.867l.99 1.192c-.677.867-1.77 1.3-3.124 1.3-2.604 0-4.322-1.733-4.322-4.171s1.718-4.118 4.01-4.118c2.29 0 3.956 1.68 3.956 4.172 0 .162-.052.38-.052.542m-6.092-1.246h4.426c-.156-1.192-.99-1.95-2.187-1.95-1.25 0-2.082.758-2.239 1.95M89.436 7.64v4.66h-1.822V7.91c0-1.463-.625-2.113-1.77-2.113-1.198 0-2.031.813-2.031 2.438v4.118H81.99V7.965c0-1.462-.624-2.113-1.77-2.113-1.197 0-2.03.813-2.03 2.438v4.118h-1.823V4.281h1.718v1.03c.573-.705 1.51-1.138 2.552-1.138 1.145 0 2.082.433 2.603 1.354.625-.812 1.666-1.354 2.916-1.354 1.978-.054 3.28 1.03 3.28 3.467M37.942 7.64v4.66H36.12V7.91c0-1.462-.625-2.112-1.77-2.112-1.198 0-2.03.812-2.03 2.438v4.117h-1.823V7.965c0-1.463-.625-2.113-1.77-2.113-1.146-.108-1.979.704-1.979 2.33v4.117h-1.822V4.172h1.718v1.03c.573-.705 1.51-1.138 2.551-1.138 1.146 0 2.083.433 2.604 1.354.624-.812 1.666-1.354 2.915-1.354 1.927.054 3.228 1.138 3.228 3.576M97.765 7.532V12.3h-1.719v-.976c-.416.705-1.301 1.084-2.447 1.084-1.77 0-2.915-1.03-2.915-2.438 0-1.354.885-2.438 3.228-2.438h2.03v-.108c0-1.084-.624-1.734-1.926-1.734-.885 0-1.77.325-2.343.813l-.73-1.355c.834-.65 2.032-.975 3.281-.975 2.239-.054 3.54 1.03 3.54 3.359m-1.823 2.221v-.92h-1.874c-1.25 0-1.562.487-1.562 1.083 0 .704.573 1.138 1.51 1.138.885-.055 1.614-.434 1.926-1.3M103.18 1.68h1.822V12.3h-1.822zM114.164 8.832h-6.092c.209 1.192 1.146 1.95 2.5 1.95.885 0 1.562-.27 2.134-.867l.99 1.192c-.677.867-1.771 1.3-3.124 1.3-2.604 0-4.322-1.733-4.322-4.171s1.718-4.118 4.009-4.118 3.957 1.68 3.957 4.172c0 .162 0 .38-.052.542m-6.092-1.246h4.426c-.156-1.192-.989-1.95-2.187-1.95s-2.082.758-2.239 1.95M120.001 4.118v1.788c-.156-.054-.312-.054-.416-.054-1.406 0-2.239.867-2.239 2.492V12.3h-1.823V4.172h1.719v1.192c.52-.812 1.458-1.246 2.759-1.246" })] }));
+export default SvgMinutemailerLogo;

package/icons/index.d.ts

@@ -1,3 +1,4 @@
+export { default as MinutemailerLogo } from './MinutemailerLogo.js';
 export { default as Alert } from './Alert.js';
 export { default as AlertFilled } from './AlertFilled.js';
 export { default as Arrow } from './Arrow.js';

package/icons/index.js

@@ -1,3 +1,4 @@
+export { default as MinutemailerLogo } from './MinutemailerLogo.js';
 export { default as Alert } from './Alert.js';
 export { default as AlertFilled } from './AlertFilled.js';
 export { default as Arrow } from './Arrow.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.2.0",
+    "version": "1.2.2",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -25,6 +25,7 @@
         "@storybook/addon-docs": "^10.0.8",
         "@storybook/react-vite": "^10.0.8",
         "@svgr/cli": "^8.1.0",
+        "@types/node": "^24.10.1",
         "@types/react": "^19.2.0",
         "@types/react-dom": "^19.2.0",
         "@vitest/coverage-v8": "^3.2.4",
@@ -52,6 +53,7 @@
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/vite": "^4.1.14",
         "class-variance-authority": "^0.7.1",

package/utils/s3Image/index.d.ts

@@ -0,0 +1,2 @@
+import { FitOptions, ImageEdits, OverlayOptions, S3ImageResult } from './types.js';
+export declare function s3Image(key: string, width: number | string | 'auto', height: number | string | "auto" | undefined, fit: FitOptions | undefined, retina: boolean | undefined, overlayWith: OverlayOptions | undefined, edits: ImageEdits | undefined, bucket: string, resizeCloudUrl: string, cloudFrontUrl: string): () => Promise<S3ImageResult>;

package/utils/s3Image/index.js

@@ -0,0 +1,37 @@
+import { s3ImageDimensions } from './s3ImageDimensions.js';
+import { s3ImageSrc } from './s3ImageSrc.js';
+export function s3Image(key, width, height = 0, fit = 'inside', retina = true, overlayWith = undefined, edits = {}, bucket, resizeCloudUrl, cloudFrontUrl) {
+    if (!key) {
+        return () => new Promise((resolve) => {
+            resolve({ src: '', width: 0, height: 0 });
+        });
+    }
+    return () => new Promise((resolve, reject) => {
+        const imageSrc = s3ImageSrc(key, width, height, fit, retina, overlayWith, edits, bucket, resizeCloudUrl, cloudFrontUrl);
+        const extension = key.split('.').pop();
+        const resizeWidth = width === 'auto' ? 0 : parseInt(width.toString(), 10);
+        const resizeHeight = height === 'auto' ? 0 : parseInt(height.toString(), 10);
+        const image = new Image();
+        image.onload = (ev) => {
+            const img = ev.currentTarget;
+            const [realWidth, realHeight] = s3ImageDimensions(img.width, img.height, resizeWidth, resizeHeight);
+            if (extension === 'gif') {
+                const dimensions = s3ImageDimensions(realWidth, realHeight, resizeWidth, resizeHeight, fit);
+                resolve({
+                    src: img.src,
+                    width: dimensions[0],
+                    height: dimensions[1],
+                });
+            }
+            else {
+                resolve({
+                    src: img.src,
+                    width: realWidth,
+                    height: realHeight,
+                });
+            }
+        };
+        image.onerror = reject;
+        image.src = imageSrc;
+    });
+}

package/utils/s3Image/s3ImageDimensions.d.ts

@@ -0,0 +1,2 @@
+import { FitOptions } from './types.js';
+export declare function s3ImageDimensions(width: number, height: number, resizeWidth: number, resizeHeight: number, fit?: FitOptions): number[];

package/utils/s3Image/s3ImageDimensions.js

@@ -0,0 +1,7 @@
+export function s3ImageDimensions(width, height, resizeWidth, resizeHeight, fit = 'inside') {
+    if (['fill', 'contain', 'cover'].indexOf(fit) > -1) {
+        return [resizeWidth, resizeHeight];
+    }
+    const ratio = Math.min(Math.min(resizeWidth === 0 ? 9999 : resizeWidth, width) / width, Math.min(resizeHeight === 0 ? 9999 : resizeHeight, height) / height);
+    return [width * ratio, height * ratio];
+}

package/utils/s3Image/s3ImageSrc.d.ts

@@ -0,0 +1,2 @@
+import { FitOptions, ImageEdits, OverlayOptions } from './types.js';
+export declare function s3ImageSrc(key: string | null | undefined, width: number | string | 'auto', height: number | string | "auto" | undefined, fit: FitOptions | undefined, retina: boolean | undefined, overlayWith: OverlayOptions | undefined, edits: ImageEdits | undefined, bucket: string, resizeCloudUrl: string, cloudFrontUrl: string): string;

package/utils/s3Image/s3ImageSrc.js

@@ -0,0 +1,51 @@
+export function s3ImageSrc(key, width, height = 0, fit = 'inside', retina = true, overlayWith = undefined, edits = {}, bucket, resizeCloudUrl, cloudFrontUrl) {
+    if (!key) {
+        return '';
+    }
+    const url = resizeCloudUrl;
+    const extension = key.split('.').pop();
+    const path = key.replace(/^\/|\/$/g, '');
+    const resizeWidth = width === 'auto' ? 0 : parseInt(width.toString(), 10);
+    const resizeHeight = height === 'auto' ? 0 : parseInt(height.toString(), 10);
+    let imageSrc;
+    if (extension === 'gif') {
+        imageSrc = `${cloudFrontUrl.replace('%s', bucket)}/${path}`;
+    }
+    else {
+        const req = {
+            bucket,
+            key: path,
+            edits: {
+                resize: {
+                    width: retina ? resizeWidth * 2 : resizeWidth,
+                    height: retina ? resizeHeight * 2 : resizeHeight,
+                    fit,
+                    background: {
+                        r: 255,
+                        g: 255,
+                        b: 255,
+                        alpha: 1,
+                    },
+                    withoutEnlargement: true,
+                },
+                jpeg: {
+                    quality: 70,
+                    force: false,
+                },
+                png: {
+                    quality: 70,
+                    force: edits.roundCrop,
+                },
+                overlayWith: overlayWith
+                    ? {
+                        ...overlayWith,
+                        bucket,
+                    }
+                    : undefined,
+                ...edits,
+            },
+        };
+        imageSrc = `${url}/${btoa(JSON.stringify(req))}`;
+    }
+    return imageSrc;
+}

package/utils/s3Image/types.d.ts

@@ -0,0 +1,22 @@
+export declare const ALTERNATE_EDIT_ALLOWLIST_ARRAY: readonly ["overlayWith", "smartCrop", "roundCrop", "contentModeration", "crop", "animated"];
+export declare const SHARP_EDIT_ALLOWLIST_ARRAY: string[];
+type AllowlistedEdit = (typeof SHARP_EDIT_ALLOWLIST_ARRAY)[number] | (typeof ALTERNATE_EDIT_ALLOWLIST_ARRAY)[number];
+export type ImageEdits = Partial<Record<AllowlistedEdit, any>>;
+export type OverlayOptions = {
+    key: string;
+    bucket: string;
+    wRatio: number;
+    hRatio: number;
+    alpha: number;
+    options?: {
+        top: number;
+        left: number;
+    };
+};
+export type FitOptions = 'inside' | 'contain' | 'cover' | 'fill' | 'outside';
+export interface S3ImageResult {
+    src: string;
+    width: number;
+    height: number;
+}
+export {};

package/utils/s3Image/types.js

@@ -0,0 +1,66 @@
+export const ALTERNATE_EDIT_ALLOWLIST_ARRAY = [
+    'overlayWith',
+    'smartCrop',
+    'roundCrop',
+    'contentModeration',
+    'crop',
+    'animated',
+];
+const SHARP_IMAGE_OPERATIONS = {
+    CHANNEL_FUNCTIONS: [
+        'removeAlpha',
+        'ensureAlpha',
+        'extractChannel',
+        'joinChannel',
+        'bandbool',
+    ],
+    COLOR_FUNCTIONS: [
+        'tint',
+        'greyscale',
+        'grayscale',
+        'pipelineColourspace',
+        'pipelineColorspace',
+        'toColourspace',
+        'toColorspace',
+    ],
+    OPERATION_FUNCTIONS: [
+        'rotate',
+        'flip',
+        'flop',
+        'affine',
+        'sharpen',
+        'median',
+        'blur',
+        'flatten',
+        'unflatten',
+        'gamma',
+        'negate',
+        'normalise',
+        'normalize',
+        'clahe',
+        'convolve',
+        'threshold',
+        'boolean',
+        'linear',
+        'recomb',
+        'modulate',
+    ],
+    FORMAT_OPERATIONS: [
+        'jpeg',
+        'png',
+        'webp',
+        'gif',
+        'avif',
+        'tiff',
+        'heif',
+        'toFormat',
+    ],
+    RESIZE_OPERATIONS: ['resize', 'extend', 'extract', 'trim'],
+};
+export const SHARP_EDIT_ALLOWLIST_ARRAY = [
+    ...SHARP_IMAGE_OPERATIONS.CHANNEL_FUNCTIONS,
+    ...SHARP_IMAGE_OPERATIONS.COLOR_FUNCTIONS,
+    ...SHARP_IMAGE_OPERATIONS.OPERATION_FUNCTIONS,
+    ...SHARP_IMAGE_OPERATIONS.FORMAT_OPERATIONS,
+    ...SHARP_IMAGE_OPERATIONS.RESIZE_OPERATIONS,
+];