@atxp/design-system 0.1.3 → 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.
- package/README.md +81 -0
- package/dist/index.cjs +657 -334
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +153 -3
- package/dist/index.d.ts +153 -3
- package/dist/index.js +643 -335
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +19 -20
package/README.md
CHANGED
|
@@ -149,6 +149,87 @@ function MyCustomComponent() {
|
|
|
149
149
|
|
|
150
150
|
**Note**: This is completely optional. The design system components work perfectly without any Tailwind setup in your project.
|
|
151
151
|
|
|
152
|
+
## Vanilla HTML/CSS/JS Version
|
|
153
|
+
|
|
154
|
+
Can't use React? **We've got you covered!** The ATXP Design System includes a complete vanilla HTML/CSS/JavaScript version of all components for projects that can't use React.
|
|
155
|
+
|
|
156
|
+
### Quick Start
|
|
157
|
+
|
|
158
|
+
```html
|
|
159
|
+
<!DOCTYPE html>
|
|
160
|
+
<html lang="en" data-theme="light">
|
|
161
|
+
<head>
|
|
162
|
+
<!-- Include the compiled CSS -->
|
|
163
|
+
<link rel="stylesheet" href="node_modules/@atxp/design-system/dist/styles.css">
|
|
164
|
+
</head>
|
|
165
|
+
<body>
|
|
166
|
+
<!-- Use components with pure HTML -->
|
|
167
|
+
<button class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium leading-5 transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2">
|
|
168
|
+
Click Me
|
|
169
|
+
</button>
|
|
170
|
+
|
|
171
|
+
<!-- Include vanilla JS for interactive components (optional) -->
|
|
172
|
+
<script src="node_modules/@atxp/design-system/vanilla/js/components.js"></script>
|
|
173
|
+
</body>
|
|
174
|
+
</html>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Available Components
|
|
178
|
+
|
|
179
|
+
The vanilla version includes 20+ components:
|
|
180
|
+
|
|
181
|
+
- **Form Components**: Checkbox, Radio, Select, Textarea, Input
|
|
182
|
+
- **UI Elements**: Badge, Avatar, Separator
|
|
183
|
+
- **Interactive**: Tabs, Accordion, Progress, Skeleton
|
|
184
|
+
- **Layout**: Button, Card, Alert, Dialog, Toast
|
|
185
|
+
|
|
186
|
+
### Features
|
|
187
|
+
|
|
188
|
+
- ✅ **Zero Dependencies** - Just HTML, CSS, and vanilla JavaScript
|
|
189
|
+
- ✅ **All 4 Themes** - Light, Dark, ATXP, DBG with live switching
|
|
190
|
+
- ✅ **Fully Accessible** - ARIA labels, keyboard navigation, screen reader support
|
|
191
|
+
- ✅ **Same Design** - Matches the React version pixel-perfect
|
|
192
|
+
- ✅ **Interactive Components** - Dialog, Tabs, Accordion, Toast with vanilla JS
|
|
193
|
+
|
|
194
|
+
### Documentation
|
|
195
|
+
|
|
196
|
+
- **Main Guide**: [`vanilla/README.md`](./vanilla/README.md)
|
|
197
|
+
- **Live Examples**: Open [`vanilla/index.html`](./vanilla/index.html) in your browser
|
|
198
|
+
- **Component Pages**:
|
|
199
|
+
- [`vanilla/components/forms.html`](./vanilla/components/forms.html) - Complete form elements
|
|
200
|
+
- [`vanilla/components/ui-elements.html`](./vanilla/components/ui-elements.html) - Badges, avatars, separators
|
|
201
|
+
- [`vanilla/components/interactive.html`](./vanilla/components/interactive.html) - Tabs, accordions, progress
|
|
202
|
+
- And more individual component examples
|
|
203
|
+
|
|
204
|
+
### Theme Switching
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<!-- Add theme selector -->
|
|
208
|
+
<select data-theme-control>
|
|
209
|
+
<option value="light">Light</option>
|
|
210
|
+
<option value="dark">Dark</option>
|
|
211
|
+
<option value="atxp">ATXP</option>
|
|
212
|
+
<option value="dbg">DBG</option>
|
|
213
|
+
</select>
|
|
214
|
+
|
|
215
|
+
<!-- JavaScript handles theme switching automatically -->
|
|
216
|
+
<script src="vanilla/js/components.js"></script>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Extraction Tool
|
|
220
|
+
|
|
221
|
+
Keep vanilla components in sync with React:
|
|
222
|
+
|
|
223
|
+
```bash
|
|
224
|
+
# Extract a single component's classes
|
|
225
|
+
node vanilla/extract-components.cjs Button
|
|
226
|
+
|
|
227
|
+
# Extract all components
|
|
228
|
+
node vanilla/extract-components.cjs --all
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
See [`vanilla/README.md`](./vanilla/README.md) for complete documentation, examples, and JavaScript API reference.
|
|
232
|
+
|
|
152
233
|
## Development
|
|
153
234
|
|
|
154
235
|
### Prerequisites
|