alope-ui 1.1.3 → 1.1.5

package/README.md

@@ -1727,21 +1727,21 @@ import { Pagination } from "alope-ui";
 
 ### Props
 
-| Prop            | Type                              | Default   | Description                                           |
-| --------------- | --------------------------------- | --------- | ----------------------------------------------------- |
-| `currentPage`   | `number`                          | `required`| Current active page number                            |
-| `onPageChange`  | `(page: number) => void`          | `required`| Callback function when page changes                   |
-| `count`         | `number`                          | `undefined` | Total number of items                               |
-| `pageSize`      | `number`                          | `undefined` | Number of items per page                            |
-| `totalPages`    | `number`                          | `undefined` | Total number of pages (deprecated, use count + pageSize) |
-| `format`        | `'none' \| 'long'`                | `'none'`  | Format for displaying page info                       |
-| `simplified`    | `boolean`                         | `false`   | Show simplified pagination (prev/next only)           |
-| `asLink`        | `boolean`                         | `false`   | Render pagination buttons as links                    |
-| `getPageHref`   | `(page: number) => string`        | `undefined` | Custom href generator for pagination links          |
-| `siblingCount`  | `number`                          | `1`       | Number of page buttons to show on each side           |
-| `prevIcon`      | `React.ReactNode`                 | `'<'`     | Custom icon for previous button                       |
-| `nextIcon`      | `React.ReactNode`                 | `'>'`     | Custom icon for next button                           |
-| `size`          | `'sm' \| 'md' \| 'lg'`            | `'sm'`    | Size variant of pagination buttons                    |
+| Prop           | Type                       | Default     | Description                                              |
+| -------------- | -------------------------- | ----------- | -------------------------------------------------------- |
+| `currentPage`  | `number`                   | `required`  | Current active page number                               |
+| `onPageChange` | `(page: number) => void`   | `required`  | Callback function when page changes                      |
+| `count`        | `number`                   | `undefined` | Total number of items                                    |
+| `pageSize`     | `number`                   | `undefined` | Number of items per page                                 |
+| `totalPages`   | `number`                   | `undefined` | Total number of pages (deprecated, use count + pageSize) |
+| `format`       | `'none' \| 'long'`         | `'none'`    | Format for displaying page info                          |
+| `simplified`   | `boolean`                  | `false`     | Show simplified pagination (prev/next only)              |
+| `asLink`       | `boolean`                  | `false`     | Render pagination buttons as links                       |
+| `getPageHref`  | `(page: number) => string` | `undefined` | Custom href generator for pagination links               |
+| `siblingCount` | `number`                   | `1`         | Number of page buttons to show on each side              |
+| `prevIcon`     | `React.ReactNode`          | `'<'`       | Custom icon for previous button                          |
+| `nextIcon`     | `React.ReactNode`          | `'>'`       | Custom icon for next button                              |
+| `size`         | `'sm' \| 'md' \| 'lg'`     | `'sm'`      | Size variant of pagination buttons                       |
 
 ### Basic Pagination
 
@@ -1784,7 +1784,9 @@ const SimplifiedExample = () => {
 ### Pagination with Format
 
 ```jsx
-{/* None Format - Shows page numbers */}
+{
+  /* None Format - Shows page numbers */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
@@ -1792,9 +1794,11 @@ const SimplifiedExample = () => {
   onPageChange={setCurrentPage}
   format="none"
   simplified
-/>
+/>;
 
-{/* Long Format - Shows item range */}
+{
+  /* Long Format - Shows item range */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
@@ -1802,51 +1806,59 @@ const SimplifiedExample = () => {
   onPageChange={setCurrentPage}
   format="long"
   simplified
-/>
+/>;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Small Size */}
+{
+  /* Small Size */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
   pageSize={10}
   onPageChange={setCurrentPage}
   size="sm"
-/>
+/>;
 
-{/* Medium Size */}
+{
+  /* Medium Size */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
   pageSize={10}
   onPageChange={setCurrentPage}
   size="md"
-/>
+/>;
 
-{/* Large Size */}
+{
+  /* Large Size */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
   pageSize={10}
   onPageChange={setCurrentPage}
   size="lg"
-/>
+/>;
 ```
 
 ### Custom Sibling Count
 
 ```jsx
-{/* Show 2 page buttons on each side */}
+{
+  /* Show 2 page buttons on each side */
+}
 <Pagination
   currentPage={currentPage}
   count={100}
   pageSize={10}
   onPageChange={setCurrentPage}
   siblingCount={2}
-/>
+/>;
 ```
 
 ### Custom Icons
@@ -1861,7 +1873,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
   onPageChange={setCurrentPage}
   prevIcon={<ChevronLeft size={16} />}
   nextIcon={<ChevronRight size={16} />}
-/>
+/>;
 ```
 
 ### As Links
@@ -1880,12 +1892,14 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 ### Using TotalPages (Legacy)
 
 ```jsx
-{/* This approach is deprecated, prefer using count + pageSize */}
+{
+  /* This approach is deprecated, prefer using count + pageSize */
+}
 <Pagination
   currentPage={currentPage}
   totalPages={10}
   onPageChange={setCurrentPage}
-/>
+/>;
 ```
 
 ---
@@ -1903,26 +1917,26 @@ import type { Column } from "alope-ui";
 
 ### Props
 
-| Prop                   | Type                              | Default    | Description                                    |
-| ---------------------- | --------------------------------- | ---------- | ---------------------------------------------- |
-| `columns`              | `Column<T>[]`                     | `required` | Array of column configurations                 |
-| `data`                 | `T[]`                             | `required` | Array of data objects to display               |
-| `striped`              | `boolean`                         | `false`    | Enable alternating row colors                  |
-| `stripeColor`          | `string`                          | `undefined`| Custom color for striped rows                  |
-| `headerClassName`      | `string`                          | `""`       | CSS class for table header                     |
-| `dataColumnClassName`  | `string`                          | `""`       | CSS class for data cells                       |
-| `dataRowClassName`     | `string`                          | `""`       | CSS class for data rows                        |
-| `tableClassName`       | `string`                          | `""`       | CSS class for table element                    |
-| `captionClassName`     | `string`                          | `""`       | CSS class for caption                          |
-| `containerClassName`   | `string`                          | `""`       | CSS class for container                        |
-| `customEmptyData`      | `React.ReactNode`                 | `undefined`| Custom message when no data                    |
-| `size`                 | `'sm' \| 'md' \| 'lg'`            | `'md'`     | Size variant of table                          |
-| `caption`              | `string`                          | `undefined`| Table caption text                             |
-| `captionPosition`      | `'top' \| 'bottom'`               | `'bottom'` | Position of caption                            |
-| `stickyHeader`         | `boolean`                         | `false`    | Make header sticky on scroll                   |
-| `selectable`           | `boolean`                         | `false`    | Enable row selection with checkboxes           |
-| `onSelectionChange`    | `(selected: T[]) => void`         | `undefined`| Callback when selection changes                |
-| `selectedRows`         | `T[]`                             | `[]`       | Array of selected rows                         |
+| Prop                  | Type                      | Default     | Description                          |
+| --------------------- | ------------------------- | ----------- | ------------------------------------ |
+| `columns`             | `Column<T>[]`             | `required`  | Array of column configurations       |
+| `data`                | `T[]`                     | `required`  | Array of data objects to display     |
+| `striped`             | `boolean`                 | `false`     | Enable alternating row colors        |
+| `stripeColor`         | `string`                  | `undefined` | Custom color for striped rows        |
+| `headerClassName`     | `string`                  | `""`        | CSS class for table header           |
+| `dataColumnClassName` | `string`                  | `""`        | CSS class for data cells             |
+| `dataRowClassName`    | `string`                  | `""`        | CSS class for data rows              |
+| `tableClassName`      | `string`                  | `""`        | CSS class for table element          |
+| `captionClassName`    | `string`                  | `""`        | CSS class for caption                |
+| `containerClassName`  | `string`                  | `""`        | CSS class for container              |
+| `customEmptyData`     | `React.ReactNode`         | `undefined` | Custom message when no data          |
+| `size`                | `'sm' \| 'md' \| 'lg'`    | `'md'`      | Size variant of table                |
+| `caption`             | `string`                  | `undefined` | Table caption text                   |
+| `captionPosition`     | `'top' \| 'bottom'`       | `'bottom'`  | Position of caption                  |
+| `stickyHeader`        | `boolean`                 | `false`     | Make header sticky on scroll         |
+| `selectable`          | `boolean`                 | `false`     | Enable row selection with checkboxes |
+| `onSelectionChange`   | `(selected: T[]) => void` | `undefined` | Callback when selection changes      |
+| `selectedRows`        | `T[]`                     | `[]`        | Array of selected rows               |
 
 ### Column Type
 
@@ -1941,10 +1955,10 @@ import { Table } from "alope-ui";
 import type { Column } from "alope-ui";
 
 type User = {
-  id: number;
-  name: string;
-  email: string;
-  role: string;
+  id: number,
+  name: string,
+  email: string,
+  role: string,
 };
 
 const columns: Column<User>[] = [
@@ -1967,28 +1981,36 @@ const BasicExample = () => {
 ### Striped Table
 
 ```jsx
-<Table columns={columns} data={data} striped />
+<Table columns={columns} data={data} striped />;
 
-{/* With custom stripe color */}
+{
+  /* With custom stripe color */
+}
 <Table
   columns={columns}
   data={data}
   striped
   stripeColor="bg-blue-50 dark:bg-blue-900"
-/>
+/>;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Small Size */}
-<Table columns={columns} data={data} size="sm" />
+{
+  /* Small Size */
+}
+<Table columns={columns} data={data} size="sm" />;
 
-{/* Medium Size */}
-<Table columns={columns} data={data} size="md" />
+{
+  /* Medium Size */
+}
+<Table columns={columns} data={data} size="md" />;
 
-{/* Large Size */}
-<Table columns={columns} data={data} size="lg" />
+{
+  /* Large Size */
+}
+<Table columns={columns} data={data} size="lg" />;
 ```
 
 ### Custom Rendering
@@ -2046,21 +2068,25 @@ const SelectableExample = () => {
 ### With Caption
 
 ```jsx
-{/* Caption at bottom */}
+{
+  /* Caption at bottom */
+}
 <Table
   columns={columns}
   data={data}
   caption="User Management Table"
   captionPosition="bottom"
-/>
+/>;
 
-{/* Caption at top */}
+{
+  /* Caption at top */
+}
 <Table
   columns={columns}
   data={data}
   caption="User Management Table"
   captionPosition="top"
-/>
+/>;
 ```
 
 ### Custom Empty State
@@ -2173,19 +2199,19 @@ import { Tooltip } from "alope-ui";
 
 ### Props
 
-| Prop                | Type                                      | Default                           | Description                              |
-| ------------------- | ----------------------------------------- | --------------------------------- | ---------------------------------------- |
-| `children`          | `React.ReactNode`                         | `required`                        | Element that triggers the tooltip        |
-| `text`              | `string`                                  | `required`                        | Text content of the tooltip              |
-| `showArrow`         | `boolean`                                 | `true`                            | Show arrow pointing to trigger element   |
-| `placement`         | `'top' \| 'bottom' \| 'left' \| 'right'`  | `'top'`                           | Position of tooltip relative to trigger  |
-| `offset`            | `number`                                  | `8`                               | Distance from trigger element (in px)    |
-| `bgColor`           | `string`                                  | `'bg-gray-800 dark:bg-gray-600'`  | Background color class                   |
-| `isOpen`            | `boolean`                                 | `undefined`                       | Controlled visibility state              |
-| `onOpenChange`      | `(open: boolean) => void`                 | `undefined`                       | Callback when visibility changes         |
-| `disabled`          | `boolean`                                 | `false`                           | Disable tooltip functionality            |
-| `animationDuration` | `number`                                  | `300`                             | Animation duration (in ms)               |
-| `delay`             | `number`                                  | `700`                             | Delay before showing tooltip (in ms)     |
+| Prop                | Type                                     | Default                          | Description                             |
+| ------------------- | ---------------------------------------- | -------------------------------- | --------------------------------------- |
+| `children`          | `React.ReactNode`                        | `required`                       | Element that triggers the tooltip       |
+| `text`              | `string`                                 | `required`                       | Text content of the tooltip             |
+| `showArrow`         | `boolean`                                | `true`                           | Show arrow pointing to trigger element  |
+| `placement`         | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`                          | Position of tooltip relative to trigger |
+| `offset`            | `number`                                 | `8`                              | Distance from trigger element (in px)   |
+| `bgColor`           | `string`                                 | `'bg-gray-800 dark:bg-gray-600'` | Background color class                  |
+| `isOpen`            | `boolean`                                | `undefined`                      | Controlled visibility state             |
+| `onOpenChange`      | `(open: boolean) => void`                | `undefined`                      | Callback when visibility changes        |
+| `disabled`          | `boolean`                                | `false`                          | Disable tooltip functionality           |
+| `animationDuration` | `number`                                 | `300`                            | Animation duration (in ms)              |
+| `delay`             | `number`                                 | `700`                            | Delay before showing tooltip (in ms)    |
 
 ### Basic Tooltip
 
@@ -2206,25 +2232,33 @@ const BasicExample = () => {
 ### Placement
 
 ```jsx
-{/* Top Placement */}
+{
+  /* Top Placement */
+}
 <Tooltip text="Tooltip on top" placement="top">
   <button>Top</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Bottom Placement */}
+{
+  /* Bottom Placement */
+}
 <Tooltip text="Tooltip on bottom" placement="bottom">
   <button>Bottom</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Left Placement */}
+{
+  /* Left Placement */
+}
 <Tooltip text="Tooltip on left" placement="left">
   <button>Left</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Right Placement */}
+{
+  /* Right Placement */
+}
 <Tooltip text="Tooltip on right" placement="right">
   <button>Right</button>
-</Tooltip>
+</Tooltip>;
 ```
 
 ### Without Arrow
@@ -2238,15 +2272,19 @@ const BasicExample = () => {
 ### Custom Offset
 
 ```jsx
-{/* Small offset */}
+{
+  /* Small offset */
+}
 <Tooltip text="Close to element" offset={4}>
   <button>Small Offset</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Large offset */}
+{
+  /* Large offset */
+}
 <Tooltip text="Far from element" offset={16}>
   <button>Large Offset</button>
-</Tooltip>
+</Tooltip>;
 ```
 
 ### Custom Background Color
@@ -2280,9 +2318,7 @@ const ControlledExample = () => {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
       >
-        <button onClick={() => setIsOpen(!isOpen)}>
-          Click to toggle
-        </button>
+        <button onClick={() => setIsOpen(!isOpen)}>Click to toggle</button>
       </Tooltip>
     </div>
   );
@@ -2292,29 +2328,37 @@ const ControlledExample = () => {
 ### Custom Animation
 
 ```jsx
-{/* Fast animation */}
+{
+  /* Fast animation */
+}
 <Tooltip text="Fast animation" animationDuration={150}>
   <button>Fast</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Slow animation */}
+{
+  /* Slow animation */
+}
 <Tooltip text="Slow animation" animationDuration={600}>
   <button>Slow</button>
-</Tooltip>
+</Tooltip>;
 ```
 
 ### Custom Delay
 
 ```jsx
-{/* No delay */}
+{
+  /* No delay */
+}
 <Tooltip text="Instant tooltip" delay={0}>
   <button>No Delay</button>
-</Tooltip>
+</Tooltip>;
 
-{/* Long delay */}
+{
+  /* Long delay */
+}
 <Tooltip text="Patient tooltip" delay={1500}>
   <button>Long Delay</button>
-</Tooltip>
+</Tooltip>;
 ```
 
 ### Disabled Tooltip
@@ -2396,13 +2440,13 @@ import { Spinner } from "alope-ui";
 
 ### Props
 
-| Prop        | Type                                                            | Default   | Description                           |
-| ----------- | --------------------------------------------------------------- | --------- | ------------------------------------- |
-| `size`      | `'sm' \| 'md' \| 'lg'`                                          | `'md'`    | Size of the spinner                   |
+| Prop        | Type                                                                      | Default     | Description                     |
+| ----------- | ------------------------------------------------------------------------- | ----------- | ------------------------------- |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`      | Size of the spinner             |
 | `color`     | `'primary' \| 'error' \| 'warning' \| 'success' \| 'info' \| 'secondary'` | `'primary'` | Color variant of the spinner    |
-| `className` | `string`                                                        | `""`      | Additional CSS classes                |
-| `duration`  | `number`                                                        | `1000`    | Animation duration (in ms)            |
-| `thickness` | `number`                                                        | `undefined` | Custom border thickness (in px)     |
+| `className` | `string`                                                                  | `""`        | Additional CSS classes          |
+| `duration`  | `number`                                                                  | `1000`      | Animation duration (in ms)      |
+| `thickness` | `number`                                                                  | `undefined` | Custom border thickness (in px) |
 
 ### Basic Spinner
 
@@ -2417,56 +2461,82 @@ const BasicExample = () => {
 ### Sizes
 
 ```jsx
-{/* Small Size */}
-<Spinner size="sm" />
+{
+  /* Small Size */
+}
+<Spinner size="sm" />;
 
-{/* Medium Size */}
-<Spinner size="md" />
+{
+  /* Medium Size */
+}
+<Spinner size="md" />;
 
-{/* Large Size */}
-<Spinner size="lg" />
+{
+  /* Large Size */
+}
+<Spinner size="lg" />;
 ```
 
 ### Colors
 
 ```jsx
-{/* Primary Color */}
-<Spinner color="primary" />
+{
+  /* Primary Color */
+}
+<Spinner color="primary" />;
 
-{/* Error Color */}
-<Spinner color="error" />
+{
+  /* Error Color */
+}
+<Spinner color="error" />;
 
-{/* Warning Color */}
-<Spinner color="warning" />
+{
+  /* Warning Color */
+}
+<Spinner color="warning" />;
 
-{/* Success Color */}
-<Spinner color="success" />
+{
+  /* Success Color */
+}
+<Spinner color="success" />;
 
-{/* Info Color */}
-<Spinner color="info" />
+{
+  /* Info Color */
+}
+<Spinner color="info" />;
 
-{/* Secondary Color */}
-<Spinner color="secondary" />
+{
+  /* Secondary Color */
+}
+<Spinner color="secondary" />;
 ```
 
 ### Custom Duration
 
 ```jsx
-{/* Fast animation */}
-<Spinner duration={500} />
+{
+  /* Fast animation */
+}
+<Spinner duration={500} />;
 
-{/* Slow animation */}
-<Spinner duration={2000} />
+{
+  /* Slow animation */
+}
+<Spinner duration={2000} />;
 ```
 
 ### Custom Thickness
 
 ```jsx
-{/* Thin spinner */}
-<Spinner thickness={1} />
+{
+  /* Thin spinner */
+}
+<Spinner thickness={1} />;
 
-{/* Thick spinner */}
-<Spinner thickness={6} />
+{
+  /* Thick spinner */
+}
+<Spinner thickness={6} />;
 ```
 
 ### Combined Customization
@@ -2596,14 +2666,14 @@ import { Skeleton } from "alope-ui";
 
 ### Props
 
-| Prop        | Type                      | Default      | Description                                    |
-| ----------- | ------------------------- | ------------ | ---------------------------------------------- |
-| `width`     | `string`                  | `undefined`  | Width of the skeleton (CSS value)              |
-| `height`    | `string`                  | `undefined`  | Height of the skeleton (CSS value)             |
-| `rounded`   | `boolean`                 | `false`      | Apply rounded shape (full circle/pill)         |
-| `isLoading` | `boolean`                 | `true`       | Show skeleton or actual content                |
-| `children`  | `React.ReactNode`         | `undefined`  | Content to render when not loading             |
-| `animode`   | `'shimmer' \| 'flash'`    | `'flash'`    | Animation mode for the skeleton                |
+| Prop        | Type                   | Default     | Description                            |
+| ----------- | ---------------------- | ----------- | -------------------------------------- |
+| `width`     | `string`               | `undefined` | Width of the skeleton (CSS value)      |
+| `height`    | `string`               | `undefined` | Height of the skeleton (CSS value)     |
+| `rounded`   | `boolean`              | `false`     | Apply rounded shape (full circle/pill) |
+| `isLoading` | `boolean`              | `true`      | Show skeleton or actual content        |
+| `children`  | `React.ReactNode`      | `undefined` | Content to render when not loading     |
+| `animode`   | `'shimmer' \| 'flash'` | `'flash'`   | Animation mode for the skeleton        |
 
 ### Basic Skeleton
 
@@ -2638,37 +2708,53 @@ const SkeletonWithChildren = () => {
 ### Animation Modes
 
 ```jsx
-{/* Flash animation */}
-<Skeleton width="200px" height="20px" animode="flash" />
+{
+  /* Flash animation */
+}
+<Skeleton width="200px" height="20px" animode="flash" />;
 
-{/* Shimmer animation */}
-<Skeleton width="200px" height="20px" animode="shimmer" />
+{
+  /* Shimmer animation */
+}
+<Skeleton width="200px" height="20px" animode="shimmer" />;
 ```
 
 ### Rounded Skeleton
 
 ```jsx
-{/* Rounded rectangle */}
-<Skeleton width="100px" height="100px" rounded />
+{
+  /* Rounded rectangle */
+}
+<Skeleton width="100px" height="100px" rounded />;
 
-{/* Avatar skeleton */}
-<Skeleton width="48px" height="48px" rounded />
+{
+  /* Avatar skeleton */
+}
+<Skeleton width="48px" height="48px" rounded />;
 ```
 
 ### Different Sizes
 
 ```jsx
-{/* Small */}
-<Skeleton width="100px" height="16px" />
+{
+  /* Small */
+}
+<Skeleton width="100px" height="16px" />;
 
-{/* Medium */}
-<Skeleton width="200px" height="20px" />
+{
+  /* Medium */
+}
+<Skeleton width="200px" height="20px" />;
 
-{/* Large */}
-<Skeleton width="300px" height="24px" />
+{
+  /* Large */
+}
+<Skeleton width="300px" height="24px" />;
 
-{/* Full width */}
-<Skeleton width="100%" height="20px" />
+{
+  /* Full width */
+}
+<Skeleton width="100%" height="20px" />;
 ```
 
 ### Text Skeleton
@@ -2783,15 +2869,15 @@ import { useState, useEffect } from "react";
 import { Skeleton } from "alope-ui";
 
 type User = {
-  id: number;
-  name: string;
-  email: string;
-  avatar: string;
+  id: number,
+  name: string,
+  email: string,
+  avatar: string,
 };
 
 const UserProfile = () => {
   const [isLoading, setIsLoading] = useState(true);
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = (useState < User) | (null > null);
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -2875,15 +2961,15 @@ import { Toggle } from "alope-ui";
 
 ### Props
 
-| Prop                | Type                                                           | Default     | Description                              |
-| ------------------- | -------------------------------------------------------------- | ----------- | ---------------------------------------- |
-| `variant`           | `'primary' \| 'error' \| 'warning' \| 'success' \| 'info' \| 'secondary'` | `'primary'` | Color variant of the toggle              |
-| `customSize`        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Size of the toggle switch                |
-| `thumbShape`        | `'stadium' \| 'rounded'`                                       | `'stadium'` | Shape of the toggle thumb                |
-| `label`             | `string`                                                       | `undefined` | Label text displayed next to toggle      |
-| `wrapperClassName`  | `string`                                                       | `""`        | CSS class for wrapper element            |
-| `labelClassName`    | `string`                                                       | `""`        | CSS class for label text                 |
-| `...props`          | `InputHTMLAttributes<HTMLInputElement>`                        | -           | All standard HTML input attributes       |
+| Prop               | Type                                                                      | Default     | Description                         |
+| ------------------ | ------------------------------------------------------------------------- | ----------- | ----------------------------------- |
+| `variant`          | `'primary' \| 'error' \| 'warning' \| 'success' \| 'info' \| 'secondary'` | `'primary'` | Color variant of the toggle         |
+| `customSize`       | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`      | Size of the toggle switch           |
+| `thumbShape`       | `'stadium' \| 'rounded'`                                                  | `'stadium'` | Shape of the toggle thumb           |
+| `label`            | `string`                                                                  | `undefined` | Label text displayed next to toggle |
+| `wrapperClassName` | `string`                                                                  | `""`        | CSS class for wrapper element       |
+| `labelClassName`   | `string`                                                                  | `""`        | CSS class for label text            |
+| `...props`         | `InputHTMLAttributes<HTMLInputElement>`                                   | -           | All standard HTML input attributes  |
 
 ### Basic Toggle
 
@@ -2916,101 +3002,123 @@ const BasicExample = () => {
 ### Variants
 
 ```jsx
-{/* Primary Variant */}
+{
+  /* Primary Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="primary"
   label="Primary"
-/>
+/>;
 
-{/* Error Variant */}
+{
+  /* Error Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="error"
   label="Error"
-/>
+/>;
 
-{/* Warning Variant */}
+{
+  /* Warning Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="warning"
   label="Warning"
-/>
+/>;
 
-{/* Success Variant */}
+{
+  /* Success Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="success"
   label="Success"
-/>
+/>;
 
-{/* Info Variant */}
+{
+  /* Info Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="info"
   label="Info"
-/>
+/>;
 
-{/* Secondary Variant */}
+{
+  /* Secondary Variant */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   variant="secondary"
   label="Secondary"
-/>
+/>;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Small Size */}
+{
+  /* Small Size */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   customSize="sm"
   label="Small"
-/>
+/>;
 
-{/* Medium Size */}
+{
+  /* Medium Size */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   customSize="md"
   label="Medium"
-/>
+/>;
 
-{/* Large Size */}
+{
+  /* Large Size */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   customSize="lg"
   label="Large"
-/>
+/>;
 ```
 
 ### Thumb Shapes
 
 ```jsx
-{/* Stadium Shape (Fully Rounded) */}
+{
+  /* Stadium Shape (Fully Rounded) */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   thumbShape="stadium"
   label="Stadium"
-/>
+/>;
 
-{/* Rounded Shape (Slightly Rounded) */}
+{
+  /* Rounded Shape (Slightly Rounded) */
+}
 <Toggle
   checked={isChecked}
   onChange={(e) => setIsChecked(e.target.checked)}
   thumbShape="rounded"
   label="Rounded"
-/>
+/>;
 ```
 
 ### Disabled State
@@ -3049,34 +3157,35 @@ const CompleteExample = () => {
     autoSave: false,
   });
 
-  const handleToggle = (key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSettings(prev => ({
-      ...prev,
-      [key]: e.target.checked
-    }));
-  };
+  const handleToggle =
+    (key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSettings((prev) => ({
+        ...prev,
+        [key]: e.target.checked,
+      }));
+    };
 
   return (
     <div className="space-y-4">
       <Toggle
         checked={settings.notifications}
-        onChange={handleToggle('notifications')}
+        onChange={handleToggle("notifications")}
         variant="primary"
         customSize="md"
         label="Enable notifications"
       />
-      
+
       <Toggle
         checked={settings.darkMode}
-        onChange={handleToggle('darkMode')}
+        onChange={handleToggle("darkMode")}
         variant="secondary"
         customSize="md"
         label="Dark mode"
       />
-      
+
       <Toggle
         checked={settings.autoSave}
-        onChange={handleToggle('autoSave')}
+        onChange={handleToggle("autoSave")}
         variant="success"
         customSize="md"
         label="Auto-save documents"
@@ -3100,17 +3209,17 @@ import { FileUpload } from "alope-ui";
 
 ### Props
 
-| Prop             | Type                           | Default      | Description                                      |
-| ---------------- | ------------------------------ | ------------ | ------------------------------------------------ |
-| `onFilesChange`  | `(files: File[]) => void`      | `required`   | Callback fired when files change                 |
-| `acceptedFiles`  | `string`                       | `'image/*'`  | Accepted file types (MIME types or extensions)   |
-| `maxFiles`       | `number`                       | `1`          | Maximum number of files allowed                  |
-| `maxKiloByte`    | `number`                       | `2048`       | Maximum file size in kilobytes                   |
-| `mode`           | `'dropzone' \| 'textinput'`    | `'dropzone'` | Display mode of the file upload                  |
-| `clearable`      | `boolean`                      | `true`       | Show clear button on file previews               |
-| `inputLabel`     | `string`                       | `undefined`  | Label for text input mode button                 |
-| `helperText`     | `string`                       | `undefined`  | Helper text displayed below the input            |
-| `mediaCapture`   | `'user' \| 'environment'`      | `undefined`  | Camera capture mode (for mobile devices)         |
+| Prop            | Type                        | Default      | Description                                    |
+| --------------- | --------------------------- | ------------ | ---------------------------------------------- |
+| `onFilesChange` | `(files: File[]) => void`   | `required`   | Callback fired when files change               |
+| `acceptedFiles` | `string`                    | `'image/*'`  | Accepted file types (MIME types or extensions) |
+| `maxFiles`      | `number`                    | `1`          | Maximum number of files allowed                |
+| `maxKiloByte`   | `number`                    | `2048`       | Maximum file size in kilobytes                 |
+| `mode`          | `'dropzone' \| 'textinput'` | `'dropzone'` | Display mode of the file upload                |
+| `clearable`     | `boolean`                   | `true`       | Show clear button on file previews             |
+| `inputLabel`    | `string`                    | `undefined`  | Label for text input mode button               |
+| `helperText`    | `string`                    | `undefined`  | Helper text displayed below the input          |
+| `mediaCapture`  | `'user' \| 'environment'`   | `undefined`  | Camera capture mode (for mobile devices)       |
 
 ### Basic FileUpload (Dropzone Mode)
 
@@ -3152,53 +3261,55 @@ const BasicExample = () => {
 ### Custom File Types
 
 ```jsx
-{/* Accept only images */}
-<FileUpload
-  acceptedFiles="image/*"
-  onFilesChange={setFiles}
-/>
+{
+  /* Accept only images */
+}
+<FileUpload acceptedFiles="image/*" onFilesChange={setFiles} />;
 
-{/* Accept specific image types */}
+{
+  /* Accept specific image types */
+}
 <FileUpload
   acceptedFiles="image/png, image/jpeg, image/jpg"
   onFilesChange={setFiles}
-/>
+/>;
 
-{/* Accept PDFs */}
-<FileUpload
-  acceptedFiles="application/pdf"
-  onFilesChange={setFiles}
-/>
+{
+  /* Accept PDFs */
+}
+<FileUpload acceptedFiles="application/pdf" onFilesChange={setFiles} />;
 
-{/* Accept by file extension */}
-<FileUpload
-  acceptedFiles=".pdf, .doc, .docx"
-  onFilesChange={setFiles}
-/>
+{
+  /* Accept by file extension */
+}
+<FileUpload acceptedFiles=".pdf, .doc, .docx" onFilesChange={setFiles} />;
 
-{/* Accept multiple types */}
-<FileUpload
-  acceptedFiles="image/*, .pdf, .doc"
-  onFilesChange={setFiles}
-/>
+{
+  /* Accept multiple types */
+}
+<FileUpload acceptedFiles="image/*, .pdf, .doc" onFilesChange={setFiles} />;
 ```
 
 ### File Size Limit
 
 ```jsx
-{/* 5MB limit */}
+{
+  /* 5MB limit */
+}
 <FileUpload
   maxKiloByte={5120}
   onFilesChange={setFiles}
   helperText="Maximum file size: 5MB"
-/>
+/>;
 
-{/* 500KB limit */}
+{
+  /* 500KB limit */
+}
 <FileUpload
   maxKiloByte={512}
   onFilesChange={setFiles}
   helperText="Maximum file size: 500KB"
-/>
+/>;
 ```
 
 ### With Helper Text
@@ -3213,28 +3324,29 @@ const BasicExample = () => {
 ### Camera Capture (Mobile)
 
 ```jsx
-{/* Use front camera */}
+{
+  /* Use front camera */
+}
 <FileUpload
   acceptedFiles="image/*"
   mediaCapture="user"
   onFilesChange={setFiles}
-/>
+/>;
 
-{/* Use back camera */}
+{
+  /* Use back camera */
+}
 <FileUpload
   acceptedFiles="image/*"
   mediaCapture="environment"
   onFilesChange={setFiles}
-/>
+/>;
 ```
 
 ### Non-clearable Files
 
 ```jsx
-<FileUpload
-  onFilesChange={setFiles}
-  clearable={false}
-/>
+<FileUpload onFilesChange={setFiles} clearable={false} />
 ```
 
 ### Complete Example with Dropzone Mode
@@ -3254,7 +3366,7 @@ const DropzoneExample = () => {
   return (
     <div className="max-w-2xl mx-auto p-6">
       <h2 className="text-xl font-bold mb-4">Upload Your Images</h2>
-      
+
       <FileUpload
         mode="dropzone"
         acceptedFiles="image/png, image/jpeg, image/jpg"
@@ -3263,7 +3375,7 @@ const DropzoneExample = () => {
         onFilesChange={handleFilesChange}
         helperText="Upload up to 3 images. Max 5MB per file."
       />
-      
+
       {uploadedFiles.length > 0 && (
         <div className="mt-4">
           <p className="font-medium">Selected files:</p>
@@ -3291,7 +3403,7 @@ const TextInputExample = () => {
   return (
     <div className="max-w-2xl mx-auto p-6">
       <h2 className="text-xl font-bold mb-4">Upload Documents</h2>
-      
+
       <FileUpload
         mode="textinput"
         acceptedFiles=".pdf, .doc, .docx"
@@ -3321,13 +3433,13 @@ import type { TextareaType } from "alope-ui";
 
 ### Props
 
-| Prop              | Type                                          | Default | Description                                      |
-| ----------------- | --------------------------------------------- | ------- | ------------------------------------------------ |
-| `label`           | `string`                                      | `undefined` | Label text displayed above textarea          |
-| `error`           | `string`                                      | `undefined` | Error message displayed below textarea       |
-| `autoResize`      | `boolean`                                     | `false` | Enable auto-resize based on content              |
-| `customClassName` | `string`                                      | `""`    | Custom CSS class for textarea element            |
-| `...props`        | `InputHTMLAttributes<HTMLTextAreaElement>`    | -       | All standard HTML textarea attributes            |
+| Prop              | Type                                       | Default     | Description                            |
+| ----------------- | ------------------------------------------ | ----------- | -------------------------------------- |
+| `label`           | `string`                                   | `undefined` | Label text displayed above textarea    |
+| `error`           | `string`                                   | `undefined` | Error message displayed below textarea |
+| `autoResize`      | `boolean`                                  | `false`     | Enable auto-resize based on content    |
+| `customClassName` | `string`                                   | `""`        | Custom CSS class for textarea element  |
+| `...props`        | `InputHTMLAttributes<HTMLTextAreaElement>` | -           | All standard HTML textarea attributes  |
 
 ### Basic Textarea
 
@@ -3381,7 +3493,7 @@ const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
   onChange={handleChange}
   error={error}
   placeholder="Enter at least 10 characters..."
-/>
+/>;
 ```
 
 ### Auto-Resize Textarea
@@ -3442,12 +3554,12 @@ const CompleteExample = () => {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (feedback.length < 20) {
       setError("Feedback must be at least 20 characters");
       return;
     }
-    
+
     console.log("Feedback submitted:", feedback);
     setFeedback("");
     setError("");
@@ -3463,7 +3575,7 @@ const CompleteExample = () => {
   return (
     <form onSubmit={handleSubmit} className="max-w-lg mx-auto p-6">
       <h2 className="text-xl font-bold mb-4">Share Your Feedback</h2>
-      
+
       <Textarea
         label="Feedback"
         name="feedback"
@@ -3474,11 +3586,11 @@ const CompleteExample = () => {
         placeholder="Tell us what you think... (minimum 20 characters)"
         customClassName="mb-4"
       />
-      
+
       <p className="text-sm text-gray-500 mb-4">
         Character count: {feedback.length}
       </p>
-      
+
       <button
         type="submit"
         className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
@@ -3500,17 +3612,16 @@ const FormExample = () => {
   const [formData, setFormData] = useState({
     name: "",
     message: "",
-    comments: ""
+    comments: "",
   });
 
-  const handleChange = (field: string) => (
-    e: React.ChangeEvent<HTMLTextAreaElement>
-  ) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: e.target.value
-    }));
-  };
+  const handleChange =
+    (field: string) => (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: e.target.value,
+      }));
+    };
 
   return (
     <div className="space-y-4 max-w-lg mx-auto p-6">
@@ -3518,16 +3629,16 @@ const FormExample = () => {
         label="Message"
         name="message"
         value={formData.message}
-        onChange={handleChange('message')}
+        onChange={handleChange("message")}
         placeholder="Your message..."
         rows={4}
       />
-      
+
       <Textarea
         label="Additional Comments"
         name="comments"
         value={formData.comments}
-        onChange={handleChange('comments')}
+        onChange={handleChange("comments")}
         placeholder="Any additional comments..."
         autoResize
       />
@@ -3551,17 +3662,17 @@ import type { Tabs as TabType } from "alope-ui";
 
 ### Props
 
-| Prop                 | Type                                                | Default  | Description                              |
-| -------------------- | --------------------------------------------------- | -------- | ---------------------------------------- |
-| `tabs`               | `TabType[]`                                         | `required` | Array of tab objects                   |
-| `variant`            | `'line' \| 'solid' \| 'subtle' \| 'inline' \| 'outline' \| 'plain'` | `'line'` | Visual variant style    |
-| `fitted`             | `boolean`                                           | `false`  | Make tabs fill available width           |
-| `wrapperClassName`   | `string`                                            | `""`     | Wrapper container CSS class              |
-| `buttonClassName`    | `string`                                            | `""`     | Tab button CSS class                     |
-| `activeClassName`    | `string`                                            | `""`     | Active tab CSS class                     |
-| `inactiveClassName`  | `string`                                            | `""`     | Inactive tab CSS class                   |
-| `activeTab`          | `number`                                            | `undefined` | Controlled active tab index           |
-| `onTabChange`        | `(index: number) => void`                           | `undefined` | Callback when tab changes             |
+| Prop                | Type                                                                | Default     | Description                    |
+| ------------------- | ------------------------------------------------------------------- | ----------- | ------------------------------ |
+| `tabs`              | `TabType[]`                                                         | `required`  | Array of tab objects           |
+| `variant`           | `'line' \| 'solid' \| 'subtle' \| 'inline' \| 'outline' \| 'plain'` | `'line'`    | Visual variant style           |
+| `fitted`            | `boolean`                                                           | `false`     | Make tabs fill available width |
+| `wrapperClassName`  | `string`                                                            | `""`        | Wrapper container CSS class    |
+| `buttonClassName`   | `string`                                                            | `""`        | Tab button CSS class           |
+| `activeClassName`   | `string`                                                            | `""`        | Active tab CSS class           |
+| `inactiveClassName` | `string`                                                            | `""`        | Inactive tab CSS class         |
+| `activeTab`         | `number`                                                            | `undefined` | Controlled active tab index    |
+| `onTabChange`       | `(index: number) => void`                                           | `undefined` | Callback when tab changes      |
 
 ### Tab Object Type
 
@@ -3571,7 +3682,7 @@ type Tabs = {
   content: React.ReactNode;
   disabled?: boolean;
   link?: string;
-}
+};
 ```
 
 ### Basic Tabs
@@ -3602,30 +3713,44 @@ const BasicExample = () => {
 ### Variants
 
 ```jsx
-{/* Line Variant */}
-<Tabs tabs={tabs} variant="line" />
+{
+  /* Line Variant */
+}
+<Tabs tabs={tabs} variant="line" />;
 
-{/* Solid Variant */}
-<Tabs tabs={tabs} variant="solid" />
+{
+  /* Solid Variant */
+}
+<Tabs tabs={tabs} variant="solid" />;
 
-{/* Subtle Variant */}
-<Tabs tabs={tabs} variant="subtle" />
+{
+  /* Subtle Variant */
+}
+<Tabs tabs={tabs} variant="subtle" />;
 
-{/* Inline Variant */}
-<Tabs tabs={tabs} variant="inline" />
+{
+  /* Inline Variant */
+}
+<Tabs tabs={tabs} variant="inline" />;
 
-{/* Outline Variant */}
-<Tabs tabs={tabs} variant="outline" />
+{
+  /* Outline Variant */
+}
+<Tabs tabs={tabs} variant="outline" />;
 
-{/* Plain Variant */}
-<Tabs tabs={tabs} variant="plain" />
+{
+  /* Plain Variant */
+}
+<Tabs tabs={tabs} variant="plain" />;
 ```
 
 ### Fitted Tabs
 
 ```jsx
-{/* Tabs will fill the available width equally */}
-<Tabs tabs={tabs} fitted />
+{
+  /* Tabs will fill the available width equally */
+}
+<Tabs tabs={tabs} fitted />;
 ```
 
 ### Controlled Tabs
@@ -3648,13 +3773,7 @@ const ControlledExample = () => {
     },
   ];
 
-  return (
-    <Tabs
-      tabs={tabs}
-      activeTab={activeTab}
-      onTabChange={setActiveTab}
-    />
-  );
+  return <Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />;
 };
 ```
 
@@ -3673,7 +3792,7 @@ const tabs = [
   },
 ];
 
-<Tabs tabs={tabs} />
+<Tabs tabs={tabs} />;
 ```
 
 ### Tabs with Links
@@ -3692,7 +3811,7 @@ const tabs = [
   },
 ];
 
-<Tabs tabs={tabs} />
+<Tabs tabs={tabs} />;
 ```
 
 ### Custom Styling
@@ -3783,19 +3902,19 @@ import { Avatar } from "alope-ui";
 
 ### Props
 
-| Prop              | Type                                                      | Default     | Description                           |
-| ----------------- | --------------------------------------------------------- | ----------- | ------------------------------------- |
-| `imageSrc`        | `string`                                                  | `undefined` | URL of the avatar image               |
-| `fallbackName`    | `string`                                                  | `undefined` | Name to generate initials from        |
-| `fallbackColor`   | `'primary' \| 'error' \| 'warning' \| 'success' \| 'info' \| 'secondary'` | `'primary'` | Background color for fallback |
-| `shape`           | `'sharp' \| 'cornered' \| 'rounded'`                      | `'rounded'` | Shape of the avatar                   |
-| `variant`         | `'solid' \| 'outline'`                                    | `'solid'`   | Visual variant style                  |
-| `size`            | `'sm' \| 'md' \| 'lg'`                                    | `'md'`      | Size of the avatar                    |
-| `ring`            | `boolean`                                                 | `false`     | Show ring around avatar               |
-| `ringClassName`   | `string`                                                  | `""`        | Custom ring CSS class                 |
-| `alt`             | `string`                                                  | `'avatar'`  | Alt text for image                    |
-| `status`          | `'online' \| 'offline'`                                   | `undefined` | Status indicator                      |
-| `className`       | `string`                                                  | `""`        | Additional CSS class                  |
+| Prop            | Type                                                                      | Default     | Description                    |
+| --------------- | ------------------------------------------------------------------------- | ----------- | ------------------------------ |
+| `imageSrc`      | `string`                                                                  | `undefined` | URL of the avatar image        |
+| `fallbackName`  | `string`                                                                  | `undefined` | Name to generate initials from |
+| `fallbackColor` | `'primary' \| 'error' \| 'warning' \| 'success' \| 'info' \| 'secondary'` | `'primary'` | Background color for fallback  |
+| `shape`         | `'sharp' \| 'cornered' \| 'rounded'`                                      | `'rounded'` | Shape of the avatar            |
+| `variant`       | `'solid' \| 'outline'`                                                    | `'solid'`   | Visual variant style           |
+| `size`          | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`      | Size of the avatar             |
+| `ring`          | `boolean`                                                                 | `false`     | Show ring around avatar        |
+| `ringClassName` | `string`                                                                  | `""`        | Custom ring CSS class          |
+| `alt`           | `string`                                                                  | `'avatar'`  | Alt text for image             |
+| `status`        | `'online' \| 'offline'`                                                   | `undefined` | Status indicator               |
+| `className`     | `string`                                                                  | `""`        | Additional CSS class           |
 
 ### Basic Avatar
 
@@ -3804,10 +3923,7 @@ import { Avatar } from "alope-ui";
 
 const BasicExample = () => {
   return (
-    <Avatar
-      imageSrc="https://i.pravatar.cc/150?img=1"
-      alt="User Avatar"
-    />
+    <Avatar imageSrc="https://i.pravatar.cc/150?img=1" alt="User Avatar" />
   );
 };
 ```
@@ -3815,129 +3931,133 @@ const BasicExample = () => {
 ### Fallback with Initials
 
 ```jsx
-{/* Avatar with fallback name */}
-<Avatar fallbackName="John Doe" />
+{
+  /* Avatar with fallback name */
+}
+<Avatar fallbackName="John Doe" />;
 
-{/* Avatar with no image (shows initials) */}
-<Avatar 
-  imageSrc="invalid-url.jpg" 
-  fallbackName="Jane Smith" 
-/>
+{
+  /* Avatar with no image (shows initials) */
+}
+<Avatar imageSrc="invalid-url.jpg" fallbackName="Jane Smith" />;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Small */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  size="sm" 
-/>
+{
+  /* Small */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" size="sm" />;
 
-{/* Medium */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  size="md" 
-/>
+{
+  /* Medium */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" size="md" />;
 
-{/* Large */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  size="lg" 
-/>
+{
+  /* Large */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" size="lg" />;
 ```
 
 ### Shapes
 
 ```jsx
-{/* Sharp corners */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  shape="sharp" 
-/>
+{
+  /* Sharp corners */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" shape="sharp" />;
 
-{/* Cornered (slightly rounded) */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  shape="cornered" 
-/>
+{
+  /* Cornered (slightly rounded) */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" shape="cornered" />;
 
-{/* Rounded (circular) */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  shape="rounded" 
-/>
+{
+  /* Rounded (circular) */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" shape="rounded" />;
 ```
 
 ### Variants
 
 ```jsx
-{/* Solid variant */}
-<Avatar 
-  fallbackName="John Doe" 
-  variant="solid" 
-/>
+{
+  /* Solid variant */
+}
+<Avatar fallbackName="John Doe" variant="solid" />;
 
-{/* Outline variant */}
-<Avatar 
-  fallbackName="John Doe" 
-  variant="outline" 
-/>
+{
+  /* Outline variant */
+}
+<Avatar fallbackName="John Doe" variant="outline" />;
 ```
 
 ### Fallback Colors
 
 ```jsx
-{/* Primary color */}
-<Avatar fallbackName="John Doe" fallbackColor="primary" />
+{
+  /* Primary color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="primary" />;
 
-{/* Error color */}
-<Avatar fallbackName="John Doe" fallbackColor="error" />
+{
+  /* Error color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="error" />;
 
-{/* Warning color */}
-<Avatar fallbackName="John Doe" fallbackColor="warning" />
+{
+  /* Warning color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="warning" />;
 
-{/* Success color */}
-<Avatar fallbackName="John Doe" fallbackColor="success" />
+{
+  /* Success color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="success" />;
 
-{/* Info color */}
-<Avatar fallbackName="John Doe" fallbackColor="info" />
+{
+  /* Info color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="info" />;
 
-{/* Secondary color */}
-<Avatar fallbackName="John Doe" fallbackColor="secondary" />
+{
+  /* Secondary color */
+}
+<Avatar fallbackName="John Doe" fallbackColor="secondary" />;
 ```
 
 ### With Ring
 
 ```jsx
-{/* Default ring */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  ring 
-/>
+{
+  /* Default ring */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" ring />;
 
-{/* Custom ring color */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  ring 
+{
+  /* Custom ring color */
+}
+<Avatar
+  imageSrc="https://i.pravatar.cc/150?img=1"
+  ring
   ringClassName="ring-success dark:ring-success-dark"
-/>
+/>;
 ```
 
 ### Status Indicator
 
 ```jsx
-{/* Online status */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  status="online" 
-/>
+{
+  /* Online status */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" status="online" />;
 
-{/* Offline status */}
-<Avatar 
-  imageSrc="https://i.pravatar.cc/150?img=1" 
-  status="offline" 
-/>
+{
+  /* Offline status */
+}
+<Avatar imageSrc="https://i.pravatar.cc/150?img=1" status="offline" />;
 ```
 
 ### Complete Example
@@ -3957,7 +4077,7 @@ const CompleteExample = () => {
         status="online"
         alt="John Doe Avatar"
       />
-      
+
       <Avatar
         imageSrc="https://i.pravatar.cc/150?img=2"
         fallbackName="Jane Smith"
@@ -3985,13 +4105,13 @@ import type { AvatarGroupProps } from "alope-ui";
 
 ### Props
 
-| Prop          | Type              | Default  | Description                              |
-| ------------- | ----------------- | -------- | ---------------------------------------- |
-| `avatars`     | `AvatarProps[]`   | `required` | Array of avatar configurations         |
-| `maxVisible`  | `number`          | `3`      | Maximum number of visible avatars        |
-| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of all avatars in the group    |
-| `overlap`     | `string`          | `'-ml-3'` | CSS class for overlap spacing           |
-| `className`   | `string`          | `""`     | Additional CSS class                     |
+| Prop         | Type                   | Default    | Description                       |
+| ------------ | ---------------------- | ---------- | --------------------------------- |
+| `avatars`    | `AvatarProps[]`        | `required` | Array of avatar configurations    |
+| `maxVisible` | `number`               | `3`        | Maximum number of visible avatars |
+| `size`       | `'sm' \| 'md' \| 'lg'` | `'md'`     | Size of all avatars in the group  |
+| `overlap`    | `string`               | `'-ml-3'`  | CSS class for overlap spacing     |
+| `className`  | `string`               | `""`       | Additional CSS class              |
 
 ### Basic AvatarGroup
 
@@ -4020,34 +4140,48 @@ const avatars = [
   { imageSrc: "https://i.pravatar.cc/150?img=5", fallbackName: "User 5" },
 ];
 
-{/* Show only 3 avatars, rest shown as "+2" */}
-<AvatarGroup avatars={avatars} maxVisible={3} />
+{
+  /* Show only 3 avatars, rest shown as "+2" */
+}
+<AvatarGroup avatars={avatars} maxVisible={3} />;
 ```
 
 ### Different Sizes
 
 ```jsx
-{/* Small size */}
-<AvatarGroup avatars={avatars} size="sm" />
+{
+  /* Small size */
+}
+<AvatarGroup avatars={avatars} size="sm" />;
 
-{/* Medium size */}
-<AvatarGroup avatars={avatars} size="md" />
+{
+  /* Medium size */
+}
+<AvatarGroup avatars={avatars} size="md" />;
 
-{/* Large size */}
-<AvatarGroup avatars={avatars} size="lg" />
+{
+  /* Large size */
+}
+<AvatarGroup avatars={avatars} size="lg" />;
 ```
 
 ### Custom Overlap
 
 ```jsx
-{/* More overlap */}
-<AvatarGroup avatars={avatars} overlap="-ml-4" />
+{
+  /* More overlap */
+}
+<AvatarGroup avatars={avatars} overlap="-ml-4" />;
 
-{/* Less overlap */}
-<AvatarGroup avatars={avatars} overlap="-ml-2" />
+{
+  /* Less overlap */
+}
+<AvatarGroup avatars={avatars} overlap="-ml-2" />;
 
-{/* No overlap */}
-<AvatarGroup avatars={avatars} overlap="" />
+{
+  /* No overlap */
+}
+<AvatarGroup avatars={avatars} overlap="" />;
 ```
 
 ### Complete AvatarGroup Example
@@ -4057,28 +4191,28 @@ import { AvatarGroup } from "alope-ui";
 
 const CompleteGroupExample = () => {
   const teamMembers = [
-    { 
-      imageSrc: "https://i.pravatar.cc/150?img=1", 
+    {
+      imageSrc: "https://i.pravatar.cc/150?img=1",
       fallbackName: "John Doe",
-      status: "online"
+      status: "online",
     },
-    { 
-      imageSrc: "https://i.pravatar.cc/150?img=2", 
+    {
+      imageSrc: "https://i.pravatar.cc/150?img=2",
       fallbackName: "Jane Smith",
-      status: "online"
+      status: "online",
     },
-    { 
-      imageSrc: "https://i.pravatar.cc/150?img=3", 
+    {
+      imageSrc: "https://i.pravatar.cc/150?img=3",
       fallbackName: "Bob Wilson",
-      status: "offline"
+      status: "offline",
     },
-    { 
+    {
       fallbackName: "Alice Brown",
-      fallbackColor: "success"
+      fallbackColor: "success",
     },
-    { 
+    {
       fallbackName: "Charlie Davis",
-      fallbackColor: "info"
+      fallbackColor: "info",
     },
   ];
 
@@ -4109,4 +4243,4 @@ MIT License – Free to use, modify, and distribute.
 
 ## 🙌 Thank You
 
-Thank you for using **ALOPE UI Library**. We hope this helps you build beautiful and functional user interfaces with ease.
+Thank you for using **ALOPE UI Library**. We hope this helps you build beautiful and functional user interfaces with ease.