npm package: @sarthakb009/confirmation
Description: Confirmation
Author: Sarthak
Latest version: 1.0.7

# Confirmation

A flexible, accessible React modal component for confirmation dialogs with multiple variants, custom styling, and async action support. Built with TypeScript and no external dependencies (except React and Lucide icons).

## Installation

```bash
npm install @sarthakb009/confirmation
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0

## Usage

### Basic Example

```tsx
import { ConfirmationModal } from '@sarthakb009/confirmation';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <ConfirmationModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log('Confirmed!');
          setIsOpen(false);
        }}
        title="Are you sure?"
        description="This action cannot be undone."
      />
    </>
  );
}
```

### With Variants

```tsx
import { ConfirmationModal } from '@sarthakb009/confirmation';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={async () => {
        // Async operation
        await deleteItem();
      }}
      variant="danger" // 'danger' | 'primary' | 'success' | 'neutral'
      title="Delete Item"
      description="This will permanently delete the item."
      confirmText="Delete"
      cancelText="Cancel"
    />
  );
}
```

### With Loading State

```tsx
import { ConfirmationModal } from '@sarthakb009/confirmation';
import { useState } from 'react';

function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleConfirm = async () => {
    setIsLoading(true);
    try {
      await performAction();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={handleConfirm}
      isLoading={isLoading}
      variant="primary"
    />
  );
}
```

### Custom Styling

```tsx
import { ConfirmationModal } from '@sarthakb009/confirmation';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={() => {}}
      width="500px"
      borderRadius="16px"
      primaryColor="#ff6b6b"
      backgroundColor="#ffffff"
      textColor="#333333"
    />
  );
}
```

### Custom Icon

```tsx
import { ConfirmationModal } from '@sarthakb009/confirmation';
import { AlertTriangle } from 'lucide-react';

function App() {
  return (
    <ConfirmationModal
      isOpen={true}
      onClose={() => {}}
      onConfirm={() => {}}
      icon={<AlertTriangle size={24} color="#ef4444" />}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `isOpen` | `boolean` | - | **Yes** | Controls modal visibility |
| `onClose` | `() => void` | - | **Yes** | Callback fired when modal is closed (X button, overlay, or Escape key) |
| `onConfirm` | `() => void \| Promise<void>` | - | **Yes** | Callback fired when confirm button is clicked. Can be async |
| `title` | `string` | `"Are you sure?"` | No | Modal title text |
| `description` | `string` | `"This action cannot be undone."` | No | Modal description text |
| `confirmText` | `string` | `"Confirm"` | No | Text for confirm button |
| `cancelText` | `string` | `"Cancel"` | No | Text for cancel button |
| `variant` | `'danger' \| 'primary' \| 'success' \| 'neutral'` | `'primary'` | No | Visual variant (affects colors and icon) |
| `isLoading` | `boolean` | `false` | No | Shows loading state on confirm button |
| `width` | `string` | `"400px"` | No | Modal width |
| `borderRadius` | `string` | `"12px"` | No | Border radius of modal |
| `fontFamily` | `string` | `"system-ui, -apple-system, sans-serif"` | No | Font family |
| `primaryColor` | `string` | `undefined` | No | Override primary/confirm button color |
| `cancelColor` | `string` | `"#374151"` | No | Cancel button text color |
| `backgroundColor` | `string` | `"#ffffff"` | No | Modal background color |
| `textColor` | `string` | `"#111827"` | No | Text color |
| `icon` | `React.ReactNode` | `undefined` | No | Custom icon (overrides variant icon) |

## Features

- ✅ **Multiple Variants**: Danger, primary, success, and neutral styles
- ✅ **Async Support**: Handles async confirm actions
- ✅ **Loading States**: Built-in loading indicator
- ✅ **Keyboard Support**: Escape key to close
- ✅ **Click Outside**: Click overlay to close
- ✅ **Customizable**: Full control over colors, sizes, and icons
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Accessible**: Proper ARIA labels and focus management
- ✅ **Body Scroll Lock**: Prevents background scrolling when open

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import { ConfirmationModal, ConfirmationModalProps } from '@sarthakb009/confirmation';

const props: ConfirmationModalProps = {
  isOpen: true,
  onClose: () => {},
  onConfirm: async () => {},
  variant: "danger",
};
```

## License

MIT