@memelabui/ui 0.1.1 → 0.3.0

package/README.md

@@ -1,11 +1,13 @@
-# @memelab/ui
+# @memelabui/ui
 
 Shared UI component library for MemeLab projects. Dark-first glassmorphism design system built with React, TypeScript, and Tailwind CSS.
 
+[![npm](https://img.shields.io/npm/v/@memelabui/ui)](https://www.npmjs.com/package/@memelabui/ui)
+
 ## Install
 
 ```bash
-pnpm add @memelab/ui
+pnpm add @memelabui/ui
 ```
 
 ## Setup
@@ -14,13 +16,13 @@ pnpm add @memelab/ui
 
 ```ts
 // tailwind.config.ts
-import memelabPreset from '@memelab/ui/preset';
+import memelabPreset from '@memelabui/ui/preset';
 
 export default {
   presets: [memelabPreset],
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/@memelab/ui/dist/**/*.{js,mjs}',
+    './node_modules/@memelabui/ui/dist/**/*.{js,mjs}',
   ],
 };
 ```
@@ -29,74 +31,147 @@ export default {
 
 ```ts
 // main.tsx
-import '@memelab/ui/styles';
+import '@memelabui/ui/styles';
 ```
 
 ### 3. Use components
 
 ```tsx
-import { Button, Card, Modal, Input } from '@memelab/ui';
+import { Button, Card, Input, ToastProvider } from '@memelabui/ui';
 
 function App() {
   return (
-    <Card hoverable>
-      <Input label="Email" placeholder="you@example.com" />
-      <Button variant="primary">Submit</Button>
-    </Card>
+    <ToastProvider>
+      <Card hoverable>
+        <Input label="Email" placeholder="you@example.com" />
+        <Button variant="primary">Submit</Button>
+      </Card>
+    </ToastProvider>
   );
 }
 ```
 
-## Components
+## Components (43 exports)
 
-### Core
+### Form
 
 | Component | Description |
 |-----------|-------------|
-| `Button` | Primary, secondary, danger, success, warning, ghost variants + loading state |
-| `IconButton` | Icon-only button with required aria-label |
-| `Input` | Text input with optional label, error, helperText |
+| `Input` | Text input with label, error, helperText |
+| `SearchInput` | Search input with icon and clear button |
 | `Select` | Select dropdown with label/error wrapper |
-| `Textarea` | Textarea with label/error wrapper |
-| `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
+| `Textarea` | Multiline text input with label/error |
+| `Checkbox` | Custom checkbox with indeterminate support |
+| `RadioGroup` / `RadioItem` | Compound radio button group |
 | `Toggle` | Switch toggle (sm/md sizes) |
-| `Spinner` | Loading spinner (sm/md/lg) |
-| `Skeleton` | Pulse placeholder for loading states |
+| `Slider` | Range input with custom track/thumb and value display |
+| `TagInput` | Tag input with Enter/comma/paste, dedup, maxTags |
+| `ColorInput` | Hex color picker with swatch + text input |
+| `FormField` | Generic label + error + helper wrapper for any input |
+
+### Actions
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary, secondary, danger, success, warning, ghost variants + loading |
+| `IconButton` | Icon-only button with required `aria-label` |
+| `ProgressButton` | Button with shimmer loading animation |
+
+### Data Display
+
+| Component | Description |
+|-----------|-------------|
 | `Card` | Surface or glass card container |
-| `Modal` | Dialog with focus trap, backdrop blur, a11y |
+| `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
+| `StatCard` | Dashboard stat card with value, label, icon, trend indicator |
+| `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableHead` / `TableCell` | Styled table primitives |
+| `Tabs` / `TabList` / `Tab` / `TabPanel` | Compound tabs with underline and pill variants |
+| `CollapsibleSection` | Animated expand/collapse with ARIA |
+| `EmptyState` | Placeholder with icon, title, description, action |
+| `Skeleton` | Pulse placeholder for loading states |
+| `Spinner` | Loading spinner (sm/md/lg) |
+| `DropZone` | Drag & drop file upload area with accept filter |
+| `Avatar` | Circular avatar with image + initials fallback |
+| `Divider` | Horizontal/vertical divider with optional label |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| `Pagination` | Page navigation with prev/next, ellipsis, active state |
+| `Stepper` | Horizontal step indicator for wizards/onboarding |
+
+### Overlay
+
+| Component | Description |
+|-----------|-------------|
+| `Modal` | Dialog with focus trap, scroll lock, backdrop blur |
 | `ConfirmDialog` | Confirmation modal with cancel/confirm actions |
 | `Tooltip` | Hover/focus tooltip with portal positioning |
-| `EmptyState` | Empty state placeholder with icon, title, action |
-| `CollapsibleSection` | Animated expand/collapse section |
+| `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
 
 ### Layout
 
 | Component | Description |
 |-----------|-------------|
-| `PageShell` | Page wrapper with background orbs and max-width |
+| `PageShell` | Page wrapper with animated background orbs |
 | `Navbar` | Fixed glass navigation bar |
 | `Sidebar` | Collapsible glass sidebar |
 | `DashboardLayout` | Navbar + sidebar + content composition |
 
+### Feedback
+
+| Component | Description |
+|-----------|-------------|
+| `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 |
+| `ProgressBar` | Horizontal progress bar with variants and sizes |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useClipboard` | Copy text to clipboard with status |
+| `useDisclosure` | Open/close state management |
+| `useMediaQuery` | Responsive media query listener |
+| `useDebounce` | Debounced value |
+
 ## Customization
 
 Override CSS variables to customize the theme:
 
 ```css
 :root {
-  --ml-primary: #667eea;
-  --ml-accent: #4c5fd4;
-  --ml-bg: #0f0f18;
+  --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;
 }
 ```
 
+## Features
+
+- **Dark-first glassmorphism** design system
+- **Zero runtime dependencies** — only peer deps (react, react-dom, tailwindcss)
+- **Tree-shakeable** — each component independently importable
+- **Fully accessible** — ARIA attributes, keyboard navigation, focus management, `prefers-reduced-motion` support
+- **SSR-safe** — no `document`/`window` access during server render
+- **TypeScript-first** — all components and hooks fully typed with exported types
+- **Tailwind preset** — tokens, colors, and animations included
+
 ## Development
 
 ```bash
 pnpm dev            # Storybook on :6006
-pnpm build          # Build package
-pnpm test           # Run tests
-pnpm typecheck      # Type check
+pnpm build          # Build package (tsup + postcss)
+pnpm test           # Run tests (vitest watch)
+pnpm test:ci        # Run tests once
+pnpm typecheck      # TypeScript check
+pnpm lint           # ESLint
 ```
 
 ## License