@memelabui/ui 0.2.0 → 0.4.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 +34 -5
- package/dist/index.cjs +1704 -204
- package/dist/index.d.cts +223 -2
- package/dist/index.d.ts +223 -2
- package/dist/index.js +1561 -89
- package/dist/styles/index.css +404 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ import '@memelabui/ui/styles';
|
|
|
37
37
|
### 3. Use components
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
|
-
import { Button, Card,
|
|
40
|
+
import { Button, Card, Input, ToastProvider } from '@memelabui/ui';
|
|
41
41
|
|
|
42
42
|
function App() {
|
|
43
43
|
return (
|
|
@@ -51,7 +51,7 @@ function App() {
|
|
|
51
51
|
}
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
## Components
|
|
54
|
+
## Components (50+ exports)
|
|
55
55
|
|
|
56
56
|
### Form
|
|
57
57
|
|
|
@@ -63,28 +63,54 @@ function App() {
|
|
|
63
63
|
| `Textarea` | Multiline text input with label/error |
|
|
64
64
|
| `Checkbox` | Custom checkbox with indeterminate support |
|
|
65
65
|
| `RadioGroup` / `RadioItem` | Compound radio button group |
|
|
66
|
-
| `Toggle` | Switch toggle (sm/md sizes) |
|
|
66
|
+
| `Toggle` | Switch toggle (sm/md sizes) with `busy` spinner state |
|
|
67
|
+
| `Slider` | Range input with custom track/thumb and value display |
|
|
68
|
+
| `TagInput` | Tag input with Enter/comma/paste, dedup, maxTags |
|
|
69
|
+
| `ColorInput` | Hex color picker with swatch + text input |
|
|
70
|
+
| `FormField` | Generic label + error + helper wrapper for any input |
|
|
67
71
|
|
|
68
72
|
### Actions
|
|
69
73
|
|
|
70
74
|
| Component | Description |
|
|
71
75
|
|-----------|-------------|
|
|
72
|
-
| `Button` | Primary, secondary, danger, success, warning, ghost variants + loading
|
|
76
|
+
| `Button` | Primary, secondary, danger, success, warning, ghost variants + loading |
|
|
73
77
|
| `IconButton` | Icon-only button with required `aria-label` |
|
|
74
78
|
| `ProgressButton` | Button with shimmer loading animation |
|
|
75
79
|
|
|
76
|
-
### Display
|
|
80
|
+
### Data Display
|
|
77
81
|
|
|
78
82
|
| Component | Description |
|
|
79
83
|
|-----------|-------------|
|
|
80
84
|
| `Card` | Surface or glass card container |
|
|
85
|
+
| `SectionCard` | Settings section card with title, description, right slot, overlay slot |
|
|
81
86
|
| `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
|
|
87
|
+
| `StatCard` | Dashboard stat card with value, label, icon, trend indicator |
|
|
88
|
+
| `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableHead` / `TableCell` | Styled table primitives |
|
|
82
89
|
| `Tabs` / `TabList` / `Tab` / `TabPanel` | Compound tabs with underline and pill variants |
|
|
83
90
|
| `CollapsibleSection` | Animated expand/collapse with ARIA |
|
|
84
91
|
| `EmptyState` | Placeholder with icon, title, description, action |
|
|
85
92
|
| `Skeleton` | Pulse placeholder for loading states |
|
|
86
93
|
| `Spinner` | Loading spinner (sm/md/lg) |
|
|
87
94
|
| `DropZone` | Drag & drop file upload area with accept filter |
|
|
95
|
+
| `Avatar` | Circular avatar with image + initials fallback |
|
|
96
|
+
| `Divider` | Horizontal/vertical divider with optional label |
|
|
97
|
+
| `ActiveFilterPills` | Dismissible filter pill row with "Clear all" action |
|
|
98
|
+
| `DotIndicator` | Dot-based remaining count with urgency colors |
|
|
99
|
+
|
|
100
|
+
### Progress & Status
|
|
101
|
+
|
|
102
|
+
| Component | Description |
|
|
103
|
+
|-----------|-------------|
|
|
104
|
+
| `ProgressBar` | Horizontal progress bar with variants and sizes |
|
|
105
|
+
| `CooldownRing` | SVG circular countdown timer with color changes and pulse |
|
|
106
|
+
| `StageProgress` | Multi-stage process indicator with shimmer animation |
|
|
107
|
+
|
|
108
|
+
### Navigation
|
|
109
|
+
|
|
110
|
+
| Component | Description |
|
|
111
|
+
|-----------|-------------|
|
|
112
|
+
| `Pagination` | Page navigation with prev/next, ellipsis, active state |
|
|
113
|
+
| `Stepper` | Horizontal step indicator for wizards/onboarding |
|
|
88
114
|
|
|
89
115
|
### Overlay
|
|
90
116
|
|
|
@@ -94,6 +120,7 @@ function App() {
|
|
|
94
120
|
| `ConfirmDialog` | Confirmation modal with cancel/confirm actions |
|
|
95
121
|
| `Tooltip` | Hover/focus tooltip with portal positioning |
|
|
96
122
|
| `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
|
|
123
|
+
| `MutationOverlay` | Saving/saved/error status overlay for cards |
|
|
97
124
|
|
|
98
125
|
### Layout
|
|
99
126
|
|
|
@@ -109,6 +136,8 @@ function App() {
|
|
|
109
136
|
| Component | Description |
|
|
110
137
|
|-----------|-------------|
|
|
111
138
|
| `ToastProvider` / `useToast` | Toast notification system with variants |
|
|
139
|
+
| `Alert` | Inline notification banner (info, success, warning, error) |
|
|
140
|
+
| `CopyField` | Read-only field with copy button and optional masking |
|
|
112
141
|
|
|
113
142
|
### Hooks
|
|
114
143
|
|