@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
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
//#region src/styles/styleVariantTemplates.ts
|
|
4
|
+
/**
|
|
5
|
+
* Compact class-name templates for the hand-written style props in
|
|
6
|
+
* `./variants.ts`. The enumerated `variants` map stays the build-time source
|
|
7
|
+
* of truth (CSS generation, purging, public `tokens` export); the runtime
|
|
8
|
+
* styler derives class names from these templates instead so the ~50 kB
|
|
9
|
+
* enumeration never enters the client bundle.
|
|
10
|
+
*
|
|
11
|
+
* `variantClass.test.ts` exhaustively asserts template-derived classes equal
|
|
12
|
+
* the `variants` map, so any drift fails CI.
|
|
13
|
+
*/
|
|
14
|
+
const styleVariantTemplates = {
|
|
15
|
+
color: "text-%v",
|
|
16
|
+
placeholderColor: "placeholder:text-%v",
|
|
17
|
+
fontFamily: "uds-font-family-%v",
|
|
18
|
+
fontSize: "uds-font-size-%v",
|
|
19
|
+
fontWeight: "uds-font-weight-%v",
|
|
20
|
+
lineHeight: "uds-line-height-%v",
|
|
21
|
+
letterSpacing: "uds-letter-spacing-%v",
|
|
22
|
+
textAlign: "text-%v",
|
|
23
|
+
textTransform: {
|
|
24
|
+
t: "uds-text-transform-%v",
|
|
25
|
+
e: {
|
|
26
|
+
none: "normal-case",
|
|
27
|
+
uppercase: "uppercase",
|
|
28
|
+
lowercase: "lowercase",
|
|
29
|
+
capitalize: "capitalize"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
spacing: "p-%v",
|
|
33
|
+
spacingHorizontal: "px-%v",
|
|
34
|
+
spacingVertical: "py-%v",
|
|
35
|
+
spacingBottom: "pb-%v",
|
|
36
|
+
spacingEnd: "pe-%v",
|
|
37
|
+
spacingStart: "ps-%v",
|
|
38
|
+
spacingTop: "pt-%v",
|
|
39
|
+
offset: "-m-%v",
|
|
40
|
+
offsetVertical: "-my-%v",
|
|
41
|
+
offsetHorizontal: "-mx-%v",
|
|
42
|
+
offsetBottom: "-mb-%v",
|
|
43
|
+
offsetEnd: "-me-%v",
|
|
44
|
+
offsetStart: "-ms-%v",
|
|
45
|
+
offsetTop: "-mt-%v",
|
|
46
|
+
columnGap: "gap-x-%v",
|
|
47
|
+
rowGap: "gap-y-%v",
|
|
48
|
+
backgroundColor: "bg-%v",
|
|
49
|
+
borderColor: "border-%v",
|
|
50
|
+
borderStartColor: "border-s-%v",
|
|
51
|
+
borderEndColor: "border-e-%v",
|
|
52
|
+
borderBottomColor: "border-b-%v",
|
|
53
|
+
borderTopColor: "border-t-%v",
|
|
54
|
+
borderRadius: "uds-border-radius-%v",
|
|
55
|
+
borderTopStartRadius: "uds-border-top-start-radius-%v",
|
|
56
|
+
borderTopEndRadius: "uds-border-top-end-radius-%v",
|
|
57
|
+
borderBottomStartRadius: "uds-border-bottom-start-radius-%v",
|
|
58
|
+
borderBottomEndRadius: "uds-border-bottom-end-radius-%v",
|
|
59
|
+
borderWidth: "uds-border-width-%v",
|
|
60
|
+
borderVerticalWidth: "uds-border-width-y-%v",
|
|
61
|
+
borderHorizontalWidth: "uds-border-width-x-%v",
|
|
62
|
+
borderStartWidth: "uds-border-width-start-%v",
|
|
63
|
+
borderEndWidth: "uds-border-width-end-%v",
|
|
64
|
+
borderTopWidth: "uds-border-width-top-%v",
|
|
65
|
+
borderBottomWidth: "uds-border-width-bottom-%v",
|
|
66
|
+
avatarSize: "avatarSize-%v",
|
|
67
|
+
iconSize: "iconSize-%v leading-none",
|
|
68
|
+
alignContent: {
|
|
69
|
+
t: "content-%v",
|
|
70
|
+
e: {
|
|
71
|
+
"flex-start": "content-start",
|
|
72
|
+
"flex-end": "content-end",
|
|
73
|
+
"space-between": "content-between",
|
|
74
|
+
"space-around": "content-around"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
alignItems: {
|
|
78
|
+
t: "items-%v",
|
|
79
|
+
e: {
|
|
80
|
+
"flex-start": "items-start",
|
|
81
|
+
"flex-end": "items-end"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
alignSelf: {
|
|
85
|
+
t: "self-%v",
|
|
86
|
+
e: {
|
|
87
|
+
"flex-start": "self-start",
|
|
88
|
+
"flex-end": "self-end"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
flex: "flex-%v",
|
|
92
|
+
flexDirection: {
|
|
93
|
+
t: "flex-%v",
|
|
94
|
+
e: {
|
|
95
|
+
column: "flex-col",
|
|
96
|
+
"column-reverse": "flex-col-reverse"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
flexGrow: {
|
|
100
|
+
t: "grow-[%v]",
|
|
101
|
+
e: {
|
|
102
|
+
"0": "grow-0",
|
|
103
|
+
"1": "grow"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
flexShrink: {
|
|
107
|
+
t: "shrink-%v",
|
|
108
|
+
e: { "1": "shrink" }
|
|
109
|
+
},
|
|
110
|
+
flexWrap: "flex-%v",
|
|
111
|
+
justifyContent: {
|
|
112
|
+
t: "justify-%v",
|
|
113
|
+
e: {
|
|
114
|
+
"flex-start": "justify-start",
|
|
115
|
+
"flex-end": "justify-end",
|
|
116
|
+
"space-between": "justify-between",
|
|
117
|
+
"space-around": "justify-around",
|
|
118
|
+
"space-evenly": "justify-evenly"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
flexBasis: "basis-[%v]",
|
|
122
|
+
display: {
|
|
123
|
+
t: "%v",
|
|
124
|
+
e: { none: "hidden" }
|
|
125
|
+
},
|
|
126
|
+
overflow: "overflow-%v",
|
|
127
|
+
overflowX: "overflow-x-%v",
|
|
128
|
+
overflowY: "overflow-y-%v",
|
|
129
|
+
position: "%v",
|
|
130
|
+
contentFit: "object-%v",
|
|
131
|
+
colorMode: "uds-color-mode-%v",
|
|
132
|
+
scaleMode: "uds-scale-mode-%v",
|
|
133
|
+
width: "w-%v",
|
|
134
|
+
height: "h-%v",
|
|
135
|
+
dropShadow: "uds-drop-shadow-%v",
|
|
136
|
+
insetShadow: "uds-inset-shadow-%v",
|
|
137
|
+
nestedBorderRadiusSize: "uds-nested-border-radius-size-%v",
|
|
138
|
+
nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v",
|
|
139
|
+
nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v",
|
|
140
|
+
nestedBorderRadius: {
|
|
141
|
+
t: "uds-nested-border-radius-%v",
|
|
142
|
+
e: { true: "uds-nested-border-radius" }
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
//#endregion
|
|
146
|
+
exports.styleVariantTemplates = styleVariantTemplates;
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/styleVariantTemplates.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A class-name template for one style prop. Either a single template string in
|
|
5
|
+
* which `%v` is replaced with the normalized prop value, or a template plus an
|
|
6
|
+
* exceptions map (`e`) for the values whose class does not follow the
|
|
7
|
+
* template. Exception lookups use the raw (pre-normalization) value.
|
|
8
|
+
*/
|
|
9
|
+
type VariantTemplate = string | {
|
|
10
|
+
t: string;
|
|
11
|
+
e: Record<string, string>;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Compact class-name templates for the hand-written style props in
|
|
15
|
+
* `./variants.ts`. The enumerated `variants` map stays the build-time source
|
|
16
|
+
* of truth (CSS generation, purging, public `tokens` export); the runtime
|
|
17
|
+
* styler derives class names from these templates instead so the ~50 kB
|
|
18
|
+
* enumeration never enters the client bundle.
|
|
19
|
+
*
|
|
20
|
+
* `variantClass.test.ts` exhaustively asserts template-derived classes equal
|
|
21
|
+
* the `variants` map, so any drift fails CI.
|
|
22
|
+
*/
|
|
23
|
+
declare const styleVariantTemplates: {
|
|
24
|
+
readonly color: "text-%v";
|
|
25
|
+
readonly placeholderColor: "placeholder:text-%v";
|
|
26
|
+
readonly fontFamily: "uds-font-family-%v";
|
|
27
|
+
readonly fontSize: "uds-font-size-%v";
|
|
28
|
+
readonly fontWeight: "uds-font-weight-%v";
|
|
29
|
+
readonly lineHeight: "uds-line-height-%v";
|
|
30
|
+
readonly letterSpacing: "uds-letter-spacing-%v";
|
|
31
|
+
readonly textAlign: "text-%v";
|
|
32
|
+
readonly textTransform: {
|
|
33
|
+
readonly t: "uds-text-transform-%v";
|
|
34
|
+
readonly e: {
|
|
35
|
+
readonly none: "normal-case";
|
|
36
|
+
readonly uppercase: "uppercase";
|
|
37
|
+
readonly lowercase: "lowercase";
|
|
38
|
+
readonly capitalize: "capitalize";
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
readonly spacing: "p-%v";
|
|
42
|
+
readonly spacingHorizontal: "px-%v";
|
|
43
|
+
readonly spacingVertical: "py-%v";
|
|
44
|
+
readonly spacingBottom: "pb-%v";
|
|
45
|
+
readonly spacingEnd: "pe-%v";
|
|
46
|
+
readonly spacingStart: "ps-%v";
|
|
47
|
+
readonly spacingTop: "pt-%v";
|
|
48
|
+
readonly offset: "-m-%v";
|
|
49
|
+
readonly offsetVertical: "-my-%v";
|
|
50
|
+
readonly offsetHorizontal: "-mx-%v";
|
|
51
|
+
readonly offsetBottom: "-mb-%v";
|
|
52
|
+
readonly offsetEnd: "-me-%v";
|
|
53
|
+
readonly offsetStart: "-ms-%v";
|
|
54
|
+
readonly offsetTop: "-mt-%v";
|
|
55
|
+
readonly columnGap: "gap-x-%v";
|
|
56
|
+
readonly rowGap: "gap-y-%v";
|
|
57
|
+
readonly backgroundColor: "bg-%v";
|
|
58
|
+
readonly borderColor: "border-%v";
|
|
59
|
+
readonly borderStartColor: "border-s-%v";
|
|
60
|
+
readonly borderEndColor: "border-e-%v";
|
|
61
|
+
readonly borderBottomColor: "border-b-%v";
|
|
62
|
+
readonly borderTopColor: "border-t-%v";
|
|
63
|
+
readonly borderRadius: "uds-border-radius-%v";
|
|
64
|
+
readonly borderTopStartRadius: "uds-border-top-start-radius-%v";
|
|
65
|
+
readonly borderTopEndRadius: "uds-border-top-end-radius-%v";
|
|
66
|
+
readonly borderBottomStartRadius: "uds-border-bottom-start-radius-%v";
|
|
67
|
+
readonly borderBottomEndRadius: "uds-border-bottom-end-radius-%v";
|
|
68
|
+
readonly borderWidth: "uds-border-width-%v";
|
|
69
|
+
readonly borderVerticalWidth: "uds-border-width-y-%v";
|
|
70
|
+
readonly borderHorizontalWidth: "uds-border-width-x-%v";
|
|
71
|
+
readonly borderStartWidth: "uds-border-width-start-%v";
|
|
72
|
+
readonly borderEndWidth: "uds-border-width-end-%v";
|
|
73
|
+
readonly borderTopWidth: "uds-border-width-top-%v";
|
|
74
|
+
readonly borderBottomWidth: "uds-border-width-bottom-%v";
|
|
75
|
+
readonly avatarSize: "avatarSize-%v";
|
|
76
|
+
readonly iconSize: "iconSize-%v leading-none";
|
|
77
|
+
readonly alignContent: {
|
|
78
|
+
readonly t: "content-%v";
|
|
79
|
+
readonly e: {
|
|
80
|
+
readonly 'flex-start': "content-start";
|
|
81
|
+
readonly 'flex-end': "content-end";
|
|
82
|
+
readonly 'space-between': "content-between";
|
|
83
|
+
readonly 'space-around': "content-around";
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
readonly alignItems: {
|
|
87
|
+
readonly t: "items-%v";
|
|
88
|
+
readonly e: {
|
|
89
|
+
readonly 'flex-start': "items-start";
|
|
90
|
+
readonly 'flex-end': "items-end";
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
readonly alignSelf: {
|
|
94
|
+
readonly t: "self-%v";
|
|
95
|
+
readonly e: {
|
|
96
|
+
readonly 'flex-start': "self-start";
|
|
97
|
+
readonly 'flex-end': "self-end";
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
readonly flex: "flex-%v";
|
|
101
|
+
readonly flexDirection: {
|
|
102
|
+
readonly t: "flex-%v";
|
|
103
|
+
readonly e: {
|
|
104
|
+
readonly column: "flex-col";
|
|
105
|
+
readonly 'column-reverse': "flex-col-reverse";
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
readonly flexGrow: {
|
|
109
|
+
readonly t: "grow-[%v]";
|
|
110
|
+
readonly e: {
|
|
111
|
+
readonly '0': "grow-0";
|
|
112
|
+
readonly '1': "grow";
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
readonly flexShrink: {
|
|
116
|
+
readonly t: "shrink-%v";
|
|
117
|
+
readonly e: {
|
|
118
|
+
readonly '1': "shrink";
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
readonly flexWrap: "flex-%v";
|
|
122
|
+
readonly justifyContent: {
|
|
123
|
+
readonly t: "justify-%v";
|
|
124
|
+
readonly e: {
|
|
125
|
+
readonly 'flex-start': "justify-start";
|
|
126
|
+
readonly 'flex-end': "justify-end";
|
|
127
|
+
readonly 'space-between': "justify-between";
|
|
128
|
+
readonly 'space-around': "justify-around";
|
|
129
|
+
readonly 'space-evenly': "justify-evenly";
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
readonly flexBasis: "basis-[%v]";
|
|
133
|
+
readonly display: {
|
|
134
|
+
readonly t: "%v";
|
|
135
|
+
readonly e: {
|
|
136
|
+
readonly none: "hidden";
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
readonly overflow: "overflow-%v";
|
|
140
|
+
readonly overflowX: "overflow-x-%v";
|
|
141
|
+
readonly overflowY: "overflow-y-%v";
|
|
142
|
+
readonly position: "%v";
|
|
143
|
+
readonly contentFit: "object-%v";
|
|
144
|
+
readonly colorMode: "uds-color-mode-%v";
|
|
145
|
+
readonly scaleMode: "uds-scale-mode-%v";
|
|
146
|
+
readonly width: "w-%v";
|
|
147
|
+
readonly height: "h-%v";
|
|
148
|
+
readonly dropShadow: "uds-drop-shadow-%v";
|
|
149
|
+
readonly insetShadow: "uds-inset-shadow-%v";
|
|
150
|
+
readonly nestedBorderRadiusSize: "uds-nested-border-radius-size-%v";
|
|
151
|
+
readonly nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v";
|
|
152
|
+
readonly nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v";
|
|
153
|
+
readonly nestedBorderRadius: {
|
|
154
|
+
readonly t: "uds-nested-border-radius-%v";
|
|
155
|
+
readonly e: {
|
|
156
|
+
readonly true: "uds-nested-border-radius";
|
|
157
|
+
};
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
//#endregion
|
|
161
|
+
export { type VariantTemplate, styleVariantTemplates };
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/styles/styleVariantTemplates.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A class-name template for one style prop. Either a single template string in
|
|
5
|
+
* which `%v` is replaced with the normalized prop value, or a template plus an
|
|
6
|
+
* exceptions map (`e`) for the values whose class does not follow the
|
|
7
|
+
* template. Exception lookups use the raw (pre-normalization) value.
|
|
8
|
+
*/
|
|
9
|
+
type VariantTemplate = string | {
|
|
10
|
+
t: string;
|
|
11
|
+
e: Record<string, string>;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Compact class-name templates for the hand-written style props in
|
|
15
|
+
* `./variants.ts`. The enumerated `variants` map stays the build-time source
|
|
16
|
+
* of truth (CSS generation, purging, public `tokens` export); the runtime
|
|
17
|
+
* styler derives class names from these templates instead so the ~50 kB
|
|
18
|
+
* enumeration never enters the client bundle.
|
|
19
|
+
*
|
|
20
|
+
* `variantClass.test.ts` exhaustively asserts template-derived classes equal
|
|
21
|
+
* the `variants` map, so any drift fails CI.
|
|
22
|
+
*/
|
|
23
|
+
declare const styleVariantTemplates: {
|
|
24
|
+
readonly color: "text-%v";
|
|
25
|
+
readonly placeholderColor: "placeholder:text-%v";
|
|
26
|
+
readonly fontFamily: "uds-font-family-%v";
|
|
27
|
+
readonly fontSize: "uds-font-size-%v";
|
|
28
|
+
readonly fontWeight: "uds-font-weight-%v";
|
|
29
|
+
readonly lineHeight: "uds-line-height-%v";
|
|
30
|
+
readonly letterSpacing: "uds-letter-spacing-%v";
|
|
31
|
+
readonly textAlign: "text-%v";
|
|
32
|
+
readonly textTransform: {
|
|
33
|
+
readonly t: "uds-text-transform-%v";
|
|
34
|
+
readonly e: {
|
|
35
|
+
readonly none: "normal-case";
|
|
36
|
+
readonly uppercase: "uppercase";
|
|
37
|
+
readonly lowercase: "lowercase";
|
|
38
|
+
readonly capitalize: "capitalize";
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
readonly spacing: "p-%v";
|
|
42
|
+
readonly spacingHorizontal: "px-%v";
|
|
43
|
+
readonly spacingVertical: "py-%v";
|
|
44
|
+
readonly spacingBottom: "pb-%v";
|
|
45
|
+
readonly spacingEnd: "pe-%v";
|
|
46
|
+
readonly spacingStart: "ps-%v";
|
|
47
|
+
readonly spacingTop: "pt-%v";
|
|
48
|
+
readonly offset: "-m-%v";
|
|
49
|
+
readonly offsetVertical: "-my-%v";
|
|
50
|
+
readonly offsetHorizontal: "-mx-%v";
|
|
51
|
+
readonly offsetBottom: "-mb-%v";
|
|
52
|
+
readonly offsetEnd: "-me-%v";
|
|
53
|
+
readonly offsetStart: "-ms-%v";
|
|
54
|
+
readonly offsetTop: "-mt-%v";
|
|
55
|
+
readonly columnGap: "gap-x-%v";
|
|
56
|
+
readonly rowGap: "gap-y-%v";
|
|
57
|
+
readonly backgroundColor: "bg-%v";
|
|
58
|
+
readonly borderColor: "border-%v";
|
|
59
|
+
readonly borderStartColor: "border-s-%v";
|
|
60
|
+
readonly borderEndColor: "border-e-%v";
|
|
61
|
+
readonly borderBottomColor: "border-b-%v";
|
|
62
|
+
readonly borderTopColor: "border-t-%v";
|
|
63
|
+
readonly borderRadius: "uds-border-radius-%v";
|
|
64
|
+
readonly borderTopStartRadius: "uds-border-top-start-radius-%v";
|
|
65
|
+
readonly borderTopEndRadius: "uds-border-top-end-radius-%v";
|
|
66
|
+
readonly borderBottomStartRadius: "uds-border-bottom-start-radius-%v";
|
|
67
|
+
readonly borderBottomEndRadius: "uds-border-bottom-end-radius-%v";
|
|
68
|
+
readonly borderWidth: "uds-border-width-%v";
|
|
69
|
+
readonly borderVerticalWidth: "uds-border-width-y-%v";
|
|
70
|
+
readonly borderHorizontalWidth: "uds-border-width-x-%v";
|
|
71
|
+
readonly borderStartWidth: "uds-border-width-start-%v";
|
|
72
|
+
readonly borderEndWidth: "uds-border-width-end-%v";
|
|
73
|
+
readonly borderTopWidth: "uds-border-width-top-%v";
|
|
74
|
+
readonly borderBottomWidth: "uds-border-width-bottom-%v";
|
|
75
|
+
readonly avatarSize: "avatarSize-%v";
|
|
76
|
+
readonly iconSize: "iconSize-%v leading-none";
|
|
77
|
+
readonly alignContent: {
|
|
78
|
+
readonly t: "content-%v";
|
|
79
|
+
readonly e: {
|
|
80
|
+
readonly 'flex-start': "content-start";
|
|
81
|
+
readonly 'flex-end': "content-end";
|
|
82
|
+
readonly 'space-between': "content-between";
|
|
83
|
+
readonly 'space-around': "content-around";
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
readonly alignItems: {
|
|
87
|
+
readonly t: "items-%v";
|
|
88
|
+
readonly e: {
|
|
89
|
+
readonly 'flex-start': "items-start";
|
|
90
|
+
readonly 'flex-end': "items-end";
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
readonly alignSelf: {
|
|
94
|
+
readonly t: "self-%v";
|
|
95
|
+
readonly e: {
|
|
96
|
+
readonly 'flex-start': "self-start";
|
|
97
|
+
readonly 'flex-end': "self-end";
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
readonly flex: "flex-%v";
|
|
101
|
+
readonly flexDirection: {
|
|
102
|
+
readonly t: "flex-%v";
|
|
103
|
+
readonly e: {
|
|
104
|
+
readonly column: "flex-col";
|
|
105
|
+
readonly 'column-reverse': "flex-col-reverse";
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
readonly flexGrow: {
|
|
109
|
+
readonly t: "grow-[%v]";
|
|
110
|
+
readonly e: {
|
|
111
|
+
readonly '0': "grow-0";
|
|
112
|
+
readonly '1': "grow";
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
readonly flexShrink: {
|
|
116
|
+
readonly t: "shrink-%v";
|
|
117
|
+
readonly e: {
|
|
118
|
+
readonly '1': "shrink";
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
readonly flexWrap: "flex-%v";
|
|
122
|
+
readonly justifyContent: {
|
|
123
|
+
readonly t: "justify-%v";
|
|
124
|
+
readonly e: {
|
|
125
|
+
readonly 'flex-start': "justify-start";
|
|
126
|
+
readonly 'flex-end': "justify-end";
|
|
127
|
+
readonly 'space-between': "justify-between";
|
|
128
|
+
readonly 'space-around': "justify-around";
|
|
129
|
+
readonly 'space-evenly': "justify-evenly";
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
readonly flexBasis: "basis-[%v]";
|
|
133
|
+
readonly display: {
|
|
134
|
+
readonly t: "%v";
|
|
135
|
+
readonly e: {
|
|
136
|
+
readonly none: "hidden";
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
readonly overflow: "overflow-%v";
|
|
140
|
+
readonly overflowX: "overflow-x-%v";
|
|
141
|
+
readonly overflowY: "overflow-y-%v";
|
|
142
|
+
readonly position: "%v";
|
|
143
|
+
readonly contentFit: "object-%v";
|
|
144
|
+
readonly colorMode: "uds-color-mode-%v";
|
|
145
|
+
readonly scaleMode: "uds-scale-mode-%v";
|
|
146
|
+
readonly width: "w-%v";
|
|
147
|
+
readonly height: "h-%v";
|
|
148
|
+
readonly dropShadow: "uds-drop-shadow-%v";
|
|
149
|
+
readonly insetShadow: "uds-inset-shadow-%v";
|
|
150
|
+
readonly nestedBorderRadiusSize: "uds-nested-border-radius-size-%v";
|
|
151
|
+
readonly nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v";
|
|
152
|
+
readonly nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v";
|
|
153
|
+
readonly nestedBorderRadius: {
|
|
154
|
+
readonly t: "uds-nested-border-radius-%v";
|
|
155
|
+
readonly e: {
|
|
156
|
+
readonly true: "uds-nested-border-radius";
|
|
157
|
+
};
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
//#endregion
|
|
161
|
+
export { type VariantTemplate, styleVariantTemplates };
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
//#region src/styles/styleVariantTemplates.ts
|
|
3
|
+
/**
|
|
4
|
+
* Compact class-name templates for the hand-written style props in
|
|
5
|
+
* `./variants.ts`. The enumerated `variants` map stays the build-time source
|
|
6
|
+
* of truth (CSS generation, purging, public `tokens` export); the runtime
|
|
7
|
+
* styler derives class names from these templates instead so the ~50 kB
|
|
8
|
+
* enumeration never enters the client bundle.
|
|
9
|
+
*
|
|
10
|
+
* `variantClass.test.ts` exhaustively asserts template-derived classes equal
|
|
11
|
+
* the `variants` map, so any drift fails CI.
|
|
12
|
+
*/
|
|
13
|
+
const styleVariantTemplates = {
|
|
14
|
+
color: "text-%v",
|
|
15
|
+
placeholderColor: "placeholder:text-%v",
|
|
16
|
+
fontFamily: "uds-font-family-%v",
|
|
17
|
+
fontSize: "uds-font-size-%v",
|
|
18
|
+
fontWeight: "uds-font-weight-%v",
|
|
19
|
+
lineHeight: "uds-line-height-%v",
|
|
20
|
+
letterSpacing: "uds-letter-spacing-%v",
|
|
21
|
+
textAlign: "text-%v",
|
|
22
|
+
textTransform: {
|
|
23
|
+
t: "uds-text-transform-%v",
|
|
24
|
+
e: {
|
|
25
|
+
none: "normal-case",
|
|
26
|
+
uppercase: "uppercase",
|
|
27
|
+
lowercase: "lowercase",
|
|
28
|
+
capitalize: "capitalize"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
spacing: "p-%v",
|
|
32
|
+
spacingHorizontal: "px-%v",
|
|
33
|
+
spacingVertical: "py-%v",
|
|
34
|
+
spacingBottom: "pb-%v",
|
|
35
|
+
spacingEnd: "pe-%v",
|
|
36
|
+
spacingStart: "ps-%v",
|
|
37
|
+
spacingTop: "pt-%v",
|
|
38
|
+
offset: "-m-%v",
|
|
39
|
+
offsetVertical: "-my-%v",
|
|
40
|
+
offsetHorizontal: "-mx-%v",
|
|
41
|
+
offsetBottom: "-mb-%v",
|
|
42
|
+
offsetEnd: "-me-%v",
|
|
43
|
+
offsetStart: "-ms-%v",
|
|
44
|
+
offsetTop: "-mt-%v",
|
|
45
|
+
columnGap: "gap-x-%v",
|
|
46
|
+
rowGap: "gap-y-%v",
|
|
47
|
+
backgroundColor: "bg-%v",
|
|
48
|
+
borderColor: "border-%v",
|
|
49
|
+
borderStartColor: "border-s-%v",
|
|
50
|
+
borderEndColor: "border-e-%v",
|
|
51
|
+
borderBottomColor: "border-b-%v",
|
|
52
|
+
borderTopColor: "border-t-%v",
|
|
53
|
+
borderRadius: "uds-border-radius-%v",
|
|
54
|
+
borderTopStartRadius: "uds-border-top-start-radius-%v",
|
|
55
|
+
borderTopEndRadius: "uds-border-top-end-radius-%v",
|
|
56
|
+
borderBottomStartRadius: "uds-border-bottom-start-radius-%v",
|
|
57
|
+
borderBottomEndRadius: "uds-border-bottom-end-radius-%v",
|
|
58
|
+
borderWidth: "uds-border-width-%v",
|
|
59
|
+
borderVerticalWidth: "uds-border-width-y-%v",
|
|
60
|
+
borderHorizontalWidth: "uds-border-width-x-%v",
|
|
61
|
+
borderStartWidth: "uds-border-width-start-%v",
|
|
62
|
+
borderEndWidth: "uds-border-width-end-%v",
|
|
63
|
+
borderTopWidth: "uds-border-width-top-%v",
|
|
64
|
+
borderBottomWidth: "uds-border-width-bottom-%v",
|
|
65
|
+
avatarSize: "avatarSize-%v",
|
|
66
|
+
iconSize: "iconSize-%v leading-none",
|
|
67
|
+
alignContent: {
|
|
68
|
+
t: "content-%v",
|
|
69
|
+
e: {
|
|
70
|
+
"flex-start": "content-start",
|
|
71
|
+
"flex-end": "content-end",
|
|
72
|
+
"space-between": "content-between",
|
|
73
|
+
"space-around": "content-around"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
alignItems: {
|
|
77
|
+
t: "items-%v",
|
|
78
|
+
e: {
|
|
79
|
+
"flex-start": "items-start",
|
|
80
|
+
"flex-end": "items-end"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
alignSelf: {
|
|
84
|
+
t: "self-%v",
|
|
85
|
+
e: {
|
|
86
|
+
"flex-start": "self-start",
|
|
87
|
+
"flex-end": "self-end"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
flex: "flex-%v",
|
|
91
|
+
flexDirection: {
|
|
92
|
+
t: "flex-%v",
|
|
93
|
+
e: {
|
|
94
|
+
column: "flex-col",
|
|
95
|
+
"column-reverse": "flex-col-reverse"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
flexGrow: {
|
|
99
|
+
t: "grow-[%v]",
|
|
100
|
+
e: {
|
|
101
|
+
"0": "grow-0",
|
|
102
|
+
"1": "grow"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
flexShrink: {
|
|
106
|
+
t: "shrink-%v",
|
|
107
|
+
e: { "1": "shrink" }
|
|
108
|
+
},
|
|
109
|
+
flexWrap: "flex-%v",
|
|
110
|
+
justifyContent: {
|
|
111
|
+
t: "justify-%v",
|
|
112
|
+
e: {
|
|
113
|
+
"flex-start": "justify-start",
|
|
114
|
+
"flex-end": "justify-end",
|
|
115
|
+
"space-between": "justify-between",
|
|
116
|
+
"space-around": "justify-around",
|
|
117
|
+
"space-evenly": "justify-evenly"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
flexBasis: "basis-[%v]",
|
|
121
|
+
display: {
|
|
122
|
+
t: "%v",
|
|
123
|
+
e: { none: "hidden" }
|
|
124
|
+
},
|
|
125
|
+
overflow: "overflow-%v",
|
|
126
|
+
overflowX: "overflow-x-%v",
|
|
127
|
+
overflowY: "overflow-y-%v",
|
|
128
|
+
position: "%v",
|
|
129
|
+
contentFit: "object-%v",
|
|
130
|
+
colorMode: "uds-color-mode-%v",
|
|
131
|
+
scaleMode: "uds-scale-mode-%v",
|
|
132
|
+
width: "w-%v",
|
|
133
|
+
height: "h-%v",
|
|
134
|
+
dropShadow: "uds-drop-shadow-%v",
|
|
135
|
+
insetShadow: "uds-inset-shadow-%v",
|
|
136
|
+
nestedBorderRadiusSize: "uds-nested-border-radius-size-%v",
|
|
137
|
+
nestedBorderRadiusWidth: "uds-nested-border-radius-width-%v",
|
|
138
|
+
nestedBorderRadiusSpacing: "uds-nested-border-radius-spacing-%v",
|
|
139
|
+
nestedBorderRadius: {
|
|
140
|
+
t: "uds-nested-border-radius-%v",
|
|
141
|
+
e: { true: "uds-nested-border-radius" }
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
//#endregion
|
|
145
|
+
export { styleVariantTemplates };
|
package/dist/styles/styler.cjs
CHANGED
|
@@ -3,10 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
require("../_virtual/_rolldown/runtime.cjs");
|
|
4
4
|
const require_flags = require("../flags.cjs");
|
|
5
5
|
const require_utils_falsyToString = require("../utils/falsyToString.cjs");
|
|
6
|
-
const
|
|
7
|
-
|
|
6
|
+
const require_styles_udsTailwindMerge = require("./udsTailwindMerge.cjs");
|
|
7
|
+
const require_styles_variantClass = require("./variantClass.cjs");
|
|
8
8
|
let clsx = require("clsx");
|
|
9
|
-
let tailwind_merge = require("tailwind-merge");
|
|
10
9
|
//#region src/styles/styler.ts
|
|
11
10
|
const createObjectWithoutPrototype = () => Object.create(null);
|
|
12
11
|
const { useGetStylesCache, skipTailwindMerge } = require_flags.getFeatureFlags();
|
|
@@ -23,25 +22,17 @@ function normalizeObject(props) {
|
|
|
23
22
|
}
|
|
24
23
|
return sorted;
|
|
25
24
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"text-color": [{ text: [..._yahoo_uds_fixtures.foregroundColors, ..._yahoo_uds_fixtures.spectrumColors] }],
|
|
35
|
-
"bg-color": [{ bg: _yahoo_uds_fixtures.backgroundColors }],
|
|
36
|
-
"font-family": [{ font: ["icons", ..._yahoo_uds_fixtures.textVariants] }],
|
|
37
|
-
leading: [{ leading: _yahoo_uds_fixtures.textVariants }]
|
|
38
|
-
},
|
|
39
|
-
conflictingClassGroups: {}
|
|
40
|
-
}
|
|
41
|
-
});
|
|
25
|
+
/**
|
|
26
|
+
* !WARNING: The `@__PURE__` annotation on the `createTailwindMerge(...)` call
|
|
27
|
+
* inside `./udsTailwindMerge.ts` is load-bearing for tree-shaking — without
|
|
28
|
+
* it, bundlers must assume the module-level call has side effects and keep
|
|
29
|
+
* the merge engine in any bundle that imports anything from this module. Do
|
|
30
|
+
* not remove it without re-checking bundle output (e.g. `esbuild --bundle
|
|
31
|
+
* --minify` an entry that imports a single lightweight export).
|
|
32
|
+
*/
|
|
42
33
|
const cx = (...inputs) => {
|
|
43
34
|
const finalClassName = (0, clsx.clsx)(inputs);
|
|
44
|
-
return skipTailwindMerge ? finalClassName :
|
|
35
|
+
return skipTailwindMerge ? finalClassName : require_styles_udsTailwindMerge.udsTwMerge(finalClassName);
|
|
45
36
|
};
|
|
46
37
|
const cva = (config) => {
|
|
47
38
|
const { base, variants, defaultVariants, compoundVariants } = config;
|
|
@@ -85,7 +76,27 @@ const cva = (config) => {
|
|
|
85
76
|
return cx(base, variantClassNames, compoundVariantClassNames, className);
|
|
86
77
|
};
|
|
87
78
|
};
|
|
88
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Resolves style/variant props to class names via template substitution
|
|
81
|
+
* (`./variantClass.ts`) instead of a `cva({ variants })` lookup, so neither
|
|
82
|
+
* the hand-written `variants` map nor the auto-generated `autoVariants` map
|
|
83
|
+
* (~70 kB minified combined) ships in the client bundle. Output is identical:
|
|
84
|
+
* the templates are exhaustively verified against the maps in
|
|
85
|
+
* `variantClass.test.ts`.
|
|
86
|
+
*
|
|
87
|
+
* !WARNING: This mirrors the `cva()` hot path — same iteration order, same
|
|
88
|
+
* `cx` merge — and is equally performance-sensitive. Benchmark before changing.
|
|
89
|
+
*/
|
|
90
|
+
const getStylesInternal = (maybeProps) => {
|
|
91
|
+
if (!maybeProps) return cx();
|
|
92
|
+
const { className, ...props } = maybeProps;
|
|
93
|
+
const variantClassNames = [];
|
|
94
|
+
for (const prop in props) {
|
|
95
|
+
const propValue = props[prop];
|
|
96
|
+
variantClassNames.push(require_styles_variantClass.resolveVariantClass(prop, require_utils_falsyToString.falsyToString(propValue)));
|
|
97
|
+
}
|
|
98
|
+
return cx(variantClassNames, className);
|
|
99
|
+
};
|
|
89
100
|
const styleCache = /* @__PURE__ */ new Map();
|
|
90
101
|
const getStylesCacheKeySymbol = Symbol("getStylesCacheKey");
|
|
91
102
|
const generateCacheKey = (props) => {
|