@yamada-ui/button/dist/index.js

Yamada UI button components

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Button: () => Button,
  ButtonGroup: () => ButtonGroup,
  IconButton: () => IconButton
});
module.exports = __toCommonJS(index_exports);

// src/button.tsx
var import_core2 = require("@yamada-ui/core");
var import_loading = require("@yamada-ui/loading");
var import_ripple = require("@yamada-ui/ripple");
var import_utils2 = require("@yamada-ui/utils");
var import_react2 = require("react");

// src/button-group.tsx
var import_core = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
  {
    name: "ButtonGroupContext",
    strict: false
  }
);
var ButtonGroup = (0, import_core.forwardRef)(
  ({
    className,
    size,
    variant,
    isAttached,
    attached = isAttached,
    columnGap,
    direction,
    isDisabled,
    disabled = isDisabled,
    flexDirection = direction,
    gap,
    rowGap,
    ...rest
  }, ref) => {
    const column = flexDirection === "column" || flexDirection === "column-reverse";
    const css = {
      display: "inline-flex",
      flexDirection
    };
    const context = (0, import_react.useMemo)(
      () => ({ size, variant, disabled }),
      [size, variant, disabled]
    );
    if (attached) {
      Object.assign(css, {
        "> *:first-of-type:not(:last-of-type)": column ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
        "> *:not(:first-of-type):last-of-type": column ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
        "> *:not(:first-of-type):not(:last-of-type)": column ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
      });
    } else {
      Object.assign(css, {
        columnGap,
        gap,
        rowGap
      });
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_core.ui.div,
      {
        ref,
        className: (0, import_utils.cx)("ui-button-group", className),
        "data-attached": (0, import_utils.dataAttr)(attached),
        role: "group",
        __css: css,
        ...rest
      }
    ) });
  }
);
ButtonGroup.displayName = "ButtonGroup";
ButtonGroup.__ui__ = "ButtonGroup";

// src/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Button = (0, import_core2.forwardRef)(
  ({ children, __isProcessSkip, __styles, ...props }, ref) => {
    const group = useButtonGroup();
    const [styles, mergedProps] = (0, import_core2.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
    } = (0, import_core2.omitThemeProps)(mergedProps);
    const trulyDisabled = disabled || loading;
    const { ref: buttonRef, type: defaultType } = useButtonType(as);
    const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
      ...rest,
      disabled: disableRipple || trulyDisabled
    });
    const css = (0, import_react2.useMemo)(() => {
      var _a;
      const _focus = "_focus" in styles ? (0, import_utils2.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__ */ (0, import_jsx_runtime2.jsxs)(
      import_core2.ui.button,
      {
        ref: (0, import_utils2.mergeRefs)(ref, buttonRef),
        as,
        type: type != null ? type : defaultType,
        className: (0, import_utils2.cx)("ui-button", className),
        "data-active": (0, import_utils2.dataAttr)(active),
        "data-loading": (0, import_utils2.dataAttr)(loading),
        disabled: trulyDisabled,
        __css: css,
        ...rest,
        onPointerDown,
        children: [
          loading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            ButtonLoading,
            {
              className: "ui-button__loading--start",
              ...loadingProps
            }
          ) : null,
          loading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContent, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonContent, { ...contentProps }),
          loading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            ButtonLoading,
            {
              className: "ui-button__loading--end",
              ...loadingProps
            }
          ) : null,
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { ...rippleProps })
        ]
      }
    );
  }
);
Button.displayName = "Button";
Button.__ui__ = "Button";
var ButtonLoading = ({
  className,
  loadingIcon,
  loadingText
}) => {
  const css = (0, import_react2.useMemo)(
    () => ({
      alignItems: "center",
      display: "flex",
      fontSize: "1em",
      lineHeight: "normal",
      position: loadingText ? "relative" : "absolute"
    }),
    [loadingText]
  );
  const element = (0, import_react2.useMemo)(() => {
    if (typeof loadingIcon === "string") {
      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { variant: loadingIcon, color: "current" });
    } else {
      return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current" });
    }
  }, [loadingIcon]);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: (0, import_utils2.cx)("ui-button__loading", className), __css: css, children: element });
};
ButtonLoading.displayName = "ButtonLoading";
ButtonLoading.__ui__ = "ButtonLoading";
var ButtonContent = ({
  children,
  endIcon,
  startIcon
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
    startIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: startIcon }) : null,
    children,
    endIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: endIcon }) : null
  ] });
};
ButtonContent.displayName = "ButtonContent";
ButtonContent.__ui__ = "ButtonContent";
var ButtonIcon = ({ className, children, ...rest }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    import_core2.ui.span,
    {
      className: (0, import_utils2.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 = (0, import_react2.useRef)(!value);
  const ref = (0, import_react2.useCallback)((node) => {
    if (node) buttonRef.current = node.tagName === "BUTTON";
  }, []);
  const type = buttonRef.current ? "button" : void 0;
  return { ref, type };
};

// src/icon-button.tsx
var import_core3 = require("@yamada-ui/core");
var import_utils3 = require("@yamada-ui/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var IconButton = (0, import_core3.forwardRef)(
  ({ className, children, icon, ...rest }, ref) => {
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      Button,
      {
        ref,
        className: (0, import_utils3.cx)("ui-icon-button", className),
        p: 0,
        ...rest,
        children: icon || children
      }
    );
  }
);
IconButton.displayName = "IconButton";
IconButton.__ui__ = "IconButton";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Button,
  ButtonGroup,
  IconButton
});
//# sourceMappingURL=index.js.map