@yahoo/uds 3.169.0 → 3.170.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/automated-config/dist/generated/autoVariantTemplates.cjs +218 -0
- package/dist/automated-config/dist/generated/autoVariantTemplates.js +218 -0
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/Icon.cjs +3 -6
- package/dist/components/Icon.js +3 -6
- package/dist/components/IconSlot.cjs +1 -1
- package/dist/components/IconSlot.js +1 -1
- package/dist/components/client/Button/Button.cjs +1 -1
- package/dist/components/client/Button/Button.js +1 -1
- package/dist/components/client/IconButton/IconButton.cjs +1 -1
- package/dist/components/client/IconButton/IconButton.js +1 -1
- package/dist/components/client/Menu/Menu.Content.cjs +1 -1
- package/dist/components/client/Menu/Menu.Content.js +1 -1
- package/dist/components/client/Popover/PopoverContent.cjs +1 -1
- package/dist/components/client/Popover/PopoverContent.js +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- package/dist/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/styles/styleVariantTemplates.cjs +146 -0
- package/dist/styles/styleVariantTemplates.d.cts +161 -0
- package/dist/styles/styleVariantTemplates.d.ts +161 -0
- package/dist/styles/styleVariantTemplates.js +145 -0
- package/dist/styles/styler.cjs +32 -21
- package/dist/styles/styler.d.cts +13 -281
- package/dist/styles/styler.d.ts +13 -281
- package/dist/styles/styler.js +32 -21
- package/dist/styles/stylerTypes.d.cts +1 -1
- package/dist/styles/stylerTypes.d.ts +1 -1
- package/dist/styles/textColorVariants.cjs +40 -0
- package/dist/styles/textColorVariants.d.cts +39 -0
- package/dist/styles/textColorVariants.d.ts +39 -0
- package/dist/styles/textColorVariants.js +39 -0
- package/dist/styles/udsTailwindMerge.cjs +522 -0
- package/dist/styles/udsTailwindMerge.d.cts +7 -0
- package/dist/styles/udsTailwindMerge.d.ts +7 -0
- package/dist/styles/udsTailwindMerge.js +520 -0
- package/dist/styles/variantClass.cjs +31 -0
- package/dist/styles/variantClass.d.cts +12 -0
- package/dist/styles/variantClass.d.ts +12 -0
- package/dist/styles/variantClass.js +30 -0
- package/dist/styles/variants.cjs +3 -29
- package/dist/styles/variants.js +3 -29
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/tokens/index.cjs +1 -1
- package/dist/tokens/index.js +1 -1
- package/dist/tokens/utils/getFontUrls.cjs +8 -1
- package/dist/tokens/utils/getFontUrls.d.cts +7 -0
- package/dist/tokens/utils/getFontUrls.d.ts +7 -0
- package/dist/tokens/utils/getFontUrls.js +8 -1
- package/dist/uds/generated/componentData.cjs +365 -361
- package/dist/uds/generated/componentData.js +365 -361
- package/dist/uds/generated/tailwindPurge.cjs +80 -80
- package/dist/uds/generated/tailwindPurge.js +80 -80
- package/generated/componentData.json +590 -590
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +1 -1
package/dist/styles/styler.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
import {
|
|
2
|
+
import { variants } from "./variants.js";
|
|
3
|
+
import { CVA, CVAVariantSchema, CX } from "./stylerTypes.js";
|
|
3
4
|
|
|
4
5
|
//#region src/styles/styler.d.ts
|
|
5
6
|
/**
|
|
@@ -7,288 +8,19 @@ import { CVA, CX } from "./stylerTypes.js";
|
|
|
7
8
|
* Code uses old-school JS to hyper optimize component rendering hot paths.
|
|
8
9
|
**/
|
|
9
10
|
declare function normalizeObject(props: Record<string, unknown>): Record<string, unknown>;
|
|
11
|
+
/**
|
|
12
|
+
* !WARNING: The `@__PURE__` annotation on the `createTailwindMerge(...)` call
|
|
13
|
+
* inside `./udsTailwindMerge.ts` is load-bearing for tree-shaking — without
|
|
14
|
+
* it, bundlers must assume the module-level call has side effects and keep
|
|
15
|
+
* the merge engine in any bundle that imports anything from this module. Do
|
|
16
|
+
* not remove it without re-checking bundle output (e.g. `esbuild --bundle
|
|
17
|
+
* --minify` an entry that imports a single lightweight export).
|
|
18
|
+
*/
|
|
10
19
|
declare const cx: CX<string>;
|
|
11
20
|
declare const cva: CVA<string>;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "2xs" | "3xl" | undefined;
|
|
16
|
-
avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "2xs" | "3xl" | undefined;
|
|
17
|
-
avatarTextVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
18
|
-
badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
19
|
-
badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
20
|
-
badgeVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | undefined;
|
|
21
|
-
badgeVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | undefined;
|
|
22
|
-
bannerSizeClose?: "default" | undefined;
|
|
23
|
-
bannerSizeDescription?: "default" | undefined;
|
|
24
|
-
bannerSizeIcon?: "default" | undefined;
|
|
25
|
-
bannerSizeRoot?: "default" | undefined;
|
|
26
|
-
bannerSizeTitle?: "default" | undefined;
|
|
27
|
-
bannerVariantDescription?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
|
|
28
|
-
bannerVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
|
|
29
|
-
bannerVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
|
|
30
|
-
bannerVariantTitle?: "primary" | "secondary" | "brand" | "alert" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "warning-secondary" | "info-secondary" | "default" | "success" | "success-secondary" | undefined;
|
|
31
|
-
bottomsheetVariantHandleIndicator?: "default" | undefined;
|
|
32
|
-
bottomsheetVariantHeader?: "default" | undefined;
|
|
33
|
-
bottomsheetVariantRoot?: "default" | undefined;
|
|
34
|
-
buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
35
|
-
buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
|
|
36
|
-
buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
|
|
37
|
-
buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | undefined;
|
|
38
|
-
checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
|
|
39
|
-
checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
40
|
-
checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
41
|
-
checkboxVariantCheckboxIcon?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
42
|
-
checkboxVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
43
|
-
checkboxVariantValueCheckbox?: "checked" | "indeterminate" | "unchecked" | undefined;
|
|
44
|
-
checkboxVariantValueCheckboxIcon?: "checked" | "indeterminate" | "unchecked" | undefined;
|
|
45
|
-
checkboxVariantValueRoot?: "checked" | "indeterminate" | "unchecked" | undefined;
|
|
46
|
-
chipDismissibleVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
47
|
-
chipDismissibleVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
48
|
-
chipLinkVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
49
|
-
chipLinkVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
50
|
-
chipSizeIcon?: "sm" | "md" | "default" | undefined;
|
|
51
|
-
chipSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
52
|
-
chipToggleVariantActiveIcon?: "off" | "on" | undefined;
|
|
53
|
-
chipToggleVariantActiveRoot?: "off" | "on" | undefined;
|
|
54
|
-
chipToggleVariantIcon?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
55
|
-
chipToggleVariantRoot?: "primary" | "secondary" | "brand" | "brand-secondary" | "default" | undefined;
|
|
56
|
-
dividerVariantLabel?: "primary" | "secondary" | "tertiary" | "muted" | "default" | undefined;
|
|
57
|
-
dividerVariantLine?: "primary" | "secondary" | "tertiary" | "muted" | "default" | undefined;
|
|
58
|
-
dividerVariantRoot?: "primary" | "secondary" | "tertiary" | "muted" | "default" | undefined;
|
|
59
|
-
iconbuttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | undefined;
|
|
60
|
-
iconbuttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | undefined;
|
|
61
|
-
inputSizeEndIcon?: "md" | "lg" | "default" | undefined;
|
|
62
|
-
inputSizeHelperIcon?: "md" | "lg" | "default" | undefined;
|
|
63
|
-
inputSizeHelperText?: "md" | "lg" | "default" | undefined;
|
|
64
|
-
inputSizeInput?: "md" | "lg" | "default" | undefined;
|
|
65
|
-
inputSizeInputWrapperDynamic?: "md" | "lg" | "default" | undefined;
|
|
66
|
-
inputSizeInputWrapperStatic?: "md" | "lg" | "default" | undefined;
|
|
67
|
-
inputSizeLabel?: "md" | "lg" | "default" | undefined;
|
|
68
|
-
inputSizeRoot?: "md" | "lg" | "default" | undefined;
|
|
69
|
-
inputSizeStartIcon?: "md" | "lg" | "default" | undefined;
|
|
70
|
-
inputVariantEndIcon?: "default" | undefined;
|
|
71
|
-
inputVariantHelperIcon?: "default" | undefined;
|
|
72
|
-
inputVariantHelperText?: "default" | undefined;
|
|
73
|
-
inputVariantInput?: "default" | undefined;
|
|
74
|
-
inputVariantInputPlaceholder?: "default" | undefined;
|
|
75
|
-
inputVariantInputWrapper?: "default" | undefined;
|
|
76
|
-
inputVariantLabel?: "default" | undefined;
|
|
77
|
-
inputVariantLabelRequired?: "default" | undefined;
|
|
78
|
-
inputVariantRoot?: "default" | undefined;
|
|
79
|
-
inputVariantStartIcon?: "default" | undefined;
|
|
80
|
-
inputVariantValueEndIcon?: "empty" | "filled" | undefined;
|
|
81
|
-
inputVariantValueHelperIcon?: "empty" | "filled" | undefined;
|
|
82
|
-
inputVariantValueHelperText?: "empty" | "filled" | undefined;
|
|
83
|
-
inputVariantValueInput?: "empty" | "filled" | undefined;
|
|
84
|
-
inputVariantValueInputPlaceholder?: "empty" | "filled" | undefined;
|
|
85
|
-
inputVariantValueInputWrapper?: "empty" | "filled" | undefined;
|
|
86
|
-
inputVariantValueLabel?: "empty" | "filled" | undefined;
|
|
87
|
-
inputVariantValueLabelRequired?: "empty" | "filled" | undefined;
|
|
88
|
-
inputVariantValueRoot?: "empty" | "filled" | undefined;
|
|
89
|
-
inputVariantValueStartIcon?: "empty" | "filled" | undefined;
|
|
90
|
-
linkTextStyleIcon?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "default" | undefined;
|
|
91
|
-
linkTextStyleRoot?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "default" | undefined;
|
|
92
|
-
linkVariantIconEnd?: "primary" | "secondary" | "tertiary" | "on-color" | "default" | undefined;
|
|
93
|
-
linkVariantIconStart?: "primary" | "secondary" | "tertiary" | "on-color" | "default" | undefined;
|
|
94
|
-
linkVariantRoot?: "primary" | "secondary" | "tertiary" | "on-color" | "default" | undefined;
|
|
95
|
-
menucontentSizeRoot?: "default" | undefined;
|
|
96
|
-
menucontentVariantRoot?: "default" | undefined;
|
|
97
|
-
menuitemDividerVariantLine?: "default" | undefined;
|
|
98
|
-
menuitemDividerVariantRoot?: "default" | undefined;
|
|
99
|
-
menuitemDividerVariantText?: "default" | undefined;
|
|
100
|
-
menuitemItemCheckboxVariantActiveEndIcon?: "off" | "on" | undefined;
|
|
101
|
-
menuitemItemCheckboxVariantActiveRoot?: "off" | "on" | undefined;
|
|
102
|
-
menuitemItemCheckboxVariantActiveStartIcon?: "off" | "on" | undefined;
|
|
103
|
-
menuitemItemCheckboxVariantActiveText?: "off" | "on" | undefined;
|
|
104
|
-
menuitemItemCheckboxVariantEndIcon?: "default" | undefined;
|
|
105
|
-
menuitemItemCheckboxVariantRoot?: "default" | undefined;
|
|
106
|
-
menuitemItemCheckboxVariantStartIcon?: "default" | undefined;
|
|
107
|
-
menuitemItemCheckboxVariantText?: "default" | undefined;
|
|
108
|
-
menuitemItemVariantActiveIcon?: "off" | "on" | undefined;
|
|
109
|
-
menuitemItemVariantActiveRoot?: "off" | "on" | undefined;
|
|
110
|
-
menuitemItemVariantActiveText?: "off" | "on" | undefined;
|
|
111
|
-
menuitemItemVariantIcon?: "default" | undefined;
|
|
112
|
-
menuitemItemVariantRoot?: "default" | undefined;
|
|
113
|
-
menuitemItemVariantText?: "default" | undefined;
|
|
114
|
-
menuitemSizeEndIcon?: "default" | undefined;
|
|
115
|
-
menuitemSizeRoot?: "default" | undefined;
|
|
116
|
-
menuitemSizeStartIcon?: "default" | undefined;
|
|
117
|
-
menuitemSizeText?: "default" | undefined;
|
|
118
|
-
modalSizeActions?: "default" | undefined;
|
|
119
|
-
modalSizeCloseIcon?: "default" | undefined;
|
|
120
|
-
modalSizeCloseIconContainer?: "default" | undefined;
|
|
121
|
-
modalSizeDescription?: "default" | undefined;
|
|
122
|
-
modalSizeHeader?: "default" | undefined;
|
|
123
|
-
modalSizeRoot?: "default" | undefined;
|
|
124
|
-
modalSizeScrim?: "default" | undefined;
|
|
125
|
-
modalSizeSpacingHorizontal?: "default" | undefined;
|
|
126
|
-
modalSizeTitle?: "default" | undefined;
|
|
127
|
-
modalSizeTitleDescriptionWrapper?: "default" | undefined;
|
|
128
|
-
modalVariantCloseIcon?: "default" | undefined;
|
|
129
|
-
modalVariantDescription?: "default" | undefined;
|
|
130
|
-
modalVariantRoot?: "default" | undefined;
|
|
131
|
-
modalVariantTitle?: "default" | undefined;
|
|
132
|
-
paddlenavSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | undefined;
|
|
133
|
-
paddlenavSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | undefined;
|
|
134
|
-
paddlenavVariantBackground?: "primary" | "secondary" | "tertiary" | "default" | undefined;
|
|
135
|
-
paddlenavVariantIcon?: "primary" | "secondary" | "tertiary" | "default" | undefined;
|
|
136
|
-
paddlenavVariantRoot?: "primary" | "secondary" | "tertiary" | "default" | undefined;
|
|
137
|
-
paginationSizeIcon?: "sm" | "md" | "default" | undefined;
|
|
138
|
-
paginationSizeItem?: "sm" | "md" | "default" | undefined;
|
|
139
|
-
paginationSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
140
|
-
paginationSizeText?: "sm" | "md" | "default" | undefined;
|
|
141
|
-
paginationVariantActiveRoot?: "off" | "on" | undefined;
|
|
142
|
-
paginationVariantRoot?: "default" | undefined;
|
|
143
|
-
popoverSizeCloseIcon?: "default" | undefined;
|
|
144
|
-
popoverSizeCloseIconContainer?: "default" | undefined;
|
|
145
|
-
popoverSizeContentWrapper?: "default" | undefined;
|
|
146
|
-
popoverSizeRoot?: "default" | undefined;
|
|
147
|
-
popoverSizeSvgBase?: "default" | undefined;
|
|
148
|
-
popoverSizeSvgBorder?: "default" | undefined;
|
|
149
|
-
popoverVariantBlur?: "default" | undefined;
|
|
150
|
-
popoverVariantCloseIcon?: "default" | undefined;
|
|
151
|
-
popoverVariantRoot?: "default" | undefined;
|
|
152
|
-
popoverVariantSvgBase?: "default" | undefined;
|
|
153
|
-
popoverVariantSvgBorder?: "default" | undefined;
|
|
154
|
-
radioSizeRadio?: "sm" | "md" | "default" | undefined;
|
|
155
|
-
radioSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
156
|
-
radioVariantRadio?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
157
|
-
radioVariantRadioCircle?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
158
|
-
radioVariantRoot?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
|
|
159
|
-
radioVariantValueRadio?: "checked" | "unchecked" | undefined;
|
|
160
|
-
radioVariantValueRadioCircle?: "checked" | "unchecked" | undefined;
|
|
161
|
-
radioVariantValueRoot?: "checked" | "unchecked" | undefined;
|
|
162
|
-
scrimVariantRoot?: "default" | undefined;
|
|
163
|
-
selectVariantRoot?: "default" | undefined;
|
|
164
|
-
selectcontentSizeRoot?: "default" | undefined;
|
|
165
|
-
selectcontentVariantRoot?: "default" | undefined;
|
|
166
|
-
selectitemDividerVariantLine?: "default" | undefined;
|
|
167
|
-
selectitemDividerVariantRoot?: "default" | undefined;
|
|
168
|
-
selectitemDividerVariantText?: "default" | undefined;
|
|
169
|
-
selectitemItemVariantActiveIcon?: "off" | "on" | undefined;
|
|
170
|
-
selectitemItemVariantActiveRoot?: "off" | "on" | undefined;
|
|
171
|
-
selectitemItemVariantActiveText?: "off" | "on" | undefined;
|
|
172
|
-
selectitemItemVariantIcon?: "default" | undefined;
|
|
173
|
-
selectitemItemVariantRoot?: "default" | undefined;
|
|
174
|
-
selectitemItemVariantText?: "default" | undefined;
|
|
175
|
-
selectitemSizeEndIcon?: "default" | undefined;
|
|
176
|
-
selectitemSizeRoot?: "default" | undefined;
|
|
177
|
-
selectitemSizeStartIcon?: "default" | undefined;
|
|
178
|
-
selectitemSizeText?: "default" | undefined;
|
|
179
|
-
switchSizeHandle?: "sm" | "md" | "default" | undefined;
|
|
180
|
-
switchSizeHandleIcon?: "sm" | "md" | "default" | undefined;
|
|
181
|
-
switchSizeRoot?: "sm" | "md" | "default" | undefined;
|
|
182
|
-
switchSizeSwitch?: "sm" | "md" | "default" | undefined;
|
|
183
|
-
switchVariantActiveHandle?: "off" | "on" | undefined;
|
|
184
|
-
switchVariantActiveHandleIcon?: "off" | "on" | undefined;
|
|
185
|
-
switchVariantActiveRoot?: "off" | "on" | undefined;
|
|
186
|
-
switchVariantActiveSwitch?: "off" | "on" | undefined;
|
|
187
|
-
switchVariantHandle?: "default" | undefined;
|
|
188
|
-
switchVariantHandleIcon?: "default" | undefined;
|
|
189
|
-
switchVariantRoot?: "default" | undefined;
|
|
190
|
-
switchVariantSwitch?: "default" | undefined;
|
|
191
|
-
tabSizeIcon?: "default" | undefined;
|
|
192
|
-
tabSizeRoot?: "default" | undefined;
|
|
193
|
-
tabVariantActiveIcon?: "off" | "on" | undefined;
|
|
194
|
-
tabVariantActiveRoot?: "off" | "on" | undefined;
|
|
195
|
-
tabVariantIcon?: "primary" | "secondary" | "default" | undefined;
|
|
196
|
-
tabVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
197
|
-
tabsVariantRoot?: "primary" | "secondary" | "default" | undefined;
|
|
198
|
-
toastSizeActionButton?: "default" | undefined;
|
|
199
|
-
toastSizeCloseIcon?: "default" | undefined;
|
|
200
|
-
toastSizeIcon?: "default" | undefined;
|
|
201
|
-
toastSizeLabel?: "default" | undefined;
|
|
202
|
-
toastSizeRoot?: "default" | undefined;
|
|
203
|
-
toastVariantActionButton?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
|
|
204
|
-
toastVariantCloseIcon?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
|
|
205
|
-
toastVariantIcon?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
|
|
206
|
-
toastVariantRoot?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
|
|
207
|
-
tooltipSizeBody?: "default" | undefined;
|
|
208
|
-
tooltipSizeEndContent?: "default" | undefined;
|
|
209
|
-
tooltipSizeIcon?: "default" | undefined;
|
|
210
|
-
tooltipSizeRoot?: "default" | undefined;
|
|
211
|
-
tooltipSizeSvg?: "default" | undefined;
|
|
212
|
-
tooltipSizeTitle?: "default" | undefined;
|
|
213
|
-
tooltipVariantBlur?: "default" | undefined;
|
|
214
|
-
tooltipVariantIcon?: "default" | undefined;
|
|
215
|
-
tooltipVariantRoot?: "default" | undefined;
|
|
216
|
-
tooltipVariantSvg?: "default" | undefined;
|
|
217
|
-
color?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
|
|
218
|
-
placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
|
|
219
|
-
fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
|
|
220
|
-
fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
221
|
-
fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
|
|
222
|
-
lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
223
|
-
letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
|
|
224
|
-
textAlign?: "center" | "justify" | "start" | "end" | undefined;
|
|
225
|
-
textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
|
|
226
|
-
spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
227
|
-
spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
228
|
-
spacingVertical?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
229
|
-
spacingBottom?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
230
|
-
spacingEnd?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
231
|
-
spacingStart?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
232
|
-
spacingTop?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
233
|
-
offset?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
234
|
-
offsetVertical?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
235
|
-
offsetHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
236
|
-
offsetBottom?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
237
|
-
offsetEnd?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
238
|
-
offsetStart?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
239
|
-
offsetTop?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
240
|
-
columnGap?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
241
|
-
rowGap?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
242
|
-
backgroundColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
|
|
243
|
-
borderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
244
|
-
borderStartColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
245
|
-
borderEndColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
246
|
-
borderBottomColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
247
|
-
borderTopColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
|
|
248
|
-
borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
249
|
-
borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
250
|
-
borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
251
|
-
borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
252
|
-
borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
253
|
-
borderWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
254
|
-
borderVerticalWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
255
|
-
borderHorizontalWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
256
|
-
borderStartWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
257
|
-
borderEndWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
258
|
-
borderTopWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
259
|
-
borderBottomWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
260
|
-
avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
|
|
261
|
-
iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
262
|
-
alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
|
|
263
|
-
alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
|
|
264
|
-
alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | "auto" | undefined;
|
|
265
|
-
flex?: "none" | "1" | "auto" | "initial" | undefined;
|
|
266
|
-
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
|
|
267
|
-
flexGrow?: "0" | "1" | "2" | "3" | undefined;
|
|
268
|
-
flexShrink?: "0" | "1" | undefined;
|
|
269
|
-
flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
|
|
270
|
-
justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
|
|
271
|
-
flexBasis?: "min-content" | undefined;
|
|
272
|
-
display?: "flex" | "none" | "block" | "inline-block" | "inline" | "inline-flex" | "table" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "grid" | "contents" | undefined;
|
|
273
|
-
overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
274
|
-
overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
275
|
-
overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
|
|
276
|
-
position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
277
|
-
contentFit?: "cover" | "contain" | "fill" | "none" | "scale-down" | undefined;
|
|
278
|
-
colorMode?: "light" | "dark" | undefined;
|
|
279
|
-
scaleMode?: "medium" | "small" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
|
|
280
|
-
width?: "full" | "fit" | "screen" | undefined;
|
|
281
|
-
height?: "full" | "fit" | "screen" | undefined;
|
|
282
|
-
dropShadow?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
|
|
283
|
-
insetShadow?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
|
|
284
|
-
nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
|
|
285
|
-
nestedBorderRadiusWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
|
|
286
|
-
nestedBorderRadiusSpacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
|
|
287
|
-
nestedBorderRadius?: boolean | "first" | "last" | undefined;
|
|
288
|
-
} & {
|
|
289
|
-
className?: string | undefined;
|
|
290
|
-
}) | undefined) => string;
|
|
291
|
-
type GetStylesInternalProps = Parameters<typeof getStylesInternal>[0];
|
|
21
|
+
type GetStylesInternalProps = (CVAVariantSchema<string, typeof variants> & {
|
|
22
|
+
className?: string;
|
|
23
|
+
}) | undefined;
|
|
292
24
|
declare const getStylesCacheKeySymbol: unique symbol;
|
|
293
25
|
declare const getStyles: (props: GetStylesInternalProps, onHit?: () => void) => string;
|
|
294
26
|
//#endregion
|
package/dist/styles/styler.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
import { getFeatureFlags } from "../flags.js";
|
|
3
3
|
import { falsyToString } from "../utils/falsyToString.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { udsTwMerge } from "./udsTailwindMerge.js";
|
|
5
|
+
import { resolveVariantClass } from "./variantClass.js";
|
|
6
6
|
import { clsx } from "clsx";
|
|
7
|
-
import { extendTailwindMerge } from "tailwind-merge";
|
|
8
7
|
//#region src/styles/styler.ts
|
|
9
8
|
const createObjectWithoutPrototype = () => Object.create(null);
|
|
10
9
|
const { useGetStylesCache, skipTailwindMerge } = getFeatureFlags();
|
|
@@ -21,25 +20,17 @@ function normalizeObject(props) {
|
|
|
21
20
|
}
|
|
22
21
|
return sorted;
|
|
23
22
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"text-color": [{ text: [...foregroundColors, ...spectrumColors] }],
|
|
33
|
-
"bg-color": [{ bg: backgroundColors }],
|
|
34
|
-
"font-family": [{ font: ["icons", ...textVariants] }],
|
|
35
|
-
leading: [{ leading: textVariants }]
|
|
36
|
-
},
|
|
37
|
-
conflictingClassGroups: {}
|
|
38
|
-
}
|
|
39
|
-
});
|
|
23
|
+
/**
|
|
24
|
+
* !WARNING: The `@__PURE__` annotation on the `createTailwindMerge(...)` call
|
|
25
|
+
* inside `./udsTailwindMerge.ts` is load-bearing for tree-shaking — without
|
|
26
|
+
* it, bundlers must assume the module-level call has side effects and keep
|
|
27
|
+
* the merge engine in any bundle that imports anything from this module. Do
|
|
28
|
+
* not remove it without re-checking bundle output (e.g. `esbuild --bundle
|
|
29
|
+
* --minify` an entry that imports a single lightweight export).
|
|
30
|
+
*/
|
|
40
31
|
const cx = (...inputs) => {
|
|
41
32
|
const finalClassName = clsx(inputs);
|
|
42
|
-
return skipTailwindMerge ? finalClassName :
|
|
33
|
+
return skipTailwindMerge ? finalClassName : udsTwMerge(finalClassName);
|
|
43
34
|
};
|
|
44
35
|
const cva = (config) => {
|
|
45
36
|
const { base, variants, defaultVariants, compoundVariants } = config;
|
|
@@ -83,7 +74,27 @@ const cva = (config) => {
|
|
|
83
74
|
return cx(base, variantClassNames, compoundVariantClassNames, className);
|
|
84
75
|
};
|
|
85
76
|
};
|
|
86
|
-
|
|
77
|
+
/**
|
|
78
|
+
* Resolves style/variant props to class names via template substitution
|
|
79
|
+
* (`./variantClass.ts`) instead of a `cva({ variants })` lookup, so neither
|
|
80
|
+
* the hand-written `variants` map nor the auto-generated `autoVariants` map
|
|
81
|
+
* (~70 kB minified combined) ships in the client bundle. Output is identical:
|
|
82
|
+
* the templates are exhaustively verified against the maps in
|
|
83
|
+
* `variantClass.test.ts`.
|
|
84
|
+
*
|
|
85
|
+
* !WARNING: This mirrors the `cva()` hot path — same iteration order, same
|
|
86
|
+
* `cx` merge — and is equally performance-sensitive. Benchmark before changing.
|
|
87
|
+
*/
|
|
88
|
+
const getStylesInternal = (maybeProps) => {
|
|
89
|
+
if (!maybeProps) return cx();
|
|
90
|
+
const { className, ...props } = maybeProps;
|
|
91
|
+
const variantClassNames = [];
|
|
92
|
+
for (const prop in props) {
|
|
93
|
+
const propValue = props[prop];
|
|
94
|
+
variantClassNames.push(resolveVariantClass(prop, falsyToString(propValue)));
|
|
95
|
+
}
|
|
96
|
+
return cx(variantClassNames, className);
|
|
97
|
+
};
|
|
87
98
|
const styleCache = /* @__PURE__ */ new Map();
|
|
88
99
|
const getStylesCacheKeySymbol = Symbol("getStylesCacheKey");
|
|
89
100
|
const generateCacheKey = (props) => {
|
|
@@ -36,4 +36,4 @@ type StylePropsVariants<ReturnType> = { [key in keyof Required<StyleProps>]: Rec
|
|
|
36
36
|
scaleMode: Record<ScaleMode, string>;
|
|
37
37
|
} & StylePropsVariantsAuto<ReturnType>;
|
|
38
38
|
//#endregion
|
|
39
|
-
export { type CVA, type CX, type StylePropsVariants };
|
|
39
|
+
export { type CVA, type CVAVariantSchema, type CX, type StylePropsVariants };
|
|
@@ -36,4 +36,4 @@ type StylePropsVariants<ReturnType> = { [key in keyof Required<StyleProps>]: Rec
|
|
|
36
36
|
scaleMode: Record<ScaleMode, string>;
|
|
37
37
|
} & StylePropsVariantsAuto<ReturnType>;
|
|
38
38
|
//#endregion
|
|
39
|
-
export { type CVA, type CX, type StylePropsVariants };
|
|
39
|
+
export { type CVA, type CVAVariantSchema, type CX, type StylePropsVariants };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
//#region src/styles/textColorVariants.ts
|
|
4
|
+
/**
|
|
5
|
+
* Text color classes for the `color` style prop.
|
|
6
|
+
*
|
|
7
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
8
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
9
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
10
|
+
*/
|
|
11
|
+
const textColorVariants = {
|
|
12
|
+
accent: "text-accent",
|
|
13
|
+
alert: "text-alert",
|
|
14
|
+
"alert-secondary": "text-alert-secondary",
|
|
15
|
+
brand: "text-brand",
|
|
16
|
+
"brand-secondary": "text-brand-secondary",
|
|
17
|
+
positive: "text-positive",
|
|
18
|
+
"positive-secondary": "text-positive-secondary",
|
|
19
|
+
warning: "text-warning",
|
|
20
|
+
"warning-secondary": "text-warning-secondary",
|
|
21
|
+
info: "text-info",
|
|
22
|
+
"info-secondary": "text-info-secondary",
|
|
23
|
+
muted: "text-muted",
|
|
24
|
+
"on-color": "text-on-color",
|
|
25
|
+
primary: "text-primary",
|
|
26
|
+
secondary: "text-secondary",
|
|
27
|
+
tertiary: "text-tertiary",
|
|
28
|
+
white: "text-white",
|
|
29
|
+
black: "text-black",
|
|
30
|
+
transparent: "text-transparent",
|
|
31
|
+
current: "text-current",
|
|
32
|
+
"always/white": "text-always-white",
|
|
33
|
+
"always/black": "text-always-black",
|
|
34
|
+
"always/transparent": "text-always-transparent",
|
|
35
|
+
"always/current": "text-always-current",
|
|
36
|
+
"always/brand": "text-always-brand",
|
|
37
|
+
"always/accent": "text-always-accent"
|
|
38
|
+
};
|
|
39
|
+
//#endregion
|
|
40
|
+
exports.textColorVariants = textColorVariants;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/textColorVariants.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
declare const textColorVariants: {
|
|
11
|
+
accent: string;
|
|
12
|
+
alert: string;
|
|
13
|
+
'alert-secondary': string;
|
|
14
|
+
brand: string;
|
|
15
|
+
'brand-secondary': string;
|
|
16
|
+
positive: string;
|
|
17
|
+
'positive-secondary': string;
|
|
18
|
+
warning: string;
|
|
19
|
+
'warning-secondary': string;
|
|
20
|
+
info: string;
|
|
21
|
+
'info-secondary': string;
|
|
22
|
+
muted: string;
|
|
23
|
+
'on-color': string;
|
|
24
|
+
primary: string;
|
|
25
|
+
secondary: string;
|
|
26
|
+
tertiary: string;
|
|
27
|
+
white: string;
|
|
28
|
+
black: string;
|
|
29
|
+
transparent: string;
|
|
30
|
+
current: string;
|
|
31
|
+
'always/white': string;
|
|
32
|
+
'always/black': string;
|
|
33
|
+
'always/transparent': string;
|
|
34
|
+
'always/current': string;
|
|
35
|
+
'always/brand': string;
|
|
36
|
+
'always/accent': string;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/textColorVariants.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
declare const textColorVariants: {
|
|
11
|
+
accent: string;
|
|
12
|
+
alert: string;
|
|
13
|
+
'alert-secondary': string;
|
|
14
|
+
brand: string;
|
|
15
|
+
'brand-secondary': string;
|
|
16
|
+
positive: string;
|
|
17
|
+
'positive-secondary': string;
|
|
18
|
+
warning: string;
|
|
19
|
+
'warning-secondary': string;
|
|
20
|
+
info: string;
|
|
21
|
+
'info-secondary': string;
|
|
22
|
+
muted: string;
|
|
23
|
+
'on-color': string;
|
|
24
|
+
primary: string;
|
|
25
|
+
secondary: string;
|
|
26
|
+
tertiary: string;
|
|
27
|
+
white: string;
|
|
28
|
+
black: string;
|
|
29
|
+
transparent: string;
|
|
30
|
+
current: string;
|
|
31
|
+
'always/white': string;
|
|
32
|
+
'always/black': string;
|
|
33
|
+
'always/transparent': string;
|
|
34
|
+
'always/current': string;
|
|
35
|
+
'always/brand': string;
|
|
36
|
+
'always/accent': string;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
//#region src/styles/textColorVariants.ts
|
|
3
|
+
/**
|
|
4
|
+
* Text color classes for the `color` style prop.
|
|
5
|
+
*
|
|
6
|
+
* Kept in a standalone module so lightweight components (e.g. `Icon`) can map
|
|
7
|
+
* a color to its class without pulling in the full `variants` map, the
|
|
8
|
+
* auto-generated variants, or `tailwind-merge` via the styler.
|
|
9
|
+
*/
|
|
10
|
+
const textColorVariants = {
|
|
11
|
+
accent: "text-accent",
|
|
12
|
+
alert: "text-alert",
|
|
13
|
+
"alert-secondary": "text-alert-secondary",
|
|
14
|
+
brand: "text-brand",
|
|
15
|
+
"brand-secondary": "text-brand-secondary",
|
|
16
|
+
positive: "text-positive",
|
|
17
|
+
"positive-secondary": "text-positive-secondary",
|
|
18
|
+
warning: "text-warning",
|
|
19
|
+
"warning-secondary": "text-warning-secondary",
|
|
20
|
+
info: "text-info",
|
|
21
|
+
"info-secondary": "text-info-secondary",
|
|
22
|
+
muted: "text-muted",
|
|
23
|
+
"on-color": "text-on-color",
|
|
24
|
+
primary: "text-primary",
|
|
25
|
+
secondary: "text-secondary",
|
|
26
|
+
tertiary: "text-tertiary",
|
|
27
|
+
white: "text-white",
|
|
28
|
+
black: "text-black",
|
|
29
|
+
transparent: "text-transparent",
|
|
30
|
+
current: "text-current",
|
|
31
|
+
"always/white": "text-always-white",
|
|
32
|
+
"always/black": "text-always-black",
|
|
33
|
+
"always/transparent": "text-always-transparent",
|
|
34
|
+
"always/current": "text-always-current",
|
|
35
|
+
"always/brand": "text-always-brand",
|
|
36
|
+
"always/accent": "text-always-accent"
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
export { textColorVariants };
|