cherry-styled-components 0.1.0-9 → 0.1.1

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 (60) hide show
  1. package/.claude/settings.local.json +7 -0
  2. package/.prettierrc +9 -9
  3. package/.supermaven/config.json +1 -0
  4. package/README.md +1 -1
  5. package/dist/App.d.ts +0 -1
  6. package/dist/cherry.js +4066 -2890
  7. package/dist/cherry.umd.cjs +916 -791
  8. package/dist/lib/box.d.ts +3 -3
  9. package/dist/lib/button.d.ts +6 -4
  10. package/dist/lib/col.d.ts +3 -3
  11. package/dist/lib/container.d.ts +3 -3
  12. package/dist/lib/flex.d.ts +5 -3
  13. package/dist/lib/grid.d.ts +3 -3
  14. package/dist/lib/index.d.ts +15 -15
  15. package/dist/lib/input.d.ts +16 -5
  16. package/dist/lib/max-width.d.ts +3 -2
  17. package/dist/lib/range.d.ts +3 -3
  18. package/dist/lib/select.d.ts +5 -4
  19. package/dist/lib/space.d.ts +2 -2
  20. package/dist/lib/styled-components/index.d.ts +2 -2
  21. package/dist/lib/styled-components/registry.d.ts +1 -1
  22. package/dist/lib/styled-components/theme-provider.d.ts +10 -4
  23. package/dist/lib/textarea.d.ts +4 -3
  24. package/dist/lib/toggle.d.ts +3 -3
  25. package/dist/lib/utils/global.d.ts +2 -2
  26. package/dist/lib/utils/icons.d.ts +6 -10
  27. package/dist/lib/utils/index.d.ts +5 -5
  28. package/dist/lib/utils/mixins.d.ts +11 -11
  29. package/dist/lib/utils/theme.d.ts +4 -0
  30. package/dist/lib/utils/typography.d.ts +19 -19
  31. package/dist/toggle-theme.d.ts +3 -0
  32. package/package.json +17 -15
  33. package/pnpm-workspace.yaml +3 -0
  34. package/src/App.tsx +80 -93
  35. package/src/lib/box.tsx +26 -21
  36. package/src/lib/button.tsx +162 -159
  37. package/src/lib/col.tsx +45 -43
  38. package/src/lib/container.tsx +59 -64
  39. package/src/lib/flex.tsx +92 -95
  40. package/src/lib/grid.tsx +64 -70
  41. package/src/lib/index.ts +15 -15
  42. package/src/lib/input.tsx +384 -267
  43. package/src/lib/max-width.tsx +50 -43
  44. package/src/lib/range.tsx +208 -226
  45. package/src/lib/select.tsx +121 -131
  46. package/src/lib/space.tsx +52 -54
  47. package/src/lib/styled-components/index.ts +2 -2
  48. package/src/lib/styled-components/registry.tsx +26 -26
  49. package/src/lib/styled-components/theme-provider.tsx +49 -21
  50. package/src/lib/textarea.tsx +94 -103
  51. package/src/lib/toggle.tsx +147 -160
  52. package/src/lib/utils/global.tsx +95 -79
  53. package/src/lib/utils/icons.tsx +84 -170
  54. package/src/lib/utils/index.ts +5 -5
  55. package/src/lib/utils/mixins.tsx +95 -108
  56. package/src/lib/utils/theme.ts +289 -242
  57. package/src/lib/utils/typography.tsx +204 -204
  58. package/src/main.tsx +14 -14
  59. package/src/toggle-theme.tsx +25 -0
  60. package/src/vite-env.d.ts +8 -1
package/src/lib/utils/theme.ts CHANGED
@@ -1,242 +1,289 @@
1
- "use client";
2
- export const breakpoints: Breakpoints = {
3
- xs: 0,
4
- sm: 576,
5
- md: 768,
6
- lg: 992,
7
- xl: 1200,
8
- xxl: 1440,
9
- xxxl: 1920,
10
- };
11
-
12
- export function mq(minWidth: keyof Breakpoints) {
13
- return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
14
- }
15
-
16
- export const spacing: Spacing = {
17
- maxWidth: { xs: "1280px", xxxl: "1440px" },
18
- padding: { xs: "20px", lg: "40px" },
19
- radius: { xs: "6px", lg: "12px", xl: "30px" },
20
- gridGap: { xs: "20px", lg: "40px" },
21
- };
22
-
23
- export const colors: Colors = {
24
- primaryLight: "#91aec4",
25
- primary: "#4d6f8b",
26
- primaryDark: "#194569",
27
-
28
- secondaryLight: "#a4b17b",
29
- secondary: "#5c6e46",
30
- secondaryDark: "#354c2b",
31
-
32
- tertiaryLight: "#ebccb9",
33
- tertiary: "#816b5a",
34
- tertiaryDark: "#675445",
35
-
36
- grayLight: "#e5e7eb",
37
- gray: "#9ca3af",
38
- grayDark: "#4b5563",
39
-
40
- success: "#84cc16",
41
- error: "#ef4444",
42
- warning: "#eab308",
43
- info: "#06b6d4",
44
-
45
- dark: "#000000",
46
- light: "#ffffff",
47
- };
48
-
49
- export const shadows: Shadows = {
50
- xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
51
- sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
52
- md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
53
- lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
54
- xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)",
55
- };
56
-
57
- export const fonts: Fonts = {
58
- text: "Inter",
59
- head: "Inter",
60
- mono: "monospace",
61
- };
62
-
63
- export const fontSizes: FontSizes = {
64
- hero1: { xs: "72px", lg: "128px" },
65
- hero2: { xs: "60px", lg: "96px" },
66
- hero3: { xs: "36px", lg: "72px" },
67
-
68
- h1: { xs: "40px", lg: "60px" },
69
- h2: { xs: "30px", lg: "36px" },
70
- h3: { xs: "28px", lg: "30px" },
71
- h4: { xs: "26px", lg: "24px" },
72
- h5: { xs: "18px", lg: "20px" },
73
- h6: { xs: "16px", lg: "18px" },
74
-
75
- text: { xs: "14px", lg: "16px" },
76
- strong: { xs: "14px", lg: "16px" },
77
- small: { xs: "12px", lg: "14px" },
78
-
79
- blockquote: { xs: "16px", lg: "18px" },
80
- code: { xs: "14px", lg: "16px" },
81
-
82
- button: { xs: "16px", lg: "16px" },
83
- buttonBig: { xs: "18px", lg: "18px" },
84
-
85
- input: { xs: "16px", lg: "16px" },
86
- inputBig: { xs: "18px", lg: "18px" },
87
- };
88
-
89
- export const lineHeights: LineHeights = {
90
- hero1: { xs: "1.10", lg: "1.10" },
91
- hero2: { xs: "1.10", lg: "1.10" },
92
- hero3: { xs: "1.20", lg: "1.10" },
93
-
94
- h1: { xs: "1.50", lg: "1.40" },
95
- h2: { xs: "1.50", lg: "1.50" },
96
- h3: { xs: "1.30", lg: "1.50" },
97
- h4: { xs: "1.30", lg: "1.50" },
98
- h5: { xs: "1.60", lg: "1.50" },
99
- h6: { xs: "1.60", lg: "1.60" },
100
-
101
- text: { xs: "1.70", lg: "1.70" },
102
- strong: { xs: "1.70", lg: "1.70" },
103
- small: { xs: "1.70", lg: "1.70" },
104
-
105
- blockquote: { xs: "1.70", lg: "1.70" },
106
- code: { xs: "1.70", lg: "1.70" },
107
-
108
- button: { xs: "1.00", lg: "1.00" },
109
- buttonBig: { xs: "1.00", lg: "1.00" },
110
-
111
- input: { xs: "1.00", lg: "1.00" },
112
- inputBig: { xs: "1.00", lg: "1.00" },
113
- };
114
-
115
- export const theme: Theme = {
116
- breakpoints,
117
- spacing,
118
- colors,
119
- shadows,
120
- fonts,
121
- fontSizes,
122
- lineHeights,
123
- };
124
-
125
- export interface Breakpoints<TNumber = number> {
126
- xs: TNumber;
127
- sm: TNumber;
128
- md: TNumber;
129
- lg: TNumber;
130
- xl: TNumber;
131
- xxl: TNumber;
132
- xxxl: TNumber;
133
- }
134
-
135
- export interface Spacing<TString = string> {
136
- maxWidth: { xs: TString; xxxl: TString };
137
- padding: { xs: TString; lg: TString };
138
- radius: { xs: TString; lg: TString; xl: TString };
139
- gridGap: { xs: TString; lg: TString };
140
- }
141
-
142
- export interface Colors<TString = string> {
143
- primaryLight: TString;
144
- primary: TString;
145
- primaryDark: TString;
146
-
147
- secondaryLight: TString;
148
- secondary: TString;
149
- secondaryDark: TString;
150
-
151
- tertiaryLight: TString;
152
- tertiary: TString;
153
- tertiaryDark: TString;
154
-
155
- grayLight: TString;
156
- gray: TString;
157
- grayDark: TString;
158
-
159
- success: TString;
160
- error: TString;
161
- warning: TString;
162
- info: TString;
163
-
164
- dark: TString;
165
- light: TString;
166
- }
167
-
168
- interface Shadows<TString = string> {
169
- xs: TString;
170
- sm: TString;
171
- md: TString;
172
- lg: TString;
173
- xl: TString;
174
- }
175
-
176
- export interface Fonts<TString = string> {
177
- head: TString;
178
- text: TString;
179
- mono: TString;
180
- }
181
-
182
- export interface FontSizes<TString = string> {
183
- hero1: { xs: TString; lg: TString };
184
- hero2: { xs: TString; lg: TString };
185
- hero3: { xs: TString; lg: TString };
186
-
187
- h1: { xs: TString; lg: TString };
188
- h2: { xs: TString; lg: TString };
189
- h3: { xs: TString; lg: TString };
190
- h4: { xs: TString; lg: TString };
191
- h5: { xs: TString; lg: TString };
192
- h6: { xs: TString; lg: TString };
193
-
194
- text: { xs: TString; lg: TString };
195
- strong: { xs: TString; lg: TString };
196
- small: { xs: TString; lg: TString };
197
-
198
- blockquote: { xs: TString; lg: TString };
199
- code: { xs: TString; lg: TString };
200
-
201
- button: { xs: TString; lg: TString };
202
- buttonBig: { xs: TString; lg: TString };
203
-
204
- input: { xs: TString; lg: TString };
205
- inputBig: { xs: TString; lg: TString };
206
- }
207
-
208
- export interface LineHeights<TString = string> {
209
- hero1: { xs: TString; lg: TString };
210
- hero2: { xs: TString; lg: TString };
211
- hero3: { xs: TString; lg: TString };
212
-
213
- h1: { xs: TString; lg: TString };
214
- h2: { xs: TString; lg: TString };
215
- h3: { xs: TString; lg: TString };
216
- h4: { xs: TString; lg: TString };
217
- h5: { xs: TString; lg: TString };
218
- h6: { xs: TString; lg: TString };
219
-
220
- text: { xs: TString; lg: TString };
221
- strong: { xs: TString; lg: TString };
222
- small: { xs: TString; lg: TString };
223
-
224
- blockquote: { xs: TString; lg: TString };
225
- code: { xs: TString; lg: TString };
226
-
227
- button: { xs: TString; lg: TString };
228
- buttonBig: { xs: TString; lg: TString };
229
-
230
- input: { xs: TString; lg: TString };
231
- inputBig: { xs: TString; lg: TString };
232
- }
233
-
234
- export interface Theme {
235
- breakpoints: Breakpoints;
236
- spacing: Spacing;
237
- colors: Colors;
238
- shadows: Shadows;
239
- fonts: Fonts;
240
- fontSizes: FontSizes;
241
- lineHeights: LineHeights;
242
- }
1
+ "use client";
2
+ export const breakpoints: Breakpoints = {
3
+ xs: 0,
4
+ sm: 576,
5
+ md: 768,
6
+ lg: 992,
7
+ xl: 1200,
8
+ xxl: 1440,
9
+ xxxl: 1920,
10
+ };
11
+
12
+ export function mq(minWidth: keyof Breakpoints) {
13
+ return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
14
+ }
15
+
16
+ export const spacing: Spacing = {
17
+ maxWidth: { xs: "1280px", xxxl: "1440px" },
18
+ padding: { xs: "20px", lg: "40px" },
19
+ radius: { xs: "6px", lg: "12px", xl: "30px" },
20
+ gridGap: { xs: "20px", lg: "40px" },
21
+ };
22
+
23
+ export const colors: Colors = {
24
+ primaryLight: "#91aec4",
25
+ primary: "#4d6f8b",
26
+ primaryDark: "#194569",
27
+
28
+ secondaryLight: "#a4b17b",
29
+ secondary: "#5c6e46",
30
+ secondaryDark: "#354c2b",
31
+
32
+ tertiaryLight: "#ebccb9",
33
+ tertiary: "#816b5a",
34
+ tertiaryDark: "#675445",
35
+
36
+ grayLight: "#e5e7eb",
37
+ gray: "#9ca3af",
38
+ grayDark: "#4b5563",
39
+
40
+ success: "#84cc16",
41
+ error: "#ef4444",
42
+ warning: "#eab308",
43
+ info: "#06b6d4",
44
+
45
+ dark: "#000000",
46
+ light: "#ffffff",
47
+ };
48
+
49
+ export const colorsDark: Colors = {
50
+ primaryLight: "#79C5FF",
51
+ primary: "#6198C6",
52
+ primaryDark: "#339DF4",
53
+
54
+ secondaryLight: "#a4b17b",
55
+ secondary: "#5c6e46",
56
+ secondaryDark: "#354c2b",
57
+
58
+ tertiaryLight: "#ebccb9",
59
+ tertiary: "#816b5a",
60
+ tertiaryDark: "#675445",
61
+
62
+ grayLight: "#1a1a1a",
63
+ gray: "#454444",
64
+ grayDark: "#808080",
65
+
66
+ success: "#84cc16",
67
+ error: "#ef4444",
68
+ warning: "#eab308",
69
+ info: "#06b6d4",
70
+
71
+ dark: "#ffffff",
72
+ light: "#000000",
73
+ };
74
+
75
+ export const shadows: Shadows = {
76
+ xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
77
+ sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
78
+ md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
79
+ lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
80
+ xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)",
81
+ };
82
+
83
+ export const shadowsDark: Shadows = {
84
+ xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
85
+ sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
86
+ md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
87
+ lg: "0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)",
88
+ xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)",
89
+ };
90
+
91
+ export const fonts: Fonts = {
92
+ text: "Inter",
93
+ head: "Inter",
94
+ mono: "monospace",
95
+ };
96
+
97
+ export const fontSizes: FontSizes = {
98
+ hero1: { xs: "72px", lg: "128px" },
99
+ hero2: { xs: "60px", lg: "96px" },
100
+ hero3: { xs: "36px", lg: "72px" },
101
+
102
+ h1: { xs: "40px", lg: "60px" },
103
+ h2: { xs: "30px", lg: "36px" },
104
+ h3: { xs: "28px", lg: "30px" },
105
+ h4: { xs: "26px", lg: "24px" },
106
+ h5: { xs: "18px", lg: "20px" },
107
+ h6: { xs: "16px", lg: "18px" },
108
+
109
+ text: { xs: "14px", lg: "16px" },
110
+ strong: { xs: "14px", lg: "16px" },
111
+ small: { xs: "12px", lg: "14px" },
112
+
113
+ blockquote: { xs: "16px", lg: "18px" },
114
+ code: { xs: "14px", lg: "16px" },
115
+
116
+ button: { xs: "16px", lg: "16px" },
117
+ buttonBig: { xs: "18px", lg: "18px" },
118
+
119
+ input: { xs: "16px", lg: "16px" },
120
+ inputBig: { xs: "18px", lg: "18px" },
121
+ };
122
+
123
+ export const lineHeights: LineHeights = {
124
+ hero1: { xs: "1.10", lg: "1.10" },
125
+ hero2: { xs: "1.10", lg: "1.10" },
126
+ hero3: { xs: "1.20", lg: "1.10" },
127
+
128
+ h1: { xs: "1.50", lg: "1.40" },
129
+ h2: { xs: "1.50", lg: "1.50" },
130
+ h3: { xs: "1.30", lg: "1.50" },
131
+ h4: { xs: "1.30", lg: "1.50" },
132
+ h5: { xs: "1.60", lg: "1.50" },
133
+ h6: { xs: "1.60", lg: "1.60" },
134
+
135
+ text: { xs: "1.70", lg: "1.70" },
136
+ strong: { xs: "1.70", lg: "1.70" },
137
+ small: { xs: "1.70", lg: "1.70" },
138
+
139
+ blockquote: { xs: "1.70", lg: "1.70" },
140
+ code: { xs: "1.70", lg: "1.70" },
141
+
142
+ button: { xs: "1.00", lg: "1.00" },
143
+ buttonBig: { xs: "1.00", lg: "1.00" },
144
+
145
+ input: { xs: "1.00", lg: "1.00" },
146
+ inputBig: { xs: "1.00", lg: "1.00" },
147
+ };
148
+
149
+ export const theme: Theme = {
150
+ breakpoints,
151
+ spacing,
152
+ colors,
153
+ shadows,
154
+ fonts,
155
+ fontSizes,
156
+ lineHeights,
157
+ isDark: false,
158
+ };
159
+
160
+ export const themeDark: Theme = {
161
+ breakpoints,
162
+ spacing,
163
+ colors: colorsDark,
164
+ shadows: shadowsDark,
165
+ fonts,
166
+ fontSizes,
167
+ lineHeights,
168
+ isDark: true,
169
+ };
170
+
171
+ export interface Breakpoints<TNumber = number> {
172
+ xs: TNumber;
173
+ sm: TNumber;
174
+ md: TNumber;
175
+ lg: TNumber;
176
+ xl: TNumber;
177
+ xxl: TNumber;
178
+ xxxl: TNumber;
179
+ }
180
+
181
+ export interface Spacing<TString = string> {
182
+ maxWidth: { xs: TString; xxxl: TString };
183
+ padding: { xs: TString; lg: TString };
184
+ radius: { xs: TString; lg: TString; xl: TString };
185
+ gridGap: { xs: TString; lg: TString };
186
+ }
187
+
188
+ export interface Colors<TString = string> {
189
+ primaryLight: TString;
190
+ primary: TString;
191
+ primaryDark: TString;
192
+
193
+ secondaryLight: TString;
194
+ secondary: TString;
195
+ secondaryDark: TString;
196
+
197
+ tertiaryLight: TString;
198
+ tertiary: TString;
199
+ tertiaryDark: TString;
200
+
201
+ grayLight: TString;
202
+ gray: TString;
203
+ grayDark: TString;
204
+
205
+ success: TString;
206
+ error: TString;
207
+ warning: TString;
208
+ info: TString;
209
+
210
+ dark: TString;
211
+ light: TString;
212
+ }
213
+
214
+ interface Shadows<TString = string> {
215
+ xs: TString;
216
+ sm: TString;
217
+ md: TString;
218
+ lg: TString;
219
+ xl: TString;
220
+ }
221
+
222
+ export interface Fonts<TString = string> {
223
+ head: TString;
224
+ text: TString;
225
+ mono: TString;
226
+ }
227
+
228
+ export interface FontSizes<TString = string> {
229
+ hero1: { xs: TString; lg: TString };
230
+ hero2: { xs: TString; lg: TString };
231
+ hero3: { xs: TString; lg: TString };
232
+
233
+ h1: { xs: TString; lg: TString };
234
+ h2: { xs: TString; lg: TString };
235
+ h3: { xs: TString; lg: TString };
236
+ h4: { xs: TString; lg: TString };
237
+ h5: { xs: TString; lg: TString };
238
+ h6: { xs: TString; lg: TString };
239
+
240
+ text: { xs: TString; lg: TString };
241
+ strong: { xs: TString; lg: TString };
242
+ small: { xs: TString; lg: TString };
243
+
244
+ blockquote: { xs: TString; lg: TString };
245
+ code: { xs: TString; lg: TString };
246
+
247
+ button: { xs: TString; lg: TString };
248
+ buttonBig: { xs: TString; lg: TString };
249
+
250
+ input: { xs: TString; lg: TString };
251
+ inputBig: { xs: TString; lg: TString };
252
+ }
253
+
254
+ export interface LineHeights<TString = string> {
255
+ hero1: { xs: TString; lg: TString };
256
+ hero2: { xs: TString; lg: TString };
257
+ hero3: { xs: TString; lg: TString };
258
+
259
+ h1: { xs: TString; lg: TString };
260
+ h2: { xs: TString; lg: TString };
261
+ h3: { xs: TString; lg: TString };
262
+ h4: { xs: TString; lg: TString };
263
+ h5: { xs: TString; lg: TString };
264
+ h6: { xs: TString; lg: TString };
265
+
266
+ text: { xs: TString; lg: TString };
267
+ strong: { xs: TString; lg: TString };
268
+ small: { xs: TString; lg: TString };
269
+
270
+ blockquote: { xs: TString; lg: TString };
271
+ code: { xs: TString; lg: TString };
272
+
273
+ button: { xs: TString; lg: TString };
274
+ buttonBig: { xs: TString; lg: TString };
275
+
276
+ input: { xs: TString; lg: TString };
277
+ inputBig: { xs: TString; lg: TString };
278
+ }
279
+
280
+ export interface Theme {
281
+ breakpoints: Breakpoints;
282
+ spacing: Spacing;
283
+ colors: Colors;
284
+ shadows: Shadows;
285
+ fonts: Fonts;
286
+ fontSizes: FontSizes;
287
+ lineHeights: LineHeights;
288
+ isDark: boolean;
289
+ }