@yamada-ui/button 1.0.15-dev-20240221041112 → 1.0.15-dev-20240221110215

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/button.d.mts CHANGED
@@ -10,6 +10,12 @@ type ButtonOptions = {
10
10
  * @default 'button'
11
11
  */
12
12
  type?: "button" | "reset" | "submit";
13
+ /**
14
+ * If true, the button is full rounded. Else, it'll be slightly round.
15
+ *
16
+ * @default false
17
+ */
18
+ isRounded?: boolean;
13
19
  /**
14
20
  * If `true`, the loading state of the button is represented.
15
21
  *
package/dist/button.d.ts CHANGED
@@ -10,6 +10,12 @@ type ButtonOptions = {
10
10
  * @default 'button'
11
11
  */
12
12
  type?: "button" | "reset" | "submit";
13
+ /**
14
+ * If true, the button is full rounded. Else, it'll be slightly round.
15
+ *
16
+ * @default false
17
+ */
18
+ isRounded?: boolean;
13
19
  /**
14
20
  * If `true`, the loading state of the button is represented.
15
21
  *
package/dist/button.js CHANGED
@@ -104,6 +104,7 @@ var Button = (0, import_core2.forwardRef)(
104
104
  className,
105
105
  as,
106
106
  type,
107
+ isRounded,
107
108
  isLoading,
108
109
  isActive,
109
110
  isDisabled = group == null ? void 0 : group.isDisabled,
@@ -139,9 +140,10 @@ var Button = (0, import_core2.forwardRef)(
139
140
  outline: "none",
140
141
  ...styles,
141
142
  ...__css,
142
- ...!!group ? { _focus } : {}
143
+ ...!!group ? { _focus } : {},
144
+ ...isRounded ? { borderRadius: "9999px" } : {}
143
145
  };
144
- }, [styles, __css, group]);
146
+ }, [styles, __css, group, isRounded]);
145
147
  const contentProps = {
146
148
  leftIcon,
147
149
  rightIcon,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
1
+ {"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: 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 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isRounded,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"9999px\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
package/dist/button.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Button,
4
4
  useButtonType
5
- } from "./chunk-RITMHQLS.mjs";
5
+ } from "./chunk-CBAAOFTQ.mjs";
6
6
  import "./chunk-QEKFZB7J.mjs";
7
7
  export {
8
8
  Button,
@@ -26,6 +26,7 @@ var Button = forwardRef(
26
26
  className,
27
27
  as,
28
28
  type,
29
+ isRounded,
29
30
  isLoading,
30
31
  isActive,
31
32
  isDisabled = group == null ? void 0 : group.isDisabled,
@@ -61,9 +62,10 @@ var Button = forwardRef(
61
62
  outline: "none",
62
63
  ...styles,
63
64
  ...__css,
64
- ...!!group ? { _focus } : {}
65
+ ...!!group ? { _focus } : {},
66
+ ...isRounded ? { borderRadius: "9999px" } : {}
65
67
  };
66
- }, [styles, __css, group]);
68
+ }, [styles, __css, group, isRounded]);
67
69
  const contentProps = {
68
70
  leftIcon,
69
71
  rightIcon,
@@ -155,4 +157,4 @@ export {
155
157
  Button,
156
158
  useButtonType
157
159
  };
158
- //# sourceMappingURL=chunk-RITMHQLS.mjs.map
160
+ //# sourceMappingURL=chunk-CBAAOFTQ.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: 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 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isRounded,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"9999px\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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":[]}
@@ -1,21 +1,20 @@
1
1
  "use client"
2
2
  import {
3
3
  Button
4
- } from "./chunk-RITMHQLS.mjs";
4
+ } from "./chunk-CBAAOFTQ.mjs";
5
5
 
6
6
  // src/icon-button.tsx
7
7
  import { forwardRef } from "@yamada-ui/core";
8
8
  import { cx } from "@yamada-ui/utils";
9
9
  import { jsx } from "react/jsx-runtime";
10
10
  var IconButton = forwardRef(
11
- ({ icon, isRounded, children, className, ...rest }, ref) => {
11
+ ({ icon, children, className, ...rest }, ref) => {
12
12
  return /* @__PURE__ */ jsx(
13
13
  Button,
14
14
  {
15
15
  className: cx("ui-icon-button", className),
16
16
  ref,
17
17
  p: 0,
18
- ...isRounded ? { rounded: "full" } : {},
19
18
  ...rest,
20
19
  children: icon || children
21
20
  }
@@ -26,4 +25,4 @@ var IconButton = forwardRef(
26
25
  export {
27
26
  IconButton
28
27
  };
29
- //# sourceMappingURL=chunk-GJAQCAKR.mjs.map
28
+ //# sourceMappingURL=chunk-SWKTXNJD.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/icon-button.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AA+Bb;AAHC,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,MAAM,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC;AAAA,QACA,GAAG;AAAA,QACF,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;","names":[]}
@@ -8,12 +8,6 @@ type IconButtonOptions = {
8
8
  * The icon to be used in the button.
9
9
  */
10
10
  icon?: ReactElement;
11
- /**
12
- * If `true`, the button will be perfectly round. Else, it'll be slightly round.
13
- *
14
- * @default false
15
- */
16
- isRounded?: boolean;
17
11
  };
18
12
  type IconButtonProps = Omit<ButtonProps, "leftIcon" | "rightIcon" | "loadingIcon" | "loadingText" | "loadingPlacement"> & IconButtonOptions;
19
13
  /**
@@ -8,12 +8,6 @@ type IconButtonOptions = {
8
8
  * The icon to be used in the button.
9
9
  */
10
10
  icon?: ReactElement;
11
- /**
12
- * If `true`, the button will be perfectly round. Else, it'll be slightly round.
13
- *
14
- * @default false
15
- */
16
- isRounded?: boolean;
17
11
  };
18
12
  type IconButtonProps = Omit<ButtonProps, "leftIcon" | "rightIcon" | "loadingIcon" | "loadingText" | "loadingPlacement"> & IconButtonOptions;
19
13
  /**
@@ -107,6 +107,7 @@ var Button = (0, import_core2.forwardRef)(
107
107
  className,
108
108
  as,
109
109
  type,
110
+ isRounded,
110
111
  isLoading,
111
112
  isActive,
112
113
  isDisabled = group == null ? void 0 : group.isDisabled,
@@ -142,9 +143,10 @@ var Button = (0, import_core2.forwardRef)(
142
143
  outline: "none",
143
144
  ...styles,
144
145
  ...__css,
145
- ...!!group ? { _focus } : {}
146
+ ...!!group ? { _focus } : {},
147
+ ...isRounded ? { borderRadius: "9999px" } : {}
146
148
  };
147
- }, [styles, __css, group]);
149
+ }, [styles, __css, group, isRounded]);
148
150
  const contentProps = {
149
151
  leftIcon,
150
152
  rightIcon,
@@ -235,14 +237,13 @@ var useButtonType = (value) => {
235
237
  // src/icon-button.tsx
236
238
  var import_jsx_runtime3 = require("react/jsx-runtime");
237
239
  var IconButton = (0, import_core3.forwardRef)(
238
- ({ icon, isRounded, children, className, ...rest }, ref) => {
240
+ ({ icon, children, className, ...rest }, ref) => {
239
241
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
240
242
  Button,
241
243
  {
242
244
  className: (0, import_utils3.cx)("ui-icon-button", className),
243
245
  ref,
244
246
  p: 0,
245
- ...isRounded ? { rounded: "full" } : {},
246
247
  ...rest,
247
248
  children: icon || children
248
249
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n","import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n","import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: 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 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isRounded,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"9999px\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-GJAQCAKR.mjs";
5
- import "./chunk-RITMHQLS.mjs";
4
+ } from "./chunk-SWKTXNJD.mjs";
5
+ import "./chunk-CBAAOFTQ.mjs";
6
6
  import "./chunk-QEKFZB7J.mjs";
7
7
  export {
8
8
  IconButton
package/dist/index.js CHANGED
@@ -107,6 +107,7 @@ var Button = (0, import_core2.forwardRef)(
107
107
  className,
108
108
  as,
109
109
  type,
110
+ isRounded,
110
111
  isLoading,
111
112
  isActive,
112
113
  isDisabled = group == null ? void 0 : group.isDisabled,
@@ -142,9 +143,10 @@ var Button = (0, import_core2.forwardRef)(
142
143
  outline: "none",
143
144
  ...styles,
144
145
  ...__css,
145
- ...!!group ? { _focus } : {}
146
+ ...!!group ? { _focus } : {},
147
+ ...isRounded ? { borderRadius: "9999px" } : {}
146
148
  };
147
- }, [styles, __css, group]);
149
+ }, [styles, __css, group, isRounded]);
148
150
  const contentProps = {
149
151
  leftIcon,
150
152
  rightIcon,
@@ -237,14 +239,13 @@ var import_core3 = require("@yamada-ui/core");
237
239
  var import_utils3 = require("@yamada-ui/utils");
238
240
  var import_jsx_runtime3 = require("react/jsx-runtime");
239
241
  var IconButton = (0, import_core3.forwardRef)(
240
- ({ icon, isRounded, children, className, ...rest }, ref) => {
242
+ ({ icon, children, className, ...rest }, ref) => {
241
243
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
242
244
  Button,
243
245
  {
244
246
  className: (0, import_utils3.cx)("ui-icon-button", className),
245
247
  ref,
246
248
  p: 0,
247
- ...isRounded ? { rounded: "full" } : {},
248
249
  ...rest,
249
250
  children: icon || children
250
251
  }
package/dist/index.js.map CHANGED
@@ -1 +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 { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
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 { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: 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 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isRounded,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"9999px\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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 { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype 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 type ButtonGroupProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\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):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\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 CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-GJAQCAKR.mjs";
4
+ } from "./chunk-SWKTXNJD.mjs";
5
5
  import {
6
6
  Button
7
- } from "./chunk-RITMHQLS.mjs";
7
+ } from "./chunk-CBAAOFTQ.mjs";
8
8
  import {
9
9
  ButtonGroup
10
10
  } from "./chunk-QEKFZB7J.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/button",
3
- "version": "1.0.15-dev-20240221041112",
3
+ "version": "1.0.15-dev-20240221110215",
4
4
  "description": "Yamada UI button components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -38,10 +38,10 @@
38
38
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
39
39
  },
40
40
  "dependencies": {
41
- "@yamada-ui/core": "1.4.1-dev-20240221041112",
41
+ "@yamada-ui/core": "1.4.1-dev-20240221110215",
42
42
  "@yamada-ui/utils": "1.0.5",
43
- "@yamada-ui/loading": "1.0.14-dev-20240221041112",
44
- "@yamada-ui/ripple": "1.0.14-dev-20240221041112"
43
+ "@yamada-ui/loading": "1.0.14-dev-20240221110215",
44
+ "@yamada-ui/ripple": "1.0.14-dev-20240221110215"
45
45
  },
46
46
  "devDependencies": {
47
47
  "react": "^18.0.0",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/icon-button.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\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 ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAgCb;AAHC,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,MAAM,WAAW,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC;AAAA,QACA,GAAG;AAAA,QACF,GAAI,YAAY,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,QACvC,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, merge, dataAttr, mergeRefs } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype 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`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: 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 * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = 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, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\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 ? merge(styles._focus ?? {}, { zIndex: 1 }) : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"0.5rem\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\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 className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\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 <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\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\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\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":[]}