@yahoo/uds 3.164.0 → 3.165.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 (91) hide show
  1. package/dist/cli/commands/sync.cjs +8 -0
  2. package/dist/cli/commands/sync.js +8 -0
  3. package/dist/components/client/Button/Button.cjs +5 -6
  4. package/dist/components/client/Button/Button.js +5 -6
  5. package/dist/components/client/Button/ButtonBase.cjs +4 -0
  6. package/dist/components/client/Button/ButtonBase.d.cts +2 -1
  7. package/dist/components/client/Button/ButtonBase.d.ts +2 -1
  8. package/dist/components/client/Button/ButtonBase.js +4 -0
  9. package/dist/components/client/Button/UDSButtonConfigProvider.cjs +45 -0
  10. package/dist/components/client/Button/UDSButtonConfigProvider.d.cts +33 -0
  11. package/dist/components/client/Button/UDSButtonConfigProvider.d.ts +34 -0
  12. package/dist/components/client/Button/UDSButtonConfigProvider.js +42 -0
  13. package/dist/components/client/Button/buttonConstants.cjs +1 -1
  14. package/dist/components/client/Button/buttonConstants.d.cts +3 -3
  15. package/dist/components/client/Button/buttonConstants.d.ts +3 -3
  16. package/dist/components/client/Button/buttonConstants.js +1 -1
  17. package/dist/components/client/Button/index.cjs +3 -0
  18. package/dist/components/client/Button/index.d.cts +2 -1
  19. package/dist/components/client/Button/index.d.ts +2 -1
  20. package/dist/components/client/Button/index.js +2 -1
  21. package/dist/components/client/IconButton/IconButton.cjs +3 -4
  22. package/dist/components/client/IconButton/IconButton.js +3 -4
  23. package/dist/components/client/IconButton/IconButtonBase.cjs +3 -0
  24. package/dist/components/client/IconButton/IconButtonBase.d.cts +2 -0
  25. package/dist/components/client/IconButton/IconButtonBase.d.ts +2 -0
  26. package/dist/components/client/IconButton/IconButtonBase.js +3 -0
  27. package/dist/components/client/IconButton/UDSIconButtonConfigProvider.cjs +46 -0
  28. package/dist/components/client/IconButton/UDSIconButtonConfigProvider.d.cts +34 -0
  29. package/dist/components/client/IconButton/UDSIconButtonConfigProvider.d.ts +35 -0
  30. package/dist/components/client/IconButton/UDSIconButtonConfigProvider.js +43 -0
  31. package/dist/components/client/IconButton/index.cjs +3 -0
  32. package/dist/components/client/IconButton/index.d.cts +2 -1
  33. package/dist/components/client/IconButton/index.d.ts +2 -1
  34. package/dist/components/client/IconButton/index.js +2 -1
  35. package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
  36. package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
  37. package/dist/components/client/index.cjs +6 -0
  38. package/dist/components/client/index.d.cts +3 -1
  39. package/dist/components/client/index.d.ts +3 -1
  40. package/dist/components/client/index.js +3 -1
  41. package/dist/components/client/providers/UDSConfigProvider.cjs +18 -10
  42. package/dist/components/client/providers/UDSConfigProvider.d.cts +2 -0
  43. package/dist/components/client/providers/UDSConfigProvider.d.ts +2 -0
  44. package/dist/components/client/providers/UDSConfigProvider.js +18 -10
  45. package/dist/components/index.cjs +6 -0
  46. package/dist/components/index.d.cts +3 -1
  47. package/dist/components/index.d.ts +3 -1
  48. package/dist/components/index.js +3 -1
  49. package/dist/config/dist/index.cjs +51 -142
  50. package/dist/config/dist/index.js +51 -142
  51. package/dist/css/dist/css/utils.cjs +12 -0
  52. package/dist/css/dist/css/utils.js +12 -0
  53. package/dist/css/dist/packages/config/dist/index.cjs +51 -142
  54. package/dist/css/dist/packages/config/dist/index.js +51 -142
  55. package/dist/css/dist/runtimeConfig/hookMetadata.cjs +67 -0
  56. package/dist/css/dist/runtimeConfig/hookMetadata.js +67 -0
  57. package/dist/css-animation/Button/Button.cjs +5 -6
  58. package/dist/css-animation/Button/Button.js +5 -6
  59. package/dist/css-animation/IconButton/IconButton.cjs +3 -4
  60. package/dist/css-animation/IconButton/IconButton.js +3 -4
  61. package/dist/index.cjs +10 -0
  62. package/dist/index.d.cts +5 -1
  63. package/dist/index.d.ts +5 -1
  64. package/dist/index.js +5 -1
  65. package/dist/runtime/buttonConfig.cjs +17 -0
  66. package/dist/runtime/buttonConfig.d.cts +13 -0
  67. package/dist/runtime/buttonConfig.d.ts +13 -0
  68. package/dist/runtime/buttonConfig.js +16 -0
  69. package/dist/runtime/iconButtonConfig.cjs +18 -0
  70. package/dist/runtime/iconButtonConfig.d.cts +13 -0
  71. package/dist/runtime/iconButtonConfig.d.ts +13 -0
  72. package/dist/runtime/iconButtonConfig.js +17 -0
  73. package/dist/runtime/index.cjs +4 -0
  74. package/dist/runtime/index.d.cts +3 -1
  75. package/dist/runtime/index.d.ts +3 -1
  76. package/dist/runtime/index.js +3 -1
  77. package/dist/runtime/udsConfig.cjs +4 -0
  78. package/dist/runtime/udsConfig.d.cts +4 -0
  79. package/dist/runtime/udsConfig.d.ts +4 -0
  80. package/dist/runtime/udsConfig.js +4 -0
  81. package/dist/styles/styler.d.cts +10 -10
  82. package/dist/styles/styler.d.ts +10 -10
  83. package/dist/tailwind-internal/dist/packages/config/dist/index.cjs +51 -142
  84. package/dist/tailwind-internal/dist/packages/config/dist/index.js +51 -142
  85. package/dist/uds/generated/componentData.cjs +251 -223
  86. package/dist/uds/generated/componentData.js +251 -223
  87. package/dist/uds/generated/tailwindPurge.cjs +9 -1
  88. package/dist/uds/generated/tailwindPurge.js +9 -1
  89. package/generated/componentData.json +491 -455
  90. package/generated/tailwindPurge.ts +3 -3
  91. package/package.json +1 -1
@@ -5,6 +5,8 @@ const require_defaultTokensConfig = require("../../defaultTokensConfig.cjs");
5
5
  const require_serializeToJS = require("../../utils/dist/serializeToJS.cjs");
6
6
  const require_runtime_bottomSheetConfig = require("../../runtime/bottomSheetConfig.cjs");
7
7
  const require_runtime_breakpointsConfig = require("../../runtime/breakpointsConfig.cjs");
8
+ const require_runtime_buttonConfig = require("../../runtime/buttonConfig.cjs");
9
+ const require_runtime_iconButtonConfig = require("../../runtime/iconButtonConfig.cjs");
8
10
  const require_runtime_modalConfig = require("../../runtime/modalConfig.cjs");
9
11
  const require_runtime_popoverConfig = require("../../runtime/popoverConfig.cjs");
10
12
  const require_runtime_toastConfig = require("../../runtime/toastConfig.cjs");
@@ -86,6 +88,8 @@ const syncCommand = {
86
88
  const runtimeConfigs = {
87
89
  bottomSheet: [require_runtime_bottomSheetConfig.configToBottomSheetConfigContext(config), "UDSBottomSheetConfigContextType"],
88
90
  breakpoints: [require_runtime_breakpointsConfig.configToBreakpointsConfigContext(config), "UDSBreakpointsConfigContextType"],
91
+ button: [require_runtime_buttonConfig.configToButtonConfigContext(config), "UDSButtonConfigContextType"],
92
+ iconButton: [require_runtime_iconButtonConfig.configToIconButtonConfigContext(config), "UDSIconButtonConfigContextType"],
89
93
  modal: [require_runtime_modalConfig.configToModalConfigContext(config), "UDSModalConfigContextType"],
90
94
  popover: [require_runtime_popoverConfig.configToPopoverConfigContext(config), "UDSPopoverConfigContextType"],
91
95
  toast: [require_runtime_toastConfig.configToToastConfigContext(config), "UDSToastConfigContextType"],
@@ -103,6 +107,8 @@ const syncCommand = {
103
107
  exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
104
108
  bottomSheet: bottomSheetRuntimeConfig,
105
109
  breakpoints: breakpointsRuntimeConfig,
110
+ button: buttonRuntimeConfig,
111
+ iconButton: iconButtonRuntimeConfig,
106
112
  modal: modalRuntimeConfig,
107
113
  popover: popoverRuntimeConfig,
108
114
  toast: toastRuntimeConfig,
@@ -111,6 +117,8 @@ const syncCommand = {
111
117
  exportsJS.push(`export const runtimeConfig = {
112
118
  bottomSheet: bottomSheetRuntimeConfig,
113
119
  breakpoints: breakpointsRuntimeConfig,
120
+ button: buttonRuntimeConfig,
121
+ iconButton: iconButtonRuntimeConfig,
114
122
  modal: modalRuntimeConfig,
115
123
  popover: popoverRuntimeConfig,
116
124
  toast: toastRuntimeConfig,
@@ -3,6 +3,8 @@ import { defaultTokensConfig } from "../../defaultTokensConfig.js";
3
3
  import { serializeToJS } from "../../utils/dist/serializeToJS.js";
4
4
  import { configToBottomSheetConfigContext } from "../../runtime/bottomSheetConfig.js";
5
5
  import { configToBreakpointsConfigContext } from "../../runtime/breakpointsConfig.js";
6
+ import { configToButtonConfigContext } from "../../runtime/buttonConfig.js";
7
+ import { configToIconButtonConfigContext } from "../../runtime/iconButtonConfig.js";
6
8
  import { configToModalConfigContext } from "../../runtime/modalConfig.js";
7
9
  import { configToPopoverConfigContext } from "../../runtime/popoverConfig.js";
8
10
  import { configToToastConfigContext } from "../../runtime/toastConfig.js";
@@ -82,6 +84,8 @@ const syncCommand = {
82
84
  const runtimeConfigs = {
83
85
  bottomSheet: [configToBottomSheetConfigContext(config), "UDSBottomSheetConfigContextType"],
84
86
  breakpoints: [configToBreakpointsConfigContext(config), "UDSBreakpointsConfigContextType"],
87
+ button: [configToButtonConfigContext(config), "UDSButtonConfigContextType"],
88
+ iconButton: [configToIconButtonConfigContext(config), "UDSIconButtonConfigContextType"],
85
89
  modal: [configToModalConfigContext(config), "UDSModalConfigContextType"],
86
90
  popover: [configToPopoverConfigContext(config), "UDSPopoverConfigContextType"],
87
91
  toast: [configToToastConfigContext(config), "UDSToastConfigContextType"],
@@ -99,6 +103,8 @@ const syncCommand = {
99
103
  exportsTS.push(`export const runtimeConfig: UDSConfigContextType = {
100
104
  bottomSheet: bottomSheetRuntimeConfig,
101
105
  breakpoints: breakpointsRuntimeConfig,
106
+ button: buttonRuntimeConfig,
107
+ iconButton: iconButtonRuntimeConfig,
102
108
  modal: modalRuntimeConfig,
103
109
  popover: popoverRuntimeConfig,
104
110
  toast: toastRuntimeConfig,
@@ -107,6 +113,8 @@ const syncCommand = {
107
113
  exportsJS.push(`export const runtimeConfig = {
108
114
  bottomSheet: bottomSheetRuntimeConfig,
109
115
  breakpoints: breakpointsRuntimeConfig,
116
+ button: buttonRuntimeConfig,
117
+ iconButton: iconButtonRuntimeConfig,
110
118
  modal: modalRuntimeConfig,
111
119
  popover: popoverRuntimeConfig,
112
120
  toast: toastRuntimeConfig,
@@ -9,7 +9,6 @@ const require_components_IconSlot = require("../../IconSlot.cjs");
9
9
  const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
10
10
  const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
11
11
  const require_components_client_Button_ButtonBase = require("./ButtonBase.cjs");
12
- require("./buttonConstants.cjs");
13
12
  let _yahoo_uds_icons = require("@yahoo/uds-icons");
14
13
  let react = require("react");
15
14
  react = require_runtime.__toESM(react);
@@ -89,7 +88,7 @@ const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
89
88
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Button_ButtonBase.ButtonBase, {
90
89
  ...props,
91
90
  ref: forwardedRef,
92
- renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
91
+ renderStartContent: ({ iconVariant, iconSize, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
93
92
  className: iconContainerClassName,
94
93
  initial: false,
95
94
  variants: iconContainerMotionVariants,
@@ -104,7 +103,7 @@ const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
104
103
  exit: "hide",
105
104
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
106
105
  className: loadingIconClassName,
107
- size: "sm",
106
+ size: iconSize,
108
107
  name: _yahoo_uds_icons.Progress,
109
108
  variant: iconVariant,
110
109
  color: "current"
@@ -118,7 +117,7 @@ const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
118
117
  className: [iconClassName, startIconClassName].filter(Boolean).join(" "),
119
118
  icon: startIcon,
120
119
  iconProps: {
121
- size: "sm",
120
+ size: iconSize,
122
121
  variant: iconVariant,
123
122
  color: "current"
124
123
  },
@@ -127,7 +126,7 @@ const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
127
126
  })]
128
127
  })
129
128
  }),
130
- renderEndContent: ({ endIcon, iconVariant, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
129
+ renderEndContent: ({ endIcon, iconVariant, iconSize, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
131
130
  className: iconContainerClassName,
132
131
  initial: false,
133
132
  variants: iconContainerMotionVariants,
@@ -144,7 +143,7 @@ const Button = (0, react.forwardRef)(function Button(props, forwardedRef) {
144
143
  className: [iconClassName, endIconClassName].filter(Boolean).join(" "),
145
144
  icon: endIcon,
146
145
  iconProps: {
147
- size: "sm",
146
+ size: iconSize,
148
147
  variant: iconVariant,
149
148
  color: "current"
150
149
  },
@@ -7,7 +7,6 @@ import { IconSlot } from "../../IconSlot.js";
7
7
  import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
8
8
  import { SpringMotionConfig } from "../SpringMotionConfig.js";
9
9
  import { ButtonBase, renderButtonChildren } from "./ButtonBase.js";
10
- import "./buttonConstants.js";
11
10
  import { Progress } from "@yahoo/uds-icons";
12
11
  import { forwardRef, isValidElement, useMemo } from "react";
13
12
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -86,7 +85,7 @@ const Button = forwardRef(function Button(props, forwardedRef) {
86
85
  return /* @__PURE__ */ jsx(ButtonBase, {
87
86
  ...props,
88
87
  ref: forwardedRef,
89
- renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
88
+ renderStartContent: ({ iconVariant, iconSize, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
90
89
  className: iconContainerClassName,
91
90
  initial: false,
92
91
  variants: iconContainerMotionVariants,
@@ -101,7 +100,7 @@ const Button = forwardRef(function Button(props, forwardedRef) {
101
100
  exit: "hide",
102
101
  children: /* @__PURE__ */ jsx(Icon, {
103
102
  className: loadingIconClassName,
104
- size: "sm",
103
+ size: iconSize,
105
104
  name: Progress,
106
105
  variant: iconVariant,
107
106
  color: "current"
@@ -115,7 +114,7 @@ const Button = forwardRef(function Button(props, forwardedRef) {
115
114
  className: [iconClassName, startIconClassName].filter(Boolean).join(" "),
116
115
  icon: startIcon,
117
116
  iconProps: {
118
- size: "sm",
117
+ size: iconSize,
119
118
  variant: iconVariant,
120
119
  color: "current"
121
120
  },
@@ -124,7 +123,7 @@ const Button = forwardRef(function Button(props, forwardedRef) {
124
123
  })]
125
124
  })
126
125
  }),
127
- renderEndContent: ({ endIcon, iconVariant, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
126
+ renderEndContent: ({ endIcon, iconVariant, iconSize, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
128
127
  className: iconContainerClassName,
129
128
  initial: false,
130
129
  variants: iconContainerMotionVariants,
@@ -141,7 +140,7 @@ const Button = forwardRef(function Button(props, forwardedRef) {
141
140
  className: [iconClassName, endIconClassName].filter(Boolean).join(" "),
142
141
  icon: endIcon,
143
142
  iconProps: {
144
- size: "sm",
143
+ size: iconSize,
145
144
  variant: iconVariant,
146
145
  color: "current"
147
146
  },
@@ -5,6 +5,7 @@ const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
5
5
  const require_styles_styler = require("../../../styles/styler.cjs");
6
6
  const require_utils_createSlot = require("../../../utils/createSlot.cjs");
7
7
  const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
8
+ const require_components_client_Button_UDSButtonConfigProvider = require("./UDSButtonConfigProvider.cjs");
8
9
  let react = require("react");
9
10
  react = require_runtime.__toESM(react);
10
11
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,6 +18,7 @@ const ButtonBase = (0, react.forwardRef)(function ButtonBase({ size, variant, st
17
18
  const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
18
19
  const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
19
20
  const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
21
+ const { iconSize } = require_components_client_Button_UDSButtonConfigProvider.useButtonConfig(size);
20
22
  const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
21
23
  const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
22
24
  const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
@@ -66,6 +68,7 @@ const ButtonBase = (0, react.forwardRef)(function ButtonBase({ size, variant, st
66
68
  ]);
67
69
  const iconRenderArgs = (0, react.useMemo)(() => ({
68
70
  iconVariant,
71
+ iconSize,
69
72
  loading,
70
73
  startIcon,
71
74
  endIcon,
@@ -80,6 +83,7 @@ const ButtonBase = (0, react.forwardRef)(function ButtonBase({ size, variant, st
80
83
  endIcon,
81
84
  endIconClassName,
82
85
  endIconSlotProps,
86
+ iconSize,
83
87
  iconVariant,
84
88
  loading,
85
89
  startIcon,
@@ -1,5 +1,5 @@
1
1
 
2
- import { UniversalButtonProps } from "../../../types/dist/index.cjs";
2
+ import { IconSize, UniversalButtonProps } from "../../../types/dist/index.cjs";
3
3
  import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
4
4
  import React, { ForwardRefExoticComponent } from "react";
5
5
 
@@ -17,6 +17,7 @@ interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
17
17
  }
18
18
  type ButtonIconRenderArgs = {
19
19
  iconVariant: ButtonProps['iconVariant'];
20
+ iconSize: IconSize;
20
21
  loading?: boolean;
21
22
  startIcon?: ButtonProps['startIcon'];
22
23
  endIcon?: ButtonProps['endIcon'];
@@ -1,6 +1,6 @@
1
1
 
2
2
  "use client";
3
- import { UniversalButtonProps } from "../../../types/dist/index.js";
3
+ import { IconSize, UniversalButtonProps } from "../../../types/dist/index.js";
4
4
  import { IconPropsWithSVGProps } from "../../../tokens/types.js";
5
5
  import React, { ForwardRefExoticComponent } from "react";
6
6
 
@@ -18,6 +18,7 @@ interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
18
18
  }
19
19
  type ButtonIconRenderArgs = {
20
20
  iconVariant: ButtonProps['iconVariant'];
21
+ iconSize: IconSize;
21
22
  loading?: boolean;
22
23
  startIcon?: ButtonProps['startIcon'];
23
24
  endIcon?: ButtonProps['endIcon'];
@@ -3,6 +3,7 @@
3
3
  import { cx, getStyles } from "../../../styles/styler.js";
4
4
  import { createSlot } from "../../../utils/createSlot.js";
5
5
  import { generateDefaultClassName } from "../../../automated-config/dist/utils/generateDefaultClassName.js";
6
+ import { useButtonConfig } from "./UDSButtonConfigProvider.js";
6
7
  import { cloneElement, forwardRef, useMemo } from "react";
7
8
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
8
9
  //#region src/components/client/Button/ButtonBase.tsx
@@ -14,6 +15,7 @@ const ButtonBase = forwardRef(function ButtonBase({ size, variant, startIcon, en
14
15
  const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
15
16
  const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
16
17
  const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
18
+ const { iconSize } = useButtonConfig(size);
17
19
  const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
18
20
  const Slot = useMemo(() => createSlot(), []);
19
21
  const rootSizeClass = useMemo(() => size ? getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
@@ -63,6 +65,7 @@ const ButtonBase = forwardRef(function ButtonBase({ size, variant, startIcon, en
63
65
  ]);
64
66
  const iconRenderArgs = useMemo(() => ({
65
67
  iconVariant,
68
+ iconSize,
66
69
  loading,
67
70
  startIcon,
68
71
  endIcon,
@@ -77,6 +80,7 @@ const ButtonBase = forwardRef(function ButtonBase({ size, variant, startIcon, en
77
80
  endIcon,
78
81
  endIconClassName,
79
82
  endIconSlotProps,
83
+ iconSize,
80
84
  iconVariant,
81
85
  loading,
82
86
  startIcon,
@@ -0,0 +1,45 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ require("../../../_virtual/_rolldown/runtime.cjs");
5
+ require("./buttonConstants.cjs");
6
+ let react = require("react");
7
+ let react_jsx_runtime = require("react/jsx-runtime");
8
+ //#region src/components/client/Button/UDSButtonConfigProvider.tsx
9
+ const ButtonContext = (0, react.createContext)(void 0);
10
+ const UDSButtonConfigProvider = ({ children, value }) => {
11
+ const existingContext = (0, react.useContext)(ButtonContext);
12
+ const isMerge = typeof value === "object" && "type" in value && value.type === "merge";
13
+ if (isMerge && !existingContext) throw new Error("Cannot merge context values without an existing ButtonContext");
14
+ const finalValue = isMerge ? {
15
+ ...existingContext,
16
+ ...value.value
17
+ } : value;
18
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonContext.Provider, {
19
+ value: finalValue,
20
+ children
21
+ });
22
+ };
23
+ UDSButtonConfigProvider.displayName = "UDSButtonConfigProvider";
24
+ /**
25
+ * Resolves the configured icon size for a Button size.
26
+ *
27
+ * Unlike other UDS config hooks, this hook does not require a provider: Button
28
+ * is used in many apps without a `UDSConfigProvider`, so it gracefully falls
29
+ * back to the default icon size (`buttonIconSvgSize`) when no config is present.
30
+ */
31
+ const useButtonConfig = (sizeProp) => {
32
+ const context = (0, react.useContext)(ButtonContext);
33
+ if (!context) return {
34
+ size: sizeProp,
35
+ iconSize: "sm"
36
+ };
37
+ const size = sizeProp ?? context.defaultSize;
38
+ return {
39
+ size,
40
+ iconSize: context.iconSize[size]
41
+ };
42
+ };
43
+ //#endregion
44
+ exports.UDSButtonConfigProvider = UDSButtonConfigProvider;
45
+ exports.useButtonConfig = useButtonConfig;
@@ -0,0 +1,33 @@
1
+
2
+ import { ButtonSize, IconSize } from "../../../types/dist/index.cjs";
3
+ import { UDSButtonConfigContextType } from "../../../runtime/buttonConfig.cjs";
4
+ import { PropsWithChildren } from "react";
5
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
6
+
7
+ //#region src/components/client/Button/UDSButtonConfigProvider.d.ts
8
+ interface UDSButtonConfigProviderProps extends PropsWithChildren {
9
+ value: UDSButtonConfigContextType | {
10
+ type: 'merge';
11
+ value: Partial<UDSButtonConfigContextType>;
12
+ };
13
+ }
14
+ declare const UDSButtonConfigProvider: {
15
+ ({
16
+ children,
17
+ value
18
+ }: UDSButtonConfigProviderProps): _$react_jsx_runtime0.JSX.Element;
19
+ displayName: string;
20
+ };
21
+ /**
22
+ * Resolves the configured icon size for a Button size.
23
+ *
24
+ * Unlike other UDS config hooks, this hook does not require a provider: Button
25
+ * is used in many apps without a `UDSConfigProvider`, so it gracefully falls
26
+ * back to the default icon size (`buttonIconSvgSize`) when no config is present.
27
+ */
28
+ declare const useButtonConfig: (sizeProp?: ButtonSize | undefined) => {
29
+ size: ButtonSize | undefined;
30
+ iconSize: IconSize;
31
+ };
32
+ //#endregion
33
+ export { type UDSButtonConfigContextType, UDSButtonConfigProvider, type UDSButtonConfigProviderProps, useButtonConfig };
@@ -0,0 +1,34 @@
1
+
2
+ "use client";
3
+ import { ButtonSize, IconSize } from "../../../types/dist/index.js";
4
+ import { UDSButtonConfigContextType } from "../../../runtime/buttonConfig.js";
5
+ import { PropsWithChildren } from "react";
6
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
7
+
8
+ //#region src/components/client/Button/UDSButtonConfigProvider.d.ts
9
+ interface UDSButtonConfigProviderProps extends PropsWithChildren {
10
+ value: UDSButtonConfigContextType | {
11
+ type: 'merge';
12
+ value: Partial<UDSButtonConfigContextType>;
13
+ };
14
+ }
15
+ declare const UDSButtonConfigProvider: {
16
+ ({
17
+ children,
18
+ value
19
+ }: UDSButtonConfigProviderProps): _$react_jsx_runtime0.JSX.Element;
20
+ displayName: string;
21
+ };
22
+ /**
23
+ * Resolves the configured icon size for a Button size.
24
+ *
25
+ * Unlike other UDS config hooks, this hook does not require a provider: Button
26
+ * is used in many apps without a `UDSConfigProvider`, so it gracefully falls
27
+ * back to the default icon size (`buttonIconSvgSize`) when no config is present.
28
+ */
29
+ declare const useButtonConfig: (sizeProp?: ButtonSize | undefined) => {
30
+ size: ButtonSize | undefined;
31
+ iconSize: IconSize;
32
+ };
33
+ //#endregion
34
+ export { type UDSButtonConfigContextType, UDSButtonConfigProvider, type UDSButtonConfigProviderProps, useButtonConfig };
@@ -0,0 +1,42 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import "./buttonConstants.js";
4
+ import { createContext, useContext } from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/components/client/Button/UDSButtonConfigProvider.tsx
7
+ const ButtonContext = createContext(void 0);
8
+ const UDSButtonConfigProvider = ({ children, value }) => {
9
+ const existingContext = useContext(ButtonContext);
10
+ const isMerge = typeof value === "object" && "type" in value && value.type === "merge";
11
+ if (isMerge && !existingContext) throw new Error("Cannot merge context values without an existing ButtonContext");
12
+ const finalValue = isMerge ? {
13
+ ...existingContext,
14
+ ...value.value
15
+ } : value;
16
+ return /* @__PURE__ */ jsx(ButtonContext.Provider, {
17
+ value: finalValue,
18
+ children
19
+ });
20
+ };
21
+ UDSButtonConfigProvider.displayName = "UDSButtonConfigProvider";
22
+ /**
23
+ * Resolves the configured icon size for a Button size.
24
+ *
25
+ * Unlike other UDS config hooks, this hook does not require a provider: Button
26
+ * is used in many apps without a `UDSConfigProvider`, so it gracefully falls
27
+ * back to the default icon size (`buttonIconSvgSize`) when no config is present.
28
+ */
29
+ const useButtonConfig = (sizeProp) => {
30
+ const context = useContext(ButtonContext);
31
+ if (!context) return {
32
+ size: sizeProp,
33
+ iconSize: "sm"
34
+ };
35
+ const size = sizeProp ?? context.defaultSize;
36
+ return {
37
+ size,
38
+ iconSize: context.iconSize[size]
39
+ };
40
+ };
41
+ //#endregion
42
+ export { UDSButtonConfigProvider, useButtonConfig };
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  //#region src/components/client/Button/buttonConstants.ts
5
- /** The icon size used for icons in Button and IconButton components */
5
+ /** The default icon size used for icons in Button and IconButton components */
6
6
  const buttonIconSvgSize = "sm";
7
7
  //#endregion
8
8
  exports.buttonIconSvgSize = buttonIconSvgSize;
@@ -1,7 +1,7 @@
1
1
 
2
- import { ButtonSize } from "../../../types/dist/index.cjs";
2
+ import { IconSize } from "../../../types/dist/index.cjs";
3
3
  //#region src/components/client/Button/buttonConstants.d.ts
4
- /** The icon size used for icons in Button and IconButton components */
5
- declare const buttonIconSvgSize: ButtonSize;
4
+ /** The default icon size used for icons in Button and IconButton components */
5
+ declare const buttonIconSvgSize: IconSize;
6
6
  //#endregion
7
7
  export { buttonIconSvgSize };
@@ -1,8 +1,8 @@
1
1
 
2
2
  "use client";
3
- import { ButtonSize } from "../../../types/dist/index.js";
3
+ import { IconSize } from "../../../types/dist/index.js";
4
4
  //#region src/components/client/Button/buttonConstants.d.ts
5
- /** The icon size used for icons in Button and IconButton components */
6
- declare const buttonIconSvgSize: ButtonSize;
5
+ /** The default icon size used for icons in Button and IconButton components */
6
+ declare const buttonIconSvgSize: IconSize;
7
7
  //#endregion
8
8
  export { buttonIconSvgSize };
@@ -1,7 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  "use client";
3
3
  //#region src/components/client/Button/buttonConstants.ts
4
- /** The icon size used for icons in Button and IconButton components */
4
+ /** The default icon size used for icons in Button and IconButton components */
5
5
  const buttonIconSvgSize = "sm";
6
6
  //#endregion
7
7
  export { buttonIconSvgSize };
@@ -1,10 +1,13 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  "use client";
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const require_components_client_Button_UDSButtonConfigProvider = require("./UDSButtonConfigProvider.cjs");
4
5
  const require_components_client_Button_ButtonBase = require("./ButtonBase.cjs");
5
6
  const require_components_client_Button_Button = require("./Button.cjs");
6
7
  exports.Button = require_components_client_Button_Button.Button;
7
8
  exports.ButtonBase = require_components_client_Button_ButtonBase.ButtonBase;
9
+ exports.UDSButtonConfigProvider = require_components_client_Button_UDSButtonConfigProvider.UDSButtonConfigProvider;
8
10
  exports.iconMotionVariants = require_components_client_Button_Button.iconMotionVariants;
9
11
  exports.loadingMotionVariants = require_components_client_Button_Button.loadingMotionVariants;
10
12
  exports.renderButtonChildren = require_components_client_Button_ButtonBase.renderButtonChildren;
13
+ exports.useButtonConfig = require_components_client_Button_UDSButtonConfigProvider.useButtonConfig;
@@ -1,4 +1,5 @@
1
1
 
2
2
  import { ButtonBase, ButtonRootRenderArgs, renderButtonChildren } from "./ButtonBase.cjs";
3
3
  import { Button, ButtonProps, iconMotionVariants, loadingMotionVariants } from "./Button.cjs";
4
- export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, iconMotionVariants, loadingMotionVariants, renderButtonChildren };
4
+ import { UDSButtonConfigProvider, UDSButtonConfigProviderProps, useButtonConfig } from "./UDSButtonConfigProvider.cjs";
5
+ export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, UDSButtonConfigProvider, type UDSButtonConfigProviderProps, iconMotionVariants, loadingMotionVariants, renderButtonChildren, useButtonConfig };
@@ -2,4 +2,5 @@
2
2
  "use client";
3
3
  import { ButtonBase, ButtonRootRenderArgs, renderButtonChildren } from "./ButtonBase.js";
4
4
  import { Button, ButtonProps, iconMotionVariants, loadingMotionVariants } from "./Button.js";
5
- export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, iconMotionVariants, loadingMotionVariants, renderButtonChildren };
5
+ import { UDSButtonConfigProvider, UDSButtonConfigProviderProps, useButtonConfig } from "./UDSButtonConfigProvider.js";
6
+ export { Button, ButtonBase, type ButtonProps, type ButtonRootRenderArgs, UDSButtonConfigProvider, type UDSButtonConfigProviderProps, iconMotionVariants, loadingMotionVariants, renderButtonChildren, useButtonConfig };
@@ -1,5 +1,6 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
2
  "use client";
3
+ import { UDSButtonConfigProvider, useButtonConfig } from "./UDSButtonConfigProvider.js";
3
4
  import { ButtonBase, renderButtonChildren } from "./ButtonBase.js";
4
5
  import { Button, iconMotionVariants, loadingMotionVariants } from "./Button.js";
5
- export { Button, ButtonBase, iconMotionVariants, loadingMotionVariants, renderButtonChildren };
6
+ export { Button, ButtonBase, UDSButtonConfigProvider, iconMotionVariants, loadingMotionVariants, renderButtonChildren, useButtonConfig };
@@ -7,7 +7,6 @@ const require_utils_createSlot = require("../../../utils/createSlot.cjs");
7
7
  const require_components_Icon = require("../../Icon.cjs");
8
8
  const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
9
9
  const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
10
- require("../Button/buttonConstants.cjs");
11
10
  const require_components_client_Button_Button = require("../Button/Button.cjs");
12
11
  const require_components_client_IconButton_IconButtonBase = require("./IconButtonBase.cjs");
13
12
  let _yahoo_uds_icons = require("@yahoo/uds-icons");
@@ -34,7 +33,7 @@ const IconButton = (0, react.forwardRef)(function IconButton(props, forwardedRef
34
33
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_IconButton_IconButtonBase.IconButtonBase, {
35
34
  ...props,
36
35
  ref: forwardedRef,
37
- renderIconContent: ({ asChild, loading, name, iconVariant, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
36
+ renderIconContent: ({ asChild, loading, name, iconVariant, iconSize, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
38
37
  initial: false,
39
38
  mode: "popLayout",
40
39
  children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
@@ -43,7 +42,7 @@ const IconButton = (0, react.forwardRef)(function IconButton(props, forwardedRef
43
42
  animate: "loading",
44
43
  exit: "hide",
45
44
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
46
- size: "sm",
45
+ size: iconSize,
47
46
  name: _yahoo_uds_icons.Progress,
48
47
  variant: iconVariant,
49
48
  color: "current",
@@ -55,7 +54,7 @@ const IconButton = (0, react.forwardRef)(function IconButton(props, forwardedRef
55
54
  animate: "icon",
56
55
  exit: "hide",
57
56
  children: !asChild && children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
58
- size: "sm",
57
+ size: iconSize,
59
58
  name,
60
59
  variant: iconVariant,
61
60
  color: "current",
@@ -5,7 +5,6 @@ import { createSlot } from "../../../utils/createSlot.js";
5
5
  import { Icon } from "../../Icon.js";
6
6
  import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
7
7
  import { SpringMotionConfig } from "../SpringMotionConfig.js";
8
- import "../Button/buttonConstants.js";
9
8
  import { iconMotionVariants, loadingMotionVariants } from "../Button/Button.js";
10
9
  import { IconButtonBase, renderIconButtonAsChild } from "./IconButtonBase.js";
11
10
  import { Progress } from "@yahoo/uds-icons";
@@ -32,7 +31,7 @@ const IconButton = forwardRef(function IconButton(props, forwardedRef) {
32
31
  return /* @__PURE__ */ jsx(IconButtonBase, {
33
32
  ...props,
34
33
  ref: forwardedRef,
35
- renderIconContent: ({ asChild, loading, name, iconVariant, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ jsxs(AnimatePresence, {
34
+ renderIconContent: ({ asChild, loading, name, iconVariant, iconSize, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ jsxs(AnimatePresence, {
36
35
  initial: false,
37
36
  mode: "popLayout",
38
37
  children: [loading && /* @__PURE__ */ jsx(m.span, {
@@ -41,7 +40,7 @@ const IconButton = forwardRef(function IconButton(props, forwardedRef) {
41
40
  animate: "loading",
42
41
  exit: "hide",
43
42
  children: /* @__PURE__ */ jsx(Icon, {
44
- size: "sm",
43
+ size: iconSize,
45
44
  name: Progress,
46
45
  variant: iconVariant,
47
46
  color: "current",
@@ -53,7 +52,7 @@ const IconButton = forwardRef(function IconButton(props, forwardedRef) {
53
52
  animate: "icon",
54
53
  exit: "hide",
55
54
  children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
56
- size: "sm",
55
+ size: iconSize,
57
56
  name,
58
57
  variant: iconVariant,
59
58
  color: "current",
@@ -5,6 +5,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
5
5
  const require_styles_styler = require("../../../styles/styler.cjs");
6
6
  const require_utils_createSlot = require("../../../utils/createSlot.cjs");
7
7
  const require_generateDefaultClassName = require("../../../automated-config/dist/utils/generateDefaultClassName.cjs");
8
+ const require_components_client_IconButton_UDSIconButtonConfigProvider = require("./UDSIconButtonConfigProvider.cjs");
8
9
  let react = require("react");
9
10
  //#region src/components/client/IconButton/IconButtonBase.tsx
10
11
  const defaultSizeRootClass = require_generateDefaultClassName.generateDefaultClassName("iconbutton", "size", "root");
@@ -13,6 +14,7 @@ const defaultVariantRootClass = require_generateDefaultClassName.generateDefault
13
14
  const defaultVariantIconClass = require_generateDefaultClassName.generateDefaultClassName("button", "variant", "icon");
14
15
  const IconButtonBase = (0, react.forwardRef)(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
15
16
  const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
17
+ const { iconSize } = require_components_client_IconButton_UDSIconButtonConfigProvider.useIconButtonConfig(size);
16
18
  const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
17
19
  const rootSizeClass = (0, react.useMemo)(() => size ? require_styles_styler.getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
18
20
  const rootVariantClass = (0, react.useMemo)(() => variant ? require_styles_styler.getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
@@ -50,6 +52,7 @@ const IconButtonBase = (0, react.forwardRef)(function IconButtonBase({ variant,
50
52
  loading,
51
53
  name,
52
54
  iconVariant,
55
+ iconSize,
53
56
  children,
54
57
  iconClassName: styles.icon,
55
58
  loadingIconClassName: styles.loadingIcon,
@@ -1,4 +1,5 @@
1
1
 
2
+ import { IconSize } from "../../../types/dist/index.cjs";
2
3
  import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.cjs";
3
4
  import * as _$react from "react";
4
5
  import { ForwardRefExoticComponent } from "react";
@@ -18,6 +19,7 @@ type IconButtonRenderArgs = {
18
19
  loading?: boolean;
19
20
  name?: IconButtonProps['name'];
20
21
  iconVariant: IconButtonProps['iconVariant'];
22
+ iconSize: IconSize;
21
23
  children: React.ReactNode;
22
24
  iconClassName: string;
23
25
  loadingIconClassName: string;
@@ -1,5 +1,6 @@
1
1
 
2
2
  "use client";
3
+ import { IconSize } from "../../../types/dist/index.js";
3
4
  import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../../tokens/types.js";
4
5
  import * as _$react from "react";
5
6
  import { ForwardRefExoticComponent } from "react";
@@ -19,6 +20,7 @@ type IconButtonRenderArgs = {
19
20
  loading?: boolean;
20
21
  name?: IconButtonProps['name'];
21
22
  iconVariant: IconButtonProps['iconVariant'];
23
+ iconSize: IconSize;
22
24
  children: React.ReactNode;
23
25
  iconClassName: string;
24
26
  loadingIconClassName: string;