@yamada-ui/button 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/button
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/button
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/button
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/button
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/button-group.d.ts

@@ -0,0 +1,17 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+
+type ButtonGroupOptions = {
+    direction?: CSSUIProps['flexDirection'];
+    isAttached?: boolean;
+    isDisabled?: boolean;
+};
+type ButtonGroupProps = HTMLUIProps<'div'> & ThemeProps<'Button'> & ButtonGroupOptions;
+type ButtonGroupContext = ThemeProps<'Button'> & {
+    isDisabled?: boolean;
+};
+declare const useButtonGroup: () => ButtonGroupContext;
+
+declare const ButtonGroup: _yamada_ui_core.Component<"div", ButtonGroupProps>;
+
+export { ButtonGroup, ButtonGroupProps, useButtonGroup };

package/dist/button-group.js

@@ -0,0 +1,87 @@
+"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/button-group.tsx
+var button_group_exports = {};
+__export(button_group_exports, {
+  ButtonGroup: () => ButtonGroup,
+  useButtonGroup: () => useButtonGroup
+});
+module.exports = __toCommonJS(button_group_exports);
+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 ButtonGroup = (0, import_core.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    direction: flexDirection,
+    isAttached,
+    isDisabled,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  }, ref) => {
+    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+    const css = {
+      display: "inline-flex",
+      flexDirection
+    };
+    const context = (0, import_react.useMemo)(
+      () => ({ size, variant, isDisabled }),
+      [size, variant, isDisabled]
+    );
+    if (isAttached) {
+      Object.assign(css, {
+        "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
+      });
+    } else {
+      Object.assign(css, {
+        gap,
+        columnGap,
+        rowGap
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        role: "group",
+        className: (0, import_utils.cx)("ui-button-group", className),
+        "data-attached": (0, import_utils.dataAttr)(isAttached),
+        __css: css,
+        ...rest
+      }
+    ) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonGroup,
+  useButtonGroup
+});

package/dist/button-group.mjs

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

package/dist/button.d.ts

@@ -0,0 +1,24 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { LoadingProps } from '@yamada-ui/loading';
+import { ElementType } from 'react';
+
+type ButtonOptions = {
+    type?: 'button' | 'reset' | 'submit';
+    isLoading?: boolean;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    leftIcon?: React.ReactElement;
+    rightIcon?: React.ReactElement;
+    loadingIcon?: React.ReactElement | LoadingProps['variant'];
+    loadingText?: string;
+    loadingPlacement?: 'start' | 'end';
+};
+type ButtonProps = HTMLUIProps<'button'> & ThemeProps<'Button'> & ButtonOptions;
+declare const Button: _yamada_ui_core.Component<"button", ButtonProps>;
+declare const useButtonType: (value?: ElementType) => {
+    readonly ref: (node: HTMLElement | null) => void;
+    readonly type: "button" | undefined;
+};
+
+export { Button, ButtonProps, useButtonType };

package/dist/button.js

@@ -0,0 +1,222 @@
+"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/button.tsx
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button,
+  useButtonType: () => useButtonType
+});
+module.exports = __toCommonJS(button_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_loading = require("@yamada-ui/loading");
+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)({
+  strict: false,
+  name: "ButtonGroupContext"
+});
+var ButtonGroup = (0, import_core.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    direction: flexDirection,
+    isAttached,
+    isDisabled,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  }, ref) => {
+    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+    const css = {
+      display: "inline-flex",
+      flexDirection
+    };
+    const context = (0, import_react.useMemo)(
+      () => ({ size, variant, isDisabled }),
+      [size, variant, isDisabled]
+    );
+    if (isAttached) {
+      Object.assign(css, {
+        "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
+      });
+    } else {
+      Object.assign(css, {
+        gap,
+        columnGap,
+        rowGap
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        ref,
+        role: "group",
+        className: (0, import_utils.cx)("ui-button-group", className),
+        "data-attached": (0, import_utils.dataAttr)(isAttached),
+        __css: css,
+        ...rest
+      }
+    ) });
+  }
+);
+
+// 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,
+      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",
+      alignItems: "center",
+      position: loadingText ? "relative" : "absolute",
+      fontSize: "1em",
+      lineHeight: "normal"
+    }),
+    [loadingText]
+  );
+  const element = (0, import_react2.useMemo)(() => {
+    if (typeof loadingIcon === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+    } 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 });
+};
+var Content = ({
+  leftIcon,
+  rightIcon,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: leftIcon }) : null,
+    children,
+    rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: rightIcon }) : null
+  ] });
+};
+var Icon = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_core2.ui.span,
+    {
+      className: (0, import_utils2.cx)("ui-button-icon", className),
+      display: "inline-flex",
+      alignSelf: "center",
+      flexShrink: 0,
+      "aria-hidden": true,
+      ...rest,
+      children
+    }
+  );
+};
+var useButtonType = (value) => {
+  const [isButton, setIsButton] = (0, import_react2.useState)(!value);
+  const ref = (0, import_react2.useCallback)((node) => {
+    if (node)
+      setIsButton(node.tagName === "BUTTON");
+  }, []);
+  const type = isButton ? "button" : void 0;
+  return { ref, type };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  useButtonType
+});

package/dist/button.mjs

@@ -0,0 +1,9 @@
+import {
+  Button,
+  useButtonType
+} from "./chunk-3D73QVPP.mjs";
+import "./chunk-ZJ6VNE3P.mjs";
+export {
+  Button,
+  useButtonType
+};

package/dist/chunk-3D73QVPP.mjs

@@ -0,0 +1,158 @@
+import {
+  useButtonGroup
+} from "./chunk-ZJ6VNE3P.mjs";
+
+// src/icon-button.tsx
+import { forwardRef as forwardRef2 } from "@yamada-ui/core";
+
+// 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 };
+};
+
+// src/icon-button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IconButton = forwardRef2(
+  ({ icon, isRound, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx2(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
+  }
+);
+
+export {
+  IconButton,
+  Button,
+  useButtonType
+};

package/dist/chunk-ZJ6VNE3P.mjs

@@ -0,0 +1,62 @@
+// src/button-group.tsx
+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 ButtonGroup = forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    direction: flexDirection,
+    isAttached,
+    isDisabled,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  }, ref) => {
+    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+    const css = {
+      display: "inline-flex",
+      flexDirection
+    };
+    const context = useMemo(
+      () => ({ size, variant, isDisabled }),
+      [size, variant, isDisabled]
+    );
+    if (isAttached) {
+      Object.assign(css, {
+        "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
+      });
+    } else {
+      Object.assign(css, {
+        gap,
+        columnGap,
+        rowGap
+      });
+    }
+    return /* @__PURE__ */ jsx(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        ref,
+        role: "group",
+        className: cx("ui-button-group", className),
+        "data-attached": dataAttr(isAttached),
+        __css: css,
+        ...rest
+      }
+    ) });
+  }
+);
+
+export {
+  useButtonGroup,
+  ButtonGroup
+};

package/dist/icon-button.d.ts

@@ -0,0 +1,13 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ReactElement } from 'react';
+import { ButtonProps } from './button.js';
+import '@yamada-ui/loading';
+
+type IconButtonOptions = {
+    icon?: ReactElement;
+    isRound?: boolean;
+};
+type IconButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'loadingIcon' | 'loadingText' | 'loadingPlacement'> & IconButtonOptions;
+declare const IconButton: _yamada_ui_core.Component<"button", IconButtonProps>;
+
+export { IconButton, IconButtonProps };

package/dist/icon-button.js

@@ -0,0 +1,229 @@
+"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/icon-button.tsx
+var icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(icon_button_exports);
+var import_core3 = require("@yamada-ui/core");
+
+// src/button.tsx
+var import_core = require("@yamada-ui/core");
+var import_loading = require("@yamada-ui/loading");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) => {
+  const group = useButtonGroup();
+  const [styles, mergedProps] = (0, import_core.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_core.omitThemeProps)(mergedProps);
+  const { ref: buttonRef, type: defaultType } = useButtonType(as);
+  const ref = (0, import_utils.useMergeRefs)(customRef, buttonRef);
+  const css = (0, import_react.useMemo)(() => {
+    var _a;
+    const _focus = "_focus" in styles ? (0, import_utils.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_runtime.jsxs)(
+    import_core.ui.button,
+    {
+      ref,
+      as,
+      className: (0, import_utils.cx)("ui-button", className),
+      type: type != null ? type : defaultType,
+      disabled: isDisabled || isLoading,
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      "data-loading": (0, import_utils.dataAttr)(isLoading),
+      __css: css,
+      ...rest,
+      children: [
+        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+        isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }),
+        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+      ]
+    }
+  );
+});
+var Loading = ({
+  className,
+  loadingIcon,
+  loadingText
+}) => {
+  const css = (0, import_react.useMemo)(
+    () => ({
+      display: "flex",
+      alignItems: "center",
+      position: loadingText ? "relative" : "absolute",
+      fontSize: "1em",
+      lineHeight: "normal"
+    }),
+    [loadingText]
+  );
+  const element = (0, import_react.useMemo)(() => {
+    if (typeof loadingIcon === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+    } else {
+      return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current" });
+    }
+  }, [loadingIcon]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-button-loading", className), __css: css, children: element });
+};
+var Content = ({
+  leftIcon,
+  rightIcon,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: leftIcon }) : null,
+    children,
+    rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: rightIcon }) : null
+  ] });
+};
+var Icon = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.span,
+    {
+      className: (0, import_utils.cx)("ui-button-icon", className),
+      display: "inline-flex",
+      alignSelf: "center",
+      flexShrink: 0,
+      "aria-hidden": true,
+      ...rest,
+      children
+    }
+  );
+};
+var useButtonType = (value) => {
+  const [isButton, setIsButton] = (0, import_react.useState)(!value);
+  const ref = (0, import_react.useCallback)((node) => {
+    if (node)
+      setIsButton(node.tagName === "BUTTON");
+  }, []);
+  const type = isButton ? "button" : void 0;
+  return { ref, type };
+};
+
+// src/button-group.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils2.createContext)({
+  strict: false,
+  name: "ButtonGroupContext"
+});
+var ButtonGroup = (0, import_core2.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    direction: flexDirection,
+    isAttached,
+    isDisabled,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  }, ref) => {
+    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+    const css = {
+      display: "inline-flex",
+      flexDirection
+    };
+    const context = (0, import_react2.useMemo)(
+      () => ({ size, variant, isDisabled }),
+      [size, variant, isDisabled]
+    );
+    if (isAttached) {
+      Object.assign(css, {
+        "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
+      });
+    } else {
+      Object.assign(css, {
+        gap,
+        columnGap,
+        rowGap
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        role: "group",
+        className: (0, import_utils2.cx)("ui-button-group", className),
+        "data-attached": (0, import_utils2.dataAttr)(isAttached),
+        __css: css,
+        ...rest
+      }
+    ) });
+  }
+);
+
+// src/icon-button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconButton = (0, import_core3.forwardRef)(
+  ({ icon, isRound, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});

package/dist/icon-button.mjs

@@ -0,0 +1,7 @@
+import {
+  IconButton
+} from "./chunk-3D73QVPP.mjs";
+import "./chunk-ZJ6VNE3P.mjs";
+export {
+  IconButton
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Button, ButtonProps, useButtonType } from './button.js';
+export { ButtonGroup, ButtonGroupProps, useButtonGroup } from './button-group.js';
+export { IconButton, IconButtonProps } from './icon-button.js';
+import '@yamada-ui/core';
+import '@yamada-ui/loading';
+import 'react';

package/dist/index.js

@@ -0,0 +1,237 @@
+"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 src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
+  IconButton: () => IconButton,
+  useButtonGroup: () => useButtonGroup,
+  useButtonType: () => useButtonType
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/button.tsx
+var import_core = require("@yamada-ui/core");
+var import_loading = require("@yamada-ui/loading");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) => {
+  const group = useButtonGroup();
+  const [styles, mergedProps] = (0, import_core.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_core.omitThemeProps)(mergedProps);
+  const { ref: buttonRef, type: defaultType } = useButtonType(as);
+  const ref = (0, import_utils.useMergeRefs)(customRef, buttonRef);
+  const css = (0, import_react.useMemo)(() => {
+    var _a;
+    const _focus = "_focus" in styles ? (0, import_utils.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_runtime.jsxs)(
+    import_core.ui.button,
+    {
+      ref,
+      as,
+      className: (0, import_utils.cx)("ui-button", className),
+      type: type != null ? type : defaultType,
+      disabled: isDisabled || isLoading,
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      "data-loading": (0, import_utils.dataAttr)(isLoading),
+      __css: css,
+      ...rest,
+      children: [
+        isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
+        isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }),
+        isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
+      ]
+    }
+  );
+});
+var Loading = ({
+  className,
+  loadingIcon,
+  loadingText
+}) => {
+  const css = (0, import_react.useMemo)(
+    () => ({
+      display: "flex",
+      alignItems: "center",
+      position: loadingText ? "relative" : "absolute",
+      fontSize: "1em",
+      lineHeight: "normal"
+    }),
+    [loadingText]
+  );
+  const element = (0, import_react.useMemo)(() => {
+    if (typeof loadingIcon === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+    } else {
+      return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current" });
+    }
+  }, [loadingIcon]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-button-loading", className), __css: css, children: element });
+};
+var Content = ({
+  leftIcon,
+  rightIcon,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: leftIcon }) : null,
+    children,
+    rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: rightIcon }) : null
+  ] });
+};
+var Icon = ({ children, className, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.span,
+    {
+      className: (0, import_utils.cx)("ui-button-icon", className),
+      display: "inline-flex",
+      alignSelf: "center",
+      flexShrink: 0,
+      "aria-hidden": true,
+      ...rest,
+      children
+    }
+  );
+};
+var useButtonType = (value) => {
+  const [isButton, setIsButton] = (0, import_react.useState)(!value);
+  const ref = (0, import_react.useCallback)((node) => {
+    if (node)
+      setIsButton(node.tagName === "BUTTON");
+  }, []);
+  const type = isButton ? "button" : void 0;
+  return { ref, type };
+};
+
+// src/button-group.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var [ButtonGroupProvider, useButtonGroup] = (0, import_utils2.createContext)({
+  strict: false,
+  name: "ButtonGroupContext"
+});
+var ButtonGroup = (0, import_core2.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    direction: flexDirection,
+    isAttached,
+    isDisabled,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  }, ref) => {
+    const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
+    const css = {
+      display: "inline-flex",
+      flexDirection
+    };
+    const context = (0, import_react2.useMemo)(
+      () => ({ size, variant, isDisabled }),
+      [size, variant, isDisabled]
+    );
+    if (isAttached) {
+      Object.assign(css, {
+        "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
+        "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
+      });
+    } else {
+      Object.assign(css, {
+        gap,
+        columnGap,
+        rowGap
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        role: "group",
+        className: (0, import_utils2.cx)("ui-button-group", className),
+        "data-attached": (0, import_utils2.dataAttr)(isAttached),
+        __css: css,
+        ...rest
+      }
+    ) });
+  }
+);
+
+// src/icon-button.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconButton = (0, import_core3.forwardRef)(
+  ({ icon, isRound, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonGroup,
+  IconButton,
+  useButtonGroup,
+  useButtonType
+});

package/dist/index.mjs

@@ -0,0 +1,16 @@
+import {
+  Button,
+  IconButton,
+  useButtonType
+} from "./chunk-3D73QVPP.mjs";
+import {
+  ButtonGroup,
+  useButtonGroup
+} from "./chunk-ZJ6VNE3P.mjs";
+export {
+  Button,
+  ButtonGroup,
+  IconButton,
+  useButtonGroup,
+  useButtonType
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@yamada-ui/button",
+  "version": "0.0.0-dev-20230603042803",
+  "description": "Yamada UI button components",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "button",
+    "icon-button",
+    "button-group",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/button"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.0.0-dev-20230603042803",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/loading": "0.0.0-dev-20230603042803"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}