@memelabui/ui 0.1.0 → 0.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.
Files changed (9) hide show
  1. package/README.md +85 -28
  2. package/dist/index.cjs +1237 -57
  3. package/dist/index.d.cts +188 -8
  4. package/dist/index.d.ts +188 -8
  5. package/dist/index.js +1217 -59
  6. package/dist/preset/index.cjs +13 -45
  7. package/dist/preset/index.js +13 -41
  8. package/dist/styles/index.css +351 -91
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,11 +1,13 @@
1
- # @memelab/ui
1
+ # @memelabui/ui
2
2
 
3
3
  Shared UI component library for MemeLab projects. Dark-first glassmorphism design system built with React, TypeScript, and Tailwind CSS.
4
4
 
5
+ [![npm](https://img.shields.io/npm/v/@memelabui/ui)](https://www.npmjs.com/package/@memelabui/ui)
6
+
5
7
  ## Install
6
8
 
7
9
  ```bash
8
- pnpm add @memelab/ui
10
+ pnpm add @memelabui/ui
9
11
  ```
10
12
 
11
13
  ## Setup
@@ -14,13 +16,13 @@ pnpm add @memelab/ui
14
16
 
15
17
  ```ts
16
18
  // tailwind.config.ts
17
- import memelabPreset from '@memelab/ui/preset';
19
+ import memelabPreset from '@memelabui/ui/preset';
18
20
 
19
21
  export default {
20
22
  presets: [memelabPreset],
21
23
  content: [
22
24
  './src/**/*.{ts,tsx}',
23
- './node_modules/@memelab/ui/dist/**/*.{js,mjs}',
25
+ './node_modules/@memelabui/ui/dist/**/*.{js,mjs}',
24
26
  ],
25
27
  };
26
28
  ```
@@ -29,74 +31,129 @@ export default {
29
31
 
30
32
  ```ts
31
33
  // main.tsx
32
- import '@memelab/ui/styles';
34
+ import '@memelabui/ui/styles';
33
35
  ```
34
36
 
35
37
  ### 3. Use components
36
38
 
37
39
  ```tsx
38
- import { Button, Card, Modal, Input } from '@memelab/ui';
40
+ import { Button, Card, Modal, Input, ToastProvider, useToast } from '@memelabui/ui';
39
41
 
40
42
  function App() {
41
43
  return (
42
- <Card hoverable>
43
- <Input label="Email" placeholder="you@example.com" />
44
- <Button variant="primary">Submit</Button>
45
- </Card>
44
+ <ToastProvider>
45
+ <Card hoverable>
46
+ <Input label="Email" placeholder="you@example.com" />
47
+ <Button variant="primary">Submit</Button>
48
+ </Card>
49
+ </ToastProvider>
46
50
  );
47
51
  }
48
52
  ```
49
53
 
50
54
  ## Components
51
55
 
52
- ### Core
56
+ ### Form
53
57
 
54
58
  | Component | Description |
55
59
  |-----------|-------------|
56
- | `Button` | Primary, secondary, danger, success, warning, ghost variants + loading state |
57
- | `IconButton` | Icon-only button with required aria-label |
58
- | `Input` | Text input with optional label, error, helperText |
60
+ | `Input` | Text input with label, error, helperText |
61
+ | `SearchInput` | Search input with icon and clear button |
59
62
  | `Select` | Select dropdown with label/error wrapper |
60
- | `Textarea` | Textarea with label/error wrapper |
61
- | `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
63
+ | `Textarea` | Multiline text input with label/error |
64
+ | `Checkbox` | Custom checkbox with indeterminate support |
65
+ | `RadioGroup` / `RadioItem` | Compound radio button group |
62
66
  | `Toggle` | Switch toggle (sm/md sizes) |
63
- | `Spinner` | Loading spinner (sm/md/lg) |
64
- | `Skeleton` | Pulse placeholder for loading states |
67
+
68
+ ### Actions
69
+
70
+ | Component | Description |
71
+ |-----------|-------------|
72
+ | `Button` | Primary, secondary, danger, success, warning, ghost variants + loading state |
73
+ | `IconButton` | Icon-only button with required `aria-label` |
74
+ | `ProgressButton` | Button with shimmer loading animation |
75
+
76
+ ### Display
77
+
78
+ | Component | Description |
79
+ |-----------|-------------|
65
80
  | `Card` | Surface or glass card container |
66
- | `Modal` | Dialog with focus trap, backdrop blur, a11y |
81
+ | `Badge` / `Pill` | Status badges (neutral, primary, success, danger, warning, accent) |
82
+ | `Tabs` / `TabList` / `Tab` / `TabPanel` | Compound tabs with underline and pill variants |
83
+ | `CollapsibleSection` | Animated expand/collapse with ARIA |
84
+ | `EmptyState` | Placeholder with icon, title, description, action |
85
+ | `Skeleton` | Pulse placeholder for loading states |
86
+ | `Spinner` | Loading spinner (sm/md/lg) |
87
+ | `DropZone` | Drag & drop file upload area with accept filter |
88
+
89
+ ### Overlay
90
+
91
+ | Component | Description |
92
+ |-----------|-------------|
93
+ | `Modal` | Dialog with focus trap, scroll lock, backdrop blur |
67
94
  | `ConfirmDialog` | Confirmation modal with cancel/confirm actions |
68
95
  | `Tooltip` | Hover/focus tooltip with portal positioning |
69
- | `EmptyState` | Empty state placeholder with icon, title, action |
70
- | `CollapsibleSection` | Animated expand/collapse section |
96
+ | `Dropdown` | Compound menu (Trigger, Menu, Item, Separator) |
71
97
 
72
98
  ### Layout
73
99
 
74
100
  | Component | Description |
75
101
  |-----------|-------------|
76
- | `PageShell` | Page wrapper with background orbs and max-width |
102
+ | `PageShell` | Page wrapper with animated background orbs |
77
103
  | `Navbar` | Fixed glass navigation bar |
78
104
  | `Sidebar` | Collapsible glass sidebar |
79
105
  | `DashboardLayout` | Navbar + sidebar + content composition |
80
106
 
107
+ ### Feedback
108
+
109
+ | Component | Description |
110
+ |-----------|-------------|
111
+ | `ToastProvider` / `useToast` | Toast notification system with variants |
112
+
113
+ ### Hooks
114
+
115
+ | Hook | Description |
116
+ |------|-------------|
117
+ | `useClipboard` | Copy text to clipboard with status |
118
+ | `useDisclosure` | Open/close state management |
119
+ | `useMediaQuery` | Responsive media query listener |
120
+ | `useDebounce` | Debounced value |
121
+
81
122
  ## Customization
82
123
 
83
124
  Override CSS variables to customize the theme:
84
125
 
85
126
  ```css
86
127
  :root {
87
- --ml-primary: #667eea;
88
- --ml-accent: #4c5fd4;
89
- --ml-bg: #0f0f18;
128
+ --ml-bg: #0a0a0f;
129
+ --ml-primary: #8b5cf6;
130
+ --ml-accent: #667eea;
131
+ --ml-glow-purple: #764ba2;
132
+ --ml-glow-pink: #f093fb;
133
+ --ml-surface-50: #141420;
134
+ --ml-surface-100: #1e1e30;
90
135
  }
91
136
  ```
92
137
 
138
+ ## Features
139
+
140
+ - **Dark-first glassmorphism** design system
141
+ - **Zero runtime dependencies** — only peer deps (react, react-dom, tailwindcss)
142
+ - **Tree-shakeable** — each component independently importable
143
+ - **Fully accessible** — ARIA attributes, keyboard navigation, focus management, `prefers-reduced-motion` support
144
+ - **SSR-safe** — no `document`/`window` access during server render
145
+ - **TypeScript-first** — all components and hooks fully typed with exported types
146
+ - **Tailwind preset** — tokens, colors, and animations included
147
+
93
148
  ## Development
94
149
 
95
150
  ```bash
96
151
  pnpm dev # Storybook on :6006
97
- pnpm build # Build package
98
- pnpm test # Run tests
99
- pnpm typecheck # Type check
152
+ pnpm build # Build package (tsup + postcss)
153
+ pnpm test # Run tests (vitest watch)
154
+ pnpm test:ci # Run tests once
155
+ pnpm typecheck # TypeScript check
156
+ pnpm lint # ESLint
100
157
  ```
101
158
 
102
159
  ## License