@blockle/blocks 0.5.0 → 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 +93 -41
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +91 -39
- package/dist/momotaro.chunk.d.ts +292 -232
- 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 +19 -17
- package/dist/styles/lib/css/atoms/atomicProperties.mjs +3 -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 +35 -26
- package/dist/styles/themes/momotaro/components/button.css.mjs +28 -19
- 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 +6 -6
- package/dist/styles/themes/momotaro/components/link.css.mjs +5 -5
- 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,200 +26,212 @@ 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;
|
|
39
39
|
inset?: 0 | undefined;
|
|
40
40
|
} & {
|
|
41
|
+
readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
|
|
42
|
+
mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
43
|
+
tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
44
|
+
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
45
|
+
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
46
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
41
47
|
readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
|
|
42
48
|
mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
43
49
|
tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
44
50
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
45
51
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
46
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
47
|
-
readonly
|
|
48
|
-
mobile?:
|
|
49
|
-
tablet?:
|
|
50
|
-
desktop?:
|
|
51
|
-
wide?:
|
|
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
|
+
readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
|
|
54
|
+
mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
55
|
+
tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
56
|
+
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
57
|
+
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
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>;
|
|
53
65
|
readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
|
|
54
66
|
mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
55
67
|
tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
56
68
|
desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
57
69
|
wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
58
|
-
} | 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>;
|
|
59
71
|
readonly flex?: (1 | {
|
|
60
72
|
mobile?: 1 | undefined;
|
|
61
73
|
tablet?: 1 | undefined;
|
|
62
74
|
desktop?: 1 | undefined;
|
|
63
75
|
wide?: 1 | undefined;
|
|
64
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
76
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
|
|
65
77
|
readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
|
|
66
78
|
mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
67
79
|
tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
68
80
|
desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
69
81
|
wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
|
|
70
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
82
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
|
|
71
83
|
readonly flexGrow?: (0 | 1 | {
|
|
72
84
|
mobile?: 0 | 1 | undefined;
|
|
73
85
|
tablet?: 0 | 1 | undefined;
|
|
74
86
|
desktop?: 0 | 1 | undefined;
|
|
75
87
|
wide?: 0 | 1 | undefined;
|
|
76
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
88
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
|
|
77
89
|
readonly flexShrink?: (0 | 1 | {
|
|
78
90
|
mobile?: 0 | 1 | undefined;
|
|
79
91
|
tablet?: 0 | 1 | undefined;
|
|
80
92
|
desktop?: 0 | 1 | undefined;
|
|
81
93
|
wide?: 0 | 1 | undefined;
|
|
82
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
83
|
-
readonly flexWrap?: ("
|
|
84
|
-
mobile?: "
|
|
85
|
-
tablet?: "
|
|
86
|
-
desktop?: "
|
|
87
|
-
wide?: "
|
|
88
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
89
|
-
readonly fontSize?: (("
|
|
90
|
-
mobile?: ("
|
|
91
|
-
tablet?: ("
|
|
92
|
-
desktop?: ("
|
|
93
|
-
wide?: ("
|
|
94
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
95
|
-
readonly gap?: (("
|
|
96
|
-
mobile?: ("
|
|
97
|
-
tablet?: ("
|
|
98
|
-
desktop?: ("
|
|
99
|
-
wide?: ("
|
|
100
|
-
} | 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>;
|
|
101
113
|
readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
|
|
102
114
|
mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
103
115
|
tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
104
116
|
desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
105
117
|
wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
106
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
107
|
-
readonly marginBottom?: ("
|
|
108
|
-
mobile?: "
|
|
109
|
-
tablet?: "
|
|
110
|
-
desktop?: "
|
|
111
|
-
wide?: "
|
|
112
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
113
|
-
readonly marginLeft?: ("
|
|
114
|
-
mobile?: "
|
|
115
|
-
tablet?: "
|
|
116
|
-
desktop?: "
|
|
117
|
-
wide?: "
|
|
118
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
119
|
-
readonly marginRight?: ("
|
|
120
|
-
mobile?: "
|
|
121
|
-
tablet?: "
|
|
122
|
-
desktop?: "
|
|
123
|
-
wide?: "
|
|
124
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
125
|
-
readonly marginTop?: ("
|
|
126
|
-
mobile?: "
|
|
127
|
-
tablet?: "
|
|
128
|
-
desktop?: "
|
|
129
|
-
wide?: "
|
|
130
|
-
} | 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>;
|
|
131
143
|
readonly outline?: ("none" | {
|
|
132
144
|
mobile?: "none" | undefined;
|
|
133
145
|
tablet?: "none" | undefined;
|
|
134
146
|
desktop?: "none" | undefined;
|
|
135
147
|
wide?: "none" | undefined;
|
|
136
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
137
|
-
readonly paddingBottom?: (("
|
|
138
|
-
mobile?: ("
|
|
139
|
-
tablet?: ("
|
|
140
|
-
desktop?: ("
|
|
141
|
-
wide?: ("
|
|
142
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
143
|
-
readonly paddingLeft?: (("
|
|
144
|
-
mobile?: ("
|
|
145
|
-
tablet?: ("
|
|
146
|
-
desktop?: ("
|
|
147
|
-
wide?: ("
|
|
148
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
149
|
-
readonly paddingRight?: (("
|
|
150
|
-
mobile?: ("
|
|
151
|
-
tablet?: ("
|
|
152
|
-
desktop?: ("
|
|
153
|
-
wide?: ("
|
|
154
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
155
|
-
readonly paddingTop?: (("
|
|
156
|
-
mobile?: ("
|
|
157
|
-
tablet?: ("
|
|
158
|
-
desktop?: ("
|
|
159
|
-
wide?: ("
|
|
160
|
-
} | 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>;
|
|
161
173
|
readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
|
|
162
174
|
mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
163
175
|
tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
164
176
|
desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
165
177
|
wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
166
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
167
|
-
readonly rowGap?: (("
|
|
168
|
-
mobile?: ("
|
|
169
|
-
tablet?: ("
|
|
170
|
-
desktop?: ("
|
|
171
|
-
wide?: ("
|
|
172
|
-
} | 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>;
|
|
173
185
|
readonly textAlign?: ("left" | "right" | "center" | "justify" | {
|
|
174
186
|
mobile?: "left" | "right" | "center" | "justify" | undefined;
|
|
175
187
|
tablet?: "left" | "right" | "center" | "justify" | undefined;
|
|
176
188
|
desktop?: "left" | "right" | "center" | "justify" | undefined;
|
|
177
189
|
wide?: "left" | "right" | "center" | "justify" | undefined;
|
|
178
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
179
|
-
margin?: ("
|
|
180
|
-
mobile?: "
|
|
181
|
-
tablet?: "
|
|
182
|
-
desktop?: "
|
|
183
|
-
wide?: "
|
|
184
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
185
|
-
marginX?: ("
|
|
186
|
-
mobile?: "
|
|
187
|
-
tablet?: "
|
|
188
|
-
desktop?: "
|
|
189
|
-
wide?: "
|
|
190
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
191
|
-
marginY?: ("
|
|
192
|
-
mobile?: "
|
|
193
|
-
tablet?: "
|
|
194
|
-
desktop?: "
|
|
195
|
-
wide?: "
|
|
196
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
197
|
-
padding?: (("
|
|
198
|
-
mobile?: ("
|
|
199
|
-
tablet?: ("
|
|
200
|
-
desktop?: ("
|
|
201
|
-
wide?: ("
|
|
202
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
203
|
-
paddingX?: (("
|
|
204
|
-
mobile?: ("
|
|
205
|
-
tablet?: ("
|
|
206
|
-
desktop?: ("
|
|
207
|
-
wide?: ("
|
|
208
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
209
|
-
paddingY?: (("
|
|
210
|
-
mobile?: ("
|
|
211
|
-
tablet?: ("
|
|
212
|
-
desktop?: ("
|
|
213
|
-
wide?: ("
|
|
214
|
-
} | 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>;
|
|
215
227
|
placeItems?: ("center" | "flex-start" | "flex-end" | {
|
|
216
228
|
mobile?: "center" | "flex-start" | "flex-end" | undefined;
|
|
217
229
|
tablet?: "center" | "flex-start" | "flex-end" | undefined;
|
|
218
230
|
desktop?: "center" | "flex-start" | "flex-end" | undefined;
|
|
219
231
|
wide?: "center" | "flex-start" | "flex-end" | undefined;
|
|
220
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 |
|
|
232
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
|
|
221
233
|
}) => string) & {
|
|
222
|
-
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">;
|
|
223
235
|
};
|
|
224
236
|
|
|
225
237
|
declare const breakpoints: {
|
|
@@ -231,6 +243,15 @@ declare const breakpoints: {
|
|
|
231
243
|
type Breakpoint = keyof typeof breakpoints;
|
|
232
244
|
declare const breakpointQuery: (key: Breakpoint) => string;
|
|
233
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
|
+
|
|
234
255
|
type Atoms = Parameters<typeof atoms>[0];
|
|
235
256
|
type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
|
|
236
257
|
type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
|
|
@@ -254,39 +275,8 @@ type PaddingAtoms = {
|
|
|
254
275
|
};
|
|
255
276
|
type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
|
|
256
277
|
|
|
257
|
-
type Theme$1 = {
|
|
258
|
-
type: string;
|
|
259
|
-
variants?: Record<string, string | boolean>;
|
|
260
|
-
};
|
|
261
|
-
type CreateComponentTheme<T extends Theme$1> = {
|
|
262
|
-
type: T['type'];
|
|
263
|
-
base?: string;
|
|
264
|
-
variants?: {
|
|
265
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? {
|
|
266
|
-
[Variant in T['variants'][VariantGroup]]?: string;
|
|
267
|
-
} : string;
|
|
268
|
-
};
|
|
269
|
-
compoundVariants?: Array<{
|
|
270
|
-
style: string;
|
|
271
|
-
variants: {
|
|
272
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
|
|
273
|
-
};
|
|
274
|
-
}>;
|
|
275
|
-
defaultVariants?: {
|
|
276
|
-
[VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
|
|
277
|
-
};
|
|
278
|
-
};
|
|
279
|
-
type CreateThemeProps<T extends Theme$1> = {
|
|
280
|
-
[K in keyof T['variants']]?: T['variants'][K] extends string ? T['variants'][K] : boolean;
|
|
281
|
-
} & {
|
|
282
|
-
type: T['type'];
|
|
283
|
-
base?: boolean;
|
|
284
|
-
};
|
|
285
|
-
declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
|
|
286
|
-
|
|
287
278
|
type ButtonTheme = {
|
|
288
|
-
|
|
289
|
-
base: boolean;
|
|
279
|
+
base: string;
|
|
290
280
|
variants: {
|
|
291
281
|
variant: 'solid' | 'outline' | 'ghost' | 'link';
|
|
292
282
|
intent: 'neutral' | 'danger';
|
|
@@ -295,53 +285,96 @@ type ButtonTheme = {
|
|
|
295
285
|
disabled: boolean;
|
|
296
286
|
};
|
|
297
287
|
};
|
|
298
|
-
type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
|
|
299
|
-
type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
|
|
300
288
|
type LinkTheme = {
|
|
301
|
-
|
|
289
|
+
base: string;
|
|
302
290
|
variants: {
|
|
303
291
|
variant: 'inherit' | 'primary' | 'secondary';
|
|
304
292
|
underline: boolean;
|
|
305
293
|
};
|
|
306
294
|
};
|
|
307
|
-
type LinkThemeProps = CreateThemeProps<LinkTheme>;
|
|
308
|
-
type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
|
|
309
295
|
type SpinnerTheme = {
|
|
310
|
-
|
|
296
|
+
base: string;
|
|
311
297
|
variants: {
|
|
312
298
|
size: 'small' | 'medium' | 'large';
|
|
313
299
|
color: Exclude<Atoms['color'], undefined>;
|
|
314
300
|
};
|
|
315
301
|
};
|
|
316
|
-
type SpinnerThemeProps = CreateThemeProps<SpinnerTheme>;
|
|
317
|
-
type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
|
|
318
302
|
type DividerTheme = {
|
|
319
|
-
|
|
303
|
+
base: string;
|
|
320
304
|
variants: {
|
|
321
305
|
color: Exclude<Atoms['color'], undefined>;
|
|
322
306
|
};
|
|
323
307
|
};
|
|
324
|
-
type DividerThemeProps = CreateThemeProps<DividerTheme>;
|
|
325
|
-
type DividerThemeComponent = CreateComponentTheme<DividerTheme>;
|
|
326
308
|
type DialogTheme = {
|
|
327
|
-
|
|
309
|
+
base: string;
|
|
310
|
+
backdrop: string;
|
|
311
|
+
variants: {
|
|
312
|
+
size: 'small' | 'medium' | 'large';
|
|
313
|
+
};
|
|
314
|
+
};
|
|
315
|
+
type InputTheme = {
|
|
316
|
+
container: string;
|
|
317
|
+
input: string;
|
|
328
318
|
variants: {
|
|
329
|
-
|
|
319
|
+
disabled: boolean;
|
|
330
320
|
};
|
|
331
321
|
};
|
|
332
|
-
type
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
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]>;
|
|
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];
|
|
343
335
|
};
|
|
344
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];
|
|
377
|
+
|
|
345
378
|
type FontWeight = 'regular' | 'medium' | 'strong';
|
|
346
379
|
type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
347
380
|
type Transition = 'slow' | 'normal' | 'fast';
|
|
@@ -351,9 +384,10 @@ type BoxShadow = 'small' | 'medium' | 'large';
|
|
|
351
384
|
type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
352
385
|
type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
353
386
|
type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
|
|
354
|
-
type
|
|
387
|
+
type ThemeTokens = {
|
|
355
388
|
typography: {
|
|
356
389
|
fontFamily: {
|
|
390
|
+
body?: string;
|
|
357
391
|
primary?: string;
|
|
358
392
|
secondary?: string;
|
|
359
393
|
};
|
|
@@ -374,24 +408,26 @@ type BlocksTokens = {
|
|
|
374
408
|
color: Record<Color, string>;
|
|
375
409
|
};
|
|
376
410
|
|
|
377
|
-
type
|
|
411
|
+
type ThemeInput = {
|
|
378
412
|
name: string;
|
|
379
|
-
tokens:
|
|
380
|
-
components:
|
|
413
|
+
tokens: ThemeTokens;
|
|
414
|
+
components: Partial<ThemeComponentsStyles>;
|
|
381
415
|
};
|
|
382
|
-
|
|
416
|
+
type Theme = {
|
|
417
|
+
name: string;
|
|
383
418
|
vars: string;
|
|
384
|
-
components:
|
|
419
|
+
components: Partial<ThemeComponentsStyles>;
|
|
385
420
|
};
|
|
421
|
+
declare function makeTheme(theme: ThemeInput): Theme;
|
|
386
422
|
|
|
387
423
|
declare const vars: {
|
|
388
424
|
space: {
|
|
389
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
390
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
391
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
392
425
|
none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
393
426
|
gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
394
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})`;
|
|
395
431
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
396
432
|
};
|
|
397
433
|
borderRadius: {
|
|
@@ -402,19 +438,19 @@ declare const vars: {
|
|
|
402
438
|
};
|
|
403
439
|
color: {
|
|
404
440
|
link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
405
|
-
danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
406
|
-
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
407
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
408
441
|
white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
409
442
|
black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
410
443
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
411
444
|
primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
445
|
+
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
412
446
|
primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
413
447
|
secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
448
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
414
449
|
secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
415
450
|
text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
416
451
|
textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
417
452
|
textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
453
|
+
danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
418
454
|
};
|
|
419
455
|
borderWidth: {
|
|
420
456
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -422,14 +458,15 @@ declare const vars: {
|
|
|
422
458
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
423
459
|
};
|
|
424
460
|
fontFamily: {
|
|
461
|
+
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
425
462
|
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
426
463
|
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
427
464
|
};
|
|
428
465
|
fontSize: {
|
|
466
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
429
467
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
430
468
|
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
431
469
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
432
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
433
470
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
434
471
|
};
|
|
435
472
|
fontWeight: {
|
|
@@ -438,10 +475,10 @@ declare const vars: {
|
|
|
438
475
|
strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
439
476
|
};
|
|
440
477
|
lineHeight: {
|
|
478
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
441
479
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
442
480
|
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
443
481
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
444
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
445
482
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
446
483
|
};
|
|
447
484
|
transition: {
|
|
@@ -459,20 +496,18 @@ declare const vars: {
|
|
|
459
496
|
};
|
|
460
497
|
};
|
|
461
498
|
|
|
462
|
-
type BlocksProviderContextData = {
|
|
463
|
-
vars: string;
|
|
464
|
-
components: ComponentThemesMap;
|
|
465
|
-
};
|
|
466
|
-
|
|
467
499
|
type BlocksProviderProps = {
|
|
468
500
|
children: React.ReactNode;
|
|
469
|
-
theme:
|
|
501
|
+
theme: Theme;
|
|
502
|
+
className?: string;
|
|
503
|
+
style?: React.CSSProperties;
|
|
470
504
|
};
|
|
471
505
|
declare const BlocksProvider: React.FC<BlocksProviderProps>;
|
|
472
506
|
|
|
473
507
|
type BoxProps = {
|
|
474
508
|
children?: React.ReactNode;
|
|
475
509
|
className?: string;
|
|
510
|
+
style?: React.CSSProperties;
|
|
476
511
|
} & Atoms;
|
|
477
512
|
type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
|
|
478
513
|
declare const Box: PolymorphicBox;
|
|
@@ -486,6 +521,7 @@ type ButtonProps = {
|
|
|
486
521
|
intent?: ButtonTheme['variants']['intent'];
|
|
487
522
|
size?: ButtonTheme['variants']['size'];
|
|
488
523
|
width?: Atoms['width'];
|
|
524
|
+
alignSelf?: Atoms['alignSelf'];
|
|
489
525
|
loading?: boolean;
|
|
490
526
|
startSlot?: ReactNode;
|
|
491
527
|
endSlot?: ReactNode;
|
|
@@ -494,10 +530,11 @@ type ButtonProps = {
|
|
|
494
530
|
declare const Button: react.ForwardRefExoticComponent<{
|
|
495
531
|
children: ReactNode;
|
|
496
532
|
type?: "button" | "submit" | "reset" | undefined;
|
|
497
|
-
variant?: "
|
|
498
|
-
intent?: "
|
|
533
|
+
variant?: "link" | "outline" | "solid" | "ghost" | undefined;
|
|
534
|
+
intent?: "danger" | "neutral" | undefined;
|
|
499
535
|
size?: "small" | "medium" | "large" | undefined;
|
|
500
536
|
width?: Atoms['width'];
|
|
537
|
+
alignSelf?: Atoms['alignSelf'];
|
|
501
538
|
loading?: boolean | undefined;
|
|
502
539
|
startSlot?: ReactNode;
|
|
503
540
|
endSlot?: ReactNode;
|
|
@@ -505,13 +542,13 @@ declare const Button: react.ForwardRefExoticComponent<{
|
|
|
505
542
|
} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
|
|
506
543
|
|
|
507
544
|
type HeadingProps = {
|
|
508
|
-
className?: string;
|
|
509
|
-
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
510
|
-
children: React.ReactNode;
|
|
511
545
|
align?: Atoms['textAlign'];
|
|
546
|
+
children: React.ReactNode;
|
|
547
|
+
className?: string;
|
|
548
|
+
fontFamily?: Atoms['fontFamily'];
|
|
512
549
|
fontSize?: Atoms['fontSize'];
|
|
513
550
|
fontWeight?: Atoms['fontWeight'];
|
|
514
|
-
|
|
551
|
+
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
515
552
|
} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
|
|
516
553
|
declare const Heading: React.FC<HeadingProps>;
|
|
517
554
|
|
|
@@ -532,22 +569,25 @@ declare const alignItemsMap: {
|
|
|
532
569
|
type AlignItemsMap = typeof alignItemsMap;
|
|
533
570
|
|
|
534
571
|
type InlineProps = {
|
|
535
|
-
as?: 'div' | 'ul' | 'ol' | 'nav';
|
|
536
|
-
children: React.ReactNode;
|
|
537
572
|
alignX?: keyof JustifyContentMap;
|
|
538
573
|
alignY?: keyof AlignItemsMap;
|
|
539
|
-
|
|
574
|
+
as?: 'div' | 'ul' | 'ol' | 'nav';
|
|
575
|
+
children: React.ReactNode;
|
|
576
|
+
className?: string;
|
|
540
577
|
display?: ResponsiveDisplayFlex;
|
|
578
|
+
gap: Atoms['gap'];
|
|
579
|
+
style?: React.CSSProperties;
|
|
541
580
|
} & MarginAndPaddingAtoms;
|
|
542
581
|
declare const Inline: React.FC<InlineProps>;
|
|
543
582
|
|
|
544
583
|
type StackProps = {
|
|
584
|
+
alignX?: keyof AlignItemsMap;
|
|
545
585
|
as?: 'div' | 'section' | 'ul' | 'ol';
|
|
546
586
|
children: React.ReactNode;
|
|
547
|
-
alignX?: keyof AlignItemsMap;
|
|
548
|
-
gap: Atoms['gap'];
|
|
549
|
-
display?: ResponsiveDisplayFlex;
|
|
550
587
|
className?: string;
|
|
588
|
+
display?: ResponsiveDisplayFlex;
|
|
589
|
+
gap: Atoms['gap'];
|
|
590
|
+
style?: React.CSSProperties;
|
|
551
591
|
/**
|
|
552
592
|
* Start prop is only valid when as="ol"
|
|
553
593
|
*/
|
|
@@ -573,24 +613,25 @@ type TextProps = {
|
|
|
573
613
|
declare const Text: React.FC<TextProps>;
|
|
574
614
|
|
|
575
615
|
type LinkProps = {
|
|
576
|
-
variant?: LinkTheme['variants']['variant'];
|
|
577
|
-
underline?: LinkTheme['variants']['underline'];
|
|
578
616
|
children?: ReactNode;
|
|
579
|
-
|
|
617
|
+
underline?: LinkTheme['variants']['underline'];
|
|
618
|
+
variant?: LinkTheme['variants']['variant'];
|
|
580
619
|
} & Atoms & HTMLElementProps<HTMLAnchorElement>;
|
|
581
620
|
type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
|
|
582
621
|
declare const Link: PolymorphicLink;
|
|
583
622
|
|
|
584
623
|
type SpinnerProps = {
|
|
585
624
|
className?: string;
|
|
586
|
-
size?: SpinnerTheme['variants']['size'];
|
|
587
625
|
color?: SpinnerTheme['variants']['color'];
|
|
626
|
+
size?: SpinnerTheme['variants']['size'];
|
|
627
|
+
style?: React.CSSProperties;
|
|
588
628
|
} & MarginAtoms;
|
|
589
629
|
declare const Spinner: FC<SpinnerProps>;
|
|
590
630
|
|
|
591
631
|
type DividerProps = {
|
|
592
632
|
className?: string;
|
|
593
633
|
color?: Atoms['backgroundColor'];
|
|
634
|
+
style?: React.CSSProperties;
|
|
594
635
|
};
|
|
595
636
|
declare const Divider: FC<DividerProps>;
|
|
596
637
|
|
|
@@ -599,19 +640,38 @@ type DialogProps = {
|
|
|
599
640
|
open: boolean;
|
|
600
641
|
onRequestClose: () => void;
|
|
601
642
|
className?: string;
|
|
643
|
+
size?: DialogTheme['variants']['size'];
|
|
602
644
|
};
|
|
603
645
|
declare const Dialog: FC<DialogProps>;
|
|
604
646
|
|
|
605
|
-
|
|
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;
|
|
606
665
|
|
|
607
|
-
|
|
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];
|
|
608
671
|
|
|
609
672
|
type Args = null | undefined | boolean | string;
|
|
610
673
|
declare const classnames: (...args: Args[]) => string | undefined;
|
|
611
674
|
|
|
612
|
-
declare const momotaro:
|
|
613
|
-
vars: string;
|
|
614
|
-
components: ComponentThemesMap;
|
|
615
|
-
};
|
|
675
|
+
declare const momotaro: Theme;
|
|
616
676
|
|
|
617
|
-
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 };
|