reusify-ui 2.1.0 → 2.3.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 +27 -6
- package/dist/reusify-ui.cjs +963 -30
- package/dist/reusify-ui.js +964 -31
- 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:
|
|
@@ -203,6 +203,7 @@ Options: `title`, `description`, `variant`, `duration` (ms, `Infinity` keeps it
|
|
|
203
203
|
### Tooltip & Dropdown
|
|
204
204
|
|
|
205
205
|
```jsx
|
|
206
|
+
<Tooltip content="Picks its own side" placement="auto"><Button>Hover</Button></Tooltip> {/* every placement flips and shifts to stay visible */}
|
|
206
207
|
<Tooltip content="Copy to clipboard" placement="top">
|
|
207
208
|
<Button variant="ghost">Copy</Button>
|
|
208
209
|
</Tooltip>
|
|
@@ -295,6 +296,26 @@ Both support controlled (`value` + `onChange`) and uncontrolled (`defaultValue`)
|
|
|
295
296
|
<Avatar name="Mia Johnson" status="online" badge={1} ring="primary" />
|
|
296
297
|
```
|
|
297
298
|
|
|
299
|
+
### New in 2.2 and 2.3
|
|
300
|
+
|
|
301
|
+
```jsx
|
|
302
|
+
<SegmentedControl options={['Day', 'Week', 'Month']} defaultValue="Week" aria-label="Range" />
|
|
303
|
+
<ProgressRing value={64} size={64} showValue />
|
|
304
|
+
<Stat label="New users" value="5,9k" trend={8.2} />
|
|
305
|
+
<DateTile date="2026-10-20" />
|
|
306
|
+
<StackedProgress segments={[{ label: 'Work', value: 54, color: '#3f9d5d' }, { label: 'Other', value: 46, color: '#e07a7a' }]} />
|
|
307
|
+
<StepList items={[{ title: 'Build', status: 'complete' }, { title: 'Deploy', status: 'running' }]} />
|
|
308
|
+
<Dropzone maxSize={10_000_000} onFiles={upload} />
|
|
309
|
+
<FileItem name="report.pdf" size={2457600} status="uploading" progress={42} onRemove={cancel} />
|
|
310
|
+
<SignaturePad onChange={setSignature} />
|
|
311
|
+
<IconTile color="#7c6fff" badge={<FiKey />} label="Acme"><YourLogo /></IconTile>
|
|
312
|
+
<DotText dot={4} style={{ fontSize: 48 }}>YYZ</DotText>
|
|
313
|
+
<Progress variant="ticks" value={67} showValue /> {/* also variant="bars", and glow */}
|
|
314
|
+
<Progress variant="capsule" value={46} glow icon={<PlaneIcon />} endLabel="-7H 01M" />
|
|
315
|
+
<Button variant="key" color="#f472b6" aria-pressed>Pressed</Button>
|
|
316
|
+
toast.success('Saved', { appearance: 'glass', animation: 'bounce', progress: true });
|
|
317
|
+
```
|
|
318
|
+
|
|
298
319
|
### FrameCard & Calendar
|
|
299
320
|
|
|
300
321
|
```jsx
|