@blockle/blocks 0.5.1 → 0.6.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.
- package/dist/index.cjs +90 -41
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +88 -39
- package/dist/momotaro.chunk.d.ts +261 -220
- package/dist/styles/components/Input/input.css.cjs +14 -0
- package/dist/styles/components/Input/input.css.mjs +15 -0
- package/dist/styles/lib/css/atoms/atomicProperties.cjs +17 -17
- package/dist/styles/lib/css/atoms/atomicProperties.mjs +1 -1
- package/dist/styles/lib/theme/makeComponentTheme.cjs +5 -0
- package/dist/styles/lib/theme/makeComponentTheme.mjs +6 -0
- package/dist/styles/lib/theme/makeTheme.cjs +12 -0
- package/dist/styles/lib/{css/theme → theme}/makeTheme.mjs +3 -2
- package/dist/styles/lib/theme/vars.css.cjs +9 -0
- package/dist/styles/lib/{css/theme → theme}/vars.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/button.css.cjs +21 -12
- package/dist/styles/themes/momotaro/components/button.css.mjs +14 -5
- package/dist/styles/themes/momotaro/components/dialog.css.cjs +25 -6
- package/dist/styles/themes/momotaro/components/dialog.css.mjs +24 -5
- package/dist/styles/themes/momotaro/components/divider.css.cjs +2 -2
- package/dist/styles/themes/momotaro/components/divider.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/helpers.css.cjs +8 -6
- package/dist/styles/themes/momotaro/components/helpers.css.mjs +6 -4
- package/dist/styles/themes/momotaro/components/index.cjs +5 -3
- package/dist/styles/themes/momotaro/components/index.mjs +5 -3
- package/dist/styles/themes/momotaro/components/input.css.cjs +40 -0
- package/dist/styles/themes/momotaro/components/input.css.mjs +41 -0
- package/dist/styles/themes/momotaro/components/link.css.cjs +5 -4
- package/dist/styles/themes/momotaro/components/link.css.mjs +4 -3
- package/dist/styles/themes/momotaro/components/spinner.css.cjs +2 -2
- package/dist/styles/themes/momotaro/components/spinner.css.mjs +1 -1
- package/dist/styles/themes/momotaro/momotaro.css.cjs +2 -2
- package/dist/styles/themes/momotaro/momotaro.css.mjs +1 -1
- package/dist/styles/themes/momotaro/tokens.css.cjs +4 -4
- package/dist/styles/themes/momotaro/tokens.css.mjs +4 -4
- package/package.json +1 -1
- package/dist/styles/lib/css/theme/makeComponentTheme.cjs +0 -3
- package/dist/styles/lib/css/theme/makeComponentTheme.mjs +0 -4
- package/dist/styles/lib/css/theme/makeTheme.cjs +0 -11
- package/dist/styles/lib/css/theme/vars.css.cjs +0 -9
- /package/dist/styles/lib/{css/theme → theme}/makeVanillaTheme.cjs +0 -0
- /package/dist/styles/lib/{css/theme → theme}/makeVanillaTheme.mjs +0 -0
- /package/dist/styles/lib/{css/theme → theme}/tokens.cjs +0 -0
- /package/dist/styles/lib/{css/theme → theme}/tokens.mjs +0 -0
package/dist/momotaro.chunk.d.ts
CHANGED
|
@@ -4,20 +4,20 @@ import { HTMLProps, ReactNode, FC } from 'react';
|
|
|
4
4
|
import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
|
|
5
5
|
|
|
6
6
|
declare const atoms: ((props: {
|
|
7
|
-
readonly backgroundColor?: "link" | "
|
|
8
|
-
readonly borderColor?: "link" | "
|
|
7
|
+
readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
|
|
8
|
+
readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
|
|
9
9
|
readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
|
|
10
10
|
readonly border?: "none" | undefined;
|
|
11
11
|
readonly bottom?: 0 | undefined;
|
|
12
12
|
readonly boxShadow?: ("small" | "medium" | "large") | undefined;
|
|
13
|
-
readonly color?: "link" | "
|
|
13
|
+
readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
|
|
14
14
|
readonly cursor?: "auto" | "pointer" | undefined;
|
|
15
|
-
readonly fontFamily?: "primary" | "secondary" | undefined;
|
|
15
|
+
readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
|
|
16
16
|
readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
|
|
17
17
|
readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
|
|
18
18
|
readonly height?: "auto" | "full" | undefined;
|
|
19
19
|
readonly left?: 0 | undefined;
|
|
20
|
-
readonly lineHeight?: ("
|
|
20
|
+
readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
21
21
|
readonly maxHeight?: "full" | undefined;
|
|
22
22
|
readonly maxWidth?: "full" | undefined;
|
|
23
23
|
readonly opacity?: 0 | 1 | undefined;
|
|
@@ -26,13 +26,13 @@ declare const atoms: ((props: {
|
|
|
26
26
|
readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
|
|
27
27
|
readonly pointerEvents?: "none" | undefined;
|
|
28
28
|
readonly right?: 0 | undefined;
|
|
29
|
-
readonly textDecoration?: "
|
|
29
|
+
readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
|
|
30
30
|
readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
|
|
31
31
|
readonly textWrap?: "balance" | "wrap" | undefined;
|
|
32
32
|
readonly top?: 0 | undefined;
|
|
33
33
|
readonly transition?: ("slow" | "normal" | "fast") | undefined;
|
|
34
34
|
readonly userSelect?: "none" | undefined;
|
|
35
|
-
readonly whiteSpace?: "
|
|
35
|
+
readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
|
|
36
36
|
readonly width?: "auto" | "fit-content" | "full" | undefined;
|
|
37
37
|
readonly wordBreak?: "break-word" | undefined;
|
|
38
38
|
readonly wordWrap?: "break-word" | undefined;
|
|
@@ -43,195 +43,195 @@ 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<4 |
|
|
46
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
47
47
|
readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
|
|
48
48
|
mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
49
49
|
tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
50
50
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
51
51
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
52
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
52
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
53
53
|
readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
|
|
54
54
|
mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
55
55
|
tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
56
56
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
57
57
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
58
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
59
|
-
readonly columnGap?: (("
|
|
60
|
-
mobile?: ("
|
|
61
|
-
tablet?: ("
|
|
62
|
-
desktop?: ("
|
|
63
|
-
wide?: ("
|
|
64
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
58
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
59
|
+
readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
60
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
61
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
62
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
63
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
64
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
65
65
|
readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
|
|
66
66
|
mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
67
67
|
tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
68
68
|
desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
69
69
|
wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
70
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
70
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
|
|
71
71
|
readonly flex?: (1 | {
|
|
72
72
|
mobile?: 1 | undefined;
|
|
73
73
|
tablet?: 1 | undefined;
|
|
74
74
|
desktop?: 1 | undefined;
|
|
75
75
|
wide?: 1 | undefined;
|
|
76
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
76
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
|
|
77
77
|
readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
|
|
78
78
|
mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
79
79
|
tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
80
80
|
desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
81
81
|
wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
82
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
82
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
|
|
83
83
|
readonly flexGrow?: (0 | 1 | {
|
|
84
84
|
mobile?: 0 | 1 | undefined;
|
|
85
85
|
tablet?: 0 | 1 | undefined;
|
|
86
86
|
desktop?: 0 | 1 | undefined;
|
|
87
87
|
wide?: 0 | 1 | undefined;
|
|
88
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
88
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
|
|
89
89
|
readonly flexShrink?: (0 | 1 | {
|
|
90
90
|
mobile?: 0 | 1 | undefined;
|
|
91
91
|
tablet?: 0 | 1 | undefined;
|
|
92
92
|
desktop?: 0 | 1 | undefined;
|
|
93
93
|
wide?: 0 | 1 | undefined;
|
|
94
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
95
|
-
readonly flexWrap?: ("
|
|
96
|
-
mobile?: "
|
|
97
|
-
tablet?: "
|
|
98
|
-
desktop?: "
|
|
99
|
-
wide?: "
|
|
100
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
101
|
-
readonly fontSize?: (("
|
|
102
|
-
mobile?: ("
|
|
103
|
-
tablet?: ("
|
|
104
|
-
desktop?: ("
|
|
105
|
-
wide?: ("
|
|
106
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
107
|
-
readonly gap?: (("
|
|
108
|
-
mobile?: ("
|
|
109
|
-
tablet?: ("
|
|
110
|
-
desktop?: ("
|
|
111
|
-
wide?: ("
|
|
112
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
94
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
|
|
95
|
+
readonly flexWrap?: ("nowrap" | "wrap" | {
|
|
96
|
+
mobile?: "nowrap" | "wrap" | undefined;
|
|
97
|
+
tablet?: "nowrap" | "wrap" | undefined;
|
|
98
|
+
desktop?: "nowrap" | "wrap" | undefined;
|
|
99
|
+
wide?: "nowrap" | "wrap" | undefined;
|
|
100
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
|
|
101
|
+
readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
102
|
+
mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
103
|
+
tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
104
|
+
desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
105
|
+
wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
106
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
107
|
+
readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
108
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
109
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
110
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
111
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
112
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
113
113
|
readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
|
|
114
114
|
mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
115
115
|
tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
116
116
|
desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
117
117
|
wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
118
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
119
|
-
readonly marginBottom?: ("
|
|
120
|
-
mobile?: "
|
|
121
|
-
tablet?: "
|
|
122
|
-
desktop?: "
|
|
123
|
-
wide?: "
|
|
124
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
125
|
-
readonly marginLeft?: ("
|
|
126
|
-
mobile?: "
|
|
127
|
-
tablet?: "
|
|
128
|
-
desktop?: "
|
|
129
|
-
wide?: "
|
|
130
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
131
|
-
readonly marginRight?: ("
|
|
132
|
-
mobile?: "
|
|
133
|
-
tablet?: "
|
|
134
|
-
desktop?: "
|
|
135
|
-
wide?: "
|
|
136
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
137
|
-
readonly marginTop?: ("
|
|
138
|
-
mobile?: "
|
|
139
|
-
tablet?: "
|
|
140
|
-
desktop?: "
|
|
141
|
-
wide?: "
|
|
142
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
118
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
|
|
119
|
+
readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
120
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
121
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
122
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
123
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
124
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
125
|
+
readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
126
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
127
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
128
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
129
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
130
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
131
|
+
readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
132
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
133
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
134
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
135
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
136
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
137
|
+
readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
138
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
139
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
140
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
141
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
142
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
143
143
|
readonly outline?: ("none" | {
|
|
144
144
|
mobile?: "none" | undefined;
|
|
145
145
|
tablet?: "none" | undefined;
|
|
146
146
|
desktop?: "none" | undefined;
|
|
147
147
|
wide?: "none" | undefined;
|
|
148
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
149
|
-
readonly paddingBottom?: (("
|
|
150
|
-
mobile?: ("
|
|
151
|
-
tablet?: ("
|
|
152
|
-
desktop?: ("
|
|
153
|
-
wide?: ("
|
|
154
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
155
|
-
readonly paddingLeft?: (("
|
|
156
|
-
mobile?: ("
|
|
157
|
-
tablet?: ("
|
|
158
|
-
desktop?: ("
|
|
159
|
-
wide?: ("
|
|
160
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
161
|
-
readonly paddingRight?: (("
|
|
162
|
-
mobile?: ("
|
|
163
|
-
tablet?: ("
|
|
164
|
-
desktop?: ("
|
|
165
|
-
wide?: ("
|
|
166
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
167
|
-
readonly paddingTop?: (("
|
|
168
|
-
mobile?: ("
|
|
169
|
-
tablet?: ("
|
|
170
|
-
desktop?: ("
|
|
171
|
-
wide?: ("
|
|
172
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
148
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
|
|
149
|
+
readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
150
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
151
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
152
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
153
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
154
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
155
|
+
readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
156
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
157
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
158
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
159
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
160
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
161
|
+
readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
162
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
163
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
164
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
165
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
166
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
167
|
+
readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
168
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
169
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
170
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
171
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
172
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
173
173
|
readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
|
|
174
174
|
mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
175
175
|
tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
176
176
|
desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
177
177
|
wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
178
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
179
|
-
readonly rowGap?: (("
|
|
180
|
-
mobile?: ("
|
|
181
|
-
tablet?: ("
|
|
182
|
-
desktop?: ("
|
|
183
|
-
wide?: ("
|
|
184
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
178
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
|
|
179
|
+
readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
180
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
181
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
182
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
183
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
184
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
185
185
|
readonly textAlign?: ("left" | "right" | "center" | "justify" | {
|
|
186
186
|
mobile?: "left" | "right" | "center" | "justify" | undefined;
|
|
187
187
|
tablet?: "left" | "right" | "center" | "justify" | undefined;
|
|
188
188
|
desktop?: "left" | "right" | "center" | "justify" | undefined;
|
|
189
189
|
wide?: "left" | "right" | "center" | "justify" | undefined;
|
|
190
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
191
|
-
margin?: ("
|
|
192
|
-
mobile?: "
|
|
193
|
-
tablet?: "
|
|
194
|
-
desktop?: "
|
|
195
|
-
wide?: "
|
|
196
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
197
|
-
marginX?: ("
|
|
198
|
-
mobile?: "
|
|
199
|
-
tablet?: "
|
|
200
|
-
desktop?: "
|
|
201
|
-
wide?: "
|
|
202
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
203
|
-
marginY?: ("
|
|
204
|
-
mobile?: "
|
|
205
|
-
tablet?: "
|
|
206
|
-
desktop?: "
|
|
207
|
-
wide?: "
|
|
208
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
209
|
-
padding?: (("
|
|
210
|
-
mobile?: ("
|
|
211
|
-
tablet?: ("
|
|
212
|
-
desktop?: ("
|
|
213
|
-
wide?: ("
|
|
214
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
215
|
-
paddingX?: (("
|
|
216
|
-
mobile?: ("
|
|
217
|
-
tablet?: ("
|
|
218
|
-
desktop?: ("
|
|
219
|
-
wide?: ("
|
|
220
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
221
|
-
paddingY?: (("
|
|
222
|
-
mobile?: ("
|
|
223
|
-
tablet?: ("
|
|
224
|
-
desktop?: ("
|
|
225
|
-
wide?: ("
|
|
226
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
190
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
|
|
191
|
+
margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
192
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
193
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
194
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
195
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
196
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
197
|
+
marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
198
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
199
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
200
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
201
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
202
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
203
|
+
marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
204
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
205
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
206
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
207
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
208
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
209
|
+
padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
210
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
211
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
212
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
213
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
214
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
215
|
+
paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
216
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
217
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
218
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
219
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
220
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
221
|
+
paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
222
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
223
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
224
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
225
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
226
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
227
227
|
placeItems?: ("center" | "flex-start" | "flex-end" | {
|
|
228
228
|
mobile?: "center" | "flex-start" | "flex-end" | undefined;
|
|
229
229
|
tablet?: "center" | "flex-start" | "flex-end" | undefined;
|
|
230
230
|
desktop?: "center" | "flex-start" | "flex-end" | undefined;
|
|
231
231
|
wide?: "center" | "flex-start" | "flex-end" | undefined;
|
|
232
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
232
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
|
|
233
233
|
}) => string) & {
|
|
234
|
-
properties: Set<"
|
|
234
|
+
properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "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" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
|
|
235
235
|
};
|
|
236
236
|
|
|
237
237
|
declare const breakpoints: {
|
|
@@ -243,6 +243,15 @@ declare const breakpoints: {
|
|
|
243
243
|
type Breakpoint = keyof typeof breakpoints;
|
|
244
244
|
declare const breakpointQuery: (key: Breakpoint) => string;
|
|
245
245
|
|
|
246
|
+
/**
|
|
247
|
+
* Suggest a type for a string literal but also allow any string.
|
|
248
|
+
*/
|
|
249
|
+
type OptionalLiteral<T extends string> = T | (string & {});
|
|
250
|
+
type RecordLike = Record<string | number, unknown>;
|
|
251
|
+
type IsStringUnion<T> = T extends string ? (string extends T ? false : true) : false;
|
|
252
|
+
type IsNumberUnion<T> = T extends number ? (number extends T ? false : true) : false;
|
|
253
|
+
type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
|
|
254
|
+
|
|
246
255
|
type Atoms = Parameters<typeof atoms>[0];
|
|
247
256
|
type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
|
|
248
257
|
type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
|
|
@@ -266,39 +275,8 @@ type PaddingAtoms = {
|
|
|
266
275
|
};
|
|
267
276
|
type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
|
|
268
277
|
|
|
269
|
-
type Theme$1 = {
|
|
270
|
-
type: string;
|
|
271
|
-
variants?: Record<string, string | boolean>;
|
|
272
|
-
};
|
|
273
|
-
type CreateComponentTheme<T extends Theme$1> = {
|
|
274
|
-
type: T['type'];
|
|
275
|
-
base?: string;
|
|
276
|
-
variants?: {
|
|
277
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? {
|
|
278
|
-
[Variant in T['variants'][VariantGroup]]?: string;
|
|
279
|
-
} : string;
|
|
280
|
-
};
|
|
281
|
-
compoundVariants?: Array<{
|
|
282
|
-
style: string;
|
|
283
|
-
variants: {
|
|
284
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
|
|
285
|
-
};
|
|
286
|
-
}>;
|
|
287
|
-
defaultVariants?: {
|
|
288
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
type CreateThemeProps<T extends Theme$1> = {
|
|
292
|
-
[K in keyof T['variants']]?: T['variants'][K] extends string ? T['variants'][K] : boolean;
|
|
293
|
-
} & {
|
|
294
|
-
type: T['type'];
|
|
295
|
-
base?: boolean;
|
|
296
|
-
};
|
|
297
|
-
declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
|
|
298
|
-
|
|
299
278
|
type ButtonTheme = {
|
|
300
|
-
|
|
301
|
-
base: boolean;
|
|
279
|
+
base: string;
|
|
302
280
|
variants: {
|
|
303
281
|
variant: 'solid' | 'outline' | 'ghost' | 'link';
|
|
304
282
|
intent: 'neutral' | 'danger';
|
|
@@ -307,52 +285,95 @@ type ButtonTheme = {
|
|
|
307
285
|
disabled: boolean;
|
|
308
286
|
};
|
|
309
287
|
};
|
|
310
|
-
type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
|
|
311
|
-
type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
|
|
312
288
|
type LinkTheme = {
|
|
313
|
-
|
|
289
|
+
base: string;
|
|
314
290
|
variants: {
|
|
315
291
|
variant: 'inherit' | 'primary' | 'secondary';
|
|
316
292
|
underline: boolean;
|
|
317
293
|
};
|
|
318
294
|
};
|
|
319
|
-
type LinkThemeProps = CreateThemeProps<LinkTheme>;
|
|
320
|
-
type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
|
|
321
295
|
type SpinnerTheme = {
|
|
322
|
-
|
|
296
|
+
base: string;
|
|
323
297
|
variants: {
|
|
324
298
|
size: 'small' | 'medium' | 'large';
|
|
325
299
|
color: Exclude<Atoms['color'], undefined>;
|
|
326
300
|
};
|
|
327
301
|
};
|
|
328
|
-
type SpinnerThemeProps = CreateThemeProps<SpinnerTheme>;
|
|
329
|
-
type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
|
|
330
302
|
type DividerTheme = {
|
|
331
|
-
|
|
303
|
+
base: string;
|
|
332
304
|
variants: {
|
|
333
305
|
color: Exclude<Atoms['color'], undefined>;
|
|
334
306
|
};
|
|
335
307
|
};
|
|
336
|
-
type DividerThemeProps = CreateThemeProps<DividerTheme>;
|
|
337
|
-
type DividerThemeComponent = CreateComponentTheme<DividerTheme>;
|
|
338
308
|
type DialogTheme = {
|
|
339
|
-
|
|
309
|
+
base: string;
|
|
310
|
+
backdrop: string;
|
|
340
311
|
variants: {
|
|
341
|
-
|
|
312
|
+
size: 'small' | 'medium' | 'large';
|
|
342
313
|
};
|
|
343
314
|
};
|
|
344
|
-
type
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
315
|
+
type InputTheme = {
|
|
316
|
+
container: string;
|
|
317
|
+
input: string;
|
|
318
|
+
variants: {
|
|
319
|
+
disabled: boolean;
|
|
320
|
+
};
|
|
321
|
+
};
|
|
322
|
+
type ThemeComponents = {
|
|
323
|
+
button: ButtonTheme;
|
|
324
|
+
link: LinkTheme;
|
|
325
|
+
spinner: SpinnerTheme;
|
|
326
|
+
divider: DividerTheme;
|
|
327
|
+
dialog: DialogTheme;
|
|
328
|
+
input: InputTheme;
|
|
329
|
+
};
|
|
330
|
+
type ThemeComponentsProps = {
|
|
331
|
+
[K in keyof ThemeComponents]: ThemeComponentProps<ThemeComponents[K]>;
|
|
355
332
|
};
|
|
333
|
+
type ThemeComponentProps<T extends RecordLike> = {
|
|
334
|
+
[K in keyof T]?: T[K] extends RecordLike ? ThemeComponentProps<T[K]> : IsUnion<T[K]> extends true ? T[K] : T[K] extends string ? boolean : T[K];
|
|
335
|
+
};
|
|
336
|
+
|
|
337
|
+
/**
|
|
338
|
+
* Helper generic to convert a component theme to a styles object
|
|
339
|
+
*
|
|
340
|
+
* export type ThemeIn = {
|
|
341
|
+
* base: string;
|
|
342
|
+
* variants: {
|
|
343
|
+
* intent: 'neutral' | 'danger';
|
|
344
|
+
* level?: 1 | 2;
|
|
345
|
+
* loading: boolean;
|
|
346
|
+
* };
|
|
347
|
+
* };
|
|
348
|
+
* export type ThemeOut = {
|
|
349
|
+
* base: string;
|
|
350
|
+
* variants: {
|
|
351
|
+
* intent: Record<'neutral' | 'danger', string>;
|
|
352
|
+
* level?: Record<1 | 2, string>;
|
|
353
|
+
* loading: string;
|
|
354
|
+
* };
|
|
355
|
+
* };
|
|
356
|
+
*/
|
|
357
|
+
type ComponentThemeToStyles<T extends RecordLike> = {
|
|
358
|
+
[K in keyof T]?: T[K] extends RecordLike ? ComponentThemeToStyles<T[K]> : IsUnion<Exclude<T[K], undefined>> extends true ? Exclude<T[K], undefined> extends string | number ? ComponentThemeToStyles<Record<Exclude<T[K], undefined>, string>> : never : string;
|
|
359
|
+
};
|
|
360
|
+
type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
|
|
361
|
+
variants: {
|
|
362
|
+
[K in keyof T['variants']]?: T['variants'][K];
|
|
363
|
+
};
|
|
364
|
+
style: string;
|
|
365
|
+
}[] : never;
|
|
366
|
+
type ComponentThemeDefaultVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
|
|
367
|
+
[K in keyof T['variants']]?: T['variants'][K];
|
|
368
|
+
} : never;
|
|
369
|
+
type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
|
|
370
|
+
compoundVariants?: ComponentThemeCompoundVariants<T>;
|
|
371
|
+
defaultVariants?: ComponentThemeDefaultVariants<T>;
|
|
372
|
+
};
|
|
373
|
+
type ThemeComponentsStyles = {
|
|
374
|
+
[K in keyof ThemeComponents]?: ComponentTheme<ThemeComponents[K]>;
|
|
375
|
+
};
|
|
376
|
+
declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
|
|
356
377
|
|
|
357
378
|
type FontWeight = 'regular' | 'medium' | 'strong';
|
|
358
379
|
type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
@@ -363,9 +384,10 @@ type BoxShadow = 'small' | 'medium' | 'large';
|
|
|
363
384
|
type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
364
385
|
type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
365
386
|
type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
|
|
366
|
-
type
|
|
387
|
+
type ThemeTokens = {
|
|
367
388
|
typography: {
|
|
368
389
|
fontFamily: {
|
|
390
|
+
body?: string;
|
|
369
391
|
primary?: string;
|
|
370
392
|
secondary?: string;
|
|
371
393
|
};
|
|
@@ -386,24 +408,26 @@ type BlocksTokens = {
|
|
|
386
408
|
color: Record<Color, string>;
|
|
387
409
|
};
|
|
388
410
|
|
|
389
|
-
type
|
|
411
|
+
type ThemeInput = {
|
|
390
412
|
name: string;
|
|
391
|
-
tokens:
|
|
392
|
-
components:
|
|
413
|
+
tokens: ThemeTokens;
|
|
414
|
+
components: Partial<ThemeComponentsStyles>;
|
|
393
415
|
};
|
|
394
|
-
|
|
416
|
+
type Theme = {
|
|
417
|
+
name: string;
|
|
395
418
|
vars: string;
|
|
396
|
-
components:
|
|
419
|
+
components: Partial<ThemeComponentsStyles>;
|
|
397
420
|
};
|
|
421
|
+
declare function makeTheme(theme: ThemeInput): Theme;
|
|
398
422
|
|
|
399
423
|
declare const vars: {
|
|
400
424
|
space: {
|
|
401
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
402
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
403
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
404
425
|
none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
405
426
|
gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
406
427
|
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
428
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
429
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
430
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
407
431
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
408
432
|
};
|
|
409
433
|
borderRadius: {
|
|
@@ -414,19 +438,19 @@ declare const vars: {
|
|
|
414
438
|
};
|
|
415
439
|
color: {
|
|
416
440
|
link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
417
|
-
danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
418
|
-
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
419
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
420
441
|
white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
421
442
|
black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
422
443
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
423
444
|
primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
445
|
+
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
424
446
|
primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
425
447
|
secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
448
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
426
449
|
secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
427
450
|
text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
428
451
|
textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
429
452
|
textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
453
|
+
danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
430
454
|
};
|
|
431
455
|
borderWidth: {
|
|
432
456
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -434,14 +458,15 @@ declare const vars: {
|
|
|
434
458
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
435
459
|
};
|
|
436
460
|
fontFamily: {
|
|
461
|
+
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
437
462
|
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
438
463
|
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
439
464
|
};
|
|
440
465
|
fontSize: {
|
|
466
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
441
467
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
442
468
|
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
443
469
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
444
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
445
470
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
446
471
|
};
|
|
447
472
|
fontWeight: {
|
|
@@ -450,10 +475,10 @@ declare const vars: {
|
|
|
450
475
|
strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
451
476
|
};
|
|
452
477
|
lineHeight: {
|
|
478
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
453
479
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
454
480
|
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
455
481
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
456
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
457
482
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
458
483
|
};
|
|
459
484
|
transition: {
|
|
@@ -471,14 +496,11 @@ declare const vars: {
|
|
|
471
496
|
};
|
|
472
497
|
};
|
|
473
498
|
|
|
474
|
-
type BlocksProviderContextData = {
|
|
475
|
-
vars: string;
|
|
476
|
-
components: ComponentThemesMap;
|
|
477
|
-
};
|
|
478
|
-
|
|
479
499
|
type BlocksProviderProps = {
|
|
480
500
|
children: React.ReactNode;
|
|
481
|
-
theme:
|
|
501
|
+
theme: Theme;
|
|
502
|
+
className?: string;
|
|
503
|
+
style?: React.CSSProperties;
|
|
482
504
|
};
|
|
483
505
|
declare const BlocksProvider: React.FC<BlocksProviderProps>;
|
|
484
506
|
|
|
@@ -508,8 +530,8 @@ type ButtonProps = {
|
|
|
508
530
|
declare const Button: react.ForwardRefExoticComponent<{
|
|
509
531
|
children: ReactNode;
|
|
510
532
|
type?: "button" | "submit" | "reset" | undefined;
|
|
511
|
-
variant?: "
|
|
512
|
-
intent?: "
|
|
533
|
+
variant?: "link" | "outline" | "solid" | "ghost" | undefined;
|
|
534
|
+
intent?: "danger" | "neutral" | undefined;
|
|
513
535
|
size?: "small" | "medium" | "large" | undefined;
|
|
514
536
|
width?: Atoms['width'];
|
|
515
537
|
alignSelf?: Atoms['alignSelf'];
|
|
@@ -618,19 +640,38 @@ type DialogProps = {
|
|
|
618
640
|
open: boolean;
|
|
619
641
|
onRequestClose: () => void;
|
|
620
642
|
className?: string;
|
|
643
|
+
size?: DialogTheme['variants']['size'];
|
|
621
644
|
};
|
|
622
645
|
declare const Dialog: FC<DialogProps>;
|
|
623
646
|
|
|
624
|
-
|
|
647
|
+
type InputProps = {
|
|
648
|
+
className?: string;
|
|
649
|
+
name: string;
|
|
650
|
+
type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
|
|
651
|
+
startSlot?: ReactNode;
|
|
652
|
+
endSlot?: ReactNode;
|
|
653
|
+
label: string;
|
|
654
|
+
} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
|
|
655
|
+
declare const Input: react.ForwardRefExoticComponent<{
|
|
656
|
+
className?: string | undefined;
|
|
657
|
+
name: string;
|
|
658
|
+
type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
|
|
659
|
+
startSlot?: ReactNode;
|
|
660
|
+
endSlot?: ReactNode;
|
|
661
|
+
label: string;
|
|
662
|
+
} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
663
|
+
|
|
664
|
+
declare function useComponentStyles<T extends keyof ThemeComponentsProps>(name: T, props: ThemeComponentsProps[T], useDefaultVariants?: boolean): string;
|
|
625
665
|
|
|
626
|
-
|
|
666
|
+
type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
|
|
667
|
+
type Components = {
|
|
668
|
+
[K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
|
|
669
|
+
};
|
|
670
|
+
declare const useComponentStyleDefaultProps: <T extends keyof ThemeComponents>(name: T) => Components[T];
|
|
627
671
|
|
|
628
672
|
type Args = null | undefined | boolean | string;
|
|
629
673
|
declare const classnames: (...args: Args[]) => string | undefined;
|
|
630
674
|
|
|
631
|
-
declare const momotaro:
|
|
632
|
-
vars: string;
|
|
633
|
-
components: ComponentThemesMap;
|
|
634
|
-
};
|
|
675
|
+
declare const momotaro: Theme;
|
|
635
676
|
|
|
636
|
-
export { BlocksProvider, BlocksProviderProps,
|
|
677
|
+
export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
|