alope-ui 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +455 -396
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # ALOPE UI Library
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/alope-ui-v3.svg)](https://www.npmjs.com/package/alope-ui-v3)
3
+ [![npm version](https://img.shields.io/npm/v/alope-ui.svg)](https://www.npmjs.com/package/alope-ui)
4
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
5
  [![React](https://img.shields.io/badge/React-%2320232a.svg?logo=react&logoColor=%2361DAFB)](https://reactjs.org/)
6
6
 
@@ -28,11 +28,13 @@
28
28
  ### Installation
29
29
 
30
30
  **Using npm:**
31
+
31
32
  ```bash
32
- npm install alope-ui-v3
33
+ npm install alope-ui
33
34
  ```
34
35
 
35
- **Add ``@import`` directive(s) on your main css file:**
36
+ **Add `@import` directive(s) on your main css file:**
37
+
36
38
  ```css
37
39
  /* index.css */
38
40
 
@@ -40,7 +42,7 @@ npm install alope-ui-v3
40
42
  @import "tailwindcss";
41
43
 
42
44
  /* Then import the styles from Alope UI */
43
- @import "../node_modules/alope-ui-v3/dist/index.css";
45
+ @import "../node_modules/alope-ui/dist/index.css";
44
46
  ```
45
47
 
46
48
  ### Basic Setup
@@ -48,8 +50,8 @@ npm install alope-ui-v3
48
50
  Import and use any component in your React application:
49
51
 
50
52
  ```jsx
51
- import React from 'react';
52
- import { Button } from 'alope-ui-v3';
53
+ import React from "react";
54
+ import { Button } from "alope-ui";
53
55
 
54
56
  function App() {
55
57
  return (
@@ -66,18 +68,17 @@ export default App;
66
68
 
67
69
  ### ⚠️ IMPORTANT NOTES:
68
70
 
69
- 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.
71
+ 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.
70
72
  Refer to the [official documentation](https://reactrouter.com/start/declarative/installation) for setup instructions if needed.
71
73
 
72
-
73
74
  ```jsx
74
- import React from 'react';
75
- import { Button } from 'alope-ui-v3';
75
+ import React from "react";
76
+ import { Button } from "alope-ui";
76
77
 
77
78
  function App() {
78
79
  return (
79
80
  <div className="App">
80
- <Button to='/button' variant="solid" variantType="primary">
81
+ <Button to="/button" variant="solid" variantType="primary">
81
82
  Hello I'm going to Button Page!
82
83
  </Button>
83
84
  </div>
@@ -92,24 +93,29 @@ export default App;
92
93
  ## 🧩 Component Library
93
94
 
94
95
  ### Navigation Components
96
+
95
97
  - [🪗 Accordion](#accordion) - Collapsible content panels
96
98
  - [🍞 Breadcrumb](#breadcrumb) - Navigation trail
97
99
 
98
100
  ### Feedback Components
101
+
99
102
  - [⚠️ Alert](#alert) - Status messages and notifications
100
103
  - [🍞 Toast](#toast) - Temporary notification messages
101
104
 
102
105
  ### Data Display
106
+
103
107
  - [🏷️ Badge](#badge) - Status indicators and labels
104
108
  - [🃏 Card](#card) - Content containers
105
109
 
106
110
  ### Form Controls
111
+
107
112
  - [☑️ Checkbox Input](#checkbox-input) - Multiple choice selections
108
113
  - [🔘 Radio Input](#radio-input) - Single choice selections
109
114
  - [📝 Select Input](#select-input) - Dropdown selections
110
115
  - [⌨️ Text Input](#text-input) - Text input fields
111
116
 
112
117
  ### Interactive Elements
118
+
113
119
  - [🔘 Button](#button) - Clickable actions
114
120
  - [🪟 Modal](#modal) - Dialog boxes and overlays
115
121
  - [📱 Offcanvas](#offcanvas) - Side panels and drawers
@@ -125,41 +131,44 @@ The Accordion component allows users to show and hide sections of related conten
125
131
  ### Import
126
132
 
127
133
  ```jsx
128
- import { Accordion } from "alope-ui-v3";
134
+ import { Accordion } from "alope-ui";
129
135
  ```
130
136
 
131
137
  ### Props
132
138
 
133
- | Prop | Type | Default | Description |
134
- |------|------|---------|-------------|
135
- | `data` | `AccordionItem[]` | `[]` | Array of accordion items |
136
- | `single` | `boolean` | `true` | Allow only one panel open at a time |
137
- | `openIndex` | `number \| number[]` | `undefined` | Controlled open state |
138
- | `onToggleItem` | `function` | `undefined` | Callback when item is toggled |
139
- | `icon` | `function` | `undefined` | Custom icon renderer |
140
- | `labelClassName` | `string` | `""` | Custom CSS class for labels |
141
- | `labelContainerClassName` | `string` | `""` | Custom CSS class for label containers |
142
- | `descriptionClassName` | `string` | `""` | Custom CSS class for descriptions |
139
+ | Prop | Type | Default | Description |
140
+ | ------------------------- | -------------------- | ----------- | ------------------------------------- |
141
+ | `data` | `AccordionItem[]` | `[]` | Array of accordion items |
142
+ | `single` | `boolean` | `true` | Allow only one panel open at a time |
143
+ | `openIndex` | `number \| number[]` | `undefined` | Controlled open state |
144
+ | `onToggleItem` | `function` | `undefined` | Callback when item is toggled |
145
+ | `icon` | `function` | `undefined` | Custom icon renderer |
146
+ | `labelClassName` | `string` | `""` | Custom CSS class for labels |
147
+ | `labelContainerClassName` | `string` | `""` | Custom CSS class for label containers |
148
+ | `descriptionClassName` | `string` | `""` | Custom CSS class for descriptions |
143
149
 
144
150
  ### Basic Usage
145
151
 
146
152
  ```jsx
147
153
  const accordionData = [
148
- {
149
- label: "What is ALOPE UI?",
150
- description: "ALOPE UI is a modern React component library that helps you build beautiful user interfaces quickly."
154
+ {
155
+ label: "What is ALOPE UI?",
156
+ description:
157
+ "ALOPE UI is a modern React component library that helps you build beautiful user interfaces quickly.",
151
158
  },
152
- {
153
- label: "How do I install it?",
154
- description: "You can install ALOPE UI using npm, yarn, or pnpm. Check the installation section for details."
159
+ {
160
+ label: "How do I install it?",
161
+ description:
162
+ "You can install ALOPE UI using npm, yarn, or pnpm. Check the installation section for details.",
155
163
  },
156
- {
157
- label: "Is it free to use?",
158
- description: "Yes! ALOPE UI is completely free and open-source under the MIT license."
164
+ {
165
+ label: "Is it free to use?",
166
+ description:
167
+ "Yes! ALOPE UI is completely free and open-source under the MIT license.",
159
168
  },
160
169
  ];
161
170
 
162
- <Accordion data={accordionData} />
171
+ <Accordion data={accordionData} />;
163
172
  ```
164
173
 
165
174
  ### Single Panel Mode
@@ -198,24 +207,24 @@ const [openIndex, setOpenIndex] = useState(0);
198
207
  data={accordionData}
199
208
  openIndex={openIndex}
200
209
  onToggleItem={(index) => setOpenIndex(index)}
201
- icon={isActive => (
210
+ icon={(isActive) => (
202
211
  <svg
203
212
  className={`w-5 h-5 transition-transform duration-300 ${
204
- isActive ? 'rotate-180' : 'rotate-0'
213
+ isActive ? "rotate-180" : "rotate-0"
205
214
  }`}
206
215
  fill="none"
207
216
  stroke="currentColor"
208
217
  viewBox="0 0 24 24"
209
218
  >
210
- <path
211
- strokeLinecap="round"
212
- strokeLinejoin="round"
213
- strokeWidth="2"
214
- d="M19 9l-7 7-7-7"
219
+ <path
220
+ strokeLinecap="round"
221
+ strokeLinejoin="round"
222
+ strokeWidth="2"
223
+ d="M19 9l-7 7-7-7"
215
224
  />
216
225
  </svg>
217
226
  )}
218
- />
227
+ />;
219
228
  ```
220
229
 
221
230
  ---
@@ -227,20 +236,20 @@ The Alert component displays important messages to users with different severity
227
236
  ### Import
228
237
 
229
238
  ```jsx
230
- import { Alert } from "alope-ui-v3";
239
+ import { Alert } from "alope-ui";
231
240
  ```
232
241
 
233
242
  ### Props
234
243
 
235
- | Prop | Type | Default | Description |
236
- |------|------|---------|-------------|
237
- | `type` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | Alert severity type |
238
- | `title` | `string` | `""` | Alert title |
239
- | `description` | `string` | `""` | Alert description |
240
- | `icon` | `ReactNode` | `undefined` | Custom icon |
241
- | `action` | `ReactNode` | `undefined` | Action button or element |
242
- | `withClose` | `boolean` | `false` | Show close button |
243
- | `onClose` | `function` | `undefined` | Close callback |
244
+ | Prop | Type | Default | Description |
245
+ | ------------- | --------------------------------------------- | ----------- | ------------------------ |
246
+ | `type` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | Alert severity type |
247
+ | `title` | `string` | `""` | Alert title |
248
+ | `description` | `string` | `""` | Alert description |
249
+ | `icon` | `ReactNode` | `undefined` | Custom icon |
250
+ | `action` | `ReactNode` | `undefined` | Action button or element |
251
+ | `withClose` | `boolean` | `false` | Show close button |
252
+ | `onClose` | `function` | `undefined` | Close callback |
244
253
 
245
254
  ### Basic Usage
246
255
 
@@ -254,33 +263,41 @@ import { Alert } from "alope-ui-v3";
254
263
  ### Alert Types
255
264
 
256
265
  ```jsx
257
- {/* Success Alert */}
258
- <Alert
259
- type="success"
260
- title="Success!"
261
- description="Your changes have been saved successfully."
262
- />
266
+ {
267
+ /* Success Alert */
268
+ }
269
+ <Alert
270
+ type="success"
271
+ title="Success!"
272
+ description="Your changes have been saved successfully."
273
+ />;
263
274
 
264
- {/* Info Alert */}
265
- <Alert
266
- type="info"
267
- title="Information"
268
- description="Here's some helpful information for you."
269
- />
275
+ {
276
+ /* Info Alert */
277
+ }
278
+ <Alert
279
+ type="info"
280
+ title="Information"
281
+ description="Here's some helpful information for you."
282
+ />;
270
283
 
271
- {/* Warning Alert */}
272
- <Alert
273
- type="warning"
274
- title="Warning"
275
- description="Please review your input before proceeding."
276
- />
284
+ {
285
+ /* Warning Alert */
286
+ }
287
+ <Alert
288
+ type="warning"
289
+ title="Warning"
290
+ description="Please review your input before proceeding."
291
+ />;
277
292
 
278
- {/* Error Alert */}
279
- <Alert
280
- type="error"
281
- title="Error"
282
- description="Something went wrong. Please try again."
283
- />
293
+ {
294
+ /* Error Alert */
295
+ }
296
+ <Alert
297
+ type="error"
298
+ title="Error"
299
+ description="Something went wrong. Please try again."
300
+ />;
284
301
  ```
285
302
 
286
303
  ### Alert with Custom Icon
@@ -291,12 +308,17 @@ import { Alert } from "alope-ui-v3";
291
308
  title="Important Notice"
292
309
  description="This action cannot be undone."
293
310
  icon={
294
- <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
295
- <path
296
- strokeLinecap="round"
297
- strokeLinejoin="round"
298
- strokeWidth={2}
299
- 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"
311
+ <svg
312
+ className="w-6 h-6"
313
+ fill="none"
314
+ stroke="currentColor"
315
+ viewBox="0 0 24 24"
316
+ >
317
+ <path
318
+ strokeLinecap="round"
319
+ strokeLinejoin="round"
320
+ strokeWidth={2}
321
+ 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"
300
322
  />
301
323
  </svg>
302
324
  }
@@ -326,7 +348,7 @@ import { Alert } from "alope-ui-v3";
326
348
  type="success"
327
349
  title="Success!"
328
350
  description="Your profile has been updated successfully."
329
- onClose={() => console.log('Alert closed')}
351
+ onClose={() => console.log("Alert closed")}
330
352
  />
331
353
  ```
332
354
 
@@ -339,18 +361,18 @@ The Badge component is used to display small pieces of information like status,
339
361
  ### Import
340
362
 
341
363
  ```jsx
342
- import { Badge } from "alope-ui-v3";
364
+ import { Badge } from "alope-ui";
343
365
  ```
344
366
 
345
367
  ### Props
346
368
 
347
- | Prop | Type | Default | Description |
348
- |------|------|---------|-------------|
349
- | `variant` | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Badge color variant |
350
- | `children` | `ReactNode` | `undefined` | Badge content |
351
- | `isAbsolute` | `boolean` | `false` | Absolute positioning |
352
- | `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Position when absolute |
353
- | `icon` | `ReactNode` | `undefined` | Custom icon |
369
+ | Prop | Type | Default | Description |
370
+ | ------------ | -------------------------------------------------------------- | ------------- | ---------------------- |
371
+ | `variant` | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Badge color variant |
372
+ | `children` | `ReactNode` | `undefined` | Badge content |
373
+ | `isAbsolute` | `boolean` | `false` | Absolute positioning |
374
+ | `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | Position when absolute |
375
+ | `icon` | `ReactNode` | `undefined` | Custom icon |
354
376
 
355
377
  ### Basic Variants
356
378
 
@@ -378,14 +400,8 @@ Perfect for notification indicators or status markers:
378
400
 
379
401
  ```jsx
380
402
  <div className="relative inline-block">
381
- <Button>
382
- Messages
383
- </Button>
384
- <Badge
385
- variant="error"
386
- position="top-right"
387
- isAbsolute
388
- >
403
+ <Button>Messages</Button>
404
+ <Badge variant="error" position="top-right" isAbsolute>
389
405
  3
390
406
  </Badge>
391
407
  </div>
@@ -396,22 +412,30 @@ Perfect for notification indicators or status markers:
396
412
  ```jsx
397
413
  <div className="grid grid-cols-2 gap-4 w-fit">
398
414
  <Card containerClassName="relative p-8">
399
- <Badge variant="success" position="top-left" isAbsolute>1</Badge>
415
+ <Badge variant="success" position="top-left" isAbsolute>
416
+ 1
417
+ </Badge>
400
418
  <span>Top Left</span>
401
419
  </Card>
402
-
420
+
403
421
  <Card containerClassName="relative p-8">
404
- <Badge variant="info" position="top-right" isAbsolute>2</Badge>
422
+ <Badge variant="info" position="top-right" isAbsolute>
423
+ 2
424
+ </Badge>
405
425
  <span>Top Right</span>
406
426
  </Card>
407
-
427
+
408
428
  <Card containerClassName="relative p-8">
409
- <Badge variant="warning" position="bottom-left" isAbsolute>3</Badge>
429
+ <Badge variant="warning" position="bottom-left" isAbsolute>
430
+ 3
431
+ </Badge>
410
432
  <span>Bottom Left</span>
411
433
  </Card>
412
-
434
+
413
435
  <Card containerClassName="relative p-8">
414
- <Badge variant="error" position="bottom-right" isAbsolute>4</Badge>
436
+ <Badge variant="error" position="bottom-right" isAbsolute>
437
+ 4
438
+ </Badge>
415
439
  <span>Bottom Right</span>
416
440
  </Card>
417
441
  </div>
@@ -426,35 +450,35 @@ The Breadcrumb component provides navigation context showing the user's location
426
450
  ### Import
427
451
 
428
452
  ```jsx
429
- import { Breadcrumb } from "alope-ui-v3";
453
+ import { Breadcrumb } from "alope-ui";
430
454
  ```
431
455
 
432
456
  ### Props
433
457
 
434
- | Prop | Type | Default | Description |
435
- |------|------|---------|-------------|
436
- | `data` | `BreadcrumbItem[]` | `[]` | Array of breadcrumb items |
437
- | `separator` | `ReactNode` | `"/"` | Custom separator between items |
438
- | `linkClassName` | `string` | `""` | Custom CSS class for links |
458
+ | Prop | Type | Default | Description |
459
+ | --------------- | ------------------ | ------- | ------------------------------ |
460
+ | `data` | `BreadcrumbItem[]` | `[]` | Array of breadcrumb items |
461
+ | `separator` | `ReactNode` | `"/"` | Custom separator between items |
462
+ | `linkClassName` | `string` | `""` | Custom CSS class for links |
439
463
 
440
464
  ### Basic Usage
441
465
 
442
466
  ```jsx
443
467
  const breadcrumbData = [
444
- { label: 'Home', path: '/' },
445
- { label: 'Products', path: '/products' },
446
- { label: 'Laptops', path: '/products/laptops' },
447
- { label: 'MacBook Pro' } // Current page (no path)
468
+ { label: "Home", path: "/" },
469
+ { label: "Products", path: "/products" },
470
+ { label: "Laptops", path: "/products/laptops" },
471
+ { label: "MacBook Pro" }, // Current page (no path)
448
472
  ];
449
473
 
450
- <Breadcrumb data={breadcrumbData} />
474
+ <Breadcrumb data={breadcrumbData} />;
451
475
  ```
452
476
 
453
477
  ### Custom Separator
454
478
 
455
479
  ```jsx
456
- <Breadcrumb
457
- data={breadcrumbData}
480
+ <Breadcrumb
481
+ data={breadcrumbData}
458
482
  separator={
459
483
  <svg className="w-4 h-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
460
484
  <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 = [
478
502
  ```jsx
479
503
  const breadcrumbWithIcons = [
480
504
  {
481
- label: 'Home',
482
- path: '/',
505
+ label: "Home",
506
+ path: "/",
483
507
  icon: (
484
508
  <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
485
509
  <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 = [
487
511
  ),
488
512
  },
489
513
  {
490
- label: 'Products',
491
- path: '/products',
514
+ label: "Products",
515
+ path: "/products",
492
516
  icon: <span className="mr-1">🛍️</span>,
493
517
  },
494
518
  {
495
- label: 'MacBook Pro',
519
+ label: "MacBook Pro",
496
520
  icon: <span className="mr-1">💻</span>,
497
521
  },
498
522
  ];
499
523
 
500
- <Breadcrumb data={breadcrumbWithIcons} />
524
+ <Breadcrumb data={breadcrumbWithIcons} />;
501
525
  ```
502
526
 
503
527
  ---
@@ -509,24 +533,24 @@ The Button component provides clickable elements for user interactions with vari
509
533
  ### Import
510
534
 
511
535
  ```jsx
512
- import { Button } from "alope-ui-v3";
536
+ import { Button } from "alope-ui";
513
537
  ```
514
538
 
515
539
  ### Props
516
540
 
517
- | Prop | Type | Default | Description |
518
- |------|------|---------|-------------|
519
- | `variant` | `'solid' \| 'outline' \| 'ghost' \| 'plain'` | `'solid'` | Button style variant |
520
- | `variantType` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'primary'` | Button color theme |
521
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
522
- | `radius` | `'regular' \| 'stadium'` | `'regular'` | Border radius style |
523
- | `fullWidth` | `boolean` | `false` | Full width button |
524
- | `disabled` | `boolean` | `false` | Disabled state |
525
- | `to` | `string` | `undefined` | Link destination |
526
- | `prefixIcon` | `ReactNode` | `undefined` | Icon before text |
527
- | `suffixIcon` | `ReactNode` | `undefined` | Icon after text |
528
- | `onClick` | `function` | `undefined` | Click handler |
529
- | `children` | `ReactNode` | `undefined` | Button content |
541
+ | Prop | Type | Default | Description |
542
+ | ------------- | ------------------------------------------------------------------------- | ----------- | -------------------- |
543
+ | `variant` | `'solid' \| 'outline' \| 'ghost' \| 'plain'` | `'solid'` | Button style variant |
544
+ | `variantType` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'primary'` | Button color theme |
545
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
546
+ | `radius` | `'regular' \| 'stadium'` | `'regular'` | Border radius style |
547
+ | `fullWidth` | `boolean` | `false` | Full width button |
548
+ | `disabled` | `boolean` | `false` | Disabled state |
549
+ | `to` | `string` | `undefined` | Link destination |
550
+ | `prefixIcon` | `ReactNode` | `undefined` | Icon before text |
551
+ | `suffixIcon` | `ReactNode` | `undefined` | Icon after text |
552
+ | `onClick` | `function` | `undefined` | Click handler |
553
+ | `children` | `ReactNode` | `undefined` | Button content |
530
554
 
531
555
  ### Button Variants
532
556
 
@@ -585,20 +609,40 @@ import { Button } from "alope-ui-v3";
585
609
 
586
610
  ```jsx
587
611
  <div className="flex flex-wrap gap-2">
588
- <Button
612
+ <Button
589
613
  prefixIcon={
590
- <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
591
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
614
+ <svg
615
+ className="w-4 h-4"
616
+ fill="none"
617
+ stroke="currentColor"
618
+ viewBox="0 0 24 24"
619
+ >
620
+ <path
621
+ strokeLinecap="round"
622
+ strokeLinejoin="round"
623
+ strokeWidth={2}
624
+ d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
625
+ />
592
626
  </svg>
593
627
  }
594
628
  >
595
629
  Search
596
630
  </Button>
597
-
598
- <Button
631
+
632
+ <Button
599
633
  suffixIcon={
600
- <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
601
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
634
+ <svg
635
+ className="w-4 h-4"
636
+ fill="none"
637
+ stroke="currentColor"
638
+ viewBox="0 0 24 24"
639
+ >
640
+ <path
641
+ strokeLinecap="round"
642
+ strokeLinejoin="round"
643
+ strokeWidth={2}
644
+ d="M17 8l4 4m0 0l-4 4m4-4H3"
645
+ />
602
646
  </svg>
603
647
  }
604
648
  >
@@ -620,21 +664,17 @@ import { Button } from "alope-ui-v3";
620
664
  ```jsx
621
665
  <div className="space-y-4">
622
666
  <div className="flex flex-wrap gap-2">
623
- <Button
624
- variant="solid"
625
- variantType="primary"
667
+ <Button
668
+ variant="solid"
669
+ variantType="primary"
626
670
  size="lg"
627
671
  prefixIcon={<PlusIcon />}
628
- onClick={() => alert('Button clicked!')}
672
+ onClick={() => alert("Button clicked!")}
629
673
  >
630
674
  Create New
631
675
  </Button>
632
-
633
- <Button
634
- variant="outline"
635
- variantType="secondary"
636
- size="lg"
637
- >
676
+
677
+ <Button variant="outline" variantType="secondary" size="lg">
638
678
  Cancel
639
679
  </Button>
640
680
  </div>
@@ -650,23 +690,23 @@ The Card component provides a flexible container for displaying content in a str
650
690
  ### Import
651
691
 
652
692
  ```jsx
653
- import { Card } from "alope-ui-v3";
693
+ import { Card } from "alope-ui";
654
694
  ```
655
695
 
656
696
  ### Props
657
697
 
658
- | Prop | Type | Default | Description |
659
- |------|------|---------|-------------|
660
- | `image` | `string` | `undefined` | Image URL |
661
- | `title` | `string` | `undefined` | Card title |
662
- | `description` | `string` | `undefined` | Card description |
663
- | `footer` | `ReactNode` | `undefined` | Card footer content |
664
- | `ribbon` | `string` | `undefined` | Ribbon text |
665
- | `horizontal` | `boolean` | `false` | Horizontal layout |
666
- | `children` | `ReactNode` | `undefined` | Card content |
667
- | `containerClassName` | `string` | `""` | Container CSS class |
668
- | `titleClassName` | `string` | `""` | Title CSS class |
669
- | `descriptionClassName` | `string` | `""` | Description CSS class |
698
+ | Prop | Type | Default | Description |
699
+ | ---------------------- | ----------- | ----------- | --------------------- |
700
+ | `image` | `string` | `undefined` | Image URL |
701
+ | `title` | `string` | `undefined` | Card title |
702
+ | `description` | `string` | `undefined` | Card description |
703
+ | `footer` | `ReactNode` | `undefined` | Card footer content |
704
+ | `ribbon` | `string` | `undefined` | Ribbon text |
705
+ | `horizontal` | `boolean` | `false` | Horizontal layout |
706
+ | `children` | `ReactNode` | `undefined` | Card content |
707
+ | `containerClassName` | `string` | `""` | Container CSS class |
708
+ | `titleClassName` | `string` | `""` | Title CSS class |
709
+ | `descriptionClassName` | `string` | `""` | Description CSS class |
670
710
 
671
711
  ### Basic Card
672
712
 
@@ -688,7 +728,9 @@ import { Card } from "alope-ui-v3";
688
728
  footer={
689
729
  <div className="flex justify-between items-center">
690
730
  <span className="text-2xl font-bold text-green-600">$99</span>
691
- <Button size="sm" variantType="primary">Enroll Now</Button>
731
+ <Button size="sm" variantType="primary">
732
+ Enroll Now
733
+ </Button>
692
734
  </div>
693
735
  }
694
736
  />
@@ -720,8 +762,12 @@ import { Card } from "alope-ui-v3";
720
762
  description="Learn the core concepts of JavaScript programming from scratch. Perfect for beginners who want to start their coding journey."
721
763
  footer={
722
764
  <div className="flex gap-2">
723
- <Button size="sm" variant="outline">Preview</Button>
724
- <Button size="sm" variantType="primary">Start Learning</Button>
765
+ <Button size="sm" variant="outline">
766
+ Preview
767
+ </Button>
768
+ <Button size="sm" variantType="primary">
769
+ Start Learning
770
+ </Button>
725
771
  </div>
726
772
  }
727
773
  />
@@ -770,19 +816,19 @@ The Modal component provides overlay dialogs for important user interactions and
770
816
  ### Import
771
817
 
772
818
  ```jsx
773
- import { Modal } from "alope-ui-v3";
819
+ import { Modal } from "alope-ui";
774
820
  ```
775
821
 
776
822
  ### Props
777
823
 
778
- | Prop | Type | Default | Description |
779
- |------|------|---------|-------------|
780
- | `isOpen` | `boolean` | `false` | Modal visibility state |
781
- | `onClose` | `function` | `required` | Close handler |
782
- | `title` | `string` | `undefined` | Modal title |
783
- | `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Modal size |
784
- | `overlayClose` | `boolean` | `true` | Close on overlay click |
785
- | `children` | `ReactNode` | `undefined` | Modal content |
824
+ | Prop | Type | Default | Description |
825
+ | -------------- | ------------------------------ | ----------- | ---------------------- |
826
+ | `isOpen` | `boolean` | `false` | Modal visibility state |
827
+ | `onClose` | `function` | `required` | Close handler |
828
+ | `title` | `string` | `undefined` | Modal title |
829
+ | `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Modal size |
830
+ | `overlayClose` | `boolean` | `true` | Close on overlay click |
831
+ | `children` | `ReactNode` | `undefined` | Modal content |
786
832
 
787
833
  ### Basic Modal
788
834
 
@@ -790,10 +836,8 @@ import { Modal } from "alope-ui-v3";
790
836
  const [isOpen, setIsOpen] = useState(false);
791
837
 
792
838
  <>
793
- <Button onClick={() => setIsOpen(true)}>
794
- Open Modal
795
- </Button>
796
-
839
+ <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
840
+
797
841
  <Modal
798
842
  isOpen={isOpen}
799
843
  onClose={() => setIsOpen(false)}
@@ -805,19 +849,14 @@ const [isOpen, setIsOpen] = useState(false);
805
849
  This is a basic modal example. You can put any content here.
806
850
  </p>
807
851
  <div className="flex justify-end gap-2">
808
- <Button
809
- variant="outline"
810
- onClick={() => setIsOpen(false)}
811
- >
852
+ <Button variant="outline" onClick={() => setIsOpen(false)}>
812
853
  Cancel
813
854
  </Button>
814
- <Button onClick={() => setIsOpen(false)}>
815
- Confirm
816
- </Button>
855
+ <Button onClick={() => setIsOpen(false)}>Confirm</Button>
817
856
  </div>
818
857
  </div>
819
858
  </Modal>
820
- </>
859
+ </>;
821
860
  ```
822
861
 
823
862
  ### Confirmation Modal
@@ -827,7 +866,7 @@ const [isDeleteOpen, setIsDeleteOpen] = useState(false);
827
866
 
828
867
  const handleDelete = () => {
829
868
  // Perform delete action
830
- console.log('Item deleted');
869
+ console.log("Item deleted");
831
870
  setIsDeleteOpen(false);
832
871
  };
833
872
 
@@ -835,7 +874,7 @@ const handleDelete = () => {
835
874
  <Button variantType="error" onClick={() => setIsDeleteOpen(true)}>
836
875
  Delete Item
837
876
  </Button>
838
-
877
+
839
878
  <Modal
840
879
  isOpen={isDeleteOpen}
841
880
  onClose={() => setIsDeleteOpen(false)}
@@ -848,22 +887,16 @@ const handleDelete = () => {
848
887
  Are you sure you want to delete this item? This action cannot be undone.
849
888
  </p>
850
889
  <div className="flex justify-end gap-3">
851
- <Button
852
- variant="outline"
853
- onClick={() => setIsDeleteOpen(false)}
854
- >
890
+ <Button variant="outline" onClick={() => setIsDeleteOpen(false)}>
855
891
  Cancel
856
892
  </Button>
857
- <Button
858
- variantType="error"
859
- onClick={handleDelete}
860
- >
893
+ <Button variantType="error" onClick={handleDelete}>
861
894
  Yes, Delete
862
895
  </Button>
863
896
  </div>
864
897
  </div>
865
898
  </Modal>
866
- </>
899
+ </>;
867
900
  ```
868
901
 
869
902
  ### Form Modal
@@ -872,10 +905,8 @@ const handleDelete = () => {
872
905
  const [isFormOpen, setIsFormOpen] = useState(false);
873
906
 
874
907
  <>
875
- <Button onClick={() => setIsFormOpen(true)}>
876
- Add User
877
- </Button>
878
-
908
+ <Button onClick={() => setIsFormOpen(true)}>Add User</Button>
909
+
879
910
  <Modal
880
911
  isOpen={isFormOpen}
881
912
  onClose={() => setIsFormOpen(false)}
@@ -884,11 +915,7 @@ const [isFormOpen, setIsFormOpen] = useState(false);
884
915
  >
885
916
  <div className="p-6">
886
917
  <form className="space-y-4">
887
- <TextInput
888
- label="Full Name"
889
- placeholder="Enter full name"
890
- required
891
- />
918
+ <TextInput label="Full Name" placeholder="Enter full name" required />
892
919
  <TextInput
893
920
  label="Email Address"
894
921
  type="email"
@@ -898,16 +925,16 @@ const [isFormOpen, setIsFormOpen] = useState(false);
898
925
  <SelectInput
899
926
  label="Role"
900
927
  options={[
901
- { label: 'Admin', value: 'admin' },
902
- { label: 'User', value: 'user' },
903
- { label: 'Moderator', value: 'moderator' }
928
+ { label: "Admin", value: "admin" },
929
+ { label: "User", value: "user" },
930
+ { label: "Moderator", value: "moderator" },
904
931
  ]}
905
932
  placeholder="Select role"
906
933
  />
907
934
  <div className="flex justify-end gap-3 pt-4">
908
- <Button
935
+ <Button
909
936
  type="button"
910
- variant="outline"
937
+ variant="outline"
911
938
  onClick={() => setIsFormOpen(false)}
912
939
  >
913
940
  Cancel
@@ -919,7 +946,7 @@ const [isFormOpen, setIsFormOpen] = useState(false);
919
946
  </form>
920
947
  </div>
921
948
  </Modal>
922
- </>
949
+ </>;
923
950
  ```
924
951
 
925
952
  ### Modal Sizes
@@ -942,21 +969,21 @@ The Offcanvas component provides a sliding panel for displaying hidden content l
942
969
  ### Import
943
970
 
944
971
  ```jsx
945
- import { Offcanvas } from "alope-ui-v3";
972
+ import { Offcanvas } from "alope-ui";
946
973
  ```
947
974
 
948
975
  ### Props
949
976
 
950
- | Prop | Type | Default | Description |
951
- |------|------|---------|-------------|
952
- | `isOpen` | `boolean` | `false` | Controls visibility of the offcanvas |
953
- | `onClose` | `() => void` | `required` | Callback function when offcanvas closes |
954
- | `title` | `string` | `undefined` | Offcanvas header title |
955
- | `position` | `'left' \| 'right'` | `'left'` | Position where offcanvas slides from |
956
- | `children` | `ReactNode` | `undefined` | Offcanvas content |
957
- | `className` | `string` | `""` | Custom CSS class for offcanvas container |
958
- | `titleClassName` | `string` | `""` | Custom CSS class for title |
959
- | `closeButtonClassName` | `string` | `""` | Custom CSS class for close button |
977
+ | Prop | Type | Default | Description |
978
+ | ---------------------- | ------------------- | ----------- | ---------------------------------------- |
979
+ | `isOpen` | `boolean` | `false` | Controls visibility of the offcanvas |
980
+ | `onClose` | `() => void` | `required` | Callback function when offcanvas closes |
981
+ | `title` | `string` | `undefined` | Offcanvas header title |
982
+ | `position` | `'left' \| 'right'` | `'left'` | Position where offcanvas slides from |
983
+ | `children` | `ReactNode` | `undefined` | Offcanvas content |
984
+ | `className` | `string` | `""` | Custom CSS class for offcanvas container |
985
+ | `titleClassName` | `string` | `""` | Custom CSS class for title |
986
+ | `closeButtonClassName` | `string` | `""` | Custom CSS class for close button |
960
987
 
961
988
  ### Basic Offcanvas
962
989
 
@@ -984,7 +1011,9 @@ const [isOpen, setIsOpen] = useState(false);
984
1011
  title="Right Offcanvas"
985
1012
  position="right"
986
1013
  >
987
- <p>This is the content of the offcanvas with that slides in from the right.</p>
1014
+ <p>
1015
+ This is the content of the offcanvas with that slides in from the right.
1016
+ </p>
988
1017
  </Offcanvas>
989
1018
  ```
990
1019
 
@@ -1002,7 +1031,9 @@ const [isOpen, setIsOpen] = useState(false);
1002
1031
  >
1003
1032
  <div className="text-white">
1004
1033
  <p>This is the content of the offcanvas with custom styling.</p>
1005
- <p>You can put any content here, such as text, forms, or other components.</p>
1034
+ <p>
1035
+ You can put any content here, such as text, forms, or other components.
1036
+ </p>
1006
1037
  </div>
1007
1038
  </Offcanvas>
1008
1039
  ```
@@ -1018,7 +1049,7 @@ The Toast component provides brief, auto-dismissable messages to inform users ab
1018
1049
  First, import the ToastProvider
1019
1050
 
1020
1051
  ```jsx
1021
- import { ToastProvider } from 'alope-ui-v3'
1052
+ import { ToastProvider } from "alope-ui";
1022
1053
  ```
1023
1054
 
1024
1055
  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
1027
1058
  import { StrictMode } from 'react';
1028
1059
  import { createRoot } from 'react-dom/client';
1029
1060
  import App from './App';
1030
- import { ToastProvider } from 'alope-ui-v3';
1061
+ import { ToastProvider } from 'alope-ui';
1031
1062
 
1032
1063
  createRoot(document.getElementById('root')!).render(
1033
1064
  <StrictMode>
@@ -1041,10 +1072,10 @@ createRoot(document.getElementById('root')!).render(
1041
1072
 
1042
1073
  ### Use Toast
1043
1074
 
1044
- Finally, you can use the ``useToast()`` hook like this:
1075
+ Finally, you can use the `useToast()` hook like this:
1045
1076
 
1046
1077
  ```jsx
1047
- import { useToast } from 'alope-ui-v3'
1078
+ import { useToast } from "alope-ui";
1048
1079
  ```
1049
1080
 
1050
1081
  ```jsx
@@ -1053,53 +1084,69 @@ const { addToast } = useToast();
1053
1084
 
1054
1085
  ### Props
1055
1086
 
1056
- | Prop | Type | Default | Description |
1057
- |------|------|---------|-------------|
1058
- | `title` | `string` | `required` | Toast title |
1059
- | `message` | `string` | `required` | Toast message content |
1060
- | `type` | `'success' \| 'error' \| 'info' \| 'warning'` | `'info'` | Toast type/variant |
1061
- | `variant` | `'filled' \| 'outline'` | `'filled'` | Toast visual style |
1087
+ | Prop | Type | Default | Description |
1088
+ | ---------- | ---------------------------------------------------------- | ------------ | ------------------------ |
1089
+ | `title` | `string` | `required` | Toast title |
1090
+ | `message` | `string` | `required` | Toast message content |
1091
+ | `type` | `'success' \| 'error' \| 'info' \| 'warning'` | `'info'` | Toast type/variant |
1092
+ | `variant` | `'filled' \| 'outline'` | `'filled'` | Toast visual style |
1062
1093
  | `position` | `'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | `'topRight'` | Toast position on screen |
1063
1094
 
1064
1095
  ### Basic Toast
1065
1096
 
1066
1097
  ```jsx
1067
- import { useToast } from "alope-ui-v3";
1098
+ import { useToast } from "alope-ui";
1068
1099
 
1069
1100
  const BasicExample = () => {
1070
1101
  const { addToast } = useToast();
1071
1102
 
1072
1103
  return (
1073
1104
  <div className="flex gap-4">
1074
- <Button onClick={() => addToast({
1075
- title: 'Success',
1076
- message: 'This is a success message!',
1077
- type: 'success'
1078
- })}>
1105
+ <Button
1106
+ onClick={() =>
1107
+ addToast({
1108
+ title: "Success",
1109
+ message: "This is a success message!",
1110
+ type: "success",
1111
+ })
1112
+ }
1113
+ >
1079
1114
  Success Toast
1080
1115
  </Button>
1081
-
1082
- <Button onClick={() => addToast({
1083
- title: 'Error',
1084
- message: 'This is an error message!',
1085
- type: 'error'
1086
- })}>
1116
+
1117
+ <Button
1118
+ onClick={() =>
1119
+ addToast({
1120
+ title: "Error",
1121
+ message: "This is an error message!",
1122
+ type: "error",
1123
+ })
1124
+ }
1125
+ >
1087
1126
  Error Toast
1088
1127
  </Button>
1089
-
1090
- <Button onClick={() => addToast({
1091
- title: 'Info',
1092
- message: 'This is an info message!',
1093
- type: 'info'
1094
- })}>
1128
+
1129
+ <Button
1130
+ onClick={() =>
1131
+ addToast({
1132
+ title: "Info",
1133
+ message: "This is an info message!",
1134
+ type: "info",
1135
+ })
1136
+ }
1137
+ >
1095
1138
  Info Toast
1096
1139
  </Button>
1097
-
1098
- <Button onClick={() => addToast({
1099
- title: 'Warning',
1100
- message: 'This is a warning message!',
1101
- type: 'warning'
1102
- })}>
1140
+
1141
+ <Button
1142
+ onClick={() =>
1143
+ addToast({
1144
+ title: "Warning",
1145
+ message: "This is a warning message!",
1146
+ type: "warning",
1147
+ })
1148
+ }
1149
+ >
1103
1150
  Warning Toast
1104
1151
  </Button>
1105
1152
  </div>
@@ -1110,20 +1157,20 @@ const BasicExample = () => {
1110
1157
  ### Outline Variant
1111
1158
 
1112
1159
  ```jsx
1113
- <Button onClick={() => addToast({
1114
- title: 'Success',
1115
- message: 'This is a success message!',
1116
- type: 'success',
1117
- variant: 'outline'
1160
+ <Button onClick={() => addToast({
1161
+ title: 'Success',
1162
+ message: 'This is a success message!',
1163
+ type: 'success',
1164
+ variant: 'outline'
1118
1165
  })}>
1119
1166
  Success Outline Toast
1120
1167
  </Button>
1121
1168
 
1122
- <Button onClick={() => addToast({
1123
- title: 'Error',
1124
- message: 'This is an error message!',
1125
- type: 'error',
1126
- variant: 'outline'
1169
+ <Button onClick={() => addToast({
1170
+ title: 'Error',
1171
+ message: 'This is an error message!',
1172
+ type: 'error',
1173
+ variant: 'outline'
1127
1174
  })}>
1128
1175
  Error Outline Toast
1129
1176
  </Button>
@@ -1132,22 +1179,22 @@ const BasicExample = () => {
1132
1179
  ### Custom Position
1133
1180
 
1134
1181
  ```jsx
1135
- <Button onClick={() => addToast({
1136
- title: 'Top Left',
1137
- message: 'This toast appears at top left!',
1138
- type: 'success',
1139
- variant: 'outline',
1140
- position: 'topLeft'
1182
+ <Button onClick={() => addToast({
1183
+ title: 'Top Left',
1184
+ message: 'This toast appears at top left!',
1185
+ type: 'success',
1186
+ variant: 'outline',
1187
+ position: 'topLeft'
1141
1188
  })}>
1142
1189
  Top Left Toast
1143
1190
  </Button>
1144
1191
 
1145
- <Button onClick={() => addToast({
1146
- title: 'Bottom Right',
1147
- message: 'This toast appears at bottom right!',
1148
- type: 'info',
1149
- variant: 'outline',
1150
- position: 'bottomRight'
1192
+ <Button onClick={() => addToast({
1193
+ title: 'Bottom Right',
1194
+ message: 'This toast appears at bottom right!',
1195
+ type: 'info',
1196
+ variant: 'outline',
1197
+ position: 'bottomRight'
1151
1198
  })}>
1152
1199
  Bottom Right Toast
1153
1200
  </Button>
@@ -1162,36 +1209,36 @@ The CheckboxInput component provides checkbox functionality for selecting single
1162
1209
  ### Import
1163
1210
 
1164
1211
  ```jsx
1165
- import { CheckboxInput, ListCheckboxInput } from "alope-ui-v3";
1166
- import type { CheckboxOptionType } from "alope-ui-v3";
1212
+ import { CheckboxInput, ListCheckboxInput } from "alope-ui";
1213
+ import type { CheckboxOptionType } from "alope-ui";
1167
1214
  ```
1168
1215
 
1169
1216
  ### CheckboxInput Props
1170
1217
 
1171
- | Prop | Type | Default | Description |
1172
- |------|------|---------|-------------|
1173
- | `label` | `string` | `required` | Checkbox label text |
1174
- | `checked` | `boolean` | `false` | Checkbox checked state |
1175
- | `indeterminate` | `boolean` | `false` | Indeterminate state for partial selection |
1176
- | `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` | `required` | Change handler function |
1177
- | `description` | `string` | `undefined` | Additional description text |
1218
+ | Prop | Type | Default | Description |
1219
+ | --------------- | -------------------------------------------- | ----------- | ----------------------------------------- |
1220
+ | `label` | `string` | `required` | Checkbox label text |
1221
+ | `checked` | `boolean` | `false` | Checkbox checked state |
1222
+ | `indeterminate` | `boolean` | `false` | Indeterminate state for partial selection |
1223
+ | `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` | `required` | Change handler function |
1224
+ | `description` | `string` | `undefined` | Additional description text |
1178
1225
 
1179
1226
  ### ListCheckboxInput Props
1180
1227
 
1181
- | Prop | Type | Default | Description |
1182
- |------|------|---------|-------------|
1183
- | `options` | `CheckboxOptionType[]` | `required` | Array of checkbox options |
1184
- | `selectedValues` | `CheckboxOptionType[]` | `[]` | Currently selected options |
1185
- | `onValueChange` | `(values: CheckboxOptionType[]) => void` | `required` | Change handler for selected values |
1186
- | `variant` | `'solid' \| 'subtle' \| 'outline'` | `'solid'` | Visual variant style |
1187
- | `checkboxSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
1188
- | `containerClassName` | `string` | `""` | Container CSS class |
1228
+ | Prop | Type | Default | Description |
1229
+ | -------------------- | ---------------------------------------- | ---------- | ---------------------------------- |
1230
+ | `options` | `CheckboxOptionType[]` | `required` | Array of checkbox options |
1231
+ | `selectedValues` | `CheckboxOptionType[]` | `[]` | Currently selected options |
1232
+ | `onValueChange` | `(values: CheckboxOptionType[]) => void` | `required` | Change handler for selected values |
1233
+ | `variant` | `'solid' \| 'subtle' \| 'outline'` | `'solid'` | Visual variant style |
1234
+ | `checkboxSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
1235
+ | `containerClassName` | `string` | `""` | Container CSS class |
1189
1236
 
1190
1237
  ### Basic CheckboxInput
1191
1238
 
1192
1239
  ```jsx
1193
- import { useState } from 'react';
1194
- import { CheckboxInput } from "alope-ui-v3";
1240
+ import { useState } from "react";
1241
+ import { CheckboxInput } from "alope-ui";
1195
1242
 
1196
1243
  const BasicExample = () => {
1197
1244
  const [checked, setChecked] = useState(false);
@@ -1211,8 +1258,8 @@ const BasicExample = () => {
1211
1258
 
1212
1259
  ```jsx
1213
1260
  import { useState } from 'react';
1214
- import { ListCheckboxInput } from "alope-ui-v3";
1215
- import type { CheckboxOptionType } from "alope-ui-v3";
1261
+ import { ListCheckboxInput } from "alope-ui";
1262
+ import type { CheckboxOptionType } from "alope-ui";
1216
1263
 
1217
1264
  const options: CheckboxOptionType[] = [
1218
1265
  { value: 'chocolate', label: 'Chocolate' },
@@ -1267,45 +1314,53 @@ const [selectedOptions, setSelectedOptions] = useState<CheckboxOptionType[]>([])
1267
1314
  ### Variants
1268
1315
 
1269
1316
  ```jsx
1270
- {/* Solid Variant */}
1317
+ {
1318
+ /* Solid Variant */
1319
+ }
1271
1320
  <ListCheckboxInput
1272
1321
  options={options}
1273
1322
  selectedValues={selectedOptions}
1274
1323
  onValueChange={setSelectedOptions}
1275
1324
  variant="solid"
1276
1325
  checkboxSize="md"
1277
- />
1326
+ />;
1278
1327
 
1279
- {/* Subtle Variant */}
1328
+ {
1329
+ /* Subtle Variant */
1330
+ }
1280
1331
  <ListCheckboxInput
1281
1332
  options={options}
1282
1333
  selectedValues={selectedOptions}
1283
1334
  onValueChange={setSelectedOptions}
1284
1335
  variant="subtle"
1285
1336
  checkboxSize="md"
1286
- />
1337
+ />;
1287
1338
 
1288
- {/* Outline Variant */}
1339
+ {
1340
+ /* Outline Variant */
1341
+ }
1289
1342
  <ListCheckboxInput
1290
1343
  options={options}
1291
1344
  selectedValues={selectedOptions}
1292
1345
  onValueChange={setSelectedOptions}
1293
1346
  variant="outline"
1294
1347
  checkboxSize="md"
1295
- />
1348
+ />;
1296
1349
  ```
1297
1350
 
1298
1351
  ### Sizes
1299
1352
 
1300
1353
  ```jsx
1301
- {/* Large Size */}
1354
+ {
1355
+ /* Large Size */
1356
+ }
1302
1357
  <ListCheckboxInput
1303
1358
  options={options}
1304
1359
  selectedValues={selectedOptions}
1305
1360
  onValueChange={setSelectedOptions}
1306
1361
  variant="solid"
1307
1362
  checkboxSize="lg"
1308
- />
1363
+ />;
1309
1364
  ```
1310
1365
 
1311
1366
  ---
@@ -1317,41 +1372,42 @@ The RadioInput component allows users to choose one option from a list of mutual
1317
1372
  ### Import
1318
1373
 
1319
1374
  ```jsx
1320
- import { RadioInput } from "alope-ui-v3";
1321
- import type { RadioOptionType } from "alope-ui-v3";
1375
+ import { RadioInput } from "alope-ui";
1376
+ import type { RadioOptionType } from "alope-ui";
1322
1377
  ```
1323
1378
 
1324
1379
  ### Props
1325
1380
 
1326
- | Prop | Type | Default | Description |
1327
- |------|------|---------|-------------|
1328
- | `name` | `string` | `required` | Name attribute for radio group |
1329
- | `options` | `RadioOptionType[]` | `required` | Array of radio options |
1330
- | `selectedValue` | `RadioOptionType \| undefined` | `undefined` | Currently selected option |
1331
- | `onValueChange` | `(value: RadioOptionType) => void` | `required` | Change handler function |
1332
- | `variant` | `'subtle' \| 'solid' \| 'outline'` | `'subtle'` | Visual variant style |
1333
- | `radioSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio button size |
1334
- | `disabled` | `boolean` | `false` | Disable all radio options |
1335
- | `containerClassName` | `string` | `""` | Container CSS class |
1336
- | `inputGroupClassName` | `string \| (isChecked: boolean) => string` | `""` | Input group CSS class |
1337
- | `inputLabelClassName` | `string \| (isChecked: boolean) => string` | `""` | Label CSS class |
1338
- | `inputRadioClassName` | `string \| (isChecked: boolean) => string` | `""` | Radio input CSS class |
1381
+ | Prop | Type | Default | Description |
1382
+ | --------------------- | ------------------------------------------ | ----------- | ------------------------------ |
1383
+ | `name` | `string` | `required` | Name attribute for radio group |
1384
+ | `options` | `RadioOptionType[]` | `required` | Array of radio options |
1385
+ | `selectedValue` | `RadioOptionType \| undefined` | `undefined` | Currently selected option |
1386
+ | `onValueChange` | `(value: RadioOptionType) => void` | `required` | Change handler function |
1387
+ | `variant` | `'subtle' \| 'solid' \| 'outline'` | `'subtle'` | Visual variant style |
1388
+ | `radioSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Radio button size |
1389
+ | `disabled` | `boolean` | `false` | Disable all radio options |
1390
+ | `containerClassName` | `string` | `""` | Container CSS class |
1391
+ | `inputGroupClassName` | `string \| (isChecked: boolean) => string` | `""` | Input group CSS class |
1392
+ | `inputLabelClassName` | `string \| (isChecked: boolean) => string` | `""` | Label CSS class |
1393
+ | `inputRadioClassName` | `string \| (isChecked: boolean) => string` | `""` | Radio input CSS class |
1339
1394
 
1340
1395
  ### Basic RadioInput
1341
1396
 
1342
1397
  ```jsx
1343
- import { useState } from 'react';
1344
- import { RadioInput } from "alope-ui-v3";
1345
- import type { RadioOptionType } from "alope-ui-v3";
1398
+ import { useState } from "react";
1399
+ import { RadioInput } from "alope-ui";
1400
+ import type { RadioOptionType } from "alope-ui";
1346
1401
 
1347
1402
  const options: RadioOptionType[] = [
1348
- { value: 'chocolate', label: 'Chocolate' },
1349
- { value: 'strawberry', label: 'Strawberry' },
1350
- { value: 'vanilla', label: 'Vanilla' },
1403
+ { value: "chocolate", label: "Chocolate" },
1404
+ { value: "strawberry", label: "Strawberry" },
1405
+ { value: "vanilla", label: "Vanilla" },
1351
1406
  ];
1352
1407
 
1353
1408
  const BasicExample = () => {
1354
- const [selectedValue, setSelectedValue] = useState<RadioOptionType | undefined>(options[0]);
1409
+ const [selectedValue, setSelectedValue] =
1410
+ (useState < RadioOptionType) | (undefined > options[0]);
1355
1411
 
1356
1412
  return (
1357
1413
  <RadioInput
@@ -1367,54 +1423,64 @@ const BasicExample = () => {
1367
1423
  ### Variants
1368
1424
 
1369
1425
  ```jsx
1370
- {/* Subtle Variant */}
1426
+ {
1427
+ /* Subtle Variant */
1428
+ }
1371
1429
  <RadioInput
1372
1430
  name="variant-subtle"
1373
1431
  options={options}
1374
1432
  selectedValue={selectedValue}
1375
1433
  onValueChange={setSelectedValue}
1376
1434
  variant="subtle"
1377
- />
1435
+ />;
1378
1436
 
1379
- {/* Solid Variant */}
1437
+ {
1438
+ /* Solid Variant */
1439
+ }
1380
1440
  <RadioInput
1381
1441
  name="variant-solid"
1382
1442
  options={options}
1383
1443
  selectedValue={selectedValue}
1384
1444
  onValueChange={setSelectedValue}
1385
1445
  variant="solid"
1386
- />
1446
+ />;
1387
1447
 
1388
- {/* Outline Variant */}
1448
+ {
1449
+ /* Outline Variant */
1450
+ }
1389
1451
  <RadioInput
1390
1452
  name="variant-outline"
1391
1453
  options={options}
1392
1454
  selectedValue={selectedValue}
1393
1455
  onValueChange={setSelectedValue}
1394
1456
  variant="outline"
1395
- />
1457
+ />;
1396
1458
  ```
1397
1459
 
1398
1460
  ### Sizes
1399
1461
 
1400
1462
  ```jsx
1401
- {/* Small Size */}
1463
+ {
1464
+ /* Small Size */
1465
+ }
1402
1466
  <RadioInput
1403
1467
  name="size-sm"
1404
1468
  options={options}
1405
1469
  selectedValue={selectedValue}
1406
1470
  onValueChange={setSelectedValue}
1407
1471
  radioSize="sm"
1408
- />
1472
+ />;
1409
1473
 
1410
- {/* Large Size */}
1474
+ {
1475
+ /* Large Size */
1476
+ }
1411
1477
  <RadioInput
1412
1478
  name="size-lg"
1413
1479
  options={options}
1414
1480
  selectedValue={selectedValue}
1415
1481
  onValueChange={setSelectedValue}
1416
1482
  radioSize="lg"
1417
- />
1483
+ />;
1418
1484
  ```
1419
1485
 
1420
1486
  ### Disabled State
@@ -1440,14 +1506,14 @@ const BasicExample = () => {
1440
1506
  containerClassName="gap-6 bg-blue-50 p-4 rounded-lg"
1441
1507
  inputGroupClassName={(isChecked) =>
1442
1508
  isChecked
1443
- ? 'bg-blue-100 border-blue-500 shadow-md'
1444
- : 'bg-white border-gray-300 hover:bg-gray-100'
1509
+ ? "bg-blue-100 border-blue-500 shadow-md"
1510
+ : "bg-white border-gray-300 hover:bg-gray-100"
1445
1511
  }
1446
1512
  inputLabelClassName={(isChecked) =>
1447
- isChecked ? 'text-blue-800 font-bold' : 'text-gray-600'
1513
+ isChecked ? "text-blue-800 font-bold" : "text-gray-600"
1448
1514
  }
1449
1515
  inputRadioClassName={(isChecked) =>
1450
- isChecked ? 'bg-blue-600 border-blue-600' : 'bg-white border-gray-400'
1516
+ isChecked ? "bg-blue-600 border-blue-600" : "bg-white border-gray-400"
1451
1517
  }
1452
1518
  />
1453
1519
  ```
@@ -1461,33 +1527,33 @@ The SelectInput component provides a dropdown interface for selecting one or mul
1461
1527
  ### Import
1462
1528
 
1463
1529
  ```jsx
1464
- import { SelectInput } from "alope-ui-v3";
1465
- import type { SelectOptionType } from "alope-ui-v3";
1530
+ import { SelectInput } from "alope-ui";
1531
+ import type { SelectOptionType } from "alope-ui";
1466
1532
  ```
1467
1533
 
1468
1534
  ### Props
1469
1535
 
1470
- | Prop | Type | Default | Description |
1471
- |------|------|---------|-------------|
1472
- | `instanceId` | `string` | `required` | Unique identifier for the select instance |
1473
- | `label` | `string` | `undefined` | Label text for the select |
1474
- | `options` | `SelectOptionType[]` | `required` | Array of selectable options |
1475
- | `value` | `SelectOptionType \| SelectOptionType[] \| null` | `null` | Selected value(s) |
1476
- | `onChange` | `(value: any) => void` | `required` | Change handler function |
1477
- | `placeholder` | `string` | `"Select..."` | Placeholder text |
1478
- | `isMulti` | `boolean` | `false` | Enable multiple selection |
1479
- | `isSearchable` | `boolean` | `false` | Enable search functionality |
1480
- | `isClearable` | `boolean` | `false` | Enable clear button |
1481
- | `error` | `string` | `undefined` | Error message to display |
1482
- | `labelClassName` | `string` | `""` | Label CSS class |
1483
- | `customClassNames` | `object` | `{}` | Custom class names for react-select components |
1536
+ | Prop | Type | Default | Description |
1537
+ | ------------------ | ------------------------------------------------ | ------------- | ---------------------------------------------- |
1538
+ | `instanceId` | `string` | `required` | Unique identifier for the select instance |
1539
+ | `label` | `string` | `undefined` | Label text for the select |
1540
+ | `options` | `SelectOptionType[]` | `required` | Array of selectable options |
1541
+ | `value` | `SelectOptionType \| SelectOptionType[] \| null` | `null` | Selected value(s) |
1542
+ | `onChange` | `(value: any) => void` | `required` | Change handler function |
1543
+ | `placeholder` | `string` | `"Select..."` | Placeholder text |
1544
+ | `isMulti` | `boolean` | `false` | Enable multiple selection |
1545
+ | `isSearchable` | `boolean` | `false` | Enable search functionality |
1546
+ | `isClearable` | `boolean` | `false` | Enable clear button |
1547
+ | `error` | `string` | `undefined` | Error message to display |
1548
+ | `labelClassName` | `string` | `""` | Label CSS class |
1549
+ | `customClassNames` | `object` | `{}` | Custom class names for react-select components |
1484
1550
 
1485
1551
  ### Single Select
1486
1552
 
1487
1553
  ```jsx
1488
1554
  import { useState } from 'react';
1489
- import { SelectInput } from "alope-ui-v3";
1490
- import type { SelectOptionType } from "alope-ui-v3";
1555
+ import { SelectInput } from "alope-ui";
1556
+ import type { SelectOptionType } from "alope-ui";
1491
1557
 
1492
1558
  const options: SelectOptionType[] = [
1493
1559
  { value: 'chocolate', label: 'Chocolate' },
@@ -1552,19 +1618,18 @@ const [multipleValues, setMultipleValues] = useState<readonly SelectOptionType[]
1552
1618
  placeholder="Custom styled select..."
1553
1619
  labelClassName="font-bold text-lg"
1554
1620
  customClassNames={{
1555
- control: ({ isFocused }) => cn(
1556
- '!w-full !border !rounded-lg p-2 !shadow-md !sm:text-sm !min-h-[38px]',
1557
- isFocused
1558
- ? 'border-info !ring-1 !ring-info'
1559
- : '!border-info'
1560
- ),
1621
+ control: ({ isFocused }) =>
1622
+ cn(
1623
+ "!w-full !border !rounded-lg p-2 !shadow-md !sm:text-sm !min-h-[38px]",
1624
+ isFocused ? "border-info !ring-1 !ring-info" : "!border-info"
1625
+ ),
1561
1626
  option: ({ isFocused, isSelected }) =>
1562
1627
  `!px-4 !py-2 !cursor-pointer ${
1563
1628
  isSelected
1564
- ? '!bg-info !text-white'
1629
+ ? "!bg-info !text-white"
1565
1630
  : isFocused
1566
- ? '!bg-info/30'
1567
- : '!bg-white'
1631
+ ? "!bg-info/30"
1632
+ : "!bg-white"
1568
1633
  }`,
1569
1634
  }}
1570
1635
  />
@@ -1579,33 +1644,27 @@ The TextInput component provides a text input field for users to enter text info
1579
1644
  ### Import
1580
1645
 
1581
1646
  ```jsx
1582
- import { TextInput } from "alope-ui-v3";
1647
+ import { TextInput } from "alope-ui";
1583
1648
  ```
1584
1649
 
1585
1650
  ### Props
1586
1651
 
1587
- | Prop | Type | Default | Description |
1588
- |------|------|---------|-------------|
1589
- | `id` | `string` | `required` | Input element ID |
1590
- | `name` | `string` | `required` | Input name attribute |
1591
- | `label` | `string` | `undefined` | Label text for the input |
1592
- | `placeholder` | `string` | `undefined` | Placeholder text |
1593
- | `error` | `string` | `undefined` | Error message to display |
1594
- | `disabled` | `boolean` | `false` | Disable the input |
1652
+ | Prop | Type | Default | Description |
1653
+ | ------------- | --------- | ----------- | ------------------------ |
1654
+ | `id` | `string` | `required` | Input element ID |
1655
+ | `name` | `string` | `required` | Input name attribute |
1656
+ | `label` | `string` | `undefined` | Label text for the input |
1657
+ | `placeholder` | `string` | `undefined` | Placeholder text |
1658
+ | `error` | `string` | `undefined` | Error message to display |
1659
+ | `disabled` | `boolean` | `false` | Disable the input |
1595
1660
 
1596
1661
  ### Basic TextInput
1597
1662
 
1598
1663
  ```jsx
1599
- import { TextInput } from "alope-ui-v3";
1664
+ import { TextInput } from "alope-ui";
1600
1665
 
1601
1666
  const BasicExample = () => {
1602
- return (
1603
- <TextInput
1604
- id="basic"
1605
- name="basic"
1606
- placeholder="Enter text here"
1607
- />
1608
- );
1667
+ return <TextInput id="basic" name="basic" placeholder="Enter text here" />;
1609
1668
  };
1610
1669
  ```
1611
1670
 
@@ -1658,4 +1717,4 @@ MIT License – Free to use, modify, and distribute.
1658
1717
 
1659
1718
  ## 🙌 Thank You
1660
1719
 
1661
- Thank you for using **ALOPE UI Library**. We hope this helps you build beautiful and functional user interfaces with ease.
1720
+ Thank you for using **ALOPE UI Library**. We hope this helps you build beautiful and functional user interfaces with ease.