alope-ui 1.0.7 → 1.1.2

package/README.md

@@ -1,6 +1,6 @@
 # ALOPE UI Library
 
-[![npm version](https://img.shields.io/npm/v/alope-ui-v3.svg)](https://www.npmjs.com/package/alope-ui-v3)
+[![npm version](https://img.shields.io/npm/v/alope-ui.svg)](https://www.npmjs.com/package/alope-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![React](https://img.shields.io/badge/React-%2320232a.svg?logo=react&logoColor=%2361DAFB)](https://reactjs.org/)
 
@@ -28,11 +28,13 @@
 ### Installation
 
 **Using npm:**
+
 ```bash
-npm install alope-ui-v3
+npm install alope-ui
 ```
 
-**Add ``@import`` directive(s) on your main css file:**
+**Add `@import` directive(s) on your main css file:**
+
 ```css
 /* index.css */
 
@@ -40,7 +42,7 @@ npm install alope-ui-v3
 @import "tailwindcss";
 
 /* Then import the styles from Alope UI */
-@import "../node_modules/alope-ui-v3/dist/index.css";
+@import "../node_modules/alope-ui/dist/index.css";
 ```
 
 ### Basic Setup
@@ -48,8 +50,8 @@ npm install alope-ui-v3
 Import and use any component in your React application:
 
 ```jsx
-import React from 'react';
-import { Button } from 'alope-ui-v3';
+import React from "react";
+import { Button } from "alope-ui";
 
 function App() {
   return (
@@ -66,18 +68,17 @@ export default App;
 
 ### ⚠️ IMPORTANT NOTES:
 
-If you're using the ``to`` prop on a ``Button`` (or any other component that uses SPA-style navigation), make sure you have a ``react-router-dom`` properly configured.
+If you're using the `to` prop on a `Button` (or any other component that uses SPA-style navigation), make sure you have a `react-router-dom` properly configured.
 Refer to the [official documentation](https://reactrouter.com/start/declarative/installation) for setup instructions if needed.
 
-
 ```jsx
-import React from 'react';
-import { Button } from 'alope-ui-v3';
+import React from "react";
+import { Button } from "alope-ui";
 
 function App() {
   return (
     <div className="App">
-      <Button to='/button' variant="solid" variantType="primary">
+      <Button to="/button" variant="solid" variantType="primary">
         Hello I'm going to Button Page!
       </Button>
     </div>
@@ -92,24 +93,29 @@ export default App;
 ## 🧩 Component Library
 
 ### Navigation Components
+
 - [🪗 Accordion](#accordion) - Collapsible content panels
 - [🍞 Breadcrumb](#breadcrumb) - Navigation trail
 
 ### Feedback Components
+
 - [⚠️ Alert](#alert) - Status messages and notifications
 - [🍞 Toast](#toast) - Temporary notification messages
 
 ### Data Display
+
 - [🏷️ Badge](#badge) - Status indicators and labels
 - [🃏 Card](#card) - Content containers
 
 ### Form Controls
+
 - [☑️ Checkbox Input](#checkbox-input) - Multiple choice selections
 - [🔘 Radio Input](#radio-input) - Single choice selections
 - [📝 Select Input](#select-input) - Dropdown selections
 - [⌨️ Text Input](#text-input) - Text input fields
 
 ### Interactive Elements
+
 - [🔘 Button](#button) - Clickable actions
 - [🪟 Modal](#modal) - Dialog boxes and overlays
 - [📱 Offcanvas](#offcanvas) - Side panels and drawers
@@ -125,41 +131,44 @@ The Accordion component allows users to show and hide sections of related conten
 ### Import
 
 ```jsx
-import { Accordion } from "alope-ui-v3";
+import { Accordion } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `AccordionItem[]` | `[]` | Array of accordion items |
-| `single` | `boolean` | `true` | Allow only one panel open at a time |
-| `openIndex` | `number \| number[]` | `undefined` | Controlled open state |
-| `onToggleItem` | `function` | `undefined` | Callback when item is toggled |
-| `icon` | `function` | `undefined` | Custom icon renderer |
-| `labelClassName` | `string` | `""` | Custom CSS class for labels |
-| `labelContainerClassName` | `string` | `""` | Custom CSS class for label containers |
-| `descriptionClassName` | `string` | `""` | Custom CSS class for descriptions |
+| Prop                      | Type                 | Default     | Description                           |
+| ------------------------- | -------------------- | ----------- | ------------------------------------- |
+| `data`                    | `AccordionItem[]`    | `[]`        | Array of accordion items              |
+| `single`                  | `boolean`            | `true`      | Allow only one panel open at a time   |
+| `openIndex`               | `number \| number[]` | `undefined` | Controlled open state                 |
+| `onToggleItem`            | `function`           | `undefined` | Callback when item is toggled         |
+| `icon`                    | `function`           | `undefined` | Custom icon renderer                  |
+| `labelClassName`          | `string`             | `""`        | Custom CSS class for labels           |
+| `labelContainerClassName` | `string`             | `""`        | Custom CSS class for label containers |
+| `descriptionClassName`    | `string`             | `""`        | Custom CSS class for descriptions     |
 
 ### Basic Usage
 
 ```jsx
 const accordionData = [
-  { 
-    label: "What is ALOPE UI?", 
-    description: "ALOPE UI is a modern React component library that helps you build beautiful user interfaces quickly." 
+  {
+    label: "What is ALOPE UI?",
+    description:
+      "ALOPE UI is a modern React component library that helps you build beautiful user interfaces quickly.",
   },
-  { 
-    label: "How do I install it?", 
-    description: "You can install ALOPE UI using npm, yarn, or pnpm. Check the installation section for details." 
+  {
+    label: "How do I install it?",
+    description:
+      "You can install ALOPE UI using npm, yarn, or pnpm. Check the installation section for details.",
   },
-  { 
-    label: "Is it free to use?", 
-    description: "Yes! ALOPE UI is completely free and open-source under the MIT license." 
+  {
+    label: "Is it free to use?",
+    description:
+      "Yes! ALOPE UI is completely free and open-source under the MIT license.",
   },
 ];
 
-<Accordion data={accordionData} />
+<Accordion data={accordionData} />;
 ```
 
 ### Single Panel Mode
@@ -198,24 +207,24 @@ const [openIndex, setOpenIndex] = useState(0);
   data={accordionData}
   openIndex={openIndex}
   onToggleItem={(index) => setOpenIndex(index)}
-  icon={isActive => (
+  icon={(isActive) => (
     <svg
       className={`w-5 h-5 transition-transform duration-300 ${
-        isActive ? 'rotate-180' : 'rotate-0'
+        isActive ? "rotate-180" : "rotate-0"
       }`}
       fill="none"
       stroke="currentColor"
       viewBox="0 0 24 24"
     >
-      <path 
-        strokeLinecap="round" 
-        strokeLinejoin="round" 
-        strokeWidth="2" 
-        d="M19 9l-7 7-7-7" 
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M19 9l-7 7-7-7"
       />
     </svg>
   )}
-/>
+/>;
 ```
 
 ---
@@ -227,20 +236,20 @@ The Alert component displays important messages to users with different severity
 ### Import
 
 ```jsx
-import { Alert } from "alope-ui-v3";
+import { Alert } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `type` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | Alert severity type |
-| `title` | `string` | `""` | Alert title |
-| `description` | `string` | `""` | Alert description |
-| `icon` | `ReactNode` | `undefined` | Custom icon |
-| `action` | `ReactNode` | `undefined` | Action button or element |
-| `withClose` | `boolean` | `false` | Show close button |
-| `onClose` | `function` | `undefined` | Close callback |
+| Prop          | Type                                          | Default     | Description              |
+| ------------- | --------------------------------------------- | ----------- | ------------------------ |
+| `type`        | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'`    | Alert severity type      |
+| `title`       | `string`                                      | `""`        | Alert title              |
+| `description` | `string`                                      | `""`        | Alert description        |
+| `icon`        | `ReactNode`                                   | `undefined` | Custom icon              |
+| `action`      | `ReactNode`                                   | `undefined` | Action button or element |
+| `withClose`   | `boolean`                                     | `false`     | Show close button        |
+| `onClose`     | `function`                                    | `undefined` | Close callback           |
 
 ### Basic Usage
 
@@ -254,33 +263,41 @@ import { Alert } from "alope-ui-v3";
 ### Alert Types
 
 ```jsx
-{/* Success Alert */}
-<Alert 
-  type="success" 
-  title="Success!" 
-  description="Your changes have been saved successfully." 
-/>
+{
+  /* Success Alert */
+}
+<Alert
+  type="success"
+  title="Success!"
+  description="Your changes have been saved successfully."
+/>;
 
-{/* Info Alert */}
-<Alert 
-  type="info" 
-  title="Information" 
-  description="Here's some helpful information for you." 
-/>
+{
+  /* Info Alert */
+}
+<Alert
+  type="info"
+  title="Information"
+  description="Here's some helpful information for you."
+/>;
 
-{/* Warning Alert */}
-<Alert 
-  type="warning" 
-  title="Warning" 
-  description="Please review your input before proceeding." 
-/>
+{
+  /* Warning Alert */
+}
+<Alert
+  type="warning"
+  title="Warning"
+  description="Please review your input before proceeding."
+/>;
 
-{/* Error Alert */}
-<Alert 
-  type="error" 
-  title="Error" 
-  description="Something went wrong. Please try again." 
-/>
+{
+  /* Error Alert */
+}
+<Alert
+  type="error"
+  title="Error"
+  description="Something went wrong. Please try again."
+/>;
 ```
 
 ### Alert with Custom Icon
@@ -291,12 +308,17 @@ import { Alert } from "alope-ui-v3";
   title="Important Notice"
   description="This action cannot be undone."
   icon={
-    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path 
-        strokeLinecap="round" 
-        strokeLinejoin="round" 
-        strokeWidth={2} 
-        d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" 
+    <svg
+      className="w-6 h-6"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
       />
     </svg>
   }
@@ -326,7 +348,7 @@ import { Alert } from "alope-ui-v3";
   type="success"
   title="Success!"
   description="Your profile has been updated successfully."
-  onClose={() => console.log('Alert closed')}
+  onClose={() => console.log("Alert closed")}
 />
 ```
 
@@ -339,18 +361,18 @@ The Badge component is used to display small pieces of information like status,
 ### Import
 
 ```jsx
-import { Badge } from "alope-ui-v3";
+import { Badge } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Badge color variant |
-| `children` | `ReactNode` | `undefined` | Badge content |
-| `isAbsolute` | `boolean` | `false` | Absolute positioning |
-| `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Position when absolute |
-| `icon` | `ReactNode` | `undefined` | Custom icon |
+| Prop         | Type                                                           | Default       | Description            |
+| ------------ | -------------------------------------------------------------- | ------------- | ---------------------- |
+| `variant`    | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'`     | `'default'`   | Badge color variant    |
+| `children`   | `ReactNode`                                                    | `undefined`   | Badge content          |
+| `isAbsolute` | `boolean`                                                      | `false`       | Absolute positioning   |
+| `position`   | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Position when absolute |
+| `icon`       | `ReactNode`                                                    | `undefined`   | Custom icon            |
 
 ### Basic Variants
 
@@ -378,14 +400,8 @@ Perfect for notification indicators or status markers:
 
 ```jsx
 <div className="relative inline-block">
-  <Button>
-    Messages
-  </Button>
-  <Badge 
-    variant="error" 
-    position="top-right" 
-    isAbsolute
-  >
+  <Button>Messages</Button>
+  <Badge variant="error" position="top-right" isAbsolute>
     3
   </Badge>
 </div>
@@ -396,22 +412,30 @@ Perfect for notification indicators or status markers:
 ```jsx
 <div className="grid grid-cols-2 gap-4 w-fit">
   <Card containerClassName="relative p-8">
-    <Badge variant="success" position="top-left" isAbsolute>1</Badge>
+    <Badge variant="success" position="top-left" isAbsolute>
+      1
+    </Badge>
     <span>Top Left</span>
   </Card>
-  
+
   <Card containerClassName="relative p-8">
-    <Badge variant="info" position="top-right" isAbsolute>2</Badge>
+    <Badge variant="info" position="top-right" isAbsolute>
+      2
+    </Badge>
     <span>Top Right</span>
   </Card>
-  
+
   <Card containerClassName="relative p-8">
-    <Badge variant="warning" position="bottom-left" isAbsolute>3</Badge>
+    <Badge variant="warning" position="bottom-left" isAbsolute>
+      3
+    </Badge>
     <span>Bottom Left</span>
   </Card>
-  
+
   <Card containerClassName="relative p-8">
-    <Badge variant="error" position="bottom-right" isAbsolute>4</Badge>
+    <Badge variant="error" position="bottom-right" isAbsolute>
+      4
+    </Badge>
     <span>Bottom Right</span>
   </Card>
 </div>
@@ -426,35 +450,35 @@ The Breadcrumb component provides navigation context showing the user's location
 ### Import
 
 ```jsx
-import { Breadcrumb } from "alope-ui-v3";
+import { Breadcrumb } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `BreadcrumbItem[]` | `[]` | Array of breadcrumb items |
-| `separator` | `ReactNode` | `"/"` | Custom separator between items |
-| `linkClassName` | `string` | `""` | Custom CSS class for links |
+| Prop            | Type               | Default | Description                    |
+| --------------- | ------------------ | ------- | ------------------------------ |
+| `data`          | `BreadcrumbItem[]` | `[]`    | Array of breadcrumb items      |
+| `separator`     | `ReactNode`        | `"/"`   | Custom separator between items |
+| `linkClassName` | `string`           | `""`    | Custom CSS class for links     |
 
 ### Basic Usage
 
 ```jsx
 const breadcrumbData = [
-  { label: 'Home', path: '/' },
-  { label: 'Products', path: '/products' },
-  { label: 'Laptops', path: '/products/laptops' },
-  { label: 'MacBook Pro' } // Current page (no path)
+  { label: "Home", path: "/" },
+  { label: "Products", path: "/products" },
+  { label: "Laptops", path: "/products/laptops" },
+  { label: "MacBook Pro" }, // Current page (no path)
 ];
 
-<Breadcrumb data={breadcrumbData} />
+<Breadcrumb data={breadcrumbData} />;
 ```
 
 ### Custom Separator
 
 ```jsx
-<Breadcrumb 
-  data={breadcrumbData} 
+<Breadcrumb
+  data={breadcrumbData}
   separator={
     <svg className="w-4 h-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
       <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" />
@@ -478,8 +502,8 @@ const breadcrumbData = [
 ```jsx
 const breadcrumbWithIcons = [
   {
-    label: 'Home',
-    path: '/',
+    label: "Home",
+    path: "/",
     icon: (
       <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
         <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
@@ -487,17 +511,17 @@ const breadcrumbWithIcons = [
     ),
   },
   {
-    label: 'Products',
-    path: '/products',
+    label: "Products",
+    path: "/products",
     icon: <span className="mr-1">🛍️</span>,
   },
   {
-    label: 'MacBook Pro',
+    label: "MacBook Pro",
     icon: <span className="mr-1">💻</span>,
   },
 ];
 
-<Breadcrumb data={breadcrumbWithIcons} />
+<Breadcrumb data={breadcrumbWithIcons} />;
 ```
 
 ---
@@ -509,24 +533,24 @@ The Button component provides clickable elements for user interactions with vari
 ### Import
 
 ```jsx
-import { Button } from "alope-ui-v3";
+import { Button } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'solid' \| 'outline' \| 'ghost' \| 'plain'` | `'solid'` | Button style variant |
-| `variantType` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'primary'` | Button color theme |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
-| `radius` | `'regular' \| 'stadium'` | `'regular'` | Border radius style |
-| `fullWidth` | `boolean` | `false` | Full width button |
-| `disabled` | `boolean` | `false` | Disabled state |
-| `to` | `string` | `undefined` | Link destination |
-| `prefixIcon` | `ReactNode` | `undefined` | Icon before text |
-| `suffixIcon` | `ReactNode` | `undefined` | Icon after text |
-| `onClick` | `function` | `undefined` | Click handler |
-| `children` | `ReactNode` | `undefined` | Button content |
+| Prop          | Type                                                                      | Default     | Description          |
+| ------------- | ------------------------------------------------------------------------- | ----------- | -------------------- |
+| `variant`     | `'solid' \| 'outline' \| 'ghost' \| 'plain'`                              | `'solid'`   | Button style variant |
+| `variantType` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'primary'` | Button color theme   |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`      | Button size          |
+| `radius`      | `'regular' \| 'stadium'`                                                  | `'regular'` | Border radius style  |
+| `fullWidth`   | `boolean`                                                                 | `false`     | Full width button    |
+| `disabled`    | `boolean`                                                                 | `false`     | Disabled state       |
+| `to`          | `string`                                                                  | `undefined` | Link destination     |
+| `prefixIcon`  | `ReactNode`                                                               | `undefined` | Icon before text     |
+| `suffixIcon`  | `ReactNode`                                                               | `undefined` | Icon after text      |
+| `onClick`     | `function`                                                                | `undefined` | Click handler        |
+| `children`    | `ReactNode`                                                               | `undefined` | Button content       |
 
 ### Button Variants
 
@@ -585,20 +609,40 @@ import { Button } from "alope-ui-v3";
 
 ```jsx
 <div className="flex flex-wrap gap-2">
-  <Button 
+  <Button
     prefixIcon={
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      <svg
+        className="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
       </svg>
     }
   >
     Search
   </Button>
-  
-  <Button 
+
+  <Button
     suffixIcon={
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+      <svg
+        className="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M17 8l4 4m0 0l-4 4m4-4H3"
+        />
       </svg>
     }
   >
@@ -620,21 +664,17 @@ import { Button } from "alope-ui-v3";
 ```jsx
 <div className="space-y-4">
   <div className="flex flex-wrap gap-2">
-    <Button 
-      variant="solid" 
-      variantType="primary" 
+    <Button
+      variant="solid"
+      variantType="primary"
       size="lg"
       prefixIcon={<PlusIcon />}
-      onClick={() => alert('Button clicked!')}
+      onClick={() => alert("Button clicked!")}
     >
       Create New
     </Button>
-    
-    <Button 
-      variant="outline" 
-      variantType="secondary" 
-      size="lg"
-    >
+
+    <Button variant="outline" variantType="secondary" size="lg">
       Cancel
     </Button>
   </div>
@@ -650,23 +690,23 @@ The Card component provides a flexible container for displaying content in a str
 ### Import
 
 ```jsx
-import { Card } from "alope-ui-v3";
+import { Card } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `image` | `string` | `undefined` | Image URL |
-| `title` | `string` | `undefined` | Card title |
-| `description` | `string` | `undefined` | Card description |
-| `footer` | `ReactNode` | `undefined` | Card footer content |
-| `ribbon` | `string` | `undefined` | Ribbon text |
-| `horizontal` | `boolean` | `false` | Horizontal layout |
-| `children` | `ReactNode` | `undefined` | Card content |
-| `containerClassName` | `string` | `""` | Container CSS class |
-| `titleClassName` | `string` | `""` | Title CSS class |
-| `descriptionClassName` | `string` | `""` | Description CSS class |
+| Prop                   | Type        | Default     | Description           |
+| ---------------------- | ----------- | ----------- | --------------------- |
+| `image`                | `string`    | `undefined` | Image URL             |
+| `title`                | `string`    | `undefined` | Card title            |
+| `description`          | `string`    | `undefined` | Card description      |
+| `footer`               | `ReactNode` | `undefined` | Card footer content   |
+| `ribbon`               | `string`    | `undefined` | Ribbon text           |
+| `horizontal`           | `boolean`   | `false`     | Horizontal layout     |
+| `children`             | `ReactNode` | `undefined` | Card content          |
+| `containerClassName`   | `string`    | `""`        | Container CSS class   |
+| `titleClassName`       | `string`    | `""`        | Title CSS class       |
+| `descriptionClassName` | `string`    | `""`        | Description CSS class |
 
 ### Basic Card
 
@@ -688,7 +728,9 @@ import { Card } from "alope-ui-v3";
   footer={
     <div className="flex justify-between items-center">
       <span className="text-2xl font-bold text-green-600">$99</span>
-      <Button size="sm" variantType="primary">Enroll Now</Button>
+      <Button size="sm" variantType="primary">
+        Enroll Now
+      </Button>
     </div>
   }
 />
@@ -720,8 +762,12 @@ import { Card } from "alope-ui-v3";
   description="Learn the core concepts of JavaScript programming from scratch. Perfect for beginners who want to start their coding journey."
   footer={
     <div className="flex gap-2">
-      <Button size="sm" variant="outline">Preview</Button>
-      <Button size="sm" variantType="primary">Start Learning</Button>
+      <Button size="sm" variant="outline">
+        Preview
+      </Button>
+      <Button size="sm" variantType="primary">
+        Start Learning
+      </Button>
     </div>
   }
 />
@@ -770,19 +816,19 @@ The Modal component provides overlay dialogs for important user interactions and
 ### Import
 
 ```jsx
-import { Modal } from "alope-ui-v3";
+import { Modal } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | `false` | Modal visibility state |
-| `onClose` | `function` | `required` | Close handler |
-| `title` | `string` | `undefined` | Modal title |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Modal size |
-| `overlayClose` | `boolean` | `true` | Close on overlay click |
-| `children` | `ReactNode` | `undefined` | Modal content |
+| Prop           | Type                           | Default     | Description            |
+| -------------- | ------------------------------ | ----------- | ---------------------- |
+| `isOpen`       | `boolean`                      | `false`     | Modal visibility state |
+| `onClose`      | `function`                     | `required`  | Close handler          |
+| `title`        | `string`                       | `undefined` | Modal title            |
+| `size`         | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`      | Modal size             |
+| `overlayClose` | `boolean`                      | `true`      | Close on overlay click |
+| `children`     | `ReactNode`                    | `undefined` | Modal content          |
 
 ### Basic Modal
 
@@ -790,10 +836,8 @@ import { Modal } from "alope-ui-v3";
 const [isOpen, setIsOpen] = useState(false);
 
 <>
-  <Button onClick={() => setIsOpen(true)}>
-    Open Modal
-  </Button>
-  
+  <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+
   <Modal
     isOpen={isOpen}
     onClose={() => setIsOpen(false)}
@@ -805,19 +849,14 @@ const [isOpen, setIsOpen] = useState(false);
         This is a basic modal example. You can put any content here.
       </p>
       <div className="flex justify-end gap-2">
-        <Button 
-          variant="outline" 
-          onClick={() => setIsOpen(false)}
-        >
+        <Button variant="outline" onClick={() => setIsOpen(false)}>
           Cancel
         </Button>
-        <Button onClick={() => setIsOpen(false)}>
-          Confirm
-        </Button>
+        <Button onClick={() => setIsOpen(false)}>Confirm</Button>
       </div>
     </div>
   </Modal>
-</>
+</>;
 ```
 
 ### Confirmation Modal
@@ -827,7 +866,7 @@ const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 
 const handleDelete = () => {
   // Perform delete action
-  console.log('Item deleted');
+  console.log("Item deleted");
   setIsDeleteOpen(false);
 };
 
@@ -835,7 +874,7 @@ const handleDelete = () => {
   <Button variantType="error" onClick={() => setIsDeleteOpen(true)}>
     Delete Item
   </Button>
-  
+
   <Modal
     isOpen={isDeleteOpen}
     onClose={() => setIsDeleteOpen(false)}
@@ -848,22 +887,16 @@ const handleDelete = () => {
         Are you sure you want to delete this item? This action cannot be undone.
       </p>
       <div className="flex justify-end gap-3">
-        <Button 
-          variant="outline" 
-          onClick={() => setIsDeleteOpen(false)}
-        >
+        <Button variant="outline" onClick={() => setIsDeleteOpen(false)}>
           Cancel
         </Button>
-        <Button 
-          variantType="error" 
-          onClick={handleDelete}
-        >
+        <Button variantType="error" onClick={handleDelete}>
           Yes, Delete
         </Button>
       </div>
     </div>
   </Modal>
-</>
+</>;
 ```
 
 ### Form Modal
@@ -872,10 +905,8 @@ const handleDelete = () => {
 const [isFormOpen, setIsFormOpen] = useState(false);
 
 <>
-  <Button onClick={() => setIsFormOpen(true)}>
-    Add User
-  </Button>
-  
+  <Button onClick={() => setIsFormOpen(true)}>Add User</Button>
+
   <Modal
     isOpen={isFormOpen}
     onClose={() => setIsFormOpen(false)}
@@ -884,11 +915,7 @@ const [isFormOpen, setIsFormOpen] = useState(false);
   >
     <div className="p-6">
       <form className="space-y-4">
-        <TextInput
-          label="Full Name"
-          placeholder="Enter full name"
-          required
-        />
+        <TextInput label="Full Name" placeholder="Enter full name" required />
         <TextInput
           label="Email Address"
           type="email"
@@ -898,16 +925,16 @@ const [isFormOpen, setIsFormOpen] = useState(false);
         <SelectInput
           label="Role"
           options={[
-            { label: 'Admin', value: 'admin' },
-            { label: 'User', value: 'user' },
-            { label: 'Moderator', value: 'moderator' }
+            { label: "Admin", value: "admin" },
+            { label: "User", value: "user" },
+            { label: "Moderator", value: "moderator" },
           ]}
           placeholder="Select role"
         />
         <div className="flex justify-end gap-3 pt-4">
-          <Button 
+          <Button
             type="button"
-            variant="outline" 
+            variant="outline"
             onClick={() => setIsFormOpen(false)}
           >
             Cancel
@@ -919,7 +946,7 @@ const [isFormOpen, setIsFormOpen] = useState(false);
       </form>
     </div>
   </Modal>
-</>
+</>;
 ```
 
 ### Modal Sizes
@@ -942,21 +969,21 @@ The Offcanvas component provides a sliding panel for displaying hidden content l
 ### Import
 
 ```jsx
-import { Offcanvas } from "alope-ui-v3";
+import { Offcanvas } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | `false` | Controls visibility of the offcanvas |
-| `onClose` | `() => void` | `required` | Callback function when offcanvas closes |
-| `title` | `string` | `undefined` | Offcanvas header title |
-| `position` | `'left' \| 'right'` | `'left'` | Position where offcanvas slides from |
-| `children` | `ReactNode` | `undefined` | Offcanvas content |
-| `className` | `string` | `""` | Custom CSS class for offcanvas container |
-| `titleClassName` | `string` | `""` | Custom CSS class for title |
-| `closeButtonClassName` | `string` | `""` | Custom CSS class for close button |
+| Prop                   | Type                | Default     | Description                              |
+| ---------------------- | ------------------- | ----------- | ---------------------------------------- |
+| `isOpen`               | `boolean`           | `false`     | Controls visibility of the offcanvas     |
+| `onClose`              | `() => void`        | `required`  | Callback function when offcanvas closes  |
+| `title`                | `string`            | `undefined` | Offcanvas header title                   |
+| `position`             | `'left' \| 'right'` | `'left'`    | Position where offcanvas slides from     |
+| `children`             | `ReactNode`         | `undefined` | Offcanvas content                        |
+| `className`            | `string`            | `""`        | Custom CSS class for offcanvas container |
+| `titleClassName`       | `string`            | `""`        | Custom CSS class for title               |
+| `closeButtonClassName` | `string`            | `""`        | Custom CSS class for close button        |
 
 ### Basic Offcanvas
 
@@ -984,7 +1011,9 @@ const [isOpen, setIsOpen] = useState(false);
   title="Right Offcanvas"
   position="right"
 >
-  <p>This is the content of the offcanvas with that slides in from the right.</p>
+  <p>
+    This is the content of the offcanvas with that slides in from the right.
+  </p>
 </Offcanvas>
 ```
 
@@ -1002,7 +1031,9 @@ const [isOpen, setIsOpen] = useState(false);
 >
   <div className="text-white">
     <p>This is the content of the offcanvas with custom styling.</p>
-    <p>You can put any content here, such as text, forms, or other components.</p>
+    <p>
+      You can put any content here, such as text, forms, or other components.
+    </p>
   </div>
 </Offcanvas>
 ```
@@ -1018,7 +1049,7 @@ The Toast component provides brief, auto-dismissable messages to inform users ab
 First, import the ToastProvider
 
 ```jsx
-import { ToastProvider } from 'alope-ui-v3'
+import { ToastProvider } from "alope-ui";
 ```
 
 Then, wrap your main application component with the provider (e.g. in App.tsx or your entry file):
@@ -1027,7 +1058,7 @@ Then, wrap your main application component with the provider (e.g. in App.tsx or
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-import { ToastProvider } from 'alope-ui-v3';
+import { ToastProvider } from 'alope-ui';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -1041,10 +1072,10 @@ createRoot(document.getElementById('root')!).render(
 
 ### Use Toast
 
-Finally, you can use the ``useToast()`` hook like this:
+Finally, you can use the `useToast()` hook like this:
 
 ```jsx
-import { useToast } from 'alope-ui-v3'
+import { useToast } from "alope-ui";
 ```
 
 ```jsx
@@ -1053,53 +1084,69 @@ const { addToast } = useToast();
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `required` | Toast title |
-| `message` | `string` | `required` | Toast message content |
-| `type` | `'success' \| 'error' \| 'info' \| 'warning'` | `'info'` | Toast type/variant |
-| `variant` | `'filled' \| 'outline'` | `'filled'` | Toast visual style |
+| Prop       | Type                                                       | Default      | Description              |
+| ---------- | ---------------------------------------------------------- | ------------ | ------------------------ |
+| `title`    | `string`                                                   | `required`   | Toast title              |
+| `message`  | `string`                                                   | `required`   | Toast message content    |
+| `type`     | `'success' \| 'error' \| 'info' \| 'warning'`              | `'info'`     | Toast type/variant       |
+| `variant`  | `'filled' \| 'outline'`                                    | `'filled'`   | Toast visual style       |
 | `position` | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'topRight'` | Toast position on screen |
 
 ### Basic Toast
 
 ```jsx
-import { useToast } from "alope-ui-v3";
+import { useToast } from "alope-ui";
 
 const BasicExample = () => {
   const { addToast } = useToast();
 
   return (
     <div className="flex gap-4">
-      <Button onClick={() => addToast({ 
-        title: 'Success', 
-        message: 'This is a success message!', 
-        type: 'success' 
-      })}>
+      <Button
+        onClick={() =>
+          addToast({
+            title: "Success",
+            message: "This is a success message!",
+            type: "success",
+          })
+        }
+      >
         Success Toast
       </Button>
-      
-      <Button onClick={() => addToast({ 
-        title: 'Error', 
-        message: 'This is an error message!', 
-        type: 'error' 
-      })}>
+
+      <Button
+        onClick={() =>
+          addToast({
+            title: "Error",
+            message: "This is an error message!",
+            type: "error",
+          })
+        }
+      >
         Error Toast
       </Button>
-      
-      <Button onClick={() => addToast({ 
-        title: 'Info', 
-        message: 'This is an info message!', 
-        type: 'info' 
-      })}>
+
+      <Button
+        onClick={() =>
+          addToast({
+            title: "Info",
+            message: "This is an info message!",
+            type: "info",
+          })
+        }
+      >
         Info Toast
       </Button>
-      
-      <Button onClick={() => addToast({ 
-        title: 'Warning', 
-        message: 'This is a warning message!', 
-        type: 'warning' 
-      })}>
+
+      <Button
+        onClick={() =>
+          addToast({
+            title: "Warning",
+            message: "This is a warning message!",
+            type: "warning",
+          })
+        }
+      >
         Warning Toast
       </Button>
     </div>
@@ -1110,20 +1157,20 @@ const BasicExample = () => {
 ### Outline Variant
 
 ```jsx
-<Button onClick={() => addToast({ 
-  title: 'Success', 
-  message: 'This is a success message!', 
-  type: 'success', 
-  variant: 'outline' 
+<Button onClick={() => addToast({
+  title: 'Success',
+  message: 'This is a success message!',
+  type: 'success',
+  variant: 'outline'
 })}>
   Success Outline Toast
 </Button>
 
-<Button onClick={() => addToast({ 
-  title: 'Error', 
-  message: 'This is an error message!', 
-  type: 'error', 
-  variant: 'outline' 
+<Button onClick={() => addToast({
+  title: 'Error',
+  message: 'This is an error message!',
+  type: 'error',
+  variant: 'outline'
 })}>
   Error Outline Toast
 </Button>
@@ -1132,22 +1179,22 @@ const BasicExample = () => {
 ### Custom Position
 
 ```jsx
-<Button onClick={() => addToast({ 
-  title: 'Top Left', 
-  message: 'This toast appears at top left!', 
-  type: 'success', 
-  variant: 'outline', 
-  position: 'topLeft' 
+<Button onClick={() => addToast({
+  title: 'Top Left',
+  message: 'This toast appears at top left!',
+  type: 'success',
+  variant: 'outline',
+  position: 'topLeft'
 })}>
   Top Left Toast
 </Button>
 
-<Button onClick={() => addToast({ 
-  title: 'Bottom Right', 
-  message: 'This toast appears at bottom right!', 
-  type: 'info', 
-  variant: 'outline', 
-  position: 'bottomRight' 
+<Button onClick={() => addToast({
+  title: 'Bottom Right',
+  message: 'This toast appears at bottom right!',
+  type: 'info',
+  variant: 'outline',
+  position: 'bottomRight'
 })}>
   Bottom Right Toast
 </Button>
@@ -1162,36 +1209,36 @@ The CheckboxInput component provides checkbox functionality for selecting single
 ### Import
 
 ```jsx
-import { CheckboxInput, ListCheckboxInput } from "alope-ui-v3";
-import type { CheckboxOptionType } from "alope-ui-v3";
+import { CheckboxInput, ListCheckboxInput } from "alope-ui";
+import type { CheckboxOptionType } from "alope-ui";
 ```
 
 ### CheckboxInput Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | `required` | Checkbox label text |
-| `checked` | `boolean` | `false` | Checkbox checked state |
-| `indeterminate` | `boolean` | `false` | Indeterminate state for partial selection |
-| `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` | `required` | Change handler function |
-| `description` | `string` | `undefined` | Additional description text |
+| Prop            | Type                                         | Default     | Description                               |
+| --------------- | -------------------------------------------- | ----------- | ----------------------------------------- |
+| `label`         | `string`                                     | `required`  | Checkbox label text                       |
+| `checked`       | `boolean`                                    | `false`     | Checkbox checked state                    |
+| `indeterminate` | `boolean`                                    | `false`     | Indeterminate state for partial selection |
+| `onChange`      | `(e: ChangeEvent<HTMLInputElement>) => void` | `required`  | Change handler function                   |
+| `description`   | `string`                                     | `undefined` | Additional description text               |
 
 ### ListCheckboxInput Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `CheckboxOptionType[]` | `required` | Array of checkbox options |
-| `selectedValues` | `CheckboxOptionType[]` | `[]` | Currently selected options |
-| `onValueChange` | `(values: CheckboxOptionType[]) => void` | `required` | Change handler for selected values |
-| `variant` | `'solid' \| 'subtle' \| 'outline'` | `'solid'` | Visual variant style |
-| `checkboxSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
-| `containerClassName` | `string` | `""` | Container CSS class |
+| Prop                 | Type                                     | Default    | Description                        |
+| -------------------- | ---------------------------------------- | ---------- | ---------------------------------- |
+| `options`            | `CheckboxOptionType[]`                   | `required` | Array of checkbox options          |
+| `selectedValues`     | `CheckboxOptionType[]`                   | `[]`       | Currently selected options         |
+| `onValueChange`      | `(values: CheckboxOptionType[]) => void` | `required` | Change handler for selected values |
+| `variant`            | `'solid' \| 'subtle' \| 'outline'`       | `'solid'`  | Visual variant style               |
+| `checkboxSize`       | `'sm' \| 'md' \| 'lg'`                   | `'md'`     | Checkbox size                      |
+| `containerClassName` | `string`                                 | `""`       | Container CSS class                |
 
 ### Basic CheckboxInput
 
 ```jsx
-import { useState } from 'react';
-import { CheckboxInput } from "alope-ui-v3";
+import { useState } from "react";
+import { CheckboxInput } from "alope-ui";
 
 const BasicExample = () => {
   const [checked, setChecked] = useState(false);
@@ -1211,8 +1258,8 @@ const BasicExample = () => {
 
 ```jsx
 import { useState } from 'react';
-import { ListCheckboxInput } from "alope-ui-v3";
-import type { CheckboxOptionType } from "alope-ui-v3";
+import { ListCheckboxInput } from "alope-ui";
+import type { CheckboxOptionType } from "alope-ui";
 
 const options: CheckboxOptionType[] = [
   { value: 'chocolate', label: 'Chocolate' },
@@ -1267,45 +1314,53 @@ const [selectedOptions, setSelectedOptions] = useState<CheckboxOptionType[]>([])
 ### Variants
 
 ```jsx
-{/* Solid Variant */}
+{
+  /* Solid Variant */
+}
 <ListCheckboxInput
   options={options}
   selectedValues={selectedOptions}
   onValueChange={setSelectedOptions}
   variant="solid"
   checkboxSize="md"
-/>
+/>;
 
-{/* Subtle Variant */}
+{
+  /* Subtle Variant */
+}
 <ListCheckboxInput
   options={options}
   selectedValues={selectedOptions}
   onValueChange={setSelectedOptions}
   variant="subtle"
   checkboxSize="md"
-/>
+/>;
 
-{/* Outline Variant */}
+{
+  /* Outline Variant */
+}
 <ListCheckboxInput
   options={options}
   selectedValues={selectedOptions}
   onValueChange={setSelectedOptions}
   variant="outline"
   checkboxSize="md"
-/>
+/>;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Large Size */}
+{
+  /* Large Size */
+}
 <ListCheckboxInput
   options={options}
   selectedValues={selectedOptions}
   onValueChange={setSelectedOptions}
   variant="solid"
   checkboxSize="lg"
-/>
+/>;
 ```
 
 ---
@@ -1317,41 +1372,42 @@ The RadioInput component allows users to choose one option from a list of mutual
 ### Import
 
 ```jsx
-import { RadioInput } from "alope-ui-v3";
-import type { RadioOptionType } from "alope-ui-v3";
+import { RadioInput } from "alope-ui";
+import type { RadioOptionType } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | `required` | Name attribute for radio group |
-| `options` | `RadioOptionType[]` | `required` | Array of radio options |
-| `selectedValue` | `RadioOptionType \| undefined` | `undefined` | Currently selected option |
-| `onValueChange` | `(value: RadioOptionType) => void` | `required` | Change handler function |
-| `variant` | `'subtle' \| 'solid' \| 'outline'` | `'subtle'` | Visual variant style |
-| `radioSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio button size |
-| `disabled` | `boolean` | `false` | Disable all radio options |
-| `containerClassName` | `string` | `""` | Container CSS class |
-| `inputGroupClassName` | `string \| (isChecked: boolean) => string` | `""` | Input group CSS class |
-| `inputLabelClassName` | `string \| (isChecked: boolean) => string` | `""` | Label CSS class |
-| `inputRadioClassName` | `string \| (isChecked: boolean) => string` | `""` | Radio input CSS class |
+| Prop                  | Type                                       | Default     | Description                    |
+| --------------------- | ------------------------------------------ | ----------- | ------------------------------ |
+| `name`                | `string`                                   | `required`  | Name attribute for radio group |
+| `options`             | `RadioOptionType[]`                        | `required`  | Array of radio options         |
+| `selectedValue`       | `RadioOptionType \| undefined`             | `undefined` | Currently selected option      |
+| `onValueChange`       | `(value: RadioOptionType) => void`         | `required`  | Change handler function        |
+| `variant`             | `'subtle' \| 'solid' \| 'outline'`         | `'subtle'`  | Visual variant style           |
+| `radioSize`           | `'sm' \| 'md' \| 'lg'`                     | `'md'`      | Radio button size              |
+| `disabled`            | `boolean`                                  | `false`     | Disable all radio options      |
+| `containerClassName`  | `string`                                   | `""`        | Container CSS class            |
+| `inputGroupClassName` | `string \| (isChecked: boolean) => string` | `""`        | Input group CSS class          |
+| `inputLabelClassName` | `string \| (isChecked: boolean) => string` | `""`        | Label CSS class                |
+| `inputRadioClassName` | `string \| (isChecked: boolean) => string` | `""`        | Radio input CSS class          |
 
 ### Basic RadioInput
 
 ```jsx
-import { useState } from 'react';
-import { RadioInput } from "alope-ui-v3";
-import type { RadioOptionType } from "alope-ui-v3";
+import { useState } from "react";
+import { RadioInput } from "alope-ui";
+import type { RadioOptionType } from "alope-ui";
 
 const options: RadioOptionType[] = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'vanilla', label: 'Vanilla' },
+  { value: "chocolate", label: "Chocolate" },
+  { value: "strawberry", label: "Strawberry" },
+  { value: "vanilla", label: "Vanilla" },
 ];
 
 const BasicExample = () => {
-  const [selectedValue, setSelectedValue] = useState<RadioOptionType | undefined>(options[0]);
+  const [selectedValue, setSelectedValue] =
+    (useState < RadioOptionType) | (undefined > options[0]);
 
   return (
     <RadioInput
@@ -1367,54 +1423,64 @@ const BasicExample = () => {
 ### Variants
 
 ```jsx
-{/* Subtle Variant */}
+{
+  /* Subtle Variant */
+}
 <RadioInput
   name="variant-subtle"
   options={options}
   selectedValue={selectedValue}
   onValueChange={setSelectedValue}
   variant="subtle"
-/>
+/>;
 
-{/* Solid Variant */}
+{
+  /* Solid Variant */
+}
 <RadioInput
   name="variant-solid"
   options={options}
   selectedValue={selectedValue}
   onValueChange={setSelectedValue}
   variant="solid"
-/>
+/>;
 
-{/* Outline Variant */}
+{
+  /* Outline Variant */
+}
 <RadioInput
   name="variant-outline"
   options={options}
   selectedValue={selectedValue}
   onValueChange={setSelectedValue}
   variant="outline"
-/>
+/>;
 ```
 
 ### Sizes
 
 ```jsx
-{/* Small Size */}
+{
+  /* Small Size */
+}
 <RadioInput
   name="size-sm"
   options={options}
   selectedValue={selectedValue}
   onValueChange={setSelectedValue}
   radioSize="sm"
-/>
+/>;
 
-{/* Large Size */}
+{
+  /* Large Size */
+}
 <RadioInput
   name="size-lg"
   options={options}
   selectedValue={selectedValue}
   onValueChange={setSelectedValue}
   radioSize="lg"
-/>
+/>;
 ```
 
 ### Disabled State
@@ -1440,14 +1506,14 @@ const BasicExample = () => {
   containerClassName="gap-6 bg-blue-50 p-4 rounded-lg"
   inputGroupClassName={(isChecked) =>
     isChecked
-      ? 'bg-blue-100 border-blue-500 shadow-md'
-      : 'bg-white border-gray-300 hover:bg-gray-100'
+      ? "bg-blue-100 border-blue-500 shadow-md"
+      : "bg-white border-gray-300 hover:bg-gray-100"
   }
   inputLabelClassName={(isChecked) =>
-    isChecked ? 'text-blue-800 font-bold' : 'text-gray-600'
+    isChecked ? "text-blue-800 font-bold" : "text-gray-600"
   }
   inputRadioClassName={(isChecked) =>
-    isChecked ? 'bg-blue-600 border-blue-600' : 'bg-white border-gray-400'
+    isChecked ? "bg-blue-600 border-blue-600" : "bg-white border-gray-400"
   }
 />
 ```
@@ -1461,33 +1527,33 @@ The SelectInput component provides a dropdown interface for selecting one or mul
 ### Import
 
 ```jsx
-import { SelectInput } from "alope-ui-v3";
-import type { SelectOptionType } from "alope-ui-v3";
+import { SelectInput } from "alope-ui";
+import type { SelectOptionType } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `instanceId` | `string` | `required` | Unique identifier for the select instance |
-| `label` | `string` | `undefined` | Label text for the select |
-| `options` | `SelectOptionType[]` | `required` | Array of selectable options |
-| `value` | `SelectOptionType \| SelectOptionType[] \| null` | `null` | Selected value(s) |
-| `onChange` | `(value: any) => void` | `required` | Change handler function |
-| `placeholder` | `string` | `"Select..."` | Placeholder text |
-| `isMulti` | `boolean` | `false` | Enable multiple selection |
-| `isSearchable` | `boolean` | `false` | Enable search functionality |
-| `isClearable` | `boolean` | `false` | Enable clear button |
-| `error` | `string` | `undefined` | Error message to display |
-| `labelClassName` | `string` | `""` | Label CSS class |
-| `customClassNames` | `object` | `{}` | Custom class names for react-select components |
+| Prop               | Type                                             | Default       | Description                                    |
+| ------------------ | ------------------------------------------------ | ------------- | ---------------------------------------------- |
+| `instanceId`       | `string`                                         | `required`    | Unique identifier for the select instance      |
+| `label`            | `string`                                         | `undefined`   | Label text for the select                      |
+| `options`          | `SelectOptionType[]`                             | `required`    | Array of selectable options                    |
+| `value`            | `SelectOptionType \| SelectOptionType[] \| null` | `null`        | Selected value(s)                              |
+| `onChange`         | `(value: any) => void`                           | `required`    | Change handler function                        |
+| `placeholder`      | `string`                                         | `"Select..."` | Placeholder text                               |
+| `isMulti`          | `boolean`                                        | `false`       | Enable multiple selection                      |
+| `isSearchable`     | `boolean`                                        | `false`       | Enable search functionality                    |
+| `isClearable`      | `boolean`                                        | `false`       | Enable clear button                            |
+| `error`            | `string`                                         | `undefined`   | Error message to display                       |
+| `labelClassName`   | `string`                                         | `""`          | Label CSS class                                |
+| `customClassNames` | `object`                                         | `{}`          | Custom class names for react-select components |
 
 ### Single Select
 
 ```jsx
 import { useState } from 'react';
-import { SelectInput } from "alope-ui-v3";
-import type { SelectOptionType } from "alope-ui-v3";
+import { SelectInput } from "alope-ui";
+import type { SelectOptionType } from "alope-ui";
 
 const options: SelectOptionType[] = [
   { value: 'chocolate', label: 'Chocolate' },
@@ -1552,19 +1618,18 @@ const [multipleValues, setMultipleValues] = useState<readonly SelectOptionType[]
   placeholder="Custom styled select..."
   labelClassName="font-bold text-lg"
   customClassNames={{
-    control: ({ isFocused }) => cn(
-      '!w-full !border !rounded-lg p-2 !shadow-md !sm:text-sm !min-h-[38px]',
-      isFocused
-        ? 'border-info !ring-1 !ring-info'
-        : '!border-info'
-    ),
+    control: ({ isFocused }) =>
+      cn(
+        "!w-full !border !rounded-lg p-2 !shadow-md !sm:text-sm !min-h-[38px]",
+        isFocused ? "border-info !ring-1 !ring-info" : "!border-info"
+      ),
     option: ({ isFocused, isSelected }) =>
       `!px-4 !py-2 !cursor-pointer ${
         isSelected
-          ? '!bg-info !text-white'
+          ? "!bg-info !text-white"
           : isFocused
-          ? '!bg-info/30'
-          : '!bg-white'
+          ? "!bg-info/30"
+          : "!bg-white"
       }`,
   }}
 />
@@ -1579,33 +1644,27 @@ The TextInput component provides a text input field for users to enter text info
 ### Import
 
 ```jsx
-import { TextInput } from "alope-ui-v3";
+import { TextInput } from "alope-ui";
 ```
 
 ### Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | `required` | Input element ID |
-| `name` | `string` | `required` | Input name attribute |
-| `label` | `string` | `undefined` | Label text for the input |
-| `placeholder` | `string` | `undefined` | Placeholder text |
-| `error` | `string` | `undefined` | Error message to display |
-| `disabled` | `boolean` | `false` | Disable the input |
+| Prop          | Type      | Default     | Description              |
+| ------------- | --------- | ----------- | ------------------------ |
+| `id`          | `string`  | `required`  | Input element ID         |
+| `name`        | `string`  | `required`  | Input name attribute     |
+| `label`       | `string`  | `undefined` | Label text for the input |
+| `placeholder` | `string`  | `undefined` | Placeholder text         |
+| `error`       | `string`  | `undefined` | Error message to display |
+| `disabled`    | `boolean` | `false`     | Disable the input        |
 
 ### Basic TextInput
 
 ```jsx
-import { TextInput } from "alope-ui-v3";
+import { TextInput } from "alope-ui";
 
 const BasicExample = () => {
-  return (
-    <TextInput
-      id="basic"
-      name="basic"
-      placeholder="Enter text here"
-    />
-  );
+  return <TextInput id="basic" name="basic" placeholder="Enter text here" />;
 };
 ```
 
@@ -1658,4 +1717,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.