@unizap/uniui 1.0.11 → 1.0.12

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 (5) hide show
  1. package/README.md +326 -32
  2. package/dist/uniui.css +1 -1
  3. package/dist/uniui.js +551 -551
  4. package/dist/uniui.umd.cjs +32 -32
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -22,15 +22,17 @@ npm i @unizap/uniui
22
22
  Import the UniUI CSS in your main entry file (e.g. `app.js`):
23
23
 
24
24
  ```js
25
- import '@unizap/uniui/uniui.css';
25
+ import '@unizap/uniui/uniui.css'
26
26
  ```
27
27
 
28
28
  Now you can use UniUI components anywhere in your app:
29
29
 
30
30
  ```jsx
31
- import { Button, IconButton, Badge, Carousel, EmptyState, PasswordInput } from '@unizap/uniui';
31
+ import {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@unizap/uniui';
32
32
 
33
- <Button color="amber" variant="filled">Hello UniUI</Button>
33
+ <Button color="amber" variant="filled">
34
+ Hello UniUI
35
+ </Button>
34
36
  ```
35
37
 
36
38
  ---
@@ -38,14 +40,307 @@ import { Button, IconButton, Badge, Carousel, EmptyState, PasswordInput } from '
38
40
  ## 🧩 Components
39
41
 
40
42
  - **Accordion**
41
- - **ActionMenu**
42
- - **Alert**
43
- - **Avatar**
44
- - **Badge**
45
- - **BottomNavigation**
46
- - **Breadcrumbs**
47
- - **Button**
48
- - **Card**
43
+ ```js
44
+ import '@unizap/uniui/Accordion'
45
+
46
+ const items = [
47
+ { title: 'Accordion One', content: 'Content for accordion one.' },
48
+ { title: 'Accordion Two', content: 'Content for accordion two.' },
49
+ { title: 'Accordion Three', content: 'Content for accordion three.' },
50
+ ]
51
+
52
+ {
53
+ items.map((item, index) => (
54
+ <Accordion
55
+ key={index}
56
+ title={item.title}
57
+ content={item.content}
58
+ expandIcon={
59
+ <svg
60
+ className="size-4"
61
+ xmlns="http://www.w3.org/2000/svg"
62
+ viewBox="0 0 24 24"
63
+ fill="currentColor"
64
+ >
65
+ <path d="M5 11V13H19V11H5Z"></path>
66
+ </svg>
67
+ }
68
+ collapseIcon={
69
+ <svg
70
+ className="size-4"
71
+ xmlns="http://www.w3.org/2000/svg"
72
+ viewBox="0 0 24 24"
73
+ fill="currentColor"
74
+ >
75
+ <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
76
+ </svg>
77
+ }
78
+ titleClass="!bg-color-gray-100"
79
+ contentClass="bg-color-gray-50 border-t border-color-gray-200"
80
+ isOpen={openIndex === index}
81
+ onToggle={(isOpen) => setOpenIndex(isOpen ? index : null)}
82
+ />
83
+ ))
84
+ }
85
+ ```
86
+
87
+ ### Accordion Props
88
+
89
+ | Name | Value | Description |
90
+ |------------------|--------------------------------|-----------------------------------------------------------------------------|
91
+ | `title` | `string` | Title text for the accordion section. |
92
+ | `content` | `React.ReactNode` | Content to display when the accordion is expanded. |
93
+ | `expandIcon` | `React.ReactNode` | Icon shown when the accordion is collapsed. |
94
+ | `collapseIcon` | `React.ReactNode` | Icon shown when the accordion is expanded. |
95
+ | `titleClass` | `string` | Additional CSS classes for the title area. |
96
+ | `contentClass` | `string` | Additional CSS classes for the content area. |
97
+ | `isOpen` | `boolean` | Controls whether the accordion is open. |
98
+ | `onToggle` | `(isOpen: boolean) => void` | Callback fired when the accordion is toggled. |
99
+ | `defaultExpanded`| `boolean` (default: `false`) | Whether the accordion is expanded by default. |
100
+ | `className` | `string` | Additional CSS classes
101
+
102
+
103
+
104
+ **ActionMenu**
105
+ ```tsx
106
+ import { ActionMenu } from '@unizap/uniui';
107
+
108
+ <ActionMenu
109
+ trigger={<button>Open Menu</button>}
110
+ items={[
111
+ { label: "Edit", icon: <svg className="size-4" />, onClick: () => alert("Edit") },
112
+ { label: "Duplicate", icon: <svg className="size-4" />, onClick: () => alert("Duplicate") },
113
+ { label: "Print", icon: <svg className="size-4" />, onClick: () => alert("Print") },
114
+ { label: "Deactivate", icon: <svg className="size-4" />, disabled: true, onClick: () => alert("Deactivate") },
115
+ { label: "Delete", itemClass: 'text-color-red-500', icon: <svg className="size-4" />, onClick: () => alert("Delete") }
116
+ ]}
117
+ className="border border-color-gray-100"
118
+ dropdownItemClass=""
119
+ />
120
+ ```
121
+
122
+ ### ActionMenu Props
123
+
124
+ | Name | Value | Description |
125
+ |--------------------|-----------------------------------------------------------------------|------------------------------------------------------------------|
126
+ | `items` | `Array<{ label?: string, icon?: ReactNode, itemClass?: string, disabled?: boolean, onClick?: () => void }>` | List of menu items to display. Each item can have a label, icon, click handler, disabled state, and custom class. |
127
+ | `trigger` | `ReactNode` | Element that triggers the menu (e.g. button or icon). |
128
+ | `className` | `string` | Additional CSS classes for the menu container. |
129
+ | `dropdownItemClass`| `string` | Additional CSS classes for each
130
+
131
+
132
+ **Alert**
133
+ ```tsx
134
+ import { Alert } from '@unizap/uniui';
135
+
136
+ <Alert
137
+ message="This is an alert message!"
138
+ variant="success"
139
+ autoClose
140
+ autoCloseDuration={3000}
141
+ />
142
+ ```
143
+
144
+ ### Alert Props
145
+
146
+ | Name | Value | Description |
147
+ |--------------------|-----------------------------------------------|------------------------------------------------------------------|
148
+ | `message` | `string` | The alert message to display. |
149
+ | `variant` | `'info' | 'success' | 'danger' | 'warning' | 'dark'` | The style variant of the alert. |
150
+ | `onClose` | `() => void` | Callback fired when the alert is closed. |
151
+ | `autoClose` | `boolean` | If true, the alert will close automatically after a duration. |
152
+ | `autoCloseDuration`| `number` | Duration in milliseconds before auto close (if enabled). |
153
+ | `className` | `string` | Additional CSS classes for the alert container. |
154
+
155
+ **Avatar**
156
+ ```tsx
157
+ import { Avatar } from '@unizap/uniui';
158
+
159
+ <Avatar
160
+ src="https://example.com/avatar.jpg"
161
+ alt="User Avatar"
162
+ size="lg"
163
+ shape="circle"
164
+ color="blue"
165
+ className="shadow"
166
+ fallback="U"
167
+ />
168
+ ```
169
+
170
+ ### Avatar Props
171
+
172
+ | Name | Value | Description |
173
+ |-------------|-----------------------------------------------|-----------------------------------------------|
174
+ | `src` | `string` | Image source URL for the avatar. |
175
+ | `alt` | `string` | Alt text for the avatar image. |
176
+ | `fallback` | `React.ReactNode` | Fallback content if image fails to load. |
177
+ | `size` | `'sm' | 'md' | 'lg' | 'xl'` | Size of the avatar. |
178
+ | `shape` | `'circle' | 'rounded' | 'square'` | Shape of the avatar. |
179
+ | `color` | `CompColor` | Background color for the avatar. |
180
+ | `className` | `string` | Additional CSS classes for the avatar. |
181
+
182
+
183
+ **Badge**
184
+ ```tsx
185
+ import { Badge } from '@unizap/uniui';
186
+
187
+ <Badge count={5} color="amber" position="top-right">
188
+ <span>Inbox</span>
189
+ </Badge>
190
+ ```
191
+
192
+ ### Badge Props
193
+
194
+ | Name | Value | Description |
195
+ |-------------|------------------------------------------------------------|-----------------------------------------------|
196
+ | `children` | `React.ReactNode` | Content to wrap with the badge. |
197
+ | `count` | `number` | Number to display in the badge. |
198
+ | `showDot` | `boolean` | Show a dot instead of a number. |
199
+ | `max` | `number` | Maximum number to display before showing `max+`. |
200
+ | `color` | `CompColor` | Badge color. |
201
+ | `position` | `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` | Position of the
202
+
203
+
204
+ **BottomNavigation**
205
+ ```tsx
206
+ import { BottomNavigation } from '@unizap/uniui';
207
+
208
+ const navItems = [
209
+ { label: 'Home', icon: <svg className="size-5" />, path: '/' },
210
+ { label: 'Search', icon: <svg className="size-5" />, path: '/search' },
211
+ { label: 'Profile', icon: <svg className="size-5" />, path: '/profile' },
212
+ ];
213
+
214
+ <BottomNavigation
215
+ variant="floating"
216
+ activeTab="Home"
217
+ navItems={navItems}
218
+ onTabChange={(label) => console.log('Tab changed:', label)}
219
+ className="my-custom-class"
220
+ activeClass="active-tab"
221
+ buttonClass="nav-btn"
222
+ />
223
+ ```
224
+
225
+ ### BottomNavigation Props
226
+
227
+ | Name | Value | Description |
228
+ |--------------|------------------------------------------------------------|-----------------------------------------------------|
229
+ | `variant` | `'floating' | 'static' | 'fixed'` | Style variant for the navigation bar. |
230
+ | `activeTab` | `string` | The currently active tab label. |
231
+ | `navItems` | `Array<{ label: string, icon: React.ReactNode, path: string }>` | Array of navigation items. |
232
+ | `onTabChange`| `(label: string) => void` | Callback fired when the active tab changes. |
233
+ | `className` | `string` | Additional CSS classes for the navigation container.|
234
+ | `activeClass`| `string` | CSS classes for the active tab. |
235
+ | `buttonClass`| `string` | CSS classes for each navigation button. |
236
+
237
+
238
+ **Breadcrumbs**
239
+ ```tsx
240
+ import { Breadcrumbs } from '@unizap/uniui';
241
+
242
+ const items = [
243
+ { label: 'Home', href: '/' },
244
+ { label: 'Library', href: '/library' },
245
+ { label: 'Data' }
246
+ ];
247
+
248
+ <Breadcrumbs
249
+ items={items}
250
+ separator=">"
251
+ className="my-breadcrumbs"
252
+ />
253
+ ```
254
+
255
+ ### Breadcrumbs Props
256
+
257
+ | Name | Value | Description |
258
+ |-------------|-----------------------------------------------|-----------------------------------------------|
259
+ | `items` | `Array<{ label: string, href?: string }>` | Array of breadcrumb items. |
260
+ | `separator` | `string` | Separator string between items (default: `/`).|
261
+ | `className` | `string` | Additional CSS classes for the breadcrumbs. |
262
+
263
+
264
+ **Button**
265
+ ```tsx
266
+ import { Button } from '@unizap/uniui';
267
+
268
+ <Button
269
+ title="Click Me"
270
+ variant="filled"
271
+ color="amber"
272
+ size="large"
273
+ fullWidth
274
+ roundedFull
275
+ icon={<svg className="size-4" />}
276
+ onClick={() => alert('Button clicked!')}
277
+ >
278
+ Hello UniUI
279
+ </Button>
280
+ ```
281
+
282
+ ### Button Props
283
+
284
+ | Name | Value | Description |
285
+ |--------------|-----------------------------------------------------------------------|-----------------------------------------------|
286
+ | `title` | `string` | Button text (if not using children). |
287
+ | `variant` | `'filled' | 'outlined' | 'transparent'` | Button style variant. |
288
+ | `color` | `CompColor` | Button color. |
289
+ | `size` | `'small' | 'medium' | 'large'` | Button size. |
290
+ | `children` | `React.ReactNode` | Button content (overrides `title`). |
291
+ | `className` | `string` | Additional CSS classes for the button. |
292
+ | `fullWidth` | `boolean` | If true, button takes full width. |
293
+ | `disabled` | `boolean` | If true, button is disabled. |
294
+ | `roundedFull`| `boolean` | If true, button has fully rounded corners. |
295
+ | `icon` | `React.ReactNode` | Icon to display in the button. |
296
+ | `href` | `string` | If set, renders as an anchor (`<a>`). |
297
+ | `target` | `'_blank' | '_self' | '_parent' | '_top'` | Anchor target (if `href` is set). |
298
+ | `type` | `'submit' | 'reset' | 'button'` | Button type. |
299
+ | `onClick` | `(event: React.MouseEvent<HTMLButtonElement>) => void` | Click handler. |
300
+
301
+
302
+ **Card**
303
+ ```tsx
304
+ import { Card } from '@unizap/uniui';
305
+
306
+ <Card
307
+ title="Card Title"
308
+ subtitle="Card Subtitle"
309
+ space="medium"
310
+ shadow="default"
311
+ roundness="medium"
312
+ image="https://example.com/card-image.jpg"
313
+ divider
314
+ actionMenu={<ActionMenu /* ...props */ />}
315
+ hoverable
316
+ bordered
317
+ className="my-card"
318
+ onClick={() => alert('Card clicked!')}
319
+ >
320
+ <p>This is the card content.</p>
321
+ </Card>
322
+ ```
323
+
324
+ ### Card Props
325
+
326
+ | Name | Value | Description |
327
+ |-------------|------------------------------------------------------------|-----------------------------------------------|
328
+ | `title` | `string` | Title text for the card. |
329
+ | `subtitle` | `string` | Subtitle text for the card. |
330
+ | `space` | `'none' | 'small' | 'medium' | 'large'` | Padding inside the card. |
331
+ | `shadow` | `'default' | 'small' | 'medium' | 'large'` | Shadow style for the card. |
332
+ | `roundness` | `'small' | 'medium' | 'large'` | Border radius for the card. |
333
+ | `image` | `string` | Image URL to display at the top of the card. |
334
+ | `divider` | `boolean` | Whether to show a divider below the header. |
335
+ | `actionMenu`| `React.ReactNode` | Action menu element for the card. |
336
+ | `children` | `React.ReactNode` | Card content. |
337
+ | `className` | `string` | Additional CSS classes for the card. |
338
+ | `hoverable` | `boolean` | If true, card has hover effect. |
339
+ | `bordered` | `boolean` | If true, card has a border. |
340
+ | `onClick` | `() => void` | Click handler for the card. |
341
+ | `loaderJsx` | `boolean` | If true, shows a loader inside the card. |
342
+
343
+
49
344
  - **CardWrapper**
50
345
  - **Carousel**
51
346
  - **Checkbox**
@@ -120,7 +415,6 @@ To use the default color, simply pass its name to the `color` prop:
120
415
  To Extend and build sleek interfaces straight from your markup, you can install **UniCSS**:
121
416
  [![npm version](https://img.shields.io/npm/v/@unizap/unicss?label=UniCSS)](https://www.npmjs.com/package/@unizap/unicss)
122
417
 
123
-
124
418
  ```sh
125
419
  npm i @unizap/unicss
126
420
  ```
@@ -134,44 +428,44 @@ You can add custom colors to UniUI's color system using the exported `extendColo
134
428
  1. Create a file in your project (e.g. `brandColor.js`):
135
429
 
136
430
  ```js
137
- import { extendColorMap } from "@unizap/uniui";
431
+ import { extendColorMap } from '@unizap/uniui'
138
432
 
139
433
  extendColorMap({
140
- brand: {
141
- filled: 'bg-color-violet-500 text-color-white',
142
- outline: 'border-color-violet-500 text-color-violet-500',
143
- transparent: 'text-color-violet-500',
144
- accent: 'accent-color-violet-500',
145
- peer: 'peer-checked:border-color-violet-500 peer-checked:text-color-violet-500',
146
- }
147
- });
434
+ brand: {
435
+ filled: 'bg-color-violet-500 text-color-white',
436
+ outline: 'border-color-violet-500 text-color-violet-500',
437
+ transparent: 'text-color-violet-500',
438
+ accent: 'accent-color-violet-500',
439
+ peer: 'peer-checked:border-color-violet-500 peer-checked:text-color-violet-500',
440
+ },
441
+ })
148
442
  ```
149
443
 
150
444
  2. Use your new color in any component:
151
445
 
152
446
  ```jsx
153
- import './brandColor.js';
447
+ import './brandColor.js'
154
448
 
155
- <Button color="brand">Brand Button</Button>
449
+ ;<Button color="brand">Brand Button</Button>
156
450
  ```
157
451
 
158
452
  You can also extend Slider colors:
159
453
 
160
454
  ```js
161
- import { extendRangeColorMap } from '@unizap/uniui';
455
+ import { extendRangeColorMap } from '@unizap/uniui'
162
456
 
163
457
  extendRangeColorMap({
164
- brand: {
165
- track: 'bg-color-brand-200',
166
- progress: 'bg-color-brand-500',
167
- thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',
168
- thumbHover: 'bg-color-brand-600',
169
- }
170
- });
458
+ brand: {
459
+ track: 'bg-color-brand-200',
460
+ progress: 'bg-color-brand-500',
461
+ thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',
462
+ thumbHover: 'bg-color-brand-600',
463
+ },
464
+ })
171
465
  ```
172
466
 
173
467
  ---
174
468
 
175
469
  ## 📄 License
176
470
 
177
- MIT
471
+ MIT