@unizap/uniui 1.0.40 → 1.0.42

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 (6) hide show
  1. package/README.md +41 -325
  2. package/dist/components/DatePicker/DatePicker.d.ts +1 -1
  3. package/dist/components/DatePicker/DatePicker.types.d.ts +2 -0
  4. package/dist/uniui.js +1067 -1061
  5. package/dist/uniui.umd.cjs +66 -66
  6. 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
- ```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
-
344
- - **CardWrapper**
43
+ - **Alert**
44
+ - **Avatar**
45
+ - **Badge**
46
+ - **Backdrop**
47
+ - **Button**
48
+ - **Card**
345
49
  - **Carousel**
346
50
  - **Checkbox**
347
- - **DashboardStatBoxes**
348
- - **DatePicker**
51
+ - **Datepicker**
349
52
  - **Dialog**
350
53
  - **Divider**
351
54
  - **Drawer**
352
- - **Dropdown**
353
- - **DropzoneUploader**
354
55
  - **EmptyState**
355
56
  - **IconButton**
356
- - **Menu**
357
- - **OtpInput**
358
- - **Pagination**
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
- - **Sidebar**
65
+ - **Sheet**
366
66
  - **Skeleton**
367
67
  - **Slider**
368
- - **Snackbar**
369
68
  - **Stepper**
69
+ - **Switch**
370
70
  - **Table**
371
71
  - **Tabs**
372
- - **TextArea**
373
- - **TextInput**
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: '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',
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
- ;<Button color="brand">Brand Button</Button>
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/components/DatePicker/DatePicker.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { DatePickerProps } from './DatePicker.types';
2
2
 
3
- export declare const DatePicker: ({ mode, type, showTime, onlyTime, className, onChange, placeholder, icon, disableBefore, disableAfter, selectedDate, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
3
+ export declare const DatePicker: ({ mode, type, showTime, onlyTime, className, onChange, placeholder, icon, disableBefore, disableAfter, selectedDate, hideFutureDates, defaultDate, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
4
4
  export default DatePicker;
package/dist/components/DatePicker/DatePicker.types.d.ts CHANGED
@@ -13,4 +13,6 @@ export interface DatePickerProps {
13
13
  disableBefore?: number;
14
14
  disableAfter?: number;
15
15
  selectedDate?: number | null;
16
+ hideFutureDates?: boolean;
17
+ defaultDate?: number;
16
18
  }