@blockle/blocks 0.2.1 → 0.2.3

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.
@@ -1,390 +1,2 @@
1
- import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
2
- import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
3
1
 
4
- type BlocksProviderProps = {
5
- children: React.ReactNode;
6
- theme: {
7
- vars: string;
8
- };
9
- };
10
- declare const BlocksProvider: React.FC<BlocksProviderProps>;
11
-
12
- declare const atoms: ((props: {
13
- readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link") | undefined;
14
- readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
15
- readonly bottom?: 0 | undefined;
16
- readonly boxShadow?: ("small" | "medium" | "large") | undefined;
17
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link" | "currentColor" | undefined;
18
- readonly cursor?: "auto" | "pointer" | undefined;
19
- readonly fontFamily?: "secondary" | "standard" | undefined;
20
- readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
21
- readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
22
- readonly height?: "auto" | "full" | undefined;
23
- readonly left?: 0 | undefined;
24
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
25
- readonly maxHeight?: "full" | undefined;
26
- readonly maxWidth?: "full" | undefined;
27
- readonly opacity?: 0 | 1 | undefined;
28
- readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
29
- readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
30
- readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
31
- readonly pointerEvents?: "none" | undefined;
32
- readonly right?: 0 | undefined;
33
- readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
34
- readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
35
- readonly top?: 0 | undefined;
36
- readonly transition?: ("slow" | "normal" | "fast") | undefined;
37
- readonly userSelect?: "none" | undefined;
38
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
39
- readonly width?: "auto" | "fit-content" | "full" | undefined;
40
- readonly wordBreak?: "break-word" | undefined;
41
- readonly wordWrap?: "break-word" | undefined;
42
- inset?: 0 | undefined;
43
- } & {
44
- readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
45
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
46
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
47
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
48
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
49
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
50
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
51
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
52
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
53
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
54
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
55
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
56
- readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
57
- mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
58
- tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
59
- desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
60
- wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
61
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
62
- readonly flex?: (1 | {
63
- mobile?: 1 | undefined;
64
- tablet?: 1 | undefined;
65
- desktop?: 1 | undefined;
66
- wide?: 1 | undefined;
67
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
68
- readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
69
- mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
70
- tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
71
- desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
72
- wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
73
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
74
- readonly flexGrow?: (0 | 1 | {
75
- mobile?: 0 | 1 | undefined;
76
- tablet?: 0 | 1 | undefined;
77
- desktop?: 0 | 1 | undefined;
78
- wide?: 0 | 1 | undefined;
79
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
80
- readonly flexShrink?: (0 | 1 | {
81
- mobile?: 0 | 1 | undefined;
82
- tablet?: 0 | 1 | undefined;
83
- desktop?: 0 | 1 | undefined;
84
- wide?: 0 | 1 | undefined;
85
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
86
- readonly flexWrap?: ("nowrap" | "wrap" | {
87
- mobile?: "nowrap" | "wrap" | undefined;
88
- tablet?: "nowrap" | "wrap" | undefined;
89
- desktop?: "nowrap" | "wrap" | undefined;
90
- wide?: "nowrap" | "wrap" | undefined;
91
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "nowrap" | "wrap" | null>;
92
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
93
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
94
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
95
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
96
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
97
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
98
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
99
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
100
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
101
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
102
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
103
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
104
- readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
105
- mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
106
- tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
107
- desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
108
- wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
109
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
110
- readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
111
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
112
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
113
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
114
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
115
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
116
- readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
117
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
118
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
119
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
120
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
121
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
122
- readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
123
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
124
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
128
- readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
129
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
130
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
131
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
132
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
133
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
134
- readonly outline?: ("none" | {
135
- mobile?: "none" | undefined;
136
- tablet?: "none" | undefined;
137
- desktop?: "none" | undefined;
138
- wide?: "none" | undefined;
139
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
140
- readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
141
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
142
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
143
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
144
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
145
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
146
- readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
147
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
148
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
149
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
150
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
151
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
152
- readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
153
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
154
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
158
- readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
159
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
160
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
161
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
162
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
163
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
164
- readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
165
- mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
166
- tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
167
- desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
168
- wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
169
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
170
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
171
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
172
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
173
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
174
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
175
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
176
- readonly textAlign?: ("left" | "right" | "center" | "justify" | {
177
- mobile?: "left" | "right" | "center" | "justify" | undefined;
178
- tablet?: "left" | "right" | "center" | "justify" | undefined;
179
- desktop?: "left" | "right" | "center" | "justify" | undefined;
180
- wide?: "left" | "right" | "center" | "justify" | undefined;
181
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
182
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
183
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
184
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
185
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
186
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
187
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
188
- marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
189
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
190
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
191
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
192
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
193
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
194
- marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
195
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
196
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
197
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
198
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
199
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
200
- padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
201
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
202
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
204
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
205
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
206
- paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
207
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
208
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
209
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
210
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
211
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
212
- paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
213
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
214
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
215
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
216
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
217
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
218
- placeItems?: ("center" | "flex-start" | "flex-end" | {
219
- mobile?: "center" | "flex-start" | "flex-end" | undefined;
220
- tablet?: "center" | "flex-start" | "flex-end" | undefined;
221
- desktop?: "center" | "flex-start" | "flex-end" | undefined;
222
- wide?: "center" | "flex-start" | "flex-end" | undefined;
223
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
224
- }) => string) & {
225
- properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "marginX" | "marginY" | "paddingX" | "paddingY">;
226
- };
227
-
228
- type Atoms = Parameters<typeof atoms>[0];
229
- type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
230
- type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
231
- type MarginAtoms = {
232
- margin?: Atoms['margin'];
233
- marginLeft?: Atoms['marginLeft'];
234
- marginRight?: Atoms['marginRight'];
235
- marginTop?: Atoms['marginTop'];
236
- marginBottom?: Atoms['marginBottom'];
237
- marginX?: Atoms['marginX'];
238
- marginY?: Atoms['marginY'];
239
- };
240
- type PaddingAtoms = {
241
- padding?: Atoms['padding'];
242
- paddingLeft?: Atoms['paddingLeft'];
243
- paddingRight?: Atoms['paddingRight'];
244
- paddingTop?: Atoms['paddingTop'];
245
- paddingBottom?: Atoms['paddingBottom'];
246
- paddingX?: Atoms['paddingX'];
247
- paddingY?: Atoms['paddingY'];
248
- };
249
- type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
250
-
251
- type BoxProps = {
252
- children?: React.ReactNode;
253
- className?: string;
254
- } & Atoms;
255
- type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
256
- declare const Box: PolymorphicBox;
257
-
258
- declare const justifyContentMap: {
259
- readonly left: "flex-start";
260
- readonly right: "flex-end";
261
- readonly center: "center";
262
- readonly between: "space-between";
263
- readonly around: "space-around";
264
- };
265
- type JustifyContentMap = typeof justifyContentMap;
266
- declare const alignItemsMap: {
267
- readonly left: "flex-start";
268
- readonly right: "flex-end";
269
- readonly center: "center";
270
- readonly stretch: "stretch";
271
- };
272
- type AlignItemsMap = typeof alignItemsMap;
273
-
274
- type InlineProps = {
275
- as?: 'div' | 'ul' | 'ol' | 'nav';
276
- children: React.ReactNode;
277
- alignX?: keyof JustifyContentMap;
278
- alignY?: keyof AlignItemsMap;
279
- gap: Atoms['gap'];
280
- display?: ResponsiveDisplayFlex;
281
- } & MarginAndPaddingAtoms;
282
- declare const Inline: React.FC<InlineProps>;
283
-
284
- type StackProps = {
285
- as?: 'div' | 'section' | 'ul' | 'ol';
286
- children: React.ReactNode;
287
- alignX?: keyof AlignItemsMap;
288
- gap: Atoms['gap'];
289
- display?: ResponsiveDisplayFlex;
290
- className?: string;
291
- } & MarginAndPaddingAtoms;
292
- declare const Stack: React.FC<StackProps>;
293
-
294
- type TextProps = {
295
- children: React.ReactNode;
296
- as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
297
- color?: Atoms['color'];
298
- fontSize?: Atoms['fontSize'];
299
- fontWeight?: Atoms['fontWeight'];
300
- fontFamily?: Atoms['fontFamily'];
301
- textAlign?: Atoms['textAlign'];
302
- fontStyle?: Atoms['fontStyle'];
303
- textDecoration?: Atoms['textDecoration'];
304
- lineHeight?: Atoms['lineHeight'];
305
- whiteSpace?: Atoms['whiteSpace'];
306
- wordWrap?: Atoms['wordWrap'];
307
- wordBreak?: Atoms['wordBreak'];
308
- } & MarginAndPaddingAtoms;
309
- declare const Text: React.FC<TextProps>;
310
-
311
- declare const vars: {
312
- space: {
313
- none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
314
- gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
317
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- };
321
- borderRadius: {
322
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
324
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
325
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
- };
327
- color: {
328
- white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
329
- black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
330
- body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
331
- primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
332
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
333
- primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
334
- secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
335
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
336
- secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
337
- text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
338
- textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
339
- textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
340
- caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
341
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
342
- };
343
- borderWidth: {
344
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
346
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
- };
348
- fontFamily: {
349
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
350
- standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
351
- };
352
- fontSize: {
353
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
355
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
356
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
357
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
- };
359
- fontWeight: {
360
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
361
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
362
- strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
363
- };
364
- lineHeight: {
365
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
366
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
367
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
368
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
369
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
370
- };
371
- transition: {
372
- slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
- normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
374
- fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
375
- };
376
- shadow: {
377
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
378
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
379
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
380
- };
381
- };
382
-
383
- type Args = null | undefined | boolean | string;
384
- declare const classnames: (...args: Args[]) => string | undefined;
385
-
386
- declare const theme: {
387
- vars: string;
388
- };
389
-
390
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, theme, vars };
2
+ export { }
@@ -23,6 +23,7 @@ const unresponsiveProperties = {
23
23
  right: [0],
24
24
  textDecoration: ["overline", "line-through", "underline", "none"],
25
25
  textTransform: ["lowercase", "uppercase", "capitalize"],
26
+ textWrap: ["balance", "wrap"],
26
27
  top: [0],
27
28
  transition: styles_lib_css_theme_vars_css_cjs.vars.transition,
28
29
  userSelect: ["none"],
@@ -22,6 +22,7 @@ const unresponsiveProperties = {
22
22
  right: [0],
23
23
  textDecoration: ["overline", "line-through", "underline", "none"],
24
24
  textTransform: ["lowercase", "uppercase", "capitalize"],
25
+ textWrap: ["balance", "wrap"],
25
26
  top: [0],
26
27
  transition: vars.transition,
27
28
  userSelect: ["none"],
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ const makeComponentTheme = (options) => options;
3
+ exports.makeComponentTheme = makeComponentTheme;
@@ -0,0 +1,4 @@
1
+ const makeComponentTheme = (options) => options;
2
+ export {
3
+ makeComponentTheme
4
+ };
@@ -1,10 +1,11 @@
1
1
  "use strict";
2
2
  const css = require("@vanilla-extract/css");
3
- const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
4
3
  const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
4
+ const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
5
5
  const makeTheme = (theme) => {
6
6
  return {
7
- vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens))
7
+ vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
8
+ components: theme.components
8
9
  };
9
10
  };
10
11
  exports.makeTheme = makeTheme;
@@ -1,9 +1,10 @@
1
1
  import { createTheme } from "@vanilla-extract/css";
2
- import { vars } from "./vars.css.mjs";
3
2
  import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
3
+ import { vars } from "./vars.css.mjs";
4
4
  const makeTheme = (theme) => {
5
5
  return {
6
- vars: createTheme(vars, makeVanillaTheme(theme.tokens))
6
+ vars: createTheme(vars, makeVanillaTheme(theme.tokens)),
7
+ components: theme.components
7
8
  };
8
9
  };
9
10
  export {
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ const fileScope = require("@vanilla-extract/css/fileScope");
3
+ const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
4
+ const styles_lib_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.css.cjs");
5
+ fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
6
+ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
7
+ type: "button",
8
+ base: {
9
+ // ...
10
+ borderRadius: "9999px"
11
+ },
12
+ variants: {
13
+ // ...
14
+ variant: {
15
+ solid: {
16
+ color: styles_lib_css_theme_vars_css_cjs.vars.color.primary
17
+ },
18
+ outline: {},
19
+ ghost: {},
20
+ link: {}
21
+ },
22
+ size: {
23
+ small: {},
24
+ medium: {},
25
+ large: {}
26
+ }
27
+ },
28
+ compoundVariants: [
29
+ // ...
30
+ {
31
+ variants: {
32
+ variant: "solid",
33
+ size: "small"
34
+ },
35
+ style: {
36
+ // ...
37
+ }
38
+ }
39
+ ],
40
+ defaultVariants: {
41
+ // ...
42
+ variant: "ghost"
43
+ }
44
+ });
45
+ fileScope.endFileScope();
46
+ exports.button = button;
@@ -0,0 +1,47 @@
1
+ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
3
+ import { vars } from "../../../lib/css/theme/vars.css.mjs";
4
+ setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
5
+ const button = makeComponentTheme({
6
+ type: "button",
7
+ base: {
8
+ // ...
9
+ borderRadius: "9999px"
10
+ },
11
+ variants: {
12
+ // ...
13
+ variant: {
14
+ solid: {
15
+ color: vars.color.primary
16
+ },
17
+ outline: {},
18
+ ghost: {},
19
+ link: {}
20
+ },
21
+ size: {
22
+ small: {},
23
+ medium: {},
24
+ large: {}
25
+ }
26
+ },
27
+ compoundVariants: [
28
+ // ...
29
+ {
30
+ variants: {
31
+ variant: "solid",
32
+ size: "small"
33
+ },
34
+ style: {
35
+ // ...
36
+ }
37
+ }
38
+ ],
39
+ defaultVariants: {
40
+ // ...
41
+ variant: "ghost"
42
+ }
43
+ });
44
+ endFileScope();
45
+ export {
46
+ button
47
+ };
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
3
+ const components = {
4
+ button: styles_themes_momotaro_components_button_css_cjs.button
5
+ };
6
+ exports.components = components;
@@ -0,0 +1,7 @@
1
+ import { button } from "./button.css.mjs";
2
+ const components = {
3
+ button
4
+ };
5
+ export {
6
+ components
7
+ };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ const fileScope = require("@vanilla-extract/css/fileScope");
3
+ const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
4
+ const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
5
+ const styles_themes_momotaro_tokens_cjs = require("./tokens.cjs");
6
+ fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
7
+ const momotaro = styles_lib_css_theme_makeTheme_cjs.makeTheme({
8
+ name: "momotaro",
9
+ tokens: styles_themes_momotaro_tokens_cjs.tokens,
10
+ components: styles_themes_momotaro_components_index_cjs.components
11
+ });
12
+ fileScope.endFileScope();
13
+ exports.momotaro = momotaro;
@@ -1,12 +1,14 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
2
  import { makeTheme } from "../../lib/css/theme/makeTheme.mjs";
3
+ import { components } from "./components/index.mjs";
3
4
  import { tokens } from "./tokens.mjs";
4
- setFileScope("src/themes/momotaro/momotaroTheme.css.ts?used", "blocks");
5
- const theme = makeTheme({
5
+ setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
6
+ const momotaro = makeTheme({
6
7
  name: "momotaro",
7
- tokens
8
+ tokens,
9
+ components
8
10
  });
9
11
  endFileScope();
10
12
  export {
11
- theme
13
+ momotaro
12
14
  };
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const styles_themes_momotaro_momotaroTheme_css_cjs = require("../styles/themes/momotaro/momotaroTheme.css.cjs");
4
- exports.theme = styles_themes_momotaro_momotaroTheme_css_cjs.theme;
3
+ const styles_themes_momotaro_momotaro_css_cjs = require("../styles/themes/momotaro/momotaro.css.cjs");
4
+ exports.momotaro = styles_themes_momotaro_momotaro_css_cjs.momotaro;
@@ -1 +1 @@
1
- export { theme } from '../reset.css.js';
1
+ export { momotaro } from '../momotaro.chunk.js';
@@ -1,4 +1,4 @@
1
- import { theme } from "../styles/themes/momotaro/momotaroTheme.css.mjs";
1
+ import { momotaro } from "../styles/themes/momotaro/momotaro.css.mjs";
2
2
  export {
3
- theme
3
+ momotaro
4
4
  };