@pelatform/ui.components 0.1.0 → 0.1.1
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 +394 -0
- package/package.json +6 -8
package/README.md
CHANGED
|
@@ -1 +1,395 @@
|
|
|
1
1
|
# @pelatform/ui.components
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@pelatform/ui.components)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
All UI components for the Pelatform UI Library. This package provides 170+ production-ready components organized into three categories: Animation (18), Base (77), and Radix (77).
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
# Using bun
|
|
12
|
+
bun add @pelatform/ui.components
|
|
13
|
+
|
|
14
|
+
# Using npm
|
|
15
|
+
npm install @pelatform/ui.components
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Import Styles
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import "@pelatform/ui.components/css";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Package Structure
|
|
25
|
+
|
|
26
|
+
This package uses a multi-entry build system with three organized entry points:
|
|
27
|
+
|
|
28
|
+
- **Main entry** (`@pelatform/ui.components`) - All components
|
|
29
|
+
- **Animation** (`@pelatform/ui.components/animation`) - 18 animation components
|
|
30
|
+
- **Base** (`@pelatform/ui.components/base`) - 77 headless components
|
|
31
|
+
- **Radix** (`@pelatform/ui.components/radix`) - 77 styled components
|
|
32
|
+
|
|
33
|
+
## Import Paths
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
// Animation components
|
|
37
|
+
import {
|
|
38
|
+
ShimmeringText,
|
|
39
|
+
TextReveal,
|
|
40
|
+
TypingText,
|
|
41
|
+
CountingNumber,
|
|
42
|
+
Marquee,
|
|
43
|
+
} from "@pelatform/ui.components/animation";
|
|
44
|
+
|
|
45
|
+
// Base headless components (full styling control)
|
|
46
|
+
import {
|
|
47
|
+
Button,
|
|
48
|
+
Input,
|
|
49
|
+
Select,
|
|
50
|
+
Dialog,
|
|
51
|
+
Tooltip,
|
|
52
|
+
} from "@pelatform/ui.components/base";
|
|
53
|
+
|
|
54
|
+
// Radix styled components (pre-styled)
|
|
55
|
+
import {
|
|
56
|
+
Accordion,
|
|
57
|
+
Card,
|
|
58
|
+
DataGrid,
|
|
59
|
+
Calendar,
|
|
60
|
+
Command,
|
|
61
|
+
} from "@pelatform/ui.components/radix";
|
|
62
|
+
|
|
63
|
+
// All components (not recommended - use specific imports)
|
|
64
|
+
import { Button, Card } from "@pelatform/ui.components";
|
|
65
|
+
|
|
66
|
+
// Styles
|
|
67
|
+
import "@pelatform/ui.components/css";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Components
|
|
71
|
+
|
|
72
|
+
### Animation (18 Components)
|
|
73
|
+
|
|
74
|
+
Text effects, number animations, layout effects, and backgrounds.
|
|
75
|
+
|
|
76
|
+
#### Text Effects
|
|
77
|
+
|
|
78
|
+
- **ShimmeringText** - Shimmering gradient text effect
|
|
79
|
+
- **TextReveal** - Text reveal animation
|
|
80
|
+
- **TypingText** - Typewriter text effect
|
|
81
|
+
- **VideoText** - Video-masked text effect
|
|
82
|
+
- **WordRotate** - Word rotation animation
|
|
83
|
+
|
|
84
|
+
#### Number Animations
|
|
85
|
+
|
|
86
|
+
- **CountingNumber** - Animated counter with counting effect
|
|
87
|
+
- **SlidingNumber** - Sliding number animation
|
|
88
|
+
|
|
89
|
+
#### Layout Effects
|
|
90
|
+
|
|
91
|
+
- **Marquee** - Infinite scrolling marquee
|
|
92
|
+
- **GitHubButton** - GitHub-style social button with hover effect
|
|
93
|
+
|
|
94
|
+
#### Backgrounds
|
|
95
|
+
|
|
96
|
+
- **GradientBackground** - Animated gradient background
|
|
97
|
+
- **GridBackground** - Grid pattern background
|
|
98
|
+
- **HoverBackground** - Interactive hover background
|
|
99
|
+
- **HexagonBadge** - Hexagon-shaped badge component
|
|
100
|
+
|
|
101
|
+
### Base (77 Components)
|
|
102
|
+
|
|
103
|
+
Headless components built on Base UI for complete styling control.
|
|
104
|
+
|
|
105
|
+
#### Forms
|
|
106
|
+
|
|
107
|
+
- **Input** - Accessible input field
|
|
108
|
+
- **Textarea** - Multi-line text input
|
|
109
|
+
- **Select** - Dropdown select component
|
|
110
|
+
- **Checkbox** - Checkbox input
|
|
111
|
+
- **Radio** - Radio button group
|
|
112
|
+
- **Switch** - Toggle switch
|
|
113
|
+
- **Slider** - Range slider input
|
|
114
|
+
|
|
115
|
+
#### Selection
|
|
116
|
+
|
|
117
|
+
- **Combobox** - ComboBox with search/filter
|
|
118
|
+
- **Listbox** - Listbox for single selection
|
|
119
|
+
- **Autocomplete** - Autocomplete input
|
|
120
|
+
|
|
121
|
+
#### Layout
|
|
122
|
+
|
|
123
|
+
- **Accordion** - Collapsible accordion
|
|
124
|
+
- **Tabs** - Tab navigation
|
|
125
|
+
- **Dialog** - Modal dialog
|
|
126
|
+
- **Popover** - Popover overlay
|
|
127
|
+
- **Tooltip** - Tooltip component
|
|
128
|
+
- **Collapsible** - Collapsible section
|
|
129
|
+
|
|
130
|
+
#### Data Display
|
|
131
|
+
|
|
132
|
+
- **Table** - Accessible data table
|
|
133
|
+
- **Pagination** - Pagination component
|
|
134
|
+
- **Avatar** - User avatar
|
|
135
|
+
- **Badge** - Status badge
|
|
136
|
+
|
|
137
|
+
#### Navigation
|
|
138
|
+
|
|
139
|
+
- **Breadcrumb** - Breadcrumb navigation
|
|
140
|
+
- **Menubar** - Menu bar component
|
|
141
|
+
|
|
142
|
+
#### Overlays
|
|
143
|
+
|
|
144
|
+
- **Alert** - Alert notifications
|
|
145
|
+
- **AlertDialog** - Alert dialog
|
|
146
|
+
- **Dialog** - Modal dialog
|
|
147
|
+
- **Popover** - Popover overlay
|
|
148
|
+
- **Tooltip** - Tooltip component
|
|
149
|
+
|
|
150
|
+
### Radix (77 Components)
|
|
151
|
+
|
|
152
|
+
Pre-styled Radix UI components ready to use.
|
|
153
|
+
|
|
154
|
+
#### Layout & Structure
|
|
155
|
+
|
|
156
|
+
- **Accordion** - Collapsible accordion
|
|
157
|
+
- **AspectRatio** - Aspect ratio container
|
|
158
|
+
- **Card** - Card component
|
|
159
|
+
- **Collapsible** - Collapsible section
|
|
160
|
+
- **Resizable** - Resizable panels
|
|
161
|
+
- **Separator** - Visual separator
|
|
162
|
+
|
|
163
|
+
#### Navigation
|
|
164
|
+
|
|
165
|
+
- **Breadcrumb** - Breadcrumb navigation
|
|
166
|
+
- **Command** - Command palette
|
|
167
|
+
- **ContextMenu** - Context menu
|
|
168
|
+
- **DropdownMenu** - Dropdown menu
|
|
169
|
+
- **Menubar** - Menu bar
|
|
170
|
+
- **NavigationMenu** - Navigation menu
|
|
171
|
+
- **Tabs** - Tab navigation
|
|
172
|
+
|
|
173
|
+
#### Forms
|
|
174
|
+
|
|
175
|
+
- **Checkbox** - Checkbox input
|
|
176
|
+
- **Combobox** - Combobox with search
|
|
177
|
+
- **Form** - Form component with validation
|
|
178
|
+
- **Input** - Input field
|
|
179
|
+
- **Label** - Form label
|
|
180
|
+
- **RadioGroup** - Radio button group
|
|
181
|
+
- **Select** - Dropdown select
|
|
182
|
+
- **Slider** - Range slider
|
|
183
|
+
- **Switch** - Toggle switch
|
|
184
|
+
- **Textarea** - Multi-line text input
|
|
185
|
+
|
|
186
|
+
#### Overlays
|
|
187
|
+
|
|
188
|
+
- **AlertDialog** - Alert dialog
|
|
189
|
+
- **Dialog** - Modal dialog
|
|
190
|
+
- **Drawer** - Side drawer
|
|
191
|
+
- **DropdownMenu** - Dropdown menu
|
|
192
|
+
- **HoverCard** - Hover card
|
|
193
|
+
- **Popover** - Popover overlay
|
|
194
|
+
- **Sheet** - Sheet component
|
|
195
|
+
- **Tooltip** - Tooltip component
|
|
196
|
+
- **Toast** - Toast notifications (Sonner)
|
|
197
|
+
|
|
198
|
+
#### Feedback
|
|
199
|
+
|
|
200
|
+
- **Alert** - Alert notifications
|
|
201
|
+
- **Progress** - Progress indicator
|
|
202
|
+
- **Skeleton** - Loading skeleton
|
|
203
|
+
- **Sonner** - Toast notifications
|
|
204
|
+
|
|
205
|
+
#### Data Display
|
|
206
|
+
|
|
207
|
+
- **Avatar** - User avatar
|
|
208
|
+
- **Badge** - Status badge
|
|
209
|
+
- **Calendar** - Calendar component
|
|
210
|
+
- **Carousel** - Image/content carousel
|
|
211
|
+
- **Chart** - Chart components (Recharts)
|
|
212
|
+
- **DataGrid** - Advanced data table with filtering/sorting/pagination/dnd
|
|
213
|
+
- **Table** - Data table
|
|
214
|
+
- **Tree** - Tree view component
|
|
215
|
+
|
|
216
|
+
#### Advanced Components
|
|
217
|
+
|
|
218
|
+
- **DataGrid** - Full-featured data grid with:
|
|
219
|
+
- Column filtering
|
|
220
|
+
- Column header with visibility toggle
|
|
221
|
+
- Pagination
|
|
222
|
+
- Drag-and-drop rows
|
|
223
|
+
- Sorting capabilities
|
|
224
|
+
|
|
225
|
+
## Quick Start
|
|
226
|
+
|
|
227
|
+
### Using Animation Components
|
|
228
|
+
|
|
229
|
+
```typescript
|
|
230
|
+
import { ShimmeringText, CountingNumber, Marquee } from "@pelatform/ui.components/animation";
|
|
231
|
+
import "@pelatform/ui.components/css";
|
|
232
|
+
|
|
233
|
+
function App() {
|
|
234
|
+
return (
|
|
235
|
+
<div>
|
|
236
|
+
<ShimmeringText text="Hello World" />
|
|
237
|
+
<CountingNumber end={1000} duration={2000} />
|
|
238
|
+
<Marquee>
|
|
239
|
+
<div>Item 1</div>
|
|
240
|
+
<div>Item 2</div>
|
|
241
|
+
<div>Item 3</div>
|
|
242
|
+
</Marquee>
|
|
243
|
+
</div>
|
|
244
|
+
);
|
|
245
|
+
}
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
### Using Base Components
|
|
249
|
+
|
|
250
|
+
```typescript
|
|
251
|
+
import { Button, Input, Dialog } from "@pelatform/ui.components/base";
|
|
252
|
+
import "@pelatform/ui.components/css";
|
|
253
|
+
|
|
254
|
+
function App() {
|
|
255
|
+
return (
|
|
256
|
+
<Dialog>
|
|
257
|
+
<DialogTrigger>Open Dialog</DialogTrigger>
|
|
258
|
+
<DialogContent>
|
|
259
|
+
<Input placeholder="Enter text" />
|
|
260
|
+
<Button>Submit</Button>
|
|
261
|
+
</DialogContent>
|
|
262
|
+
</Dialog>
|
|
263
|
+
);
|
|
264
|
+
}
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Using Radix Components
|
|
268
|
+
|
|
269
|
+
```typescript
|
|
270
|
+
import { Card, Button, DataGrid } from "@pelatform/ui.components/radix";
|
|
271
|
+
import "@pelatform/ui.components/css";
|
|
272
|
+
|
|
273
|
+
function App() {
|
|
274
|
+
const data = [
|
|
275
|
+
{ id: 1, name: "John", email: "john@example.com" },
|
|
276
|
+
{ id: 2, name: "Jane", email: "jane@example.com" },
|
|
277
|
+
];
|
|
278
|
+
|
|
279
|
+
return (
|
|
280
|
+
<Card>
|
|
281
|
+
<DataGrid data={data} />
|
|
282
|
+
<Button>Click me</Button>
|
|
283
|
+
</Card>
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
## Styling
|
|
289
|
+
|
|
290
|
+
This package uses Tailwind CSS with custom theme configuration. Import the CSS in your app:
|
|
291
|
+
|
|
292
|
+
```typescript
|
|
293
|
+
import "@pelatform/ui.components/css";
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
CSS includes:
|
|
297
|
+
|
|
298
|
+
- Theme variables
|
|
299
|
+
- Component styles
|
|
300
|
+
- Animation utilities
|
|
301
|
+
- Pattern backgrounds
|
|
302
|
+
- Custom transitions
|
|
303
|
+
|
|
304
|
+
## TypeScript Support
|
|
305
|
+
|
|
306
|
+
Full TypeScript support with comprehensive type definitions for all components:
|
|
307
|
+
|
|
308
|
+
```typescript
|
|
309
|
+
import type { ButtonProps } from "@pelatform/ui.components/base";
|
|
310
|
+
import type { DataGridProps } from "@pelatform/ui.components/radix";
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
## Features
|
|
314
|
+
|
|
315
|
+
- 170+ production-ready components
|
|
316
|
+
- Full dark mode support
|
|
317
|
+
- Responsive design
|
|
318
|
+
- Accessibility (WCAG 2.1)
|
|
319
|
+
- SSR-safe implementations
|
|
320
|
+
- Tree-shakeable exports
|
|
321
|
+
- Next.js optimized with "use client" directive
|
|
322
|
+
- Tailwind CSS styling
|
|
323
|
+
|
|
324
|
+
## Dependencies
|
|
325
|
+
|
|
326
|
+
### Production Dependencies
|
|
327
|
+
|
|
328
|
+
- `class-variance-authority` - Component variants
|
|
329
|
+
- `clsx` - Conditional className
|
|
330
|
+
- `tailwind-merge` - Tailwind class merging
|
|
331
|
+
- `tw-animate-css` - Animation utilities
|
|
332
|
+
|
|
333
|
+
### Peer Dependencies
|
|
334
|
+
|
|
335
|
+
This package requires these peer dependencies to be installed:
|
|
336
|
+
|
|
337
|
+
```json
|
|
338
|
+
{
|
|
339
|
+
"@base-ui/react": ">=1.2.0",
|
|
340
|
+
"@dnd-kit/core": ">=6.3.0",
|
|
341
|
+
"@dnd-kit/modifiers": ">=9.0.0",
|
|
342
|
+
"@dnd-kit/sortable": ">=10.0.0",
|
|
343
|
+
"@dnd-kit/utilities": ">=3.2.0",
|
|
344
|
+
"@headless-tree/core": ">=1.6.0",
|
|
345
|
+
"@tanstack/react-table": ">=8.21.0",
|
|
346
|
+
"class-variance-authority": ">=0.7.0",
|
|
347
|
+
"clsx": ">=2.1.0",
|
|
348
|
+
"cmdk": ">=1.1.0",
|
|
349
|
+
"date-fns": ">=4.1.0",
|
|
350
|
+
"embla-carousel-react": ">=8.6.0",
|
|
351
|
+
"input-otp": ">=1.4.0",
|
|
352
|
+
"lucide-react": ">=0.575.0",
|
|
353
|
+
"motion": ">=12.30.0",
|
|
354
|
+
"next-themes": ">=0.4.6",
|
|
355
|
+
"radix-ui": ">=1.4.0",
|
|
356
|
+
"react": ">=18.0.0 || >=19.0.0-rc.0",
|
|
357
|
+
"react-dom": ">=18.0.0 || >=19.0.0-rc.0",
|
|
358
|
+
"react-day-picker": ">=9.13.0",
|
|
359
|
+
"react-phone-number-input": ">=3.4.0",
|
|
360
|
+
"react-resizable-panels": ">=4.6.0",
|
|
361
|
+
"recharts": "2.15.1",
|
|
362
|
+
"sonner": ">=2.0.0",
|
|
363
|
+
"tailwind-merge": ">=3.5.0",
|
|
364
|
+
"tsup": ">=8.5.0",
|
|
365
|
+
"typescript": ">=5.9.0",
|
|
366
|
+
"vaul": ">=1.1.0"
|
|
367
|
+
}
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
## Choosing Between Base and Radix
|
|
371
|
+
|
|
372
|
+
- **Use Base components** when:
|
|
373
|
+
- Building a custom design system
|
|
374
|
+
- Need complete styling control
|
|
375
|
+
- Want minimal bundle size
|
|
376
|
+
- Creating brand-specific components
|
|
377
|
+
|
|
378
|
+
- **Use Radix components** when:
|
|
379
|
+
- Need pre-styled components
|
|
380
|
+
- Building prototypes quickly
|
|
381
|
+
- Want consistent styling
|
|
382
|
+
- Don't have strict design requirements
|
|
383
|
+
|
|
384
|
+
- **Use both** - Import from both categories in the same application
|
|
385
|
+
|
|
386
|
+
## Links
|
|
387
|
+
|
|
388
|
+
- [npm Package](https://www.npmjs.com/package/@pelatform/ui.components)
|
|
389
|
+
- [Contributing Guide](../../../CONTRIBUTING.md)
|
|
390
|
+
- [Code of Conduct](../../../CODE_OF_CONDUCT.md)
|
|
391
|
+
- [License](../../../LICENSE)
|
|
392
|
+
|
|
393
|
+
## License
|
|
394
|
+
|
|
395
|
+
MIT © [Pelatform Inc.](../../../LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pelatform/ui.components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Default components of the Pelatform UI Library.",
|
|
5
5
|
"author": "Pelatform",
|
|
6
6
|
"license": "MIT",
|
|
@@ -70,15 +70,15 @@
|
|
|
70
70
|
"date-fns": "^4.1.0",
|
|
71
71
|
"embla-carousel-react": "^8.6.0",
|
|
72
72
|
"input-otp": "^1.4.2",
|
|
73
|
-
"lucide-react": "^0.
|
|
74
|
-
"motion": "^12.
|
|
73
|
+
"lucide-react": "^0.577.0",
|
|
74
|
+
"motion": "^12.35.0",
|
|
75
75
|
"next-themes": "^0.4.6",
|
|
76
76
|
"radix-ui": "^1.4.3",
|
|
77
77
|
"react": "^19.2.4",
|
|
78
78
|
"react-day-picker": "^9.14.0",
|
|
79
79
|
"react-dom": "^19.2.4",
|
|
80
80
|
"react-phone-number-input": "^3.4.16",
|
|
81
|
-
"react-resizable-panels": "^4.7.
|
|
81
|
+
"react-resizable-panels": "^4.7.1",
|
|
82
82
|
"recharts": "2.15.1",
|
|
83
83
|
"sonner": "^2.0.7",
|
|
84
84
|
"tailwind-merge": "^3.5.0",
|
|
@@ -105,15 +105,13 @@
|
|
|
105
105
|
"next-themes": ">=0.4.6",
|
|
106
106
|
"radix-ui": ">=1.4.0",
|
|
107
107
|
"react": ">=18.0.0 || >=19.0.0-rc.0",
|
|
108
|
+
"react-day-picker": ">=9.10.0",
|
|
108
109
|
"react-dom": ">=18.0.0 || >=19.0.0-rc.0",
|
|
109
|
-
"react-day-picker": ">=9.13.0",
|
|
110
110
|
"react-phone-number-input": ">=3.4.0",
|
|
111
|
-
"react-resizable-panels": ">=4.
|
|
111
|
+
"react-resizable-panels": ">=4.7.0",
|
|
112
112
|
"recharts": "2.15.1",
|
|
113
113
|
"sonner": ">=2.0.0",
|
|
114
114
|
"tailwind-merge": ">=3.5.0",
|
|
115
|
-
"tsup": ">=8.5.0",
|
|
116
|
-
"typescript": ">=5.9.0",
|
|
117
115
|
"vaul": ">=1.1.0"
|
|
118
116
|
},
|
|
119
117
|
"publishConfig": {
|