@yamada-ui/button 1.0.44-dev-20241005224505 → 1.0.44-dev-20241006032009
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-group.d.mts +1 -1
- package/dist/button-group.d.ts +1 -1
- package/dist/button-group.js +11 -11
- package/dist/button-group.js.map +1 -1
- package/dist/button-group.mjs +1 -1
- package/dist/button.d.mts +21 -21
- package/dist/button.d.ts +21 -21
- package/dist/button.js +34 -34
- package/dist/button.js.map +1 -1
- package/dist/button.mjs +2 -2
- package/dist/{chunk-NBGNMVB2.mjs → chunk-6OZRGJBX.mjs} +13 -13
- package/dist/chunk-6OZRGJBX.mjs.map +1 -0
- package/dist/{chunk-DASXATSK.mjs → chunk-APFKGHQO.mjs} +29 -29
- package/dist/chunk-APFKGHQO.mjs.map +1 -0
- package/dist/{chunk-NINEAP5U.mjs → chunk-HG2WVJIC.mjs} +4 -4
- package/dist/chunk-HG2WVJIC.mjs.map +1 -0
- package/dist/icon-button.d.mts +1 -1
- package/dist/icon-button.d.ts +1 -1
- package/dist/icon-button.js +36 -36
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.mjs +3 -3
- package/dist/index.js +36 -36
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/package.json +6 -6
- package/dist/chunk-DASXATSK.mjs.map +0 -1
- package/dist/chunk-NBGNMVB2.mjs.map +0 -1
- package/dist/chunk-NINEAP5U.mjs.map +0 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
useButtonGroup
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-6OZRGJBX.mjs";
|
|
5
5
|
|
|
6
6
|
// src/button.tsx
|
|
7
7
|
import {
|
|
8
|
-
ui,
|
|
9
8
|
forwardRef,
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
omitThemeProps,
|
|
10
|
+
ui,
|
|
11
|
+
useComponentStyle
|
|
12
12
|
} from "@yamada-ui/core";
|
|
13
13
|
import { Loading as LoadingIcon } from "@yamada-ui/loading";
|
|
14
14
|
import { Ripple, useRipple } from "@yamada-ui/ripple";
|
|
15
|
-
import { cx,
|
|
15
|
+
import { cx, dataAttr, merge, mergeRefs } from "@yamada-ui/utils";
|
|
16
16
|
import { useCallback, useMemo, useRef } from "react";
|
|
17
17
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
18
|
var Button = forwardRef(
|
|
@@ -27,19 +27,19 @@ var Button = forwardRef(
|
|
|
27
27
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
|
28
28
|
);
|
|
29
29
|
const {
|
|
30
|
-
className,
|
|
31
30
|
as,
|
|
32
31
|
type,
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
className,
|
|
33
|
+
disableRipple,
|
|
35
34
|
isActive,
|
|
36
35
|
isDisabled = group == null ? void 0 : group.isDisabled,
|
|
36
|
+
isLoading,
|
|
37
|
+
isRounded,
|
|
37
38
|
leftIcon,
|
|
38
|
-
rightIcon,
|
|
39
39
|
loadingIcon,
|
|
40
|
-
loadingText,
|
|
41
40
|
loadingPlacement = "start",
|
|
42
|
-
|
|
41
|
+
loadingText,
|
|
42
|
+
rightIcon,
|
|
43
43
|
__css,
|
|
44
44
|
...rest
|
|
45
45
|
} = omitThemeProps(mergedProps);
|
|
@@ -53,17 +53,17 @@ var Button = forwardRef(
|
|
|
53
53
|
var _a;
|
|
54
54
|
const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: "fallback(yamcha, 1)" }) : {};
|
|
55
55
|
return {
|
|
56
|
-
display: "inline-flex",
|
|
57
56
|
alignItems: "center",
|
|
58
|
-
justifyContent: "center",
|
|
59
|
-
gap: "fallback(2, 0.5rem)",
|
|
60
57
|
appearance: "none",
|
|
61
|
-
|
|
58
|
+
display: "inline-flex",
|
|
59
|
+
gap: "fallback(2, 0.5rem)",
|
|
60
|
+
justifyContent: "center",
|
|
61
|
+
outline: "none",
|
|
62
|
+
overflow: "hidden",
|
|
62
63
|
position: "relative",
|
|
63
|
-
|
|
64
|
+
userSelect: "none",
|
|
64
65
|
verticalAlign: "middle",
|
|
65
|
-
|
|
66
|
-
outline: "none",
|
|
66
|
+
whiteSpace: "nowrap",
|
|
67
67
|
...styles,
|
|
68
68
|
...__css,
|
|
69
69
|
...!!group ? { _focus } : {},
|
|
@@ -71,9 +71,9 @@ var Button = forwardRef(
|
|
|
71
71
|
};
|
|
72
72
|
}, [styles, __css, group, isRounded]);
|
|
73
73
|
const contentProps = {
|
|
74
|
+
children,
|
|
74
75
|
leftIcon,
|
|
75
|
-
rightIcon
|
|
76
|
-
children
|
|
76
|
+
rightIcon
|
|
77
77
|
};
|
|
78
78
|
const loadingProps = {
|
|
79
79
|
loadingIcon,
|
|
@@ -84,8 +84,8 @@ var Button = forwardRef(
|
|
|
84
84
|
{
|
|
85
85
|
ref: mergeRefs(ref, buttonRef),
|
|
86
86
|
as,
|
|
87
|
-
className: cx("ui-button", className),
|
|
88
87
|
type: type != null ? type : defaultType,
|
|
88
|
+
className: cx("ui-button", className),
|
|
89
89
|
disabled: trulyDisabled,
|
|
90
90
|
"data-active": dataAttr(isActive),
|
|
91
91
|
"data-loading": dataAttr(isLoading),
|
|
@@ -123,11 +123,11 @@ var ButtonLoading = ({
|
|
|
123
123
|
}) => {
|
|
124
124
|
const css = useMemo(
|
|
125
125
|
() => ({
|
|
126
|
-
display: "flex",
|
|
127
126
|
alignItems: "center",
|
|
128
|
-
|
|
127
|
+
display: "flex",
|
|
129
128
|
fontSize: "1em",
|
|
130
|
-
lineHeight: "normal"
|
|
129
|
+
lineHeight: "normal",
|
|
130
|
+
position: loadingText ? "relative" : "absolute"
|
|
131
131
|
}),
|
|
132
132
|
[loadingText]
|
|
133
133
|
);
|
|
@@ -143,9 +143,9 @@ var ButtonLoading = ({
|
|
|
143
143
|
ButtonLoading.displayName = "ButtonLoading";
|
|
144
144
|
ButtonLoading.__ui__ = "ButtonLoading";
|
|
145
145
|
var ButtonContent = ({
|
|
146
|
+
children,
|
|
146
147
|
leftIcon,
|
|
147
|
-
rightIcon
|
|
148
|
-
children
|
|
148
|
+
rightIcon
|
|
149
149
|
}) => {
|
|
150
150
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
151
151
|
leftIcon ? /* @__PURE__ */ jsx(ButtonIcon, { children: leftIcon }) : null,
|
|
@@ -155,13 +155,13 @@ var ButtonContent = ({
|
|
|
155
155
|
};
|
|
156
156
|
ButtonContent.displayName = "ButtonContent";
|
|
157
157
|
ButtonContent.__ui__ = "ButtonContent";
|
|
158
|
-
var ButtonIcon = ({
|
|
158
|
+
var ButtonIcon = ({ className, children, ...rest }) => {
|
|
159
159
|
return /* @__PURE__ */ jsx(
|
|
160
160
|
ui.span,
|
|
161
161
|
{
|
|
162
162
|
className: cx("ui-button__icon", className),
|
|
163
|
-
display: "inline-flex",
|
|
164
163
|
alignSelf: "center",
|
|
164
|
+
display: "inline-flex",
|
|
165
165
|
flexShrink: 0,
|
|
166
166
|
"aria-hidden": true,
|
|
167
167
|
...rest,
|
|
@@ -184,4 +184,4 @@ export {
|
|
|
184
184
|
Button,
|
|
185
185
|
useButtonType
|
|
186
186
|
};
|
|
187
|
-
//# sourceMappingURL=chunk-
|
|
187
|
+
//# sourceMappingURL=chunk-APFKGHQO.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n}\n\nexport interface ButtonProps\n extends HTMLUIProps<\"button\">,\n ThemeProps<\"Button\">,\n ButtonOptions {}\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see Docs https://yamada-ui.com/components/forms/button\n */\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, __isProcessSkip, __styles, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\n \"Button\",\n {\n ...group,\n ...props,\n },\n { isProcessSkip: __isProcessSkip, styles: __styles },\n )\n const {\n as,\n type,\n className,\n disableRipple,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n leftIcon,\n rightIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n disabled={trulyDisabled}\n data-active={dataAttr(isActive)}\n data-loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n leftIcon,\n rightIcon,\n}) => {\n return (\n <>\n {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n {children}\n {rightIcon ? <ButtonIcon>{rightIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n aria-hidden\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n"],"mappings":";;;;;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,IAAI,UAAU,OAAO,iBAAiB;AAC/C,SAAS,aAAa,SAAS,cAAc;AAoJvC,SA2FF,UA9EM,KAbJ;AA1EC,IAAM,SAAS;AAAA,EACpB,CAAC,EAAE,UAAU,iBAAiB,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1D,UAAM,QAAQ,eAAe;AAC7B,UAAM,CAAC,QAAQ,WAAW,IAAI;AAAA,MAC5B;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,EAAE,eAAe,iBAAiB,QAAQ,SAAS;AAAA,IACrD;AACA,UAAM;AAAA,MACJ;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;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM,gBAAgB,cAAc;AAEpC,UAAM,EAAE,KAAK,WAAW,MAAM,YAAY,IAAI,cAAc,EAAE;AAC9D,UAAM,EAAE,eAAe,GAAG,YAAY,IAAI,UAAU;AAAA,MAClD,GAAG;AAAA,MACH,YAAY,iBAAiB;AAAA,IAC/B,CAAC;AAED,UAAM,MAAmB,QAAQ,MAAM;AA3H3C;AA4HM,YAAM,SACJ,YAAY,SACR,OAAM,YAAO,WAAP,YAAiB,CAAC,GAAG,EAAE,QAAQ,sBAAsB,CAAC,IAC5D,CAAC;AAEP,aAAO;AAAA,QACL,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,CAAC,CAAC,QAAQ,EAAE,OAAO,IAAI,CAAC;AAAA,QAC5B,GAAI,YAAY,EAAE,cAAc,yBAAyB,IAAI,CAAC;AAAA,MAChE;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,GAAG;AAAA,MAAH;AAAA,QACC,KAAK,UAAU,KAAK,SAAS;AAAA,QAC7B;AAAA,QACA,MAAM,sBAAQ;AAAA,QACd,WAAW,GAAG,aAAa,SAAS;AAAA,QACpC,UAAU;AAAA,QACV,eAAa,SAAS,QAAQ;AAAA,QAC9B,gBAAc,SAAS,SAAS;AAAA,QAChC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,uBAAa,qBAAqB,UACjC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN,IACE;AAAA,UAEH,YACC,eACE,oBAAC,GAAG,MAAH,EAAQ,SAAS,GAChB,8BAAC,iBAAe,GAAG,cAAc,GACnC,IAGF,oBAAC,iBAAe,GAAG,cAAc;AAAA,UAGlC,aAAa,qBAAqB,QACjC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN,IACE;AAAA,UAEJ,oBAAC,UAAO,YAAY,iBAAiB,eAAgB,GAAG,aAAa;AAAA;AAAA;AAAA,IACvE;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;AAKhB,IAAM,gBAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,MAAM;AAAA,IACV,OAAoB;AAAA,MAClB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU,cAAc,aAAa;AAAA,IACvC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,aAAO,oBAAC,eAAY,OAAM,WAAU,SAAS,aAAa;AAAA,IAC5D,OAAO;AACL,aAAO,eAAe,oBAAC,eAAY,OAAM,WAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,oBAAC,GAAG,KAAH,EAAO,WAAW,GAAG,sBAAsB,SAAS,GAAG,OAAO,KAC5D,mBACH;AAEJ;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAKvB,IAAM,gBAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,iCACG;AAAA,eAAW,oBAAC,cAAY,oBAAS,IAAgB;AAAA,IACjD;AAAA,IACA,YAAY,oBAAC,cAAY,qBAAU,IAAgB;AAAA,KACtD;AAEJ;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,aAAkC,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,MAAM;AAC5E,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,eAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAEb,IAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,WAAW,OAAO,CAAC,KAAK;AAE9B,QAAM,MAAM,YAAY,CAAC,SAA6B;AACpD,QAAI,KAAM,UAAS,UAAU,KAAK,YAAY;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,SAAS,UAAU,WAAW;AAE3C,SAAO,EAAE,KAAK,KAAK;AACrB;","names":[]}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Button
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-APFKGHQO.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
|
-
({
|
|
11
|
+
({ className, children, icon, ...rest }, ref) => {
|
|
12
12
|
return /* @__PURE__ */ jsx(
|
|
13
13
|
Button,
|
|
14
14
|
{
|
|
15
|
-
className: cx("ui-icon-button", className),
|
|
16
15
|
ref,
|
|
16
|
+
className: cx("ui-icon-button", className),
|
|
17
17
|
p: 0,
|
|
18
18
|
...rest,
|
|
19
19
|
children: icon || children
|
|
@@ -27,4 +27,4 @@ IconButton.__ui__ = "IconButton";
|
|
|
27
27
|
export {
|
|
28
28
|
IconButton
|
|
29
29
|
};
|
|
30
|
-
//# sourceMappingURL=chunk-
|
|
30
|
+
//# sourceMappingURL=chunk-HG2WVJIC.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/icon-button.tsx"],"sourcesContent":["import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n >,\n IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ className, children, icon, ...rest }, ref) => {\n return (\n <Button\n ref={ref}\n className={cx(\"ui-icon-button\", className)}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n"],"mappings":";;;;;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AA6Bb;AAHC,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,GAAG;AAAA,QACF,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","names":[]}
|
package/dist/icon-button.d.mts
CHANGED
|
@@ -9,7 +9,7 @@ interface IconButtonOptions {
|
|
|
9
9
|
*/
|
|
10
10
|
icon?: ReactElement;
|
|
11
11
|
}
|
|
12
|
-
interface IconButtonProps extends Omit<ButtonProps, "leftIcon" | "
|
|
12
|
+
interface IconButtonProps extends Omit<ButtonProps, "leftIcon" | "loadingIcon" | "loadingPlacement" | "loadingText" | "rightIcon">, IconButtonOptions {
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* `IconButton` is a component that displays an icon within a button.
|
package/dist/icon-button.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ interface IconButtonOptions {
|
|
|
9
9
|
*/
|
|
10
10
|
icon?: ReactElement;
|
|
11
11
|
}
|
|
12
|
-
interface IconButtonProps extends Omit<ButtonProps, "leftIcon" | "
|
|
12
|
+
interface IconButtonProps extends Omit<ButtonProps, "leftIcon" | "loadingIcon" | "loadingPlacement" | "loadingText" | "rightIcon">, IconButtonOptions {
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* `IconButton` is a component that displays an icon within a button.
|
package/dist/icon-button.js
CHANGED
|
@@ -41,21 +41,21 @@ var import_react = require("react");
|
|
|
41
41
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
42
|
var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)(
|
|
43
43
|
{
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
name: "ButtonGroupContext",
|
|
45
|
+
strict: false
|
|
46
46
|
}
|
|
47
47
|
);
|
|
48
48
|
var ButtonGroup = (0, import_core.forwardRef)(
|
|
49
49
|
({
|
|
50
50
|
className,
|
|
51
|
-
|
|
52
|
-
variant,
|
|
51
|
+
columnGap,
|
|
53
52
|
direction: flexDirection,
|
|
53
|
+
gap,
|
|
54
54
|
isAttached,
|
|
55
55
|
isDisabled,
|
|
56
|
-
gap,
|
|
57
|
-
columnGap,
|
|
58
56
|
rowGap,
|
|
57
|
+
size,
|
|
58
|
+
variant,
|
|
59
59
|
...rest
|
|
60
60
|
}, ref) => {
|
|
61
61
|
const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
|
|
@@ -64,19 +64,19 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
|
64
64
|
flexDirection
|
|
65
65
|
};
|
|
66
66
|
const context = (0, import_react.useMemo)(
|
|
67
|
-
() => ({ size, variant
|
|
67
|
+
() => ({ isDisabled, size, variant }),
|
|
68
68
|
[size, variant, isDisabled]
|
|
69
69
|
);
|
|
70
70
|
if (isAttached) {
|
|
71
71
|
Object.assign(css, {
|
|
72
72
|
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
|
|
73
|
-
"> *:not(:first-of-type):
|
|
74
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? {
|
|
73
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 },
|
|
74
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" }
|
|
75
75
|
});
|
|
76
76
|
} else {
|
|
77
77
|
Object.assign(css, {
|
|
78
|
-
gap,
|
|
79
78
|
columnGap,
|
|
79
|
+
gap,
|
|
80
80
|
rowGap
|
|
81
81
|
});
|
|
82
82
|
}
|
|
@@ -84,8 +84,8 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
|
84
84
|
import_core.ui.div,
|
|
85
85
|
{
|
|
86
86
|
ref,
|
|
87
|
-
role: "group",
|
|
88
87
|
className: (0, import_utils.cx)("ui-button-group", className),
|
|
88
|
+
role: "group",
|
|
89
89
|
"data-attached": (0, import_utils.dataAttr)(isAttached),
|
|
90
90
|
__css: css,
|
|
91
91
|
...rest
|
|
@@ -110,19 +110,19 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
110
110
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
|
111
111
|
);
|
|
112
112
|
const {
|
|
113
|
-
className,
|
|
114
113
|
as,
|
|
115
114
|
type,
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
className,
|
|
116
|
+
disableRipple,
|
|
118
117
|
isActive,
|
|
119
118
|
isDisabled = group == null ? void 0 : group.isDisabled,
|
|
119
|
+
isLoading,
|
|
120
|
+
isRounded,
|
|
120
121
|
leftIcon,
|
|
121
|
-
rightIcon,
|
|
122
122
|
loadingIcon,
|
|
123
|
-
loadingText,
|
|
124
123
|
loadingPlacement = "start",
|
|
125
|
-
|
|
124
|
+
loadingText,
|
|
125
|
+
rightIcon,
|
|
126
126
|
__css,
|
|
127
127
|
...rest
|
|
128
128
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
@@ -136,17 +136,17 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
136
136
|
var _a;
|
|
137
137
|
const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "fallback(yamcha, 1)" }) : {};
|
|
138
138
|
return {
|
|
139
|
-
display: "inline-flex",
|
|
140
139
|
alignItems: "center",
|
|
141
|
-
justifyContent: "center",
|
|
142
|
-
gap: "fallback(2, 0.5rem)",
|
|
143
140
|
appearance: "none",
|
|
144
|
-
|
|
141
|
+
display: "inline-flex",
|
|
142
|
+
gap: "fallback(2, 0.5rem)",
|
|
143
|
+
justifyContent: "center",
|
|
144
|
+
outline: "none",
|
|
145
|
+
overflow: "hidden",
|
|
145
146
|
position: "relative",
|
|
146
|
-
|
|
147
|
+
userSelect: "none",
|
|
147
148
|
verticalAlign: "middle",
|
|
148
|
-
|
|
149
|
-
outline: "none",
|
|
149
|
+
whiteSpace: "nowrap",
|
|
150
150
|
...styles,
|
|
151
151
|
...__css,
|
|
152
152
|
...!!group ? { _focus } : {},
|
|
@@ -154,9 +154,9 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
154
154
|
};
|
|
155
155
|
}, [styles, __css, group, isRounded]);
|
|
156
156
|
const contentProps = {
|
|
157
|
+
children,
|
|
157
158
|
leftIcon,
|
|
158
|
-
rightIcon
|
|
159
|
-
children
|
|
159
|
+
rightIcon
|
|
160
160
|
};
|
|
161
161
|
const loadingProps = {
|
|
162
162
|
loadingIcon,
|
|
@@ -167,8 +167,8 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
167
167
|
{
|
|
168
168
|
ref: (0, import_utils2.mergeRefs)(ref, buttonRef),
|
|
169
169
|
as,
|
|
170
|
-
className: (0, import_utils2.cx)("ui-button", className),
|
|
171
170
|
type: type != null ? type : defaultType,
|
|
171
|
+
className: (0, import_utils2.cx)("ui-button", className),
|
|
172
172
|
disabled: trulyDisabled,
|
|
173
173
|
"data-active": (0, import_utils2.dataAttr)(isActive),
|
|
174
174
|
"data-loading": (0, import_utils2.dataAttr)(isLoading),
|
|
@@ -206,11 +206,11 @@ var ButtonLoading = ({
|
|
|
206
206
|
}) => {
|
|
207
207
|
const css = (0, import_react2.useMemo)(
|
|
208
208
|
() => ({
|
|
209
|
-
display: "flex",
|
|
210
209
|
alignItems: "center",
|
|
211
|
-
|
|
210
|
+
display: "flex",
|
|
212
211
|
fontSize: "1em",
|
|
213
|
-
lineHeight: "normal"
|
|
212
|
+
lineHeight: "normal",
|
|
213
|
+
position: loadingText ? "relative" : "absolute"
|
|
214
214
|
}),
|
|
215
215
|
[loadingText]
|
|
216
216
|
);
|
|
@@ -226,9 +226,9 @@ var ButtonLoading = ({
|
|
|
226
226
|
ButtonLoading.displayName = "ButtonLoading";
|
|
227
227
|
ButtonLoading.__ui__ = "ButtonLoading";
|
|
228
228
|
var ButtonContent = ({
|
|
229
|
+
children,
|
|
229
230
|
leftIcon,
|
|
230
|
-
rightIcon
|
|
231
|
-
children
|
|
231
|
+
rightIcon
|
|
232
232
|
}) => {
|
|
233
233
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
234
234
|
leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: leftIcon }) : null,
|
|
@@ -238,13 +238,13 @@ var ButtonContent = ({
|
|
|
238
238
|
};
|
|
239
239
|
ButtonContent.displayName = "ButtonContent";
|
|
240
240
|
ButtonContent.__ui__ = "ButtonContent";
|
|
241
|
-
var ButtonIcon = ({
|
|
241
|
+
var ButtonIcon = ({ className, children, ...rest }) => {
|
|
242
242
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
243
243
|
import_core2.ui.span,
|
|
244
244
|
{
|
|
245
245
|
className: (0, import_utils2.cx)("ui-button__icon", className),
|
|
246
|
-
display: "inline-flex",
|
|
247
246
|
alignSelf: "center",
|
|
247
|
+
display: "inline-flex",
|
|
248
248
|
flexShrink: 0,
|
|
249
249
|
"aria-hidden": true,
|
|
250
250
|
...rest,
|
|
@@ -266,12 +266,12 @@ var useButtonType = (value) => {
|
|
|
266
266
|
// src/icon-button.tsx
|
|
267
267
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
268
268
|
var IconButton = (0, import_core3.forwardRef)(
|
|
269
|
-
({
|
|
269
|
+
({ className, children, icon, ...rest }, ref) => {
|
|
270
270
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
271
271
|
Button,
|
|
272
272
|
{
|
|
273
|
-
className: (0, import_utils3.cx)("ui-icon-button", className),
|
|
274
273
|
ref,
|
|
274
|
+
className: (0, import_utils3.cx)("ui-icon-button", className),
|
|
275
275
|
p: 0,
|
|
276
276
|
...rest,
|
|
277
277
|
children: icon || children
|
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\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"leftIcon\"\n | \"rightIcon\"\n | \"loadingIcon\"\n | \"loadingText\"\n | \"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\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n","import type { HTMLUIProps, ThemeProps, CSSUIObject, FC } 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, ReactElement } from \"react\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If true, 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 interface ButtonProps\n extends HTMLUIProps<\"button\">,\n ThemeProps<\"Button\">,\n ButtonOptions {}\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see Docs https://yamada-ui.com/components/forms/button\n */\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, __isProcessSkip, __styles, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\n \"Button\",\n {\n ...group,\n ...props,\n },\n { isProcessSkip: __isProcessSkip, styles: __styles },\n )\n const {\n 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\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"fallback(2, 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: \"fallback(full, 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 <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n 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\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n {children}\n {rightIcon ? <ButtonIcon>{rightIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ 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\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n 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\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n >,\n IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ className, children, icon, ...rest }, ref) => {\n return (\n <Button\n ref={ref}\n className={cx(\"ui-icon-button\", className)}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n}\n\nexport interface ButtonProps\n extends HTMLUIProps<\"button\">,\n ThemeProps<\"Button\">,\n ButtonOptions {}\n\n/**\n * `Button` is an interactive component that allows users to perform actions such as submitting forms and toggling modals.\n *\n * @see Docs https://yamada-ui.com/components/forms/button\n */\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, __isProcessSkip, __styles, ...props }, ref) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\n \"Button\",\n {\n ...group,\n ...props,\n },\n { isProcessSkip: __isProcessSkip, styles: __styles },\n )\n const {\n as,\n type,\n className,\n disableRipple,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n leftIcon,\n rightIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n disabled={trulyDisabled}\n data-active={dataAttr(isActive)}\n data-loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple isDisabled={disableRipple || trulyDisabled} {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"leftIcon\" | \"rightIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n leftIcon,\n rightIcon,\n}) => {\n return (\n <>\n {leftIcon ? <ButtonIcon>{leftIcon}</ButtonIcon> : null}\n {children}\n {rightIcon ? <ButtonIcon>{rightIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n aria-hidden\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n size,\n variant,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ isDisabled, size, variant }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n role=\"group\"\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
|
package/dist/icon-button.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
IconButton
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-HG2WVJIC.mjs";
|
|
5
|
+
import "./chunk-APFKGHQO.mjs";
|
|
6
|
+
import "./chunk-6OZRGJBX.mjs";
|
|
7
7
|
export {
|
|
8
8
|
IconButton
|
|
9
9
|
};
|