@blockle/blocks 0.4.1 → 0.5.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 (15) hide show
  1. package/README.md +12 -3
  2. package/dist/momotaro.chunk.d.ts +35 -32
  3. package/dist/styles/lib/css/theme/makeComponentTheme.cjs +1 -1
  4. package/dist/styles/lib/css/theme/makeComponentTheme.mjs +1 -1
  5. package/dist/styles/themes/momotaro/components/button.css.cjs +1 -4
  6. package/dist/styles/themes/momotaro/components/button.css.mjs +1 -4
  7. package/dist/styles/themes/momotaro/components/dialog.css.cjs +1 -2
  8. package/dist/styles/themes/momotaro/components/dialog.css.mjs +1 -2
  9. package/dist/styles/themes/momotaro/components/divider.css.cjs +1 -2
  10. package/dist/styles/themes/momotaro/components/divider.css.mjs +1 -2
  11. package/dist/styles/themes/momotaro/components/link.css.cjs +1 -2
  12. package/dist/styles/themes/momotaro/components/link.css.mjs +1 -2
  13. package/dist/styles/themes/momotaro/components/spinner.css.cjs +1 -2
  14. package/dist/styles/themes/momotaro/components/spinner.css.mjs +1 -2
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -46,9 +46,18 @@ import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
46
46
 
47
47
  const tokens = makeTokens({ ... });
48
48
 
49
- const button = makeComponentTheme({
50
- type: 'button',
51
- ...
49
+ const button = makeComponentTheme('button', {
50
+ base: style({
51
+ ...
52
+ }),
53
+ variants: {
54
+ primary: style({
55
+ ...
56
+ }),
57
+ secondary: style({
58
+ ...
59
+ })
60
+ },
52
61
  });
53
62
 
54
63
  const theme = makeTheme({
package/dist/momotaro.chunk.d.ts CHANGED
@@ -43,181 +43,181 @@ declare const atoms: ((props: {
43
43
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
44
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
45
45
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
46
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
46
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
47
47
  readonly columnGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
48
48
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
49
49
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
50
50
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
51
51
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
52
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
52
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
53
53
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
54
54
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
55
55
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
56
56
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
57
57
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
58
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
58
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
59
59
  readonly flex?: (1 | {
60
60
  mobile?: 1 | undefined;
61
61
  tablet?: 1 | undefined;
62
62
  desktop?: 1 | undefined;
63
63
  wide?: 1 | undefined;
64
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
64
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
65
65
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
66
66
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
67
67
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
68
68
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
69
69
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
70
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
70
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
71
71
  readonly flexGrow?: (0 | 1 | {
72
72
  mobile?: 0 | 1 | undefined;
73
73
  tablet?: 0 | 1 | undefined;
74
74
  desktop?: 0 | 1 | undefined;
75
75
  wide?: 0 | 1 | undefined;
76
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
76
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
77
77
  readonly flexShrink?: (0 | 1 | {
78
78
  mobile?: 0 | 1 | undefined;
79
79
  tablet?: 0 | 1 | undefined;
80
80
  desktop?: 0 | 1 | undefined;
81
81
  wide?: 0 | 1 | undefined;
82
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
82
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
83
83
  readonly flexWrap?: ("wrap" | "nowrap" | {
84
84
  mobile?: "wrap" | "nowrap" | undefined;
85
85
  tablet?: "wrap" | "nowrap" | undefined;
86
86
  desktop?: "wrap" | "nowrap" | undefined;
87
87
  wide?: "wrap" | "nowrap" | undefined;
88
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
88
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
89
89
  readonly fontSize?: (("small" | "medium" | "large" | "xsmall" | "xlarge") | {
90
90
  mobile?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
91
91
  tablet?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
92
92
  desktop?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
93
93
  wide?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
94
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
94
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
95
95
  readonly gap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
96
96
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
97
97
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
98
98
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
99
99
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
100
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
100
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
101
101
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
102
102
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
103
103
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
104
104
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
105
105
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
106
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
106
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
107
107
  readonly marginBottom?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
108
108
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
109
109
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
110
110
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
111
111
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
112
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
112
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
113
113
  readonly marginLeft?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
114
114
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
115
115
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
116
116
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
117
117
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
118
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
118
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
119
119
  readonly marginRight?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
120
120
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
121
121
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
122
122
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
123
123
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
124
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
124
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
125
125
  readonly marginTop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
126
126
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
127
127
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
128
128
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
129
129
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
130
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
130
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
131
131
  readonly outline?: ("none" | {
132
132
  mobile?: "none" | undefined;
133
133
  tablet?: "none" | undefined;
134
134
  desktop?: "none" | undefined;
135
135
  wide?: "none" | undefined;
136
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
136
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
137
137
  readonly paddingBottom?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
138
138
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
139
139
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
140
140
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
141
141
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
142
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
142
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
143
143
  readonly paddingLeft?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
144
144
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
145
145
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
146
146
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
147
147
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
148
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
148
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
149
149
  readonly paddingRight?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
150
150
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
151
151
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
152
152
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
153
153
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
154
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
154
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
155
155
  readonly paddingTop?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
156
156
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
157
157
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
158
158
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
159
159
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
160
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
160
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
161
161
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
162
162
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
163
163
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
164
164
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
165
165
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
166
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
166
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
167
167
  readonly rowGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
168
168
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
169
169
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
170
170
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
171
171
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
172
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
172
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
173
173
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
174
174
  mobile?: "left" | "right" | "center" | "justify" | undefined;
175
175
  tablet?: "left" | "right" | "center" | "justify" | undefined;
176
176
  desktop?: "left" | "right" | "center" | "justify" | undefined;
177
177
  wide?: "left" | "right" | "center" | "justify" | undefined;
178
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
178
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
179
179
  margin?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
180
180
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
181
181
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
182
182
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
183
183
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
184
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
184
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
185
185
  marginX?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
186
186
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
187
187
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
188
188
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
189
189
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
190
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
190
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
191
191
  marginY?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
192
192
  mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
193
193
  tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
194
194
  desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
195
195
  wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
196
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
196
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
197
197
  padding?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
198
198
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
199
199
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
200
200
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
201
201
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
202
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
202
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
203
203
  paddingX?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
204
204
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
205
205
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
206
206
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
207
207
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
208
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
208
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
209
209
  paddingY?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
210
210
  mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
211
211
  tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
212
212
  desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
213
213
  wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
214
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
214
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
215
215
  placeItems?: ("center" | "flex-start" | "flex-end" | {
216
216
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
217
217
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
218
218
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
219
219
  wide?: "center" | "flex-start" | "flex-end" | undefined;
220
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
220
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
221
221
  }) => string) & {
222
222
  properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "backgroundColor" | "bottom" | "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" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
223
223
  };
@@ -269,7 +269,7 @@ type CreateComponentTheme<T extends Theme$1> = {
269
269
  compoundVariants?: Array<{
270
270
  style: string;
271
271
  variants: {
272
- [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup];
272
+ [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
273
273
  };
274
274
  }>;
275
275
  defaultVariants?: {
@@ -282,14 +282,17 @@ type CreateThemeProps<T extends Theme$1> = {
282
282
  type: T['type'];
283
283
  base?: boolean;
284
284
  };
285
- declare const makeComponentTheme: <T extends ComponentThemes>(options: T) => T;
285
+ declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
286
286
 
287
287
  type ButtonTheme = {
288
288
  type: 'button';
289
+ base: boolean;
289
290
  variants: {
290
291
  variant: 'solid' | 'outline' | 'ghost' | 'link';
291
292
  intent: 'neutral' | 'danger';
292
293
  size: 'small' | 'medium' | 'large';
294
+ loading: boolean;
295
+ disabled: boolean;
293
296
  };
294
297
  };
295
298
  type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
package/dist/styles/lib/css/theme/makeComponentTheme.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const makeComponentTheme = (options) => options;
2
+ const makeComponentTheme = (name, options) => options;
3
3
  exports.makeComponentTheme = makeComponentTheme;
package/dist/styles/lib/css/theme/makeComponentTheme.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const makeComponentTheme = (options) => options;
1
+ const makeComponentTheme = (name, options) => options;
2
2
  export {
3
3
  makeComponentTheme
4
4
  };
package/dist/styles/themes/momotaro/components/button.css.cjs CHANGED
@@ -7,8 +7,7 @@ const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css
7
7
  const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
8
8
  fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
9
9
  const primaryColor = css.createVar("primaryColor");
10
- const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
11
- type: "button",
10
+ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
12
11
  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
13
12
  display: "inline-flex",
14
13
  placeItems: "center",
@@ -17,8 +16,6 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
17
16
  fontWeight: "medium"
18
17
  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "button_base"),
19
18
  variants: {
20
- // ...
21
- // styleVariants could be used to but lacks correct typings atm
22
19
  variant: {
23
20
  solid: css.style({
24
21
  color: styles_lib_css_theme_vars_css_cjs.vars.color.white,
package/dist/styles/themes/momotaro/components/button.css.mjs CHANGED
@@ -6,8 +6,7 @@ import { focusable } from "./helpers.css.mjs";
6
6
  import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
7
7
  setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
8
8
  const primaryColor = createVar("primaryColor");
9
- const button = makeComponentTheme({
10
- type: "button",
9
+ const button = makeComponentTheme("button", {
11
10
  base: style([atoms({
12
11
  display: "inline-flex",
13
12
  placeItems: "center",
@@ -16,8 +15,6 @@ const button = makeComponentTheme({
16
15
  fontWeight: "medium"
17
16
  }), focusable], "button_base"),
18
17
  variants: {
19
- // ...
20
- // styleVariants could be used to but lacks correct typings atm
21
18
  variant: {
22
19
  solid: style({
23
20
  color: vars.color.white,
package/dist/styles/themes/momotaro/components/dialog.css.cjs CHANGED
@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
4
4
  const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
5
5
  const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
6
6
  fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
7
- const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
8
- type: "dialog",
7
+ const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
9
8
  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
10
9
  display: "flex",
11
10
  flexDirection: "column",
package/dist/styles/themes/momotaro/components/dialog.css.mjs CHANGED
@@ -3,8 +3,7 @@ import { style } from "@vanilla-extract/css";
3
3
  import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
4
4
  import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
5
5
  setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
6
- const dialog = makeComponentTheme({
7
- type: "dialog",
6
+ const dialog = makeComponentTheme("dialog", {
8
7
  base: style([atoms({
9
8
  display: "flex",
10
9
  flexDirection: "column",
package/dist/styles/themes/momotaro/components/divider.css.cjs CHANGED
@@ -2,8 +2,7 @@
2
2
  const fileScope = require("@vanilla-extract/css/fileScope");
3
3
  const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
4
4
  fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
5
- const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
6
- type: "divider",
5
+ const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
7
6
  defaultVariants: {
8
7
  color: "textLight"
9
8
  }
package/dist/styles/themes/momotaro/components/divider.css.mjs CHANGED
@@ -1,8 +1,7 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
2
  import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
3
3
  setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
4
- const divider = makeComponentTheme({
5
- type: "divider",
4
+ const divider = makeComponentTheme("divider", {
6
5
  defaultVariants: {
7
6
  color: "textLight"
8
7
  }
package/dist/styles/themes/momotaro/components/link.css.cjs CHANGED
@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
4
4
  const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
5
5
  const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
6
6
  fileScope.setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
7
- const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
8
- type: "link",
7
+ const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
9
8
  base: css.style({
10
9
  outline: "none",
11
10
  border: "none",
package/dist/styles/themes/momotaro/components/link.css.mjs CHANGED
@@ -3,8 +3,7 @@ import { style } from "@vanilla-extract/css";
3
3
  import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
4
4
  import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
5
5
  setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
6
- const link = makeComponentTheme({
7
- type: "link",
6
+ const link = makeComponentTheme("link", {
8
7
  base: style({
9
8
  outline: "none",
10
9
  border: "none",
package/dist/styles/themes/momotaro/components/spinner.css.cjs CHANGED
@@ -11,8 +11,7 @@ const spinAnimation = css.keyframes({
11
11
  transform: "rotate(360deg)"
12
12
  }
13
13
  }, "spinAnimation");
14
- const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
15
- type: "spinner",
14
+ const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
16
15
  base: css.style({
17
16
  aspectRatio: "1 / 1",
18
17
  overflow: "hidden",
package/dist/styles/themes/momotaro/components/spinner.css.mjs CHANGED
@@ -10,8 +10,7 @@ const spinAnimation = keyframes({
10
10
  transform: "rotate(360deg)"
11
11
  }
12
12
  }, "spinAnimation");
13
- const spinner = makeComponentTheme({
14
- type: "spinner",
13
+ const spinner = makeComponentTheme("spinner", {
15
14
  base: style({
16
15
  aspectRatio: "1 / 1",
17
16
  overflow: "hidden",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "description": "Blocks design system",
5
5
  "repository": "git@github.com:Blockle/blocks.git",
6
6
  "license": "MIT",