@yamada-ui/button 1.0.44-dev-20241007025246 → 1.0.44-dev-20241007135427

package/dist/button-group.js

@@ -38,14 +38,14 @@ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
+    size,
+    variant,
     columnGap,
     direction: flexDirection,
     gap,
     isAttached,
     isDisabled,
     rowGap,
-    size,
-    variant,
     ...rest
   }, ref) => {
     const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
@@ -54,7 +54,7 @@ var ButtonGroup = (0, import_core.forwardRef)(
       flexDirection
     };
     const context = (0, import_react.useMemo)(
-      () => ({ isDisabled, size, variant }),
+      () => ({ size, variant, isDisabled }),
       [size, variant, isDisabled]
     );
     if (isAttached) {
@@ -75,8 +75,8 @@ var ButtonGroup = (0, import_core.forwardRef)(
       {
         ref,
         className: (0, import_utils.cx)("ui-button-group", className),
-        role: "group",
         "data-attached": (0, import_utils.dataAttr)(isAttached),
+        role: "group",
         __css: css,
         ...rest
       }

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      size,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ isDisabled, size, variant }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          role=\"group\"\n          data-attached={dataAttr(isAttached)}\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,YAAY,MAAM,QAAQ;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,MAAK;AAAA,QACL,qBAAe,uBAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
+{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      size,\n      variant,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ size, variant, isDisabled }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          data-attached={dataAttr(isAttached)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,UAAU;AAAA,QAClC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}

package/dist/button-group.mjs

@@ -2,7 +2,7 @@
 import {
   ButtonGroup,
   useButtonGroup
-} from "./chunk-6OZRGJBX.mjs";
+} from "./chunk-I3FAJDDX.mjs";
 export {
   ButtonGroup,
   useButtonGroup

package/dist/button.js

@@ -45,14 +45,14 @@ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
+    size,
+    variant,
     columnGap,
     direction: flexDirection,
     gap,
     isAttached,
     isDisabled,
     rowGap,
-    size,
-    variant,
     ...rest
   }, ref) => {
     const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
@@ -61,7 +61,7 @@ var ButtonGroup = (0, import_core.forwardRef)(
       flexDirection
     };
     const context = (0, import_react.useMemo)(
-      () => ({ isDisabled, size, variant }),
+      () => ({ size, variant, isDisabled }),
       [size, variant, isDisabled]
     );
     if (isAttached) {
@@ -82,8 +82,8 @@ var ButtonGroup = (0, import_core.forwardRef)(
       {
         ref,
         className: (0, import_utils.cx)("ui-button-group", className),
-        role: "group",
         "data-attached": (0, import_utils.dataAttr)(isAttached),
+        role: "group",
         __css: css,
         ...rest
       }
@@ -166,9 +166,9 @@ var Button = (0, import_core2.forwardRef)(
         as,
         type: type != null ? type : defaultType,
         className: (0, import_utils2.cx)("ui-button", className),
-        disabled: trulyDisabled,
         "data-active": (0, import_utils2.dataAttr)(isActive),
         "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        disabled: trulyDisabled,
         __css: css,
         ...rest,
         onPointerDown,
@@ -213,7 +213,7 @@ var ButtonLoading = ({
   );
   const element = (0, import_react2.useMemo)(() => {
     if (typeof loadingIcon === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+      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" });
     }
@@ -240,10 +240,10 @@ var ButtonIcon = ({ className, children, ...rest }) => {
     import_core2.ui.span,
     {
       className: (0, import_utils2.cx)("ui-button__icon", className),
+      "aria-hidden": true,
       alignSelf: "center",
       display: "inline-flex",
       flexShrink: 0,
-      "aria-hidden": true,
       ...rest,
       children
     }

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button.tsx","../src/button-group.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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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        disabled={trulyDisabled}\n        data-active={dataAttr(isActive)}\n        data-loading={dataAttr(isLoading)}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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 color=\"current\" variant={loadingIcon} />\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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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      alignSelf=\"center\"\n      display=\"inline-flex\"\n      flexShrink={0}\n      aria-hidden\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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      size,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ isDisabled, size, variant }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          role=\"group\"\n          data-attached={dataAttr(isAttached)}\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
+{"version":3,"sources":["../src/button.tsx","../src/button-group.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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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(isActive)}\n        data-loading={dataAttr(isLoading)}\n        disabled={trulyDisabled}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      size,\n      variant,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ size, variant, isDisabled }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          data-attached={dataAttr(isAttached)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}

package/dist/button.mjs

@@ -2,8 +2,8 @@
 import {
   Button,
   useButtonType
-} from "./chunk-APFKGHQO.mjs";
-import "./chunk-6OZRGJBX.mjs";
+} from "./chunk-ZDI6LWYD.mjs";
+import "./chunk-I3FAJDDX.mjs";
 export {
   Button,
   useButtonType

package/dist/{chunk-HG2WVJIC.mjs → chunk-4SLEPBN4.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Button
-} from "./chunk-APFKGHQO.mjs";
+} from "./chunk-ZDI6LWYD.mjs";
 
 // src/icon-button.tsx
 import { forwardRef } from "@yamada-ui/core";
@@ -27,4 +27,4 @@ IconButton.__ui__ = "IconButton";
 export {
   IconButton
 };
-//# sourceMappingURL=chunk-HG2WVJIC.mjs.map
+//# sourceMappingURL=chunk-4SLEPBN4.mjs.map

package/dist/{chunk-6OZRGJBX.mjs → chunk-I3FAJDDX.mjs}

@@ -14,14 +14,14 @@ var [ButtonGroupProvider, useButtonGroup] = createContext(
 var ButtonGroup = forwardRef(
   ({
     className,
+    size,
+    variant,
     columnGap,
     direction: flexDirection,
     gap,
     isAttached,
     isDisabled,
     rowGap,
-    size,
-    variant,
     ...rest
   }, ref) => {
     const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
@@ -30,7 +30,7 @@ var ButtonGroup = forwardRef(
       flexDirection
     };
     const context = useMemo(
-      () => ({ isDisabled, size, variant }),
+      () => ({ size, variant, isDisabled }),
       [size, variant, isDisabled]
     );
     if (isAttached) {
@@ -51,8 +51,8 @@ var ButtonGroup = forwardRef(
       {
         ref,
         className: cx("ui-button-group", className),
-        role: "group",
         "data-attached": dataAttr(isAttached),
+        role: "group",
         __css: css,
         ...rest
       }
@@ -66,4 +66,4 @@ export {
   useButtonGroup,
   ButtonGroup
 };
-//# sourceMappingURL=chunk-6OZRGJBX.mjs.map
+//# sourceMappingURL=chunk-I3FAJDDX.mjs.map

package/dist/{chunk-6OZRGJBX.mjs.map → chunk-I3FAJDDX.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      size,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ isDisabled, size, variant }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          role=\"group\"\n          data-attached={dataAttr(isAttached)}\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,eAAe,IAAI,gBAAgB;AAC5C,SAAS,eAAe;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,UAA8B;AAAA,MAClC,OAAO,EAAE,YAAY,MAAM,QAAQ;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,MAAK;AAAA,QACL,iBAAe,SAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
+{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      size,\n      variant,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ size, variant, isDisabled }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          data-attached={dataAttr(isAttached)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,eAAe,IAAI,gBAAgB;AAC5C,SAAS,eAAe;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,UAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,iBAAe,SAAS,UAAU;AAAA,QAClC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}

package/dist/{chunk-APFKGHQO.mjs → chunk-ZDI6LWYD.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   useButtonGroup
-} from "./chunk-6OZRGJBX.mjs";
+} from "./chunk-I3FAJDDX.mjs";
 
 // src/button.tsx
 import {
@@ -86,9 +86,9 @@ var Button = forwardRef(
         as,
         type: type != null ? type : defaultType,
         className: cx("ui-button", className),
-        disabled: trulyDisabled,
         "data-active": dataAttr(isActive),
         "data-loading": dataAttr(isLoading),
+        disabled: trulyDisabled,
         __css: css,
         ...rest,
         onPointerDown,
@@ -133,7 +133,7 @@ var ButtonLoading = ({
   );
   const element = useMemo(() => {
     if (typeof loadingIcon === "string") {
-      return /* @__PURE__ */ jsx(LoadingIcon, { color: "current", variant: loadingIcon });
+      return /* @__PURE__ */ jsx(LoadingIcon, { variant: loadingIcon, color: "current" });
     } else {
       return loadingIcon || /* @__PURE__ */ jsx(LoadingIcon, { color: "current" });
     }
@@ -160,10 +160,10 @@ var ButtonIcon = ({ className, children, ...rest }) => {
     ui.span,
     {
       className: cx("ui-button__icon", className),
+      "aria-hidden": true,
       alignSelf: "center",
       display: "inline-flex",
       flexShrink: 0,
-      "aria-hidden": true,
       ...rest,
       children
     }
@@ -184,4 +184,4 @@ export {
   Button,
   useButtonType
 };
-//# sourceMappingURL=chunk-APFKGHQO.mjs.map
+//# sourceMappingURL=chunk-ZDI6LWYD.mjs.map

package/dist/{chunk-APFKGHQO.mjs.map → chunk-ZDI6LWYD.mjs.map}

@@ -1 +1 @@
-{"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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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        disabled={trulyDisabled}\n        data-active={dataAttr(isActive)}\n        data-loading={dataAttr(isLoading)}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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 color=\"current\" variant={loadingIcon} />\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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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      alignSelf=\"center\"\n      display=\"inline-flex\"\n      flexShrink={0}\n      aria-hidden\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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n"],"mappings":"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","names":[]}
+{"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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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(isActive)}\n        data-loading={dataAttr(isLoading)}\n        disabled={trulyDisabled}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n"],"mappings":"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","names":[]}

package/dist/icon-button.js

@@ -48,14 +48,14 @@ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
+    size,
+    variant,
     columnGap,
     direction: flexDirection,
     gap,
     isAttached,
     isDisabled,
     rowGap,
-    size,
-    variant,
     ...rest
   }, ref) => {
     const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
@@ -64,7 +64,7 @@ var ButtonGroup = (0, import_core.forwardRef)(
       flexDirection
     };
     const context = (0, import_react.useMemo)(
-      () => ({ isDisabled, size, variant }),
+      () => ({ size, variant, isDisabled }),
       [size, variant, isDisabled]
     );
     if (isAttached) {
@@ -85,8 +85,8 @@ var ButtonGroup = (0, import_core.forwardRef)(
       {
         ref,
         className: (0, import_utils.cx)("ui-button-group", className),
-        role: "group",
         "data-attached": (0, import_utils.dataAttr)(isAttached),
+        role: "group",
         __css: css,
         ...rest
       }
@@ -169,9 +169,9 @@ var Button = (0, import_core2.forwardRef)(
         as,
         type: type != null ? type : defaultType,
         className: (0, import_utils2.cx)("ui-button", className),
-        disabled: trulyDisabled,
         "data-active": (0, import_utils2.dataAttr)(isActive),
         "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        disabled: trulyDisabled,
         __css: css,
         ...rest,
         onPointerDown,
@@ -216,7 +216,7 @@ var ButtonLoading = ({
   );
   const element = (0, import_react2.useMemo)(() => {
     if (typeof loadingIcon === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+      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" });
     }
@@ -243,10 +243,10 @@ var ButtonIcon = ({ className, children, ...rest }) => {
     import_core2.ui.span,
     {
       className: (0, import_utils2.cx)("ui-button__icon", className),
+      "aria-hidden": true,
       alignSelf: "center",
       display: "inline-flex",
       flexShrink: 0,
-      "aria-hidden": true,
       ...rest,
       children
     }

package/dist/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n  /**\n   * The icon to be used in the button.\n   */\n  icon?: ReactElement\n}\n\nexport interface IconButtonProps\n  extends Omit<\n      ButtonProps,\n      | \"leftIcon\"\n      | \"loadingIcon\"\n      | \"loadingPlacement\"\n      | \"loadingText\"\n      | \"rightIcon\"\n    >,\n    IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n  ({ className, children, icon, ...rest }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={cx(\"ui-icon-button\", className)}\n        p={0}\n        {...rest}\n      >\n        {icon || children}\n      </Button>\n    )\n  },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n","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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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        disabled={trulyDisabled}\n        data-active={dataAttr(isActive)}\n        data-loading={dataAttr(isLoading)}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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 color=\"current\" variant={loadingIcon} />\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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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      alignSelf=\"center\"\n      display=\"inline-flex\"\n      flexShrink={0}\n      aria-hidden\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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      size,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ isDisabled, size, variant }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          role=\"group\"\n          data-attached={dataAttr(isAttached)}\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
+{"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n  /**\n   * The icon to be used in the button.\n   */\n  icon?: ReactElement\n}\n\nexport interface IconButtonProps\n  extends Omit<\n      ButtonProps,\n      | \"leftIcon\"\n      | \"loadingIcon\"\n      | \"loadingPlacement\"\n      | \"loadingText\"\n      | \"rightIcon\"\n    >,\n    IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n  ({ className, children, icon, ...rest }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={cx(\"ui-icon-button\", className)}\n        p={0}\n        {...rest}\n      >\n        {icon || children}\n      </Button>\n    )\n  },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n","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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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(isActive)}\n        data-loading={dataAttr(isLoading)}\n        disabled={trulyDisabled}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      size,\n      variant,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ size, variant, isDisabled }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          data-attached={dataAttr(isAttached)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}

package/dist/icon-button.mjs

@@ -1,9 +1,9 @@
 "use client"
 import {
   IconButton
-} from "./chunk-HG2WVJIC.mjs";
-import "./chunk-APFKGHQO.mjs";
-import "./chunk-6OZRGJBX.mjs";
+} from "./chunk-4SLEPBN4.mjs";
+import "./chunk-ZDI6LWYD.mjs";
+import "./chunk-I3FAJDDX.mjs";
 export {
   IconButton
 };

package/dist/index.js

@@ -48,14 +48,14 @@ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
 var ButtonGroup = (0, import_core.forwardRef)(
   ({
     className,
+    size,
+    variant,
     columnGap,
     direction: flexDirection,
     gap,
     isAttached,
     isDisabled,
     rowGap,
-    size,
-    variant,
     ...rest
   }, ref) => {
     const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
@@ -64,7 +64,7 @@ var ButtonGroup = (0, import_core.forwardRef)(
       flexDirection
     };
     const context = (0, import_react.useMemo)(
-      () => ({ isDisabled, size, variant }),
+      () => ({ size, variant, isDisabled }),
       [size, variant, isDisabled]
     );
     if (isAttached) {
@@ -85,8 +85,8 @@ var ButtonGroup = (0, import_core.forwardRef)(
       {
         ref,
         className: (0, import_utils.cx)("ui-button-group", className),
-        role: "group",
         "data-attached": (0, import_utils.dataAttr)(isAttached),
+        role: "group",
         __css: css,
         ...rest
       }
@@ -169,9 +169,9 @@ var Button = (0, import_core2.forwardRef)(
         as,
         type: type != null ? type : defaultType,
         className: (0, import_utils2.cx)("ui-button", className),
-        disabled: trulyDisabled,
         "data-active": (0, import_utils2.dataAttr)(isActive),
         "data-loading": (0, import_utils2.dataAttr)(isLoading),
+        disabled: trulyDisabled,
         __css: css,
         ...rest,
         onPointerDown,
@@ -216,7 +216,7 @@ var ButtonLoading = ({
   );
   const element = (0, import_react2.useMemo)(() => {
     if (typeof loadingIcon === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
+      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" });
     }
@@ -243,10 +243,10 @@ var ButtonIcon = ({ className, children, ...rest }) => {
     import_core2.ui.span,
     {
       className: (0, import_utils2.cx)("ui-button__icon", className),
+      "aria-hidden": true,
       alignSelf: "center",
       display: "inline-flex",
       flexShrink: 0,
-      "aria-hidden": true,
       ...rest,
       children
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/button.tsx","../src/button-group.tsx","../src/icon-button.tsx"],"sourcesContent":["export { Button } from \"./button\"\nexport type { ButtonProps } from \"./button\"\nexport { ButtonGroup } from \"./button-group\"\nexport type { ButtonGroupProps } from \"./button-group\"\nexport { IconButton } from \"./icon-button\"\nexport type { IconButtonProps } from \"./icon-button\"\n","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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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        disabled={trulyDisabled}\n        data-active={dataAttr(isActive)}\n        data-loading={dataAttr(isLoading)}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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 color=\"current\" variant={loadingIcon} />\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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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      alignSelf=\"center\"\n      display=\"inline-flex\"\n      flexShrink={0}\n      aria-hidden\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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      size,\n      variant,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ isDisabled, size, variant }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          role=\"group\"\n          data-attached={dataAttr(isAttached)}\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n","import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n  /**\n   * The icon to be used in the button.\n   */\n  icon?: ReactElement\n}\n\nexport interface IconButtonProps\n  extends Omit<\n      ButtonProps,\n      | \"leftIcon\"\n      | \"loadingIcon\"\n      | \"loadingPlacement\"\n      | \"loadingText\"\n      | \"rightIcon\"\n    >,\n    IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n  ({ className, children, icon, ...rest }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={cx(\"ui-icon-button\", className)}\n        p={0}\n        {...rest}\n      >\n        {icon || children}\n      </Button>\n    )\n  },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/button.tsx","../src/button-group.tsx","../src/icon-button.tsx"],"sourcesContent":["export { Button } from \"./button\"\nexport type { ButtonProps } from \"./button\"\nexport { ButtonGroup } from \"./button-group\"\nexport type { ButtonGroupProps } from \"./button-group\"\nexport { IconButton } from \"./icon-button\"\nexport type { IconButtonProps } from \"./icon-button\"\n","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`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disableRipple?: boolean\n  /**\n   * If `true`, the button is represented as active.\n   *\n   * @default false\n   */\n  isActive?: boolean\n  /**\n   * If `true`, the button is disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the loading state of the button is represented.\n   *\n   * @default false\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  isRounded?: boolean\n  /**\n   * The icon to display at the left side of the button.\n   */\n  leftIcon?: ReactElement\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  rightIcon?: 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      disableRipple,\n      isActive,\n      isDisabled = group?.isDisabled,\n      isLoading,\n      isRounded,\n      leftIcon,\n      loadingIcon,\n      loadingPlacement = \"start\",\n      loadingText,\n      rightIcon,\n      __css,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    const trulyDisabled = isDisabled || isLoading\n\n    const { ref: buttonRef, type: defaultType } = useButtonType(as)\n    const { onPointerDown, ...rippleProps } = useRipple({\n      ...rest,\n      isDisabled: disableRipple || trulyDisabled,\n    })\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        ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n      }\n    }, [styles, __css, group, isRounded])\n\n    const contentProps = {\n      children,\n      leftIcon,\n      rightIcon,\n    }\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(isActive)}\n        data-loading={dataAttr(isLoading)}\n        disabled={trulyDisabled}\n        __css={css}\n        {...rest}\n        onPointerDown={onPointerDown}\n      >\n        {isLoading && loadingPlacement === \"start\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--start\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        {isLoading ? (\n          loadingText || (\n            <ui.span opacity={0}>\n              <ButtonContent {...contentProps} />\n            </ui.span>\n          )\n        ) : (\n          <ButtonContent {...contentProps} />\n        )}\n\n        {isLoading && loadingPlacement === \"end\" ? (\n          <ButtonLoading\n            className=\"ui-button__loading--end\"\n            {...loadingProps}\n          />\n        ) : null}\n\n        <Ripple isDisabled={disableRipple || trulyDisabled} {...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\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n  children,\n  leftIcon,\n  rightIcon,\n}) => {\n  return (\n    <>\n      {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n      {children}\n      {rightIcon ? <ButtonIcon>{rightIcon}</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 isButton = useRef(!value)\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    if (node) isButton.current = node.tagName === \"BUTTON\"\n  }, [])\n\n  const type = isButton.current ? \"button\" : undefined\n\n  return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSUIObject[\"flexDirection\"]\n  /**\n   * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n   *\n   * @default false\n   */\n  isAttached?: boolean\n  /**\n   * If `true`, all wrapped button will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Button\">,\n    ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n  isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n  {\n    name: \"ButtonGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n  (\n    {\n      className,\n      size,\n      variant,\n      columnGap,\n      direction: flexDirection,\n      gap,\n      isAttached,\n      isDisabled,\n      rowGap,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isColumn =\n      flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n    }\n\n    const context: ButtonGroupContext = useMemo(\n      () => ({ size, variant, isDisabled }),\n      [size, variant, isDisabled],\n    )\n\n    if (isAttached) {\n      Object.assign(css, {\n        \"> *:first-of-type:not(:last-of-type)\": isColumn\n          ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n          : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n        \"> *:not(:first-of-type):last-of-type\": isColumn\n          ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderLeftRadius: 0 },\n        \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n          ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n          : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n      })\n    } else {\n      Object.assign(css, {\n        columnGap,\n        gap,\n        rowGap,\n      })\n    }\n\n    return (\n      <ButtonGroupProvider value={context}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-button-group\", className)}\n          data-attached={dataAttr(isAttached)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ButtonGroupProvider>\n    )\n  },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n","import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n  /**\n   * The icon to be used in the button.\n   */\n  icon?: ReactElement\n}\n\nexport interface IconButtonProps\n  extends Omit<\n      ButtonProps,\n      | \"leftIcon\"\n      | \"loadingIcon\"\n      | \"loadingPlacement\"\n      | \"loadingText\"\n      | \"rightIcon\"\n    >,\n    IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n  ({ className, children, icon, ...rest }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        className={cx(\"ui-icon-button\", className)}\n        p={0}\n        {...rest}\n      >\n        {icon || children}\n      </Button>\n    )\n  },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,13 +1,13 @@
 "use client"
 import {
   IconButton
-} from "./chunk-HG2WVJIC.mjs";
+} from "./chunk-4SLEPBN4.mjs";
 import {
   Button
-} from "./chunk-APFKGHQO.mjs";
+} from "./chunk-ZDI6LWYD.mjs";
 import {
   ButtonGroup
-} from "./chunk-6OZRGJBX.mjs";
+} from "./chunk-I3FAJDDX.mjs";
 export {
   Button,
   ButtonGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/button",
-  "version": "1.0.44-dev-20241007025246",
+  "version": "1.0.44-dev-20241007135427",
   "description": "Yamada UI button components",
   "keywords": [
     "yamada",
@@ -38,15 +38,15 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.15.2-dev-20241007025246",
-    "@yamada-ui/loading": "1.1.18-dev-20241007025246",
-    "@yamada-ui/ripple": "1.0.40-dev-20241007025246",
-    "@yamada-ui/utils": "1.5.3-dev-20241007025246"
+    "@yamada-ui/core": "1.15.2-dev-20241007135427",
+    "@yamada-ui/loading": "1.1.18-dev-20241007135427",
+    "@yamada-ui/ripple": "1.0.40-dev-20241007135427",
+    "@yamada-ui/utils": "1.5.3-dev-20241007135427"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "react": "^18.3.1",
-    "@yamada-ui/icon": "1.1.8-dev-20241007025246"
+    "@yamada-ui/icon": "1.1.8-dev-20241007135427"
   },
   "peerDependencies": {
     "react": ">=18"