@metamask/design-system-react
Version:
Design system react ui components
1 lines • 2.02 kB
Source Map (JSON)
{"version":3,"file":"ButtonHero.cjs","sourceRoot":"","sources":["../../../src/components/ButtonHero/ButtonHero.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAI9B,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtD,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0DAA0D;IAC1D,yCAAyC;IACzC,gBAAgB;IAChB,SAAS,IAAI,4BAA4B;IACzC,sDAAsD;IACtD,aAAa,IAAI;QACf,gCAAgC;QAChC,mCAAmC;KACpC,EACD,oHAAoH,EACpH,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,gBACT,OAAO,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { ButtonBase } from '../ButtonBase';\n\nimport type { ButtonHeroProps } from './ButtonHero.types';\n\nexport const ButtonHero = forwardRef<HTMLButtonElement, ButtonHeroProps>(\n ({ className, isDisabled, isLoading, ...props }, ref) => {\n const isInteractive = !(isDisabled || isLoading);\n\n const mergedClassName = twMerge(\n // Base hero styles - locked to light theme primary colors\n 'bg-primary-default text-primary-inverse',\n // Loading state\n isLoading && 'bg-primary-default-pressed',\n // Hover/Active states - only applied when interactive\n isInteractive && [\n 'hover:bg-primary-default-hover',\n 'active:bg-primary-default-pressed',\n ],\n 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n data-theme=\"light\"\n {...props}\n />\n );\n },\n);\n\nButtonHero.displayName = 'ButtonHero';\n"]}