@neuravision/construct 1.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.
Files changed (57) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +227 -0
  3. package/components/README.md +566 -0
  4. package/components/_keyframes.css +23 -0
  5. package/components/_shared.css +120 -0
  6. package/components/accordion.css +124 -0
  7. package/components/alert.css +67 -0
  8. package/components/avatar.css +127 -0
  9. package/components/badge.css +67 -0
  10. package/components/banner.css +247 -0
  11. package/components/breadcrumbs.css +152 -0
  12. package/components/button.css +145 -0
  13. package/components/card.css +76 -0
  14. package/components/checkbox.css +120 -0
  15. package/components/chip.css +361 -0
  16. package/components/combobox.css +385 -0
  17. package/components/components.css +2 -0
  18. package/components/data-table.css +93 -0
  19. package/components/datepicker.css +268 -0
  20. package/components/divider.css +73 -0
  21. package/components/drawer.css +167 -0
  22. package/components/dropdown.css +401 -0
  23. package/components/empty-state.css +97 -0
  24. package/components/field.css +42 -0
  25. package/components/file-upload.css +111 -0
  26. package/components/icon.css +31 -0
  27. package/components/index.css +49 -0
  28. package/components/input.css +64 -0
  29. package/components/list.css +474 -0
  30. package/components/modal.css +164 -0
  31. package/components/navbar.css +587 -0
  32. package/components/pagination.css +131 -0
  33. package/components/popover.css +231 -0
  34. package/components/progress-bar.css +56 -0
  35. package/components/select-menu.css +267 -0
  36. package/components/select.css +30 -0
  37. package/components/sidebar.css +183 -0
  38. package/components/skeleton.css +38 -0
  39. package/components/skip-link.css +38 -0
  40. package/components/slider.css +305 -0
  41. package/components/spinner.css +72 -0
  42. package/components/switch.css +82 -0
  43. package/components/table.css +139 -0
  44. package/components/tabs.css +147 -0
  45. package/components/textarea.css +16 -0
  46. package/components/toast.css +71 -0
  47. package/components/toggle-group.css +196 -0
  48. package/components/toolbar.css +222 -0
  49. package/components/tooltip.css +124 -0
  50. package/docs/guidelines.md +141 -0
  51. package/foundations.css +299 -0
  52. package/package.json +66 -0
  53. package/tokens/README.md +179 -0
  54. package/tokens/tokens.css +434 -0
  55. package/tokens/tokens.js +1188 -0
  56. package/tokens/tokens.json +810 -0
  57. package/tokens/tokens.ts +1188 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Construct Design System Contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,227 @@
1
+ # Construct - Design System
2
+
3
+ > Build accessible design constructs for modern web applications
4
+
5
+ **Construct** is an open-source, token-based design system foundation that provides a consistent, accessible UI across Angular, React, Svelte, and vanilla HTML/CSS.
6
+
7
+ ## ✨ Features
8
+
9
+ - **Design Tokens** - Single source of truth for colors, typography, spacing, and more
10
+ - **Framework-Agnostic CSS** - Works with any framework or vanilla HTML
11
+ - **Accessibility First** - WCAG 2.1 AA compliant, keyboard navigation, ARIA support
12
+ - **Themes** - Light, dark, and high-contrast modes with system preference support
13
+ - **Token Pipeline** - Automated build system (JSON → CSS Variables + TypeScript)
14
+ - **Comprehensive Components** - 16+ production-ready components
15
+ - **Storybook Documentation** - Interactive component explorer with a11y testing
16
+ - **TypeScript Support** - Full type definitions for tokens
17
+
18
+ ## 🚀 Quick Start
19
+
20
+ ### Installation
21
+
22
+ ```bash
23
+ npm install @neuravision/construct
24
+ ```
25
+
26
+ ### Usage
27
+
28
+ Import the foundation styles and components:
29
+
30
+ ```css
31
+ @import "@neuravision/construct/foundations.css";
32
+ @import "@neuravision/construct/components/components.css";
33
+ ```
34
+
35
+ Use the components in your HTML:
36
+
37
+ ```html
38
+ <button class="ct-button">Primary Button</button>
39
+ <button class="ct-button ct-button--secondary">Secondary</button>
40
+ ```
41
+
42
+ Or use design tokens directly:
43
+
44
+ ```css
45
+ .custom-component {
46
+ background: var(--color-brand-primary);
47
+ padding: var(--space-4);
48
+ border-radius: var(--radius-control);
49
+ }
50
+ ```
51
+
52
+ ### Themes
53
+
54
+ Set a theme on the root element (or any container) to switch modes:
55
+
56
+ ```html
57
+ <html data-theme="dark">
58
+ ...
59
+ </html>
60
+ ```
61
+
62
+ Available values:
63
+ - `light` (default)
64
+ - `dark`
65
+ - `high-contrast`
66
+
67
+ If no `data-theme` is set, system preferences are respected:
68
+ - `prefers-color-scheme: dark` → dark theme
69
+ - `prefers-contrast: more` → high-contrast theme
70
+
71
+ ## 📦 What's Included
72
+
73
+ ```
74
+ @neuravision/construct/
75
+ ├── tokens/ # Design tokens (JSON, CSS, JS, TS)
76
+ │ ├── primitives.json # Base values (colors, sizes)
77
+ │ ├── semantic.light.json # Semantic mappings
78
+ │ ├── semantic.dark.json # Dark theme overrides
79
+ │ ├── semantic.high-contrast.json # High-contrast theme overrides
80
+ │ ├── tokens.css # CSS Custom Properties
81
+ │ ├── tokens.json # Resolved JSON output
82
+ │ ├── tokens.js # JavaScript exports
83
+ │ └── tokens.ts # TypeScript exports
84
+ ├── components/ # Framework-agnostic styles
85
+ │ ├── components.css # All component styles
86
+ │ └── README.md # Component documentation
87
+ ├── foundations.css # Reset, typography, layout utilities
88
+ └── docs/ # Guidelines & best practices
89
+ └── guidelines.md
90
+ ```
91
+
92
+ ## 🎨 Design Tokens
93
+
94
+ Construct uses a two-tier token system:
95
+
96
+ ### Primitives
97
+ Raw design values (colors, spacing, typography)
98
+
99
+ ```json
100
+ {
101
+ "color": {
102
+ "ocean": {
103
+ "700": "#174C5D"
104
+ }
105
+ },
106
+ "space": {
107
+ "4": 8
108
+ }
109
+ }
110
+ ```
111
+
112
+ ### Semantic
113
+ Contextual aliases that reference primitives
114
+
115
+ ```json
116
+ {
117
+ "color": {
118
+ "brand": {
119
+ "primary": "{color.ocean.700}"
120
+ }
121
+ }
122
+ }
123
+ ```
124
+
125
+ ### Build Pipeline
126
+
127
+ The token build system automatically generates:
128
+ - **CSS Variables** (`--color-brand-primary`)
129
+ - **TypeScript exports** with type definitions
130
+ - **Resolved JSON** for tooling
131
+
132
+ ```bash
133
+ npm run build
134
+ ```
135
+
136
+ ## 🧩 Components
137
+
138
+ ### Base Components
139
+ - Button (6 variants, 3 sizes)
140
+ - Input (text, email, password, search)
141
+ - Select (native dropdown)
142
+ - Textarea
143
+ - Checkbox
144
+ - Radio
145
+ - Switch
146
+
147
+ ### Complex Components
148
+ - Card
149
+ - Table / Data Table
150
+ - Modal
151
+ - Toast (notifications)
152
+ - Tabs
153
+ - Dropdown
154
+ - Pagination
155
+ - Breadcrumbs
156
+ - Datepicker
157
+
158
+ [View all components in Storybook](https://samyssmile.github.io/construct/)
159
+
160
+ ## ♿ Accessibility
161
+
162
+ Accessibility is a core principle of Construct:
163
+
164
+ - ✅ Semantic HTML
165
+ - ✅ ARIA attributes where needed
166
+ - ✅ Full keyboard navigation
167
+ - ✅ Focus management
168
+ - ✅ WCAG 2.1 AA contrast standards
169
+ - ✅ Screen reader support
170
+ - ✅ Respects `prefers-reduced-motion`
171
+ - ✅ Live regions for dynamic content
172
+
173
+ See [Guidelines](docs/guidelines.md) for detailed accessibility rules.
174
+
175
+ ## 🛠️ Development
176
+
177
+ ### Run Storybook
178
+
179
+ ```bash
180
+ npm run storybook
181
+ ```
182
+
183
+ Open http://localhost:6006
184
+
185
+ ### Build Tokens
186
+
187
+ ```bash
188
+ npm run build
189
+ ```
190
+
191
+ ### Check Token Outputs
192
+
193
+ ```bash
194
+ npm run check
195
+ ```
196
+
197
+ ## 🎯 Framework Support
198
+
199
+ ### Current: CSS/HTML
200
+ All components work with vanilla HTML and can be used with any framework.
201
+
202
+ ### Planned: Framework Libraries
203
+ - Angular (standalone components)
204
+ - React (React 18+)
205
+ - Svelte (Svelte 4+)
206
+
207
+ ## 📖 Documentation
208
+
209
+ - [Design Guidelines](docs/guidelines.md) - Do/Don'ts, accessibility rules
210
+ - [Component Usage](components/README.md) - HTML patterns and examples
211
+ - [Token Details](tokens/README.md) - Token structure and naming
212
+
213
+ ## 🤝 Contributing
214
+
215
+ Contributions are welcome! Please read our contributing guidelines (coming soon).
216
+
217
+ ## 📄 License
218
+
219
+ MIT License - see LICENSE file for details
220
+
221
+ ## 🙏 Credits
222
+
223
+ Built with accessibility and modern design principles in mind.
224
+
225
+ ---
226
+
227
+ **Construct** - Build accessible design constructs