npm package: @safestrong/ppa-component-library
Description: Collection of reusable components for any PPA web applications
Author: SS6 Development
Latest version: 1.8.1

# 📦 PPA Component Library

Reusable component for faster web development, simple and easy to use. Enabling user to define it's color theme, make the UI displayed consistently.

> You need additional package (mandatory) while using this component <br> > [Fontawesome](https://fontawesome.com/) and [Tailwind CSS](https://tailwindcss.com/)

## 💻 Installation

```bash
npm i @safestrong/ppa-component-library
#OR
yarn add @safestrong/ppa-component-library
#OR
pnpm add @safestrong/ppa-component-library
```

## 🕹 Usage

Import the component first <br>
`import { Button } from "@safestrong/ppa-component-library"` <br><br>
Use component in your page or your own component <br>
`<Button label="Click me" />`

## 📂 List

### Button - `<Button />`

| Prop        | Type       | Required | Default | Description                        |
| ----------- | ---------- | -------- | ------- | ---------------------------------- |
| `label`     | `string`   | ✅ Yes   | —       | The text inside the button.        |
| `isLoading` | `boolean`  | ❌ No    | false   | Loading state waiting              |
| `btnType`   | `enum`     | ❌ No    | primary | `primary`, `secondary`, `tertiary` |
| `icon`      | `IconProp` | ❌ No    | —       | Icon inside the button.            |
| `className` | `string`   | ❌ No    | —       | Additional class for button.       |

<hr>

### Card - `<Card />`

| Prop        | Type              | Required | Default | Description               |
| ----------- | ----------------- | -------- | ------- | ------------------------- |
| `children`  | `React.ReactNode` | ✅ Yes   | —       | Content inside.           |
| `className` | `string`          | ❌ No    | -       | Additional class for card |

<hr>

### Text Input - `<TextInput />`

| Prop       | Type       | Required | Default | Description                        |
| ---------- | ---------- | -------- | ------- | ---------------------------------- |
| `icon`     | `IconProp` | ❌ No    | —       | Icon inside text input             |
| `label`    | `string`   | ❌ No    | -       | Additional label if needed         |
| `labelFor` | `string`   | ❌ No    | -       | Label (if any) `htmlFor` attribute |

<hr>

### Toast - `<Toast />`

| Prop          | Type     | Required | Default | Description                         |
| ------------- | -------- | -------- | ------- | ----------------------------------- |
| `title`       | `string` | ✅ Yes   | —       | Toast Title                         |
| `description` | `string` | ✅ Yes   | -       | Description on toast body           |
| `type`        | `enum`   | ❌ No    | `info`  | `info`,`warning`,`success`,`danger` |
| `className`   | `string` | ❌ No    | -       | Additional className for Toast body |

<hr>

### Expandable - `<Expandable />`

| Prop        | Type              | Required | Default | Description                     |
| ----------- | ----------------- | -------- | ------- | ------------------------------- |
| `title`     | `string`          | ✅ Yes   | —       | Title                           |
| `children`  | `React.ReactNode` | ✅ Yes   | -       | Content inside                  |
| `isOpen`    | `boolean`         | ❌ No    | false   | Auto show/expand content        |
| `className` | `string`          | ❌ No    | -       | Additional class for Expandable |

<hr>

### Tooltip - `<Tooltip />`

| Prop       | Type              | Required | Default | Description                      |
| ---------- | ----------------- | -------- | ------- | -------------------------------- |
| `children` | `React.ReactNode` | ✅ Yes   | —       | Text content                     |
| `text`     | `string`          | ✅ Yes   | -       | Tooltip text                     |
| `position` | `string`          | ❌ No    | `top`   | `top`, `bottom`, `right`, `left` |

<hr>

### Single Select - `<SingleSelect />` ✅ Client Component

| Prop        | Type                             | Required | Default | Description                        |
| ----------- | -------------------------------- | -------- | ------- | ---------------------------------- |
| `label`     | `string`                         | ❌ No    | —       | Additional label                   |
| `labelHtml` | `string`                         | ❌ No    | -       | Label (if any) `htmlFor` attribute |
| `options`   | `{label:string, value:string}[]` | ❌ No    | -       | List Option                        |
| `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |

<hr>

### Multi Select - `<MultiSelect />` ✅ Client Component

| Prop    | Type                              | Required | Default | Description  |
| ------- | --------------------------------- | -------- | ------- | ------------ |
| `state` | `React.useState<{value, select}>` | ✅ Yes   | —       | Text content |
| `options`  | `{label:string, value:string}[]`  | ❌ No   | -       | List Option  |
 `stringOptions`   | `string[]`                 | ❌ No    | -       | List Option                        |

Example:

```bash
export default function Dashboard() {
  const [selectedItem, setSelectedItem] = useState([]);
  return (
      <MultiSelect
        list={list}
        state={{ value: selectedItem, select: setSelectedItem }}
      />
  );
}
```

<hr>

### Slider - `<Slider />`

| Prop                  | Type                  | Required | Default | Description                        |
| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |

<hr>

### Theme Toggle - `<ThemeToggle />`

| Prop                  | Type                  | Required | Default | Description                        |
| --------------------- | --------------------- | -------- | ------- | ---------------------------------- |
| `InputHTMLAttributes` | `InputHTMLAttributes` | ❌ No    | —       | optinal attribute of input Element |

<hr>

### Tab Navigation - `<NavTabClient />` ✅ Client Component

| Prop       | Type                             | Required | Default | Description  |
| ---------- | -------------------------------- | -------- | ------- | ------------ |
| `children` | `React.ReactNode`                | ✅ Yes   | —       | Text content |
| `state`    | `string`                         | ✅ Yes   | -       | Tooltip text |
| `items`    | `{label:string, value:string}[]` | ✅ Ye    | -       | List Option  |