npm - @metamask-previews/design-system-react - Versions diffs - 0.20.0-preview.f515a62 → 0.22.0-preview.178e60f - Mend

@metamask-previews/design-system-react 0.20.0-preview.f515a62 → 0.22.0-preview.178e60f

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderBase.mjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAI7B,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,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,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO;IAChB,gEAAgE;IAChE,qEAAqE;IACrE,kEAAkE;IAClE,4CAA4C,EAC5C,SAAS,CACV,KACG,KAAK;IAER,cAAc,IAAI,CACjB,oBAAC,GAAG,OACE,0BAA0B,EAC9B,SAAS,EAAE,OAAO,CAChB,gCAAgC,EAChC,0BAA0B,EAAE,SAAS,CACtC,IAEA,cAAc,CACX,CACP;IACA,QAAQ,IAAI,CACX,oBAAC,GAAG,OACE,oBAAoB,EACxB,SAAS,EAAE,OAAO;QAChB,+DAA+D;QAC/D,4DAA4D;QAC5D,qBAAqB;QACrB,uBAAuB,EACvB,oBAAoB,EAAE,SAAS,CAChC,IAEA,QAAQ,CACL,CACP;IACA,YAAY,IAAI,CACf,oBAAC,GAAG,OACE,wBAAwB,EAC5B,SAAS,EAAE,OAAO,CAChB,8BAA8B,EAC9B,wBAAwB,EAAE,SAAS,CACpC,IAEA,YAAY,CACT,CACP,CACG,CACP,CACF,CAAC;AAEF,UAAU,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.types.cjs ADDED Viewed

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=HeaderBase.types.cjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderBase.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport type { BoxProps } from '../Box';\n\n/**\n * Box prop bag for the three internal slot wrappers (start accessory, title,\n * end accessory). Mirrors the legacy `BoxProps<'div'>` typing but is bound to\n * the MMDS `BoxProps` shape and carries an explicit `data-*` index signature\n * so consumers can pass test ids and other dataset attributes through\n * `Partial`/`Omit` indirection.\n */\ntype SlotWrapperProps = Omit<BoxProps, 'children' | 'asChild'> & {\n [key: `data-${string}`]: string | undefined;\n};\n\nexport type HeaderBaseProps = Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Title content rendered in the centered column. The title stays\n * horizontally centered regardless of the side accessories' widths\n * (CSS Grid handles the equal-sidebar layout — no JS measurement needed).\n */\n children?: ReactNode;\n /**\n * Props forwarded to the `Box` wrapping `children`. Use this to add\n * `data-testid`, override layout, or apply Tailwind utilities via\n * `className`.\n */\n childrenWrapperProps?: SlotWrapperProps;\n /**\n * Content rendered in the start (left in LTR) column. Typically a back\n * `ButtonIcon` or similar leading affordance.\n */\n startAccessory?: ReactNode;\n /**\n * Props forwarded to the `Box` wrapping `startAccessory`.\n */\n startAccessoryWrapperProps?: SlotWrapperProps;\n /**\n * Content rendered in the end (right in LTR) column. Typically a close\n * `ButtonIcon` or similar trailing affordance.\n */\n endAccessory?: ReactNode;\n /**\n * Props forwarded to the `Box` wrapping `endAccessory`.\n */\n endAccessoryWrapperProps?: SlotWrapperProps;\n /**\n * Optional prop for additional CSS classes to be applied to the HeaderBase\n * root. Merged with the component's defaults via `twMerge`.\n */\n className?: string;\n};\n"]}

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

@@ -0,0 +1,51 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { BoxProps } from "../Box/index.cjs";
+/**
+ * Box prop bag for the three internal slot wrappers (start accessory, title,
+ * end accessory). Mirrors the legacy `BoxProps<'div'>` typing but is bound to
+ * the MMDS `BoxProps` shape and carries an explicit `data-*` index signature
+ * so consumers can pass test ids and other dataset attributes through
+ * `Partial`/`Omit` indirection.
+ */
+type SlotWrapperProps = Omit<BoxProps, 'children' | 'asChild'> & {
+    [key: `data-${string}`]: string | undefined;
+};
+export type HeaderBaseProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * Title content rendered in the centered column. The title stays
+     * horizontally centered regardless of the side accessories' widths
+     * (CSS Grid handles the equal-sidebar layout — no JS measurement needed).
+     */
+    children?: ReactNode;
+    /**
+     * Props forwarded to the `Box` wrapping `children`. Use this to add
+     * `data-testid`, override layout, or apply Tailwind utilities via
+     * `className`.
+     */
+    childrenWrapperProps?: SlotWrapperProps;
+    /**
+     * Content rendered in the start (left in LTR) column. Typically a back
+     * `ButtonIcon` or similar leading affordance.
+     */
+    startAccessory?: ReactNode;
+    /**
+     * Props forwarded to the `Box` wrapping `startAccessory`.
+     */
+    startAccessoryWrapperProps?: SlotWrapperProps;
+    /**
+     * Content rendered in the end (right in LTR) column. Typically a close
+     * `ButtonIcon` or similar trailing affordance.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * Props forwarded to the `Box` wrapping `endAccessory`.
+     */
+    endAccessoryWrapperProps?: SlotWrapperProps;
+    /**
+     * Optional prop for additional CSS classes to be applied to the HeaderBase
+     * root. Merged with the component's defaults via `twMerge`.
+     */
+    className?: string;
+};
+export {};
+//# sourceMappingURL=HeaderBase.types.d.cts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"HeaderBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc;AAEvD,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAe;AAEvC;;;;;;GAMG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC/D,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACtE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,gBAAgB,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;OAEG;IACH,0BAA0B,CAAC,EAAE,gBAAgB,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,wBAAwB,CAAC,EAAE,gBAAgB,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}