@minutemailer/kit 1.1.6 → 1.2.0

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 }), _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,22 @@
+import { type ReactNode } from 'react';
+export interface ImageSlotAction {
+    name: string;
+    value: string;
+    icon?: ReactNode;
+    type?: 'action' | 'file';
+}
+export interface ImageSlotProps {
+    src?: string;
+    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, 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 * as React from 'react';
+import { 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, }) {
+    const aspectRatio = width / height;
+    const [dragState, setDragState] = useState('idle');
+    const dragCounterRef = React.useRef(0);
+    const fileInputRef = React.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) {
+        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, {}) }) }))] }));
+    }
+    // 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/more.d.ts

@@ -3,6 +3,7 @@ export type MoreOption = {
     name: string;
     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, {}), _jsx(DropdownMenuItem, { variant: option.variant, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: option.name })] }, option.value))) })] }));
 }

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 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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.1.6",
+    "version": "1.2.0",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -22,18 +22,19 @@
         "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/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 +43,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",
@@ -59,6 +61,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",