@yamada-ui/button 0.2.5 → 0.2.7

package/dist/button-group.js

@@ -28,10 +28,12 @@ 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)({
-  strict: false,
-  name: "ButtonGroupContext"
-});
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "ButtonGroupContext"
+  }
+);
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,

package/dist/button-group.mjs

@@ -1,7 +1,7 @@
 import {
   ButtonGroup,
   useButtonGroup
-} from "./chunk-ZJ6VNE3P.mjs";
+} from "./chunk-EGXUSOSB.mjs";
 export {
   ButtonGroup,
   useButtonGroup

package/dist/button.js

@@ -34,10 +34,12 @@ 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)({
-  strict: false,
-  name: "ButtonGroupContext"
-});
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "ButtonGroupContext"
+  }
+);
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
@@ -89,79 +91,80 @@ var ButtonGroup = (0, import_core.forwardRef)(
 
 // src/button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_core2.forwardRef)(({ children, ...props }, customRef) => {
-  const group = useButtonGroup();
-  const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", { ...group, ...props });
-  const {
-    className,
-    as,
-    type,
-    isLoading,
-    isActive,
-    isDisabled = group == null ? void 0 : group.isDisabled,
-    leftIcon,
-    rightIcon,
-    loadingIcon,
-    loadingText,
-    loadingPlacement = "start",
-    __css,
-    ...rest
-  } = (0, import_core2.omitThemeProps)(mergedProps);
-  const { ref: buttonRef, type: defaultType } = useButtonType(as);
-  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
-  const css = (0, import_react2.useMemo)(() => {
-    var _a;
-    const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
-    return {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
-      appearance: "none",
-      userSelect: "none",
-      position: "relative",
-      whiteSpace: "nowrap",
-      verticalAlign: "middle",
-      outline: "none",
-      ...styles,
-      ...__css,
-      ...!!group ? { _focus } : {}
-    };
-  }, [styles, __css, group]);
-  const contentProps = {
-    leftIcon,
-    rightIcon,
-    children
-  };
-  const loadingProps = {
-    loadingIcon,
-    loadingText
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_core2.ui.button,
-    {
-      ref,
+var Button = (0, import_core2.forwardRef)(
+  ({ children, ...props }, customRef) => {
+    const group = useButtonGroup();
+    const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", {
+      ...group,
+      ...props
+    });
+    const {
+      className,
       as,
-      className: (0, import_utils2.cx)("ui-button", className),
-      type: type != null ? type : defaultType,
-      disabled: isDisabled || isLoading,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
-      "data-loading": (0, import_utils2.dataAttr)(isLoading),
-      __css: css,
-      ...rest,
-      children: [
-        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
-        isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
-        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
-      ]
-    }
-  );
-});
-var Loading = ({
-  className,
-  loadingIcon,
-  loadingText
-}) => {
+      type,
+      isLoading,
+      isActive,
+      isDisabled = group == null ? void 0 : group.isDisabled,
+      leftIcon,
+      rightIcon,
+      loadingIcon,
+      loadingText,
+      loadingPlacement = "start",
+      __css,
+      ...rest
+    } = (0, import_core2.omitThemeProps)(mergedProps);
+    const { ref: buttonRef, type: defaultType } = useButtonType(as);
+    const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
+    const css = (0, import_react2.useMemo)(() => {
+      var _a;
+      const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        appearance: "none",
+        userSelect: "none",
+        position: "relative",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle",
+        outline: "none",
+        ...styles,
+        ...__css,
+        ...!!group ? { _focus } : {}
+      };
+    }, [styles, __css, group]);
+    const contentProps = {
+      leftIcon,
+      rightIcon,
+      children
+    };
+    const loadingProps = {
+      loadingIcon,
+      loadingText
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.button,
+      {
+        ref,
+        as,
+        className: (0, import_utils2.cx)("ui-button", className),
+        type: type != null ? type : defaultType,
+        disabled: isDisabled || isLoading,
+        "data-active": (0, import_utils2.dataAttr)(isActive),
+        "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        __css: css,
+        ...rest,
+        children: [
+          isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+          isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
+          isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+        ]
+      }
+    );
+  }
+);
+var Loading = ({ className, loadingIcon, loadingText }) => {
   const css = (0, import_react2.useMemo)(
     () => ({
       display: "flex",

package/dist/button.mjs

@@ -1,8 +1,8 @@
 import {
   Button,
   useButtonType
-} from "./chunk-2U57OXHK.mjs";
-import "./chunk-ZJ6VNE3P.mjs";
+} from "./chunk-PJFZNNJZ.mjs";
+import "./chunk-EGXUSOSB.mjs";
 export {
   Button,
   useButtonType

package/dist/{chunk-ZJ6VNE3P.mjs → chunk-EGXUSOSB.mjs}

@@ -1,12 +1,17 @@
 // src/button-group.tsx
-import { ui, forwardRef } from "@yamada-ui/core";
+import {
+  ui,
+  forwardRef
+} from "@yamada-ui/core";
 import { createContext, cx, dataAttr } from "@yamada-ui/utils";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-var [ButtonGroupProvider, useButtonGroup] = createContext({
-  strict: false,
-  name: "ButtonGroupContext"
-});
+var [ButtonGroupProvider, useButtonGroup] = createContext(
+  {
+    strict: false,
+    name: "ButtonGroupContext"
+  }
+);
 var ButtonGroup = forwardRef(
   ({
     className,

package/dist/chunk-PJFZNNJZ.mjs

@@ -0,0 +1,151 @@
+import {
+  useButtonGroup
+} from "./chunk-EGXUSOSB.mjs";
+
+// src/button.tsx
+import {
+  ui,
+  forwardRef,
+  useComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { Loading as LoadingIcon } from "@yamada-ui/loading";
+import { cx, useMergeRefs, merge, dataAttr } from "@yamada-ui/utils";
+import {
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(
+  ({ children, ...props }, customRef) => {
+    const group = useButtonGroup();
+    const [styles, mergedProps] = useComponentStyle("Button", {
+      ...group,
+      ...props
+    });
+    const {
+      className,
+      as,
+      type,
+      isLoading,
+      isActive,
+      isDisabled = group == null ? void 0 : group.isDisabled,
+      leftIcon,
+      rightIcon,
+      loadingIcon,
+      loadingText,
+      loadingPlacement = "start",
+      __css,
+      ...rest
+    } = omitThemeProps(mergedProps);
+    const { ref: buttonRef, type: defaultType } = useButtonType(as);
+    const ref = useMergeRefs(customRef, buttonRef);
+    const css = useMemo(() => {
+      var _a;
+      const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        appearance: "none",
+        userSelect: "none",
+        position: "relative",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle",
+        outline: "none",
+        ...styles,
+        ...__css,
+        ...!!group ? { _focus } : {}
+      };
+    }, [styles, __css, group]);
+    const contentProps = {
+      leftIcon,
+      rightIcon,
+      children
+    };
+    const loadingProps = {
+      loadingIcon,
+      loadingText
+    };
+    return /* @__PURE__ */ jsxs(
+      ui.button,
+      {
+        ref,
+        as,
+        className: cx("ui-button", className),
+        type: type != null ? type : defaultType,
+        disabled: isDisabled || isLoading,
+        "data-active": dataAttr(isActive),
+        "data-loading": dataAttr(isLoading),
+        __css: css,
+        ...rest,
+        children: [
+          isLoading && loadingPlacement === "start" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+          isLoading ? loadingText || /* @__PURE__ */ jsx(ui.span, { opacity: 0, children: /* @__PURE__ */ jsx(Content, { ...contentProps }) }) : /* @__PURE__ */ jsx(Content, { ...contentProps }),
+          isLoading && loadingPlacement === "end" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+        ]
+      }
+    );
+  }
+);
+var Loading = ({ className, loadingIcon, loadingText }) => {
+  const css = useMemo(
+    () => ({
+      display: "flex",
+      alignItems: "center",
+      position: loadingText ? "relative" : "absolute",
+      fontSize: "1em",
+      lineHeight: "normal"
+    }),
+    [loadingText]
+  );
+  const element = useMemo(() => {
+    if (typeof loadingIcon === "string") {
+      return /* @__PURE__ */ jsx(LoadingIcon, { color: "current", variant: loadingIcon });
+    } else {
+      return loadingIcon || /* @__PURE__ */ jsx(LoadingIcon, { color: "current" });
+    }
+  }, [loadingIcon]);
+  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-button-loading", className), __css: css, children: element });
+};
+var Content = ({
+  leftIcon,
+  rightIcon,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon ? /* @__PURE__ */ jsx(Icon, { children: leftIcon }) : null,
+    children,
+    rightIcon ? /* @__PURE__ */ jsx(Icon, { children: rightIcon }) : null
+  ] });
+};
+var Icon = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    ui.span,
+    {
+      className: cx("ui-button-icon", className),
+      display: "inline-flex",
+      alignSelf: "center",
+      flexShrink: 0,
+      "aria-hidden": true,
+      ...rest,
+      children
+    }
+  );
+};
+var useButtonType = (value) => {
+  const [isButton, setIsButton] = useState(!value);
+  const ref = useCallback((node) => {
+    if (node)
+      setIsButton(node.tagName === "BUTTON");
+  }, []);
+  const type = isButton ? "button" : void 0;
+  return { ref, type };
+};
+
+export {
+  Button,
+  useButtonType
+};

package/dist/{chunk-UNYNUYOU.mjs → chunk-WAZQVSDT.mjs}

@@ -1,13 +1,22 @@
 import {
   Button
-} from "./chunk-2U57OXHK.mjs";
+} from "./chunk-PJFZNNJZ.mjs";
 
 // src/icon-button.tsx
 import { forwardRef } from "@yamada-ui/core";
 import { jsx } from "react/jsx-runtime";
 var IconButton = forwardRef(
   ({ icon, isRounded, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        p: 0,
+        ...isRounded ? { rounded: "full" } : {},
+        ...rest,
+        children: icon || children
+      }
+    );
   }
 );
 

package/dist/icon-button.js

@@ -36,10 +36,12 @@ 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)({
-  strict: false,
-  name: "ButtonGroupContext"
-});
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "ButtonGroupContext"
+  }
+);
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
@@ -91,79 +93,80 @@ var ButtonGroup = (0, import_core.forwardRef)(
 
 // src/button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_core2.forwardRef)(({ children, ...props }, customRef) => {
-  const group = useButtonGroup();
-  const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", { ...group, ...props });
-  const {
-    className,
-    as,
-    type,
-    isLoading,
-    isActive,
-    isDisabled = group == null ? void 0 : group.isDisabled,
-    leftIcon,
-    rightIcon,
-    loadingIcon,
-    loadingText,
-    loadingPlacement = "start",
-    __css,
-    ...rest
-  } = (0, import_core2.omitThemeProps)(mergedProps);
-  const { ref: buttonRef, type: defaultType } = useButtonType(as);
-  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
-  const css = (0, import_react2.useMemo)(() => {
-    var _a;
-    const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
-    return {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
-      appearance: "none",
-      userSelect: "none",
-      position: "relative",
-      whiteSpace: "nowrap",
-      verticalAlign: "middle",
-      outline: "none",
-      ...styles,
-      ...__css,
-      ...!!group ? { _focus } : {}
-    };
-  }, [styles, __css, group]);
-  const contentProps = {
-    leftIcon,
-    rightIcon,
-    children
-  };
-  const loadingProps = {
-    loadingIcon,
-    loadingText
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_core2.ui.button,
-    {
-      ref,
+var Button = (0, import_core2.forwardRef)(
+  ({ children, ...props }, customRef) => {
+    const group = useButtonGroup();
+    const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", {
+      ...group,
+      ...props
+    });
+    const {
+      className,
       as,
-      className: (0, import_utils2.cx)("ui-button", className),
-      type: type != null ? type : defaultType,
-      disabled: isDisabled || isLoading,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
-      "data-loading": (0, import_utils2.dataAttr)(isLoading),
-      __css: css,
-      ...rest,
-      children: [
-        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
-        isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
-        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
-      ]
-    }
-  );
-});
-var Loading = ({
-  className,
-  loadingIcon,
-  loadingText
-}) => {
+      type,
+      isLoading,
+      isActive,
+      isDisabled = group == null ? void 0 : group.isDisabled,
+      leftIcon,
+      rightIcon,
+      loadingIcon,
+      loadingText,
+      loadingPlacement = "start",
+      __css,
+      ...rest
+    } = (0, import_core2.omitThemeProps)(mergedProps);
+    const { ref: buttonRef, type: defaultType } = useButtonType(as);
+    const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
+    const css = (0, import_react2.useMemo)(() => {
+      var _a;
+      const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        appearance: "none",
+        userSelect: "none",
+        position: "relative",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle",
+        outline: "none",
+        ...styles,
+        ...__css,
+        ...!!group ? { _focus } : {}
+      };
+    }, [styles, __css, group]);
+    const contentProps = {
+      leftIcon,
+      rightIcon,
+      children
+    };
+    const loadingProps = {
+      loadingIcon,
+      loadingText
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.button,
+      {
+        ref,
+        as,
+        className: (0, import_utils2.cx)("ui-button", className),
+        type: type != null ? type : defaultType,
+        disabled: isDisabled || isLoading,
+        "data-active": (0, import_utils2.dataAttr)(isActive),
+        "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        __css: css,
+        ...rest,
+        children: [
+          isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+          isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
+          isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+        ]
+      }
+    );
+  }
+);
+var Loading = ({ className, loadingIcon, loadingText }) => {
   const css = (0, import_react2.useMemo)(
     () => ({
       display: "flex",
@@ -222,7 +225,16 @@ var useButtonType = (value) => {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var IconButton = (0, import_core3.forwardRef)(
   ({ icon, isRounded, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Button,
+      {
+        ref,
+        p: 0,
+        ...isRounded ? { rounded: "full" } : {},
+        ...rest,
+        children: icon || children
+      }
+    );
   }
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/icon-button.mjs

@@ -1,8 +1,8 @@
 import {
   IconButton
-} from "./chunk-UNYNUYOU.mjs";
-import "./chunk-2U57OXHK.mjs";
-import "./chunk-ZJ6VNE3P.mjs";
+} from "./chunk-WAZQVSDT.mjs";
+import "./chunk-PJFZNNJZ.mjs";
+import "./chunk-EGXUSOSB.mjs";
 export {
   IconButton
 };

package/dist/index.js

@@ -37,10 +37,12 @@ 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)({
-  strict: false,
-  name: "ButtonGroupContext"
-});
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
+  {
+    strict: false,
+    name: "ButtonGroupContext"
+  }
+);
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
@@ -92,79 +94,80 @@ var ButtonGroup = (0, import_core.forwardRef)(
 
 // src/button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_core2.forwardRef)(({ children, ...props }, customRef) => {
-  const group = useButtonGroup();
-  const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", { ...group, ...props });
-  const {
-    className,
-    as,
-    type,
-    isLoading,
-    isActive,
-    isDisabled = group == null ? void 0 : group.isDisabled,
-    leftIcon,
-    rightIcon,
-    loadingIcon,
-    loadingText,
-    loadingPlacement = "start",
-    __css,
-    ...rest
-  } = (0, import_core2.omitThemeProps)(mergedProps);
-  const { ref: buttonRef, type: defaultType } = useButtonType(as);
-  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
-  const css = (0, import_react2.useMemo)(() => {
-    var _a;
-    const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
-    return {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
-      appearance: "none",
-      userSelect: "none",
-      position: "relative",
-      whiteSpace: "nowrap",
-      verticalAlign: "middle",
-      outline: "none",
-      ...styles,
-      ...__css,
-      ...!!group ? { _focus } : {}
-    };
-  }, [styles, __css, group]);
-  const contentProps = {
-    leftIcon,
-    rightIcon,
-    children
-  };
-  const loadingProps = {
-    loadingIcon,
-    loadingText
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_core2.ui.button,
-    {
-      ref,
+var Button = (0, import_core2.forwardRef)(
+  ({ children, ...props }, customRef) => {
+    const group = useButtonGroup();
+    const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", {
+      ...group,
+      ...props
+    });
+    const {
+      className,
       as,
-      className: (0, import_utils2.cx)("ui-button", className),
-      type: type != null ? type : defaultType,
-      disabled: isDisabled || isLoading,
-      "data-active": (0, import_utils2.dataAttr)(isActive),
-      "data-loading": (0, import_utils2.dataAttr)(isLoading),
-      __css: css,
-      ...rest,
-      children: [
-        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
-        isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
-        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
-      ]
-    }
-  );
-});
-var Loading = ({
-  className,
-  loadingIcon,
-  loadingText
-}) => {
+      type,
+      isLoading,
+      isActive,
+      isDisabled = group == null ? void 0 : group.isDisabled,
+      leftIcon,
+      rightIcon,
+      loadingIcon,
+      loadingText,
+      loadingPlacement = "start",
+      __css,
+      ...rest
+    } = (0, import_core2.omitThemeProps)(mergedProps);
+    const { ref: buttonRef, type: defaultType } = useButtonType(as);
+    const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
+    const css = (0, import_react2.useMemo)(() => {
+      var _a;
+      const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        appearance: "none",
+        userSelect: "none",
+        position: "relative",
+        whiteSpace: "nowrap",
+        verticalAlign: "middle",
+        outline: "none",
+        ...styles,
+        ...__css,
+        ...!!group ? { _focus } : {}
+      };
+    }, [styles, __css, group]);
+    const contentProps = {
+      leftIcon,
+      rightIcon,
+      children
+    };
+    const loadingProps = {
+      loadingIcon,
+      loadingText
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core2.ui.button,
+      {
+        ref,
+        as,
+        className: (0, import_utils2.cx)("ui-button", className),
+        type: type != null ? type : defaultType,
+        disabled: isDisabled || isLoading,
+        "data-active": (0, import_utils2.dataAttr)(isActive),
+        "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        __css: css,
+        ...rest,
+        children: [
+          isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+          isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
+          isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+        ]
+      }
+    );
+  }
+);
+var Loading = ({ className, loadingIcon, loadingText }) => {
   const css = (0, import_react2.useMemo)(
     () => ({
       display: "flex",
@@ -224,7 +227,16 @@ var import_core3 = require("@yamada-ui/core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var IconButton = (0, import_core3.forwardRef)(
   ({ icon, isRounded, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Button,
+      {
+        ref,
+        p: 0,
+        ...isRounded ? { rounded: "full" } : {},
+        ...rest,
+        children: icon || children
+      }
+    );
   }
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import {
   IconButton
-} from "./chunk-UNYNUYOU.mjs";
+} from "./chunk-WAZQVSDT.mjs";
 import {
   Button
-} from "./chunk-2U57OXHK.mjs";
+} from "./chunk-PJFZNNJZ.mjs";
 import {
   ButtonGroup
-} from "./chunk-ZJ6VNE3P.mjs";
+} from "./chunk-EGXUSOSB.mjs";
 export {
   Button,
   ButtonGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/button",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Yamada UI button components",
   "keywords": [
     "yamada",
@@ -37,9 +37,9 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.5.0",
-    "@yamada-ui/utils": "0.1.3",
-    "@yamada-ui/loading": "0.3.5"
+    "@yamada-ui/core": "0.5.2",
+    "@yamada-ui/utils": "0.1.4",
+    "@yamada-ui/loading": "0.3.7"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/dist/chunk-2U57OXHK.mjs

@@ -1,146 +0,0 @@
-import {
-  useButtonGroup
-} from "./chunk-ZJ6VNE3P.mjs";
-
-// src/button.tsx
-import {
-  ui,
-  forwardRef,
-  useComponentStyle,
-  omitThemeProps
-} from "@yamada-ui/core";
-import { Loading as LoadingIcon } from "@yamada-ui/loading";
-import { cx, useMergeRefs, merge, dataAttr } from "@yamada-ui/utils";
-import { useCallback, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Button = forwardRef(({ children, ...props }, customRef) => {
-  const group = useButtonGroup();
-  const [styles, mergedProps] = useComponentStyle("Button", { ...group, ...props });
-  const {
-    className,
-    as,
-    type,
-    isLoading,
-    isActive,
-    isDisabled = group == null ? void 0 : group.isDisabled,
-    leftIcon,
-    rightIcon,
-    loadingIcon,
-    loadingText,
-    loadingPlacement = "start",
-    __css,
-    ...rest
-  } = omitThemeProps(mergedProps);
-  const { ref: buttonRef, type: defaultType } = useButtonType(as);
-  const ref = useMergeRefs(customRef, buttonRef);
-  const css = useMemo(() => {
-    var _a;
-    const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
-    return {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
-      appearance: "none",
-      userSelect: "none",
-      position: "relative",
-      whiteSpace: "nowrap",
-      verticalAlign: "middle",
-      outline: "none",
-      ...styles,
-      ...__css,
-      ...!!group ? { _focus } : {}
-    };
-  }, [styles, __css, group]);
-  const contentProps = {
-    leftIcon,
-    rightIcon,
-    children
-  };
-  const loadingProps = {
-    loadingIcon,
-    loadingText
-  };
-  return /* @__PURE__ */ jsxs(
-    ui.button,
-    {
-      ref,
-      as,
-      className: cx("ui-button", className),
-      type: type != null ? type : defaultType,
-      disabled: isDisabled || isLoading,
-      "data-active": dataAttr(isActive),
-      "data-loading": dataAttr(isLoading),
-      __css: css,
-      ...rest,
-      children: [
-        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
-        isLoading ? loadingText || /* @__PURE__ */ jsx(ui.span, { opacity: 0, children: /* @__PURE__ */ jsx(Content, { ...contentProps }) }) : /* @__PURE__ */ jsx(Content, { ...contentProps }),
-        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
-      ]
-    }
-  );
-});
-var Loading = ({
-  className,
-  loadingIcon,
-  loadingText
-}) => {
-  const css = useMemo(
-    () => ({
-      display: "flex",
-      alignItems: "center",
-      position: loadingText ? "relative" : "absolute",
-      fontSize: "1em",
-      lineHeight: "normal"
-    }),
-    [loadingText]
-  );
-  const element = useMemo(() => {
-    if (typeof loadingIcon === "string") {
-      return /* @__PURE__ */ jsx(LoadingIcon, { color: "current", variant: loadingIcon });
-    } else {
-      return loadingIcon || /* @__PURE__ */ jsx(LoadingIcon, { color: "current" });
-    }
-  }, [loadingIcon]);
-  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-button-loading", className), __css: css, children: element });
-};
-var Content = ({
-  leftIcon,
-  rightIcon,
-  children
-}) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leftIcon ? /* @__PURE__ */ jsx(Icon, { children: leftIcon }) : null,
-    children,
-    rightIcon ? /* @__PURE__ */ jsx(Icon, { children: rightIcon }) : null
-  ] });
-};
-var Icon = ({ children, className, ...rest }) => {
-  return /* @__PURE__ */ jsx(
-    ui.span,
-    {
-      className: cx("ui-button-icon", className),
-      display: "inline-flex",
-      alignSelf: "center",
-      flexShrink: 0,
-      "aria-hidden": true,
-      ...rest,
-      children
-    }
-  );
-};
-var useButtonType = (value) => {
-  const [isButton, setIsButton] = useState(!value);
-  const ref = useCallback((node) => {
-    if (node)
-      setIsButton(node.tagName === "BUTTON");
-  }, []);
-  const type = isButton ? "button" : void 0;
-  return { ref, type };
-};
-
-export {
-  Button,
-  useButtonType
-};