{"version":3,"file":"index116.cjs","sources":["../src/components/buttons/base/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useState } from \"react\";\nimport {\n  LabelPairedCircleInfoSmRegularIcon,\n  LabelPairedLoaderCaptionRegularIcon,\n  LabelPairedLoaderLgRegularIcon,\n  LabelPairedLoaderMdRegularIcon,\n  LabelPairedLoaderSmRegularIcon,\n} from \"@deriv/quill-icons/LabelPaired\";\nimport { useFocusHandling } from \"../../../hooks/useFocusHandling\";\nimport ButtonBlackStyles from \"../base/styles/basic/BasicButtonBlack.module.css\";\nimport ButtonWhiteStyles from \"../base/styles/basic/BasicButtonWhite.module.css\";\nimport ButtonCoralStyles from \"../base/styles/basic/BasicButtonCoral.module.css\";\nimport ButtonBuyStyles from \"../base/styles/basic/BasicButtonBuy.module.css\";\nimport ButtonSellStyles from \"../base/styles/basic/BasicButtonSell.module.css\";\nimport ButtonBlackWhiteStyles from \"../base/styles/basic/BasicButtonBlackWhite.module.css\";\nimport ButtonWhiteBlackStyles from \"../base/styles/basic/BasicButtonWhiteBlack.module.css\";\nimport ButtonGlacierStyles from \"../base/styles/basic/BasicButtonGlacier.module.css\";\nimport IconButtonBlackStyles from \"../base/styles/icon/IconButtonBlack.module.css\";\nimport IconButtonWhiteStyles from \"../base/styles/icon/IconButtonWhite.module.css\";\nimport IconButtonCoralStyles from \"../base/styles/icon/IconButtonCoral.module.css\";\nimport IconButtonBlackWhiteStyles from \"../base/styles/icon/IconButtonBlackWhite.module.css\";\nimport IconButtonWhiteBlackStyles from \"../base/styles/icon/IconButtonWhiteBlack.module.css\";\n\nexport type BaseButtonType = {\n  className?: string;\n  label?: string;\n  hasIconLeft?: boolean;\n  hasIconRight?: boolean;\n  hasLabel?: boolean;\n  iconLoading?: boolean;\n  showFocusRing?: boolean;\n\n  /** Variant props */\n  size?: \"lg\" | \"xl\" | \"md\" | \"sm\";\n  state?: \"default\" | \"loading\" | \"disabled\";\n  style?: \"primary\" | \"secondary\" | \"tertiary\";\n  width?: \"hug content\" | \"fill container\";\n\n  /** Custom Props  */\n  color?:\n    | \"coral\"\n    | \"black\"\n    | \"white\"\n    | \"blackWhite\"\n    | \"whiteBlack\"\n    | \"buy\"\n    | \"sell\"\n    | \"glacier\";\n  iconLeft?: ReactNode;\n  iconRight?: ReactNode;\n  icon?: ReactNode;\n  type?: \"basic\" | \"icon\";\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst buttonStyles = {\n  black: ButtonBlackStyles,\n  white: ButtonWhiteStyles,\n  coral: ButtonCoralStyles,\n  buy: ButtonBuyStyles,\n  sell: ButtonSellStyles,\n  blackWhite: ButtonBlackWhiteStyles,\n  whiteBlack: ButtonWhiteBlackStyles,\n  glacier: ButtonGlacierStyles,\n};\n\nconst iconButtonStyles = {\n  black: IconButtonBlackStyles,\n  white: IconButtonWhiteStyles,\n  coral: IconButtonCoralStyles,\n  blackWhite: IconButtonBlackWhiteStyles,\n  whiteBlack: IconButtonWhiteBlackStyles,\n};\n\nconst BaseButton: FunctionComponent<BaseButtonType> = ({\n  className = \"\",\n  size = \"lg\",\n  state = \"default\",\n  style = \"primary\",\n  width = \"hug content\",\n  color = \"coral\",\n  label = \"Label\",\n  showFocusRing = false,\n  iconLeft,\n  iconRight,\n  icon = <LabelPairedCircleInfoSmRegularIcon />,\n  onClick,\n  type = \"basic\",\n}) => {\n  const styles =\n    type === \"basic\"\n      ? buttonStyles[color as keyof typeof buttonStyles]\n      : iconButtonStyles[color as keyof typeof iconButtonStyles];\n\n  const buttonId = `quill-button-${type}-${state}-${style}-${type}-${size}-${color}`;\n\n  const loaderIcons = {\n    sm: LabelPairedLoaderCaptionRegularIcon,\n    md: LabelPairedLoaderSmRegularIcon,\n    lg: LabelPairedLoaderMdRegularIcon,\n    xl: LabelPairedLoaderLgRegularIcon,\n  };\n\n  const [highlight, setHighlight] = useState(showFocusRing);\n\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: state === \"disabled\",\n    setHighlight,\n  });\n\n  const renderContent = () => {\n    if (state === \"loading\") {\n      const LoaderIcon = loaderIcons[size];\n      return (\n        <div\n          className={[styles.iconLoading, \"quill-ui-next-spinner\"].join(\" \")}\n        >\n          {/* Empty label div required for icon color inheritance */}\n          <div className={styles.label}></div>\n          <div className={styles.iconColorReference}></div>\n          {LoaderIcon && <LoaderIcon />}\n        </div>\n      );\n    }\n\n    return type === \"icon\" ? (\n      <>\n        <div className={styles.iconCustom}>\n          <div className={styles.iconColorReference}></div>\n          {icon}\n        </div>\n      </>\n    ) : (\n      <>\n        <div className={styles.iconLeft}>{iconLeft}</div>\n        {label && <div className={styles.label}>{label}</div>}\n        <div className={styles.iconRight}>{iconRight}</div>\n      </>\n    );\n  };\n\n  return (\n    <button\n      className={[styles.root, className, \"quill-ui-next-component\"].join(\" \")}\n      data-id={buttonId}\n      data-size={size}\n      data-state={state}\n      disabled={state === \"disabled\"}\n      data-style={style}\n      data-width={width}\n      data-type={type}\n      tabIndex={state === \"loading\" ? -1 : 0}\n      onClick={(e) => state !== \"loading\" && onClick?.(e)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n    >\n      {renderContent()}\n      {highlight && <div className={styles.bgFocus} />}\n    </button>\n  );\n};\n\nexport default BaseButton;\n"],"names":["ButtonBlackStyles","ButtonWhiteStyles","ButtonCoralStyles","ButtonBuyStyles","ButtonSellStyles","ButtonBlackWhiteStyles","ButtonWhiteBlackStyles","ButtonGlacierStyles","IconButtonBlackStyles","IconButtonWhiteStyles","IconButtonCoralStyles","IconButtonBlackWhiteStyles","IconButtonWhiteBlackStyles","useState","useFocusHandling","jsxs","jsx","Fragment"],"mappings":"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"}