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

Design system react ui components

{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;AACA,OAAO,QAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc;;AAE/D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,EAAE,EACF,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC5D,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,WAAW,EAAE,CAAC;SACf;IACH,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,cAAc,GAAG,OAAO,CAC5B,0BAA0B,EAC1B,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU;QACvB,CAAC,CAAC,qFAAqF;QACvF,CAAC,CAAC,6DAA6D,CAAC;IAClE,IAAI,UAAU,GAAG,gBAAgB,CAAC;IAClC,IAAI,UAAU,EAAE;QACd,UAAU,GAAG,wBAAwB,CAAC;KACvC;SAAM,IAAI,SAAS,EAAE;QACpB,UAAU,GAAG,sBAAsB,CAAC;KACrC;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,4GAA4G,EAC5G,MAAM,EACN,UAAU,EACV,sBAAsB,EAAE,SAAS,CAClC,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,wCAAwC,EACxC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACxC,gBAAgB,EAAE,SAAS,CAC5B,CAAC;IAEF,OAAO,CACL,+BAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACpE,6BAAK,SAAS,EAAC,UAAU;YACvB,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,UAAU,kBACN,SAAS,EACvB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAC,iFAAiF,KACvF,UAAU,GACd;YACF,6BAAK,SAAS,EAAE,eAAe,KAAM,sBAAsB;gBACzD,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,SAAS,CAAC,cAAc,EAC/B,IAAI,EAAE,QAAQ,CAAC,EAAE,KACb,gBAAgB,EACpB,SAAS,EAAE,WAAW,GACtB,CACE,CACF;QACL,KAAK,CAAC,CAAC,CAAC,CACP,oBAAC,IAAI,IACH,OAAO,WACH,UAAU,EACd,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC;YAEjD,kCAAO,KAAK,CAAQ,CACf,CACR,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import type { ChangeEvent, KeyboardEvent } from 'react';\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { Text } from '../Text';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      id,\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label,\n      labelProps,\n      onChange,\n      inputProps,\n      checkboxContainerProps,\n      checkedIconProps,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(event.target.checked);\n    };\n\n    const handleClick = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        event.preventDefault();\n        handleClick();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handleClick }), [handleClick]);\n\n    const outerClassName = twMerge(\n      'inline-flex items-center',\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    const baseBg = isSelected\n      ? 'bg-primary-default hover:bg-primary-default-hover active:bg-primary-default-pressed'\n      : 'bg-default hover:bg-default-hover active:bg-default-pressed';\n    let baseBorder = 'border-default';\n    if (isSelected) {\n      baseBorder = 'border-primary-default';\n    } else if (isInvalid) {\n      baseBorder = 'border-error-default';\n    }\n\n    const checkboxClasses = twMerge(\n      'relative flex size-6 items-center justify-center rounded border-2 p-0 transition-transform active:scale-95',\n      baseBg,\n      baseBorder,\n      checkboxContainerProps?.className,\n    );\n\n    const iconClasses = twMerge(\n      'pointer-events-none transition-opacity',\n      isSelected ? 'opacity-100' : 'opacity-0',\n      checkedIconProps?.className,\n    );\n\n    return (\n      <label htmlFor={id} className={outerClassName} style={style} {...props}>\n        <div className=\"relative\">\n          <input\n            type=\"checkbox\"\n            id={id}\n            checked={isSelected}\n            disabled={isDisabled}\n            aria-invalid={isInvalid}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            className=\"absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n            {...inputProps}\n          />\n          <div className={checkboxClasses} {...checkboxContainerProps}>\n            <Icon\n              name={IconName.Check}\n              color={IconColor.PrimaryInverse}\n              size={IconSize.Sm}\n              {...checkedIconProps}\n              className={iconClasses}\n            />\n          </div>\n        </div>\n        {label ? (\n          <Text\n            asChild\n            {...labelProps}\n            className={twMerge('ml-3', labelProps?.className)}\n          >\n            <span>{label}</span>\n          </Text>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}