@chakra-ui/button/dist/chunk-UVUR7MCU.mjs.map

A React component that is a base button.

{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import { useMergeRefs } from \"@chakra-ui/react-use-merge-refs\"\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  omitThemingProps,\n  SystemStyleObject,\n  ThemingProps,\n  useStyleConfig,\n} from \"@chakra-ui/system\"\nimport { cx, dataAttr } from \"@chakra-ui/shared-utils\"\n\nimport { useMemo } from \"react\"\nimport { useButtonGroup } from \"./button-context\"\nimport { ButtonIcon } from \"./button-icon\"\nimport { ButtonSpinner } from \"./button-spinner\"\nimport { ButtonOptions } from \"./button-types\"\nimport { useButtonType } from \"./use-button-type\"\n\nexport interface ButtonProps\n  extends HTMLChakraProps<\"button\">,\n    ButtonOptions,\n    ThemingProps<\"Button\"> {}\n\n/**\n * Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @see Docs https://chakra-ui.com/docs/components/button\n * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\nexport const Button = forwardRef<ButtonProps, \"button\">((props, ref) => {\n  const group = useButtonGroup()\n  const styles = useStyleConfig(\"Button\", { ...group, ...props })\n\n  const {\n    isDisabled = group?.isDisabled,\n    isLoading,\n    isActive,\n    children,\n    leftIcon,\n    rightIcon,\n    loadingText,\n    iconSpacing = \"0.5rem\",\n    type,\n    spinner,\n    spinnerPlacement = \"start\",\n    className,\n    as,\n    ...rest\n  } = omitThemingProps(props)\n\n  /**\n   * When button is used within ButtonGroup (i.e. flushed with sibling buttons),\n   * it is important to add a `zIndex` on focus.\n   *\n   * So let's read the component styles and then add `zIndex` to it.\n   */\n  const buttonStyles: SystemStyleObject = useMemo(() => {\n    // @ts-ignore\n    const _focus = { ...styles?.[\"_focus\"], zIndex: 1 }\n    return {\n      display: \"inline-flex\",\n      appearance: \"none\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      userSelect: \"none\",\n      position: \"relative\",\n      whiteSpace: \"nowrap\",\n      verticalAlign: \"middle\",\n      outline: \"none\",\n      ...styles,\n      ...(!!group && { _focus }),\n    }\n  }, [styles, group])\n\n  const { ref: _ref, type: defaultType } = useButtonType(as)\n\n  const contentProps = { rightIcon, leftIcon, iconSpacing, children }\n\n  return (\n    <chakra.button\n      ref={useMergeRefs(ref, _ref)}\n      as={as}\n      type={type ?? defaultType}\n      data-active={dataAttr(isActive)}\n      data-loading={dataAttr(isLoading)}\n      __css={buttonStyles}\n      className={cx(\"chakra-button\", className)}\n      {...rest}\n      disabled={isDisabled || isLoading}\n    >\n      {isLoading && spinnerPlacement === \"start\" && (\n        <ButtonSpinner\n          className=\"chakra-button__spinner--start\"\n          label={loadingText}\n          placement=\"start\"\n          spacing={iconSpacing}\n        >\n          {spinner}\n        </ButtonSpinner>\n      )}\n\n      {isLoading ? (\n        loadingText || (\n          <chakra.span opacity={0}>\n            <ButtonContent {...contentProps} />\n          </chakra.span>\n        )\n      ) : (\n        <ButtonContent {...contentProps} />\n      )}\n\n      {isLoading && spinnerPlacement === \"end\" && (\n        <ButtonSpinner\n          className=\"chakra-button__spinner--end\"\n          label={loadingText}\n          placement=\"end\"\n          spacing={iconSpacing}\n        >\n          {spinner}\n        </ButtonSpinner>\n      )}\n    </chakra.button>\n  )\n})\n\nButton.displayName = \"Button\"\n\ntype ButtonContentProps = Pick<\n  ButtonProps,\n  \"leftIcon\" | \"rightIcon\" | \"children\" | \"iconSpacing\"\n>\n\nfunction ButtonContent(props: ButtonContentProps) {\n  const { leftIcon, rightIcon, children, iconSpacing } = props\n  return (\n    <>\n      {leftIcon && <ButtonIcon marginEnd={iconSpacing}>{leftIcon}</ButtonIcon>}\n      {children}\n      {rightIcon && (\n        <ButtonIcon marginStart={iconSpacing}>{rightIcon}</ButtonIcon>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AAE7B,SAAS,eAAe;AAoEpB,SAwDA,UA5CI,KAZJ;AAlDG,IAAM,SAAS,WAAkC,CAAC,OAAO,QAAQ;AACtE,QAAM,QAAQ,eAAe;AAC7B,QAAM,SAAS,eAAe,UAAU,EAAE,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9D,QAAM;AAAA,IACJ,aAAa,+BAAO;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAQ1B,QAAM,eAAkC,QAAQ,MAAM;AAEpD,UAAM,SAAS,EAAE,GAAG,iCAAS,WAAW,QAAQ,EAAE;AAClD,WAAO;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAI,CAAC,CAAC,SAAS,EAAE,OAAO;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAM,EAAE,KAAK,MAAM,MAAM,YAAY,IAAI,cAAc,EAAE;AAEzD,QAAM,eAAe,EAAE,WAAW,UAAU,aAAa,SAAS;AAElE,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,KAAK,aAAa,KAAK,IAAI;AAAA,MAC3B;AAAA,MACA,MAAM,sBAAQ;AAAA,MACd,eAAa,SAAS,QAAQ;AAAA,MAC9B,gBAAc,SAAS,SAAS;AAAA,MAChC,OAAO;AAAA,MACP,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,MACJ,UAAU,cAAc;AAAA,MAEvB;AAAA,qBAAa,qBAAqB,WACjC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,YACP,WAAU;AAAA,YACV,SAAS;AAAA,YAER;AAAA;AAAA,QACH;AAAA,QAGD,YACC,eACE,oBAAC,OAAO,MAAP,EAAY,SAAS,GACpB,8BAAC,iBAAe,GAAG,cAAc,GACnC,IAGF,oBAAC,iBAAe,GAAG,cAAc;AAAA,QAGlC,aAAa,qBAAqB,SACjC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,YACP,WAAU;AAAA,YACV,SAAS;AAAA,YAER;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,OAAO,cAAc;AAOrB,SAAS,cAAc,OAA2B;AAChD,QAAM,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI;AACvD,SACE,iCACG;AAAA,gBAAY,oBAAC,cAAW,WAAW,aAAc,oBAAS;AAAA,IAC1D;AAAA,IACA,aACC,oBAAC,cAAW,aAAa,aAAc,qBAAU;AAAA,KAErD;AAEJ;","names":[]}