@marcwelti/mw-ui 0.1.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 +155 -0
- package/dist/index.d.mts +639 -0
- package/dist/index.d.ts +639 -0
- package/dist/index.js +3018 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2745 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +103 -0
package/README.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# @marcwelti/mw-ui
|
|
2
|
+
|
|
3
|
+
Marc Welti's UI component library based on shadcn/ui, styled according to the Brand Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @marcwelti/mw-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
### 1. Import styles in your app's layout
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
// app/layout.tsx
|
|
17
|
+
import '@marcwelti/mw-ui/styles.css';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### 2. Configure Tailwind (optional)
|
|
21
|
+
|
|
22
|
+
If you need to extend the theme in your app, you can import the preset:
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
// tailwind.config.ts
|
|
26
|
+
import type { Config } from 'tailwindcss';
|
|
27
|
+
|
|
28
|
+
const config: Config = {
|
|
29
|
+
content: [
|
|
30
|
+
'./app/**/*.{ts,tsx}',
|
|
31
|
+
'./node_modules/@marcwelti/mw-ui/dist/**/*.{js,mjs}',
|
|
32
|
+
],
|
|
33
|
+
// Your additional config...
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export default config;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
import { Button, Card, Input, Dialog } from '@marcwelti/mw-ui';
|
|
43
|
+
|
|
44
|
+
// Intent-based Button system
|
|
45
|
+
<Button intent="primary" background="solid">
|
|
46
|
+
Book Now
|
|
47
|
+
</Button>
|
|
48
|
+
|
|
49
|
+
<Button intent="secondary" background="picture" size="lg">
|
|
50
|
+
Learn More
|
|
51
|
+
</Button>
|
|
52
|
+
|
|
53
|
+
// Card with gold accent
|
|
54
|
+
<Card variant="gold">
|
|
55
|
+
<CardHeader>
|
|
56
|
+
<CardTitle>Welcome</CardTitle>
|
|
57
|
+
<CardDescription>Get started with Marc Welti</CardDescription>
|
|
58
|
+
</CardHeader>
|
|
59
|
+
<CardContent>
|
|
60
|
+
Content here
|
|
61
|
+
</CardContent>
|
|
62
|
+
</Card>
|
|
63
|
+
|
|
64
|
+
// Input with gold focus
|
|
65
|
+
<Input placeholder="Enter your email" />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Components
|
|
69
|
+
|
|
70
|
+
### Core Components
|
|
71
|
+
- **Button** - Intent-based (primary/secondary/destructive/ghost/link × solid/picture)
|
|
72
|
+
- **Input** - Text input with gold focus border
|
|
73
|
+
- **Textarea** - Multi-line text input
|
|
74
|
+
- **Label** - Form labels
|
|
75
|
+
- **Card** - Container with default and gold variants
|
|
76
|
+
- **Dialog** - Modal dialogs
|
|
77
|
+
- **Alert** - Status messages (default/destructive/success/warning/info)
|
|
78
|
+
- **AlertDialog** - Confirmation dialogs
|
|
79
|
+
|
|
80
|
+
### Form Components
|
|
81
|
+
- **Checkbox** - Gold checked state
|
|
82
|
+
- **RadioGroup** - Radio buttons with gold indicator
|
|
83
|
+
- **Switch** - Toggle switches with gold when active
|
|
84
|
+
- **Select** - Dropdown select with gold focus
|
|
85
|
+
- **Slider** - Range slider with gold track
|
|
86
|
+
- **Toggle** - Toggle buttons
|
|
87
|
+
- **ToggleGroup** - Group of toggle buttons
|
|
88
|
+
- **Progress** - Progress bars with gold indicator
|
|
89
|
+
- **InputOTP** - OTP input with gold focus
|
|
90
|
+
|
|
91
|
+
### Navigation
|
|
92
|
+
- **Tabs** - Tab navigation
|
|
93
|
+
- **Breadcrumb** - Breadcrumb navigation
|
|
94
|
+
- **Pagination** - Page navigation
|
|
95
|
+
- **NavigationMenu** - Dropdown navigation
|
|
96
|
+
- **Menubar** - Application menubar
|
|
97
|
+
|
|
98
|
+
### Data Display
|
|
99
|
+
- **Table** - Data tables
|
|
100
|
+
- **Badge** - Status badges (default/secondary/destructive/success/warning/info)
|
|
101
|
+
- **Avatar** - User avatars
|
|
102
|
+
- **Calendar** - Date picker calendar
|
|
103
|
+
- **Carousel** - Image/content carousel
|
|
104
|
+
- **Chart** - Data visualization (recharts)
|
|
105
|
+
|
|
106
|
+
### Feedback & Overlay
|
|
107
|
+
- **Tooltip** - Hover tooltips
|
|
108
|
+
- **Popover** - Click-triggered popovers
|
|
109
|
+
- **HoverCard** - Hover-triggered cards
|
|
110
|
+
- **DropdownMenu** - Context menus
|
|
111
|
+
- **ContextMenu** - Right-click menus
|
|
112
|
+
- **Command** - Command palette
|
|
113
|
+
- **Sheet** - Slide-out panels
|
|
114
|
+
- **Drawer** - Mobile-friendly bottom sheets
|
|
115
|
+
- **Toast** - Toast notifications
|
|
116
|
+
- **Sonner** - Toast notifications (alternative)
|
|
117
|
+
|
|
118
|
+
### Layout & Utility
|
|
119
|
+
- **Separator** - Visual dividers
|
|
120
|
+
- **Skeleton** - Loading placeholders
|
|
121
|
+
- **ScrollArea** - Custom scrollbars
|
|
122
|
+
- **AspectRatio** - Maintain aspect ratios
|
|
123
|
+
- **Accordion** - Expandable sections
|
|
124
|
+
- **Collapsible** - Show/hide content
|
|
125
|
+
- **Resizable** - Resizable panels
|
|
126
|
+
|
|
127
|
+
## Brand Colors
|
|
128
|
+
|
|
129
|
+
| Color | Hex | Usage |
|
|
130
|
+
|-------|-----|-------|
|
|
131
|
+
| Brand Gold | #B08C53 | Primary accent, CTAs |
|
|
132
|
+
| Gold Hover (Light) | #8B6D3D | Hover state (light mode) |
|
|
133
|
+
| Gold Hover (Dark) | #C4A066 | Hover state (dark mode) |
|
|
134
|
+
|
|
135
|
+
## Typography
|
|
136
|
+
|
|
137
|
+
- **Font Family**: Poppins
|
|
138
|
+
- **Weights**: Light (300), Normal (350), Medium (500), Semibold (600)
|
|
139
|
+
|
|
140
|
+
## Dark Mode
|
|
141
|
+
|
|
142
|
+
All components support dark mode automatically via the `.dark` class on the `<html>` element.
|
|
143
|
+
|
|
144
|
+
```typescript
|
|
145
|
+
// Using next-themes
|
|
146
|
+
import { ThemeProvider } from 'next-themes';
|
|
147
|
+
|
|
148
|
+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
|
149
|
+
{children}
|
|
150
|
+
</ThemeProvider>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## License
|
|
154
|
+
|
|
155
|
+
UNLICENSED - Marc Welti
|