@unizap/uniui 1.0.39 → 1.0.41
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.
- package/README.md +41 -325
- package/dist/uniui.js +12 -8
- package/dist/uniui.umd.cjs +1 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -40,342 +40,51 @@ import {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@
|
|
|
40
40
|
## 🧩 Components
|
|
41
41
|
|
|
42
42
|
- **Accordion**
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
344
|
-
- **CardWrapper**
|
|
43
|
+
- **Alert**
|
|
44
|
+
- **Avatar**
|
|
45
|
+
- **Badge**
|
|
46
|
+
- **Backdrop**
|
|
47
|
+
- **Button**
|
|
48
|
+
- **Card**
|
|
345
49
|
- **Carousel**
|
|
346
50
|
- **Checkbox**
|
|
347
|
-
- **
|
|
348
|
-
- **DatePicker**
|
|
51
|
+
- **Datepicker**
|
|
349
52
|
- **Dialog**
|
|
350
53
|
- **Divider**
|
|
351
54
|
- **Drawer**
|
|
352
|
-
- **Dropdown**
|
|
353
|
-
- **DropzoneUploader**
|
|
354
55
|
- **EmptyState**
|
|
355
56
|
- **IconButton**
|
|
356
|
-
- **
|
|
357
|
-
- **
|
|
358
|
-
- **
|
|
57
|
+
- **Input**
|
|
58
|
+
- **List**
|
|
59
|
+
- **OTPInput**
|
|
359
60
|
- **PasswordInput**
|
|
360
|
-
- **Pill**
|
|
361
|
-
- **ProfileImageShowcase**
|
|
362
61
|
- **Progress**
|
|
363
62
|
- **RadioGroup**
|
|
63
|
+
- **Rating**
|
|
364
64
|
- **Select**
|
|
365
|
-
- **
|
|
65
|
+
- **Sheet**
|
|
366
66
|
- **Skeleton**
|
|
367
67
|
- **Slider**
|
|
368
|
-
- **Snackbar**
|
|
369
68
|
- **Stepper**
|
|
69
|
+
- **Switch**
|
|
370
70
|
- **Table**
|
|
371
71
|
- **Tabs**
|
|
372
|
-
- **
|
|
373
|
-
- **
|
|
72
|
+
- **Textarea**
|
|
73
|
+
- **ToggleButton**
|
|
374
74
|
- **ToggleSwitch**
|
|
375
75
|
- **Tooltip**
|
|
376
76
|
- **Typography**
|
|
77
|
+
- **Dropdown**
|
|
78
|
+
- **ActionMenu**
|
|
79
|
+
- **Registration**
|
|
80
|
+
- **DashboardStatistic**
|
|
81
|
+
- **DropzoneUploader**
|
|
82
|
+
- **ProfileShowcase**
|
|
83
|
+
- **Sidebar**
|
|
84
|
+
- **BottomNavigation**
|
|
85
|
+
- **Breadcrumbs**
|
|
86
|
+
- **Snackbar**
|
|
377
87
|
|
|
378
|
-
---
|
|
379
88
|
|
|
380
89
|
## 🎨 Default Colors
|
|
381
90
|
|
|
@@ -419,8 +128,6 @@ To Extend and build sleek interfaces straight from your markup, you can install
|
|
|
419
128
|
npm i @unizap/unicss
|
|
420
129
|
```
|
|
421
130
|
|
|
422
|
-
---
|
|
423
|
-
|
|
424
131
|
You can add custom colors to UniUI's color system using the exported `extendColorMap` and `extendRangeColorMap` functions.
|
|
425
132
|
|
|
426
133
|
**Example:**
|
|
@@ -432,11 +139,12 @@ import { extendColorMap } from '@unizap/uniui'
|
|
|
432
139
|
|
|
433
140
|
extendColorMap({
|
|
434
141
|
brand: {
|
|
435
|
-
filled:
|
|
436
|
-
outline:
|
|
437
|
-
transparent:
|
|
438
|
-
accent:
|
|
439
|
-
peer:
|
|
142
|
+
filled: "bg-color-violet-500 text-color-white",
|
|
143
|
+
outline: "border-color-violet-500 text-color-violet-500",
|
|
144
|
+
transparent: "text-color-violet-500",
|
|
145
|
+
accent: "accent-color-violet-500",
|
|
146
|
+
peer: "peer-checked:border-color-violet-500 peer-checked:text-color-violet-500",
|
|
147
|
+
text: "text-color-violet-500",
|
|
440
148
|
},
|
|
441
149
|
})
|
|
442
150
|
```
|
|
@@ -444,11 +152,19 @@ extendColorMap({
|
|
|
444
152
|
2. Use your new color in any component:
|
|
445
153
|
|
|
446
154
|
```jsx
|
|
447
|
-
import './brandColor.js'
|
|
155
|
+
import './brandColor.js';
|
|
156
|
+
|
|
157
|
+
<Button color="brand">Brand Button</Button>
|
|
158
|
+
```
|
|
448
159
|
|
|
449
|
-
|
|
160
|
+
3. Run the UniCSS CLI to generate your CSS file:
|
|
161
|
+
|
|
162
|
+
```sh
|
|
163
|
+
npx unicss -w -o src/style.css --skip-base
|
|
450
164
|
```
|
|
451
165
|
|
|
166
|
+
---
|
|
167
|
+
|
|
452
168
|
You can also extend Slider colors:
|
|
453
169
|
|
|
454
170
|
```js
|
package/dist/uniui.js
CHANGED
|
@@ -5842,24 +5842,26 @@ const li = {
|
|
|
5842
5842
|
je,
|
|
5843
5843
|
{
|
|
5844
5844
|
color: "dark",
|
|
5845
|
-
icon: /* @__PURE__ */ a.jsx("svg", { className:
|
|
5845
|
+
icon: /* @__PURE__ */ a.jsx("svg", { className: "size-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a.jsx("path", { d: "M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z" }) }),
|
|
5846
5846
|
onClick: () => o(1),
|
|
5847
5847
|
disabled: u,
|
|
5848
5848
|
roundedFull: !0,
|
|
5849
5849
|
size: "small",
|
|
5850
|
-
variant: "transparent"
|
|
5850
|
+
variant: "transparent",
|
|
5851
|
+
className: l
|
|
5851
5852
|
}
|
|
5852
5853
|
),
|
|
5853
5854
|
/* @__PURE__ */ a.jsx(
|
|
5854
5855
|
je,
|
|
5855
5856
|
{
|
|
5856
5857
|
color: "dark",
|
|
5857
|
-
icon: /* @__PURE__ */ a.jsx("svg", { className:
|
|
5858
|
+
icon: /* @__PURE__ */ a.jsx("svg", { className: "size-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a.jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) }),
|
|
5858
5859
|
onClick: () => o(n - 1),
|
|
5859
5860
|
disabled: u,
|
|
5860
5861
|
roundedFull: !0,
|
|
5861
5862
|
size: "small",
|
|
5862
|
-
variant: "transparent"
|
|
5863
|
+
variant: "transparent",
|
|
5864
|
+
className: l
|
|
5863
5865
|
}
|
|
5864
5866
|
),
|
|
5865
5867
|
/* @__PURE__ */ a.jsxs("span", { className: `text-sm text-color-gray-800 ${s}`, children: [
|
|
@@ -5872,24 +5874,26 @@ const li = {
|
|
|
5872
5874
|
je,
|
|
5873
5875
|
{
|
|
5874
5876
|
color: "dark",
|
|
5875
|
-
icon: /* @__PURE__ */ a.jsx("svg", { className:
|
|
5877
|
+
icon: /* @__PURE__ */ a.jsx("svg", { className: "size-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a.jsx("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) }),
|
|
5876
5878
|
onClick: () => o(n + 1),
|
|
5877
5879
|
disabled: p,
|
|
5878
5880
|
roundedFull: !0,
|
|
5879
5881
|
size: "small",
|
|
5880
|
-
variant: "transparent"
|
|
5882
|
+
variant: "transparent",
|
|
5883
|
+
className: l
|
|
5881
5884
|
}
|
|
5882
5885
|
),
|
|
5883
5886
|
!r && /* @__PURE__ */ a.jsx(
|
|
5884
5887
|
je,
|
|
5885
5888
|
{
|
|
5886
5889
|
color: "dark",
|
|
5887
|
-
icon: /* @__PURE__ */ a.jsx("svg", { className:
|
|
5890
|
+
icon: /* @__PURE__ */ a.jsx("svg", { className: "size-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ a.jsx("path", { d: "M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z" }) }),
|
|
5888
5891
|
onClick: () => o(c),
|
|
5889
5892
|
disabled: p,
|
|
5890
5893
|
roundedFull: !0,
|
|
5891
5894
|
size: "small",
|
|
5892
|
-
variant: "transparent"
|
|
5895
|
+
variant: "transparent",
|
|
5896
|
+
className: l
|
|
5893
5897
|
}
|
|
5894
5898
|
)
|
|
5895
5899
|
] });
|
package/dist/uniui.umd.cjs
CHANGED
|
@@ -123,7 +123,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
123
123
|
* LICENSE.md file in the root directory of this source tree.
|
|
124
124
|
*
|
|
125
125
|
* @license MIT
|
|
126
|
-
*/function Jr(e){const n={state:{},onStateChange:()=>{},renderFallbackValue:null,...e},[t]=Tt.useState(()=>({current:Kr(n)})),[o,r]=Tt.useState(()=>t.current.initialState);return t.current.setOptions(i=>({...i,...e,state:{...o,...e.state},onStateChange:l=>{r(l),e.onStateChange==null||e.onStateChange(l)}})),t.current}const Qr={h1:"text-5xl font-bold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-semibold",h5:"text-xl font-semibold",h6:"text-lg font-semibold",subtitle1:"text-base font-medium",subtitle2:"text-sm font-normal",body1:"text-base",body2:"text-sm",caption:"text-xs",overline:"text-xs uppercase tracking-wide"},Vn=({variant:e="body1",component:n,className:t="",children:o,color:r="dark"})=>{var s;const l=n||{h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"p",subtitle2:"p",body1:"p",body2:"p",caption:"span",overline:"span"}[e]||"p";return a.jsx(l,{className:`${Qr[e]} ${(s=pe[r])==null?void 0:s.text} ${t}`,children:o})},Hn=({total:e,currentPage:n,pageSize:t=10,onPageChange:o,hideEdgeButtons:r=!1,className:i="",iconClass:l="",pageClass:s=""})=>{const c=Math.ceil(e/t),u=n===1,d=n===c;return c<=1?null:a.jsxs("div",{className:`flex items-center space-x-1 ${i}`,children:[!r&&a.jsx(he,{color:"dark",icon:a.jsx("svg",{className
|
|
126
|
+
*/function Jr(e){const n={state:{},onStateChange:()=>{},renderFallbackValue:null,...e},[t]=Tt.useState(()=>({current:Kr(n)})),[o,r]=Tt.useState(()=>t.current.initialState);return t.current.setOptions(i=>({...i,...e,state:{...o,...e.state},onStateChange:l=>{r(l),e.onStateChange==null||e.onStateChange(l)}})),t.current}const Qr={h1:"text-5xl font-bold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-semibold",h5:"text-xl font-semibold",h6:"text-lg font-semibold",subtitle1:"text-base font-medium",subtitle2:"text-sm font-normal",body1:"text-base",body2:"text-sm",caption:"text-xs",overline:"text-xs uppercase tracking-wide"},Vn=({variant:e="body1",component:n,className:t="",children:o,color:r="dark"})=>{var s;const l=n||{h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"p",subtitle2:"p",body1:"p",body2:"p",caption:"span",overline:"span"}[e]||"p";return a.jsx(l,{className:`${Qr[e]} ${(s=pe[r])==null?void 0:s.text} ${t}`,children:o})},Hn=({total:e,currentPage:n,pageSize:t=10,onPageChange:o,hideEdgeButtons:r=!1,className:i="",iconClass:l="",pageClass:s=""})=>{const c=Math.ceil(e/t),u=n===1,d=n===c;return c<=1?null:a.jsxs("div",{className:`flex items-center space-x-1 ${i}`,children:[!r&&a.jsx(he,{color:"dark",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"})}),onClick:()=>o(1),disabled:u,roundedFull:!0,size:"small",variant:"transparent",className:l}),a.jsx(he,{color:"dark",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"})}),onClick:()=>o(n-1),disabled:u,roundedFull:!0,size:"small",variant:"transparent",className:l}),a.jsxs("span",{className:`text-sm text-color-gray-800 ${s}`,children:["Page ",n," of ",c]}),a.jsx(he,{color:"dark",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"})}),onClick:()=>o(n+1),disabled:d,roundedFull:!0,size:"small",variant:"transparent",className:l}),!r&&a.jsx(he,{color:"dark",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z"})}),onClick:()=>o(c),disabled:d,roundedFull:!0,size:"small",variant:"transparent",className:l})]})},ei=({data:e,columns:n=[],pageSize:t,pageIndex:o,onPageSizeChange:r,onPageChange:i,rowOptionArray:l=[5,10,15],totalRecords:s=e.length,className:c="",paginationClassName:u="",tdClassName:d="",thClassName:m="",responsive:p=!1})=>{const f=Jr({data:e,columns:n,getCoreRowModel:Xr(),manualPagination:!0,pageCount:Math.ceil(s/t),state:{pagination:{pageIndex:o,pageSize:t}}});return a.jsx(a.Fragment,{children:a.jsxs("div",{className:`relative overflow-y-auto flex flex-col ${c} `,children:[a.jsx("div",{className:`${p?"overflow-x-auto":""}`,children:a.jsxs("table",{className:"w-full relative border-collapse",children:[a.jsx("thead",{className:"sticky top-0 left-0 rounded-xl bg-color-[#FAFBFB] z-10 h-10",children:f.getHeaderGroups().map(x=>a.jsx("tr",{children:x.headers.map(g=>a.jsx("th",{className:`bg-color-[#FAFBFB] p-2 text-left text-xs font-semibold text-color-gray-500 border-b border-color-gray-200 ${m}`,children:g.isPlaceholder?null:g.column.columnDef.header instanceof Function?g.column.columnDef.header(g.getContext()):g.column.columnDef.header},g.id))},x.id))}),a.jsx("tbody",{className:"",children:f.getRowModel().rows.map(x=>a.jsx("tr",{className:"border-b border-color-gray-200",children:x.getVisibleCells().map(g=>a.jsx("td",{className:`px-2 py-4 font-normal text-sm text-color-gray-800 ${d}`,children:g.column.columnDef.cell instanceof Function?g.column.columnDef.cell(g.getContext()):g.getValue()},g.id))},x.id))})]})}),a.jsxs("div",{className:`w-full py-4 px-2 border-t border-color-gray-200 bg-color-[#FAFBFB] flex justify-between items-center ${u} sticky bottom-0 z-10`,children:[a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsx(Vn,{variant:"body2",className:"hidden md:!flex",children:"Rows per page"}),a.jsx(kn,{options:l,selectedValue:t,placementTop:!0,onChange:x=>{r(x),i(0)}})]}),a.jsx(Hn,{total:s,pageSize:t,currentPage:o+1,onPageChange:x=>i(x-1)})]})]})})},ti=({children:e,className:n=""})=>a.jsx("ul",{className:`divide-y divide-color-gray-200 rounded-md bg-color-white shadow-sm border border-color-gray-200 ${n}`,children:e}),ni=({children:e,secondaryAction:n,className:t=""})=>a.jsxs("li",{className:`flex items-center justify-between overflow-hidden px-4 py-3 hover:bg-color-gray-50 transition ${t}`,children:[a.jsx("div",{className:"flex-1",children:e}),n&&a.jsx("div",{className:"ml-4",children:n})]}),oi=({open:e,onClick:n,className:t="",children:o,...r})=>{const[i,l]=h.useState(!1);return h.useEffect(()=>{let s;return e?s=setTimeout(()=>l(!0),100):l(!1),()=>clearTimeout(s)},[e]),!e&&!i?null:a.jsx("div",{className:`fixed inset-0 z-999 bg-color-black/50 flex items-center justify-center transition-all duration-300 ${i?"opacity-100 pointer-events-auto":"opacity-0 pointer-events-none"} ${t}`,onClick:n,"aria-hidden":!i,...r,children:o})},Bn=({animation:e="pulse",variant:n="rectangular",width:t,height:o,className:r=""})=>{const i="bg-color-gray-200 dark:bg-color-gray-700",l={pulse:"animate-pulse",wave:"relative overflow-hidden"},s=()=>{switch(n){case"circular":return{classes:"rounded-full",defaultWidth:40,defaultHeight:40};case"rectangular":return{classes:"",defaultWidth:200,defaultHeight:100};case"rounded":return{classes:"rounded-lg",defaultWidth:200,defaultHeight:100};case"text":return{classes:"rounded-sm",defaultWidth:void 0,defaultHeight:16};default:return{classes:"",defaultWidth:200,defaultHeight:100}}},{classes:c,defaultWidth:u,defaultHeight:d}=s(),m=t??u,p=o??d,f={};m!==void 0&&(f.width=`${m}px`),p!==void 0&&(f.height=`${p}px`),n==="text"&&t===void 0&&(f.width="100%");const x=[i,c,l[e],r].filter(Boolean).join(" ");return a.jsx("div",{className:x,style:f,children:e==="wave"&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:"absolute inset-0 bg-gradient-[linear-gradient(90deg,_rgba(255,_255,_255,_0)_0%,_rgba(255,_255,_255,_0.35)_50%,_rgba(255,_255,_255,_0)_100%)] dark:bg-gradient-[linear-gradient(90deg,_rgba(255,_255,_255,_0)_0%,_rgba(255,_255,_255,_0.1)_50%,_rgba(255,_255,_255,_0)_100%)]",style:{animation:"skeleton-wave 2s ease-in-out infinite"}}),a.jsx("style",{children:`
|
|
127
127
|
@keyframes skeleton-wave {
|
|
128
128
|
0% { transform: translateX(-100%); }
|
|
129
129
|
50% { transform: translateX(100%); }
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unizap/uniui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.41",
|
|
4
|
+
"description": "UniUi helps developers and designers build beautiful, responsive UIs faster with ready-made, customizable components. Simplify your workflow and create stunning user interfaces effortlessly.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist",
|
|
@@ -47,6 +47,9 @@
|
|
|
47
47
|
"frontend",
|
|
48
48
|
"typescript"
|
|
49
49
|
],
|
|
50
|
+
"author": "Unizap",
|
|
51
|
+
"license": "MIT",
|
|
52
|
+
"homepage": "https://uniui-docs.onrender.com",
|
|
50
53
|
"peerDependencies": {
|
|
51
54
|
"react": ">=16.8.0",
|
|
52
55
|
"react-dom": ">=16.8.0"
|