irismail 0.1.0 → 1.0.0

package/README.md

@@ -1,157 +1,265 @@
 # IrisMail
 
-A modular, secure, and easy-to-use Email and OTP service for Next.js applications, with built-in Shadcn UI support.
+[![npm version](https://img.shields.io/npm/v/irismail.svg)](https://www.npmjs.com/package/irismail)
+[![npm downloads](https://img.shields.io/npm/dm/irismail.svg)](https://www.npmjs.com/package/irismail)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue)](https://www.typescriptlang.org/)
+
+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
+- **Themeable**: Dark and light themes built-in
+- **Flexible**: Multiple sizes (sm/md/lg) and customizable styles via classNames API
+- **Composable**: Build custom layouts with InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator
+- **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
 
+IrisMail works with all major package managers. No additional configuration is required.
+
 ```bash
 npm install irismail
-# or
-yarn add irismail
-# or
 pnpm add irismail
+yarn add irismail
+bun add irismail
 ```
 
-## Usage
+## Package Exports
 
-### 1. Server-Side Setup (API Routes)
+| Import | Description |
+|--------|-------------|
+| `irismail/server` | Email service (IrisMail class and types) |
+| `irismail/react` | OTP components (OTP, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator) |
+| `irismail` | All exports (server + react + utils) |
 
-Initialize the service with your email configuration and a secret key for encryption.
+## Email Service
+
+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}
+/>
+```
+
+### Custom Length
+
+```tsx
+<OTP length={4} value={code} onChange={setCode} />
+```
+
+### Themes
+
+Use the `theme` prop to switch between dark and light color schemes:
+
+```tsx
+// Dark theme (default)
+<OTP theme="dark" value={code} onChange={setCode} />
+
+// Light theme - for light backgrounds
+<OTP theme="light" value={code} onChange={setCode} />
+```
+
+### Sizes
+
+Use the `slotSize` prop to change the slot dimensions:
+
+```tsx
+<OTP slotSize="sm" value={code} onChange={setCode} />
+<OTP slotSize="md" value={code} onChange={setCode} />  // default
+<OTP slotSize="lg" value={code} onChange={setCode} />
+```
+
+### Separator & Grouping
+
+Add visual separators and control grouping:
+
+```tsx
+// With separator (auto groups: 3-3 for 6 digits)
+<OTP separator value={code} onChange={setCode} />
+
+// Custom group size (2-2-2 for 6 digits)
+<OTP separator groupSize={2} value={code} onChange={setCode} />
+
+// Stripe-style (3-3 for 6 digits)
+<OTP length={6} separator groupSize={3} value={code} onChange={setCode} />
+```
+
+### Custom Styling (classNames API)
+
+Use the `classNames` prop to customize individual parts:
+
+```tsx
+<OTP
+  value={code}
+  onChange={setCode}
+  separator
+  groupSize={3}
+  classNames={{
+    slot: "rounded-none first:rounded-l-md last:rounded-r-md",
+    slotActive: "ring-2 ring-indigo-500 ring-offset-1 ring-offset-zinc-900",
+    separator: "mx-4",
+    separatorLine: "bg-indigo-500 w-4 h-0.5",
+    caret: "bg-indigo-400",
+  }}
+/>
+```
+
+### Composition Pattern
+
+For custom layouts, use the composition components:
+
+```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>
+```
+
+InputOTP and composition components support the same styling props: `theme`, `slotSize`, `error`, and `classNames`.
+
+## OTP Props
+
+| 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 |
+| `theme` | "dark" \| "light" | "dark" | Color theme |
+| `slotSize` | "sm" \| "md" \| "lg" | "md" | Size of the input slots |
+| `separator` | boolean | false | Show separator between groups |
+| `groupSize` | number | length / 2 | Number of slots per group when separator is enabled |
+| `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 |
+| `classNames` | OTPClassNames | — | Styles API for fine-grained customization |
+| `pattern` | string | "^[0-9]*$" | Regex pattern to match input against |
+
+## ClassNames API
+
+The `classNames` prop accepts an object with these keys for custom styling:
+
+| Key | Description |
+|-----|-------------|
+| `root` | Root container element |
+| `group` | Group wrapper containing slots |
+| `slot` | Individual digit slot (base state) |
+| `slotFilled` | Slot when it contains a digit |
+| `slotActive` | Slot when focused/active |
+| `slotError` | Slot in error state |
+| `separator` | Separator container |
+| `separatorLine` | The separator dash/line element |
+| `caret` | Blinking caret cursor |
+
+Works with both the `OTP` component and the composition components (`InputOTP`, etc.). OTP components work best with Tailwind CSS; use these class names to override or extend the default styles.
+
+## Documentation
+
+For full documentation and interactive examples, run the docs site:
+
+```bash
+npm run site
+```
+
+## Contributing
 
-Want to test the package locally before publishing? We've included a complete example app!
+Contributions are welcome.
 
-1. **Navigate to the example directory**:
+1. **Clone and install**
    ```bash
-   cd example
+   git clone https://github.com/nitin-1926/irismail.git
+   cd irismail
+   npm install
    ```
 
-2. **Set up environment variables**:
+2. **Build the package**
    ```bash
-   cp .env.example .env.local
-   # Edit .env.local with your Gmail credentials and secret key
+   npm run build
    ```
 
-3. **Run the development server**:
+3. **Develop with watch mode**
    ```bash
    npm run dev
    ```
 
-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
-
-See `example/README.md` for more details.
-
-## Publishing to NPM
-
-1.  **Login to NPM**:
-    ```bash
-    npm login
-    ```
-
-2.  **Build the package**:
-    ```bash
-    npm run build
-    ```
+4. **Run the documentation site**
+   ```bash
+   npm run site
+   ```
+   Then open [http://localhost:3000](http://localhost:3000).
 
-3.  **Publish**:
-    ```bash
-    npm publish --access public
-    ```
+5. **Submit changes**: Open a pull request with a clear description of the change. Ensure the build passes (`npm run build`) and the package works with the docs 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-GFYL2QKK.mjs

@@ -0,0 +1,208 @@
+// 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 slotSizeClasses = {
+  sm: "h-9 w-7 text-sm",
+  md: "h-11 w-9 text-base",
+  lg: "h-14 w-11 text-lg"
+};
+var caretSizeClasses = {
+  sm: "h-3 w-0.5",
+  md: "h-4 w-0.5",
+  lg: "h-5 w-0.5"
+};
+var themeClasses = {
+  dark: {
+    slot: {
+      base: "border-zinc-700 bg-zinc-800/50 text-white",
+      filled: "border-zinc-600 bg-zinc-800",
+      active: "border-zinc-500 bg-zinc-800",
+      error: "border-red-500/50 bg-red-500/5",
+      errorActive: "border-red-500/70"
+    },
+    caret: "bg-zinc-400",
+    separator: "bg-zinc-600"
+  },
+  light: {
+    slot: {
+      base: "border-zinc-300 bg-white text-zinc-900",
+      filled: "border-zinc-400 bg-zinc-50",
+      active: "border-zinc-500 bg-white",
+      error: "border-red-500/50 bg-red-50",
+      errorActive: "border-red-500/70"
+    },
+    caret: "bg-zinc-600",
+    separator: "bg-zinc-300"
+  }
+};
+var InputOTPStyleContext = React.createContext({
+  theme: "dark",
+  slotSize: "md"
+});
+var InputOTP = React.forwardRef(({ className, containerClassName, error, theme, slotSize, classNames, ...props }, ref) => {
+  const resolvedTheme = theme ?? "dark";
+  const resolvedSlotSize = slotSize ?? "md";
+  return /* @__PURE__ */ jsx(InputOTPStyleContext.Provider, { value: { error, theme: resolvedTheme, slotSize: resolvedSlotSize, classNames }, children: /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      ref,
+      containerClassName: cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName,
+        classNames?.root
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  ) });
+});
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = React.useContext(InputOTPStyleContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-2", className, classNames?.group),
+      ...props
+    }
+  );
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { error, theme, slotSize, classNames } = React.useContext(InputOTPStyleContext);
+  const slot = inputOTPContext.slots[index];
+  const { char, hasFakeCaret, isActive } = slot;
+  const colors = themeClasses[theme];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // Base styles
+        "relative flex items-center justify-center",
+        "border rounded-md",
+        "font-mono font-medium",
+        "transition-colors duration-150",
+        // Size
+        slotSizeClasses[slotSize],
+        // Default state (theme-aware)
+        colors.slot.base,
+        // Custom base slot class
+        classNames?.slot,
+        // Filled state
+        char && colors.slot.filled,
+        char && classNames?.slotFilled,
+        // Active/focus state
+        isActive && colors.slot.active,
+        isActive && classNames?.slotActive,
+        // Error state
+        error && colors.slot.error,
+        error && isActive && colors.slot.errorActive,
+        error && classNames?.slotError,
+        className
+      ),
+      "data-active": isActive,
+      "data-filled": Boolean(char),
+      "data-error": error,
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: cn(
+          "animate-caret-blink rounded-full",
+          caretSizeClasses[slotSize],
+          colors.caret,
+          classNames?.caret
+        ) }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ className, ...props }, ref) => {
+  const { theme, classNames } = React.useContext(InputOTPStyleContext);
+  const colors = themeClasses[theme];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      className: cn("flex items-center justify-center", className, classNames?.separator),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: cn("w-3 h-0.5 rounded-full", colors.separator, classNames?.separatorLine) })
+    }
+  );
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var OTP = React.forwardRef(
+  ({
+    length = 6,
+    value,
+    onChange,
+    onComplete,
+    disabled,
+    error,
+    autoFocus,
+    name,
+    className,
+    pattern = "^[0-9]*$",
+    theme,
+    slotSize,
+    separator = false,
+    groupSize,
+    classNames
+  }, ref) => {
+    const resolvedTheme = theme ?? "dark";
+    const resolvedSlotSize = slotSize ?? "md";
+    const slotIndices = Array.from({ length }, (_, i) => i);
+    const effectiveGroupSize = groupSize ?? (separator ? Math.ceil(length / 2) : length);
+    const groups = [];
+    for (let i = 0; i < length; i += effectiveGroupSize) {
+      groups.push(slotIndices.slice(i, i + effectiveGroupSize));
+    }
+    return /* @__PURE__ */ jsx(
+      InputOTP,
+      {
+        ref,
+        maxLength: length,
+        value,
+        onChange,
+        onComplete,
+        disabled,
+        error,
+        autoFocus,
+        name,
+        pattern,
+        containerClassName: className,
+        theme: resolvedTheme,
+        slotSize: resolvedSlotSize,
+        classNames,
+        children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          groupIndex > 0 && separator && /* @__PURE__ */ jsx(InputOTPSeparator, {}),
+          /* @__PURE__ */ jsx(InputOTPGroup, { children: group.map((index) => /* @__PURE__ */ jsx(InputOTPSlot, { index }, index)) })
+        ] }, groupIndex))
+      }
+    );
+  }
+);
+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, OTPClassNames, OTPProps, OTPSize, OTPTheme } 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, OTPClassNames, OTPProps, OTPSize, OTPTheme } 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 };