reusify-ui 2.1.0 → 2.2.0
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 +25 -6
- package/dist/reusify-ui.cjs +760 -8
- package/dist/reusify-ui.js +760 -8
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,12 +62,12 @@ export default function App() {
|
|
|
62
62
|
| Category | Components |
|
|
63
63
|
| -------------- | -------------------------------------------------------------------------- |
|
|
64
64
|
| Actions | `Button`, `ButtonGroup` |
|
|
65
|
-
| Forms | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Calendar` |
|
|
66
|
-
| Data display | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Badge`, `Avatar`, `AvatarGroup`, `Table`, `Divider`, `Kbd`, `FrameCard` |
|
|
67
|
-
| Feedback | `Alert`, `ToastProvider` + `useToast`, `Spinner`, `Progress`, `Skeleton`
|
|
65
|
+
| Forms | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Calendar`, `Dropzone`, `FileItem`, `SignaturePad` |
|
|
66
|
+
| Data display | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Badge`, `Avatar`, `AvatarGroup`, `Table`, `Divider`, `Kbd`, `FrameCard`, `Stat`, `DateTile`, `StepList`, `StatusIcon` |
|
|
67
|
+
| Feedback | `Alert`, `ToastProvider` + `useToast`, `Spinner`, `Progress`, `ProgressRing`, `StackedProgress`, `Skeleton` |
|
|
68
68
|
| Overlays | `Modal`, `Drawer`, `Tooltip`, `Dropdown` |
|
|
69
|
-
| Navigation | `Tabs`, `Accordion`, `Pagination`, `Breadcrumbs`
|
|
70
|
-
| Effects | `SpotlightCard`, `Pattern`
|
|
69
|
+
| Navigation | `Tabs`, `Accordion`, `Pagination`, `Breadcrumbs`, `SegmentedControl` |
|
|
70
|
+
| Effects | `SpotlightCard`, `Pattern`, `DotText`, `IconTile` |
|
|
71
71
|
| Hooks & utils | `useDisclosure`, `useClickOutside`, `useControllableState`, `cn` |
|
|
72
72
|
|
|
73
73
|
### Button
|
|
@@ -77,7 +77,7 @@ Pick a **variant** by emphasis, then a **color** for meaning:
|
|
|
77
77
|
| Emphasis | Variants | Use for |
|
|
78
78
|
| --- | --- | --- |
|
|
79
79
|
| High | `solid` (default), `brand`, `gradient`, `glossy`, `pixel` | The main action; one brand or gradient hero CTA per page |
|
|
80
|
-
| Medium | `secondary`, `soft`, `outline`, `subtle`, `raised`, `framed` | Partners of the main action, menus, actions in cards |
|
|
80
|
+
| Medium | `secondary`, `soft`, `outline`, `subtle`, `raised`, `framed`, `key` | Partners of the main action, menus, actions in cards |
|
|
81
81
|
| Low | `ghost`, `text`, `link`, `dashed` | Toolbars, "Learn more", inline and "add" actions |
|
|
82
82
|
|
|
83
83
|
Every button also takes **any CSS color**, a text color, a corner radius and a content alignment:
|
|
@@ -295,6 +295,25 @@ Both support controlled (`value` + `onChange`) and uncontrolled (`defaultValue`)
|
|
|
295
295
|
<Avatar name="Mia Johnson" status="online" badge={1} ring="primary" />
|
|
296
296
|
```
|
|
297
297
|
|
|
298
|
+
### New in 2.2
|
|
299
|
+
|
|
300
|
+
```jsx
|
|
301
|
+
<SegmentedControl options={['Day', 'Week', 'Month']} defaultValue="Week" aria-label="Range" />
|
|
302
|
+
<ProgressRing value={64} size={64} showValue />
|
|
303
|
+
<Stat label="New users" value="5,9k" trend={8.2} />
|
|
304
|
+
<DateTile date="2026-10-20" />
|
|
305
|
+
<StackedProgress segments={[{ label: 'Work', value: 54, color: '#3f9d5d' }, { label: 'Other', value: 46, color: '#e07a7a' }]} />
|
|
306
|
+
<StepList items={[{ title: 'Build', status: 'complete' }, { title: 'Deploy', status: 'running' }]} />
|
|
307
|
+
<Dropzone maxSize={10_000_000} onFiles={upload} />
|
|
308
|
+
<FileItem name="report.pdf" size={2457600} status="uploading" progress={42} onRemove={cancel} />
|
|
309
|
+
<SignaturePad onChange={setSignature} />
|
|
310
|
+
<IconTile color="#7c6fff" badge={<FiKey />} label="Acme"><YourLogo /></IconTile>
|
|
311
|
+
<DotText dot={4} style={{ fontSize: 48 }}>YYZ</DotText>
|
|
312
|
+
<Progress variant="ticks" value={67} showValue /> {/* also variant="bars", and glow */}
|
|
313
|
+
<Progress variant="capsule" value={46} glow icon={<PlaneIcon />} endLabel="-7H 01M" />
|
|
314
|
+
<Button variant="key" color="#f472b6" aria-pressed>Pressed</Button>
|
|
315
|
+
```
|
|
316
|
+
|
|
298
317
|
### FrameCard & Calendar
|
|
299
318
|
|
|
300
319
|
```jsx
|