@yahoo/uds 3.143.0 → 3.144.1

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 (19) hide show
  1. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
  2. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
  3. package/dist/styles/styler.d.cts +1 -1
  4. package/dist/styles/styler.d.ts +1 -1
  5. package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts +1 -1
  6. package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts +1 -1
  7. package/dist/tailwind/dist/utils/parseTokens.cjs +9 -3
  8. package/dist/tailwind/dist/utils/parseTokens.d.cts.map +1 -1
  9. package/dist/tailwind/dist/utils/parseTokens.d.ts.map +1 -1
  10. package/dist/tailwind/dist/utils/parseTokens.js +9 -3
  11. package/dist/tailwind/dist/utils/parseTokens.js.map +1 -1
  12. package/dist/types/dist/index.d.cts +2 -2
  13. package/dist/types/dist/index.d.ts +2 -2
  14. package/dist/uds/generated/componentData.cjs +1672 -1672
  15. package/dist/uds/generated/componentData.js +1672 -1672
  16. package/dist/uds/package.cjs +1 -1
  17. package/dist/uds/package.js +1 -1
  18. package/generated/componentData.json +2093 -2093
  19. package/package.json +2 -2
package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts CHANGED
@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
29
29
  gap: SpacingAlias;
30
30
  dismissButtonSpacing: SpacingAlias;
31
31
  dismissIconSize: number;
32
- ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
32
+ ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
33
  animationDuration: number;
34
34
  };
35
35
  //#endregion
package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts CHANGED
@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
30
30
  gap: SpacingAlias;
31
31
  dismissButtonSpacing: SpacingAlias;
32
32
  dismissIconSize: number;
33
- ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
+ ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
34
34
  animationDuration: number;
35
35
  };
36
36
  //#endregion
package/dist/styles/styler.d.cts CHANGED
@@ -192,7 +192,7 @@ declare const getStylesInternal: (props?: ({
192
192
  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" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
193
193
  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;
194
194
  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;
195
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
195
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
196
196
  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;
197
197
  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;
198
198
  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;
package/dist/styles/styler.d.ts CHANGED
@@ -192,7 +192,7 @@ declare const getStylesInternal: (props?: ({
192
192
  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" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
193
193
  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;
194
194
  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;
195
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
195
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
196
196
  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;
197
197
  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;
198
198
  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;
package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.cts CHANGED
@@ -18,7 +18,7 @@ import { FontConfig } from "../../types/dist/index.cjs";
18
18
  * addBase(fontVars);
19
19
  *
20
20
  */
21
- declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>;
21
+ declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>;
22
22
  //#endregion
23
23
  export { getFontStyles };
24
24
  //# sourceMappingURL=getFontStyles.d.cts.map
package/dist/tailwind/dist/tailwind/utils/getFontStyles.d.ts CHANGED
@@ -18,7 +18,7 @@ import { FontConfig } from "../../types/dist/index.js";
18
18
  * addBase(fontVars);
19
19
  *
20
20
  */
21
- declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-sans-alt" | "--uds-font-serif" | "--uds-font-serif-alt" | "--uds-font-mono", string>;
21
+ declare function getFontStyles(fontConfig: Partial<FontConfig>): Record<"--uds-font-sans" | "--uds-font-serif" | "--uds-font-mono" | "--uds-font-sans-alt" | "--uds-font-serif-alt", string>;
22
22
  //#endregion
23
23
  export { getFontStyles };
24
24
  //# sourceMappingURL=getFontStyles.d.ts.map
package/dist/tailwind/dist/utils/parseTokens.cjs CHANGED
@@ -15,6 +15,9 @@ function shouldIncludeOpacity(opacity) {
15
15
  const parsedOpacity = parseInt(opacity, 10);
16
16
  return !isNaN(parsedOpacity) && parsedOpacity !== 100;
17
17
  }
18
+ function formatColorVarWithOpacity(name, opacity) {
19
+ return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;
20
+ }
18
21
  function resolveFocusRingColor(color) {
19
22
  switch (color.type) {
20
23
  case "spectrum": return `rgb(var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;
@@ -42,7 +45,7 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
42
45
  const name = `--uds-${paletteType}-color-${paletteKey}`;
43
46
  rootVars[name] = `var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
44
47
  const opacityValue = opacity !== void 0 ? require_opacity.parseOpacityStep(opacity) : void 0;
45
- tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue) ? `rgb(var(${name}) / ${opacityValue}%)` : `rgb(var(${name}))`;
48
+ tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(name, opacityValue);
46
49
  }
47
50
  });
48
51
  require_entries.entries(elevationPresets).forEach(([level, elevationPreset]) => {
@@ -62,9 +65,12 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
62
65
  case "spectrum":
63
66
  rootVars[name] = `rgb(var(--${require_index$1.SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
64
67
  break;
65
- case "line":
66
- rootVars[name] = `rgb(var(--${require_index$1.LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;
68
+ case "line": {
69
+ const lineColor = palette.line[elevationPreset[key].value];
70
+ const opacityValue = lineColor.opacity !== void 0 ? require_opacity.parseOpacityStep(lineColor.opacity) : void 0;
71
+ rootVars[name] = formatColorVarWithOpacity(`--${require_index$1.LINE_COLOR_PREFIX}-${elevationPreset[key].value}`, opacityValue);
67
72
  break;
73
+ }
68
74
  }
69
75
  }
70
76
  if (key === "borderWidth") {
package/dist/tailwind/dist/utils/parseTokens.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"parseTokens.d.cts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAoDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBAsI9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
1
+ {"version":3,"file":"parseTokens.d.cts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAwDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBA+I9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
package/dist/tailwind/dist/utils/parseTokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"parseTokens.d.ts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAoDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBAsI9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
1
+ {"version":3,"file":"parseTokens.d.ts","names":[],"sources":["../../src/utils/parseTokens.ts"],"mappings":";;;;;KAwDK,yBAAA,GAA4B,OAAA,CAAQ,MAAA,CAAO,cAAA,EAAgB,eAAA;AAAA,iBAevD,eAAA,CACP,MAAA,EAAQ,YAAA,EACR,gBAAA,EAAkB,yBAAA,EAClB,eAAA,GAAkB,eAAA;;;;cAKA,MAAA,CAAO,GAAA,EAAK,MAAA,CAAO,OAAA;uBAEzB,WAAA,GAAc,MAAA,OAAa,aAAA,CAAc,GAAA;EAAA;AAAA;AAAA,iBA+I9C,oBAAA,WAA+B,MAAA,iBAAA,CAAwB,MAAA,UAAgB,MAAA,EAAQ,CAAA;SAGrE,MAAA;QACD,MAAA;kBACU,MAAA;AAAA;AAAA,KAkBvB,SAAA,GAAY,IAAA,CAAK,qBAAA;EACpB,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW,UAAA,QAAkB,eAAA;EAC/C,SAAA,EAAW,MAAA,CACT,SAAA;IAEE,YAAA,EAAc,UAAA,QAAkB,oBAAA;IAChC,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,WAAA,EAAa,UAAA,QAAkB,oBAAA;IAC/B,SAAA,EAAW,UAAA,QAAkB,oBAAA;EAAA;AAAA;AAAA,iBAsBnB,WAAA,CAAY,MAAA,EAAQ,qBAAA,GAAwB,SAAA"}
package/dist/tailwind/dist/utils/parseTokens.js CHANGED
@@ -15,6 +15,9 @@ function shouldIncludeOpacity(opacity) {
15
15
  const parsedOpacity = parseInt(opacity, 10);
16
16
  return !isNaN(parsedOpacity) && parsedOpacity !== 100;
17
17
  }
18
+ function formatColorVarWithOpacity(name, opacity) {
19
+ return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;
20
+ }
18
21
  function resolveFocusRingColor(color) {
19
22
  switch (color.type) {
20
23
  case "spectrum": return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;
@@ -42,7 +45,7 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
42
45
  const name = `--uds-${paletteType}-color-${paletteKey}`;
43
46
  rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;
44
47
  const opacityValue = opacity !== void 0 ? parseOpacityStep(opacity) : void 0;
45
- tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue) ? `rgb(var(${name}) / ${opacityValue}%)` : `rgb(var(${name}))`;
48
+ tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(name, opacityValue);
46
49
  }
47
50
  });
48
51
  entries(elevationPresets).forEach(([level, elevationPreset]) => {
@@ -62,9 +65,12 @@ function transformColors(colors, elevationPresets, focusRingConfig) {
62
65
  case "spectrum":
63
66
  rootVars[name] = `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;
64
67
  break;
65
- case "line":
66
- rootVars[name] = `rgb(var(--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;
68
+ case "line": {
69
+ const lineColor = palette.line[elevationPreset[key].value];
70
+ const opacityValue = lineColor.opacity !== void 0 ? parseOpacityStep(lineColor.opacity) : void 0;
71
+ rootVars[name] = formatColorVarWithOpacity(`--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}`, opacityValue);
67
72
  break;
73
+ }
68
74
  }
69
75
  }
70
76
  if (key === "borderWidth") {
package/dist/tailwind/dist/utils/parseTokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"parseTokens.js","names":[],"sources":["../../src/utils/parseTokens.ts"],"sourcesContent":["import type { UniversalTokensConfig } from '@yahoo/uds-config';\nimport {\n AVATAR_SIZE_PREFIX,\n BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX,\n BACKGROUND_BLUR_RADIUS_PREFIX,\n BACKGROUND_COLOR_PREFIX,\n BORDER_RADIUS_PREFIX,\n BORDER_WIDTH_PREFIX,\n DROP_SHADOW_PREFIX,\n getShadowLayerValue,\n ICON_SIZE_PREFIX,\n INSET_SHADOW_PREFIX,\n LINE_COLOR_PREFIX,\n OUTLINE_PREFIX,\n SPECTRUM_COLOR_PREFIX,\n UDS_PREFIX,\n} from '@yahoo/uds-css-tokens';\nimport { alwaysPalette } from '@yahoo/uds-palette';\nimport type {\n ColorMode,\n ColorsConfig,\n ElevationLevel,\n ElevationPreset,\n FocusRingColor,\n FocusRingConfig,\n Hue,\n HueStep,\n OpacityStep,\n PaletteConfig,\n PaletteType,\n ScaleMode,\n} from '@yahoo/uds-types';\n\nimport { entries } from './entries';\nimport { mapValues } from './mapValues';\nimport { parseOpacityStep } from './opacity';\n\n/** Converts a SpectrumValueEntry to a space-separated RGB string for CSS variables. */\nfunction spectrumValueToRgbString(value: { rgb: { r: number; g: number; b: number } }): string {\n const { r, g, b } = value.rgb;\n return `${r} ${g} ${b}`;\n}\n\nfunction shouldIncludeOpacity(opacity: OpacityStep | undefined): boolean {\n if (!opacity) {\n return false;\n }\n\n const parsedOpacity = parseInt(opacity, 10);\n return !isNaN(parsedOpacity) && parsedOpacity !== 100;\n}\n\ntype ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;\n\nfunction resolveFocusRingColor(color: FocusRingColor): string {\n switch (color.type) {\n case 'spectrum':\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;\n case 'line':\n return `rgb(var(--${LINE_COLOR_PREFIX}-${color.value}))`;\n case 'always':\n return alwaysPalette[color.value as keyof typeof alwaysPalette];\n default:\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n }\n}\n\nfunction transformColors(\n colors: ColorsConfig,\n elevationPresets: ColorModeElevationPresets,\n focusRingConfig?: FocusRingConfig,\n) {\n const { palette, spectrum } = colors;\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {\n spectrum: {} as Record<Hue, Record<HueStep, string>>,\n palette: {} as {\n [key in PaletteType]: Record<keyof PaletteConfig[key], string>;\n },\n };\n\n for (const [hue, hueSteps] of entries(spectrum)) {\n for (const [hueStep, value] of entries(hueSteps)) {\n const name = `${hue}-${hueStep}`;\n const varKey = `--${SPECTRUM_COLOR_PREFIX}-${name}`;\n if (!tailwindConfig.spectrum[hue]) {\n tailwindConfig.spectrum[hue] = {} as Record<HueStep, string>;\n }\n tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;\n rootVars[varKey] = spectrumValueToRgbString(value);\n }\n }\n\n entries(palette).forEach(([paletteType, paletteConfig]) => {\n for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {\n if (!(paletteType in tailwindConfig.palette)) {\n // @ts-expect-error we fill this object later\n tailwindConfig.palette[paletteType] = {};\n }\n const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;\n rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;\n const opacityValue = opacity !== undefined ? parseOpacityStep(opacity) : undefined;\n // @ts-expect-error this is fine\n tailwindConfig.palette[paletteType][paletteKey] = shouldIncludeOpacity(opacityValue)\n ? `rgb(var(${name}) / ${opacityValue}%)`\n : `rgb(var(${name}))`;\n }\n });\n\n // Elevation levels\n entries(elevationPresets).forEach(([level, elevationPreset]) => {\n if (elevationPreset) {\n entries(elevationPreset).forEach(([key]) => {\n // background color\n if (key === 'finalBackgroundValue') {\n const { r, g, b, a } = elevationPreset[key];\n const alpha = parseInt(a) / 100;\n const name = `--${BACKGROUND_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;\n }\n\n // border color\n if (key === 'borderColor') {\n const name = `--${LINE_COLOR_PREFIX}-elevation-${level}`;\n\n switch (elevationPreset[key].type) {\n case 'always':\n rootVars[name] = alwaysPalette[elevationPreset[key].value];\n break;\n case 'spectrum':\n rootVars[name] =\n `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;\n break;\n case 'line':\n rootVars[name] = `rgb(var(--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}))`;\n break;\n }\n }\n\n // border width\n if (key === 'borderWidth') {\n const name = `--${BORDER_WIDTH_PREFIX}-elevation-${level}`;\n rootVars[name] = `var(--${BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;\n }\n\n // drop shadow\n if (key === 'dropShadow') {\n const name = `--${DROP_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'drop',\n }),\n )\n .join(', ')\n : `var(--${DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // inset shadow\n if (key === 'insetShadow') {\n const name = `--${INSET_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'inset',\n }),\n )\n .join(', ')\n : `var(--${INSET_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // background blur radius\n if (key === 'backgroundBlurRadius') {\n const name = `--${BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;\n rootVars[name] = `blur(${elevationPreset[key]}px)`;\n }\n\n // background blur fallback value\n if (key === 'fallbackBlurredBackgroundValue') {\n const { r, g, b } = elevationPreset[key];\n const name = `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgb(${r}, ${g}, ${b})`;\n }\n });\n }\n });\n\n rootVars[`--${OUTLINE_PREFIX}-offset`] = focusRingConfig ? `${focusRingConfig.offset}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-width`] = focusRingConfig ? `${focusRingConfig.width}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-style`] = 'solid';\n rootVars[`--${OUTLINE_PREFIX}-color`] = focusRingConfig\n ? resolveFocusRingColor(focusRingConfig.color)\n : `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n\n return {\n _vars: rootVars,\n _raw: colors,\n tailwindConfig,\n };\n}\n\nfunction transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T) {\n if (!config) {\n return {\n _vars: {} as Record<string, string>,\n _raw: {} as Record<string, number>,\n tailwindConfig: {} as Record<string, string>,\n };\n }\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {} as Record<string, string>;\n for (const [variant, value] of entries(config)) {\n const rootVarKey = `--${prefix}-${variant}`;\n const rootVarValue = `${value}px`;\n rootVars[rootVarKey] = rootVarValue;\n tailwindConfig[variant] = `var(${rootVarKey})`;\n }\n return {\n _vars: rootVars,\n _raw: config,\n tailwindConfig,\n };\n}\n\ntype WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {\n colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;\n scaleMode: Record<\n ScaleMode,\n {\n borderRadius: ReturnType<typeof transformNumericToPx>;\n borderWidth: ReturnType<typeof transformNumericToPx>;\n avatarSizes: ReturnType<typeof transformNumericToPx>;\n iconSizes: ReturnType<typeof transformNumericToPx>;\n }\n >;\n};\n\nfunction getElevationPresetsForColorMode(\n colorMode: ColorMode,\n config: UniversalTokensConfig,\n): ColorModeElevationPresets {\n if (!config.elevation) {\n return {};\n }\n\n const result: ColorModeElevationPresets = {};\n\n entries(config.elevation).forEach(([level, levelPreset]) => {\n result[level] = levelPreset[colorMode];\n });\n\n return result;\n}\n\nexport function parseTokens(config: UniversalTokensConfig): WebTokens {\n const { colorMode, scaleMode } = config;\n\n return {\n ...config,\n colorMode: {\n light: transformColors(\n colorMode.light,\n getElevationPresetsForColorMode('light', config),\n config.focusRing?.light,\n ),\n dark: transformColors(\n colorMode.dark,\n getElevationPresetsForColorMode('dark', config),\n config.focusRing?.dark,\n ),\n },\n scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {\n return {\n borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),\n borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),\n avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),\n iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes),\n };\n }),\n };\n}\n\nexport { type WebTokens };\n"],"mappings":"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"}
1
+ {"version":3,"file":"parseTokens.js","names":[],"sources":["../../src/utils/parseTokens.ts"],"sourcesContent":["import type { UniversalTokensConfig } from '@yahoo/uds-config';\nimport {\n AVATAR_SIZE_PREFIX,\n BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX,\n BACKGROUND_BLUR_RADIUS_PREFIX,\n BACKGROUND_COLOR_PREFIX,\n BORDER_RADIUS_PREFIX,\n BORDER_WIDTH_PREFIX,\n DROP_SHADOW_PREFIX,\n getShadowLayerValue,\n ICON_SIZE_PREFIX,\n INSET_SHADOW_PREFIX,\n LINE_COLOR_PREFIX,\n OUTLINE_PREFIX,\n SPECTRUM_COLOR_PREFIX,\n UDS_PREFIX,\n} from '@yahoo/uds-css-tokens';\nimport { alwaysPalette } from '@yahoo/uds-palette';\nimport type {\n ColorMode,\n ColorsConfig,\n ElevationLevel,\n ElevationPreset,\n FocusRingColor,\n FocusRingConfig,\n Hue,\n HueStep,\n OpacityStep,\n PaletteConfig,\n PaletteType,\n ScaleMode,\n} from '@yahoo/uds-types';\n\nimport { entries } from './entries';\nimport { mapValues } from './mapValues';\nimport { parseOpacityStep } from './opacity';\n\n/** Converts a SpectrumValueEntry to a space-separated RGB string for CSS variables. */\nfunction spectrumValueToRgbString(value: { rgb: { r: number; g: number; b: number } }): string {\n const { r, g, b } = value.rgb;\n return `${r} ${g} ${b}`;\n}\n\nfunction shouldIncludeOpacity(opacity: OpacityStep | undefined): boolean {\n if (!opacity) {\n return false;\n }\n\n const parsedOpacity = parseInt(opacity, 10);\n return !isNaN(parsedOpacity) && parsedOpacity !== 100;\n}\n\nfunction formatColorVarWithOpacity(name: string, opacity: OpacityStep | undefined): string {\n return shouldIncludeOpacity(opacity) ? `rgb(var(${name}) / ${opacity}%)` : `rgb(var(${name}))`;\n}\n\ntype ColorModeElevationPresets = Partial<Record<ElevationLevel, ElevationPreset>>;\n\nfunction resolveFocusRingColor(color: FocusRingColor): string {\n switch (color.type) {\n case 'spectrum':\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${color.value.hue}-${color.value.step}))`;\n case 'line':\n return `rgb(var(--${LINE_COLOR_PREFIX}-${color.value}))`;\n case 'always':\n return alwaysPalette[color.value as keyof typeof alwaysPalette];\n default:\n return `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n }\n}\n\nfunction transformColors(\n colors: ColorsConfig,\n elevationPresets: ColorModeElevationPresets,\n focusRingConfig?: FocusRingConfig,\n) {\n const { palette, spectrum } = colors;\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {\n spectrum: {} as Record<Hue, Record<HueStep, string>>,\n palette: {} as {\n [key in PaletteType]: Record<keyof PaletteConfig[key], string>;\n },\n };\n\n for (const [hue, hueSteps] of entries(spectrum)) {\n for (const [hueStep, value] of entries(hueSteps)) {\n const name = `${hue}-${hueStep}`;\n const varKey = `--${SPECTRUM_COLOR_PREFIX}-${name}`;\n if (!tailwindConfig.spectrum[hue]) {\n tailwindConfig.spectrum[hue] = {} as Record<HueStep, string>;\n }\n tailwindConfig.spectrum[hue][hueStep] = `rgb(var(${varKey}))`;\n rootVars[varKey] = spectrumValueToRgbString(value);\n }\n }\n\n entries(palette).forEach(([paletteType, paletteConfig]) => {\n for (const [paletteKey, { hue, step, opacity }] of Object.entries(paletteConfig)) {\n if (!(paletteType in tailwindConfig.palette)) {\n // @ts-expect-error we fill this object later\n tailwindConfig.palette[paletteType] = {};\n }\n const name = `--${UDS_PREFIX}-${paletteType}-color-${paletteKey}`;\n rootVars[name] = `var(--${SPECTRUM_COLOR_PREFIX}-${hue}-${step})`;\n const opacityValue = opacity !== undefined ? parseOpacityStep(opacity) : undefined;\n // @ts-expect-error this is fine\n tailwindConfig.palette[paletteType][paletteKey] = formatColorVarWithOpacity(\n name,\n opacityValue,\n );\n }\n });\n\n // Elevation levels\n entries(elevationPresets).forEach(([level, elevationPreset]) => {\n if (elevationPreset) {\n entries(elevationPreset).forEach(([key]) => {\n // background color\n if (key === 'finalBackgroundValue') {\n const { r, g, b, a } = elevationPreset[key];\n const alpha = parseInt(a) / 100;\n const name = `--${BACKGROUND_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgba(${r}, ${g}, ${b}, ${alpha})`;\n }\n\n // border color\n if (key === 'borderColor') {\n const name = `--${LINE_COLOR_PREFIX}-elevation-${level}`;\n\n switch (elevationPreset[key].type) {\n case 'always':\n rootVars[name] = alwaysPalette[elevationPreset[key].value];\n break;\n case 'spectrum':\n rootVars[name] =\n `rgb(var(--${SPECTRUM_COLOR_PREFIX}-${elevationPreset[key].value.hue}-${elevationPreset[key].value.step}))`;\n break;\n case 'line': {\n const lineColor = palette.line[elevationPreset[key].value];\n const opacityValue =\n lineColor.opacity !== undefined ? parseOpacityStep(lineColor.opacity) : undefined;\n\n rootVars[name] = formatColorVarWithOpacity(\n `--${LINE_COLOR_PREFIX}-${elevationPreset[key].value}`,\n opacityValue,\n );\n break;\n }\n }\n }\n\n // border width\n if (key === 'borderWidth') {\n const name = `--${BORDER_WIDTH_PREFIX}-elevation-${level}`;\n rootVars[name] = `var(--${BORDER_WIDTH_PREFIX}-${elevationPreset[key]})`;\n }\n\n // drop shadow\n if (key === 'dropShadow') {\n const name = `--${DROP_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'drop',\n }),\n )\n .join(', ')\n : `var(--${DROP_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // inset shadow\n if (key === 'insetShadow') {\n const name = `--${INSET_SHADOW_PREFIX}-elevation-${level}`;\n const configValue = elevationPreset[key];\n\n rootVars[name] = Array.isArray(configValue)\n ? configValue\n .map((preset, index) =>\n getShadowLayerValue({\n preset,\n prefix: index > 0 ? `${index + 1}` : undefined,\n shadowType: 'inset',\n }),\n )\n .join(', ')\n : `var(--${INSET_SHADOW_PREFIX}-${elevationPreset[key]})`;\n }\n\n // background blur radius\n if (key === 'backgroundBlurRadius') {\n const name = `--${BACKGROUND_BLUR_RADIUS_PREFIX}-elevation-${level}`;\n rootVars[name] = `blur(${elevationPreset[key]}px)`;\n }\n\n // background blur fallback value\n if (key === 'fallbackBlurredBackgroundValue') {\n const { r, g, b } = elevationPreset[key];\n const name = `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}-elevation-${level}`;\n rootVars[name] = `rgb(${r}, ${g}, ${b})`;\n }\n });\n }\n });\n\n rootVars[`--${OUTLINE_PREFIX}-offset`] = focusRingConfig ? `${focusRingConfig.offset}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-width`] = focusRingConfig ? `${focusRingConfig.width}px` : '2px';\n rootVars[`--${OUTLINE_PREFIX}-style`] = 'solid';\n rootVars[`--${OUTLINE_PREFIX}-color`] = focusRingConfig\n ? resolveFocusRingColor(focusRingConfig.color)\n : `rgb(var(--${SPECTRUM_COLOR_PREFIX}-gray-15))`;\n\n return {\n _vars: rootVars,\n _raw: colors,\n tailwindConfig,\n };\n}\n\nfunction transformNumericToPx<T extends Record<string, number>>(prefix: string, config: T) {\n if (!config) {\n return {\n _vars: {} as Record<string, string>,\n _raw: {} as Record<string, number>,\n tailwindConfig: {} as Record<string, string>,\n };\n }\n const rootVars: Record<string, string> = {};\n const tailwindConfig = {} as Record<string, string>;\n for (const [variant, value] of entries(config)) {\n const rootVarKey = `--${prefix}-${variant}`;\n const rootVarValue = `${value}px`;\n rootVars[rootVarKey] = rootVarValue;\n tailwindConfig[variant] = `var(${rootVarKey})`;\n }\n return {\n _vars: rootVars,\n _raw: config,\n tailwindConfig,\n };\n}\n\ntype WebTokens = Omit<UniversalTokensConfig, 'colorMode' | 'scaleMode' | 'fontFamily'> & {\n colorMode: Record<ColorMode, ReturnType<typeof transformColors>>;\n scaleMode: Record<\n ScaleMode,\n {\n borderRadius: ReturnType<typeof transformNumericToPx>;\n borderWidth: ReturnType<typeof transformNumericToPx>;\n avatarSizes: ReturnType<typeof transformNumericToPx>;\n iconSizes: ReturnType<typeof transformNumericToPx>;\n }\n >;\n};\n\nfunction getElevationPresetsForColorMode(\n colorMode: ColorMode,\n config: UniversalTokensConfig,\n): ColorModeElevationPresets {\n if (!config.elevation) {\n return {};\n }\n\n const result: ColorModeElevationPresets = {};\n\n entries(config.elevation).forEach(([level, levelPreset]) => {\n result[level] = levelPreset[colorMode];\n });\n\n return result;\n}\n\nexport function parseTokens(config: UniversalTokensConfig): WebTokens {\n const { colorMode, scaleMode } = config;\n\n return {\n ...config,\n colorMode: {\n light: transformColors(\n colorMode.light,\n getElevationPresetsForColorMode('light', config),\n config.focusRing?.light,\n ),\n dark: transformColors(\n colorMode.dark,\n getElevationPresetsForColorMode('dark', config),\n config.focusRing?.dark,\n ),\n },\n scaleMode: mapValues(scaleMode, ({ borderRadius, borderWidth, avatarSizes, iconSizes }) => {\n return {\n borderRadius: transformNumericToPx(BORDER_RADIUS_PREFIX, borderRadius),\n borderWidth: transformNumericToPx(BORDER_WIDTH_PREFIX, borderWidth),\n avatarSizes: transformNumericToPx(AVATAR_SIZE_PREFIX, avatarSizes),\n iconSizes: transformNumericToPx(ICON_SIZE_PREFIX, iconSizes),\n };\n }),\n };\n}\n\nexport { type WebTokens };\n"],"mappings":"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"}
package/dist/types/dist/index.d.cts CHANGED
@@ -640,7 +640,7 @@ interface UniversalRadioProps {
640
640
  size?: RadioSize;
641
641
  /** The label content displayed alongside the radio. */
642
642
  label?: string | ReactNode | (() => ReactNode);
643
- /** The value submitted with form data. @default '' */
643
+ /** The option value for this radio. Required when used inside a RadioGroup. @default '' */
644
644
  value?: string;
645
645
  /** The controlled checked state. */
646
646
  checked?: boolean;
@@ -654,7 +654,7 @@ interface UniversalRadioProps {
654
654
  interface UniversalRadioGroupProps {
655
655
  /** The name shared by all radios in the group (for form submission). */
656
656
  name?: string;
657
- /** The controlled selected value. */
657
+ /** The controlled selected option value. */
658
658
  value?: string;
659
659
  /** The initial selected value for uncontrolled mode. */
660
660
  defaultValue?: string;
package/dist/types/dist/index.d.ts CHANGED
@@ -640,7 +640,7 @@ interface UniversalRadioProps {
640
640
  size?: RadioSize;
641
641
  /** The label content displayed alongside the radio. */
642
642
  label?: string | ReactNode | (() => ReactNode);
643
- /** The value submitted with form data. @default '' */
643
+ /** The option value for this radio. Required when used inside a RadioGroup. @default '' */
644
644
  value?: string;
645
645
  /** The controlled checked state. */
646
646
  checked?: boolean;
@@ -654,7 +654,7 @@ interface UniversalRadioProps {
654
654
  interface UniversalRadioGroupProps {
655
655
  /** The name shared by all radios in the group (for form submission). */
656
656
  name?: string;
657
- /** The controlled selected value. */
657
+ /** The controlled selected option value. */
658
658
  value?: string;
659
659
  /** The initial selected value for uncontrolled mode. */
660
660
  defaultValue?: string;