cherry-styled-components 0.1.0 → 0.1.2

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 (85) hide show
  1. package/.claude/settings.local.json +5 -0
  2. package/.eslintrc.cjs +18 -0
  3. package/.prettierignore +5 -0
  4. package/.prettierrc +11 -0
  5. package/.supermaven/config.json +6 -0
  6. package/README.md +33 -11
  7. package/dist/App.d.ts +2 -0
  8. package/dist/cherry.js +5258 -0
  9. package/dist/cherry.umd.cjs +1217 -0
  10. package/dist/lib/box.d.ts +4 -0
  11. package/dist/lib/button.d.ts +15 -0
  12. package/dist/lib/col.d.ts +16 -0
  13. package/dist/lib/container.d.ts +19 -0
  14. package/dist/lib/flex.d.ts +29 -0
  15. package/dist/lib/grid.d.ts +24 -0
  16. package/dist/lib/index.d.ts +15 -0
  17. package/dist/lib/input.d.ts +27 -0
  18. package/dist/lib/max-width.d.ts +14 -0
  19. package/dist/lib/range.d.ts +14 -0
  20. package/dist/lib/select.d.ts +16 -0
  21. package/dist/lib/space.d.ts +14 -0
  22. package/dist/lib/styled-components/index.d.ts +2 -0
  23. package/dist/lib/styled-components/registry.d.ts +5 -0
  24. package/dist/lib/styled-components/theme-provider.d.ts +12 -0
  25. package/dist/lib/textarea.d.ts +15 -0
  26. package/dist/lib/toggle.d.ts +15 -0
  27. package/dist/lib/utils/global.d.ts +3 -0
  28. package/dist/lib/utils/icons.d.ts +9 -0
  29. package/dist/lib/utils/index.d.ts +5 -0
  30. package/dist/lib/utils/mixins.d.ts +11 -0
  31. package/dist/lib/utils/theme.d.ts +231 -0
  32. package/dist/lib/utils/typography.d.ts +20 -0
  33. package/dist/main.d.ts +1 -0
  34. package/dist/toggle-theme.d.ts +3 -0
  35. package/index.html +13 -0
  36. package/package.json +38 -25
  37. package/pnpm-workspace.yaml +3 -0
  38. package/src/App.tsx +101 -0
  39. package/src/lib/box.tsx +26 -0
  40. package/src/lib/button.tsx +162 -0
  41. package/src/lib/col.tsx +48 -0
  42. package/src/lib/container.tsx +69 -0
  43. package/src/lib/flex.tsx +99 -0
  44. package/src/lib/grid.tsx +76 -0
  45. package/src/{app/components/cherry → lib}/index.ts +1 -1
  46. package/src/lib/input.tsx +418 -0
  47. package/src/lib/max-width.tsx +53 -0
  48. package/src/lib/range.tsx +234 -0
  49. package/src/lib/select.tsx +136 -0
  50. package/src/lib/space.tsx +55 -0
  51. package/src/lib/styled-components/registry.tsx +29 -0
  52. package/src/lib/styled-components/theme-provider.tsx +50 -0
  53. package/src/lib/textarea.tsx +115 -0
  54. package/src/lib/toggle.tsx +158 -0
  55. package/src/{app/components/cherry → lib}/utils/global.tsx +20 -3
  56. package/src/lib/utils/icons.tsx +84 -0
  57. package/src/lib/utils/mixins.tsx +108 -0
  58. package/src/lib/utils/theme.ts +289 -0
  59. package/src/lib/utils/typography.tsx +204 -0
  60. package/src/main.tsx +19 -0
  61. package/src/toggle-theme.tsx +25 -0
  62. package/src/vite-env.d.ts +8 -0
  63. package/tsconfig.json +24 -0
  64. package/vite.config.js +24 -0
  65. package/src/app/components/cherry/box.tsx +0 -16
  66. package/src/app/components/cherry/button.tsx +0 -177
  67. package/src/app/components/cherry/col.tsx +0 -39
  68. package/src/app/components/cherry/container.tsx +0 -55
  69. package/src/app/components/cherry/flex.tsx +0 -90
  70. package/src/app/components/cherry/grid.tsx +0 -60
  71. package/src/app/components/cherry/input.tsx +0 -254
  72. package/src/app/components/cherry/max-width.tsx +0 -43
  73. package/src/app/components/cherry/range.tsx +0 -223
  74. package/src/app/components/cherry/select.tsx +0 -122
  75. package/src/app/components/cherry/space.tsx +0 -54
  76. package/src/app/components/cherry/styled-components/registry.tsx +0 -26
  77. package/src/app/components/cherry/styled-components/theme-provider.tsx +0 -21
  78. package/src/app/components/cherry/textarea.tsx +0 -98
  79. package/src/app/components/cherry/toggle.tsx +0 -148
  80. package/src/app/components/cherry/utils/icons.tsx +0 -168
  81. package/src/app/components/cherry/utils/mixins.tsx +0 -107
  82. package/src/app/components/cherry/utils/theme.ts +0 -241
  83. package/src/app/components/cherry/utils/typography.tsx +0 -204
  84. /package/src/{app/components/cherry → lib}/styled-components/index.ts +0 -0
  85. /package/src/{app/components/cherry → lib}/utils/index.ts +0 -0
package/src/app/components/cherry/utils/typography.tsx DELETED
@@ -1,204 +0,0 @@
1
- "use client";
2
- import { css } from "styled-components";
3
- import { Theme, mq } from "./theme";
4
-
5
- const styledHero1 = (theme: Theme) => css`
6
- font-size: ${theme.fontSizes.hero1.xs};
7
- line-height: ${theme.lineHeights.hero1.xs};
8
-
9
- ${mq("lg")} {
10
- font-size: ${theme.fontSizes.hero1.lg};
11
- line-height: ${theme.lineHeights.hero1.lg};
12
- }
13
- `;
14
-
15
- const styledHero2 = (theme: Theme) => css`
16
- font-size: ${theme.fontSizes.hero2.xs};
17
- line-height: ${theme.lineHeights.hero2.xs};
18
-
19
- ${mq("lg")} {
20
- font-size: ${theme.fontSizes.hero2.lg};
21
- line-height: ${theme.lineHeights.hero2.lg};
22
- }
23
- `;
24
-
25
- const styledHero3 = (theme: Theme) => css`
26
- font-size: ${theme.fontSizes.hero3.xs};
27
- line-height: ${theme.lineHeights.hero3.xs};
28
-
29
- ${mq("lg")} {
30
- font-size: ${theme.fontSizes.hero3.lg};
31
- line-height: ${theme.lineHeights.hero3.lg};
32
- }
33
- `;
34
-
35
- const styledH1 = (theme: Theme) => css`
36
- font-size: ${theme.fontSizes.h1.xs};
37
- line-height: ${theme.lineHeights.h1.xs};
38
-
39
- ${mq("lg")} {
40
- font-size: ${theme.fontSizes.h1.lg};
41
- line-height: ${theme.lineHeights.h1.lg};
42
- }
43
- `;
44
-
45
- const styledH2 = (theme: Theme) => css`
46
- font-size: ${theme.fontSizes.h2.xs};
47
- line-height: ${theme.lineHeights.h2.xs};
48
-
49
- ${mq("lg")} {
50
- font-size: ${theme.fontSizes.h2.lg};
51
- line-height: ${theme.lineHeights.h2.lg};
52
- }
53
- `;
54
-
55
- const styledH3 = (theme: Theme) => css`
56
- font-size: ${theme.fontSizes.h3.xs};
57
- line-height: ${theme.lineHeights.h3.xs};
58
-
59
- ${mq("lg")} {
60
- font-size: ${theme.fontSizes.h3.lg};
61
- line-height: ${theme.lineHeights.h3.lg};
62
- }
63
- `;
64
-
65
- const styledH4 = (theme: Theme) => css`
66
- font-size: ${theme.fontSizes.h4.xs};
67
- line-height: ${theme.lineHeights.h4.xs};
68
-
69
- ${mq("lg")} {
70
- font-size: ${theme.fontSizes.h4.lg};
71
- line-height: ${theme.lineHeights.h4.lg};
72
- }
73
- `;
74
-
75
- const styledH5 = (theme: Theme) => css`
76
- font-size: ${theme.fontSizes.h5.xs};
77
- line-height: ${theme.lineHeights.h5.xs};
78
-
79
- ${mq("lg")} {
80
- font-size: ${theme.fontSizes.h5.lg};
81
- line-height: ${theme.lineHeights.h5.lg};
82
- }
83
- `;
84
-
85
- const styledH6 = (theme: Theme) => css`
86
- font-size: ${theme.fontSizes.h6.xs};
87
- line-height: ${theme.lineHeights.h6.xs};
88
-
89
- ${mq("lg")} {
90
- font-size: ${theme.fontSizes.h6.lg};
91
- line-height: ${theme.lineHeights.h6.lg};
92
- }
93
- `;
94
-
95
- const styledText = (theme: Theme) => css`
96
- font-size: ${theme.fontSizes.text.xs};
97
- line-height: ${theme.lineHeights.text.xs};
98
-
99
- ${mq("lg")} {
100
- font-size: ${theme.fontSizes.text.lg};
101
- line-height: ${theme.lineHeights.text.lg};
102
- }
103
- `;
104
-
105
- const styledStrong = (theme: Theme) => css`
106
- font-size: ${theme.fontSizes.strong.xs};
107
- line-height: ${theme.lineHeights.strong.xs};
108
-
109
- ${mq("lg")} {
110
- font-size: ${theme.fontSizes.strong.lg};
111
- line-height: ${theme.lineHeights.strong.lg};
112
- }
113
- `;
114
-
115
- const styledSmall = (theme: Theme) => css`
116
- font-size: ${theme.fontSizes.small.xs};
117
- line-height: ${theme.lineHeights.small.xs};
118
-
119
- ${mq("lg")} {
120
- font-size: ${theme.fontSizes.small.lg};
121
- line-height: ${theme.lineHeights.small.lg};
122
- }
123
- `;
124
-
125
- const styledBlockquote = (theme: Theme) => css`
126
- font-size: ${theme.fontSizes.blockquote.xs};
127
- line-height: ${theme.lineHeights.blockquote.xs};
128
-
129
- ${mq("lg")} {
130
- font-size: ${theme.fontSizes.blockquote.lg};
131
- line-height: ${theme.lineHeights.blockquote.lg};
132
- }
133
- `;
134
-
135
- const styledCode = (theme: Theme) => css`
136
- font-size: ${theme.fontSizes.code.xs};
137
- line-height: ${theme.lineHeights.code.xs};
138
-
139
- ${mq("lg")} {
140
- font-size: ${theme.fontSizes.code.lg};
141
- line-height: ${theme.lineHeights.code.lg};
142
- }
143
- `;
144
-
145
- const styledButton = (theme: Theme) => css`
146
- font-size: ${theme.fontSizes.button.xs};
147
- line-height: ${theme.lineHeights.button.xs};
148
-
149
- ${mq("lg")} {
150
- font-size: ${theme.fontSizes.button.lg};
151
- line-height: ${theme.lineHeights.button.lg};
152
- }
153
- `;
154
-
155
- const styledButtonBig = (theme: Theme) => css`
156
- font-size: ${theme.fontSizes.buttonBig.xs};
157
- line-height: ${theme.lineHeights.buttonBig.xs};
158
-
159
- ${mq("lg")} {
160
- font-size: ${theme.fontSizes.buttonBig.lg};
161
- line-height: ${theme.lineHeights.buttonBig.lg};
162
- }
163
- `;
164
-
165
- const styledInput = (theme: Theme) => css`
166
- font-size: ${theme.fontSizes.input.xs};
167
- line-height: ${theme.lineHeights.input.xs};
168
-
169
- ${mq("lg")} {
170
- font-size: ${theme.fontSizes.input.lg};
171
- line-height: ${theme.lineHeights.input.lg};
172
- }
173
- `;
174
-
175
- const styledInputBig = (theme: Theme) => css`
176
- font-size: ${theme.fontSizes.inputBig.xs};
177
- line-height: ${theme.lineHeights.inputBig.xs};
178
-
179
- ${mq("lg")} {
180
- font-size: ${theme.fontSizes.inputBig.lg};
181
- line-height: ${theme.lineHeights.inputBig.lg};
182
- }
183
- `;
184
-
185
- export {
186
- styledHero1,
187
- styledHero2,
188
- styledHero3,
189
- styledH1,
190
- styledH2,
191
- styledH3,
192
- styledH4,
193
- styledH5,
194
- styledH6,
195
- styledText,
196
- styledStrong,
197
- styledSmall,
198
- styledBlockquote,
199
- styledCode,
200
- styledButton,
201
- styledButtonBig,
202
- styledInput,
203
- styledInputBig,
204
- };