@blockle/blocks 0.2.2 → 0.3.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 (43) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +134 -6
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.mjs +136 -6
  5. package/dist/momotaro.chunk.d.ts +516 -0
  6. package/dist/reset.css.cjs +0 -1
  7. package/dist/reset.css.d.ts +1 -408
  8. package/dist/reset.css.mjs +0 -1
  9. package/dist/styles/components/Button/Button.css.cjs +15 -0
  10. package/dist/styles/components/Button/Button.css.mjs +16 -0
  11. package/dist/styles/lib/css/atoms/index.cjs +1 -0
  12. package/dist/styles/lib/css/atoms/index.mjs +1 -0
  13. package/dist/styles/lib/css/layers/layers.css.cjs +7 -0
  14. package/dist/styles/lib/css/layers/layers.css.mjs +8 -0
  15. package/dist/styles/lib/css/reset/reset.css.cjs +0 -36
  16. package/dist/styles/lib/css/reset/reset.css.mjs +1 -36
  17. package/dist/styles/lib/css/theme/makeComponentTheme.cjs +3 -0
  18. package/dist/styles/lib/css/theme/makeComponentTheme.mjs +4 -0
  19. package/dist/styles/lib/css/theme/makeTheme.cjs +3 -2
  20. package/dist/styles/lib/css/theme/makeTheme.mjs +3 -2
  21. package/dist/styles/lib/css/theme/makeVanillaTheme.cjs +5 -2
  22. package/dist/styles/lib/css/theme/makeVanillaTheme.mjs +5 -2
  23. package/dist/styles/lib/css/theme/tokens.cjs +5 -2
  24. package/dist/styles/lib/css/theme/tokens.mjs +5 -2
  25. package/dist/styles/themes/momotaro/components/button.css.cjs +106 -0
  26. package/dist/styles/themes/momotaro/components/button.css.mjs +107 -0
  27. package/dist/styles/themes/momotaro/components/helpers.css.cjs +26 -0
  28. package/dist/styles/themes/momotaro/components/helpers.css.mjs +27 -0
  29. package/dist/styles/themes/momotaro/components/index.cjs +10 -0
  30. package/dist/styles/themes/momotaro/components/index.mjs +11 -0
  31. package/dist/styles/themes/momotaro/components/link.css.cjs +47 -0
  32. package/dist/styles/themes/momotaro/components/link.css.mjs +48 -0
  33. package/dist/styles/themes/momotaro/components/spinner.css.cjs +44 -0
  34. package/dist/styles/themes/momotaro/components/spinner.css.mjs +45 -0
  35. package/dist/styles/themes/momotaro/momotaro.css.cjs +13 -0
  36. package/dist/styles/themes/momotaro/{momotaroTheme.css.mjs → momotaro.css.mjs} +6 -4
  37. package/dist/styles/themes/momotaro/tokens.cjs +5 -2
  38. package/dist/styles/themes/momotaro/tokens.mjs +5 -2
  39. package/dist/themes/momotaro.cjs +2 -2
  40. package/dist/themes/momotaro.d.ts +1 -1
  41. package/dist/themes/momotaro.mjs +2 -2
  42. package/package.json +49 -20
  43. package/dist/styles/themes/momotaro/momotaroTheme.css.cjs +0 -11
@@ -0,0 +1,516 @@
1
+ import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
2
+ import * as react from 'react';
3
+ import { HTMLProps, ReactNode, FC } from 'react';
4
+ import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
+
6
+ declare const atoms: ((props: {
7
+ readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
8
+ readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
9
+ readonly bottom?: 0 | undefined;
10
+ readonly boxShadow?: ("large" | "medium" | "small") | undefined;
11
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
12
+ readonly cursor?: "auto" | "pointer" | undefined;
13
+ readonly fontFamily?: "secondary" | "standard" | undefined;
14
+ readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
15
+ readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
16
+ readonly height?: "auto" | "full" | undefined;
17
+ readonly left?: 0 | undefined;
18
+ readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
19
+ readonly maxHeight?: "full" | undefined;
20
+ readonly maxWidth?: "full" | undefined;
21
+ readonly opacity?: 0 | 1 | undefined;
22
+ readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
23
+ readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
24
+ readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
25
+ readonly pointerEvents?: "none" | undefined;
26
+ readonly right?: 0 | undefined;
27
+ readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
28
+ readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
29
+ readonly textWrap?: "balance" | "wrap" | undefined;
30
+ readonly top?: 0 | undefined;
31
+ readonly transition?: ("normal" | "slow" | "fast") | undefined;
32
+ readonly userSelect?: "none" | undefined;
33
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
34
+ readonly width?: "auto" | "fit-content" | "full" | undefined;
35
+ readonly wordBreak?: "break-word" | undefined;
36
+ readonly wordWrap?: "break-word" | undefined;
37
+ inset?: 0 | undefined;
38
+ } & {
39
+ readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
40
+ mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
41
+ tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
42
+ desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
43
+ wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
45
+ readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
46
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
47
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
48
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
49
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
50
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
51
+ readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
52
+ mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
53
+ tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
54
+ desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
55
+ wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
56
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
57
+ readonly flex?: (1 | {
58
+ mobile?: 1 | undefined;
59
+ tablet?: 1 | undefined;
60
+ desktop?: 1 | undefined;
61
+ wide?: 1 | undefined;
62
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 1 | null>;
63
+ readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
64
+ mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
65
+ tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
66
+ desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
67
+ wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
68
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
69
+ readonly flexGrow?: (0 | 1 | {
70
+ mobile?: 0 | 1 | undefined;
71
+ tablet?: 0 | 1 | undefined;
72
+ desktop?: 0 | 1 | undefined;
73
+ wide?: 0 | 1 | undefined;
74
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 0 | 1 | null>;
75
+ readonly flexShrink?: (0 | 1 | {
76
+ mobile?: 0 | 1 | undefined;
77
+ tablet?: 0 | 1 | undefined;
78
+ desktop?: 0 | 1 | undefined;
79
+ wide?: 0 | 1 | undefined;
80
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 0 | 1 | null>;
81
+ readonly flexWrap?: ("nowrap" | "wrap" | {
82
+ mobile?: "nowrap" | "wrap" | undefined;
83
+ tablet?: "nowrap" | "wrap" | undefined;
84
+ desktop?: "nowrap" | "wrap" | undefined;
85
+ wide?: "nowrap" | "wrap" | undefined;
86
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "nowrap" | "wrap" | null>;
87
+ readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
88
+ mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
89
+ tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
90
+ desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
91
+ wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
92
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
93
+ readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
94
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
95
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
96
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
97
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
98
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
99
+ readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
100
+ mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
101
+ tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
102
+ desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
103
+ wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
104
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
105
+ readonly marginBottom?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
106
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
107
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
108
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
109
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
110
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
111
+ readonly marginLeft?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
112
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
113
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
114
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
115
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
116
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
117
+ readonly marginRight?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
118
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
119
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
120
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
121
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
122
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
123
+ readonly marginTop?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
124
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
125
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
126
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
127
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
128
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
129
+ readonly outline?: ("none" | {
130
+ mobile?: "none" | undefined;
131
+ tablet?: "none" | undefined;
132
+ desktop?: "none" | undefined;
133
+ wide?: "none" | undefined;
134
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | null>;
135
+ readonly paddingBottom?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
136
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
137
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
138
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
139
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
140
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
141
+ readonly paddingLeft?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
142
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
143
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
144
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
145
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
146
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
147
+ readonly paddingRight?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
148
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
149
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
150
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
151
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
152
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
153
+ readonly paddingTop?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
154
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
155
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
156
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
157
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
158
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
159
+ readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
160
+ mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
161
+ tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
162
+ desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
163
+ wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
164
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
165
+ readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
166
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
167
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
168
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
169
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
170
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
171
+ readonly textAlign?: ("left" | "right" | "center" | "justify" | {
172
+ mobile?: "left" | "right" | "center" | "justify" | undefined;
173
+ tablet?: "left" | "right" | "center" | "justify" | undefined;
174
+ desktop?: "left" | "right" | "center" | "justify" | undefined;
175
+ wide?: "left" | "right" | "center" | "justify" | undefined;
176
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
177
+ margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
178
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
179
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
180
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
181
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
182
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
183
+ marginX?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
184
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
185
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
186
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
187
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
188
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
189
+ marginY?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
190
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
191
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
192
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
193
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
194
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
195
+ padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
196
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
197
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
198
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
199
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
200
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
201
+ paddingX?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
202
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
203
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
204
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
205
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
206
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
207
+ paddingY?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
208
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
209
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
210
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
211
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
212
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
213
+ placeItems?: ("center" | "flex-start" | "flex-end" | {
214
+ mobile?: "center" | "flex-start" | "flex-end" | undefined;
215
+ tablet?: "center" | "flex-start" | "flex-end" | undefined;
216
+ desktop?: "center" | "flex-start" | "flex-end" | undefined;
217
+ wide?: "center" | "flex-start" | "flex-end" | undefined;
218
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
219
+ }) => string) & {
220
+ properties: Set<"alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "color" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "justifyContent" | "left" | "lineHeight" | "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" | "borderRadius" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "transition" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
221
+ };
222
+
223
+ type Atoms = Parameters<typeof atoms>[0];
224
+ type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
225
+ type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
226
+ type MarginAtoms = {
227
+ margin?: Atoms['margin'];
228
+ marginLeft?: Atoms['marginLeft'];
229
+ marginRight?: Atoms['marginRight'];
230
+ marginTop?: Atoms['marginTop'];
231
+ marginBottom?: Atoms['marginBottom'];
232
+ marginX?: Atoms['marginX'];
233
+ marginY?: Atoms['marginY'];
234
+ };
235
+ type PaddingAtoms = {
236
+ padding?: Atoms['padding'];
237
+ paddingLeft?: Atoms['paddingLeft'];
238
+ paddingRight?: Atoms['paddingRight'];
239
+ paddingTop?: Atoms['paddingTop'];
240
+ paddingBottom?: Atoms['paddingBottom'];
241
+ paddingX?: Atoms['paddingX'];
242
+ paddingY?: Atoms['paddingY'];
243
+ };
244
+ type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
245
+
246
+ type Theme = {
247
+ type: string;
248
+ variants?: Record<string, string | boolean>;
249
+ };
250
+ type CreateComponentTheme<T extends Theme> = {
251
+ type: T['type'];
252
+ base?: string;
253
+ variants?: {
254
+ [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? {
255
+ [Variant in T['variants'][VariantGroup]]?: string;
256
+ } : string;
257
+ };
258
+ compoundVariants?: Array<{
259
+ style: string;
260
+ variants: {
261
+ [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup];
262
+ };
263
+ }>;
264
+ defaultVariants?: {
265
+ [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
266
+ };
267
+ };
268
+
269
+ type ButtonTheme = {
270
+ type: 'button';
271
+ variants: {
272
+ variant: 'solid' | 'outline' | 'ghost' | 'link';
273
+ intent: 'neutral' | 'danger';
274
+ size: 'small' | 'medium' | 'large';
275
+ };
276
+ };
277
+ type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
278
+ type LinkTheme = {
279
+ type: 'link';
280
+ variants: {
281
+ variant: 'inherit' | 'primary' | 'secondary';
282
+ underline: boolean;
283
+ };
284
+ };
285
+ type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
286
+ type SpinnerTheme = {
287
+ type: 'spinner';
288
+ variants: {
289
+ size: 'small' | 'medium' | 'large';
290
+ color: Exclude<Atoms['color'], undefined>;
291
+ };
292
+ };
293
+ type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
294
+ type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent;
295
+ type ComponentThemesMap = UnionThemesToRecord<ComponentThemes>;
296
+ type UnionThemesToRecord<T extends {
297
+ type: string;
298
+ }> = {
299
+ [P in T['type']]: Omit<Extract<T, {
300
+ type: P;
301
+ }>, 'type'>;
302
+ };
303
+
304
+ type BlocksProviderContextData = {
305
+ vars: string;
306
+ components: ComponentThemesMap;
307
+ };
308
+
309
+ type BlocksProviderProps = {
310
+ children: React.ReactNode;
311
+ theme: BlocksProviderContextData;
312
+ };
313
+ declare const BlocksProvider: React.FC<BlocksProviderProps>;
314
+
315
+ type BoxProps = {
316
+ children?: React.ReactNode;
317
+ className?: string;
318
+ } & Atoms;
319
+ type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
320
+ declare const Box: PolymorphicBox;
321
+
322
+ type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
323
+
324
+ type ButtonProps = {
325
+ children: ReactNode;
326
+ type?: 'button' | 'submit' | 'reset';
327
+ variant?: ButtonTheme['variants']['variant'];
328
+ intent?: ButtonTheme['variants']['intent'];
329
+ size?: ButtonTheme['variants']['size'];
330
+ width?: Atoms['width'];
331
+ loading?: boolean;
332
+ startSlot?: ReactNode;
333
+ endSlot?: ReactNode;
334
+ disabled?: boolean;
335
+ } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'>;
336
+ declare const Button: react.ForwardRefExoticComponent<{
337
+ children: ReactNode;
338
+ type?: "button" | "submit" | "reset" | undefined;
339
+ variant?: "outline" | "link" | "solid" | "ghost" | undefined;
340
+ intent?: "danger" | "neutral" | undefined;
341
+ size?: "large" | "medium" | "small" | undefined;
342
+ width?: Atoms['width'];
343
+ loading?: boolean | undefined;
344
+ startSlot?: ReactNode;
345
+ endSlot?: ReactNode;
346
+ disabled?: boolean | undefined;
347
+ } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
348
+
349
+ type HeadingProps = {
350
+ className?: string;
351
+ level: 1 | 2 | 3 | 4 | 5 | 6;
352
+ children: React.ReactNode;
353
+ align?: Atoms['textAlign'];
354
+ fontSize?: Atoms['fontSize'];
355
+ fontWeight?: Atoms['fontWeight'];
356
+ fontFamily?: Atoms['fontFamily'];
357
+ } & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
358
+ declare const Heading: React.FC<HeadingProps>;
359
+
360
+ declare const justifyContentMap: {
361
+ readonly left: "flex-start";
362
+ readonly right: "flex-end";
363
+ readonly center: "center";
364
+ readonly between: "space-between";
365
+ readonly around: "space-around";
366
+ };
367
+ type JustifyContentMap = typeof justifyContentMap;
368
+ declare const alignItemsMap: {
369
+ readonly left: "flex-start";
370
+ readonly right: "flex-end";
371
+ readonly center: "center";
372
+ readonly stretch: "stretch";
373
+ };
374
+ type AlignItemsMap = typeof alignItemsMap;
375
+
376
+ type InlineProps = {
377
+ as?: 'div' | 'ul' | 'ol' | 'nav';
378
+ children: React.ReactNode;
379
+ alignX?: keyof JustifyContentMap;
380
+ alignY?: keyof AlignItemsMap;
381
+ gap: Atoms['gap'];
382
+ display?: ResponsiveDisplayFlex;
383
+ } & MarginAndPaddingAtoms;
384
+ declare const Inline: React.FC<InlineProps>;
385
+
386
+ type StackProps = {
387
+ as?: 'div' | 'section' | 'ul' | 'ol';
388
+ children: React.ReactNode;
389
+ alignX?: keyof AlignItemsMap;
390
+ gap: Atoms['gap'];
391
+ display?: ResponsiveDisplayFlex;
392
+ className?: string;
393
+ /**
394
+ * Start prop is only valid when as="ol"
395
+ */
396
+ start?: number;
397
+ } & MarginAndPaddingAtoms;
398
+ declare const Stack: React.FC<StackProps>;
399
+
400
+ type TextProps = {
401
+ children: React.ReactNode;
402
+ as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
403
+ color?: Atoms['color'];
404
+ fontSize?: Atoms['fontSize'];
405
+ fontWeight?: Atoms['fontWeight'];
406
+ fontFamily?: Atoms['fontFamily'];
407
+ textAlign?: Atoms['textAlign'];
408
+ fontStyle?: Atoms['fontStyle'];
409
+ textDecoration?: Atoms['textDecoration'];
410
+ lineHeight?: Atoms['lineHeight'];
411
+ whiteSpace?: Atoms['whiteSpace'];
412
+ wordWrap?: Atoms['wordWrap'];
413
+ wordBreak?: Atoms['wordBreak'];
414
+ } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
415
+ declare const Text: React.FC<TextProps>;
416
+
417
+ type LinkProps = {
418
+ variant: LinkTheme['variants']['variant'];
419
+ underline?: LinkTheme['variants']['underline'];
420
+ children?: ReactNode;
421
+ className?: string;
422
+ } & Atoms & HTMLElementProps<HTMLAnchorElement>;
423
+ type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
424
+ declare const Link: PolymorphicLink;
425
+
426
+ type SpinnerProps = {
427
+ className?: string;
428
+ size?: SpinnerTheme['variants']['size'];
429
+ color?: SpinnerTheme['variants']['color'];
430
+ } & MarginAtoms;
431
+ declare const Spinner: FC<SpinnerProps>;
432
+
433
+ declare const vars: {
434
+ space: {
435
+ none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
436
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
437
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
438
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
439
+ gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
440
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
441
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
442
+ };
443
+ borderRadius: {
444
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
445
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
446
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
447
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
448
+ };
449
+ color: {
450
+ white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
451
+ black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
452
+ body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
453
+ primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
454
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
455
+ primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
456
+ secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
457
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
458
+ secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
459
+ text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
460
+ textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
461
+ textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
462
+ danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
463
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
464
+ };
465
+ borderWidth: {
466
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
467
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
468
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
469
+ };
470
+ fontFamily: {
471
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
472
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
473
+ };
474
+ fontSize: {
475
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
476
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
477
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
478
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
479
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
480
+ };
481
+ fontWeight: {
482
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
483
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
484
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
485
+ };
486
+ lineHeight: {
487
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
488
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
489
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
490
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
491
+ xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
492
+ };
493
+ transition: {
494
+ normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
495
+ slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
496
+ fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
+ };
498
+ shadow: {
499
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
500
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
501
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
502
+ };
503
+ focus: {
504
+ boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
505
+ };
506
+ };
507
+
508
+ type Args = null | undefined | boolean | string;
509
+ declare const classnames: (...args: Args[]) => string | undefined;
510
+
511
+ declare const momotaro: {
512
+ vars: string;
513
+ components: ComponentThemesMap;
514
+ };
515
+
516
+ export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, classnames, momotaro, vars };
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
2
  const fileScope = require("@vanilla-extract/css/fileScope");
3
- require("./styles/lib/css/reset/reset.css.cjs");
4
3
  fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
5
4
  fileScope.endFileScope();