@memelabui/ui 0.5.1 → 0.6.0

package/README.md

@@ -51,7 +51,7 @@ function App() {
 }
 ```
 
-## Components (50+ exports)
+## Components (60+ exports)
 
 ### Form
 
@@ -60,6 +60,7 @@ function App() {
 | `Input` | Text input with label, error, helperText |
 | `SearchInput` | Search input with icon and clear button |
 | `Select` | Select dropdown with label/error wrapper |
+| `Combobox` | Searchable select with keyboard navigation and filtering |
 | `Textarea` | Multiline text input with label/error |
 | `Checkbox` | Custom checkbox with indeterminate support |
 | `RadioGroup` / `RadioItem` | Compound radio button group |
@@ -111,6 +112,7 @@ function App() {
 |-----------|-------------|
 | `Pagination` | Page navigation with prev/next, ellipsis, active state |
 | `Stepper` | Horizontal step indicator for wizards/onboarding |
+| `Breadcrumbs` | Breadcrumb navigation with links/buttons/separators |
 
 ### Overlay
 
@@ -122,6 +124,15 @@ function App() {
 | `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
 | `MutationOverlay` | Saving/saved/error status overlay for cards |
 | `NotificationBell` | Notification bell button with unread count badge and ping animation |
+| `Popover` | Click-triggered positioned popup with portal |
+| `Drawer` | Slide-in side panel (left/right/bottom) with focus trap |
+
+### Typography
+
+| Component | Description |
+|-----------|-------------|
+| `Heading` | Heading h1-h6 with size/color presets and gradient variant |
+| `Text` | Text paragraph/span with size, color, weight, and truncate |
 
 ### Layout
 
@@ -131,6 +142,8 @@ function App() {
 | `Navbar` | Fixed glass navigation bar |
 | `Sidebar` | Collapsible glass sidebar |
 | `DashboardLayout` | Navbar + sidebar + content composition |
+| `Stack` | Flex container with direction, gap, align, justify |
+| `ScrollArea` | Scroll container with custom dark scrollbar styling |
 
 ### Feedback
 
@@ -139,6 +152,13 @@ function App() {
 | `ToastProvider` / `useToast` | Toast notification system with variants |
 | `Alert` | Inline notification banner (info, success, warning, error) |
 | `CopyField` | Read-only field with copy button and optional masking |
+| `Transition` | Animated enter/exit wrapper (fade, scale, slide presets) |
+
+### Accessibility
+
+| Component | Description |
+|-----------|-------------|
+| `VisuallyHidden` | Screen reader-only content (invisible but accessible) |
 
 ### Hooks
 
@@ -157,14 +177,15 @@ function App() {
 Override CSS variables to customize the theme:
 
 ```css
+/* Values must be space-separated RGB channels (not hex) for Tailwind opacity support */
 :root {
-  --ml-bg: #0a0a0f;
-  --ml-primary: #8b5cf6;
-  --ml-accent: #667eea;
-  --ml-glow-purple: #764ba2;
-  --ml-glow-pink: #f093fb;
-  --ml-surface-50: #141420;
-  --ml-surface-100: #1e1e30;
+  --ml-bg: 10 10 15;
+  --ml-primary: 139 92 246;
+  --ml-accent: 102 126 234;
+  --ml-glow-purple: 118 75 162;
+  --ml-glow-pink: 240 147 251;
+  --ml-surface-50: 20 20 32;
+  --ml-surface-100: 30 30 48;
 }
 ```