@yamada-ui/button 1.0.54-dev-20241214144625 → 1.0.54-dev-20241215203956

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 CHANGED
@@ -109,33 +109,29 @@ var Button = (0, import_core2.forwardRef)(
109
109
  },
110
110
  { isProcessSkip: __isProcessSkip, styles: __styles }
111
111
  );
112
- let {
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
- isLoading,
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
- rightIcon,
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 isButton = (0, import_react2.useRef)(!value);
264
+ const buttonRef = (0, import_react2.useRef)(!value);
275
265
  const ref = (0, import_react2.useCallback)((node) => {
276
- if (node) isButton.current = node.tagName === "BUTTON";
266
+ if (node) buttonRef.current = node.tagName === "BUTTON";
277
267
  }, []);
278
- const type = isButton.current ? "button" : void 0;
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:
@@ -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
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Button,
4
4
  useButtonType
5
- } from "./chunk-45DNUHQS.mjs";
5
+ } from "./chunk-AFVGPBIP.mjs";
6
6
  import "./chunk-4MUEZBMA.mjs";
7
7
  export {
8
8
  Button,
@@ -26,33 +26,29 @@ var Button = forwardRef(
26
26
  },
27
27
  { isProcessSkip: __isProcessSkip, styles: __styles }
28
28
  );
29
- let {
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
- isLoading,
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
- rightIcon,
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 isButton = useRef(!value);
181
+ const buttonRef = useRef(!value);
192
182
  const ref = useCallback((node) => {
193
- if (node) isButton.current = node.tagName === "BUTTON";
183
+ if (node) buttonRef.current = node.tagName === "BUTTON";
194
184
  }, []);
195
- const type = isButton.current ? "button" : void 0;
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-45DNUHQS.mjs.map
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-45DNUHQS.mjs";
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-JONRTXIL.mjs.map
30
+ //# sourceMappingURL=chunk-QQERBTQW.mjs.map
@@ -112,33 +112,29 @@ var Button = (0, import_core2.forwardRef)(
112
112
  },
113
113
  { isProcessSkip: __isProcessSkip, styles: __styles }
114
114
  );
115
- let {
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
- isLoading,
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
- rightIcon,
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 isButton = (0, import_react2.useRef)(!value);
267
+ const buttonRef = (0, import_react2.useRef)(!value);
278
268
  const ref = (0, import_react2.useCallback)((node) => {
279
- if (node) isButton.current = node.tagName === "BUTTON";
269
+ if (node) buttonRef.current = node.tagName === "BUTTON";
280
270
  }, []);
281
- const type = isButton.current ? "button" : void 0;
271
+ const type = buttonRef.current ? "button" : void 0;
282
272
  return { ref, type };
283
273
  };
284
274
 
@@ -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":"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","names":["import_core","import_utils","import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_jsx_runtime"]}
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-JONRTXIL.mjs";
5
- import "./chunk-45DNUHQS.mjs";
4
+ } from "./chunk-QQERBTQW.mjs";
5
+ import "./chunk-AFVGPBIP.mjs";
6
6
  import "./chunk-4MUEZBMA.mjs";
7
7
  export {
8
8
  IconButton
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
- let {
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
- isLoading,
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
- rightIcon,
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 isButton = (0, import_react2.useRef)(!value);
267
+ const buttonRef = (0, import_react2.useRef)(!value);
278
268
  const ref = (0, import_react2.useCallback)((node) => {
279
- if (node) isButton.current = node.tagName === "BUTTON";
269
+ if (node) buttonRef.current = node.tagName === "BUTTON";
280
270
  }, []);
281
- const type = isButton.current ? "button" : void 0;
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
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-JONRTXIL.mjs";
4
+ } from "./chunk-QQERBTQW.mjs";
5
5
  import {
6
6
  Button
7
- } from "./chunk-45DNUHQS.mjs";
7
+ } from "./chunk-AFVGPBIP.mjs";
8
8
  import {
9
9
  ButtonGroup
10
10
  } from "./chunk-4MUEZBMA.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/button",
3
- "version": "1.0.54-dev-20241214144625",
3
+ "version": "1.0.54-dev-20241215203956",
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-dev-20241214144625",
42
- "@yamada-ui/loading": "1.1.28-dev-20241214144625",
43
- "@yamada-ui/ripple": "1.0.48-dev-20241214144625",
44
- "@yamada-ui/utils": "1.6.2-dev-20241214144625"
41
+ "@yamada-ui/core": "1.16.2-dev-20241215203956",
42
+ "@yamada-ui/loading": "1.1.28-dev-20241215203956",
43
+ "@yamada-ui/ripple": "1.0.48-dev-20241215203956",
44
+ "@yamada-ui/utils": "1.6.2-dev-20241215203956"
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-dev-20241214144625"
49
+ "@yamada-ui/icon": "1.1.17-dev-20241215203956"
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":[]}