@metamask/design-system-react
Version:
Design system react ui components
1 lines • 4.28 kB
Source Map (JSON)
{"version":3,"file":"ButtonSecondary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAIvC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,2BAA2B;IAC3B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,uBAAuB;QACvB,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,kBAAkB;KAChC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qEAAqE;QACrE,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,wCAAwC;QACxC,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,QAAQ;YACN,CAAC,SAAS,IAAI,CAAC,sBAAsB,EAAE,yBAAyB,CAAC;QACnE,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC;QACjE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = forwardRef<\n HTMLButtonElement,\n ButtonSecondaryProps\n>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default secondary styles\n !isDanger &&\n !isInverse && [\n 'bg-muted text-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-muted text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-muted-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'border-2 border-primary-inverse bg-transparent text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'border-0 bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isDanger &&\n !isInverse && ['hover:bg-muted-hover', 'active:bg-muted-pressed'],\n isInverse && !isDanger && ['hover:bg-hover', 'active:bg-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonSecondary.displayName = 'ButtonSecondary';\n"]}