@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.
Files changed (61) hide show
  1. package/dist/automated-config/dist/generated/autoVariantTemplates.cjs +218 -0
  2. package/dist/automated-config/dist/generated/autoVariantTemplates.js +218 -0
  3. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
  4. package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
  5. package/dist/components/Icon.cjs +3 -6
  6. package/dist/components/Icon.js +3 -6
  7. package/dist/components/IconSlot.cjs +1 -1
  8. package/dist/components/IconSlot.js +1 -1
  9. package/dist/components/client/Button/Button.cjs +1 -1
  10. package/dist/components/client/Button/Button.js +1 -1
  11. package/dist/components/client/IconButton/IconButton.cjs +1 -1
  12. package/dist/components/client/IconButton/IconButton.js +1 -1
  13. package/dist/components/client/Menu/Menu.Content.cjs +1 -1
  14. package/dist/components/client/Menu/Menu.Content.js +1 -1
  15. package/dist/components/client/Popover/PopoverContent.cjs +1 -1
  16. package/dist/components/client/Popover/PopoverContent.js +1 -1
  17. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
  18. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
  19. package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
  20. package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
  21. package/dist/index.cjs +3 -3
  22. package/dist/index.js +3 -3
  23. package/dist/styles/styleVariantTemplates.cjs +146 -0
  24. package/dist/styles/styleVariantTemplates.d.cts +161 -0
  25. package/dist/styles/styleVariantTemplates.d.ts +161 -0
  26. package/dist/styles/styleVariantTemplates.js +145 -0
  27. package/dist/styles/styler.cjs +32 -21
  28. package/dist/styles/styler.d.cts +13 -281
  29. package/dist/styles/styler.d.ts +13 -281
  30. package/dist/styles/styler.js +32 -21
  31. package/dist/styles/stylerTypes.d.cts +1 -1
  32. package/dist/styles/stylerTypes.d.ts +1 -1
  33. package/dist/styles/textColorVariants.cjs +40 -0
  34. package/dist/styles/textColorVariants.d.cts +39 -0
  35. package/dist/styles/textColorVariants.d.ts +39 -0
  36. package/dist/styles/textColorVariants.js +39 -0
  37. package/dist/styles/udsTailwindMerge.cjs +522 -0
  38. package/dist/styles/udsTailwindMerge.d.cts +7 -0
  39. package/dist/styles/udsTailwindMerge.d.ts +7 -0
  40. package/dist/styles/udsTailwindMerge.js +520 -0
  41. package/dist/styles/variantClass.cjs +31 -0
  42. package/dist/styles/variantClass.d.cts +12 -0
  43. package/dist/styles/variantClass.d.ts +12 -0
  44. package/dist/styles/variantClass.js +30 -0
  45. package/dist/styles/variants.cjs +3 -29
  46. package/dist/styles/variants.js +3 -29
  47. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
  48. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
  49. package/dist/tokens/index.cjs +1 -1
  50. package/dist/tokens/index.js +1 -1
  51. package/dist/tokens/utils/getFontUrls.cjs +8 -1
  52. package/dist/tokens/utils/getFontUrls.d.cts +7 -0
  53. package/dist/tokens/utils/getFontUrls.d.ts +7 -0
  54. package/dist/tokens/utils/getFontUrls.js +8 -1
  55. package/dist/uds/generated/componentData.cjs +365 -361
  56. package/dist/uds/generated/componentData.js +365 -361
  57. package/dist/uds/generated/tailwindPurge.cjs +80 -80
  58. package/dist/uds/generated/tailwindPurge.js +80 -80
  59. package/generated/componentData.json +590 -590
  60. package/generated/tailwindPurge.ts +1 -1
  61. 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 };
@@ -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 require_styles_variants = require("./variants.cjs");
7
- let _yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
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
- const twMerge = (0, tailwind_merge.extendTailwindMerge)({
27
- extend: { theme: {
28
- borderColor: _yahoo_uds_fixtures.lineColors,
29
- borderWidth: _yahoo_uds_fixtures.borderWidthsWithElevation,
30
- borderRadius: _yahoo_uds_fixtures.borderRadii
31
- } },
32
- override: {
33
- classGroups: {
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 : twMerge(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
- const getStylesInternal = cva({ variants: require_styles_variants.variants });
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) => {