@atxp/design-system 0.1.2 → 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/LICENSE.md +1 -1
- package/README.md +83 -2
- package/dist/index.cjs +657 -334
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +155 -5
- package/dist/index.d.ts +155 -5
- package/dist/index.js +643 -335
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +26 -27
package/LICENSE.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Copyright (c) 2025,
|
|
1
|
+
Copyright (c) 2025, ATXP, Inc.
|
|
2
2
|
|
|
3
3
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
4
|
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ATXP Design System
|
|
2
2
|
|
|
3
3
|
A React component library built with TypeScript, Tailwind CSS, and based on our Figma design system.
|
|
4
4
|
|
|
@@ -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
|
|
@@ -191,7 +272,7 @@ pnpm typecheck
|
|
|
191
272
|
|
|
192
273
|
## Syncing with Figma
|
|
193
274
|
|
|
194
|
-
This design system is built from
|
|
275
|
+
This design system is built from Figma designs. When the design team updates components in Figma, follow this workflow to sync changes:
|
|
195
276
|
|
|
196
277
|
### Prerequisites
|
|
197
278
|
|