esewa-ui-library 1.0.1

package/README.md

@@ -0,0 +1,1774 @@
+# esewa-ui-library
+> UI Library for eSewa Mini App
+[![NPM](https://img.shields.io/npm/v/esewa-ui-library.svg)](https://www.npmjs.com/package/esewa-ui-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save esewa-ui-library
+```
+
+## Usage
+
+Import style file in your project:
+```bash
+import 'esewa-ui-library/dist/index.css';
+```
+
+### Components
+
+Import and use components in your project:
+
+```tsx
+import { ESewaButton } from 'esewa-ui-library';
+const App = () => {
+  return <ESewaButton>Click Me</ESewaButton>;
+};
+export default App;
+```
+
+### Available Components
+
+- **AlertCard**: `ESewaAlertCard`
+- **AppBar**: `ESewaAppBar`
+- **Button**: `ESewaButton`
+- **Card**: `ESewaCard`
+- **Carousel**: `ESewaCarousel`
+- **Checkbox**: `ESewaCheckbox`
+- **Datepicker**: `ESewaDatepicker`
+- **Dialog**: `ESewaDialog`
+- **Divider**: `ESewaDivider`
+- **FullPageLoadingScreen**: `EsewaFullPageLoadingScreen`
+- **Grid**: `ESewaGrid`, `ESewaGridItem`
+- **Icon**: `ESIcon`
+- **Image**: `ESewaImage`
+- **InputField**: `ESewaInputField`
+- **InputFieldTextArea**: `ESewaInputFeildTextArea`
+- **MultiSelect**: `ESewaMultiSelect`
+- **NepaliDatepicker**: `ESewaNepaliDatepicker`
+- **Radio**: `ESewaRadio`
+- **Select**: `ESewaSelectNative`
+- **Skeleton**: `ESewaSkeleton`
+- **Tag**: `ESewaTag`
+- **Tooltip**: `ESewaTooltip`
+---
+
+## ESewaAlertCard
+
+The `ESewaAlertCard` component is used to display alert messages with different variants, optional icons, dismiss buttons, and action buttons.
+
+### Usage:
+
+```tsx
+import { ESewaAlertCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <ESewaAlertCard
+      variant="warning"
+      title="Warning Alert"
+      description="This is a warning alert"
+      titleIcon="fa fa-exclamation-circle"
+      showDismissIcon={true}
+      dismissIcon="fa fa-times"
+      onDismiss={() => alert('Dismiss clicked')}
+      showCardFooter={true}
+      buttonLabel="Action"
+      buttonOnClick={() => alert('Action clicked')}
+    />
+  );
+};
+
+export default App;
+```
+
+### Props:
+
+| Prop Name            | Type                                              | Default      | Description |
+|----------------------|--------------------------------------------------|-------------|-------------|
+| `alertCardClass`     | `string`                                         | `''`        | Additional class for custom styling |
+| `variant`           | `'primary' | 'warning' | 'danger' | 'info'`      | `'primary'` | Determines the alert style |
+| `title`             | `string`                                         | `undefined` | Title of the alert |
+| `description`       | `string`                                         | `undefined` | Alert description text |
+| `descriptionIcon`   | `string`                                         | `undefined` | Icon class for the description |
+| `showDescriptionIcon` | `boolean`                                      | `false`     | Whether to show the description icon |
+| `titleIcon`         | `string`                                         | `undefined` | Icon class for the title |
+| `dismissIcon`       | `string`                                         | `undefined` | Icon class for the dismiss button |
+| `showDismissIcon`   | `boolean`                                       | `false`     | Whether to show the dismiss button |
+| `onDismiss`        | `() => void`                                     | `undefined` | Callback function when dismiss button is clicked |
+| `showCardFooter`   | `boolean`                                       | `false`     | Whether to show the footer section |
+| `buttonLabel`      | `string`                                         | `undefined` | Label for the action button |
+| `buttonOnClick`    | `() => void`                                     | `undefined` | Callback function when the action button is clicked |
+
+---
+
+
+## ESewaAppBar
+
+The `ESewaAlertCard` component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.
+
+### Usage:
+
+```tsx
+import { ESewaAppBar } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <ESewaAppBar 
+      title="App Bar Title" 
+      titleposition="left"
+      onBackIconClick={() => console.log('Back icon clicked')}
+      onTitleClick={() => console.log('Title clicked')}
+      onActionIconClick={() => console.log('Action icon clicked')}
+      actionIcon="icon-settings"
+    />
+  );
+};
+
+export default App;
+```
+
+### Props:
+
+| Prop Name             | Type                      | Default  | Description |
+|-----------------------|---------------------------|----------|-------------|
+| `title`               | `string | any`             | `undefined` | Title to display in the app bar |
+| `icon`                | `string`                  | `'icon-back'` | Icon to display as the back button |
+| `imageUrl`            | `string`                  | `undefined` | Image URL to display next to the title |
+| `onBackIconClick`     | `() => void`              | `() => {}` | Callback for the back icon click event |
+| `onTitleClick`        | `() => void`              | `() => {}` | Callback for the title click event |
+| `onActionIconClick`   | `() => void`              | `() => {}` | Callback for the action icon click event |
+| `onClick`             | `() => void`              | `() => {}` | Callback for the entire app bar click event |
+| `className`           | `string`                  | `undefined` | Additional class for custom styling |
+| `titleposition`       | `'left' | 'center' | 'right'` | `'center'` | Position of the title within the app bar |
+| `actionIcon`          | `string`                  | `undefined` | Icon for the action button on the right side of the app bar |
+
+
+# ESewaButton
+
+`ESewaButton` is a highly customizable button component built with React and styled using `styled-components`. It supports multiple variants, sizes, icon placement, and other button properties for flexible UI design.
+
+### Usage:
+
+```tsx
+import { ESewaButton } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <ESewaButton 
+      type="button"
+      variant="primary"
+      onClick={handleClick}
+      disabled={false}
+      outlined={false}
+      fullwidth={true}
+      icon="icon-class"
+      iconPlacement="start"
+      size="large"
+      textTransform="uppercase"
+    >
+      Click Me
+    </ESewaButton>
+  );
+};
+
+export default App;
+```
+
+
+### Props:
+| Name           | Type                      | Default     | Description                                                                                                  |
+|----------------|---------------------------|-------------|--------------------------------------------------------------------------------------------------------------|
+| `type`         | `'button' | 'submit' | 'reset'` | `'button'`  | Specifies the type of the button. Options include `button`, `submit`, or `reset`.                           |
+| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'text'` | `'default'` | Specifies the variant style of the button. Choose from `primary`, `secondary`, `danger`, `success`, `warning`, `info`, or `text`. |
+| `onClick`      | `(e: any) => void`         | `undefined` | The function to execute when the button is clicked.                                                          |
+| `children`     | `React.ReactNode`          | `undefined` | The content of the button, typically text or icons.                                                          |
+| `disabled`     | `boolean`                  | `false`     | Disables the button if set to `true`.                                                                         |
+| `outlined`     | `boolean`                  | `false`     | If `true`, the button will have an outline style.                                                            |
+| `className`    | `string`                   | `''`        | Additional CSS class(es) to apply to the button.                                                             |
+| `fullwidth`    | `boolean`                  | `false`     | If `true`, the button will span the full width of its container.                                              |
+| `icon`         | `string`                   | `
+
+
+## Styling and Customization
+
+### Button Size
+
+You can customize the button size using the `size` prop. The available sizes are:
+
+- `large`: Large button with more padding.
+- `medium`: Default button size.
+- `small`: Compact button with smaller padding.
+
+### Button Variants
+
+The button supports various color variants that you can use by specifying the `variant` prop:
+
+- `primary`: The main action button style.
+- `secondary`: A secondary action style.
+- `danger`: A button to signify danger or warning actions.
+- `success`: For success actions.
+- `warning`: For warning actions.
+- `info`: A button for informational actions.
+- `text`: A text-only button with no background.
+
+### Icon Customization
+
+You can add icons to your button using the `icon` prop. The icon will be displayed inside the button either before or after the button text, depending on the `iconPlacement` prop.
+
+- `iconPlacement` can be set to `start` (icon before text) or `end` (icon after text).
+- Use the `iconClass` prop to apply a custom class to the icon for further customization.
+
+### Full Width Button
+
+To make the button span the full width of its container, set the `fullwidth` prop to `true`.
+
+### Disabled Button
+
+If you want to disable the button, set the `disabled` prop to `true`. The button will appear grayed out and will not be clickable.
+
+### Text Transform
+
+You can control the text transformation of the button text using the `textTransform` prop. Available options are:
+
+- `uppercase`: Converts the button text to uppercase.
+- `capitalized`: Capitalizes the first letter of each word.
+
+## Example Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { ESewaButton } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaButton variant="primary" onClick={() => alert('Button clicked!')}>
+        Primary Button
+      </ESewaButton>
+    </div>
+  );
+}
+
+export default App;
+```
+
+# ESewaCard Component
+
+The `ESewaCard` component is a flexible and customizable card wrapper built with `styled-components` in React. It provides a container with background color, padding, and customizable border radius styles. You can use it to wrap content such as text, images, or other components to create a card-like layout.
+
+The card supports various border radius values through the `className` prop. The `ESewaCard` component is lightweight and can be customized with different CSS variables.
+
+## Props
+| Name        | Type                | Default     | Description                                                                          |
+|-------------|---------------------|-------------|--------------------------------------------------------------------------------------|
+| `children`  | `React.ReactNode`    | `''`        | The content inside the card.                                                         |
+| `className` | `string`             | `''`        | Additional CSS class(es) to apply to the card.                                        |
+
+## Styling and Customization
+
+The `ESewaCard` component uses CSS variables for styling, which allows for easy customization of the card's background, padding, border radius, and more. 
+
+### Border Radius Customization
+
+You can customize the card's border radius by adding the appropriate `className`:
+
+- `border-radius-0`: Border radius of `var(--values-value-0)`
+- `border-radius-2`: Border radius of `var(--values-value-2)`
+- `border-radius-4`: Border radius of `var(--values-value-4)`
+- `border-radius-6`: Border radius of `var(--values-value-6)`
+- `border-radius-8`: Border radius of `var(--values-value-8)`
+- `border-radius-10`: Border radius of `var(--values-value-10)`
+- `border-radius-12`: Border radius of `var(--values-value-12)`
+- `border-radius-14`: Border radius of `var(--values-value-14)`
+- `border-radius-16`: Border radius of `var(--values-value-16)`
+- `border-radius-round`: Border radius of `50%` (perfectly round card)
+
+### Default Styling
+
+- **Background color**: `var(--card-bg)`
+- **Box-shadow**: `var(--shadow--1--umbra)`
+- **Text color**: `var(--text-dark)`
+- **Padding**: `var(--values-value-16)`
+
+## Example Usage
+
+### Basic Example
+
+```tsx
+import React from 'react';
+import { ESewaCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaCard>
+        <h3>Card Content</h3>
+        <p>This is a simple card with content inside.</p>
+      </ESewaCard>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Custom Border Radius Example
+
+You can customize the border radius of the `ESewaCard` component by using different `className` values. Below is an example of how to apply a custom border radius to the card.
+
+#### Example: Card with Border Radius 8
+
+```tsx
+import React from 'react';
+import { ESewaCard } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      <ESewaCard className="border-radius-8">
+        <h3>Card with Border Radius 8</h3>
+        <p>This card has a border radius of 8px.</p>
+      </ESewaCard>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## ESewaCarousel
+
+`ESewaCarousel` is a flexible and customizable carousel component built with React and styled-components. It supports both horizontal and vertical scrolling, customizable item sizes, and various features such as autoplay, navigation, and indicators.
+
+### Features
+- Supports **horizontal** and **vertical** directions.
+- Ability to display **scrollbars** and customize their visibility.
+- **Navigation buttons** to scroll through items.
+- **Autoplay** functionality with configurable intervals.
+- **Indicators** to show the active item.
+- Customizable **width** and **height** for carousel items.
+- **Responsive** adjustments for smaller screens.
+
+### Props
+| Prop                | Type                           | Default Value  | Description                                                                                       |
+|---------------------|--------------------------------|----------------|---------------------------------------------------------------------------------------------------|
+| `items`             | `React.ReactNode[]`            | `[]`           | Array of items to display in the carousel.                                                         |
+| `direction`         | `'horizontal' \| 'vertical'`   | `'horizontal'` | Defines the direction of scrolling (horizontal or vertical).                                      |
+| `itemWidth`         | `string`                       | `'200px'`      | Custom width of each item in the carousel.                                                         |
+| `itemHeight`        | `string`                       | `'200px'`      | Custom height of each item in the carousel.                                                        |
+| `showScrollbar`     | `boolean`                      | `false`        | Whether to display the scrollbar in the carousel.                                                  |
+| `showIndicator`     | `boolean`                      | `true`         | Whether to display the carousel indicators.                                                        |
+| `visibleItems`      | `number`                       | `undefined`    | Number of items to display at once in the carousel.                                                |
+| `showNav`           | `boolean`                      | `false`        | Whether to show left and right navigation buttons.                                                 |
+| `autoplay`          | `boolean`                      | `false`        | Whether the carousel should autoplay.                                                              |
+| `autoplayInterval`  | `number`                       | `3000`         | Interval for autoplay in milliseconds (default 3000ms).                                            |
+### Styling
+
+The `ESewaCarousel` component is styled using `styled-components`. The component is fully customizable, and you can adjust the appearance by modifying the following properties in the CSS:
+
+- `background-color` for items (`--card-bg`)
+- `color` for text (`--body-color`)
+- Customizable scrollbar styles (`.carousel-wrapper.show-scrollbar`).
+
+### Example Usage
+
+#### Horizontal Carousel
+
+```tsx
+import React from 'react';
+import { ESewaCarousel } from 'esewa-ui-library';
+
+const items = [
+  <div>Item 1</div>,
+  <div>Item 2</div>,
+  <div>Item 3</div>
+];
+
+const App = () => {
+  return (
+    <ESewaCarousel 
+      items={items} 
+      direction="horizontal" 
+      itemWidth="250px" 
+      itemHeight="200px" 
+      showScrollbar 
+      showNav 
+      showIndicator 
+      autoplay 
+      autoplayInterval={4000}
+    />
+  );
+}
+
+export default App;
+```
+
+# ESewaCheckbox Component
+
+The `ESewaCheckbox` component is a fully customizable checkbox built with React and styled using `styled-components`. It provides support for labels, disabled states, custom change handling, and additional styling flexibility through props.
+
+## Features
+
+- **Customizable checkbox**: Allows the user to easily customize the checkbox with a label.
+- **Change handling**: Provides an `onChange` callback to handle state changes.
+- **Disabled state**: Supports disabling the checkbox.
+- **Custom styling**: Supports custom class names and additional styling flexibility via props.
+
+## Usage
+
+### Basic Usage
+
+To use the `ESewaCheckbox` component, import it and pass the necessary props to it.
+
+```tsx
+import { ESewaCheckbox } from 'esewa-ui-library';
+
+const MyComponent = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleChange = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <ESewaCheckbox 
+      label="I agree to the terms" 
+      checked={isChecked} 
+      onChange={handleChange} 
+    />
+  );
+};
+```
+
+## Props
+| Prop          | Type        | Default Value | Description                                       |
+|---------------|-------------|---------------|---------------------------------------------------|
+| `label`       | `string?`   | `undefined`   | The label text for the checkbox.                  |
+| `onChange`    | `(checked: boolean) => void?` | `undefined` | Callback function to handle checkbox state change. |
+| `checked`     | `boolean?`  | `false`       | The checked state of the checkbox.                |
+| `labelClass`  | `string?`   | `''`          | Class name for styling the label.                 |
+| `className`   | `string?`   | `''`          | Custom class name for the checkbox container.     |
+| `disabled`    | `boolean?`  | `false`       | If true, disables the checkbox.   
+
+# ESewaChipGroup Component
+
+## Overview
+
+The `ESewaChipGroup` component is a customizable chip group component built with React and styled-components. It allows you to display a set of chips with selectable options. You can choose between single or multiple selection modes, with customizable styles and optional icons.
+
+## Props
+| Prop            | Type                            | Default Value | Description                                                                                                                                                    |
+|-----------------|---------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `selection`     | `'single' \| 'multiple'`        | Required      | Specifies the selection mode: `'single'` for single selection, `'multiple'` for multiple selection.                                                          |
+| `required`      | `boolean?`                       | `false`       | If true, ensures that at least one chip is selected when the selection mode is `'multiple'`.                                                                  |
+| `chips`         | `ChipProps[]`                    | Required      | An array of chips to display. Each chip includes a text label, an optional icon, and an ID.                                                                  |
+| `className`     | `string?`                        | `''`          | Optional custom class name for styling the chip container.                                                                                                    |
+
+# ESewaDatePicker
+
+A customizable and accessible date picker component for React, built using **styled-components**.
+
+## Features
+
+- Customizable label with a required indicator.
+- Supports `min` and `max` date restrictions.
+- Supports `readOnly` and `disabled` states.
+- Displays validation messages when needed.
+- Automatically focuses on the input when `autoFocus` is enabled.
+- Styled using `styled-components`.
+
+
+## Usage
+
+### Basic Example
+
+```tsx
+import React, { useState } from "react";
+import { ESewaDatePicker } from 'esewa-ui-library';
+
+const App = () => {
+  const [date, setDate] = useState("");
+
+  return (
+    <div>
+      <ESewaDatePicker
+        label="Select Date"
+        name="date"
+        value={date}
+        onChange={(e) => setDate(e.target.value)}
+        required
+      />
+    </div>
+  );
+};
+
+export default App
+```
+
+## Example with Validation, Min & Max Dates
+
+```tsx
+import React, { useState } from "react";
+import { ESewaDatePicker } from 'esewa-ui-library';
+
+const App = () => {
+  const [date, setDate] = useState("");
+
+  return (
+    <div>
+      <ESewaDatePicker
+        label="Start Date"
+        name="startDate"
+        value={date}
+        onChange={(e) => setDate(e.target.value)}
+        min="2023-12-01"
+        max="2024-12-31"
+        validationMessage="Please select a valid date."
+        required
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop Name          | Type                                      | Default   | Description |
+|--------------------|-------------------------------------------|-----------|-------------|
+| `id`               | `string`                                  | `undefined` | ID for the input field. |
+| `name`             | `string`                                  | `undefined` | Name attribute for the input field. |
+| `label`            | `string`                                  | `undefined` | Label text displayed above the input field. |
+| `value`            | `string`                                  | `undefined` | Selected date value (in `YYYY-MM-DD` format). |
+| `min`              | `string`                                  | `undefined` | Minimum selectable date (in `YYYY-MM-DD` format). |
+| `max`              | `string`                                  | `undefined` | Maximum selectable date (in `YYYY-MM-DD` format). |
+| `required`         | `boolean`                                 | `false`    | Marks the field as required. |
+| `readOnly`         | `boolean`                                 | `false`    | Makes the input read-only. |
+| `disabled`         | `boolean`                                 | `false`    | Disables the input field. |
+| `className`        | `string`                                  | `""`       | Additional class names for styling. |
+| `validationMessage`| `string`                                  | `undefined` | Displays an error message below the input. |
+| `autoFocus`        | `boolean`                                 | `false`    | Automatically focuses on the input when mounted. |
+| `onChange`         | `(event: React.ChangeEvent<HTMLInputElement>) => void` | `undefined` | Callback function triggered on date change. |
+
+
+# ESewaDialog Component
+
+## Usage
+
+The `ESewaDialog` component is a modal dialog used to display content with options like OK and Cancel actions. You can customize the dialog's appearance, positioning, and button texts.
+
+### Example:
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaDialog } from 'esewa-ui-library';
+
+const App = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDialog = () => setIsOpen(true);
+  const closeDialog = () => setIsOpen(false);
+  const handleOk = () => {
+    console.log('OK button clicked');
+    closeDialog();
+  };
+
+  return (
+    <div>
+      <button onClick={openDialog}>Open Dialog</button>
+
+      <ESewaDialog
+        isOpen={isOpen}
+        title="Sample Dialog"
+        okText="Confirm"
+        cancelText="Cancel"
+        onOk={handleOk}
+        onCancel={closeDialog}
+        position="center"
+      >
+        <p>Dialog content goes here.</p>
+      </ESewaDialog>
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop Name            | Type                                                       | Default                | Description                                                                                                                                               |
+|----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `isOpen`             | `boolean`                                                  | `false`                | Controls the visibility of the dialog.                                                                                                                     |
+| `showLeftIcon`       | `boolean`                                                  | `false`                | Whether to show the left icon in the dialog header.                                                                                                        |
+| `leftIcon`           | `string`                                                   | `'icon-es-check'`      | The icon class to be displayed in the left side of the dialog header.                                                                                     |
+| `showCloseIcon`      | `boolean`                                                  | `false`                | Whether to show the close icon in the dialog header.                                                                                                      |
+| `closeIcon`          | `string`                                                   | `'icon-es-close'`      | The icon class for the close button.                                                                                                                       |
+| `okText`             | `string`                                                   | `'OK'`                  | The text to be displayed on the OK button.                                                                                                                 |
+| `cancelText`         | `string`                                                   | `'Cancel'`             | The text to be displayed on the Cancel button.                                                                                                            |
+| `title`              | `string`                                                   | `undefined`            | The title of the dialog.                                                                                                                                  |
+| `children`           | `React.ReactNode`                                          | `undefined`            | The content to be displayed in the body of the dialog.                                                                                                    |
+| `onOk`               | `() => void`                                               | `undefined`            | The callback function for the OK button click event.                                                                                                      |
+| `onCancel`           | `() => void`                                               | `() => {}`             | The callback function for the Cancel button click event or clicking outside the dialog.                                                                  |
+| `position`           | `'center' | 'top' | 'bottom'`                            | `'bottom'`             | The position of the dialog on the screen. Can be `center`, `top`, or `bottom`.                                                                          |
+| `disableSubmitButton`| `boolean`                                                  | `false`                | Whether the OK button should be disabled.           
+                                                                                                       |
+# ESewaDivider Component
+
+The `ESewaDivider` component is a customizable divider line that can be used to separate content in your React application. You can customize the color, thickness, width, margin, and style (dotted or solid) of the divider.
+
+## Usage
+
+To use the `ESewaDivider`, simply import it into your React component and include it in your JSX. You can customize the divider's appearance using the available props.
+
+### Basic Usage
+
+```tsx
+import React from 'react'
+import { ESewaDivider } from 'esewa-ui-library';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <p>Content above the divider</p>
+      <ESewaDivider />
+      <p>Content below the divider</p>
+    </div>
+  )
+}
+```
+
+## Props
+
+The `ESewaDivider` component accepts the following props to customize its appearance:
+
+| Prop         | Type     | Default Value    | Description                                                                                       |
+|--------------|----------|------------------|---------------------------------------------------------------------------------------------------|
+| `color`      | `string` | `'var(--border)'` | The color of the divider. You can specify any valid CSS color value.                              |
+| `thickness`  | `string` | `'1px'`          | The thickness of the divider. You can specify the value in `px`, `em`, `rem`, etc.                |
+| `width`      | `string` | `'100%'`         | The width of the divider. You can specify a percentage, `px`, `em`, `rem`, etc.                   |
+| `margin`     | `string` | `'8px 0'`        | The margin around the divider. You can specify the margin in `px`, `em`, `rem`, etc.               |
+| `className`  | `string` | `''` (optional)  | A custom CSS class for additional styling.                                                        |
+| `dotted`     | `boolean`| `false`          | If `true`, the divider will be styled with a dotted line (`dashed` style). Otherwise, it is solid. |
+
+### Example
+
+```tsx
+<ESewaDivider 
+  color="blue" 
+  thickness="2px" 
+  width="50%" 
+  margin="10px 0" 
+  dotted 
+/>
+```
+
+In this example, the divider will be blue, 2px thick, 50% wide, with 10px margin on top and bottom, and have a dotted line style.
+
+# Full Page Loading Component
+
+The `EsewaFullPageLoadingScreen` component provides a full-page loading screen with a loading animation consisting of animated dots and an optional text message.
+
+## Usage
+
+You can use the `EsewaFullPageLoadingScreen` component to show a loading screen with animated dots.
+
+### Example Usage
+
+```tsx
+import React from 'react';
+import { EsewaFullPageLoadingScreen } from 'esewa-ui-library';
+
+const App = () => {
+  return (
+    <div>
+      {/* Display loading screen with a custom message */}
+      <EsewaFullPageLoadingScreen text="Loading, please wait..." />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop   | Type    | Default Value | Description                                                                                           |
+|--------|---------|---------------|-------------------------------------------------------------------------------------------------------|
+| `text` | `string` | `undefined`   | Custom loading text that will be displayed next to the animated dots. If not provided, no text will be shown. |
+
+
+# `ESewaGrid` & `ESewaGridItem` Component
+
+## Overview
+
+The `ESewaGrid` and `ESewaGridItem` components are used to create flexible grid layouts with a 12-column grid system. The `ESewaGrid` serves as the container for the grid, and the `ESewaGridItem` allows you to define the column span for individual items within the grid.
+
+
+## Usage
+
+The `ESewaGrid` component is used to create a 12-column grid layout. You can use `ESewaGridItem` to define the number of columns an item will span within the grid.
+
+### Example
+
+```tsx
+import { ESewaGrid, ESewaGridItem } from './esewa-ui-library';
+
+const Example = () => {
+  return (
+    <ESewaGrid>
+      <ESewaGridItem colSpan={4}>Item 1</ESewaGridItem>
+      <ESewaGridItem colSpan={8}>Item 2</ESewaGridItem>
+      <ESewaGridItem colSpan={12}>Item 3</ESewaGridItem>
+    </ESewaGrid>
+  );
+};
+```
+
+In the example above:
+Item 1 spans 4 columns.
+
+Item 2 spans 8 columns.
+
+Item 3 spans all 12 columns.
+
+## Props
+
+### `ESewaGrid` Props
+
+| Prop      | Type             | Default Value | Description                                                                |
+|-----------|------------------|---------------|----------------------------------------------------------------------------|
+| `children`| `React.ReactNode` | Required      | The content inside the grid container.                                     |
+| `className`| `string`         | `''`          | Custom class name for styling the grid container.                          |
+
+### `ESewaGridItem` Props
+
+| Prop      | Type                                                   | Default Value | Description                                                                 |
+|-----------|--------------------------------------------------------|---------------|-----------------------------------------------------------------------------|
+| `colSpan` | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12`   | Required      | Defines the number of columns the grid item will span (from 1 to 12).       |
+| `children`| `React.ReactNode`                                      | Required      | The content inside the grid item.                                           |
+| `className`| `string`                                              | `''`          | Custom class name for styling the grid item.                                |
+
+## Example: ESewaGrid with All Column Spans
+
+### Example: Usage of All Column Spans
+
+In this example, we use all possible column spans (from 1 to 12) to demonstrate how `ESewaGrid` and `ESewaGridItem` work:
+
+```tsx
+import { ESewaGrid, ESewaGridItem } from './esewa-ui-library'
+
+const Example = () => {
+  return (
+    <ESewaGrid>
+      <ESewaGridItem colSpan={1}>Item 1 (1 Column)</ESewaGridItem>
+      <ESewaGridItem colSpan={2}>Item 2 (2 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={3}>Item 3 (3 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={4}>Item 4 (4 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={5}>Item 5 (5 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={6}>Item 6 (6 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={7}>Item 7 (7 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={8}>Item 8 (8 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={9}>Item 9 (9 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={10}>Item 10 (10 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={11}>Item 11 (11 Columns)</ESewaGridItem>
+      <ESewaGridItem colSpan={12}>Item 12 (12 Columns)</ESewaGridItem>
+    </ESewaGrid>
+  )
+}
+```
+
+# ESIcon Component
+
+The `ESIcon` component is a customizable icon component built using `styled-components` and CSS variables. It allows you to display an icon from a font icon set and customize its size and colors.
+
+### Basic Example
+
+```tsx
+import React from "react";
+import { ESIcon } from './esewa-ui-library'
+
+const App = () => {
+  return (
+    <div>
+      <ESIcon icon="home" size={40} iconPrimaryColor="blue" iconSecondaryColor="gray" />
+      <ESIcon icon="settings" size={30} iconPrimaryColor="green" />
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Example with Custom Colors and Size, Multiple Icons
+
+In this example, we render multiple icons with custom sizes and colors.
+
+```tsx
+import React from "react";
+import { ESIcon } from './esewa-ui-library'
+
+const App = () => {
+  return (
+    <div>
+      <ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
+      <ESIcon icon="user" size={32} iconPrimaryColor="purple" />
+      <ESIcon icon="cart" size={48} iconPrimaryColor="orange" iconSecondaryColor="black" />
+    </div>
+  );
+};
+
+export default App;
+
+```
+
+### ESIcon Component Props
+
+| Prop                | Type                             | Default   | Description                                                        |
+|---------------------|----------------------------------|-----------|--------------------------------------------------------------------|
+| `icon`              | `string`                         | -         | The name of the icon to display. This should be the icon class name (e.g., `search`, `user`, etc.). |
+| `size`              | `number`                         | `28`      | The size of the icon in pixels.                                    |
+| `iconPrimaryColor`  | `string`                         | `undefined` | The primary color of the icon. If not provided, the default color is used. |
+| `iconSecondaryColor`| `string`                         | `undefined` | The secondary color of the icon. If not provided, the default color is used. |
+
+### Usage Example:
+
+```tsx
+<ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
+```
+
+# ESewaImage Component
+
+`ESewaImage` is a React component that handles lazy-loading, error handling, and image preview in a modal. It provides functionality for images to be lazy-loaded when they enter the viewport, with a fallback image in case of error. It also allows the user to click on the image to open a larger preview in a modal.
+
+## Features:
+- **Lazy Loading**: Image is loaded only when it is about to enter the viewport.
+- **Error Handling**: If the image fails to load, a fallback image is used.
+- **Image Preview**: Clicking the image opens it in a modal view.
+- **Customizable Styles**: Customize the width, height, and className of the image.
+
+```tsx
+import { ESewaImage } from './esewa-ui-library'
+
+<ESewaImage
+  src="https://example.com/image.jpg"        // The source URL for the image
+  alt="Description of the image"             // Alt text for accessibility
+  width="300"                                // Image width (can be string or number)
+  height="200"                               // Image height (can be string or number)
+  loading="lazy"                             // Lazy loading option (default is 'lazy')
+  className="custom-class"                   // Optional custom class for styling
+  fallbackSrc="https://example.com/fallback.jpg"  // Fallback image URL
+/>
+```
+
+## Props
+
+The `ESewaImage` component accepts the following props:
+
+| Prop            | Type                                  | Default Value     | Description                                                                 |
+|-----------------|---------------------------------------|-------------------|-----------------------------------------------------------------------------|
+| `src`           | `string`                              | `fallbackImage`   | The URL of the image to be displayed.                                       |
+| `alt`           | `string`                              | `https://`         | The alt text for the image (for accessibility).                             |
+| `width`         | `string | number`                      | -                 | The width of the image (can be a string like `'300px'` or a number like `300`). |
+| `height`        | `string | number`                      | -                 | The height of the image (can be a string like `'200px'` or a number like `200`). |
+| `className`     | `string`                              | -                 | Optional custom CSS class for styling the image.                            |
+| `fallbackSrc`   | `string`                              | `fallbackImage`   | The URL for the fallback image if the primary image fails to load.          |
+| `loading`       | `'lazy' | 'eager'`                      | `'lazy'`          | Determines the image loading strategy: `'lazy'` or `'eager'`.               |
+
+
+# ESewaInputField Component
+
+`ESewaInputField` is a customizable and reusable input field component for React. It supports various types of input fields (text, password, number, email, etc.) and comes with built-in validation messaging, styling, and accessibility features.
+
+## Usage
+
+You can use the `ESewaInputField` component in your React application by following the steps below.
+
+### Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaInputField } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputField
+      type="text"
+      label="Username"
+      name="username"
+      value={inputValue}
+      onChange={handleChange}
+      placeholder="Enter your username"
+      required
+      validationMessage="Username is required"
+    />
+  );
+};
+
+export default MyComponent;
+```
+
+## Props
+
+The `ESewaInputField` component accepts the following props:
+
+| Prop               | Type                                                      | Default       | Description                                                                                                                                                                                                                              |
+|--------------------|-----------------------------------------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `id`               | `string`                                                  | `undefined`   | A unique identifier for the input field.                                                                                                                                                                                                  |
+| `type`             | `'text' | 'password' | 'number' | 'email' | 'date' | 'checkbox' | 'radio' | 'select' | 'textarea'` | `'text'`      | The type of the input field.                                                                                                                                                                                                           |
+| `name`             | `string`                                                  | `undefined`   | The name of the input field, used for form submissions.                                                                                                                                                                                    |
+| `label`            | `string`                                                  | `undefined`   | The label to display next to the input field.                                                                                                                                                                                              |
+| `placeholder`      | `string`                                                  | `undefined`   | The placeholder text displayed in the input field when it is empty.                                                                                                                                                                      |
+| `value`            | `string | number`                                         | `undefined`   | The current value of the input field.                                                                                                                                                                                                     |
+| `checked`          | `boolean`                                                 | `undefined`   | Specifies whether the checkbox or radio button is checked (only applicable for `checkbox` and `radio` types).                                                                                                                             |
+| `pattern`          | `string`                                                  | `undefined`   | A regular expression that the input value must match (useful for email, password, etc.).                                                                                                                                                  |
+| `min`              | `number`                                                  | `undefined`   | The minimum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
+| `max`              | `number`                                                  | `undefined`   | The maximum value for `number`, `date`, or `range` input types.                                                                                                                                                                        |
+| `step`             | `number`                                                  | `undefined`   | The step value for `number`, `date`, or `range` input types.                                                                                                                                                                            |
+| `required`         | `boolean`                                                 | `false`       | If `true`, the input field is required to be filled out before form submission.                                                                                                                                                           |
+| `readOnly`         | `boolean`                                                 | `false`       | If `true`, the input field is read-only, meaning the user cannot modify the value.                                                                                                                                                          |
+| `disabled`         | `boolean`                                                 | `false`       | If `true`, the input field is disabled, preventing user interaction.                                                                                                                                                                     |
+| `className`        | `string`                                                  | `''`          | A custom class name to apply to the input field's container.                                                                                                                                                                            |
+| `validationMessage`| `string`                                                  | `undefined`   | A validation message that is displayed when the input is invalid or doesn't meet the specified requirements.                                                                                                                              |
+| `autoFocus`        | `boolean`                                                 | `false`       | If `true`, the input field will automatically receive focus when the component is rendered.                                                                                                                                               |
+| `onChange`         | `(e: React.ChangeEvent<HTMLInputElement>) => void`         | `undefined`   | A callback function that is called when the input value changes. The `onChange` function receives the change event as an argument.                                                                                                      |
+
+### Notes:
+- Some props are type-dependent. For example, `min`, `max`, and `step` are only relevant for `number`, `range`, or `date` input types.
+- The `required`, `readOnly`, and `disabled` props affect user interaction with the input field.
+- You can pass any additional attributes via the `rest` prop, which will be spread onto the underlying `<input>` element.
+
+
+# ESewaInputFeildTextArea Component
+
+The `ESewaInputFeildTextArea` component is a styled text area input field with customizable properties for labels, validation, and more. It provides a clean and consistent design for text area fields in React applications.
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { ESewaInputFeildTextArea } from './esewa-ui-library'
+
+const Example = () => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputFeildTextArea
+      label="Your Message"
+      value={value}
+      onChange={handleChange}
+      placeholder="Enter your message here"
+      required
+      validationMessage="Message is required"
+    />
+  );
+};
+```
+
+With maxLength and rows
+
+```tsx
+import { ESewaInputFeildTextArea } from './esewa-ui-library'
+
+const Example = () => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <ESewaInputFeildTextArea
+      label="Your Feedback"
+      value={value}
+      onChange={handleChange}
+      placeholder="Enter your feedback here"
+      maxLength={200}
+      rows={5}
+      required
+      validationMessage="Feedback is required"
+    />
+  );
+};
+```
+
+In this example, the ESewaInputFeildTextArea is used with a label, value, onChange, placeholder, and optional maxLength and rows properties. You can customize the component further as needed based on the provided props.
+
+## Props
+
+| Name              | Type                              | Default     | Description                                                                 |
+|-------------------|-----------------------------------|-------------|-----------------------------------------------------------------------------|
+| `name`            | `string`                          | -           | The name of the textarea element.                                            |
+| `label`           | `string`                          | -           | The label text that is displayed above the textarea.                         |
+| `placeholder`     | `string`                          | -           | The placeholder text that appears when the textarea is empty.                |
+| `value`           | `string \| number`                | -           | The current value of the textarea.                                           |
+| `maxLength`       | `number`                          | -           | The maximum number of characters allowed in the textarea.                    |
+| `required`        | `boolean`                         | `false`     | If `true`, the textarea becomes required when submitting the form.            |
+| `readOnly`        | `boolean`                         | `false`     | If `true`, the textarea is set to read-only.                                 |
+| `disabled`        | `boolean`                         | `false`     | If `true`, the textarea is disabled and cannot be interacted with.           |
+| `className`       | `string`                          | -           | Additional CSS class name(s) for custom styling.                            |
+| `rows`            | `number`                          | `3`         | Defines the number of visible rows for the textarea.                         |
+| `validationMessage`| `string`                         | -           | An optional message to display when validation fails.                        |
+| `onChange`        | `(e: ChangeEvent<HTMLTextAreaElement>) => void` | -   | Event handler function for handling text input changes.                     |
+
+
+# ESewaMultiSelect Component
+
+The `ESewaMultiSelect` component is a customizable multi-select dropdown component built using React and styled-components. It allows users to select multiple options from a list, with a search feature and customizable styles.
+
+## Usage
+
+To use the `ESewaMultiSelect` component in your React project, follow these steps:
+
+### 1. Import the Component
+
+First, import the `ESewaMultiSelect` component in your React file:
+
+### 2.Define Options and State
+Create an array of options that will be displayed in the multi-select dropdown. You also need to set up state to handle the selected items.
+
+```tsx
+const [selectedItems, setSelectedItems] = useState([])
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+  { value: '4', label: 'Option 4' }
+]
+```
+
+### 3. Handle Selection Changes
+Define a handler function that will be called whenever the selection changes.
+
+const handleChange = (selected: Option[]) => {
+  setSelectedItems(selected)
+}
+
+### 4. Render the Component
+Now you can render the ESewaMultiSelect component and pass in the necessary props:
+
+```tsx
+<ESewaMultiSelect
+  options={options}
+  onChange={handleChange}
+  placeholder="Select options"
+/>
+```
+
+### 5. Display Selected Items
+```tsx
+<div>
+  <h3>Selected Items</h3>
+  <ul>
+    {selectedItems.map(item => (
+      <li key={item.value}>{item.label}</li>
+    ))}
+  </ul>
+</div>
+```
+
+### Full Example
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaMultiSelect } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [selectedItems, setSelectedItems] = useState([])
+
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' }
+  ]
+
+  const handleChange = (selected: Option[]) => {
+    setSelectedItems(selected)
+  }
+
+  return (
+    <div>
+      <ESewaMultiSelect
+        options={options}
+        onChange={handleChange}
+        placeholder="Select options"
+      />
+      <div>
+        <h3>Selected Items</h3>
+        <ul>
+          {selectedItems.map(item => (
+            <li key={item.value}>{item.label}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+```
+
+# ESewaSelectNative Component
+
+The `ESewaSelectNative` is a customizable `select` dropdown component built with React and styled using `styled-components`. It provides a native `select` element with additional features such as labels, validation messages, and optional full-width styling.
+
+## Usage
+
+Here is an example of how to use the `ESewaSelectNative` component in your React application:
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaSelectNative } from './esewa-ui-library'
+
+const ExampleComponent = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  const handleSelectChange = (value: string) => {
+    setSelectedValue(value);
+  };
+
+  const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' }
+  ];
+
+  return (
+    <div>
+      <ESewaSelectNative
+        label="Select an Option"
+        placeholder="Choose an option"
+        options={options}
+        value={selectedValue}
+        onChange={handleSelectChange}
+        required
+        fullwidth
+      />
+    </div>
+  );
+};
+```
+
+## Props
+
+| Name                | Type               | Default   | Description                                                                 |
+|---------------------|--------------------|-----------|-----------------------------------------------------------------------------|
+| `options`           | `Options[]`         | `[]`      | An array of objects representing the available options in the dropdown.     |
+| `placeholder`       | `string`            | `''`      | Placeholder text shown when no option is selected.                          |
+| `onChange`          | `(value: string) => void` | `() => {}` | A callback function triggered when an option is selected.                   |
+| `label`             | `string`            | `undefined` | The label displayed above the dropdown.                                     |
+| `value`             | `string`            | `undefined` | The currently selected value in the dropdown.                               |
+| `disabled`          | `boolean`           | `false`   | If `true`, disables the dropdown.                                           |
+| `validationMessage` | `string`            | `undefined` | A validation message that is displayed below the select field.              |
+| `required`          | `boolean`           | `false`   | If `true`, marks the field as required with an asterisk.                     |
+| `fullwidth`         | `boolean`           | `false`   | If `true`, the dropdown will take the full width of its container.          |
+
+### `Options` Type
+
+Each option is represented by an object with the following properties:
+
+| Name    | Type   | Description                                            |
+|---------|--------|--------------------------------------------------------|
+| `label` | `string` | The label text displayed for the option.              |
+| `value` | `any`   | The unique value associated with the option.            |
+
+# ESewaNepaliDatepicker Component
+
+The `ESewaNepaliDatepicker` component is a React component for selecting a Nepali date using the `nepali-datepicker-reactjs` library. It allows users to select a date in Nepali format, and it also supports custom styling and locales.
+
+## Usage
+
+Here is an example of how to use the `ESewaNepaliDatepicker` component in your React application:
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaNepaliDatepicker } from './esewa-ui-library'
+
+const App = () => {
+  const [date, setDate] = useState<string>('')
+
+  const handleDateChange = (newDate: string) => {
+    setDate(newDate)
+  }
+
+  return (
+    <div>
+      <ESewaNepaliDatepicker
+        label="Select Nepali Date"
+        value={date}
+        onChange={handleDateChange}
+        calenderLocale="ne"  // You can use 'en' for English or 'ne' for Nepali locale
+      />
+    </div>
+  )
+}
+
+export default App
+```
+
+### Props
+
+The `ESewaNepaliDatepicker` component accepts the following props:
+
+| Prop Name        | Type                               | Description                                                                                                                                               | Default Value  |
+|------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
+| `label`          | `string`                           | The label text to display above the date picker.                                                                                                           | `undefined`    |
+| `className`      | `string`                           | Custom class name to apply custom styles to the date picker component.                                                                                   | `undefined`    |
+| `value`          | `string`                           | The current date value in the form of a string.                                                                                                            | `undefined`    |
+| `onChange`       | `(val: string) => void`            | Callback function that is triggered when the selected date changes. It receives the selected date as a string.                                             | `undefined`    |
+| `calenderLocale` | `'en' | 'ne'`                      | The locale of the calendar. Use `'en'` for the English calendar or `'ne'` for the Nepali calendar.                                                        | `'en'`         |
+
+### Example
+
+```tsx
+<ESewaNepaliDatepicker
+  label="Select Nepali Date"
+  value={date}
+  onChange={handleDateChange}
+  calenderLocale="ne"
+/>
+```
+
+# ESewaRadio Component
+
+The `ESewaRadio` component is a customizable radio button with a label, styled using `styled-components`. It supports the necessary props for usage in forms and customizable styling.
+
+## 2. Using the Component
+
+After importing the `ESewaRadio` component, you can use it in your React components by passing the necessary props. Below is an example of how to use the radio button:
+
+### Example Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ESewaRadio } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const [isChecked, setChecked] = useState(false);
+
+  return (
+    <div>
+      <ESewaRadio
+        label="Accept Terms and Conditions"
+        name="terms"
+        checked={isChecked}
+        onChange={(checked) => setChecked(checked)}
+      />
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+## Explanation of Props
+
+The `ESewaRadio` component accepts the following props:
+
+### `label`
+- **Type:** `string`
+- **Required:** No
+- **Description:** This prop is used to display the label next to the radio button. It is an optional prop and can be omitted if no label is needed.
+
+```tsx
+<ESewaRadio label="Accept Terms and Conditions" ... />
+```
+## Props
+
+The `ESewaRadio` component accepts the following props:
+
+| Prop        | Type                          | Required | Default Value | Description                                                                                      |
+|-------------|-------------------------------|----------|---------------|--------------------------------------------------------------------------------------------------|
+| `label`     | `string`                       | No       | `undefined`   | The label displayed next to the radio button.                                                     |
+| `name`      | `string`                       | Yes      | N/A           | The name of the radio button, which groups it together with other radio buttons.                  |
+| `onChange`  | `(checked: boolean) => void`   | No       | `undefined`   | Callback function that is triggered when the radio button's checked state changes.               |
+| `checked`   | `boolean`                      | No       | `undefined`   | Determines whether the radio button is selected (`true`) or not (`false`).                       |
+| `labelClass`| `string`                       | No       | `''`          | A custom class applied to the label element for styling.                                          |
+| `className` | `string`                       | No       | `''`          | A custom class applied to the root wrapper element of the radio button component.                |
+
+# ESewaSanitizeHtml Component
+
+The `ESewaSanitizeHtml` component sanitizes HTML content before rendering it in a React component. It ensures that the HTML content is safe and free from malicious code by using the `DOMPurify` library.
+
+## Usage
+
+To use the `ESewaSanitizeHtml` component, simply pass the raw HTML content as the `html` prop. The component will sanitize the content to ensure it is safe for rendering.
+
+### Example:
+
+```tsx
+import React from 'react'
+import { ESewaSanitizeHtml } from './esewa-ui-library'
+
+const MyComponent = () => {
+  const rawHtml = '<p style="color:red">This is <b>sanitized</b> HTML content.</p>'
+  
+  return (
+    <div>
+      <h1>Sanitized HTML Example</h1>
+      <ESewaSanitizeHtml html={rawHtml} />
+    </div>
+  )
+}
+
+export default MyComponent
+```
+
+### In this example:
+
+- **rawHtml**: A string containing raw HTML content, including styles and tags such as `<p>` and `<b>`.
+- **ESewaSanitizeHtml component**: The component receives the `html` prop (in this case, `rawHtml`) and sanitizes it using `DOMPurify`.
+- **Sanitized HTML**: The sanitized HTML content is rendered inside a `div` element, using the `dangerouslySetInnerHTML` property.
+
+By passing the raw HTML to the component, it ensures that any potentially harmful content (like JavaScript or malicious code) is removed, making the content safe to render on the page.
+
+### Props
+
+| Prop    | Type                  | Description                                                                 |
+|---------|-----------------------|-----------------------------------------------------------------------------|
+| `html`  | `string | undefined` | The raw HTML string that needs to be sanitized. It can be `undefined` as well. |
+
+#### Prop Descriptions
+
+- **html**: This is the raw HTML content that you want to sanitize before rendering. It should be a string, and you can optionally pass `undefined` if no HTML is available to render.
+
+# ESewaSkeleton Component
+
+The `ESewaSkeleton` component provides a customizable skeleton loader UI. It is often used as a placeholder while content is loading or being fetched asynchronously. The skeleton loader can be customized to appear as a rectangle or a circle and can be styled with different dimensions.
+
+### Example Usage
+
+```tsx
+import React, { useState, useEffect } from 'react'
+import { ESewaSkeleton } from './esewa-ui-library'
+
+const YourComponent = () => {
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false)
+    }, 2000) // Simulating an API call
+  }, [])
+
+  return (
+    <div>
+      <ESewaSkeleton loading={loading} width="200px" height="20px">
+        <div>Content is loaded</div>
+      </ESewaSkeleton>
+    </div>
+  )
+}
+```
+
+### Props
+
+| Name      | Type         | Default      | Description                                             |
+|-----------|--------------|--------------|---------------------------------------------------------|
+| `loading` | `boolean`    | `false`      | Determines if the skeleton should be shown.             |
+| `width`   | `string`     | `100%`       | Defines the width of the skeleton.                      |
+| `height`  | `string`     | `20px`       | Defines the height of the skeleton.                     |
+| `circle`  | `boolean`    | `false`      | Makes the skeleton circular (applies border-radius 50%). |
+| `className` | `string`   | `''`         | Additional class names for styling.                     |
+| `children` | `React.ReactNode` | `undefined` | Content to render when `loading` is false.              |
+
+
+## ESewaTag Component
+
+The `ESewaTag` component is a flexible and customizable tag component used to display status labels, notifications, or simple tags with optional icons.
+
+### Usage
+
+```tsx
+import React from 'react'
+import { ESewaTag } from './esewa-ui-library'
+import { FaCheckCircle } from 'react-icons/fa'
+
+const YourComponent = () => {
+  const handleTagClick = () => {
+    console.log('Tag clicked!')
+  }
+
+  return (
+    <div>
+      <ESewaTag
+        text="Success Tag"
+        icon={<FaCheckCircle />}
+        variant="success"
+        iconPosition="start"
+        size="normal"
+        onClick={handleTagClick}
+      />
+      
+      <ESewaTag
+        text="Warning Tag"
+        variant="warning"
+        size="small"
+        onClick={handleTagClick}
+      />
+    </div>
+  )
+}
+```
+
+
+### Props
+
+| Name           | Type                 | Default       | Description                                                                 |
+|----------------|----------------------|---------------|-----------------------------------------------------------------------------|
+| `text`         | `string`             | -             | The text content to display inside the tag.                                  |
+| `icon`         | `React.ReactNode`    | `undefined`   | An optional icon to display alongside the text.                              |
+| `variant`      | `'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info'` | `'primary'` | Defines the tag's color scheme. Available variants: `primary`, `secondary`, `danger`, `success`, `warning`, `info`. |
+| `iconPosition` | `'start' | 'end'`     | `'start'`     | Defines the position of the icon. Choose between `start` (before text) or `end` (after text). |
+| `size`         | `'normal' | 'small'`  | `'normal'`    | Defines the size of the tag. Available sizes: `normal`, `small`.              |
+| `onClick`      | `() => void`         | `undefined`   | A function to be triggered when the tag is clicked.                          |
+
+
+## Tooltip Component
+
+The `Tooltip` component provides an interactive tool-tip feature, displaying additional information when hovering over a target element. It is highly customizable, allowing the user to control the position of the tooltip and its appearance.
+
+### Features
+
+- **Positioning**: Tooltips can be displayed on the top, bottom, left, or right of the target element.
+- **Transitions**: Smooth fade-in and fade-out effect with controlled visibility and opacity transitions.
+- **Customization**: Easily customizable styles with CSS variables and positioning options.
+
+### Example Usage
+
+```tsx
+import React, { useState } from 'react'
+import { ESewaTooltip } from './esewa-ui-library'
+
+const TooltipExample = () => {
+
+  return (
+    <ESewaTooltip content='Tooltip on click' position='bottom'>
+      <button>Click Me</button>
+    </ESewaTooltip>
+  )
+}
+
+export default TooltipExample
+```
+
+### Props
+
+| Name             | Type        | Default    | Description                                                        |
+|------------------|-------------|------------|--------------------------------------------------------------------|
+| `position`       | `'top' | 'bottom' | 'left' | 'right'` | `'top'` | Determines where the tooltip will appear in relation to the target element. Available positions: `top`, `bottom`, `left`, `right`. |
+| `content`        | `string`    | -          | The content/text to display inside the tooltip.                     |
+| `target`         | `React.ReactNode` | - | The target element which will trigger the tooltip. |
+| `delay`          | `number`    | `0`        | The delay in milliseconds before the tooltip becomes visible. |
+| `className`      | `string`    | `''`       | Additional class names for styling or overriding default styles. |
+
+### CSS Custom Variables
+
+- `--secondary`: Defines the background color of the tooltip.
+- `--white`: Defines the text color of the tooltip.
+
+
+### Providers
+
+- **ThemeProvider**: `ThemeProvider`
+- **ESewaProvider**: `ESewaProvider`
+- **ESewaPaymentProvider**: `ESewaPaymentProvider`
+
+# Services
+
+## Overview
+
+This library provides a set of services that allow interaction between the merchant app and the host application. These services include authentication, location access, user detail retrieval, media access, and transaction validation.
+
+## Table of Contents
+
+- [Initialization](#initialization)
+- [Service Requests](#service-requests)
+  - [Location Request](#location-request)
+  - [User Detail Request](#user-detail-request)
+  - [Media Access Request](#media-access-request)
+  - [Validate Payment](#validate-payment)
+- [Error Handling](#error-handling)
+
+## Initialization
+
+Before the app loads, it must be initialized to obtain authentication credentials.
+
+### Usage
+
+```tsx
+useEffect(() => {
+    const saveAuthData = (res: { token?: string; scope?: any }): void => {
+      if (!res?.token) {
+        console.warn('Token is missing, skipping storage');
+        return;
+      }
+      sessionStorage.setItem('miniAppAuthToken', res.token);
+      sessionStorage.setItem('miniAppAuthScope', JSON.stringify(res.scope || {}));
+    };
+
+    const initAppCallback = (data: any) => {
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response');
+        }
+        const res = JSON.parse(data);
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object');
+        }
+        if (res?.error_message) {
+          return;
+        }
+        saveAuthData(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    const requestData = {
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=', //your identified key
+      requestType: REQUEST_TYPE_ENUM.INIT_APP,
+      callbackKey: CALLBACK_TYPE_ENUM.INIT_APP_CALLBACK
+    };
+
+    requestFromMiniApp(requestData, CALLBACK_TYPE_ENUM.INIT_APP_CALLBACK, initAppCallback);
+}, []);
+```
+
+### Response Examples
+
+#### Success
+
+```json
+{
+    "token": "SEdcRFVePhYfCRtQJhEiATA8DyVWFFA7Dw8UBEAKH1IkLFwYJAUxPgI%3D",
+    "scope": [
+        "USER_DETAIL_ACCESS",
+        "LOCATION_ACCESS",
+        "MEDIA_ACCESS"
+    ]
+}
+```
+
+#### Error
+
+```json
+{
+    "error_message": "Service is currently unavailable."
+}
+```
+
+## Service Requests
+Merchants can only request services that are included in their granted scope. Before making a request, ensure the service type exists in scope.
+
+#### Location Request
+
+Pass the token received from initialization to request location access.
+
+```tsx
+const onLocationRequestClick = () => {
+    const obj: REQUEST_DATA_TYPE = {
+      requestType: REQUEST_TYPE_ENUM.LOCATION_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.LOCATION_ACCESS_CALLBACK
+    }
+
+    const locationAccessCallBack: any = (data: any) => {
+      console.log('Location Access Response:', data)
+
+      try {
+        if (!data) {
+          throw new Error('Received null or undefined response')
+        }
+        const res = JSON.parse(data)
+        if (!res || typeof res !== 'object') {
+          throw new Error('Parsed response is not a valid object')
+        }
+        if (res?.error_message) {
+          throw new Error('Error res', res.error_message)
+        }
+        setLocationDetail(res) //use this response as needed
+      } catch (error) {
+        console.error('Error parsing response:', error)
+      }
+    }
+
+    requestFromMiniApp(
+      obj,
+      CALLBACK_TYPE_ENUM.LOCATION_ACCESS_CALLBACK,
+      locationAccessCallBack
+    )
+  }
+```
+
+#### User Detail Request
+
+```tsx
+const onUserDetailRequestClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.USER_DETAIL_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      merchant_identifier: 'IAAAAABTOBAbFhAXHhEHAgoXX0FRR1FJJiw3LCwkJzE=',
+      callbackKey: CALLBACK_TYPE_ENUM.USER_DETAIL_ACCESS_CALLBACK
+    };
+
+    const userDetailAccessCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = JSON.parse(data);
+        if (res?.error_message) throw new Error(res.error_message);
+        setUserDetail(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, CALLBACK_TYPE_ENUM.USER_DETAIL_ACCESS_CALLBACK, userDetailAccessCallBack);
+};
+```
+
+#### Media Access Request
+
+```tsx
+const onMediaAccessRequestClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.MEDIA_ACCESS,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.MEDIA_ACCESS_CALLBACK
+    };
+
+    const mediaAccessCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = data;
+        if (res?.error_message) throw new Error(res.error_message);
+        setMediaDetail(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, CALLBACK_TYPE_ENUM.MEDIA_ACCESS_CALLBACK, mediaAccessCallBack);
+};
+```
+
+#### Validate Payment
+Pass token received from initialize request call with respective request type and callback key
+
+```tsx
+const onValidateTransactionClick = () => {
+    const obj = {
+      requestType: REQUEST_TYPE_ENUM.VALIDATE_TRANSACTION,
+      token: sessionStorage.getItem('miniAppAuthToken'),
+      callbackKey: CALLBACK_TYPE_ENUM.VALIDATE_TRANSACTION_CALLBACK
+    };
+
+    const validateTransactionCallBack = (data: any) => {
+      try {
+        if (!data) throw new Error('Received null or undefined response');
+        const res = JSON.parse(data);
+        if (res?.error_message) throw new Error(res.error_message);
+        setTransactionValidateRes(res);
+      } catch (error) {
+        console.error('Error parsing response:', error);
+      }
+    };
+
+    requestFromMiniApp(obj, CALLBACK_TYPE_ENUM.VALIDATE_TRANSACTION_CALLBACK, validateTransactionCallBack);
+};
+```
+## Error Handling
+
+Errors are returned as JSON responses with an `error_message` field.
+
+#### Example
+
+```json
+{
+    "error_message": "Service is currently unavailable"
+}
+```
+
+```json
+{
+    "error_message": "Merchant scope not found"
+}
+```
+---
+
+This document provides a structured approach to interacting with the MiniApp services, ensuring proper initialization and error handling for seamless integration.
+
+### Utilities
+
+- `titleCase`
+- `revertIgnoredCase`
+- `formatText`
+- `formatAmount`
+- `debounce`
+- `reverseCamelCase`
+- `reverseSnakeCase`
+
+### Types
+
+- `REQUEST_TYPE_ENUM`
+
+```tsx
+import {REQUEST_TYPE_ENUM} from 'esewa-ui-library'
+```
+
+```json
+enum REQUEST_TYPE_ENUM {
+  INIT_APP = 'INIT_APP',
+  REQUEST_PAYMENT = 'REQUEST_PAYMENT',
+  USER_DETAIL_ACCESS = 'USER_DETAIL_ACCESS',
+  MEDIA_ACCESS = 'MEDIA_ACCESS',
+  LOCATION_ACCESS = 'LOCATION_ACCESS',
+  VALIDATE_TRANSACTION = 'VALIDATE_TRANSACTION'
+}
+```
+
+- `CALLBACK_TYPE_ENUM`
+
+```tsx
+import {CALLBACK_TYPE_ENUM} from 'esewa-ui-library'
+```
+
+```json
+enum CALLBACK_TYPE_ENUM{
+  INIT_APP_CALLBACK = 'INIT_APP_CALLBACK',
+  REQUEST_PAYMENT_CALLBACK = 'REQUEST_PAYMENT_CALLBACK',
+  USER_DETAIL_ACCESS_CALLBACK = 'USER_DETAIL_ACCESS_CALLBACK',
+  MEDIA_ACCESS_CALLBACK = 'MEDIA_ACCESS_CALLBACK',
+  LOCATION_ACCESS_CALLBACK = 'LOCATION_ACCESS_CALLBACK',
+  VALIDATE_TRANSACTION_CALLBACK = 'VALIDATE_TRANSACTION_CALLBACK'
+}
+```
+
+<!-- ### Hooks
+
+- `useMessage`
+- `useSessionStorage`
+- `useDebounce` -->
+
+## Contributing
+
+Feel free to submit issues and pull requests. Make sure to follow the coding guidelines and write tests where applicable.
+
+## License
+
+This project is licensed under the MIT License.