npm package: @finsire/frontend_components
Description: ## \*Important: Import css in your application
Latest version: 1.0.44

# Finsire Frontend Components

## \*Important: Import css in your application

You need to import the css file in order for the component styles to work.

```jsx
import "@finsire/frontend_components/dist/index.css";
```

## 1. Button

The `Button` component is a reusable React "button" component with customizable variants, sizes, states, and optional icons.

import the component as follows:

```jsx
import { Button } from "@finsire/frontend_components";
```

| Props       | Required | Data type | Default value | Description                                           |
| ----------- | -------- | --------- | ------------- | ----------------------------------------------------- |
| `text`      | Yes      | String    |               | text to be shown in button (ex: "Click")              |
| `variant`   | No       | String    | `primary`     | accepted values: (`primary`, `secondary`, `tertiary`) |
| `textSize`  | No       | String    | `md`          | accepted values: (`sm`, `md`, `lg`, `xl`)             |
| `size`      | No       | String    | `L`           | accepted values: (`S`, `M`, `L`)                      |
| `disabled`  | No       | Boolean   | `false`       | pass true for disabled                                |
| `leftIcon`  | No       | Component |               | pass icon as a component                              |
| `rightIcon` | No       | Component |               | pass icon as a component                              |
| `className` | No       | String    |               | pass tailwind class names                             |
| `props`     | No       | Any       |               | pass a function like onClick, etc                     |

---

### Usage example

```jsx
<Button text="Primary Button" variant="primary" size="L" />
```

## 2. Checkbox

The `Checkbox` component is a reusable React "checkbox" component with customizable variants, disabled state, checked state, etc.

import the component as follows:

```jsx
import { Checkbox } from "@finsire/frontend_components";
```

| Props                  | Required | Data type | Default value | Description                                                             |
| ---------------------- | -------- | --------- | ------------- | ----------------------------------------------------------------------- |
| `id`                   | Yes      | String    |               | pass id of the checkbox                                                 |
| `variant`              | No       | String    | `primary`     | accepted values: (`primary`, `indeterminate`)                           |
| `disabled`             | No       | Boolean   | `false`       | pass true for disabled                                                  |
| `checked`              | No       | Boolean   | `false`       | pass true for checked in case of disabled [for `primary` variant]       |
| `defaultIndeterminate` | No       | Boolean   | `false`       | pass true for checked in case of disabled [for `indeterminate` variant] |
| `getCurrentStatus`     | No       | Function  |               | pass a function which will get "status" [boolean value: (true, false)]  |
| `className`            | No       | String    |               | pass tailwind class names                                               |
| `props`                | No       | Any       |               | pass other props as required                                            |

---

### Usage example

```jsx
const handleGetCheckedStatus = (status) => {
  console.log("status is:");
  console.log(status);
};

<Checkbox id="checkId" getCurrentStatus={handleGetCheckedStatus} />;
```

## 3. Avatar

The `Avatar` component is a reusable component with customizable variants, sizes, and states like checked, image, etc.

import the component as follows:

```jsx
import { Avatar } from "@finsire/frontend_components";
```

| Props         | Required | Data type | Default value | Description                               |
| ------------- | -------- | --------- | ------------- | ----------------------------------------- |
| `variant`     | No       | String    | `primary`     | accepted values: (`primary`, `secondary`) |
| `size`        | No       | String    | `lg`          | accepted values: (`lg`, `md`, `sm`, `xs`) |
| `status`      | No       | String    | `unchecked`   | accepted values: (`checked`, `unchecked`) |
| `letter`      | No       | String    |               | pass any letter                           |
| `avatarImg`   | No       | String    |               | pass image source                         |
| `bgFillColor` | No       | String    |               | pass hex code for background color        |
| `pathColor`   | No       | String    |               | pass hex code for foreground color        |

---

### Usage example

```jsx
<Avatar variant="secondary" size="md" />
```

## 4. Toggle

The `Toggle` component is a reusable component with customizable sizes, showing icons and disabled states.

import the component as follows:

```jsx
import { Toggle } from "@finsire/frontend_components";
```

| Props               | Required | Data type | Default value | Description                                                            |
| ------------------- | -------- | --------- | ------------- | ---------------------------------------------------------------------- |
| `size`              | No       | String    | `lg`          | accepted values: (`lg`, `md`, `sm`)                                    |
| `showIcon`          | No       | Boolean   | `false`       | pass `true` to show icons                                              |
| `toggleOnDisabled`  | No       | Boolean   | `false`       | pass `true` for disabled ON state                                      |
| `toggleOffDisabled` | No       | Boolean   | `false`       | pass `true` for disabled OFF state                                     |
| `getStatus`         | No       | Function  |               | pass a function which will get "status" [boolean value: (true, false)] |

---

### Usage example

```jsx
<Toggle size="md" showIcon={true} />
```