@minutemailer/kit 1.1.6 → 1.2.1

package/components/donut-chart.d.ts

@@ -0,0 +1,5 @@
+export interface DonutChartProps {
+    percentage: number;
+    size?: number;
+}
+export declare function DonutChart({ percentage, size }: DonutChartProps): import("react/jsx-runtime").JSX.Element;

package/components/donut-chart.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell, Label, Pie, PieChart } from 'recharts';
+import { ChartContainer, } from '../components/ui/chart.js';
+export function DonutChart({ percentage, size = 120 }) {
+    const COLORS = {
+        filled: 'oklch(0.683 0.178 158.484)', // Primary green
+        unfilled: 'oklch(0.922 0 0 / 0.3)', // Light gray transparent
+    };
+    // Include both filled and unfilled portions in the same data
+    const chartData = [
+        { name: 'filled', value: percentage },
+        { name: 'unfilled', value: 100 - percentage },
+    ];
+    const chartConfig = {
+        filled: {
+            label: 'Value',
+            color: COLORS.filled,
+        },
+        unfilled: {
+            label: 'Remaining',
+            color: COLORS.unfilled,
+        },
+    };
+    return (_jsx(ChartContainer, { config: chartConfig, className: "aspect-square", style: { width: `${size}px`, height: `${size}px` }, children: _jsx(PieChart, { children: _jsxs(Pie, { data: chartData, dataKey: "value", nameKey: "name", innerRadius: "60%", outerRadius: "80%", startAngle: 90, endAngle: 450, paddingAngle: 0, stroke: "none", isAnimationActive: false, children: [_jsx(Cell, { fill: COLORS.filled, stroke: "none" }), _jsx(Cell, { fill: COLORS.unfilled, stroke: "none" }), _jsx(Label, { content: ({ viewBox }) => {
+                            if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                                const centerX = Number(viewBox.cx);
+                                const centerY = Number(viewBox.cy) + 4;
+                                return (_jsx("text", { x: centerX, y: centerY, textAnchor: "middle", dominantBaseline: "middle", children: _jsxs("tspan", { x: centerX, y: centerY, fill: COLORS.filled, className: "text-base font-semibold", children: [percentage, "%"] }) }));
+                            }
+                        } })] }) }) }));
+}

package/components/engagement-chart.d.ts

@@ -0,0 +1,8 @@
+export interface EngagementChartProps {
+    data?: Array<{
+        hour: string;
+        opens: number;
+        clicks: number;
+    }>;
+}
+export declare function EngagementChart({ data }: EngagementChartProps): import("react/jsx-runtime").JSX.Element;

package/components/engagement-chart.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
+import { ChartContainer, ChartTooltipContent, } from '../components/ui/chart.js';
+const defaultData = [
+    { hour: '0h', opens: 245, clicks: 12 },
+    { hour: '1h', opens: 520, clicks: 45 },
+    { hour: '2h', opens: 890, clicks: 98 },
+    { hour: '3h', opens: 1240, clicks: 156 },
+    { hour: '4h', opens: 1580, clicks: 234 },
+    { hour: '5h', opens: 1820, clicks: 298 },
+    { hour: '6h', opens: 1950, clicks: 345 },
+    { hour: '7h', opens: 2020, clicks: 378 },
+    { hour: '8h', opens: 2050, clicks: 390 },
+];
+const chartConfig = {
+    opens: {
+        label: 'Opens',
+        color: 'oklch(0.683 0.178 158.484)', // Primary green
+    },
+    clicks: {
+        label: 'Clicks',
+        color: 'oklch(0.656 0.173 256.68)', // Secondary purple
+    },
+};
+export function EngagementChart({ data = defaultData }) {
+    return (_jsx(ChartContainer, { config: chartConfig, className: "h-[300px] w-full [&_svg]:outline-none", children: _jsxs(AreaChart, { data: data, margin: {
+                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, 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)',
+                        strokeWidth: 2,
+                    } }), _jsx(Area, { dataKey: "clicks", type: "linear", fill: "url(#clicksGradient)", stroke: "var(--color-clicks)", strokeWidth: 2, dot: false, activeDot: {
+                        r: 4,
+                        fill: 'var(--color-clicks)',
+                        stroke: 'var(--color-clicks)',
+                        strokeWidth: 2,
+                    } }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}) })] }) }));
+}

package/components/image-slot.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type S3ImageProps } from '../components/s3-image.js';
+export interface ImageSlotAction {
+    name: string;
+    value: string;
+    icon?: ReactNode;
+    type?: 'action' | 'file';
+}
+export interface ImageSlotProps {
+    src?: string;
+    s3?: Omit<S3ImageProps, 'width' | 'height'>;
+    alt?: string;
+    width: number;
+    height: number;
+    actions?: ImageSlotAction[];
+    onAction?: (action: string) => void;
+    onRemove?: () => void;
+    onFile?: (file: File) => void;
+    loading?: boolean;
+    accept?: string[];
+    className?: string;
+}
+declare function ImageSlot({ src, s3, alt, width, height, actions, onAction, onRemove, onFile, loading, accept, className, }: ImageSlotProps): import("react/jsx-runtime").JSX.Element;
+export { ImageSlot };

package/components/image-slot.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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, }) {
+    const aspectRatio = width / height;
+    const [dragState, setDragState] = useState('idle');
+    const dragCounterRef = useRef(0);
+    const fileInputRef = useRef(null);
+    const handleAction = (action) => {
+        onAction?.(action);
+    };
+    const handleFileInputChange = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        if (isValidFile(file)) {
+            onFile?.(file);
+        }
+        else {
+            toast.error('Unsupported file type', {
+                description: `Please upload one of: ${accept.map((type) => type.split('/')[1]).join(', ')}`,
+            });
+        }
+        // Reset input so the same file can be selected again
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    const handleActionClick = (action) => {
+        if (action.type === 'file') {
+            fileInputRef.current?.click();
+        }
+        else {
+            handleAction(action.value);
+        }
+    };
+    const isValidFile = (file) => {
+        return accept.includes(file.type);
+    };
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragState('over');
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDragLeave = (e) => {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        dragCounterRef.current--;
+        if (dragCounterRef.current <= 0) {
+            dragCounterRef.current = 0;
+            setDragState('idle');
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setDragState('idle');
+        const file = e.dataTransfer.files?.[0];
+        if (!file)
+            return;
+        if (isValidFile(file)) {
+            onFile?.(file);
+        }
+        else {
+            toast.error('Unsupported file type', {
+                description: `Please upload one of: ${accept.map((type) => type.split('/')[1]).join(', ')}`,
+            });
+        }
+    };
+    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, {}) }) }))] }));
+    }
+    // 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,
+        }, 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,8 +1,11 @@
+import * as React from 'react';
 export type MoreOption = {
     value: string;
     name: string;
+    icon?: React.ComponentType<any>;
     variant?: 'default' | 'destructive';
     disabled?: boolean;
+    separator?: boolean;
 };
 export interface MoreProps {
     options: MoreOption[];

package/components/more.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
+import * as React from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
 import { Button } from '../components/ui/button.js';
-import { Ellipsis } from 'lucide-react';
+import MoreIcon from '../icons/More.js';
 import Spinner from '../icons/Spinner.js';
 export function More({ options, loading = false, onChange, disabled = false, }) {
     const handleSelect = (value) => {
@@ -9,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(Ellipsis, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: options.map((option) => (_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 } 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?: () => 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?.();
+        })
+            .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.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/components/ui/accordion.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/utils.js';
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b', className), ...props }));
+}
+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 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/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/components/ui/badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils/utils.js';
+const badgeVariants = cva('inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/components/ui/chart.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES | "light" | "dark", string>;
+    });
+};
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: "";
+};
+export interface ChartContainerProps extends React.ComponentProps<"div"> {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}
+export declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export interface ChartTooltipProps extends React.ComponentProps<typeof RechartsPrimitive.Tooltip> {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}
+export declare function ChartTooltip({ ...props }: ChartTooltipProps): import("react/jsx-runtime").JSX.Element;
+export interface ChartTooltipContentProps extends Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "content">, React.ComponentProps<"div"> {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}
+export declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/components/ui/chart.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "../../utils/utils.js";
+const THEMES = { light: "", dark: "" };
+export function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+}
+function ChartStyle({ id, config }) {
+    const colorConfig = Object.entries(config).filter(([_, config]) => config.color || config.theme);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: `
+[data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.light || itemConfig.color || `hsl(var(--chart-${key.charAt(key.length - 1)}))`;
+                return `  --color-${key}: ${color};`;
+            })
+                .join("\n")}
+}
+        `,
+        } }));
+}
+export function ChartTooltip({ ...props }) {
+    return _jsx(RechartsPrimitive.Tooltip, { ...props });
+}
+export function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey || item.dataKey || item.name || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? config[label]?.label || label
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (_jsxs("div", { className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color || item.payload.fill || item.color;
+                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                                        "h-2.5 w-2.5": indicator === "dot",
+                                        "w-1": indicator === "line",
+                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                        "my-0.5": nestLabel && indicator === "dashed",
+                                    }), style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (_jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                }) })] }));
+}
+// Chart Context
+const ChartContext = React.createContext(null);
+function useChart() {
+    const context = React.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+// Utility function
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key];
+}

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/pagination.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Button } from '../../components/ui/button.js';
+declare function Pagination({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/components/ui/pagination.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../../utils/utils.js';
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn('flex flex-row items-center gap-1', className), ...props }));
+}
+function PaginationItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "pagination-item", className: cn('', className), ...props }));
+}
+function PaginationLink({ className, isActive, size = 'icon', ...props }) {
+    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", className: cn('inline-flex h-10 w-10 items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', isActive && 'bg-accent text-accent-foreground', className), ...props }));
+}
+function PaginationPrevious({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", "data-slot": "pagination-previous", size: "default", className: cn('w-auto gap-1 px-2.5', className), ...props, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx("span", { children: "Previous" })] }));
+}
+function PaginationNext({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", "data-slot": "pagination-next", size: "default", className: cn('w-auto gap-1 px-2.5', className), ...props, children: [_jsx("span", { children: "Next" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

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/sonner.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from 'next-themes';
 import { Toaster as Sonner } from 'sonner';
 const Toaster = ({ ...props }) => {
-    const { theme = 'system' } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group", style: {
+    return (_jsx(Sonner, { theme: "light", className: "toaster group", style: {
             '--normal-bg': 'var(--popover)',
             '--normal-text': 'var(--popover-foreground)',
             '--normal-border': 'var(--border)',

package/components/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, };

package/components/ui/table.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/utils.js';
+function Table({ className, ...props }) {
+    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { "data-slot": "table", className: cn('w-full caption-bottom text-sm', className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { "data-slot": "table-header", className: cn('[&_tr]:border-b', className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn('[&_tr:last-child]:border-0', className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn('mt-4 text-sm text-muted-foreground', className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, };

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/ui/tooltip.js

@@ -11,6 +11,6 @@ function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn('bg-gray-800 text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance shadow-md', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "bg-gray-800 fill-gray-800 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })] }) }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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.1.6",
+    "version": "1.2.1",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -22,18 +22,20 @@
         "react-dom": "^19.0.0 || ^18.0.0"
     },
     "devDependencies": {
-        "@storybook/addon-docs": "^10.0.2",
-        "@storybook/react-vite": "^10.0.2",
+        "@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",
+        "baseline-browser-mapping": "^2.8.29",
         "prettier": "3.6.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "sass": "^1.93.2",
         "shadcn": "^3.3.1",
-        "storybook": "^10.0.2",
+        "storybook": "^10.0.8",
         "tsc-alias": "^1.8.16",
         "typedoc": "^0.28.13",
         "typedoc-material-theme": "^1.4.0",
@@ -42,6 +44,7 @@
     },
     "dependencies": {
         "@hookform/resolvers": "^5.2.2",
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -50,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",
@@ -59,6 +63,7 @@
         "next-themes": "^0.4.6",
         "react-day-picker": "^9.11.1",
         "react-hook-form": "^7.63.0",
+        "recharts": "^2.15.4",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.14",

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,
+];