irismail 0.1.0 → 0.5.0

package/README.md

@@ -1,157 +1,132 @@
 # IrisMail
 
-A modular, secure, and easy-to-use Email and OTP service for Next.js applications, with built-in Shadcn UI support.
+A lightweight npm package for sending emails via Gmail and beautiful OTP input components for React.
 
 ## Features
 
--   📧 **Email Service**: Simple wrapper around Nodemailer for sending emails.
--   🔐 **Secure OTP**: Server-side OTP generation, encryption, and validation.
--   🎨 **Shadcn UI**: Ready-to-use OTP Input component compatible with Shadcn UI.
--   ⚡ **React Hook**: `useOTP` hook for managing timers, rate limiting, and resend cooldowns.
--   🛡️ **Type-Safe**: Built with TypeScript.
+- 📧 **Email Service**: Simple Gmail-based email sending with minimal configuration
+- 🔢 **OTP Input**: Beautiful, accessible OTP input components with copy-paste support
+- ⚡ **Easy to Use**: Minimal API surface - just a few props to get started
+- 🛡️ **Type-Safe**: Built with TypeScript
+- ⚙️ **Zero Config**: Just add your Gmail credentials - no SMTP configuration needed
 
 ## Installation
 
 ```bash
 npm install irismail
-# or
-yarn add irismail
-# or
-pnpm add irismail
 ```
 
-## Usage
+## Email Service
 
-### 1. Server-Side Setup (API Routes)
-
-Initialize the service with your email configuration and a secret key for encryption.
+Send emails with just your Gmail credentials:
 
 ```typescript
-// app/api/send-otp/route.ts
-import { IrisMailService } from 'irismail/server';
-import { NextResponse } from 'next/server';
-
-const irismail = new IrisMailService({
-  email: {
-    transport: {
-      host: 'smtp.gmail.com',
-      port: 587,
-      auth: {
-        user: process.env.GMAIL_USER,
-        pass: process.env.GMAIL_PASS,
-      },
-    },
-    defaults: {
-      from: {
-        name: 'My App',
-        address: process.env.GMAIL_USER,
-      },
-    },
+import { IrisMail } from 'irismail/server';
+
+const mail = new IrisMail({
+  auth: {
+    user: process.env.GMAIL_USER!,
+    pass: process.env.GMAIL_APP_PASSWORD!,
   },
-  secretKey: process.env.OTP_SECRET_KEY, // Must be 32 chars
 });
 
-export async function POST(req: Request) {
-  const { email } = await req.json();
-  
-  // Generate and encrypt OTP
-  const otp = irismail.otp.generateOTP();
-  const encryptedOtp = irismail.otp.encryptOTP(otp);
-  
-  // Send email
-  await irismail.email.sendEmail({
-    to: email,
-    subject: 'Your Verification Code',
-    html: `<p>Your code is: <b>${otp}</b></p>`,
-  });
-  
-  return NextResponse.json({ encryptedOtp });
-}
+await mail.sendMail({
+  from: process.env.GMAIL_USER!,
+  to: 'user@example.com',
+  subject: 'Hello!',
+  html: '<h1>Welcome</h1><p>Thanks for signing up!</p>',
+});
 ```
 
-### 2. Client-Side Setup (React Component)
+> **Note:** You'll need to generate a [Gmail App Password](https://support.google.com/accounts/answer/185833) for authentication.
 
-Use the `InputOTP` component and `useOTP` hook in your verification form.
+## OTP Input Component
+
+### Basic Usage
 
 ```tsx
-// components/verify-form.tsx
 'use client';
 
 import { useState } from 'react';
-import { InputOTP, InputOTPGroup, InputOTPSlot, useOTP } from 'irismail/react';
+import { OTP } from 'irismail/react';
 
-export function VerifyForm({ email }) {
-  const [otp, setOtp] = useState('');
-  const { otpTimeLeft, resendTimeLeft, formatTime } = useOTP({ email });
+export function VerifyForm() {
+  const [code, setCode] = useState('');
 
   return (
-    <div className="space-y-4">
-      <InputOTP
-        maxLength={6}
-        value={otp}
-        onChange={setOtp}
-      >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-      
-      <div className="text-sm">
-        Time remaining: {formatTime(otpTimeLeft)}
-      </div>
-    </div>
+    <OTP
+      value={code}
+      onChange={setCode}
+      onComplete={(value) => verify(value)}
+    />
   );
 }
 ```
 
-## Local Testing
+### With Error State
+
+```tsx
+<OTP
+  value={code}
+  onChange={setCode}
+  error={isInvalid}
+/>
+```
 
-Want to test the package locally before publishing? We've included a complete example app!
+### Custom Length
 
-1. **Navigate to the example directory**:
-   ```bash
-   cd example
-   ```
+```tsx
+<OTP length={4} value={code} onChange={setCode} />
+```
 
-2. **Set up environment variables**:
-   ```bash
-   cp .env.example .env.local
-   # Edit .env.local with your Gmail credentials and secret key
-   ```
+### Composition Pattern
 
-3. **Run the development server**:
-   ```bash
-   npm run dev
-   ```
+For custom layouts with separators:
 
-4. **Open [http://localhost:3000](http://localhost:3000)** to see:
-   - Interactive OTP demo with email sending
-   - Live documentation with code examples
-   - All features working together
+```tsx
+import { 
+  InputOTP, 
+  InputOTPGroup, 
+  InputOTPSlot, 
+  InputOTPSeparator 
+} from 'irismail/react';
+
+<InputOTP maxLength={6} value={code} onChange={setCode}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
 
-See `example/README.md` for more details.
+## OTP Props
 
-## Publishing to NPM
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `length` | number | 6 | Number of OTP digits |
+| `value` | string | — | Controlled input value |
+| `onChange` | (value: string) => void | — | Called when value changes |
+| `onComplete` | (value: string) => void | — | Called when all digits entered |
+| `disabled` | boolean | false | Disable the input |
+| `error` | boolean | false | Show error styling |
+| `autoFocus` | boolean | false | Auto focus first slot |
+| `name` | string | — | Name attribute for forms |
+| `className` | string | — | Container className |
 
-1.  **Login to NPM**:
-    ```bash
-    npm login
-    ```
+## Documentation
 
-2.  **Build the package**:
-    ```bash
-    npm run build
-    ```
+For full documentation and interactive examples, run the docs site:
 
-3.  **Publish**:
-    ```bash
-    npm publish --access public
-    ```
+```bash
+npm run site
+```
 
 ## License
 

package/dist/chunk-64MVNASE.mjs

@@ -0,0 +1,42 @@
+import {
+  __publicField
+} from "./chunk-QZ7TP4HQ.mjs";
+
+// src/server/email.ts
+import nodemailer from "nodemailer";
+var IrisMail = class {
+  constructor(config) {
+    __publicField(this, "transporter");
+    this.transporter = nodemailer.createTransport({
+      host: "smtp.gmail.com",
+      port: 587,
+      secure: false,
+      // true for 465, false for other ports
+      auth: config.auth
+    });
+  }
+  /**
+   * Send an email
+   * @param options - Email options (from, to, subject, html)
+   * @returns Promise with success status and messageId
+   */
+  async sendMail(options) {
+    const { from, to, subject, html } = options;
+    const text = html.replace(/<[^>]*>/g, "");
+    const info = await this.transporter.sendMail({
+      from,
+      to,
+      subject,
+      html,
+      text
+    });
+    return {
+      success: true,
+      messageId: info.messageId
+    };
+  }
+};
+
+export {
+  IrisMail
+};

package/dist/chunk-IQG3OBQL.mjs

@@ -0,0 +1,127 @@
+// src/react/components/input-otp.tsx
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as React from "react";
+
+// src/utils/constants.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react/components/input-otp.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTPStyleContext = React.createContext({});
+var InputOTP = React.forwardRef(({ className, containerClassName, error, ...props }, ref) => /* @__PURE__ */ jsx(InputOTPStyleContext.Provider, { value: { error }, children: /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+) }));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-2", className),
+    ...props
+  }
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { error } = React.useContext(InputOTPStyleContext);
+  const slot = inputOTPContext.slots[index];
+  const { char, hasFakeCaret, isActive } = slot;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // Base styles
+        "relative flex h-12 w-10 items-center justify-center",
+        "border-2 rounded-lg",
+        "font-mono text-lg font-medium",
+        "transition-all duration-150",
+        // Default state
+        "border-zinc-700 bg-zinc-900 text-white",
+        // Filled state
+        char && "border-zinc-500",
+        // Active/focus state
+        isActive && "ring-2 ring-offset-2 ring-offset-zinc-950 ring-indigo-500 border-indigo-500",
+        // Error state
+        error && "border-red-500/70 bg-red-500/10",
+        error && isActive && "ring-red-500",
+        className
+      ),
+      "data-active": isActive,
+      "data-filled": Boolean(char),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-0.5 animate-caret-blink rounded-full bg-indigo-400" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn("flex items-center justify-center text-zinc-500", className),
+    ...props,
+    children: /* @__PURE__ */ jsx("span", { className: "w-3 h-0.5 bg-zinc-600 rounded-full" })
+  }
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var OTP = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    onChange,
+    onComplete,
+    disabled,
+    error,
+    autoFocus,
+    name,
+    className,
+    pattern = "^[0-9]*$"
+  }, ref) => {
+    const slotIndices = Array.from({ length }, (_, i) => i);
+    return /* @__PURE__ */ jsx(
+      InputOTP,
+      {
+        ref,
+        maxLength: length,
+        value,
+        onChange,
+        onComplete,
+        disabled,
+        error,
+        autoFocus,
+        name,
+        pattern,
+        containerClassName: className,
+        children: /* @__PURE__ */ jsx(InputOTPGroup, { children: slotIndices.map((index) => /* @__PURE__ */ jsx(InputOTPSlot, { index }, index)) })
+      }
+    );
+  }
+);
+OTP.displayName = "OTP";
+
+export {
+  cn,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  OTP
+};

package/dist/index.d.mts

@@ -1,16 +1,9 @@
-export { EmailConfig, EmailService, IrisMailService, OTPData, OTPService, SendEmailOptions, decrypt, encrypt } from './server/index.mjs';
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, useOTP } from './react/index.mjs';
+export { IrisMail, IrisMailConfig, SendMailOptions, SendMailResult } from './server/index.mjs';
+export { InputOTP, InputOTPGroup, InputOTPProps, InputOTPSeparator, InputOTPSlot, OTP, OTPProps } from './react/index.mjs';
 import { ClassValue } from 'clsx';
 import 'input-otp';
 import 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
-declare const OTP_DEFAULTS: {
-    LENGTH: number;
-    EXPIRY_MINUTES: number;
-    RESEND_COOLDOWN_SECONDS: number;
-    MAX_ATTEMPTS: number;
-    RATE_LIMIT_RESET_HOURS: number;
-};
 
-export { OTP_DEFAULTS, cn };
+export { cn };

package/dist/index.d.ts

@@ -1,16 +1,9 @@
-export { EmailConfig, EmailService, IrisMailService, OTPData, OTPService, SendEmailOptions, decrypt, encrypt } from './server/index.js';
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, useOTP } from './react/index.js';
+export { IrisMail, IrisMailConfig, SendMailOptions, SendMailResult } from './server/index.js';
+export { InputOTP, InputOTPGroup, InputOTPProps, InputOTPSeparator, InputOTPSlot, OTP, OTPProps } from './react/index.js';
 import { ClassValue } from 'clsx';
 import 'input-otp';
 import 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
-declare const OTP_DEFAULTS: {
-    LENGTH: number;
-    EXPIRY_MINUTES: number;
-    RESEND_COOLDOWN_SECONDS: number;
-    MAX_ATTEMPTS: number;
-    RATE_LIMIT_RESET_HOURS: number;
-};
 
-export { OTP_DEFAULTS, cn };
+export { cn };