@yamada-ui/button/dist/chunk-AFVGPBIP.mjs.map

Yamada UI button components

{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n  /**\n   * The type of button. Accepts `button`, `reset`, or `submit`.\n   *\n   * @default 'button'\n   */\n  type?: \"button\" | \"reset\" | \"submit\"\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  active?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * The icon to display at the end side of the button.\n   */\n  endIcon?: ReactElement\n  /**\n   * If `true`, the button is full rounded. Else, it'll be slightly round.\n   *\n   * @default false\n   */\n  fullRounded?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   *\n   * @deprecated Use `active` instead.\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\n   *\n   * @deprecated Use `loading` instead.\n   */\n  isLoading?: boolean\n  /**\n   * If `true`, the button is full rounded. Else, it'll be slightly round.\n   *\n   * @default false\n   *\n   * @deprecated Use `fullRounded` instead.\n   */\n  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   *\n   * @deprecated Use `startIcon` instead.\n   */\n  leftIcon?: ReactElement\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * The icon to display when the button is loading.\n   */\n  loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n  /**\n   * The placement of the loading indicator. Accepts `start` or `end`.\n   *\n   * @default 'start'\n   */\n  loadingPlacement?: \"end\" | \"start\"\n  /**\n   * The text to display when the button is loading.\n   */\n  loadingText?: string\n  /**\n   * The icon to display at the right side of the button.\n   *\n   * @deprecated Use `endIcon` instead.\n   */\n  rightIcon?: ReactElement\n  /**\n   * The icon to display at the start side of the button.\n   */\n  startIcon?: ReactElement\n}\n\nexport interface ButtonProps\n  extends HTMLUIProps<\"button\">,\n    ThemeProps<\"Button\">,\n    ButtonOptions {}\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see Docs https://yamada-ui.com/components/forms/button\n */\nexport const Button = forwardRef<ButtonProps, \"button\">(\n  ({ children, __isProcessSkip, __styles, ...props }, ref) => {\n    const group = useButtonGroup()\n    const [styles, mergedProps] = useComponentStyle(\n      \"Button\",\n      {\n        ...group,\n        ...props,\n      },\n      { isProcessSkip: __isProcessSkip, styles: __styles },\n    )\n    const {\n      as,\n      type,\n      className,\n      isActive,\n      active = isActive,\n      isDisabled = group?.disabled,\n      disabled = isDisabled,\n      disableRipple,\n      rightIcon,\n      endIcon = rightIcon,\n      isRounded,\n      fullRounded = isRounded,\n      isLoading,\n      leftIcon,\n      loading = isLoading,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      startIcon = leftIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const trulyDisabled = disabled || loading\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      disabled: disableRipple || trulyDisabled,\n    })\n    const css: CSSUIObject = useMemo(() => {\n      const _focus =\n        \"_focus\" in styles\n          ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n          : {}\n\n      return {\n        alignItems: \"center\",\n        appearance: \"none\",\n        display: \"inline-flex\",\n        gap: \"fallback(2, 0.5rem)\",\n        justifyContent: \"center\",\n        outline: \"none\",\n        overflow: \"hidden\",\n        position: \"relative\",\n        userSelect: \"none\",\n        verticalAlign: \"middle\",\n        whiteSpace: \"nowrap\",\n        ...styles,\n        ...__css,\n        ...(!!group ? { _focus } : {}),\n        ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, fullRounded])\n    const contentProps = {\n      children,\n      endIcon,\n      startIcon,\n    }\n    const loadingProps = {\n      loadingIcon,\n      loadingText,\n    }\n\n    return (\n      <ui.button\n        ref={mergeRefs(ref, buttonRef)}\n        as={as}\n        type={type ?? defaultType}\n        className={cx(\"ui-button\", className)}\n        data-active={dataAttr(active)}\n        data-loading={dataAttr(loading)}\n        disabled={trulyDisabled}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {loading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {loading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {loading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple {...rippleProps} />\n      </ui.button>\n    )\n  },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n  extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n  className,\n  loadingIcon,\n  loadingText,\n}) => {\n  const css = useMemo(\n    (): CSSUIObject => ({\n      alignItems: \"center\",\n      display: \"flex\",\n      fontSize: \"1em\",\n      lineHeight: \"normal\",\n      position: loadingText ? \"relative\" : \"absolute\",\n    }),\n    [loadingText],\n  )\n\n  const element = useMemo(() => {\n    if (typeof loadingIcon === \"string\") {\n      return <LoadingIcon variant={loadingIcon} color=\"current\" />\n    } else {\n      return loadingIcon || <LoadingIcon color=\"current\" />\n    }\n  }, [loadingIcon])\n\n  return (\n    <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n      {element}\n    </ui.div>\n  )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n  extends Pick<ButtonProps, \"children\" | \"endIcon\" | \"startIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  endIcon,\n  startIcon,\n}) => {\n  return (\n    <>\n      {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n      {children}\n      {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n    </>\n  )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n  return (\n    <ui.span\n      className={cx(\"ui-button__icon\", className)}\n      aria-hidden\n      alignSelf=\"center\"\n      display=\"inline-flex\"\n      flexShrink={0}\n      {...rest}\n    >\n      {children}\n    </ui.span>\n  )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n  const buttonRef = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) buttonRef.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = buttonRef.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n"],"mappings":"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","names":[]}