# Discord Components V2

🎮 A powerful TypeScript library for building modern Discord.js v14 components with a clean, builder-based API.

[![Discord](https://img.shields.io/discord/1004735926234271864?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/RfBydgJpmU)
[![Dashboard](https://img.shields.io/badge/Dashboard-Rabbit%20Tale-ff69b4?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEbSURBVCiRldKxSgNBEAbgb9dcGhsbyWkjpDEQxFcQX8BWfAGx9wEsrMTCSuy0sbQJ2NgKYiGkSHVNLGwEEQwkgcSYZO8s7HGXs8gPU84/8zOzy4YqSZIFZDiLMGjb9nue54/IRxUlEqBpmi3f93cQnxVF8YB8XLY0dV0vI74gxgBn2Pd87xY5RQz6dYEE+b5/jqW2bRfr1v6fhwCcNnW9BuBQSnmH/DHwwTnvAngFcCmE2EXeGVjhnB8DuEE8F0LsIX8afDEO4wPkXwAuhRCHyJ8HVhE/AbgWQhwhfx1Y5YyfALhB/A1gB/lPL0CuyrJ8R/4+8NE0zTqAI+TvAytRFB0AiJF/Dqz4QbAJ4Az518CklHITQIT8F8AE5/wvJvXBVvEAAAAASUVORK5CYII=)](https://discord.rabbittale.co)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Discord.js](https://img.shields.io/badge/Discord.js-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.js.org/)
[![NPM Version](https://img.shields.io/npm/v/@discord-components-v2?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/@discord-components-v2)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

## 📋 Table of Contents
- [Installation](#installation)
- [Features](#features)
- [Quick Start](#quick-start)
- [Components](#components)
- [Advanced Usage](#advanced-usage)
- [Examples](#examples)
- [Links](#links)
- [Contributing](#contributing)
- [License](#license)

## 🚀 Installation

```bash
npm install @discord-components-v2
# or
yarn add @discord-components-v2
# or
pnpm add @discord-components-v2
```

## ✨ Features

- 🎯 Type-safe component builders
- 🎨 Modern and clean API design
- 📦 Full Discord.js v14 compatibility
- 🛠️ Comprehensive component support
- 🔧 Easy customization and styling
- 📝 Rich documentation and examples

## 🏃‍♂️ Quick Start

```typescript
import {
  makeButton,
  makeActionRow,
  makeStringSelect,
  makeContainer,
  Colors,
  MessageFlags
} from '@discord-components-v2'

// Create interactive components
const button = makeButton({
  custom_id: 'my_button',
  label: '🎉 Click me!',
  style: ButtonStyle.Primary
})

const select = makeStringSelect('my_select')
  .addOptions({
    label: 'Awesome Option',
    value: 'opt1',
    description: 'Choose something awesome'
  })
  .setPlaceholder('Make your choice...')

// Organize components
const row = makeActionRow([button, select])
const container = makeContainer([row])
  .setColor(Colors.Blurple)
  .setSpoiler(false)

// Use in Discord.js
await interaction.reply({
  content: '# Welcome to Components V2! 🎊',
  components: [container],
  flags: MessageFlags.IsComponentsV2
})
```

## 🧩 Components

### Basic Components
- `ActionRow` - Horizontal container for components
- `Button` - Interactive button element
- `StringSelect` - Dropdown menu with string options
- `TextDisplay` - Rich text display component

### Selection Components
- `ChannelSelect` - Channel picker menu
- `MentionableSelect` - User/Role mention picker
- `RoleSelect` - Role selection menu
- `UserSelect` - User selection menu

### Visual Components
- `Container` - Styled component container
- `File` - File attachment component
- `MediaGallery` - Image/media gallery
- `Section` - Structured content section
- `Separator` - Visual divider
- `Thumbnail` - Image thumbnail component

## 🔧 Advanced Usage

### Custom Styling
```typescript
const styledContainer = makeContainer([components])
  .setColor(Colors.Green)
  .setSpoiler(true)
  .setDescription('Custom container description')
```

### Complex Layouts
```typescript
const layout = makeContainer([
  makeSection([
    makeTextDisplay('# Header'),
    makeTextDisplay('Description')
  ], thumbnail),
  makeSeparator(),
  makeActionRow([
    makeButton({ /*...*/ }),
    makeButton({ /*...*/ })
  ])
])
```

### Media Gallery
```typescript
const gallery = makeMediaGallery([
  {
    media: { url: 'image1.png' },
    description: 'First image'
  },
  {
    media: { url: 'image2.png' },
    description: 'Second image'
  }
])
```

## 🌟 Examples

### Modal Form
```typescript
const modal = makeContainer([
  makeSection([
    makeTextDisplay('## User Information'),
    makeUserSelect({ custom_id: 'user' }),
    makeRoleSelect({ custom_id: 'role' })
  ]),
  makeActionRow([
    makeButton({
      custom_id: 'submit',
      label: 'Submit',
      style: ButtonStyle.Success
    })
  ])
])
```

### Interactive Menu
```typescript
const menu = makeContainer([
  makeSection([
    makeTextDisplay('# Menu Title'),
    makeStringSelect('menu_select')
      .addOptions([
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' }
      ])
  ])
])
```

## 🔗 Links

[![Discord](https://img.shields.io/badge/Join_My_Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/RfBydgJpmU)
[![Dashboard](https://img.shields.io/badge/Bot_Dashboard-FF69B4?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEbSURBVCiRldKxSgNBEAbgb9dcGhsbyWkjpDEQxFcQX8BWfAGx9wEsrMTCSuy0sbQJ2NgKYiGkSHVNLGwEEQwkgcSYZO8s7HGXs8gPU84/8zOzy4YqSZIFZDiLMGjb9nue54/IRxUlEqBpmi3f93cQnxVF8YB8XLY0dV0vI74gxgBn2Pd87xY5RQz6dYEE+b5/jqW2bRfr1v6fhwCcNnW9BuBQSnmH/DHwwTnvAngFcCmE2EXeGVjhnB8DuEE8F0LsIX8afDEO4wPkXwAuhRCHyJ8HVhE/AbgWQhwhfx1Y5YyfALhB/A1gB/lPL0CuyrJ8R/4+8NE0zTqAI+TvAytRFB0AiJF/Dqz4QbAJ4Az518CklHITQIT8F8AE5/wvJvXBVvEAAAAASUVORK5CYII=)](https://discord.rabbittale.co)

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

Made with ❤️ by Hasira - Rabbit Tale Studio .co