@yamada-ui/button 1.0.15-dev-20240221092443 → 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 +6 -0
- package/dist/button.d.ts +6 -0
- package/dist/button.js +4 -2
- package/dist/button.js.map +1 -1
- package/dist/button.mjs +1 -1
- package/dist/{chunk-RITMHQLS.mjs → chunk-CBAAOFTQ.mjs} +5 -3
- package/dist/chunk-CBAAOFTQ.mjs.map +1 -0
- package/dist/{chunk-GJAQCAKR.mjs → chunk-SWKTXNJD.mjs} +3 -4
- package/dist/chunk-SWKTXNJD.mjs.map +1 -0
- package/dist/icon-button.d.mts +0 -6
- package/dist/icon-button.d.ts +0 -6
- package/dist/icon-button.js +5 -4
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.mjs +2 -2
- package/dist/index.js +5 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/package.json +4 -4
- package/dist/chunk-GJAQCAKR.mjs.map +0 -1
- package/dist/chunk-RITMHQLS.mjs.map +0 -1
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,
|
package/dist/button.js.map
CHANGED
|
@@ -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
|
@@ -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-
|
|
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-
|
|
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,
|
|
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-
|
|
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":[]}
|
package/dist/icon-button.d.mts
CHANGED
|
@@ -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
|
/**
|
package/dist/icon-button.d.ts
CHANGED
|
@@ -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
|
/**
|
package/dist/icon-button.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,
|
|
@@ -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,
|
|
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
|
}
|
package/dist/icon-button.js.map
CHANGED
|
@@ -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"]}
|
package/dist/icon-button.mjs
CHANGED
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,
|
|
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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,eAKO;AAEP,qBAAuC;AACvC,oBAAkC;AAClC,IAAAC,gBAA+C;AAE/C,IAAAC,gBAA6C;;;ACX7C,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AAyFhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;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,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,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,QAC/C,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,MAC5B,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,MAAK;AAAA,QACL,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;;;ADkDM,IAAAC,sBAAA;AApEC,IAAM,aAAS;AAAA,EACpB,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/B,UAAM,QAAQ,eAAe;AAC7B,UAAM,CAAC,QAAQ,WAAW,QAAI,gCAAkB,UAAU;AAAA,MACxD,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,+BAAO;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAe,WAAW;AAE9B,UAAM,gBAAgB,cAAc;AAEpC,UAAM,EAAE,KAAK,WAAW,MAAM,YAAY,IAAI,cAAc,EAAE;AAC9D,UAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU;AAAA,MAClD,GAAG;AAAA,MACH,YAAY,iBAAiB;AAAA,IAC/B,CAAC;AAED,UAAM,UAAmB,uBAAQ,MAAM;AAtH3C;AAuHM,YAAM,SACJ,YAAY,aAAS,sBAAM,YAAO,WAAP,YAAiB,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC;AAEpE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,CAAC,CAAC,QAAQ,EAAE,OAAO,IAAI,CAAC;AAAA,QAC5B,GAAI,YAAY,EAAE,cAAc,SAAS,IAAI,CAAC;AAAA,MAChD;AAAA,IACF,GAAG,CAAC,QAAQ,OAAO,OAAO,SAAS,CAAC;AAEpC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,SAAK,yBAAU,KAAK,SAAS;AAAA,QAC7B;AAAA,QACA,eAAW,kBAAG,aAAa,SAAS;AAAA,QACpC,MAAM,sBAAQ;AAAA,QACd,UAAU;AAAA,QACV,mBAAa,wBAAS,QAAQ;AAAA,QAC9B,mBAAe,wBAAS,SAAS;AAAA,QACjC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,uBAAa,qBAAqB,UACjC,6CAAC,WAAQ,WAAU,6BAA6B,GAAG,cAAc,IAC/D;AAAA,UAEH,YACC,eACE,6CAAC,gBAAG,MAAH,EAAQ,SAAS,GAChB,uDAAC,WAAS,GAAG,cAAc,GAC7B,IAGF,6CAAC,WAAS,GAAG,cAAc;AAAA,UAG5B,aAAa,qBAAqB,QACjC,6CAAC,WAAQ,WAAU,2BAA2B,GAAG,cAAc,IAC7D;AAAA,UAEJ,6CAAC,wBAAO,YAAY,iBAAiB,eAAgB,GAAG,aAAa;AAAA;AAAA;AAAA,IACvE;AAAA,EAEJ;AACF;AAEA,IAAM,UAEF,CAAC,EAAE,WAAW,aAAa,YAAY,MAAM;AAC/C,QAAM,UAAM;AAAA,IACV,OAAoB;AAAA,MAClB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU,cAAc,aAAa;AAAA,MACrC,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,cAAU,uBAAQ,MAAM;AAC5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,aAAO,6CAAC,eAAAC,SAAA,EAAY,OAAM,WAAU,SAAS,aAAa;AAAA,IAC5D,OAAO;AACL,aAAO,eAAe,6CAAC,eAAAA,SAAA,EAAY,OAAM,WAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,6CAAC,gBAAG,KAAH,EAAO,eAAW,kBAAG,sBAAsB,SAAS,GAAG,OAAO,KAC5D,mBACH;AAEJ;AAEA,IAAM,UAAwE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,8EACG;AAAA,eAAW,6CAAC,QAAM,oBAAS,IAAU;AAAA,IACrC;AAAA,IACA,YAAY,6CAAC,QAAM,qBAAU,IAAU;AAAA,KAC1C;AAEJ;AAEA,IAAM,OAAgC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAM;AAC1E,SACE;AAAA,IAAC,gBAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,mBAAmB,SAAS;AAAA,MAC1C,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,eAAW,sBAAO,CAAC,KAAK;AAE9B,QAAM,UAAM,2BAAY,CAAC,SAA6B;AACpD,QAAI;AAAM,eAAS,UAAU,KAAK,YAAY;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,SAAS,UAAU,WAAW;AAE3C,SAAO,EAAE,KAAK,KAAK;AACrB;;;AEjQA,IAAAC,eAA2B;AAC3B,IAAAC,gBAAmB;AA+Bb,IAAAC,sBAAA;AAHC,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,MAAM,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,kBAAG,kBAAkB,SAAS;AAAA,QACzC;AAAA,QACA,GAAG;AAAA,QACF,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/button",
|
|
3
|
-
"version": "1.0.15-dev-
|
|
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-
|
|
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-
|
|
44
|
-
"@yamada-ui/ripple": "1.0.14-dev-
|
|
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":[]}
|