@minutemailer/kit 1.2.5 → 1.4.1

package/components/details-content.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export declare function DetailsContent({ children, onClose, close, }: {
+    children: ReactNode;
+    onClose?: () => void;
+    close?: boolean;
+}): import("react").ReactPortal | null;

package/components/details-content.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../components/ui/button.js';
+import { Close } from '../icons/index.js';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useDetails } from './minutemailer-kit.js';
+export function DetailsContent({ children, onClose = () => { }, close = false, }) {
+    const { mountNode, setVisible } = useDetails();
+    useEffect(() => {
+        setVisible(true);
+        return () => setVisible(false);
+    }, [setVisible]);
+    if (!mountNode) {
+        return null;
+    }
+    return createPortal(_jsxs("div", { className: "p-4", children: [close && (_jsx("div", { className: "absolute top-4 right-4", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, children: _jsx(Close, {}) }) })), _jsx("div", { children: children })] }), mountNode);
+}

package/components/details.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+export declare function Details({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/components/details.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { motion } from 'motion/react';
+import { useDetails } from './minutemailer-kit.js';
+export function Details({ children }) {
+    const ref = useRef(null);
+    const { visible, setMountNode } = useDetails();
+    useEffect(() => {
+        if (ref.current) {
+            setMountNode(ref.current);
+        }
+        return () => setMountNode(null);
+    }, [setMountNode]);
+    return (_jsx(motion.div, { initial: { translateX: visible ? 0 : '100%', translateY: 0 }, animate: { translateX: visible ? 0 : '100%', translateY: 0 }, className: "fixed top-(--header-height) right-0 bottom-0 z-25 bg-background w-full max-w-[658px] shadow-md", ref: ref, children: children }, "details"));
+}

package/components/donut-chart.js

@@ -1,6 +1,6 @@
 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';
+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

package/components/engagement-chart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
+import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, } from 'recharts';
 import { ChartContainer, ChartTooltipContent, } from '../components/ui/chart.js';
 const defaultData = [
     { hour: '0h', opens: 245, clicks: 12 },

package/components/minutemailer-kit.d.ts

@@ -4,16 +4,25 @@ type S3Config = {
     cloudFrontUrl: string;
     resizeCloudUrl: string;
 };
+type DetailsState = {
+    mountNode: HTMLDivElement | null;
+    visible: boolean;
+    setMountNode: (node: HTMLDivElement | null) => void;
+    setVisible: (visible: boolean) => void;
+};
 type ContextValue = {
     t: (key: string) => string;
     s3?: S3Config;
+    details: DetailsState;
 };
-export declare const Context: import("react").Context<ContextValue>;
+export declare const Context: import("react").Context<ContextValue | null>;
 type MinutemailerKitProps = {
     children: ReactNode;
     t: (key: string) => string;
     s3?: S3Config;
 };
 export declare function MinutemailerKit({ children, t, s3 }: MinutemailerKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function useMinutemailerKit(): ContextValue;
 export declare function useS3Config(): S3Config;
+export declare function useDetails(): DetailsState;
 export {};

package/components/minutemailer-kit.js

@@ -1,15 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-export const Context = createContext({
-    t: (key) => key,
-});
+import { createContext, useContext, useState } from 'react';
+export const Context = createContext(null);
 export function MinutemailerKit({ children, t, s3 }) {
-    return _jsx(Context.Provider, { value: { t, s3 }, children: children });
+    const [mountNode, setMountNode] = useState(null);
+    const [visible, setVisible] = useState(false);
+    return (_jsx(Context.Provider, { value: {
+            t,
+            s3,
+            details: { mountNode, visible, setMountNode, setVisible },
+        }, children: children }));
 }
-export function useS3Config() {
+export function useMinutemailerKit() {
     const context = useContext(Context);
+    if (!context) {
+        throw new Error('useMinutemailerKit must be used within MinutemailerKit');
+    }
+    return context;
+}
+export function useS3Config() {
+    const context = useMinutemailerKit();
     if (!context.s3) {
         throw new Error('S3 configuration not provided in MinutemailerKit');
     }
     return context.s3;
 }
+export function useDetails() {
+    const context = useMinutemailerKit();
+    return context.details;
+}

package/hooks/use-i18n.js

@@ -1,6 +1,5 @@
-import { useContext } from 'react';
-import { Context } from '../components/minutemailer-kit.js';
+import { useMinutemailerKit } from '../components/minutemailer-kit.js';
 export function useI18n() {
-    const { t } = useContext(Context);
-    return t;
+    const context = useMinutemailerKit();
+    return context.t;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.2.5",
+    "version": "1.4.1",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -60,6 +60,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.544.0",
+        "motion": "^12.23.26",
         "next-themes": "^0.4.6",
         "react-day-picker": "^9.11.1",
         "react-hook-form": "^7.63.0",