@yamada-ui/button 1.0.52-dev-20241126142819 → 1.0.52-dev-20241127001630
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/button-group.js +3 -3
- package/dist/button-group.js.map +1 -1
- package/dist/button-group.mjs +1 -1
- package/dist/button.js +3 -3
- package/dist/button.js.map +1 -1
- package/dist/button.mjs +2 -2
- package/dist/{chunk-L2TDLHUB.mjs → chunk-DVVJD5OH.mjs} +2 -2
- package/dist/{chunk-I3FAJDDX.mjs → chunk-Q5KYT2KN.mjs} +4 -4
- package/dist/chunk-Q5KYT2KN.mjs.map +1 -0
- package/dist/{chunk-O7L6NNFD.mjs → chunk-UASPVNB6.mjs} +2 -2
- package/dist/icon-button.js +3 -3
- package/dist/icon-button.js.map +1 -1
- package/dist/icon-button.mjs +3 -3
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/package.json +2 -2
- package/dist/chunk-I3FAJDDX.mjs.map +0 -1
- /package/dist/{chunk-L2TDLHUB.mjs.map → chunk-DVVJD5OH.mjs.map} +0 -0
- /package/dist/{chunk-O7L6NNFD.mjs.map → chunk-UASPVNB6.mjs.map} +0 -0
package/dist/button-group.js
CHANGED
@@ -59,9 +59,9 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
59
59
|
);
|
60
60
|
if (isAttached) {
|
61
61
|
Object.assign(css, {
|
62
|
-
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0
|
63
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0,
|
64
|
-
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0,
|
62
|
+
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
|
63
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
|
64
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
|
65
65
|
});
|
66
66
|
} else {
|
67
67
|
Object.assign(css, {
|
package/dist/button-group.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0
|
1
|
+
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\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(isAttached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,EAAE,IACxB,EAAE,mBAAmB,GAAG,kBAAkB,MAAM;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,gBAAgB,MAAM,IAC5C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,gBAAgB,MAAM,IACzC,EAAE,cAAc,GAAG,kBAAkB,MAAM;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,UAAU;AAAA,QAClC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
|
package/dist/button-group.mjs
CHANGED
package/dist/button.js
CHANGED
@@ -66,9 +66,9 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
66
66
|
);
|
67
67
|
if (isAttached) {
|
68
68
|
Object.assign(css, {
|
69
|
-
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0
|
70
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0,
|
71
|
-
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0,
|
69
|
+
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
|
70
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
|
71
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
|
72
72
|
});
|
73
73
|
} else {
|
74
74
|
Object.assign(css, {
|
package/dist/button.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\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`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\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(isAttached)}\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
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useButtonGroup
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-Q5KYT2KN.mjs";
|
5
5
|
|
6
6
|
// src/button.tsx
|
7
7
|
import {
|
@@ -192,4 +192,4 @@ export {
|
|
192
192
|
Button,
|
193
193
|
useButtonType
|
194
194
|
};
|
195
|
-
//# sourceMappingURL=chunk-
|
195
|
+
//# sourceMappingURL=chunk-DVVJD5OH.mjs.map
|
@@ -35,9 +35,9 @@ var ButtonGroup = forwardRef(
|
|
35
35
|
);
|
36
36
|
if (isAttached) {
|
37
37
|
Object.assign(css, {
|
38
|
-
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0
|
39
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0,
|
40
|
-
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0,
|
38
|
+
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
|
39
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
|
40
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
|
41
41
|
});
|
42
42
|
} else {
|
43
43
|
Object.assign(css, {
|
@@ -66,4 +66,4 @@ export {
|
|
66
66
|
useButtonGroup,
|
67
67
|
ButtonGroup
|
68
68
|
};
|
69
|
-
//# sourceMappingURL=chunk-
|
69
|
+
//# sourceMappingURL=chunk-Q5KYT2KN.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\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(isAttached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,eAAe,IAAI,gBAAgB;AAC5C,SAAS,eAAe;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,UAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,EAAE,IACxB,EAAE,mBAAmB,GAAG,kBAAkB,MAAM;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,gBAAgB,MAAM,IAC5C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,gBAAgB,MAAM,IACzC,EAAE,cAAc,GAAG,kBAAkB,MAAM;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,iBAAe,SAAS,UAAU;AAAA,QAClC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Button
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-DVVJD5OH.mjs";
|
5
5
|
|
6
6
|
// src/icon-button.tsx
|
7
7
|
import { forwardRef } from "@yamada-ui/core";
|
@@ -27,4 +27,4 @@ IconButton.__ui__ = "IconButton";
|
|
27
27
|
export {
|
28
28
|
IconButton
|
29
29
|
};
|
30
|
-
//# sourceMappingURL=chunk-
|
30
|
+
//# sourceMappingURL=chunk-UASPVNB6.mjs.map
|
package/dist/icon-button.js
CHANGED
@@ -69,9 +69,9 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
69
69
|
);
|
70
70
|
if (isAttached) {
|
71
71
|
Object.assign(css, {
|
72
|
-
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0
|
73
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0,
|
74
|
-
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0,
|
72
|
+
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
|
73
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
|
74
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
|
75
75
|
});
|
76
76
|
} else {
|
77
77
|
Object.assign(css, {
|
package/dist/icon-button.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { Button } from \"./button\"\n\ninterface IconButtonOptions {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n}\n\nexport interface IconButtonProps\n extends Omit<\n ButtonProps,\n | \"endIcon\"\n | \"leftIcon\"\n | \"loadingIcon\"\n | \"loadingPlacement\"\n | \"loadingText\"\n | \"rightIcon\"\n | \"startIcon\"\n >,\n IconButtonOptions {}\n\n/**\n * `IconButton` is a component that displays an icon within a button.\n *\n * @see Docs https://yamada-ui.com/components/forms/icon-button\n */\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ className, children, icon, ...rest }, ref) => {\n return (\n <Button\n ref={ref}\n className={cx(\"ui-icon-button\", className)}\n p={0}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\nIconButton.__ui__ = \"IconButton\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { ElementType, ReactElement } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, dataAttr, merge, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ninterface ButtonOptions {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\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`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\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(isAttached)}\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"]}
|
package/dist/icon-button.mjs
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
IconButton
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
4
|
+
} from "./chunk-UASPVNB6.mjs";
|
5
|
+
import "./chunk-DVVJD5OH.mjs";
|
6
|
+
import "./chunk-Q5KYT2KN.mjs";
|
7
7
|
export {
|
8
8
|
IconButton
|
9
9
|
};
|
package/dist/index.js
CHANGED
@@ -69,9 +69,9 @@ var ButtonGroup = (0, import_core.forwardRef)(
|
|
69
69
|
);
|
70
70
|
if (isAttached) {
|
71
71
|
Object.assign(css, {
|
72
|
-
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0
|
73
|
-
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0,
|
74
|
-
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0,
|
72
|
+
"> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0 } : { borderRightRadius: 0, borderRightWidth: "0px" },
|
73
|
+
"> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, borderTopWidth: "0px" } : { borderLeftRadius: 0 },
|
74
|
+
"> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, borderTopWidth: "0px" } : { borderRadius: 0, borderRightWidth: "0px" }
|
75
75
|
});
|
76
76
|
} else {
|
77
77
|
Object.assign(css, {
|
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`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\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`, 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 represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If true, the button is full rounded. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n /**\n * The icon to display at the left side of the button.\n *\n * @deprecated Use `startIcon` instead.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: LoadingProps[\"variant\"] | ReactElement\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"end\" | \"start\"\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The icon to display at the right side of the button.\n *\n * @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 disableRipple,\n endIcon,\n isActive,\n isDisabled = group?.isDisabled,\n isLoading,\n isRounded,\n leftIcon,\n loadingIcon,\n loadingPlacement = \"start\",\n loadingText,\n rightIcon,\n startIcon,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const trulyDisabled = isDisabled || isLoading\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const { onPointerDown, ...rippleProps } = useRipple({\n ...rest,\n isDisabled: disableRipple || trulyDisabled,\n })\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"fallback(yamcha, 1)\" })\n : {}\n\n return {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: \"fallback(2, 0.5rem)\",\n justifyContent: \"center\",\n outline: \"none\",\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n verticalAlign: \"middle\",\n whiteSpace: \"nowrap\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n ...(isRounded ? { borderRadius: \"fallback(full, 9999px)\" } : {}),\n }\n }, [styles, __css, group, isRounded])\n\n const contentProps = {\n children,\n 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(isActive)}\n data-loading={dataAttr(isLoading)}\n disabled={trulyDisabled}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <ButtonLoading\n className=\"ui-button__loading--start\"\n {...loadingProps}\n />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <ButtonContent {...contentProps} />\n </ui.span>\n )\n ) : (\n <ButtonContent {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <ButtonLoading\n className=\"ui-button__loading--end\"\n {...loadingProps}\n />\n ) : null}\n\n <Ripple {...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 { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0 }\n : { borderRightRadius: 0, borderRightWidth: \"0px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, borderTopWidth: \"0px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\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(isAttached)}\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,13 +1,13 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
IconButton
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-UASPVNB6.mjs";
|
5
5
|
import {
|
6
6
|
Button
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-DVVJD5OH.mjs";
|
8
8
|
import {
|
9
9
|
ButtonGroup
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-Q5KYT2KN.mjs";
|
11
11
|
export {
|
12
12
|
Button,
|
13
13
|
ButtonGroup,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/button",
|
3
|
-
"version": "1.0.52-dev-
|
3
|
+
"version": "1.0.52-dev-20241127001630",
|
4
4
|
"description": "Yamada UI button components",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -40,7 +40,7 @@
|
|
40
40
|
"dependencies": {
|
41
41
|
"@yamada-ui/core": "1.15.6",
|
42
42
|
"@yamada-ui/loading": "1.1.25",
|
43
|
-
"@yamada-ui/ripple": "1.0.46-dev-
|
43
|
+
"@yamada-ui/ripple": "1.0.46-dev-20241127001630",
|
44
44
|
"@yamada-ui/utils": "1.5.4"
|
45
45
|
},
|
46
46
|
"devDependencies": {
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ninterface ButtonGroupOptions {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport interface ButtonGroupProps\n extends Omit<HTMLUIProps, \"direction\">,\n ThemeProps<\"Button\">,\n ButtonGroupOptions {}\n\ninterface ButtonGroupContext extends ThemeProps<\"Button\"> {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n name: \"ButtonGroupContext\",\n strict: false,\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n columnGap,\n direction: flexDirection,\n gap,\n isAttached,\n isDisabled,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n })\n } else {\n Object.assign(css, {\n columnGap,\n gap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n role=\"group\"\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n\nButtonGroup.displayName = \"ButtonGroup\"\nButtonGroup.__ui__ = \"ButtonGroup\"\n"],"mappings":";;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,eAAe,IAAI,gBAAgB;AAC5C,SAAS,eAAe;AA0FhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,UAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,QAC1B,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,MACjD,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,iBAAe,SAAS,UAAU;AAAA,QAClC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":[]}
|
File without changes
|
File without changes
|