@yahoo/uds 3.151.0 → 3.152.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 (12) hide show
  1. package/dist/components/client/IconButton.cjs +62 -31
  2. package/dist/components/client/IconButton.d.cts +2 -1
  3. package/dist/components/client/IconButton.d.ts +2 -1
  4. package/dist/components/client/IconButton.js +63 -32
  5. package/dist/styles/styler.d.cts +3 -3
  6. package/dist/styles/styler.d.ts +3 -3
  7. package/dist/types/dist/index.d.cts +2 -0
  8. package/dist/types/dist/index.d.ts +2 -0
  9. package/dist/uds/generated/componentData.cjs +1436 -1430
  10. package/dist/uds/generated/componentData.js +1436 -1430
  11. package/generated/componentData.json +1926 -1914
  12. package/package.json +1 -1
package/dist/components/client/IconButton.cjs CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  require("../../_virtual/_rolldown/runtime.cjs");
5
5
  const require_index = require("../../css-tokens/dist/index.cjs");
6
6
  const require_styles_styler = require("../../styles/styler.cjs");
7
+ const require_utils_createSlot = require("../../utils/createSlot.cjs");
7
8
  const require_components_Icon = require("../Icon.cjs");
8
9
  const require_generateDefaultClassName = require("../../automated-config/dist/utils/generateDefaultClassName.cjs");
9
10
  require("./buttonConstants.cjs");
@@ -44,13 +45,15 @@ const defaultVariantIconClass = require_generateDefaultClassName.generateDefault
44
45
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
45
46
  *
46
47
  **/
47
- const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
48
+ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
48
49
  const ref = (0, react.useRef)(null);
49
50
  (0, react.useImperativeHandle)(forwardedRef, () => ref.current);
50
51
  const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
51
52
  const prefersReducedMotion = (0, motion_react.useReducedMotion)();
52
53
  const disableMotion = !!disableEffects || !!rest?.disabled;
53
54
  const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
55
+ const Slot = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
56
+ const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
54
57
  const buttonVariants = (0, react.useMemo)(() => ({
55
58
  rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
56
59
  hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
@@ -78,6 +81,63 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
78
81
  rootSizeClass,
79
82
  rootVariantClass
80
83
  ]);
84
+ const iconContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
85
+ initial: false,
86
+ mode: "popLayout",
87
+ children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
88
+ variants: require_components_client_Button.loadingMotionVariants,
89
+ initial: "loading",
90
+ animate: "loading",
91
+ exit: "hide",
92
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
93
+ size: "sm",
94
+ name: _yahoo_uds_icons.Progress,
95
+ variant: iconVariant,
96
+ color: "current",
97
+ className: styles.loadingIcon
98
+ })
99
+ }, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
100
+ variants: require_components_client_Button.iconMotionVariants,
101
+ initial: "icon",
102
+ animate: "icon",
103
+ exit: "hide",
104
+ children: !asChild && children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
105
+ size: "sm",
106
+ name,
107
+ variant: iconVariant,
108
+ color: "current",
109
+ className: require_styles_styler.cx(styles.icon, iconSlotClassName),
110
+ ...iconSlotProps
111
+ })
112
+ }, name.name)]
113
+ }), [
114
+ asChild,
115
+ children,
116
+ iconSlotClassName,
117
+ iconSlotProps,
118
+ iconVariant,
119
+ loading,
120
+ name,
121
+ styles
122
+ ]);
123
+ if (asChild && (0, react.isValidElement)(children)) {
124
+ const childProps = children.props;
125
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
126
+ layoutSpeed: "3",
127
+ layoutVariant,
128
+ reducedMotion: disableEffects ? "always" : "user",
129
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
130
+ type,
131
+ className: styles.root,
132
+ initial: "icon",
133
+ variants: buttonVariants,
134
+ whileHover: "hover",
135
+ whileTap: "pressed",
136
+ ...rest,
137
+ children: (0, react.cloneElement)(children, childProps, iconContent)
138
+ })
139
+ });
140
+ }
81
141
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
82
142
  layoutSpeed: "3",
83
143
  layoutVariant,
@@ -92,36 +152,7 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
92
152
  whileHover: "hover",
93
153
  whileTap: "pressed",
94
154
  ...rest,
95
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
96
- initial: false,
97
- mode: "popLayout",
98
- children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
99
- variants: require_components_client_Button.loadingMotionVariants,
100
- initial: "loading",
101
- animate: "loading",
102
- exit: "hide",
103
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
104
- size: "sm",
105
- name: _yahoo_uds_icons.Progress,
106
- variant: iconVariant,
107
- color: "current",
108
- className: styles.loadingIcon
109
- })
110
- }, "loading"), name && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
111
- variants: require_components_client_Button.iconMotionVariants,
112
- initial: "icon",
113
- animate: "icon",
114
- exit: "hide",
115
- children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
116
- size: "sm",
117
- name,
118
- variant: iconVariant,
119
- color: "current",
120
- className: require_styles_styler.cx(styles.icon, iconSlotClassName),
121
- ...iconSlotProps
122
- })
123
- }, name.name)]
124
- })
155
+ children: iconContent
125
156
  })
126
157
  });
127
158
  });
package/dist/components/client/IconButton.d.cts CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.cjs";
3
3
  import * as _$react from "react";
4
+ import { ForwardRefExoticComponent } from "react";
4
5
  import { HTMLMotionProps } from "motion/react";
5
6
 
6
7
  //#region src/components/client/IconButton.d.ts
@@ -40,6 +41,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
40
41
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
41
42
  *
42
43
  **/
43
- declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
44
+ declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
44
45
  //#endregion
45
46
  export { IconButton, type IconButtonProps };
package/dist/components/client/IconButton.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  "use client";
3
3
  import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.js";
4
4
  import * as _$react from "react";
5
+ import { ForwardRefExoticComponent } from "react";
5
6
  import { HTMLMotionProps } from "motion/react";
6
7
 
7
8
  //#region src/components/client/IconButton.d.ts
@@ -41,6 +42,6 @@ interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
41
42
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
42
43
  *
43
44
  **/
44
- declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
45
+ declare const IconButton: ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
45
46
  //#endregion
46
47
  export { IconButton, type IconButtonProps };
package/dist/components/client/IconButton.js CHANGED
@@ -2,13 +2,14 @@
2
2
  "use client";
3
3
  import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../css-tokens/dist/index.js";
4
4
  import { cx, getStyles } from "../../styles/styler.js";
5
+ import { createSlot } from "../../utils/createSlot.js";
5
6
  import { Icon } from "../Icon.js";
6
7
  import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
7
8
  import "./buttonConstants.js";
8
9
  import { SpringMotionConfig } from "./SpringMotionConfig.js";
9
10
  import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
10
11
  import { Progress } from "@yahoo/uds-icons";
11
- import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
12
+ import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
12
13
  import { jsx, jsxs } from "react/jsx-runtime";
13
14
  import { AnimatePresence, m, useReducedMotion } from "motion/react";
14
15
  //#region src/components/client/IconButton.tsx
@@ -42,13 +43,15 @@ const defaultVariantIconClass = generateDefaultClassName("button", "variant", "i
42
43
  * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
43
44
  *
44
45
  **/
45
- const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
46
+ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
46
47
  const ref = useRef(null);
47
48
  useImperativeHandle(forwardedRef, () => ref.current);
48
49
  const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
49
50
  const prefersReducedMotion = useReducedMotion();
50
51
  const disableMotion = !!disableEffects || !!rest?.disabled;
51
52
  const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
53
+ const Slot = useMemo(() => createSlot(), []);
54
+ const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
52
55
  const buttonVariants = useMemo(() => ({
53
56
  rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
54
57
  hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
@@ -76,6 +79,63 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
76
79
  rootSizeClass,
77
80
  rootVariantClass
78
81
  ]);
82
+ const iconContent = useMemo(() => /* @__PURE__ */ jsxs(AnimatePresence, {
83
+ initial: false,
84
+ mode: "popLayout",
85
+ children: [loading && /* @__PURE__ */ jsx(m.span, {
86
+ variants: loadingMotionVariants,
87
+ initial: "loading",
88
+ animate: "loading",
89
+ exit: "hide",
90
+ children: /* @__PURE__ */ jsx(Icon, {
91
+ size: "sm",
92
+ name: Progress,
93
+ variant: iconVariant,
94
+ color: "current",
95
+ className: styles.loadingIcon
96
+ })
97
+ }, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
98
+ variants: iconMotionVariants,
99
+ initial: "icon",
100
+ animate: "icon",
101
+ exit: "hide",
102
+ children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
103
+ size: "sm",
104
+ name,
105
+ variant: iconVariant,
106
+ color: "current",
107
+ className: cx(styles.icon, iconSlotClassName),
108
+ ...iconSlotProps
109
+ })
110
+ }, name.name)]
111
+ }), [
112
+ asChild,
113
+ children,
114
+ iconSlotClassName,
115
+ iconSlotProps,
116
+ iconVariant,
117
+ loading,
118
+ name,
119
+ styles
120
+ ]);
121
+ if (asChild && isValidElement(children)) {
122
+ const childProps = children.props;
123
+ return /* @__PURE__ */ jsx(SpringMotionConfig, {
124
+ layoutSpeed: "3",
125
+ layoutVariant,
126
+ reducedMotion: disableEffects ? "always" : "user",
127
+ children: /* @__PURE__ */ jsx(MotionSlot, {
128
+ type,
129
+ className: styles.root,
130
+ initial: "icon",
131
+ variants: buttonVariants,
132
+ whileHover: "hover",
133
+ whileTap: "pressed",
134
+ ...rest,
135
+ children: cloneElement(children, childProps, iconContent)
136
+ })
137
+ });
138
+ }
79
139
  return /* @__PURE__ */ jsx(SpringMotionConfig, {
80
140
  layoutSpeed: "3",
81
141
  layoutVariant,
@@ -90,36 +150,7 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
90
150
  whileHover: "hover",
91
151
  whileTap: "pressed",
92
152
  ...rest,
93
- children: /* @__PURE__ */ jsxs(AnimatePresence, {
94
- initial: false,
95
- mode: "popLayout",
96
- children: [loading && /* @__PURE__ */ jsx(m.span, {
97
- variants: loadingMotionVariants,
98
- initial: "loading",
99
- animate: "loading",
100
- exit: "hide",
101
- children: /* @__PURE__ */ jsx(Icon, {
102
- size: "sm",
103
- name: Progress,
104
- variant: iconVariant,
105
- color: "current",
106
- className: styles.loadingIcon
107
- })
108
- }, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
109
- variants: iconMotionVariants,
110
- initial: "icon",
111
- animate: "icon",
112
- exit: "hide",
113
- children: children || /* @__PURE__ */ jsx(Icon, {
114
- size: "sm",
115
- name,
116
- variant: iconVariant,
117
- color: "current",
118
- className: cx(styles.icon, iconSlotClassName),
119
- ...iconSlotProps
120
- })
121
- }, name.name)]
122
- })
153
+ children: iconContent
123
154
  })
124
155
  });
125
156
  });
package/dist/styles/styler.d.cts CHANGED
@@ -33,8 +33,8 @@ declare const getStylesInternal: (props?: ({
33
33
  bottomsheetVariantRoot?: "default" | undefined;
34
34
  buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
35
35
  buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
36
- buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
37
- buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
36
+ buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | "default" | undefined;
37
+ buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | "default" | undefined;
38
38
  checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
39
39
  checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
40
40
  checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -197,7 +197,7 @@ declare const getStylesInternal: (props?: ({
197
197
  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;
198
198
  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;
199
199
  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;
200
- textAlign?: "center" | "justify" | "start" | "end" | undefined;
200
+ textAlign?: "center" | "start" | "end" | "justify" | undefined;
201
201
  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;
202
202
  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;
203
203
  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
@@ -33,8 +33,8 @@ declare const getStylesInternal: (props?: ({
33
33
  bottomsheetVariantRoot?: "default" | undefined;
34
34
  buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
35
35
  buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
36
- buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
37
- buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
36
+ buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | "default" | undefined;
37
+ buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "contrast-high" | "contrast-medium" | "contrast-low" | "brand-tertiary" | "alert-tertiary" | "positive-tertiary" | "warning-tertiary" | "info-tertiary" | "default" | undefined;
38
38
  checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
39
39
  checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
40
40
  checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -197,7 +197,7 @@ declare const getStylesInternal: (props?: ({
197
197
  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;
198
198
  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;
199
199
  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;
200
- textAlign?: "center" | "justify" | "start" | "end" | undefined;
200
+ textAlign?: "center" | "start" | "end" | "justify" | undefined;
201
201
  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;
202
202
  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;
203
203
  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/types/dist/index.d.cts CHANGED
@@ -515,6 +515,8 @@ interface UniversalIconButtonProps<Icon = GenericIconComponent> {
515
515
  loading?: boolean;
516
516
  /** Disable motion effects (scale on press, icon animations). @default false */
517
517
  disableEffects?: boolean;
518
+ /** Merge props onto the immediate child element instead of rendering a wrapper. @default false */
519
+ asChild?: boolean;
518
520
  }
519
521
  interface UniversalButtonProps<IconSlotType = UniversalIconSlot> extends Pick<SizeStyleProps, 'width'> {
520
522
  /** The visual style variant of the button. */
package/dist/types/dist/index.d.ts CHANGED
@@ -515,6 +515,8 @@ interface UniversalIconButtonProps<Icon = GenericIconComponent> {
515
515
  loading?: boolean;
516
516
  /** Disable motion effects (scale on press, icon animations). @default false */
517
517
  disableEffects?: boolean;
518
+ /** Merge props onto the immediate child element instead of rendering a wrapper. @default false */
519
+ asChild?: boolean;
518
520
  }
519
521
  interface UniversalButtonProps<IconSlotType = UniversalIconSlot> extends Pick<SizeStyleProps, 'width'> {
520
522
  /** The visual style variant of the button. */