npm - @metamask-previews/design-system-react - Versions diffs - 0.20.0-preview.f515a62 → 0.23.1-preview.047f96c - Mend

@metamask-previews/design-system-react 0.20.0-preview.f515a62 → 0.23.1-preview.047f96c

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 (472) hide show

package/dist/components/BannerBase/BannerBase.types.d.cts CHANGED Viewed

@@ -10,10 +10,6 @@ type BannerBaseCloseButtonProps = Omit<Partial<ButtonIconProps>, 'iconName' | 'o
      * Optional test id for the close button element.
      */
     'data-testid'?: string;
-    /**
-     * Optional click handler for the close button.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> & {
     /**
@@ -35,7 +31,7 @@ type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> &
     onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Optional props for the close `ButtonIcon`.
-     * Providing this also shows a close button.
+     * Only used when `onClose` is provided.
      */
     closeButtonProps?: BannerBaseCloseButtonProps;
 };

package/dist/components/BannerBase/BannerBase.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;~~IACvB;;OAEG;IACH~~,~~OAAO,~~CAAC~~,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC~~;~~CAChD,CAAC;~~AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}
1	+ {"version":3,"file":"BannerBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}

package/dist/components/BannerBase/BannerBase.types.d.mts CHANGED Viewed

@@ -10,10 +10,6 @@ type BannerBaseCloseButtonProps = Omit<Partial<ButtonIconProps>, 'iconName' | 'o
      * Optional test id for the close button element.
      */
     'data-testid'?: string;
-    /**
-     * Optional click handler for the close button.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> & {
     /**
@@ -35,7 +31,7 @@ type BannerBasePropsBase = BannerBasePropsShared & Omit<BoxProps, 'children'> &
     onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Optional props for the close `ButtonIcon`.
-     * Providing this also shows a close button.
+     * Only used when `onClose` is provided.
      */
     closeButtonProps?: BannerBaseCloseButtonProps;
 };

package/dist/components/BannerBase/BannerBase.types.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;~~IACvB;;OAEG;IACH~~,~~OAAO,~~CAAC~~,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC~~;~~CAChD,CAAC;~~AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}
1	+ {"version":3,"file":"BannerBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,4BAAkB;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,KAAK,2BAA2B,GAAG,IAAI,CACrC,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,SAAS,GAAG,SAAS,CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACpC,OAAO,CAAC,eAAe,CAAC,EACxB,UAAU,GAAG,SAAS,CACvB,GAAG;IACF;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG,qBAAqB,GAC9C,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C,CAAC;AAEJ,KAAK,gCAAgC,GAAG;IACtC,mBAAmB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAC/C,CAAC,gCAAgC,GAAG,mCAAmC,CAAC,CAAC"}

package/dist/components/BannerBase/BannerBase.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BannerBase.types.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask-previews/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n ~~/\n Optional click handler for the close button.\n /\n onClick?: MouseEventHandler<HTMLButtonElement>;\n~~};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * ~~Providing~~ ~~this~~ ~~also~~ ~~shows~~ a ~~close button~~.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}
1	+ {"version":3,"file":"BannerBase.types.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask-previews/design-system-shared';\nimport type { MouseEventHandler } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n Partial<ButtonProps>,\n 'children' \| 'onClick' \| 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n Partial<ButtonIconProps>,\n 'iconName' \| 'onClick'\n> & {\n /*\n Optional test id for the close button element.\n /\n 'data-testid'?: string;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n Omit<BoxProps, 'children'> & {\n /\n Optional props for the title `Text` when the title is a string.\n /\n titleProps?: Partial<TextProps>;\n /\n Optional props for the description `Text` when description is a string.\n /\n descriptionProps?: Partial<TextProps>;\n /\n Optional props for the children wrapper `Text` when children is a string.\n /\n childrenWrapperProps?: Partial<TextProps>;\n /\n Optional click handler for the close button.\n * If provided, a close button is shown.\n /\n onClose?: MouseEventHandler<HTMLButtonElement>;\n /\n Optional props for the close `ButtonIcon`.\n * Only used when `onClose` is provided.\n */\n closeButtonProps?: BannerBaseCloseButtonProps;\n };\n\ntype BannerBaseActionPropsWithHandler = {\n actionButtonOnClick: MouseEventHandler<HTMLButtonElement>;\n actionButtonLabel: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n actionButtonOnClick?: undefined;\n actionButtonLabel?: string;\n actionButtonProps?: BannerBaseActionButtonProps;\n};\n\nexport type BannerBaseProps = BannerBasePropsBase &\n (BannerBaseActionPropsWithHandler \| BannerBaseActionPropsWithoutHandler);\n"]}

package/dist/components/ButtonBase/ButtonBase.cjs CHANGED Viewed

@@ -34,6 +34,13 @@ const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
 exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = design_system_shared_1.ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
     const Component = asChild ? react_slot_1.Slot : 'button';
     const isInteractive = !(isDisabled ?? isLoading);
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = ButtonBase_constants_1.MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Calculate tabIndex based on asChild and disabled state
     const getTabIndex = () => {
         if (asChild) {
@@ -41,41 +48,42 @@ exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = desi
         }
         return isDisabled ? -1 : undefined;
     };
+    const renderLabel = () => {
+        if (children && typeof children === 'string') {
+            return (react_1.default.createElement(Text_1.Text, { variant: labelTextVariant, fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...textProps },
+                react_1.default.createElement("span", null, children)));
+        }
+        return children;
+    };
     const renderLoadingState = () => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
-            react_1.default.createElement(Icon_1.Icon, { name: design_system_shared_1.IconName.Loading, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
-            react_1.default.createElement(Text_1.Text, { fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...loadingTextProps },
+        react_1.default.createElement("span", { className: "absolute inline-flex items-center gap-x-1", "aria-hidden": "true" },
+            react_1.default.createElement(Icon_1.Icon, { name: design_system_shared_1.IconName.Loading, size: iconSize, className: (0, tw_merge_1.twMerge)('animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
+            react_1.default.createElement(Text_1.Text, { variant: labelTextVariant, fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...loadingTextProps },
                 react_1.default.createElement("span", null, loadingText))),
-        react_1.default.createElement("span", { className: "invisible inline-flex items-center" }, children),
+        react_1.default.createElement("span", { className: "invisible inline-flex items-center", "aria-hidden": "true" }, renderLabel()),
         react_1.default.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
     const renderStartContent = () => {
-        if (startIconName) {
-            return (react_1.default.createElement(Icon_1.Icon, { name: startIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
+        if (finalStartIconName) {
+            return (react_1.default.createElement(Icon_1.Icon, { name: finalStartIconName, size: iconSize, className: (0, tw_merge_1.twMerge)('shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
         }
         if (startAccessory) {
-            return (react_1.default.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
+            return react_1.default.createElement("span", { "aria-hidden": "true" }, startAccessory);
         }
         return null;
     };
     const renderEndContent = () => {
-        if (endIconName) {
-            return (react_1.default.createElement(Icon_1.Icon, { name: endIconName, size: Icon_1.IconSize.Sm, className: (0, tw_merge_1.twMerge)('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
+        if (finalEndIconName) {
+            return (react_1.default.createElement(Icon_1.Icon, { name: finalEndIconName, size: iconSize, className: (0, tw_merge_1.twMerge)('shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
         }
         if (endAccessory) {
-            return (react_1.default.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
+            return react_1.default.createElement("span", { "aria-hidden": "true" }, endAccessory);
         }
         return null;
     };
-    const renderContent = () => {
-        if (children && typeof children === 'string') {
-            return (react_1.default.createElement(Text_1.Text, { fontWeight: Text_1.FontWeight.Medium, color: Text_1.TextColor.Inherit, asChild: true, ...textProps },
-                react_1.default.createElement("span", null, children)));
-        }
-        return children;
-    };
+    const renderContent = () => renderLabel();
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Base styles
-    'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden',
+    'inline-flex items-center justify-center', (0, ButtonBase_constants_1.getButtonBaseBorderRadiusTwClass)(size), (0, ButtonBase_constants_1.getButtonBaseHorizontalPaddingTwClasses)(size, hasStart, hasEnd), hasAccessories && 'gap-x-1', 'font-medium text-default', 'bg-muted', 'overflow-hidden',
     // Add relative positioning for loading state
     'relative',
     // Size

package/dist/components/ButtonBase/ButtonBase.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask-previews/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLoadingState = () => (\n <>\n <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n <Icon\n name={IconName.Loading}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\">{children}</span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (startIconName) {\n return (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (endIconName) {\n return (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'ml-2 shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderContent = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n 'rounded-xl px-4',\n 'font-medium text-default',\n 'bg-muted',\n 'min-w-20 overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
1	+ {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask-previews/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n const hasStart = Boolean(finalStartIconName \|\| startAccessory);\n const hasEnd = Boolean(finalEndIconName \|\| endAccessory);\n const hasAccessories = hasStart \|\| hasEnd;\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLabel = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const renderLoadingState = () => (\n <>\n <span\n className=\"absolute inline-flex items-center gap-x-1\"\n aria-hidden=\"true\"\n >\n <Icon\n name={IconName.Loading}\n size={iconSize}\n className={twMerge(\n 'animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\" aria-hidden=\"true\">\n {renderLabel()}\n </span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (finalStartIconName) {\n return (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return <span aria-hidden=\"true\">{startAccessory}</span>;\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (finalEndIconName) {\n return (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return <span aria-hidden=\"true\">{endAccessory}</span>;\n }\n return null;\n };\n\n const renderContent = () => renderLabel();\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n hasAccessories && 'gap-x-1',\n 'font-medium text-default',\n 'bg-muted',\n 'overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}

package/dist/components/ButtonBase/ButtonBase.constants.cjs CHANGED Viewed

@@ -1,10 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
+exports.getButtonBaseHorizontalPaddingTwClasses = exports.getButtonBaseBorderRadiusTwClass = exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = exports.MAP_BUTTONBASE_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 exports.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [design_system_shared_1.ButtonBaseSize.Sm]: 'h-8',
     [design_system_shared_1.ButtonBaseSize.Md]: 'h-10',
     [design_system_shared_1.ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: 'rounded-lg',
+    [design_system_shared_1.ButtonBaseSize.Md]: 'rounded-xl',
+    [design_system_shared_1.ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+exports.MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.IconSize.Sm,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.IconSize.Md,
+};
+exports.MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [design_system_shared_1.ButtonBaseSize.Sm]: design_system_shared_1.TextVariant.BodySm,
+    [design_system_shared_1.ButtonBaseSize.Md]: design_system_shared_1.TextVariant.BodyMd,
+    [design_system_shared_1.ButtonBaseSize.Lg]: design_system_shared_1.TextVariant.BodyMd,
+};
+const getButtonBaseBorderRadiusTwClass = (size) => exports.TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+exports.getButtonBaseBorderRadiusTwClass = getButtonBaseBorderRadiusTwClass;
+const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== design_system_shared_1.ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
+exports.getButtonBaseHorizontalPaddingTwClasses = getButtonBaseHorizontalPaddingTwClasses;
 //# sourceMappingURL=ButtonBase.constants.cjs.map

package/dist/components/ButtonBase/ButtonBase.constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,~~kFAAyE~~;~~AAE5D~~,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
1	+ {"version":3,"file":"ButtonBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":";;;AAAA,kFAIiD;AAEpC,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEW,QAAA,mCAAmC,GAG5C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACjC,CAAC;AAEW,QAAA,gCAAgC,GAGzC;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;IACvC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAW,CAAC,MAAM;CACxC,CAAC;AAEK,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,2CAAmC,CAAC,IAAI,CAAC,CAAC;AAF1C,QAAA,gCAAgC,oCAEU;AAEhD,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,qCAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAfW,QAAA,uCAAuC,2CAelD","sourcesContent":["import {\n ButtonBaseSize,\n IconSize,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n [ButtonBaseSize.Sm]: IconSize.Sm,\n [ButtonBaseSize.Md]: IconSize.Sm,\n [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n ButtonBaseSize,\n TextVariant\n> = {\n [ButtonBaseSize.Sm]: TextVariant.BodySm,\n [ButtonBaseSize.Md]: TextVariant.BodyMd,\n [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n buttonSize: ButtonBaseSize,\n hasStart: boolean,\n hasEnd: boolean,\n): string => {\n if (buttonSize !== ButtonBaseSize.Lg \|\| (hasStart && hasEnd)) {\n return 'px-3';\n }\n if (!hasStart && !hasEnd) {\n return 'px-4';\n }\n if (hasStart) {\n return 'pl-3 pr-4';\n }\n return 'pl-4 pr-3';\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.constants.d.cts CHANGED Viewed

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.cts.map

package/dist/components/ButtonBase/ButtonBase.constants.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,cAAc,~~EAAE~~,gDAAgD;~~AAEzE~~,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
1	+ {"version":3,"file":"ButtonBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

package/dist/components/ButtonBase/ButtonBase.constants.d.mts CHANGED Viewed

@@ -1,3 +1,8 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export declare const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<ButtonBaseSize, string>;
+export declare const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<ButtonBaseSize, string>;
+export declare const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize>;
+export declare const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<ButtonBaseSize, TextVariant>;
+export declare const getButtonBaseBorderRadiusTwClass: (size: ButtonBaseSize) => string;
+export declare const getButtonBaseHorizontalPaddingTwClasses: (buttonSize: ButtonBaseSize, hasStart: boolean, hasEnd: boolean) => string;
 //# sourceMappingURL=ButtonBase.constants.d.mts.map

package/dist/components/ButtonBase/ButtonBase.constants.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,cAAc,~~EAAE~~,gDAAgD;~~AAEzE~~,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC"}
1	+ {"version":3,"file":"ButtonBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,cAAc,EACd,MAAM,CAKP,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAIzE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CACnD,cAAc,EACd,WAAW,CAKZ,CAAC;AAEF,eAAO,MAAM,gCAAgC,SACrC,cAAc,KACnB,MAAmD,CAAC;AAEvD,eAAO,MAAM,uCAAuC,eACtC,cAAc,YAChB,OAAO,UACT,OAAO,KACd,MAWF,CAAC"}

package/dist/components/ButtonBase/ButtonBase.constants.mjs CHANGED Viewed

@@ -1,7 +1,35 @@
-import { ButtonBaseSize } from "@metamask-previews/design-system-shared";
+import { ButtonBaseSize, IconSize, TextVariant } from "@metamask-previews/design-system-shared";
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION = {
     [ButtonBaseSize.Sm]: 'h-8',
     [ButtonBaseSize.Md]: 'h-10',
     [ButtonBaseSize.Lg]: 'h-12', // size (48px).
 };
+export const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS = {
+    [ButtonBaseSize.Sm]: 'rounded-lg',
+    [ButtonBaseSize.Md]: 'rounded-xl',
+    [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.
+};
+export const MAP_BUTTONBASE_SIZE_ICONSIZE = {
+    [ButtonBaseSize.Sm]: IconSize.Sm,
+    [ButtonBaseSize.Md]: IconSize.Sm,
+    [ButtonBaseSize.Lg]: IconSize.Md,
+};
+export const MAP_BUTTONBASE_SIZE_TEXT_VARIANT = {
+    [ButtonBaseSize.Sm]: TextVariant.BodySm,
+    [ButtonBaseSize.Md]: TextVariant.BodyMd,
+    [ButtonBaseSize.Lg]: TextVariant.BodyMd,
+};
+export const getButtonBaseBorderRadiusTwClass = (size) => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];
+export const getButtonBaseHorizontalPaddingTwClasses = (buttonSize, hasStart, hasEnd) => {
+    if (buttonSize !== ButtonBaseSize.Lg || (hasStart && hasEnd)) {
+        return 'px-3';
+    }
+    if (!hasStart && !hasEnd) {
+        return 'px-4';
+    }
+    if (hasStart) {
+        return 'pl-3 pr-4';
+    }
+    return 'pl-4 pr-3';
+};
 //# sourceMappingURL=ButtonBase.constants.mjs.map

package/dist/components/ButtonBase/ButtonBase.constants.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,cAAc,~~EAAE~~,gDAAgD;~~AAEzE~~,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC","sourcesContent":["import { ButtonBaseSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n"]}
1	+ {"version":3,"file":"ButtonBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACZ,gDAAgD;AAEjD,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK;IAC1B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM;IAC3B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,eAAe;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAGzC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,IAAoB,EACZ,EAAE,CAAC,mCAAmC,CAAC,IAAI,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,uCAAuC,GAAG,CACrD,UAA0B,EAC1B,QAAiB,EACjB,MAAe,EACP,EAAE;IACV,IAAI,UAAU,KAAK,cAAc,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,EAAE;QAC5D,OAAO,MAAM,CAAC;KACf;IACD,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;QACxB,OAAO,MAAM,CAAC;KACf;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAW,CAAC;KACpB;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import {\n ButtonBaseSize,\n IconSize,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'h-8', // size (32px).\n [ButtonBaseSize.Md]: 'h-10', // size (40px).\n [ButtonBaseSize.Lg]: 'h-12', // size (48px).\n};\n\nexport const TWCLASSMAP_BUTTONBASE_BORDER_RADIUS: Record<\n ButtonBaseSize,\n string\n> = {\n [ButtonBaseSize.Sm]: 'rounded-lg', // 8px.\n [ButtonBaseSize.Md]: 'rounded-xl', // 12px.\n [ButtonBaseSize.Lg]: 'rounded-xl', // 12px.\n};\n\nexport const MAP_BUTTONBASE_SIZE_ICONSIZE: Record<ButtonBaseSize, IconSize> = {\n [ButtonBaseSize.Sm]: IconSize.Sm,\n [ButtonBaseSize.Md]: IconSize.Sm,\n [ButtonBaseSize.Lg]: IconSize.Md,\n};\n\nexport const MAP_BUTTONBASE_SIZE_TEXT_VARIANT: Record<\n ButtonBaseSize,\n TextVariant\n> = {\n [ButtonBaseSize.Sm]: TextVariant.BodySm,\n [ButtonBaseSize.Md]: TextVariant.BodyMd,\n [ButtonBaseSize.Lg]: TextVariant.BodyMd,\n};\n\nexport const getButtonBaseBorderRadiusTwClass = (\n size: ButtonBaseSize,\n): string => TWCLASSMAP_BUTTONBASE_BORDER_RADIUS[size];\n\nexport const getButtonBaseHorizontalPaddingTwClasses = (\n buttonSize: ButtonBaseSize,\n hasStart: boolean,\n hasEnd: boolean,\n): string => {\n if (buttonSize !== ButtonBaseSize.Lg \|\| (hasStart && hasEnd)) {\n return 'px-3';\n }\n if (!hasStart && !hasEnd) {\n return 'px-4';\n }\n if (hasStart) {\n return 'pl-3 pr-4';\n }\n return 'pl-4 pr-3';\n};\n"]}

package/dist/components/ButtonBase/ButtonBase.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;~~AAO1C~~,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,~~wGAiMtB~~,CAAC"}
1	+ {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;AAa1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGA4MtB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;~~AAO1C~~,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,~~wGAiMtB~~,CAAC"}
1	+ {"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;AAa1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGA4MtB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs CHANGED Viewed

@@ -9,12 +9,19 @@ import { Slot, Slottable } from "@radix-ui/react-slot";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
 import { twMerge } from "../../utils/tw-merge.mjs";
-import { Icon, IconSize } from "../Icon/index.mjs";
+import { Icon } from "../Icon/index.mjs";
 import { Text, FontWeight, TextColor } from "../Text/index.mjs";
-import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
+import { MAP_BUTTONBASE_SIZE_ICONSIZE, MAP_BUTTONBASE_SIZE_TEXT_VARIANT, getButtonBaseBorderRadiusTwClass, getButtonBaseHorizontalPaddingTwClasses, TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from "./ButtonBase.constants.mjs";
 export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSize.Lg, isFullWidth, asChild, isDisabled, isLoading, loadingText, loadingIconProps, loadingTextProps, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, textProps, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-haspopup': ariaHaspopup, ...props }, ref) => {
     const Component = asChild ? Slot : 'button';
     const isInteractive = !(isDisabled ?? isLoading);
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    const hasStart = Boolean(finalStartIconName || startAccessory);
+    const hasEnd = Boolean(finalEndIconName || endAccessory);
+    const hasAccessories = hasStart || hasEnd;
+    const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];
+    const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];
     // Calculate tabIndex based on asChild and disabled state
     const getTabIndex = () => {
         if (asChild) {
@@ -22,41 +29,42 @@ export const ButtonBase = forwardRef(({ children, className, size = ButtonBaseSi
         }
         return isDisabled ? -1 : undefined;
     };
+    const renderLabel = () => {
+        if (children && typeof children === 'string') {
+            return (React.createElement(Text, { variant: labelTextVariant, fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...textProps },
+                React.createElement("span", null, children)));
+        }
+        return children;
+    };
     const renderLoadingState = () => (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "absolute inline-flex items-center", "aria-hidden": "true" },
-            React.createElement(Icon, { name: IconName.Loading, size: IconSize.Sm, className: twMerge('mr-2 animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
-            React.createElement(Text, { fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...loadingTextProps },
+        React.createElement("span", { className: "absolute inline-flex items-center gap-x-1", "aria-hidden": "true" },
+            React.createElement(Icon, { name: IconName.Loading, size: iconSize, className: twMerge('animate-spin text-inherit', loadingIconProps?.className), ...loadingIconProps }),
+            React.createElement(Text, { variant: labelTextVariant, fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...loadingTextProps },
                 React.createElement("span", null, loadingText))),
-        React.createElement("span", { className: "invisible inline-flex items-center" }, children),
+        React.createElement("span", { className: "invisible inline-flex items-center", "aria-hidden": "true" }, renderLabel()),
         React.createElement("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, loadingText || 'Loading')));
     const renderStartContent = () => {
-        if (startIconName) {
-            return (React.createElement(Icon, { name: startIconName, size: IconSize.Sm, className: twMerge('mr-2 shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
+        if (finalStartIconName) {
+            return (React.createElement(Icon, { name: finalStartIconName, size: iconSize, className: twMerge('shrink-0 text-inherit', startIconProps?.className), "aria-hidden": "true", ...startIconProps }));
         }
         if (startAccessory) {
-            return (React.createElement("span", { className: "mr-2", "aria-hidden": "true" }, startAccessory));
+            return React.createElement("span", { "aria-hidden": "true" }, startAccessory);
         }
         return null;
     };
     const renderEndContent = () => {
-        if (endIconName) {
-            return (React.createElement(Icon, { name: endIconName, size: IconSize.Sm, className: twMerge('ml-2 shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
+        if (finalEndIconName) {
+            return (React.createElement(Icon, { name: finalEndIconName, size: iconSize, className: twMerge('shrink-0 text-inherit', endIconProps?.className), "aria-hidden": "true", ...endIconProps }));
         }
         if (endAccessory) {
-            return (React.createElement("span", { className: "ml-2", "aria-hidden": "true" }, endAccessory));
+            return React.createElement("span", { "aria-hidden": "true" }, endAccessory);
         }
         return null;
     };
-    const renderContent = () => {
-        if (children && typeof children === 'string') {
-            return (React.createElement(Text, { fontWeight: FontWeight.Medium, color: TextColor.Inherit, asChild: true, ...textProps },
-                React.createElement("span", null, children)));
-        }
-        return children;
-    };
+    const renderContent = () => renderLabel();
     const mergedClassName = twMerge(
     // Base styles
-    'inline-flex items-center justify-center', 'rounded-xl px-4', 'font-medium text-default', 'bg-muted', 'min-w-20 overflow-hidden',
+    'inline-flex items-center justify-center', getButtonBaseBorderRadiusTwClass(size), getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd), hasAccessories && 'gap-x-1', 'font-medium text-default', 'bg-muted', 'overflow-hidden',
     // Add relative positioning for loading state
     'relative',
     // Size

package/dist/components/ButtonBase/ButtonBase.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask-previews/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLoadingState = () => (\n <>\n <span className=\"absolute inline-flex items-center\" aria-hidden=\"true\">\n <Icon\n name={IconName.Loading}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\">{children}</span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (startIconName) {\n return (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'mr-2 shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return (\n <span className=\"mr-2\" aria-hidden=\"true\">\n {startAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (endIconName) {\n return (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n className={twMerge(\n 'ml-2 shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return (\n <span className=\"ml-2\" aria-hidden=\"true\">\n {endAccessory}\n </span>\n );\n }\n return null;\n };\n\n const renderContent = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n 'rounded-xl px-4',\n 'font-medium text-default',\n 'bg-muted',\n 'min-w-20 overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}
1	+ {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBaseSize, IconName } from '@metamask-previews/design-system-shared';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\nimport { Text, FontWeight, TextColor } from '../Text';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n (\n {\n children,\n className,\n size = ButtonBaseSize.Lg,\n isFullWidth,\n asChild,\n isDisabled,\n isLoading,\n loadingText,\n loadingIconProps,\n loadingTextProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n textProps,\n style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls,\n 'aria-haspopup': ariaHaspopup,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'button';\n const isInteractive = !(isDisabled ?? isLoading);\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n const hasStart = Boolean(finalStartIconName \|\| startAccessory);\n const hasEnd = Boolean(finalEndIconName \|\| endAccessory);\n const hasAccessories = hasStart \|\| hasEnd;\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n // Calculate tabIndex based on asChild and disabled state\n const getTabIndex = () => {\n if (asChild) {\n return undefined;\n }\n return isDisabled ? -1 : undefined;\n };\n\n const renderLabel = () => {\n if (children && typeof children === 'string') {\n return (\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...textProps}\n >\n <span>{children}</span>\n </Text>\n );\n }\n return children;\n };\n\n const renderLoadingState = () => (\n <>\n <span\n className=\"absolute inline-flex items-center gap-x-1\"\n aria-hidden=\"true\"\n >\n <Icon\n name={IconName.Loading}\n size={iconSize}\n className={twMerge(\n 'animate-spin text-inherit',\n loadingIconProps?.className,\n )}\n {...loadingIconProps}\n />\n <Text\n variant={labelTextVariant}\n fontWeight={FontWeight.Medium}\n color={TextColor.Inherit}\n asChild\n {...loadingTextProps}\n >\n <span>{loadingText}</span>\n </Text>\n </span>\n <span className=\"invisible inline-flex items-center\" aria-hidden=\"true\">\n {renderLabel()}\n </span>\n {/* Screen reader announcement for loading */}\n <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {loadingText \|\| 'Loading'}\n </span>\n </>\n );\n\n const renderStartContent = () => {\n if (finalStartIconName) {\n return (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n startIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...startIconProps}\n />\n );\n }\n if (startAccessory) {\n return <span aria-hidden=\"true\">{startAccessory}</span>;\n }\n return null;\n };\n\n const renderEndContent = () => {\n if (finalEndIconName) {\n return (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n className={twMerge(\n 'shrink-0 text-inherit',\n endIconProps?.className,\n )}\n aria-hidden=\"true\"\n {...endIconProps}\n />\n );\n }\n if (endAccessory) {\n return <span aria-hidden=\"true\">{endAccessory}</span>;\n }\n return null;\n };\n\n const renderContent = () => renderLabel();\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex items-center justify-center',\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n hasAccessories && 'gap-x-1',\n 'font-medium text-default',\n 'bg-muted',\n 'overflow-hidden',\n // Add relative positioning for loading state\n 'relative',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // Full width\n isFullWidth && 'w-full',\n // Animation classes - only applied when interactive\n isInteractive && [\n 'transition-all',\n 'duration-100',\n 'ease-linear',\n 'active:scale-[0.97]',\n 'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',\n ],\n // Disabled state - apply to both isDisabled and isLoading\n (isDisabled \|\| isLoading) && 'cursor-not-allowed',\n isDisabled && 'opacity-50',\n // Custom classes\n className,\n );\n\n return (\n <Component\n ref={ref}\n className={mergedClassName}\n disabled={asChild ? undefined : (isDisabled ?? isLoading)}\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-busy={isLoading ? 'true' : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-pressed={ariaPressed}\n aria-expanded={ariaExpanded}\n aria-controls={ariaControls}\n aria-haspopup={ariaHaspopup}\n role={asChild ? undefined : 'button'}\n tabIndex={getTabIndex()}\n style={style}\n {...props}\n >\n {renderStartContent()}\n <Slottable>\n {isLoading ? renderLoadingState() : renderContent()}\n </Slottable>\n {renderEndContent()}\n </Component>\n );\n },\n);\n\nButtonBase.displayName = 'ButtonBase';\n"]}

package/dist/components/HeaderBase/HeaderBase.cjs ADDED Viewed

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBase = void 0;
+const react_1 = __importStar(require("react"));
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const Box_1 = require("../Box/index.cjs");
+exports.HeaderBase = (0, react_1.forwardRef)(({ startAccessory, endAccessory, className, children, childrenWrapperProps, startAccessoryWrapperProps, endAccessoryWrapperProps, ...props }, ref) => (react_1.default.createElement("div", { ref: ref, className: (0, tw_merge_1.twMerge)(
+    // Three-column grid keeps the title horizontally centered: side
+    // columns each take an equal share of the remaining space, the title
+    // sits in the auto-sized center column. No JS measurement needed.
+    'grid grid-cols-[1fr_auto_1fr] items-center', className), ...props },
+    startAccessory && (react_1.default.createElement(Box_1.Box, { ...startAccessoryWrapperProps, className: (0, tw_merge_1.twMerge)('col-start-1 justify-self-start', startAccessoryWrapperProps?.className) }, startAccessory)),
+    children && (react_1.default.createElement(Box_1.Box, { ...childrenWrapperProps, className: (0, tw_merge_1.twMerge)(
+        // Always pin the title to column 2 so missing side accessories
+        // leave their empty `1fr` track in place and keep the title
+        // visually centered.
+        'col-start-2 col-end-3', childrenWrapperProps?.className) }, children)),
+    endAccessory && (react_1.default.createElement(Box_1.Box, { ...endAccessoryWrapperProps, className: (0, tw_merge_1.twMerge)('col-start-3 justify-self-end', endAccessoryWrapperProps?.className) }, endAccessory)))));
+exports.HeaderBase.displayName = 'HeaderBase';
+//# sourceMappingURL=HeaderBase.cjs.map

package/dist/components/HeaderBase/HeaderBase.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderBase.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAIhB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,cAAc,EACd,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,0BAA0B,EAC1B,wBAAwB,EACxB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,kBAAO;IAChB,gEAAgE;IAChE,qEAAqE;IACrE,kEAAkE;IAClE,4CAA4C,EAC5C,SAAS,CACV,KACG,KAAK;IAER,cAAc,IAAI,CACjB,8BAAC,SAAG,OACE,0BAA0B,EAC9B,SAAS,EAAE,IAAA,kBAAO,EAChB,gCAAgC,EAChC,0BAA0B,EAAE,SAAS,CACtC,IAEA,cAAc,CACX,CACP;IACA,QAAQ,IAAI,CACX,8BAAC,SAAG,OACE,oBAAoB,EACxB,SAAS,EAAE,IAAA,kBAAO;QAChB,+DAA+D;QAC/D,4DAA4D;QAC5D,qBAAqB;QACrB,uBAAuB,EACvB,oBAAoB,EAAE,SAAS,CAChC,IAEA,QAAQ,CACL,CACP;IACA,YAAY,IAAI,CACf,8BAAC,SAAG,OACE,wBAAwB,EAC5B,SAAS,EAAE,IAAA,kBAAO,EAChB,8BAA8B,EAC9B,wBAAwB,EAAE,SAAS,CACpC,IAEA,YAAY,CACT,CACP,CACG,CACP,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\n\nimport type { HeaderBaseProps } from './HeaderBase.types';\n\nexport const HeaderBase = forwardRef<HTMLDivElement, HeaderBaseProps>(\n (\n {\n startAccessory,\n endAccessory,\n className,\n children,\n childrenWrapperProps,\n startAccessoryWrapperProps,\n endAccessoryWrapperProps,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={twMerge(\n // Three-column grid keeps the title horizontally centered: side\n // columns each take an equal share of the remaining space, the title\n // sits in the auto-sized center column. No JS measurement needed.\n 'grid grid-cols-[1fr_auto_1fr] items-center',\n className,\n )}\n {...props}\n >\n {startAccessory && (\n <Box\n {...startAccessoryWrapperProps}\n className={twMerge(\n 'col-start-1 justify-self-start',\n startAccessoryWrapperProps?.className,\n )}\n >\n {startAccessory}\n </Box>\n )}\n {children && (\n <Box\n {...childrenWrapperProps}\n className={twMerge(\n // Always pin the title to column 2 so missing side accessories\n // leave their empty `1fr` track in place and keep the title\n // visually centered.\n 'col-start-2 col-end-3',\n childrenWrapperProps?.className,\n )}\n >\n {children}\n </Box>\n )}\n {endAccessory && (\n <Box\n {...endAccessoryWrapperProps}\n className={twMerge(\n 'col-start-3 justify-self-end',\n endAccessoryWrapperProps?.className,\n )}\n >\n {endAccessory}\n </Box>\n )}\n </div>\n ),\n);\n\nHeaderBase.displayName = 'HeaderBase';\n"]}

package/dist/components/HeaderBase/HeaderBase.d.cts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HeaderBaseProps } from "./HeaderBase.types.cjs";
+export declare const HeaderBase: React.ForwardRefExoticComponent<Omit<HeaderBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=HeaderBase.d.cts.map

package/dist/components/HeaderBase/HeaderBase.d.cts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HeaderBase.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGA+DtB,CAAC"}

package/dist/components/HeaderBase/HeaderBase.d.mts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import type { HeaderBaseProps } from "./HeaderBase.types.mjs";
+export declare const HeaderBase: React.ForwardRefExoticComponent<Omit<HeaderBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=HeaderBase.d.mts.map

package/dist/components/HeaderBase/HeaderBase.d.mts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"HeaderBase.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGA+DtB,CAAC"}

package/dist/components/HeaderBase/HeaderBase.mjs ADDED Viewed

@@ -0,0 +1,24 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React, { forwardRef } from "react";
+const React = $importDefault($React);
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { Box } from "../Box/index.mjs";
+export const HeaderBase = forwardRef(({ startAccessory, endAccessory, className, children, childrenWrapperProps, startAccessoryWrapperProps, endAccessoryWrapperProps, ...props }, ref) => (React.createElement("div", { ref: ref, className: twMerge(
+    // Three-column grid keeps the title horizontally centered: side
+    // columns each take an equal share of the remaining space, the title
+    // sits in the auto-sized center column. No JS measurement needed.
+    'grid grid-cols-[1fr_auto_1fr] items-center', className), ...props },
+    startAccessory && (React.createElement(Box, { ...startAccessoryWrapperProps, className: twMerge('col-start-1 justify-self-start', startAccessoryWrapperProps?.className) }, startAccessory)),
+    children && (React.createElement(Box, { ...childrenWrapperProps, className: twMerge(
+        // Always pin the title to column 2 so missing side accessories
+        // leave their empty `1fr` track in place and keep the title
+        // visually centered.
+        'col-start-2 col-end-3', childrenWrapperProps?.className) }, children)),
+    endAccessory && (React.createElement(Box, { ...endAccessoryWrapperProps, className: twMerge('col-start-3 justify-self-end', endAccessoryWrapperProps?.className) }, endAccessory)))));
+HeaderBase.displayName = 'HeaderBase';
+//# sourceMappingURL=HeaderBase.mjs.map