czero 0.2.0 → 0.2.5

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 (62) hide show
  1. package/README.md +209 -209
  2. package/dist/cli/index.js +970 -72
  3. package/dist/components.css +2158 -1913
  4. package/dist/react/core/component-defaults.d.ts.map +1 -1
  5. package/dist/react/core/types/config.d.ts +161 -2
  6. package/dist/react/core/types/config.d.ts.map +1 -1
  7. package/dist/react/index.cjs +695 -12
  8. package/dist/react/index.cjs.map +1 -1
  9. package/dist/react/index.d.ts +138 -11
  10. package/dist/react/index.js +693 -13
  11. package/dist/react/index.js.map +1 -1
  12. package/dist/react/react/components/button.d.ts +1 -0
  13. package/dist/react/react/components/button.d.ts.map +1 -1
  14. package/dist/react/react/components/data-table.d.ts +39 -0
  15. package/dist/react/react/components/data-table.d.ts.map +1 -0
  16. package/dist/react/react/components/input.d.ts +5 -2
  17. package/dist/react/react/components/input.d.ts.map +1 -1
  18. package/dist/react/react/components/modal.d.ts +44 -0
  19. package/dist/react/react/components/modal.d.ts.map +1 -0
  20. package/dist/react/react/components/search-input.d.ts +13 -0
  21. package/dist/react/react/components/search-input.d.ts.map +1 -0
  22. package/dist/react/react/components/status-badge.d.ts +11 -0
  23. package/dist/react/react/components/status-badge.d.ts.map +1 -0
  24. package/dist/react/react/components/tabs.d.ts +42 -7
  25. package/dist/react/react/components/tabs.d.ts.map +1 -1
  26. package/dist/react/react/index.d.ts +4 -1
  27. package/dist/react/react/index.d.ts.map +1 -1
  28. package/dist/reset.css +6 -15
  29. package/dist/styles.css +2244 -2008
  30. package/package.json +93 -92
  31. package/dist/cli-new/cli/build-css.d.ts +0 -19
  32. package/dist/cli-new/cli/build-css.js +0 -88
  33. package/dist/cli-new/cli/generators/button.d.ts +0 -9
  34. package/dist/cli-new/cli/generators/button.js +0 -224
  35. package/dist/cli-new/cli/generators/card.d.ts +0 -9
  36. package/dist/cli-new/cli/generators/card.js +0 -104
  37. package/dist/cli-new/cli/generators/checkbox.d.ts +0 -6
  38. package/dist/cli-new/cli/generators/checkbox.js +0 -163
  39. package/dist/cli-new/cli/generators/index.d.ts +0 -10
  40. package/dist/cli-new/cli/generators/index.js +0 -40
  41. package/dist/cli-new/cli/generators/input.d.ts +0 -9
  42. package/dist/cli-new/cli/generators/input.js +0 -231
  43. package/dist/cli-new/cli/generators/switch.d.ts +0 -6
  44. package/dist/cli-new/cli/generators/switch.js +0 -156
  45. package/dist/cli-new/cli/generators/utilities.d.ts +0 -9
  46. package/dist/cli-new/cli/generators/utilities.js +0 -150
  47. package/dist/cli-new/cli/index.d.ts +0 -8
  48. package/dist/cli-new/cli/index.js +0 -288
  49. package/dist/cli-new/cli/token-resolver.d.ts +0 -44
  50. package/dist/cli-new/cli/token-resolver.js +0 -137
  51. package/dist/cli-new/cli/utils/deep-merge.d.ts +0 -15
  52. package/dist/cli-new/cli/utils/deep-merge.js +0 -41
  53. package/dist/cli-new/cli/validate-config.d.ts +0 -19
  54. package/dist/cli-new/cli/validate-config.js +0 -151
  55. package/dist/cli-new/src/core/component-defaults.d.ts +0 -7
  56. package/dist/cli-new/src/core/component-defaults.js +0 -467
  57. package/dist/cli-new/src/core/types/config.d.ts +0 -489
  58. package/dist/cli-new/src/core/types/config.js +0 -5
  59. package/dist/cli-new/src/presets/index.d.ts +0 -44
  60. package/dist/cli-new/src/presets/index.js +0 -194
  61. package/dist/react/react/lib/cn.d.ts +0 -7
  62. package/dist/react/react/lib/cn.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,209 +1,209 @@
1
- # CZero
2
-
3
- A lightweight, design-token-driven React component library.
4
-
5
- ## Features
6
-
7
- - 🎨 **Design Token Driven** - Single config file controls entire look & feel
8
- - ⚡ **No Runtime Dependencies** - Precompiled CSS, no Tailwind required
9
- - 🌙 **Dark Mode Ready** - Add `.dark` class and all components adapt
10
- - ♿ **Accessible** - Built with accessibility in mind
11
-
12
- ## Quick Start
13
-
14
- ### 1. Install
15
-
16
- ```bash
17
- npm install czero
18
- ```
19
-
20
- ### 2. Create Theme Config
21
-
22
- Create `czero.config.js` in your project root:
23
-
24
- ```js
25
- // czero.config.js
26
- export default {
27
- color: {
28
- primary: { light: "222 47% 45%", dark: "210 80% 65%" },
29
- primaryFg: { light: "0 0% 100%", dark: "220 40% 3%" },
30
- // Override any token...
31
- },
32
- radius: {
33
- md: "0.5rem",
34
- lg: "0.75rem",
35
- },
36
- typography: {
37
- fontFamily: "Inter, system-ui, sans-serif",
38
- },
39
- };
40
- ```
41
-
42
- ### 3. Generate CSS
43
-
44
- ```bash
45
- npx czero build
46
- ```
47
-
48
- This creates `czero.css` with your custom tokens + component styles.
49
-
50
- Options:
51
- - `--config <path>` - Config file path (default: `czero.config.js`)
52
- - `--output <path>` - Output CSS path (default: `czero.css`)
53
- - `--preset <name>` - Apply a theme preset (can be used multiple times)
54
-
55
- ## Theme Presets
56
-
57
- Use pre-built theme configurations for quick customization:
58
-
59
- ```bash
60
- # Apply a single preset
61
- npx czero build --preset compact
62
-
63
- # Compose multiple presets
64
- npx czero build --preset compact --preset rounded
65
- ```
66
-
67
- **Available Presets:**
68
-
69
- | Preset | Description |
70
- |--------|-------------|
71
- | `compact` | Smaller sizes, tighter spacing |
72
- | `comfortable` | Larger touch targets, more spacing |
73
- | `rounded` | Increased border radius everywhere |
74
- | `sharp` | Minimal border radius, angular look |
75
- | `minimal` | Subtle shadows, less visual noise |
76
- | `vibrant` | Bold colors, pronounced effects |
77
-
78
- ### Programmatic Usage
79
-
80
- ```js
81
- // czero.config.js
82
- import { presets } from "czero/presets";
83
-
84
- export default {
85
- ...presets.compact,
86
- ...presets.rounded,
87
- // Your overrides
88
- color: {
89
- primary: { light: "280 70% 50%", dark: "280 60% 60%" },
90
- },
91
- };
92
- ```
93
-
94
- ### 4. Import & Use
95
-
96
- ```jsx
97
- // Import generated CSS
98
- import "./czero.css";
99
-
100
- // Import components
101
- import { Button, Input, Card, Badge } from "czero/react";
102
-
103
- function App() {
104
- return (
105
- <Card>
106
- <Card.Header>
107
- <Card.Title>Hello CZero</Card.Title>
108
- </Card.Header>
109
- <Card.Body>
110
- <Button variant="primary">Click me</Button>
111
- </Card.Body>
112
- </Card>
113
- );
114
- }
115
- ```
116
-
117
- ## Components
118
-
119
- ### Button
120
-
121
- ```jsx
122
- <Button variant="primary">Primary</Button>
123
- <Button variant="secondary">Secondary</Button>
124
- <Button variant="outline">Outline</Button>
125
- <Button variant="ghost">Ghost</Button>
126
- <Button variant="danger">Danger</Button>
127
-
128
- <Button size="sm">Small</Button>
129
- <Button size="md">Medium</Button>
130
- <Button size="lg">Large</Button>
131
-
132
- <Button loading>Loading...</Button>
133
- <Button disabled>Disabled</Button>
134
- ```
135
-
136
- ### Input
137
-
138
- ```jsx
139
- <Input placeholder="Enter text..." />
140
- <Input label="Email" type="email" />
141
- <Input label="Password" error="Required" />
142
- <Input size="sm" />
143
- <Input size="lg" />
144
- ```
145
-
146
- ### Card
147
-
148
- ```jsx
149
- <Card>
150
- <Card.Header>
151
- <Card.Title>Title</Card.Title>
152
- <Card.Description>Description text</Card.Description>
153
- </Card.Header>
154
- <Card.Body>Content goes here</Card.Body>
155
- <Card.Footer>
156
- <Button variant="ghost">Cancel</Button>
157
- <Button>Save</Button>
158
- </Card.Footer>
159
- </Card>
160
- ```
161
-
162
- ### Badge
163
-
164
- ```jsx
165
- <Badge>Default</Badge>
166
- <Badge variant="primary">Primary</Badge>
167
- <Badge variant="success">Success</Badge>
168
- <Badge variant="danger">Danger</Badge>
169
- <Badge variant="warning">Warning</Badge>
170
- <Badge variant="outline">Outline</Badge>
171
- ```
172
-
173
- ## Dark Mode
174
-
175
- Add the `.dark` class to your root element:
176
-
177
- ```html
178
- <html class="dark">
179
- ...
180
- </html>
181
- ```
182
-
183
- All components automatically adapt to the dark color scheme.
184
-
185
- ## Theming
186
-
187
- All design tokens use the `--cz-*` prefix. Override any token in your CSS:
188
-
189
- ```css
190
- :root {
191
- --cz-color-primary: 280 70% 50%; /* Purple */
192
- --cz-radius-md: 1rem; /* More rounded */
193
- }
194
- ```
195
-
196
- ## Available Tokens
197
-
198
- | Category | Tokens |
199
- |----------|--------|
200
- | Colors | `bg`, `fg`, `primary`, `secondary`, `muted`, `danger`, `success`, `warning`, `border`, `ring` |
201
- | Radius | `none`, `sm`, `md`, `lg`, `xl`, `full` |
202
- | Spacing | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` |
203
- | Typography | `fontFamily`, `size-*`, `weight-*`, `lineHeight-*` |
204
- | Shadow | `none`, `sm`, `md`, `lg` |
205
- | Transition | `fast`, `normal`, `slow` |
206
-
207
- ## License
208
-
209
- MIT
1
+ # CZero
2
+
3
+ A lightweight, design-token-driven React component library.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Design Token Driven** - Single config file controls entire look & feel
8
+ - ⚡ **No Runtime Dependencies** - Precompiled CSS, no Tailwind required
9
+ - 🌙 **Dark Mode Ready** - Add `.dark` class and all components adapt
10
+ - ♿ **Accessible** - Built with accessibility in mind
11
+
12
+ ## Quick Start
13
+
14
+ ### 1. Install
15
+
16
+ ```bash
17
+ npm install czero
18
+ ```
19
+
20
+ ### 2. Create Theme Config
21
+
22
+ Create `czero.config.js` in your project root:
23
+
24
+ ```js
25
+ // czero.config.js
26
+ export default {
27
+ color: {
28
+ primary: { light: "222 47% 45%", dark: "210 80% 65%" },
29
+ primaryFg: { light: "0 0% 100%", dark: "220 40% 3%" },
30
+ // Override any token...
31
+ },
32
+ radius: {
33
+ md: "0.5rem",
34
+ lg: "0.75rem",
35
+ },
36
+ typography: {
37
+ fontFamily: "Inter, system-ui, sans-serif",
38
+ },
39
+ };
40
+ ```
41
+
42
+ ### 3. Generate CSS
43
+
44
+ ```bash
45
+ npx czero build
46
+ ```
47
+
48
+ This creates `czero.css` with your custom tokens + component styles.
49
+
50
+ Options:
51
+ - `--config <path>` - Config file path (default: `czero.config.js`)
52
+ - `--output <path>` - Output CSS path (default: `czero.css`)
53
+ - `--preset <name>` - Apply a theme preset (can be used multiple times)
54
+
55
+ ## Theme Presets
56
+
57
+ Use pre-built theme configurations for quick customization:
58
+
59
+ ```bash
60
+ # Apply a single preset
61
+ npx czero build --preset compact
62
+
63
+ # Compose multiple presets
64
+ npx czero build --preset compact --preset rounded
65
+ ```
66
+
67
+ **Available Presets:**
68
+
69
+ | Preset | Description |
70
+ |--------|-------------|
71
+ | `compact` | Smaller sizes, tighter spacing |
72
+ | `comfortable` | Larger touch targets, more spacing |
73
+ | `rounded` | Increased border radius everywhere |
74
+ | `sharp` | Minimal border radius, angular look |
75
+ | `minimal` | Subtle shadows, less visual noise |
76
+ | `vibrant` | Bold colors, pronounced effects |
77
+
78
+ ### Programmatic Usage
79
+
80
+ ```js
81
+ // czero.config.js
82
+ import { presets } from "czero/presets";
83
+
84
+ export default {
85
+ ...presets.compact,
86
+ ...presets.rounded,
87
+ // Your overrides
88
+ color: {
89
+ primary: { light: "280 70% 50%", dark: "280 60% 60%" },
90
+ },
91
+ };
92
+ ```
93
+
94
+ ### 4. Import & Use
95
+
96
+ ```jsx
97
+ // Import generated CSS
98
+ import "./czero.css";
99
+
100
+ // Import components
101
+ import { Button, Input, Card, Badge } from "czero/react";
102
+
103
+ function App() {
104
+ return (
105
+ <Card>
106
+ <Card.Header>
107
+ <Card.Title>Hello CZero</Card.Title>
108
+ </Card.Header>
109
+ <Card.Body>
110
+ <Button variant="primary">Click me</Button>
111
+ </Card.Body>
112
+ </Card>
113
+ );
114
+ }
115
+ ```
116
+
117
+ ## Components
118
+
119
+ ### Button
120
+
121
+ ```jsx
122
+ <Button variant="primary">Primary</Button>
123
+ <Button variant="secondary">Secondary</Button>
124
+ <Button variant="outline">Outline</Button>
125
+ <Button variant="ghost">Ghost</Button>
126
+ <Button variant="danger">Danger</Button>
127
+
128
+ <Button size="sm">Small</Button>
129
+ <Button size="md">Medium</Button>
130
+ <Button size="lg">Large</Button>
131
+
132
+ <Button loading>Loading...</Button>
133
+ <Button disabled>Disabled</Button>
134
+ ```
135
+
136
+ ### Input
137
+
138
+ ```jsx
139
+ <Input placeholder="Enter text..." />
140
+ <Input label="Email" type="email" />
141
+ <Input label="Password" error="Required" />
142
+ <Input size="sm" />
143
+ <Input size="lg" />
144
+ ```
145
+
146
+ ### Card
147
+
148
+ ```jsx
149
+ <Card>
150
+ <Card.Header>
151
+ <Card.Title>Title</Card.Title>
152
+ <Card.Description>Description text</Card.Description>
153
+ </Card.Header>
154
+ <Card.Body>Content goes here</Card.Body>
155
+ <Card.Footer>
156
+ <Button variant="ghost">Cancel</Button>
157
+ <Button>Save</Button>
158
+ </Card.Footer>
159
+ </Card>
160
+ ```
161
+
162
+ ### Badge
163
+
164
+ ```jsx
165
+ <Badge>Default</Badge>
166
+ <Badge variant="primary">Primary</Badge>
167
+ <Badge variant="success">Success</Badge>
168
+ <Badge variant="danger">Danger</Badge>
169
+ <Badge variant="warning">Warning</Badge>
170
+ <Badge variant="outline">Outline</Badge>
171
+ ```
172
+
173
+ ## Dark Mode
174
+
175
+ Add the `.dark` class to your root element:
176
+
177
+ ```html
178
+ <html class="dark">
179
+ ...
180
+ </html>
181
+ ```
182
+
183
+ All components automatically adapt to the dark color scheme.
184
+
185
+ ## Theming
186
+
187
+ All design tokens use the `--cz-*` prefix. Override any token in your CSS:
188
+
189
+ ```css
190
+ :root {
191
+ --cz-color-primary: 280 70% 50%; /* Purple */
192
+ --cz-radius-md: 1rem; /* More rounded */
193
+ }
194
+ ```
195
+
196
+ ## Available Tokens
197
+
198
+ | Category | Tokens |
199
+ |----------|--------|
200
+ | Colors | `bg`, `fg`, `primary`, `secondary`, `muted`, `danger`, `success`, `warning`, `border`, `ring` |
201
+ | Radius | `none`, `sm`, `md`, `lg`, `xl`, `full` |
202
+ | Spacing | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` |
203
+ | Typography | `fontFamily`, `size-*`, `weight-*`, `lineHeight-*` |
204
+ | Shadow | `none`, `sm`, `md`, `lg` |
205
+ | Transition | `fast`, `normal`, `slow` |
206
+
207
+ ## License
208
+
209
+ MIT