@yamada-ui/button 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button-group.js +1 -0
- package/dist/button-group.js.map +1 -0
- package/dist/button-group.mjs +2 -1
- package/dist/button-group.mjs.map +1 -0
- package/dist/button.js +3 -2
- package/dist/button.js.map +1 -0
- package/dist/button.mjs +3 -2
- package/dist/button.mjs.map +1 -0
- package/dist/{chunk-PRLQOIIO.mjs → chunk-FUC6D3LV.mjs} +1 -0
- package/dist/chunk-FUC6D3LV.mjs.map +1 -0
- package/dist/{chunk-HS3OELMU.mjs → chunk-T7QJ7KIL.mjs} +2 -1
- package/dist/chunk-T7QJ7KIL.mjs.map +1 -0
- package/dist/{chunk-57COV3NK.mjs → chunk-VUUT2MRD.mjs} +4 -3
- package/dist/chunk-VUUT2MRD.mjs.map +1 -0
- package/dist/icon-button.js +3 -2
- package/dist/icon-button.js.map +1 -0
- package/dist/icon-button.mjs +4 -3
- package/dist/icon-button.mjs.map +1 -0
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +4 -3
- package/dist/index.mjs.map +1 -0
- package/package.json +7 -6
package/dist/button-group.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype ButtonGroupOptions = {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport type ButtonGroupProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AAyFhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,QAC/C,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,MAC5B,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/button-group.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/button.js
CHANGED
|
@@ -118,7 +118,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
118
118
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
119
119
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
|
120
120
|
const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
|
|
121
|
-
const {
|
|
121
|
+
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)(rest);
|
|
122
122
|
const css = (0, import_react2.useMemo)(() => {
|
|
123
123
|
var _a;
|
|
124
124
|
const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
|
|
@@ -160,7 +160,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
160
160
|
data__loading: (0, import_utils2.dataAttr)(isLoading),
|
|
161
161
|
__css: css,
|
|
162
162
|
...rest,
|
|
163
|
-
|
|
163
|
+
onPointerDown,
|
|
164
164
|
children: [
|
|
165
165
|
isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
|
|
166
166
|
isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
|
|
@@ -236,3 +236,4 @@ var useButtonType = (value) => {
|
|
|
236
236
|
Button,
|
|
237
237
|
useButtonType
|
|
238
238
|
});
|
|
239
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, useMergeRefs, merge, dataAttr } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype ButtonOptions = {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = HTMLUIProps<\"button\"> &\n ThemeProps<\"Button\"> &\n ButtonOptions\n\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, ...props }, customRef) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const ref = useMergeRefs(customRef, buttonRef)\n const { onPointerDown, ...rippleProps } = useRipple(rest)\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"yamcha\" })\n : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"2\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={ref}\n as={as}\n className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\n disabled={isDisabled || isLoading}\n data-active={dataAttr(isActive)}\n data__loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple\n isDisabled={disableRipple || isDisabled || isLoading}\n {...rippleProps}\n />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nexport const useButtonType = (value?: ElementType) => {\n const [isButton, setIsButton] = useState(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) setIsButton(node.tagName === \"BUTTON\")\n }, [])\n\n const type = isButton ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype ButtonGroupOptions = {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport type ButtonGroupProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon"]}
|
package/dist/button.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype ButtonGroupOptions = {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport type ButtonGroupProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":";;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,eAAe,IAAI,gBAAgB;AAC5C,SAAS,eAAe;AAyFhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,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,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,QAC/C,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,MAC5B,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,oBAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,iBAAe,SAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Button
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-VUUT2MRD.mjs";
|
|
5
5
|
|
|
6
6
|
// src/icon-button.tsx
|
|
7
7
|
import { forwardRef } from "@yamada-ui/core";
|
|
@@ -26,3 +26,4 @@ var IconButton = forwardRef(
|
|
|
26
26
|
export {
|
|
27
27
|
IconButton
|
|
28
28
|
};
|
|
29
|
+
//# sourceMappingURL=chunk-T7QJ7KIL.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/icon-button.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\n> &\n IconButtonOptions\n\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AA2Bb;AAHC,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,MAAM,WAAW,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC;AAAA,QACA,GAAG;AAAA,QACF,GAAI,YAAY,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,QACvC,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
useButtonGroup
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-FUC6D3LV.mjs";
|
|
5
5
|
|
|
6
6
|
// src/button.tsx
|
|
7
7
|
import {
|
|
@@ -40,7 +40,7 @@ var Button = forwardRef(
|
|
|
40
40
|
} = omitThemeProps(mergedProps);
|
|
41
41
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
|
42
42
|
const ref = useMergeRefs(customRef, buttonRef);
|
|
43
|
-
const {
|
|
43
|
+
const { onPointerDown, ...rippleProps } = useRipple(rest);
|
|
44
44
|
const css = useMemo(() => {
|
|
45
45
|
var _a;
|
|
46
46
|
const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
|
|
@@ -82,7 +82,7 @@ var Button = forwardRef(
|
|
|
82
82
|
data__loading: dataAttr(isLoading),
|
|
83
83
|
__css: css,
|
|
84
84
|
...rest,
|
|
85
|
-
|
|
85
|
+
onPointerDown,
|
|
86
86
|
children: [
|
|
87
87
|
isLoading && loadingPlacement === "start" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
|
|
88
88
|
isLoading ? loadingText || /* @__PURE__ */ jsx(ui.span, { opacity: 0, children: /* @__PURE__ */ jsx(Content, { ...contentProps }) }) : /* @__PURE__ */ jsx(Content, { ...contentProps }),
|
|
@@ -158,3 +158,4 @@ export {
|
|
|
158
158
|
Button,
|
|
159
159
|
useButtonType
|
|
160
160
|
};
|
|
161
|
+
//# sourceMappingURL=chunk-VUUT2MRD.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, useMergeRefs, merge, dataAttr } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype ButtonOptions = {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = HTMLUIProps<\"button\"> &\n ThemeProps<\"Button\"> &\n ButtonOptions\n\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, ...props }, customRef) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const ref = useMergeRefs(customRef, buttonRef)\n const { onPointerDown, ...rippleProps } = useRipple(rest)\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"yamcha\" })\n : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"2\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={ref}\n as={as}\n className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\n disabled={isDisabled || isLoading}\n data-active={dataAttr(isActive)}\n data__loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple\n isDisabled={disableRipple || isDisabled || isLoading}\n {...rippleProps}\n />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nexport const useButtonType = (value?: ElementType) => {\n const [isButton, setIsButton] = useState(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) setIsButton(node.tagName === \"BUTTON\")\n }, [])\n\n const type = isButton ? \"button\" : undefined\n\n return { ref, type } as const\n}\n"],"mappings":"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","names":[]}
|
package/dist/icon-button.js
CHANGED
|
@@ -121,7 +121,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
121
121
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
122
122
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
|
123
123
|
const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
|
|
124
|
-
const {
|
|
124
|
+
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)(rest);
|
|
125
125
|
const css = (0, import_react2.useMemo)(() => {
|
|
126
126
|
var _a;
|
|
127
127
|
const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
|
|
@@ -163,7 +163,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
163
163
|
data__loading: (0, import_utils2.dataAttr)(isLoading),
|
|
164
164
|
__css: css,
|
|
165
165
|
...rest,
|
|
166
|
-
|
|
166
|
+
onPointerDown,
|
|
167
167
|
children: [
|
|
168
168
|
isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
|
|
169
169
|
isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
|
|
@@ -256,3 +256,4 @@ var IconButton = (0, import_core3.forwardRef)(
|
|
|
256
256
|
0 && (module.exports = {
|
|
257
257
|
IconButton
|
|
258
258
|
});
|
|
259
|
+
//# sourceMappingURL=icon-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/icon-button.tsx","../src/button.tsx","../src/button-group.tsx"],"sourcesContent":["import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\n> &\n IconButtonOptions\n\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n","import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, useMergeRefs, merge, dataAttr } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype ButtonOptions = {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = HTMLUIProps<\"button\"> &\n ThemeProps<\"Button\"> &\n ButtonOptions\n\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, ...props }, customRef) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const ref = useMergeRefs(customRef, buttonRef)\n const { onPointerDown, ...rippleProps } = useRipple(rest)\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"yamcha\" })\n : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"2\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={ref}\n as={as}\n className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\n disabled={isDisabled || isLoading}\n data-active={dataAttr(isActive)}\n data__loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple\n isDisabled={disableRipple || isDisabled || isLoading}\n {...rippleProps}\n />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nexport const useButtonType = (value?: ElementType) => {\n const [isButton, setIsButton] = useState(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) setIsButton(node.tagName === \"BUTTON\")\n }, [])\n\n const type = isButton ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype ButtonGroupOptions = {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport type ButtonGroupProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,eAA2B;AAC3B,IAAAC,gBAAmB;;;ACAnB,IAAAC,eAKO;AAEP,qBAAuC;AACvC,oBAAkC;AAClC,IAAAC,gBAAkD;AAElD,IAAAC,gBAA+C;;;ACX/C,kBAA+B;AAC/B,mBAA4C;AAC5C,mBAAwB;AAyFhB;AA5DR,IAAM,CAAC,qBAAqB,cAAc,QAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,kBAAkB,YAAY,kBAAkB;AAElD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,IACF;AAEA,UAAM,cAA8B;AAAA,MAClC,OAAO,EAAE,MAAM,SAAS,WAAW;AAAA,MACnC,CAAC,MAAM,SAAS,UAAU;AAAA,IAC5B;AAEA,QAAI,YAAY;AACd,aAAO,OAAO,KAAK;AAAA,QACjB,wCAAwC,WACpC,EAAE,oBAAoB,GAAG,gBAAgB,OAAO,IAChD,EAAE,mBAAmB,GAAG,iBAAiB,OAAO;AAAA,QACpD,8CAA8C,WAC1C,EAAE,cAAc,GAAG,kBAAkB,OAAO,IAC5C,EAAE,cAAc,GAAG,iBAAiB,OAAO;AAAA,QAC/C,wCAAwC,WACpC,EAAE,iBAAiB,GAAG,kBAAkB,OAAO,IAC/C,EAAE,kBAAkB,EAAE;AAAA,MAC5B,CAAC;AAAA,IACH,OAAO;AACL,aAAO,OAAO,KAAK;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE,4CAAC,uBAAoB,OAAO,SAC1B;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,qBAAe,uBAAS,UAAU;AAAA,QAClC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;;;ADmCM,IAAAC,sBAAA;AAhEC,IAAM,aAAS;AAAA,EACpB,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,cAAc;AACrC,UAAM,QAAQ,eAAe;AAC7B,UAAM,CAAC,QAAQ,WAAW,QAAI,gCAAkB,UAAU;AAAA,MACxD,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa,+BAAO;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6BAAe,WAAW;AAE9B,UAAM,EAAE,KAAK,WAAW,MAAM,YAAY,IAAI,cAAc,EAAE;AAC9D,UAAM,UAAM,4BAAa,WAAW,SAAS;AAC7C,UAAM,EAAE,eAAe,GAAG,YAAY,QAAI,yBAAU,IAAI;AAExD,UAAM,UAAmB,uBAAQ,MAAM;AAtG3C;AAuGM,YAAM,SACJ,YAAY,aACR,sBAAM,YAAO,WAAP,YAAiB,CAAC,GAAG,EAAE,QAAQ,SAAS,CAAC,IAC/C,CAAC;AAEP,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,UAAU;AAAA,QACV,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,CAAC,CAAC,QAAQ,EAAE,OAAO,IAAI,CAAC;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,QAAQ,OAAO,KAAK,CAAC;AAEzB,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAW,kBAAG,aAAa,SAAS;AAAA,QACpC,MAAM,sBAAQ;AAAA,QACd,UAAU,cAAc;AAAA,QACxB,mBAAa,wBAAS,QAAQ;AAAA,QAC9B,mBAAe,wBAAS,SAAS;AAAA,QACjC,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,uBAAa,qBAAqB,UACjC,6CAAC,WAAQ,WAAU,6BAA6B,GAAG,cAAc,IAC/D;AAAA,UAEH,YACC,eACE,6CAAC,gBAAG,MAAH,EAAQ,SAAS,GAChB,uDAAC,WAAS,GAAG,cAAc,GAC7B,IAGF,6CAAC,WAAS,GAAG,cAAc;AAAA,UAG5B,aAAa,qBAAqB,QACjC,6CAAC,WAAQ,WAAU,2BAA2B,GAAG,cAAc,IAC7D;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAY,iBAAiB,cAAc;AAAA,cAC1C,GAAG;AAAA;AAAA,UACN;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAM,UAEF,CAAC,EAAE,WAAW,aAAa,YAAY,MAAM;AAC/C,QAAM,UAAM;AAAA,IACV,OAAoB;AAAA,MAClB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU,cAAc,aAAa;AAAA,MACrC,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,cAAU,uBAAQ,MAAM;AAC5B,QAAI,OAAO,gBAAgB,UAAU;AACnC,aAAO,6CAAC,eAAAC,SAAA,EAAY,OAAM,WAAU,SAAS,aAAa;AAAA,IAC5D,OAAO;AACL,aAAO,eAAe,6CAAC,eAAAA,SAAA,EAAY,OAAM,WAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,6CAAC,gBAAG,KAAH,EAAO,eAAW,kBAAG,sBAAsB,SAAS,GAAG,OAAO,KAC5D,mBACH;AAEJ;AAEA,IAAM,UAAwE,CAAC;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,8EACG;AAAA,eAAW,6CAAC,QAAM,oBAAS,IAAU;AAAA,IACrC;AAAA,IACA,YAAY,6CAAC,QAAM,qBAAU,IAAU;AAAA,KAC1C;AAEJ;AAEA,IAAM,OAAgC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAM;AAC1E,SACE;AAAA,IAAC,gBAAG;AAAA,IAAH;AAAA,MACC,eAAW,kBAAG,mBAAmB,SAAS;AAAA,MAC1C,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,gBAAgB,CAAC,UAAwB;AACpD,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,CAAC,KAAK;AAE/C,QAAM,UAAM,2BAAY,CAAC,SAA6B;AACpD,QAAI;AAAM,kBAAY,KAAK,YAAY,QAAQ;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,WAAW,WAAW;AAEnC,SAAO,EAAE,KAAK,KAAK;AACrB;;;ADzNM,IAAAC,sBAAA;AAHC,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,MAAM,WAAW,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,kBAAG,kBAAkB,SAAS;AAAA,QACzC;AAAA,QACA,GAAG;AAAA,QACF,GAAI,YAAY,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,QACvC,GAAG;AAAA,QAEH,kBAAQ;AAAA;AAAA,IACX;AAAA,EAEJ;AACF;","names":["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,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
IconButton
|
|
4
|
-
} from "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
4
|
+
} from "./chunk-T7QJ7KIL.mjs";
|
|
5
|
+
import "./chunk-VUUT2MRD.mjs";
|
|
6
|
+
import "./chunk-FUC6D3LV.mjs";
|
|
7
7
|
export {
|
|
8
8
|
IconButton
|
|
9
9
|
};
|
|
10
|
+
//# sourceMappingURL=icon-button.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -121,7 +121,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
121
121
|
} = (0, import_core2.omitThemeProps)(mergedProps);
|
|
122
122
|
const { ref: buttonRef, type: defaultType } = useButtonType(as);
|
|
123
123
|
const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
|
|
124
|
-
const {
|
|
124
|
+
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)(rest);
|
|
125
125
|
const css = (0, import_react2.useMemo)(() => {
|
|
126
126
|
var _a;
|
|
127
127
|
const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
|
|
@@ -163,7 +163,7 @@ var Button = (0, import_core2.forwardRef)(
|
|
|
163
163
|
data__loading: (0, import_utils2.dataAttr)(isLoading),
|
|
164
164
|
__css: css,
|
|
165
165
|
...rest,
|
|
166
|
-
|
|
166
|
+
onPointerDown,
|
|
167
167
|
children: [
|
|
168
168
|
isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
|
|
169
169
|
isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
|
|
@@ -260,3 +260,4 @@ var IconButton = (0, import_core3.forwardRef)(
|
|
|
260
260
|
ButtonGroup,
|
|
261
261
|
IconButton
|
|
262
262
|
});
|
|
263
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/button.tsx","../src/button-group.tsx","../src/icon-button.tsx"],"sourcesContent":["export { Button } from \"./button\"\nexport type { ButtonProps } from \"./button\"\nexport { ButtonGroup } from \"./button-group\"\nexport type { ButtonGroupProps } from \"./button-group\"\nexport { IconButton } from \"./icon-button\"\nexport type { IconButtonProps } from \"./icon-button\"\n","import type { HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading as LoadingIcon } from \"@yamada-ui/loading\"\nimport { Ripple, useRipple } from \"@yamada-ui/ripple\"\nimport { cx, useMergeRefs, merge, dataAttr } from \"@yamada-ui/utils\"\nimport type { ElementType, FC, ReactElement } from \"react\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useButtonGroup } from \"./button-group\"\n\ntype ButtonOptions = {\n /**\n * The type of button. Accepts `button`, `reset`, or `submit`.\n *\n * @default 'button'\n */\n type?: \"button\" | \"reset\" | \"submit\"\n /**\n * If `true`, the loading state of the button is represented.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * If `true`, the button is represented as active.\n *\n * @default false\n */\n isActive?: boolean\n /**\n * If `true`, the button is disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * The icon to display at the left side of the button.\n */\n leftIcon?: ReactElement\n /**\n * The icon to display at the right side of the button.\n */\n rightIcon?: ReactElement\n /**\n * The icon to display when the button is loading.\n */\n loadingIcon?: ReactElement | LoadingProps[\"variant\"]\n /**\n * The text to display when the button is loading.\n */\n loadingText?: string\n /**\n * The placement of the loading indicator. Accepts `start` or `end`.\n *\n * @default 'start'\n */\n loadingPlacement?: \"start\" | \"end\"\n /**\n * If `true`, disable ripple effects when pressing a element.\n *\n * @default false\n */\n disableRipple?: boolean\n}\n\nexport type ButtonProps = HTMLUIProps<\"button\"> &\n ThemeProps<\"Button\"> &\n ButtonOptions\n\nexport const Button = forwardRef<ButtonProps, \"button\">(\n ({ children, ...props }, customRef) => {\n const group = useButtonGroup()\n const [styles, mergedProps] = useComponentStyle(\"Button\", {\n ...group,\n ...props,\n })\n const {\n className,\n as,\n type,\n isLoading,\n isActive,\n isDisabled = group?.isDisabled,\n leftIcon,\n rightIcon,\n loadingIcon,\n loadingText,\n loadingPlacement = \"start\",\n disableRipple,\n __css,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { ref: buttonRef, type: defaultType } = useButtonType(as)\n const ref = useMergeRefs(customRef, buttonRef)\n const { onPointerDown, ...rippleProps } = useRipple(rest)\n\n const css: CSSUIObject = useMemo(() => {\n const _focus =\n \"_focus\" in styles\n ? merge(styles._focus ?? {}, { zIndex: \"yamcha\" })\n : {}\n\n return {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"2\",\n appearance: \"none\",\n userSelect: \"none\",\n position: \"relative\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"middle\",\n overflow: \"hidden\",\n outline: \"none\",\n ...styles,\n ...__css,\n ...(!!group ? { _focus } : {}),\n }\n }, [styles, __css, group])\n\n const contentProps = {\n leftIcon,\n rightIcon,\n children,\n }\n\n const loadingProps = {\n loadingIcon,\n loadingText,\n }\n\n return (\n <ui.button\n ref={ref}\n as={as}\n className={cx(\"ui-button\", className)}\n type={type ?? defaultType}\n disabled={isDisabled || isLoading}\n data-active={dataAttr(isActive)}\n data__loading={dataAttr(isLoading)}\n __css={css}\n {...rest}\n onPointerDown={onPointerDown}\n >\n {isLoading && loadingPlacement === \"start\" ? (\n <Loading className=\"ui-button__loading--start\" {...loadingProps} />\n ) : null}\n\n {isLoading ? (\n loadingText || (\n <ui.span opacity={0}>\n <Content {...contentProps} />\n </ui.span>\n )\n ) : (\n <Content {...contentProps} />\n )}\n\n {isLoading && loadingPlacement === \"end\" ? (\n <Loading className=\"ui-button__loading--end\" {...loadingProps} />\n ) : null}\n\n <Ripple\n isDisabled={disableRipple || isDisabled || isLoading}\n {...rippleProps}\n />\n </ui.button>\n )\n },\n)\n\nconst Loading: FC<\n Pick<ButtonProps, \"className\" | \"loadingIcon\" | \"loadingText\">\n> = ({ className, loadingIcon, loadingText }) => {\n const css = useMemo(\n (): CSSUIObject => ({\n display: \"flex\",\n alignItems: \"center\",\n position: loadingText ? \"relative\" : \"absolute\",\n fontSize: \"1em\",\n lineHeight: \"normal\",\n }),\n [loadingText],\n )\n\n const element = useMemo(() => {\n if (typeof loadingIcon === \"string\") {\n return <LoadingIcon color=\"current\" variant={loadingIcon} />\n } else {\n return loadingIcon || <LoadingIcon color=\"current\" />\n }\n }, [loadingIcon])\n\n return (\n <ui.div className={cx(\"ui-button__loading\", className)} __css={css}>\n {element}\n </ui.div>\n )\n}\n\nconst Content: FC<Pick<ButtonProps, \"leftIcon\" | \"rightIcon\" | \"children\">> = ({\n leftIcon,\n rightIcon,\n children,\n}) => {\n return (\n <>\n {leftIcon ? <Icon>{leftIcon}</Icon> : null}\n {children}\n {rightIcon ? <Icon>{rightIcon}</Icon> : null}\n </>\n )\n}\n\nconst Icon: FC<HTMLUIProps<\"span\">> = ({ children, className, ...rest }) => {\n return (\n <ui.span\n className={cx(\"ui-button__icon\", className)}\n display=\"inline-flex\"\n alignSelf=\"center\"\n flexShrink={0}\n aria-hidden={true}\n {...rest}\n >\n {children}\n </ui.span>\n )\n}\n\nexport const useButtonType = (value?: ElementType) => {\n const [isButton, setIsButton] = useState(!value)\n\n const ref = useCallback((node: HTMLElement | null) => {\n if (node) setIsButton(node.tagName === \"BUTTON\")\n }, [])\n\n const type = isButton ? \"button\" : undefined\n\n return { ref, type } as const\n}\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { createContext, cx, dataAttr } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\ntype ButtonGroupOptions = {\n /**\n * The CSS `flex-direction` property.\n */\n direction?: CSSUIObject[\"flexDirection\"]\n /**\n * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.\n *\n * @default false\n */\n isAttached?: boolean\n /**\n * If `true`, all wrapped button will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n}\n\nexport type ButtonGroupProps = HTMLUIProps<\"div\"> &\n ThemeProps<\"Button\"> &\n ButtonGroupOptions\n\ntype ButtonGroupContext = ThemeProps<\"Button\"> & {\n isDisabled?: boolean\n}\n\nconst [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(\n {\n strict: false,\n name: \"ButtonGroupContext\",\n },\n)\n\nexport { useButtonGroup }\n\nexport const ButtonGroup = forwardRef<ButtonGroupProps, \"div\">(\n (\n {\n className,\n size,\n variant,\n direction: flexDirection,\n isAttached,\n isDisabled,\n gap,\n columnGap,\n rowGap,\n ...rest\n },\n ref,\n ) => {\n const isColumn =\n flexDirection === \"column\" || flexDirection === \"column-reverse\"\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n flexDirection,\n }\n\n const context: ButtonGroupContext = useMemo(\n () => ({ size, variant, isDisabled }),\n [size, variant, isDisabled],\n )\n\n if (isAttached) {\n Object.assign(css, {\n \"> *:first-of-type:not(:last-of-type)\": isColumn\n ? { borderBottomRadius: 0, marginBlockEnd: \"-1px\" }\n : { borderRightRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):not(:last-of-type)\": isColumn\n ? { borderRadius: 0, marginBlockStart: \"-1px\" }\n : { borderRadius: 0, marginInlineEnd: \"-1px\" },\n \"> *:not(:first-of-type):last-of-type\": isColumn\n ? { borderTopRadius: 0, marginBlockStart: \"-1px\" }\n : { borderLeftRadius: 0 },\n })\n } else {\n Object.assign(css, {\n gap,\n columnGap,\n rowGap,\n })\n }\n\n return (\n <ButtonGroupProvider value={context}>\n <ui.div\n ref={ref}\n role=\"group\"\n className={cx(\"ui-button-group\", className)}\n data-attached={dataAttr(isAttached)}\n __css={css}\n {...rest}\n />\n </ButtonGroupProvider>\n )\n },\n)\n","import { forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport type { ButtonProps } from \"./button\"\nimport { Button } from \"./button\"\n\ntype IconButtonOptions = {\n /**\n * The icon to be used in the button.\n */\n icon?: ReactElement\n /**\n * If `true`, the button will be perfectly round. Else, it'll be slightly round.\n *\n * @default false\n */\n isRounded?: boolean\n}\n\nexport type IconButtonProps = Omit<\n ButtonProps,\n \"leftIcon\" | \"rightIcon\" | \"loadingIcon\" | \"loadingText\" | \"loadingPlacement\"\n> &\n IconButtonOptions\n\nexport const IconButton = forwardRef<IconButtonProps, \"button\">(\n ({ icon, isRounded, children, className, ...rest }, ref) => {\n return (\n <Button\n className={cx(\"ui-icon-button\", className)}\n ref={ref}\n p={0}\n {...(isRounded ? { rounded: \"full\" } : {})}\n {...rest}\n >\n {icon || children}\n </Button>\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime","LoadingIcon","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
IconButton
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-T7QJ7KIL.mjs";
|
|
5
5
|
import {
|
|
6
6
|
Button
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-VUUT2MRD.mjs";
|
|
8
8
|
import {
|
|
9
9
|
ButtonGroup
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-FUC6D3LV.mjs";
|
|
11
11
|
export {
|
|
12
12
|
Button,
|
|
13
13
|
ButtonGroup,
|
|
14
14
|
IconButton
|
|
15
15
|
};
|
|
16
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/button",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Yamada UI button components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@yamada-ui/core": "0.14.
|
|
41
|
-
"@yamada-ui/utils": "0.
|
|
42
|
-
"@yamada-ui/loading": "0.5.
|
|
43
|
-
"@yamada-ui/ripple": "0.1.
|
|
40
|
+
"@yamada-ui/core": "0.14.2",
|
|
41
|
+
"@yamada-ui/utils": "0.5.0",
|
|
42
|
+
"@yamada-ui/loading": "0.5.12",
|
|
43
|
+
"@yamada-ui/ripple": "0.1.4"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"react": "^18.0.0",
|
|
@@ -59,7 +59,8 @@
|
|
|
59
59
|
],
|
|
60
60
|
"banner": {
|
|
61
61
|
"js": "\"use client\""
|
|
62
|
-
}
|
|
62
|
+
},
|
|
63
|
+
"sourcemap": true
|
|
63
64
|
},
|
|
64
65
|
"module": "dist/index.mjs",
|
|
65
66
|
"types": "dist/index.d.ts",
|