@yamada-ui/button 1.0.54-dev-20241214144625 → 1.0.54
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.js +13 -23
- package/dist/button.js.map +1 -1
- package/dist/button.mjs +1 -1
- package/dist/{chunk-45DNUHQS.mjs → chunk-AFVGPBIP.mjs} +14 -24
- package/dist/chunk-AFVGPBIP.mjs.map +1 -0
- package/dist/{chunk-JONRTXIL.mjs → chunk-QQERBTQW.mjs} +2 -2
- package/dist/icon-button.js +13 -23
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.mjs +2 -2
- package/dist/index.js +13 -23
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/package.json +6 -6
- package/dist/chunk-45DNUHQS.mjs.map +0 -1
- /package/dist/{chunk-JONRTXIL.mjs.map → chunk-QQERBTQW.mjs.map} +0 -0
package/dist/button.js
CHANGED
@@ -109,33 +109,29 @@ var Button = (0, import_core2.forwardRef)(
|
|
109
109
|
},
|
110
110
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
111
111
|
);
|
112
|
-
|
112
|
+
const {
|
113
113
|
as,
|
114
114
|
type,
|
115
115
|
className,
|
116
|
-
active,
|
117
|
-
disabled = group == null ? void 0 : group.disabled,
|
118
|
-
disableRipple,
|
119
|
-
endIcon,
|
120
|
-
fullRounded,
|
121
116
|
isActive,
|
117
|
+
active = isActive,
|
122
118
|
isDisabled = group == null ? void 0 : group.disabled,
|
123
|
-
|
119
|
+
disabled = isDisabled,
|
120
|
+
disableRipple,
|
121
|
+
rightIcon,
|
122
|
+
endIcon = rightIcon,
|
124
123
|
isRounded,
|
124
|
+
fullRounded = isRounded,
|
125
|
+
isLoading,
|
125
126
|
leftIcon,
|
126
|
-
loading,
|
127
|
+
loading = isLoading,
|
127
128
|
loadingIcon,
|
128
129
|
loadingPlacement = "start",
|
129
130
|
loadingText,
|
130
|
-
|
131
|
-
startIcon,
|
131
|
+
startIcon = leftIcon,
|
132
132
|
__css,
|
133
133
|
...rest
|
134
134
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
135
|
-
active != null ? active : active = isActive;
|
136
|
-
disabled != null ? disabled : disabled = isDisabled;
|
137
|
-
loading != null ? loading : loading = isLoading;
|
138
|
-
fullRounded != null ? fullRounded : fullRounded = isRounded;
|
139
135
|
const trulyDisabled = disabled || loading;
|
140
136
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
141
137
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
@@ -166,8 +162,6 @@ var Button = (0, import_core2.forwardRef)(
|
|
166
162
|
const contentProps = {
|
167
163
|
children,
|
168
164
|
endIcon,
|
169
|
-
leftIcon,
|
170
|
-
rightIcon,
|
171
165
|
startIcon
|
172
166
|
};
|
173
167
|
const loadingProps = {
|
@@ -240,12 +234,8 @@ ButtonLoading.__ui__ = "ButtonLoading";
|
|
240
234
|
var ButtonContent = ({
|
241
235
|
children,
|
242
236
|
endIcon,
|
243
|
-
leftIcon,
|
244
|
-
rightIcon,
|
245
237
|
startIcon
|
246
238
|
}) => {
|
247
|
-
startIcon != null ? startIcon : startIcon = leftIcon;
|
248
|
-
endIcon != null ? endIcon : endIcon = rightIcon;
|
249
239
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
250
240
|
startIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: startIcon }) : null,
|
251
241
|
children,
|
@@ -271,11 +261,11 @@ var ButtonIcon = ({ className, children, ...rest }) => {
|
|
271
261
|
ButtonIcon.displayName = "ButtonIcon";
|
272
262
|
ButtonIcon.__ui__ = "ButtonIcon";
|
273
263
|
var useButtonType = (value) => {
|
274
|
-
const
|
264
|
+
const buttonRef = (0, import_react2.useRef)(!value);
|
275
265
|
const ref = (0, import_react2.useCallback)((node) => {
|
276
|
-
if (node)
|
266
|
+
if (node) buttonRef.current = node.tagName === "BUTTON";
|
277
267
|
}, []);
|
278
|
-
const type =
|
268
|
+
const type = buttonRef.current ? "button" : void 0;
|
279
269
|
return { ref, type };
|
280
270
|
};
|
281
271
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/button.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 let {\n as,\n type,\n className,\n active,\n disabled = group?.disabled,\n disableRipple,\n endIcon,\n fullRounded,\n isActive,\n isDisabled = group?.disabled,\n isLoading,\n isRounded,\n leftIcon,\n loading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n active ??= isActive\n disabled ??= isDisabled\n loading ??= isLoading\n fullRounded ??= isRounded\n\n const trulyDisabled = disabled || loading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: 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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n\n const contentProps = {\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<\n ButtonProps,\n \"children\" | \"endIcon\" | \"leftIcon\" | \"rightIcon\" | \"startIcon\"\n > {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n}) => {\n startIcon ??= leftIcon\n endIcon ??= rightIcon\n\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
|
1
|
+
{"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 isActive,\n active = isActive,\n isDisabled = group?.disabled,\n disabled = isDisabled,\n disableRipple,\n rightIcon,\n endIcon = rightIcon,\n isRounded,\n fullRounded = isRounded,\n isLoading,\n leftIcon,\n loading = isLoading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n startIcon = leftIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n const trulyDisabled = disabled || loading\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || trulyDisabled,\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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n const contentProps = {\n children,\n endIcon,\n startIcon,\n }\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"endIcon\" | \"startIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n startIcon,\n}) => {\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const buttonRef = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) buttonRef.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = buttonRef.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
|
package/dist/button.mjs
CHANGED
@@ -26,33 +26,29 @@ var Button = forwardRef(
|
|
26
26
|
},
|
27
27
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
28
28
|
);
|
29
|
-
|
29
|
+
const {
|
30
30
|
as,
|
31
31
|
type,
|
32
32
|
className,
|
33
|
-
active,
|
34
|
-
disabled = group == null ? void 0 : group.disabled,
|
35
|
-
disableRipple,
|
36
|
-
endIcon,
|
37
|
-
fullRounded,
|
38
33
|
isActive,
|
34
|
+
active = isActive,
|
39
35
|
isDisabled = group == null ? void 0 : group.disabled,
|
40
|
-
|
36
|
+
disabled = isDisabled,
|
37
|
+
disableRipple,
|
38
|
+
rightIcon,
|
39
|
+
endIcon = rightIcon,
|
41
40
|
isRounded,
|
41
|
+
fullRounded = isRounded,
|
42
|
+
isLoading,
|
42
43
|
leftIcon,
|
43
|
-
loading,
|
44
|
+
loading = isLoading,
|
44
45
|
loadingIcon,
|
45
46
|
loadingPlacement = "start",
|
46
47
|
loadingText,
|
47
|
-
|
48
|
-
startIcon,
|
48
|
+
startIcon = leftIcon,
|
49
49
|
__css,
|
50
50
|
...rest
|
51
51
|
} = omitThemeProps(mergedProps);
|
52
|
-
active != null ? active : active = isActive;
|
53
|
-
disabled != null ? disabled : disabled = isDisabled;
|
54
|
-
loading != null ? loading : loading = isLoading;
|
55
|
-
fullRounded != null ? fullRounded : fullRounded = isRounded;
|
56
52
|
const trulyDisabled = disabled || loading;
|
57
53
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
58
54
|
const { onPointerDown, ...rippleProps } = useRipple({
|
@@ -83,8 +79,6 @@ var Button = forwardRef(
|
|
83
79
|
const contentProps = {
|
84
80
|
children,
|
85
81
|
endIcon,
|
86
|
-
leftIcon,
|
87
|
-
rightIcon,
|
88
82
|
startIcon
|
89
83
|
};
|
90
84
|
const loadingProps = {
|
@@ -157,12 +151,8 @@ ButtonLoading.__ui__ = "ButtonLoading";
|
|
157
151
|
var ButtonContent = ({
|
158
152
|
children,
|
159
153
|
endIcon,
|
160
|
-
leftIcon,
|
161
|
-
rightIcon,
|
162
154
|
startIcon
|
163
155
|
}) => {
|
164
|
-
startIcon != null ? startIcon : startIcon = leftIcon;
|
165
|
-
endIcon != null ? endIcon : endIcon = rightIcon;
|
166
156
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
167
157
|
startIcon ? /* @__PURE__ */ jsx(ButtonIcon, { children: startIcon }) : null,
|
168
158
|
children,
|
@@ -188,11 +178,11 @@ var ButtonIcon = ({ className, children, ...rest }) => {
|
|
188
178
|
ButtonIcon.displayName = "ButtonIcon";
|
189
179
|
ButtonIcon.__ui__ = "ButtonIcon";
|
190
180
|
var useButtonType = (value) => {
|
191
|
-
const
|
181
|
+
const buttonRef = useRef(!value);
|
192
182
|
const ref = useCallback((node) => {
|
193
|
-
if (node)
|
183
|
+
if (node) buttonRef.current = node.tagName === "BUTTON";
|
194
184
|
}, []);
|
195
|
-
const type =
|
185
|
+
const type = buttonRef.current ? "button" : void 0;
|
196
186
|
return { ref, type };
|
197
187
|
};
|
198
188
|
|
@@ -200,4 +190,4 @@ export {
|
|
200
190
|
Button,
|
201
191
|
useButtonType
|
202
192
|
};
|
203
|
-
//# sourceMappingURL=chunk-
|
193
|
+
//# sourceMappingURL=chunk-AFVGPBIP.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`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 isActive,\n active = isActive,\n isDisabled = group?.disabled,\n disabled = isDisabled,\n disableRipple,\n rightIcon,\n endIcon = rightIcon,\n isRounded,\n fullRounded = isRounded,\n isLoading,\n leftIcon,\n loading = isLoading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n startIcon = leftIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n const trulyDisabled = disabled || loading\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || trulyDisabled,\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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n const contentProps = {\n children,\n endIcon,\n startIcon,\n }\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"endIcon\" | \"startIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n startIcon,\n}) => {\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const buttonRef = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) buttonRef.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = buttonRef.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n"],"mappings":"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","names":[]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Button
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-AFVGPBIP.mjs";
|
5
5
|
|
6
6
|
// src/icon-button.tsx
|
7
7
|
import { forwardRef } from "@yamada-ui/core";
|
@@ -27,4 +27,4 @@ IconButton.__ui__ = "IconButton";
|
|
27
27
|
export {
|
28
28
|
IconButton
|
29
29
|
};
|
30
|
-
//# sourceMappingURL=chunk-
|
30
|
+
//# sourceMappingURL=chunk-QQERBTQW.mjs.map
|
package/dist/icon-button.js
CHANGED
@@ -112,33 +112,29 @@ var Button = (0, import_core2.forwardRef)(
|
|
112
112
|
},
|
113
113
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
114
114
|
);
|
115
|
-
|
115
|
+
const {
|
116
116
|
as,
|
117
117
|
type,
|
118
118
|
className,
|
119
|
-
active,
|
120
|
-
disabled = group == null ? void 0 : group.disabled,
|
121
|
-
disableRipple,
|
122
|
-
endIcon,
|
123
|
-
fullRounded,
|
124
119
|
isActive,
|
120
|
+
active = isActive,
|
125
121
|
isDisabled = group == null ? void 0 : group.disabled,
|
126
|
-
|
122
|
+
disabled = isDisabled,
|
123
|
+
disableRipple,
|
124
|
+
rightIcon,
|
125
|
+
endIcon = rightIcon,
|
127
126
|
isRounded,
|
127
|
+
fullRounded = isRounded,
|
128
|
+
isLoading,
|
128
129
|
leftIcon,
|
129
|
-
loading,
|
130
|
+
loading = isLoading,
|
130
131
|
loadingIcon,
|
131
132
|
loadingPlacement = "start",
|
132
133
|
loadingText,
|
133
|
-
|
134
|
-
startIcon,
|
134
|
+
startIcon = leftIcon,
|
135
135
|
__css,
|
136
136
|
...rest
|
137
137
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
138
|
-
active != null ? active : active = isActive;
|
139
|
-
disabled != null ? disabled : disabled = isDisabled;
|
140
|
-
loading != null ? loading : loading = isLoading;
|
141
|
-
fullRounded != null ? fullRounded : fullRounded = isRounded;
|
142
138
|
const trulyDisabled = disabled || loading;
|
143
139
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
144
140
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
@@ -169,8 +165,6 @@ var Button = (0, import_core2.forwardRef)(
|
|
169
165
|
const contentProps = {
|
170
166
|
children,
|
171
167
|
endIcon,
|
172
|
-
leftIcon,
|
173
|
-
rightIcon,
|
174
168
|
startIcon
|
175
169
|
};
|
176
170
|
const loadingProps = {
|
@@ -243,12 +237,8 @@ ButtonLoading.__ui__ = "ButtonLoading";
|
|
243
237
|
var ButtonContent = ({
|
244
238
|
children,
|
245
239
|
endIcon,
|
246
|
-
leftIcon,
|
247
|
-
rightIcon,
|
248
240
|
startIcon
|
249
241
|
}) => {
|
250
|
-
startIcon != null ? startIcon : startIcon = leftIcon;
|
251
|
-
endIcon != null ? endIcon : endIcon = rightIcon;
|
252
242
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
253
243
|
startIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: startIcon }) : null,
|
254
244
|
children,
|
@@ -274,11 +264,11 @@ var ButtonIcon = ({ className, children, ...rest }) => {
|
|
274
264
|
ButtonIcon.displayName = "ButtonIcon";
|
275
265
|
ButtonIcon.__ui__ = "ButtonIcon";
|
276
266
|
var useButtonType = (value) => {
|
277
|
-
const
|
267
|
+
const buttonRef = (0, import_react2.useRef)(!value);
|
278
268
|
const ref = (0, import_react2.useCallback)((node) => {
|
279
|
-
if (node)
|
269
|
+
if (node) buttonRef.current = node.tagName === "BUTTON";
|
280
270
|
}, []);
|
281
|
-
const type =
|
271
|
+
const type = buttonRef.current ? "button" : void 0;
|
282
272
|
return { ref, type };
|
283
273
|
};
|
284
274
|
|
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 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 | \"endIcon\"\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n | \"startIcon\"\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`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 let {\n as,\n type,\n className,\n active,\n disabled = group?.disabled,\n disableRipple,\n endIcon,\n fullRounded,\n isActive,\n isDisabled = group?.disabled,\n isLoading,\n isRounded,\n leftIcon,\n loading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n active ??= isActive\n disabled ??= isDisabled\n loading ??= isLoading\n fullRounded ??= isRounded\n\n const trulyDisabled = disabled || loading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: 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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n\n const contentProps = {\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<\n ButtonProps,\n \"children\" | \"endIcon\" | \"leftIcon\" | \"rightIcon\" | \"startIcon\"\n > {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n}) => {\n startIcon ??= leftIcon\n endIcon ??= rightIcon\n\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
|
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 | \"endIcon\"\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n | \"startIcon\"\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`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 isActive,\n active = isActive,\n isDisabled = group?.disabled,\n disabled = isDisabled,\n disableRipple,\n rightIcon,\n endIcon = rightIcon,\n isRounded,\n fullRounded = isRounded,\n isLoading,\n leftIcon,\n loading = isLoading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n startIcon = leftIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n const trulyDisabled = disabled || loading\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || trulyDisabled,\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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n const contentProps = {\n children,\n endIcon,\n startIcon,\n }\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"endIcon\" | \"startIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n startIcon,\n}) => {\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const buttonRef = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) buttonRef.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = buttonRef.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAmB;;;ACAnB,IAAAC,eAKO;AACP,qBAAuC;AACvC,oBAAkC;AAClC,IAAAC,gBAA+C;AAC/C,IAAAC,gBAA6C;;;ACN7C,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AA+GhB;AA/DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,SAAS;AAAA,MACjC,CAAC,MAAM,SAAS,QAAQ;AAAA,IAC1B;AAEA,QAAI,UAAU;AACZ,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,SACpC,EAAE,oBAAoB,EAAE,IACxB,EAAE,mBAAmB,GAAG,kBAAkB,MAAM;AAAA,QACpD,wCAAwC,SACpC,EAAE,iBAAiB,GAAG,gBAAgB,MAAM,IAC5C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,SAC1C,EAAE,cAAc,GAAG,gBAAgB,MAAM,IACzC,EAAE,cAAc,GAAG,kBAAkB,MAAM;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,QAAQ;AAAA,QAChC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;;;ADwEf,IAAAC,sBAAA;AA3EC,IAAM,aAAS;AAAA,EACpB,CAAC,EAAE,UAAU,iBAAiB,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1D,UAAM,QAAQ,eAAe;AAC7B,UAAM,CAAC,QAAQ,WAAW,QAAI;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,SAAS;AAAA,MACT,aAAa,+BAAO;AAAA,MACpB,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAe,WAAW;AAC9B,UAAM,gBAAgB,YAAY;AAClC,UAAM,EAAE,KAAK,WAAW,MAAM,YAAY,IAAI,cAAc,EAAE;AAC9D,UAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU;AAAA,MAClD,GAAG;AAAA,MACH,UAAU,iBAAiB;AAAA,IAC7B,CAAC;AACD,UAAM,UAAmB,uBAAQ,MAAM;AA1K3C;AA2KM,YAAM,SACJ,YAAY,aACR,sBAAM,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,cAAc,EAAE,cAAc,yBAAyB,IAAI,CAAC;AAAA,MAClE;AAAA,IACF,GAAG,CAAC,QAAQ,OAAO,OAAO,WAAW,CAAC;AACtC,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,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,MAAM,sBAAQ;AAAA,QACd,eAAW,kBAAG,aAAa,SAAS;AAAA,QACpC,mBAAa,wBAAS,MAAM;AAAA,QAC5B,oBAAc,wBAAS,OAAO;AAAA,QAC9B,UAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,qBAAW,qBAAqB,UAC/B;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN,IACE;AAAA,UAEH,UACC,eACE,6CAAC,gBAAG,MAAH,EAAQ,SAAS,GAChB,uDAAC,iBAAe,GAAG,cAAc,GACnC,IAGF,6CAAC,iBAAe,GAAG,cAAc;AAAA,UAGlC,WAAW,qBAAqB,QAC/B;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN,IACE;AAAA,UAEJ,6CAAC,wBAAQ,GAAG,aAAa;AAAA;AAAA;AAAA,IAC3B;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;AAKhB,IAAM,gBAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAM;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,cAAU,uBAAQ,MAAM;AAC5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,aAAO,6CAAC,eAAAC,SAAA,EAAY,SAAS,aAAa,OAAM,WAAU;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,cAAc,cAAc;AAC5B,cAAc,SAAS;AAKvB,IAAM,gBAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,8EACG;AAAA,gBAAY,6CAAC,cAAY,qBAAU,IAAgB;AAAA,IACnD;AAAA,IACA,UAAU,6CAAC,cAAY,mBAAQ,IAAgB;AAAA,KAClD;AAEJ;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIvB,IAAM,aAAkC,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,MAAM;AAC5E,SACE;AAAA,IAAC,gBAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,mBAAmB,SAAS;AAAA,MAC1C,eAAW;AAAA,MACX,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,YAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAEb,IAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,gBAAY,sBAAO,CAAC,KAAK;AAE/B,QAAM,UAAM,2BAAY,CAAC,SAA6B;AACpD,QAAI,KAAM,WAAU,UAAU,KAAK,YAAY;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,UAAU,UAAU,WAAW;AAE5C,SAAO,EAAE,KAAK,KAAK;AACrB;;;AD/SM,IAAAC,sBAAA;AAHC,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,kBAAkB,SAAS;AAAA,QACzC,GAAG;AAAA,QACF,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;","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
@@ -112,33 +112,29 @@ var Button = (0, import_core2.forwardRef)(
|
|
112
112
|
},
|
113
113
|
{ isProcessSkip: __isProcessSkip, styles: __styles }
|
114
114
|
);
|
115
|
-
|
115
|
+
const {
|
116
116
|
as,
|
117
117
|
type,
|
118
118
|
className,
|
119
|
-
active,
|
120
|
-
disabled = group == null ? void 0 : group.disabled,
|
121
|
-
disableRipple,
|
122
|
-
endIcon,
|
123
|
-
fullRounded,
|
124
119
|
isActive,
|
120
|
+
active = isActive,
|
125
121
|
isDisabled = group == null ? void 0 : group.disabled,
|
126
|
-
|
122
|
+
disabled = isDisabled,
|
123
|
+
disableRipple,
|
124
|
+
rightIcon,
|
125
|
+
endIcon = rightIcon,
|
127
126
|
isRounded,
|
127
|
+
fullRounded = isRounded,
|
128
|
+
isLoading,
|
128
129
|
leftIcon,
|
129
|
-
loading,
|
130
|
+
loading = isLoading,
|
130
131
|
loadingIcon,
|
131
132
|
loadingPlacement = "start",
|
132
133
|
loadingText,
|
133
|
-
|
134
|
-
startIcon,
|
134
|
+
startIcon = leftIcon,
|
135
135
|
__css,
|
136
136
|
...rest
|
137
137
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
138
|
-
active != null ? active : active = isActive;
|
139
|
-
disabled != null ? disabled : disabled = isDisabled;
|
140
|
-
loading != null ? loading : loading = isLoading;
|
141
|
-
fullRounded != null ? fullRounded : fullRounded = isRounded;
|
142
138
|
const trulyDisabled = disabled || loading;
|
143
139
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
144
140
|
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
|
@@ -169,8 +165,6 @@ var Button = (0, import_core2.forwardRef)(
|
|
169
165
|
const contentProps = {
|
170
166
|
children,
|
171
167
|
endIcon,
|
172
|
-
leftIcon,
|
173
|
-
rightIcon,
|
174
168
|
startIcon
|
175
169
|
};
|
176
170
|
const loadingProps = {
|
@@ -243,12 +237,8 @@ ButtonLoading.__ui__ = "ButtonLoading";
|
|
243
237
|
var ButtonContent = ({
|
244
238
|
children,
|
245
239
|
endIcon,
|
246
|
-
leftIcon,
|
247
|
-
rightIcon,
|
248
240
|
startIcon
|
249
241
|
}) => {
|
250
|
-
startIcon != null ? startIcon : startIcon = leftIcon;
|
251
|
-
endIcon != null ? endIcon : endIcon = rightIcon;
|
252
242
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
253
243
|
startIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonIcon, { children: startIcon }) : null,
|
254
244
|
children,
|
@@ -274,11 +264,11 @@ var ButtonIcon = ({ className, children, ...rest }) => {
|
|
274
264
|
ButtonIcon.displayName = "ButtonIcon";
|
275
265
|
ButtonIcon.__ui__ = "ButtonIcon";
|
276
266
|
var useButtonType = (value) => {
|
277
|
-
const
|
267
|
+
const buttonRef = (0, import_react2.useRef)(!value);
|
278
268
|
const ref = (0, import_react2.useCallback)((node) => {
|
279
|
-
if (node)
|
269
|
+
if (node) buttonRef.current = node.tagName === "BUTTON";
|
280
270
|
}, []);
|
281
|
-
const type =
|
271
|
+
const type = buttonRef.current ? "button" : void 0;
|
282
272
|
return { ref, type };
|
283
273
|
};
|
284
274
|
|
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 { 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`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 let {\n as,\n type,\n className,\n active,\n disabled = group?.disabled,\n disableRipple,\n endIcon,\n fullRounded,\n isActive,\n isDisabled = group?.disabled,\n isLoading,\n isRounded,\n leftIcon,\n loading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n active ??= isActive\n disabled ??= isDisabled\n loading ??= isLoading\n fullRounded ??= isRounded\n\n const trulyDisabled = disabled || loading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: 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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n\n const contentProps = {\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<\n ButtonProps,\n \"children\" | \"endIcon\" | \"leftIcon\" | \"rightIcon\" | \"startIcon\"\n > {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n}) => {\n startIcon ??= leftIcon\n endIcon ??= rightIcon\n\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n","import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"endIcon\"\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n | \"startIcon\"\n >,\n IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ className, children, icon, ...rest }, ref) => {\n return (\n <Button\n ref={ref}\n className={cx(\"ui-icon-button\", className)}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/button.tsx","../src/button-group.tsx","../src/icon-button.tsx"],"sourcesContent":["export { Button } from \"./button\"\nexport type { ButtonProps } from \"./button\"\nexport { ButtonGroup } from \"./button-group\"\nexport type { ButtonGroupProps } from \"./button-group\"\nexport { IconButton } from \"./icon-button\"\nexport type { IconButtonProps } from \"./icon-button\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 isActive,\n active = isActive,\n isDisabled = group?.disabled,\n disabled = isDisabled,\n disableRipple,\n rightIcon,\n endIcon = rightIcon,\n isRounded,\n fullRounded = isRounded,\n isLoading,\n leftIcon,\n loading = isLoading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n startIcon = leftIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n const trulyDisabled = disabled || loading\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: disableRipple || trulyDisabled,\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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n const contentProps = {\n children,\n endIcon,\n startIcon,\n }\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<ButtonProps, \"children\" | \"endIcon\" | \"startIcon\"> {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n startIcon,\n}) => {\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const buttonRef = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) buttonRef.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = buttonRef.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type {\n CSSUIObject,\n CSSUIProps,\n HTMLUIProps,\n ThemeProps,\n} 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 * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n attached?: boolean\n /**\n * The CSS `flex-direction` property.\n *\n * @deprecated Use `flexDirection` instead.\n */\n direction?: CSSUIProps[\"flexDirection\"]\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n disabled?: boolean\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 * @deprecated Use `attached` instead.\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\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 disabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n isAttached,\n attached = isAttached,\n columnGap,\n direction,\n isDisabled,\n disabled = isDisabled,\n flexDirection = direction,\n gap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const column =\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, disabled }),\n [size, variant, disabled],\n )\n\n if (attached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": column\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": column\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": column\n ? { borderRadius: 0, borderTopWidth: \"0px\" }\n : { borderRadius: 0, borderRightWidth: \"0px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(attached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n","import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"endIcon\"\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n | \"startIcon\"\n >,\n IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ className, children, icon, ...rest }, ref) => {\n return (\n <Button\n ref={ref}\n className={cx(\"ui-icon-button\", className)}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/button",
|
3
|
-
"version": "1.0.54
|
3
|
+
"version": "1.0.54",
|
4
4
|
"description": "Yamada UI button components",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -38,15 +38,15 @@
|
|
38
38
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
39
39
|
},
|
40
40
|
"dependencies": {
|
41
|
-
"@yamada-ui/core": "1.16.2
|
42
|
-
"@yamada-ui/loading": "1.1.28
|
43
|
-
"@yamada-ui/ripple": "1.0.48
|
44
|
-
"@yamada-ui/utils": "1.6.2
|
41
|
+
"@yamada-ui/core": "1.16.2",
|
42
|
+
"@yamada-ui/loading": "1.1.28",
|
43
|
+
"@yamada-ui/ripple": "1.0.48",
|
44
|
+
"@yamada-ui/utils": "1.6.2"
|
45
45
|
},
|
46
46
|
"devDependencies": {
|
47
47
|
"clean-package": "2.2.0",
|
48
48
|
"react": "^18.3.1",
|
49
|
-
"@yamada-ui/icon": "1.1.17
|
49
|
+
"@yamada-ui/icon": "1.1.17"
|
50
50
|
},
|
51
51
|
"peerDependencies": {
|
52
52
|
"react": ">=18"
|
@@ -1 +0,0 @@
|
|
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`, the button is represented as active.\n *\n * @default false\n */\n active?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n /**\n * The icon to display at the end side of the button.\n */\n endIcon?: ReactElement\n /**\n * If `true`, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n fullRounded?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n *\n * @deprecated Use `active` instead.\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\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 * @deprecated Use `fullRounded` instead.\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n loading?: boolean\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 * @deprecated Use `endIcon` instead.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display at the start side of the button.\n */\n startIcon?: 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 let {\n as,\n type,\n className,\n active,\n disabled = group?.disabled,\n disableRipple,\n endIcon,\n fullRounded,\n isActive,\n isDisabled = group?.disabled,\n isLoading,\n isRounded,\n leftIcon,\n loading,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n active ??= isActive\n disabled ??= isDisabled\n loading ??= isLoading\n fullRounded ??= isRounded\n\n const trulyDisabled = disabled || loading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n disabled: 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 ...(fullRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, fullRounded])\n\n const contentProps = {\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={mergeRefs(ref, buttonRef)}\n as={as}\n type={type ?? defaultType}\n className={cx(\"ui-button\", className)}\n data-active={dataAttr(active)}\n data-loading={dataAttr(loading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {loading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {loading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {loading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...rippleProps} />\n </ui.button>\n )\n },\n)\n\nButton.displayName = \"Button\"\nButton.__ui__ = \"Button\"\n\ninterface ButtonLoadingProps\n extends Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\"> {}\n\nconst ButtonLoading: FC<ButtonLoadingProps> = ({\n className,\n loadingIcon,\n loadingText,\n}) => {\n const css = useMemo(\n (): CSSUIObject => ({\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n position: loadingText ? \"relative\" : \"absolute\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon variant={loadingIcon} color=\"current\" />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nButtonLoading.displayName = \"ButtonLoading\"\nButtonLoading.__ui__ = \"ButtonLoading\"\n\ninterface ButtonContentProps\n extends Pick<\n ButtonProps,\n \"children\" | \"endIcon\" | \"leftIcon\" | \"rightIcon\" | \"startIcon\"\n > {}\n\nconst ButtonContent: FC<ButtonContentProps> = ({\n children,\n endIcon,\n leftIcon,\n rightIcon,\n startIcon,\n}) => {\n startIcon ??= leftIcon\n endIcon ??= rightIcon\n\n return (\n <>\n {startIcon ? <ButtonIcon>{startIcon}</ButtonIcon> : null}\n {children}\n {endIcon ? <ButtonIcon>{endIcon}</ButtonIcon> : null}\n </>\n )\n}\n\nButtonContent.displayName = \"ButtonContent\"\nButtonContent.__ui__ = \"ButtonContent\"\n\ninterface ButtonIconProps extends HTMLUIProps<\"span\"> {}\n\nconst ButtonIcon: FC<ButtonIconProps> = ({ className, children, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n aria-hidden\n alignSelf=\"center\"\n display=\"inline-flex\"\n flexShrink={0}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nButtonIcon.displayName = \"ButtonIcon\"\nButtonIcon.__ui__ = \"ButtonIcon\"\n\nexport const useButtonType = (value?: ElementType) => {\n const isButton = useRef(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) isButton.current = node.tagName === \"BUTTON\"\n }, [])\n\n const type = isButton.current ? \"button\" : undefined\n\n return { ref, type } as const\n}\n"],"mappings":"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","names":[]}
|
File without changes
|