@metamask/design-system-react
Version:
Design system react ui components
103 lines • 6.38 kB
JavaScript
;
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.ButtonBase = void 0;
const react_slot_1 = require("@radix-ui/react-slot");
const react_1 = __importStar(require("react"));
const types_1 = require("../../types/index.cjs");
const tw_merge_1 = require("../../utils/tw-merge.cjs");
const Icon_1 = require("../Icon/index.cjs");
const Text_1 = require("../Text/index.cjs");
const ButtonBase_constants_1 = require("./ButtonBase.constants.cjs");
exports.ButtonBase = (0, react_1.forwardRef)(({ children, className, size = types_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);
// Calculate tabIndex based on asChild and disabled state
const getTabIndex = () => {
if (asChild) {
return undefined;
}
return isDisabled ? -1 : undefined;
};
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: Icon_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", null, loadingText))),
react_1.default.createElement("span", { className: "invisible inline-flex items-center" }, children),
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 (startAccessory) {
return (react_1.default.createElement("span", { className: "mr-2", "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 (endAccessory) {
return (react_1.default.createElement("span", { className: "ml-2", "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 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',
// Add relative positioning for loading state
'relative',
// Size
ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],
// Full width
isFullWidth && 'w-full',
// Animation classes - only applied when interactive
isInteractive && [
'transition-all',
'duration-100',
'ease-linear',
'active:scale-[0.97]',
'active:ease-[cubic-bezier(0.3,0.8,0.3,1)]',
],
// Disabled state - apply to both isDisabled and isLoading
(isDisabled || isLoading) && 'cursor-not-allowed', isDisabled && 'opacity-50',
// Custom classes
className);
return (react_1.default.createElement(Component, { ref: ref, className: mergedClassName, disabled: asChild ? undefined : (isDisabled ?? isLoading), "aria-disabled": isDisabled ? 'true' : undefined, "aria-busy": isLoading ? 'true' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-pressed": ariaPressed, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, role: asChild ? undefined : 'button', tabIndex: getTabIndex(), style: style, ...props },
renderStartContent(),
react_1.default.createElement(react_slot_1.Slottable, null, isLoading ? renderLoadingState() : renderContent()),
renderEndContent()));
});
exports.ButtonBase.displayName = 'ButtonBase';
//# sourceMappingURL=ButtonBase.cjs.map