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

Yamada UI button components

"use client"
import {
  useButtonGroup
} from "./chunk-4MUEZBMA.mjs";

// src/button.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentStyle
} from "@yamada-ui/core";
import { Loading as LoadingIcon } from "@yamada-ui/loading";
import { Ripple, useRipple } from "@yamada-ui/ripple";
import { cx, dataAttr, merge, mergeRefs } from "@yamada-ui/utils";
import { useCallback, useMemo, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Button = forwardRef(
  ({ children, __isProcessSkip, __styles, ...props }, ref) => {
    const group = useButtonGroup();
    const [styles, mergedProps] = useComponentStyle(
      "Button",
      {
        ...group,
        ...props
      },
      { isProcessSkip: __isProcessSkip, styles: __styles }
    );
    const {
      as,
      type,
      className,
      isActive,
      active = isActive,
      isDisabled = group == null ? void 0 : group.disabled,
      disabled = isDisabled,
      disableRipple,
      rightIcon,
      endIcon = rightIcon,
      isRounded,
      fullRounded = isRounded,
      isLoading,
      leftIcon,
      loading = isLoading,
      loadingIcon,
      loadingPlacement = "start",
      loadingText,
      startIcon = leftIcon,
      __css,
      ...rest
    } = omitThemeProps(mergedProps);
    const trulyDisabled = disabled || loading;
    const { ref: buttonRef, type: defaultType } = useButtonType(as);
    const { onPointerDown, ...rippleProps } = useRipple({
      ...rest,
      disabled: disableRipple || trulyDisabled
    });
    const css = useMemo(() => {
      var _a;
      const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: "fallback(yamcha, 1)" }) : {};
      return {
        alignItems: "center",
        appearance: "none",
        display: "inline-flex",
        gap: "fallback(2, 0.5rem)",
        justifyContent: "center",
        outline: "none",
        overflow: "hidden",
        position: "relative",
        userSelect: "none",
        verticalAlign: "middle",
        whiteSpace: "nowrap",
        ...styles,
        ...__css,
        ...!!group ? { _focus } : {},
        ...fullRounded ? { borderRadius: "fallback(full, 9999px)" } : {}
      };
    }, [styles, __css, group, fullRounded]);
    const contentProps = {
      children,
      endIcon,
      startIcon
    };
    const loadingProps = {
      loadingIcon,
      loadingText
    };
    return /* @__PURE__ */ jsxs(
      ui.button,
      {
        ref: mergeRefs(ref, buttonRef),
        as,
        type: type != null ? type : defaultType,
        className: cx("ui-button", className),
        "data-active": dataAttr(active),
        "data-loading": dataAttr(loading),
        disabled: trulyDisabled,
        __css: css,
        ...rest,
        onPointerDown,
        children: [
          loading && loadingPlacement === "start" ? /* @__PURE__ */ jsx(
            ButtonLoading,
            {
              className: "ui-button__loading--start",
              ...loadingProps
            }
          ) : null,
          loading ? loadingText || /* @__PURE__ */ jsx(ui.span, { opacity: 0, children: /* @__PURE__ */ jsx(ButtonContent, { ...contentProps }) }) : /* @__PURE__ */ jsx(ButtonContent, { ...contentProps }),
          loading && loadingPlacement === "end" ? /* @__PURE__ */ jsx(
            ButtonLoading,
            {
              className: "ui-button__loading--end",
              ...loadingProps
            }
          ) : null,
          /* @__PURE__ */ jsx(Ripple, { ...rippleProps })
        ]
      }
    );
  }
);
Button.displayName = "Button";
Button.__ui__ = "Button";
var ButtonLoading = ({
  className,
  loadingIcon,
  loadingText
}) => {
  const css = useMemo(
    () => ({
      alignItems: "center",
      display: "flex",
      fontSize: "1em",
      lineHeight: "normal",
      position: loadingText ? "relative" : "absolute"
    }),
    [loadingText]
  );
  const element = useMemo(() => {
    if (typeof loadingIcon === "string") {
      return /* @__PURE__ */ jsx(LoadingIcon, { variant: loadingIcon, color: "current" });
    } else {
      return loadingIcon || /* @__PURE__ */ jsx(LoadingIcon, { color: "current" });
    }
  }, [loadingIcon]);
  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-button__loading", className), __css: css, children: element });
};
ButtonLoading.displayName = "ButtonLoading";
ButtonLoading.__ui__ = "ButtonLoading";
var ButtonContent = ({
  children,
  endIcon,
  startIcon
}) => {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    startIcon ? /* @__PURE__ */ jsx(ButtonIcon, { children: startIcon }) : null,
    children,
    endIcon ? /* @__PURE__ */ jsx(ButtonIcon, { children: endIcon }) : null
  ] });
};
ButtonContent.displayName = "ButtonContent";
ButtonContent.__ui__ = "ButtonContent";
var ButtonIcon = ({ className, children, ...rest }) => {
  return /* @__PURE__ */ jsx(
    ui.span,
    {
      className: cx("ui-button__icon", className),
      "aria-hidden": true,
      alignSelf: "center",
      display: "inline-flex",
      flexShrink: 0,
      ...rest,
      children
    }
  );
};
ButtonIcon.displayName = "ButtonIcon";
ButtonIcon.__ui__ = "ButtonIcon";
var useButtonType = (value) => {
  const buttonRef = useRef(!value);
  const ref = useCallback((node) => {
    if (node) buttonRef.current = node.tagName === "BUTTON";
  }, []);
  const type = buttonRef.current ? "button" : void 0;
  return { ref, type };
};

export {
  Button,
  useButtonType
};
//# sourceMappingURL=chunk-AFVGPBIP.mjs.map