npm package: @hasanur.m/dialog
Description: A stack-based animated dialog library for React
Latest version: 1.0.1

# @myui/dialog

A lightweight stack-based dialog system for React with animations, mobile-bottom-sheet mode, and a global API.

✔ Works with HeroUI  
✔ Animated with Framer Motion  
✔ Global APIs like `dialog.show()`  
✔ Supports multiple dialogs & back button navigation  

---

## 🚀 Features

- 🔥 Programmatic dialogs (`dialog.show(<Dialog />)`)
- 📚 Stack-based navigation (`dialog.hide()`, `dialog.hideAll()`)
- 🥳 Mobile sheet + Desktop modal automatically
- 🎬 Smooth animations (Framer Motion)
- 🤝 Works with HeroUI components
- 🧩 Fully typed + ships ESM + CJS builds

---

## 📦 Installation

```sh
npm install @myui/dialog @heroui/button framer-motion
```

or

```sh
pnpm add @myui/dialog @heroui/button framer-motion
```

> Requires React **18+**.

---

## 🧩 Basic Setup

Wrap your app in `DialogProvider`:

```tsx
import { DialogProvider } from "@myui/dialog";

export default function App() {
  return (
    <DialogProvider>
      <Home />
    </DialogProvider>
  );
}
```

---

## 🔥 Opening a Dialog (Programmatically)

```tsx
import { dialog, Dialog, DialogContent, DialogActions, DialogAction } from "@myui/dialog";

function Example() {
  return (
    <button
      onClick={() =>
        dialog.show(
          <Dialog>
            <DialogContent>Hello World!</DialogContent>
            <DialogActions>
              <DialogAction onPress={dialog.hide}>Close</DialogAction>
            </DialogActions>
          </Dialog>
        )
      }
    >
      Open Dialog
    </button>
  );
}
```

---

## 📱 Mobile vs Desktop Behavior

| Device | Animation | Layout |
|--------|----------|--------|
| Mobile | Slides from bottom | Full-screen sheet |
| Desktop | Scale + fade center | Floating modal |

Automatically handled based on screen width.

---

## ✨ Full Example

```tsx
import { DialogProvider, dialog } from "@myui/dialog";
import { Button } from "@heroui/button";

export default function App() {
  return (
    <DialogProvider>
      <MainScreen />
    </DialogProvider>
  );
}

function MainScreen() {
  return (
    <div className="p-6">
      <Button
        radius="full"
        onPress={() =>
          dialog.show(
            <ExampleDialog />
          )
        }
      >
        Show Dialog
      </Button>
    </div>
  );
}

function ExampleDialog() {
  return (
    <Dialog>
      <DialogHeaderTitle>Delete File?</DialogHeaderTitle>

      <DialogContent>
        Are you sure you want to permanently delete this file?
      </DialogContent>

      <DialogActions>
        <DialogAction onPress={dialog.hide}>Cancel</DialogAction>
        <DialogAction isDestructive onPress={() => {
          console.log("Deleted!");
          dialog.hide();
        }}>
          Delete
        </DialogAction>
      </DialogActions>
    </Dialog>
  );
}
```

---

## 📚 API Reference

### `dialog.show(content)`

```ts
dialog.show(<Dialog>...</Dialog>);
```

Adds a new dialog to the stack.

### `dialog.hide()`

```ts
dialog.hide();
```

Removes the top dialog.

### `dialog.hideAll()`

```ts
dialog.hideAll();
```

Closes all stacked dialogs.

---

## 🧱 Components

### `<DialogProvider>`

Wrap your app once.

### `<Dialog>`

Root container + animation.

```tsx
<Dialog className="my-style">
  {children}
</Dialog>
```

### `<DialogContent>`

Main body with animated scale + light cursor effect.

```tsx
<DialogContent>Text goes here</DialogContent>
```

### `<DialogHeaderTitle>`

Centered title.

```tsx
<DialogHeaderTitle>My Title</DialogHeaderTitle>
```

### `<DialogActions>`

Flex wrapper for footer buttons.

### `<DialogAction>`

HeroUI-powered button.

```tsx
<DialogAction isPrimary onPress={dialog.hide}>Ok</DialogAction>
```

Props:

| Prop | Type | Description |
|------|------|-------------|
| `isPrimary` | boolean | Blue CTA button |
| `isDestructive` | boolean | Red danger button |
| `isFull` | boolean | Full-width button |
| `onPress` | () => void | Click handler |

---

## ⛓ Peer Dependencies

| Package | Used For |
|---------|----------|
| `@heroui/button` | UI buttons |
| `framer-motion` | Animations |
| `react` / `react-dom` | Rendering |

---

## 🔧 Suggested Project Structure

```
src/
  dialog.ts
  DialogProvider.tsx
  components/
    Dialog.tsx
    DialogContent.tsx
    DialogActions.tsx
    DialogHeader.tsx
```

---

## 🧪 Roadmap

- [ ] `dialog.confirm()` helper
- [ ] Accessibility + focus lock
- [ ] Configurable transitions
- [ ] Theme API

---

## 📝 License

MIT © 2025