@metamask/design-system-react/dist/components/ButtonBase/ButtonBase.mjs.map

Design system react ui components

{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { ButtonBaseSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, 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"]}