@yamada-ui/button 0.3.21 → 0.4.0

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.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/dist/button.d.mts +6 -0
  3. package/dist/button.d.ts +6 -0
  4. package/dist/button.js +13 -1
  5. package/dist/button.mjs +1 -1
  6. package/dist/{chunk-R76PUVPU.mjs → chunk-57COV3NK.mjs} +13 -1
  7. package/dist/{chunk-FXSKVU6O.mjs → chunk-HS3OELMU.mjs} +1 -1
  8. package/dist/icon-button.js +13 -1
  9. package/dist/icon-button.mjs +2 -2
  10. package/dist/index.js +13 -1
  11. package/dist/index.mjs +2 -2
  12. package/package.json +5 -4
package/README.md CHANGED
@@ -22,7 +22,7 @@ $ npm install @yamada-ui/button
22
22
 
23
23
  Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
24
24
 
25
- ## Licence
25
+ ## License
26
26
 
27
27
  This package is licensed under the terms of the
28
28
  [MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).
package/dist/button.d.mts CHANGED
@@ -50,6 +50,12 @@ type ButtonOptions = {
50
50
  * @default 'start'
51
51
  */
52
52
  loadingPlacement?: "start" | "end";
53
+ /**
54
+ * If `true`, disable ripple effects when pressing a element.
55
+ *
56
+ * @default false
57
+ */
58
+ disableRipple?: boolean;
53
59
  };
54
60
  type ButtonProps = HTMLUIProps<"button"> & ThemeProps<"Button"> & ButtonOptions;
55
61
  declare const Button: _yamada_ui_core.Component<"button", ButtonProps>;
package/dist/button.d.ts CHANGED
@@ -50,6 +50,12 @@ type ButtonOptions = {
50
50
  * @default 'start'
51
51
  */
52
52
  loadingPlacement?: "start" | "end";
53
+ /**
54
+ * If `true`, disable ripple effects when pressing a element.
55
+ *
56
+ * @default false
57
+ */
58
+ disableRipple?: boolean;
53
59
  };
54
60
  type ButtonProps = HTMLUIProps<"button"> & ThemeProps<"Button"> & ButtonOptions;
55
61
  declare const Button: _yamada_ui_core.Component<"button", ButtonProps>;
package/dist/button.js CHANGED
@@ -27,6 +27,7 @@ __export(button_exports, {
27
27
  module.exports = __toCommonJS(button_exports);
28
28
  var import_core2 = require("@yamada-ui/core");
29
29
  var import_loading = require("@yamada-ui/loading");
30
+ var import_ripple = require("@yamada-ui/ripple");
30
31
  var import_utils2 = require("@yamada-ui/utils");
31
32
  var import_react2 = require("react");
32
33
 
@@ -111,11 +112,13 @@ var Button = (0, import_core2.forwardRef)(
111
112
  loadingIcon,
112
113
  loadingText,
113
114
  loadingPlacement = "start",
115
+ disableRipple,
114
116
  __css,
115
117
  ...rest
116
118
  } = (0, import_core2.omitThemeProps)(mergedProps);
117
119
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
118
120
  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
121
+ const { onClick, ...rippleProps } = (0, import_ripple.useRipple)(rest);
119
122
  const css = (0, import_react2.useMemo)(() => {
120
123
  var _a;
121
124
  const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
@@ -129,6 +132,7 @@ var Button = (0, import_core2.forwardRef)(
129
132
  position: "relative",
130
133
  whiteSpace: "nowrap",
131
134
  verticalAlign: "middle",
135
+ overflow: "hidden",
132
136
  outline: "none",
133
137
  ...styles,
134
138
  ...__css,
@@ -156,10 +160,18 @@ var Button = (0, import_core2.forwardRef)(
156
160
  data__loading: (0, import_utils2.dataAttr)(isLoading),
157
161
  __css: css,
158
162
  ...rest,
163
+ onClick,
159
164
  children: [
160
165
  isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
161
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 }),
162
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null
167
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null,
168
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
169
+ import_ripple.Ripple,
170
+ {
171
+ isDisabled: disableRipple || isDisabled || isLoading,
172
+ ...rippleProps
173
+ }
174
+ )
163
175
  ]
164
176
  }
165
177
  );
package/dist/button.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Button,
4
4
  useButtonType
5
- } from "./chunk-R76PUVPU.mjs";
5
+ } from "./chunk-57COV3NK.mjs";
6
6
  import "./chunk-PRLQOIIO.mjs";
7
7
  export {
8
8
  Button,
package/dist/{chunk-R76PUVPU.mjs → chunk-57COV3NK.mjs} RENAMED
@@ -11,6 +11,7 @@ import {
11
11
  omitThemeProps
12
12
  } from "@yamada-ui/core";
13
13
  import { Loading as LoadingIcon } from "@yamada-ui/loading";
14
+ import { Ripple, useRipple } from "@yamada-ui/ripple";
14
15
  import { cx, useMergeRefs, merge, dataAttr } from "@yamada-ui/utils";
15
16
  import { useCallback, useMemo, useState } from "react";
16
17
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -33,11 +34,13 @@ var Button = forwardRef(
33
34
  loadingIcon,
34
35
  loadingText,
35
36
  loadingPlacement = "start",
37
+ disableRipple,
36
38
  __css,
37
39
  ...rest
38
40
  } = omitThemeProps(mergedProps);
39
41
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
40
42
  const ref = useMergeRefs(customRef, buttonRef);
43
+ const { onClick, ...rippleProps } = useRipple(rest);
41
44
  const css = useMemo(() => {
42
45
  var _a;
43
46
  const _focus = "_focus" in styles ? merge((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
@@ -51,6 +54,7 @@ var Button = forwardRef(
51
54
  position: "relative",
52
55
  whiteSpace: "nowrap",
53
56
  verticalAlign: "middle",
57
+ overflow: "hidden",
54
58
  outline: "none",
55
59
  ...styles,
56
60
  ...__css,
@@ -78,10 +82,18 @@ var Button = forwardRef(
78
82
  data__loading: dataAttr(isLoading),
79
83
  __css: css,
80
84
  ...rest,
85
+ onClick,
81
86
  children: [
82
87
  isLoading && loadingPlacement === "start" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
83
88
  isLoading ? loadingText || /* @__PURE__ */ jsx(ui.span, { opacity: 0, children: /* @__PURE__ */ jsx(Content, { ...contentProps }) }) : /* @__PURE__ */ jsx(Content, { ...contentProps }),
84
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null
89
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ jsx(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null,
90
+ /* @__PURE__ */ jsx(
91
+ Ripple,
92
+ {
93
+ isDisabled: disableRipple || isDisabled || isLoading,
94
+ ...rippleProps
95
+ }
96
+ )
85
97
  ]
86
98
  }
87
99
  );
package/dist/{chunk-FXSKVU6O.mjs → chunk-HS3OELMU.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Button
4
- } from "./chunk-R76PUVPU.mjs";
4
+ } from "./chunk-57COV3NK.mjs";
5
5
 
6
6
  // src/icon-button.tsx
7
7
  import { forwardRef } from "@yamada-ui/core";
package/dist/icon-button.js CHANGED
@@ -30,6 +30,7 @@ var import_utils3 = require("@yamada-ui/utils");
30
30
  // src/button.tsx
31
31
  var import_core2 = require("@yamada-ui/core");
32
32
  var import_loading = require("@yamada-ui/loading");
33
+ var import_ripple = require("@yamada-ui/ripple");
33
34
  var import_utils2 = require("@yamada-ui/utils");
34
35
  var import_react2 = require("react");
35
36
 
@@ -114,11 +115,13 @@ var Button = (0, import_core2.forwardRef)(
114
115
  loadingIcon,
115
116
  loadingText,
116
117
  loadingPlacement = "start",
118
+ disableRipple,
117
119
  __css,
118
120
  ...rest
119
121
  } = (0, import_core2.omitThemeProps)(mergedProps);
120
122
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
121
123
  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
124
+ const { onClick, ...rippleProps } = (0, import_ripple.useRipple)(rest);
122
125
  const css = (0, import_react2.useMemo)(() => {
123
126
  var _a;
124
127
  const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
@@ -132,6 +135,7 @@ var Button = (0, import_core2.forwardRef)(
132
135
  position: "relative",
133
136
  whiteSpace: "nowrap",
134
137
  verticalAlign: "middle",
138
+ overflow: "hidden",
135
139
  outline: "none",
136
140
  ...styles,
137
141
  ...__css,
@@ -159,10 +163,18 @@ var Button = (0, import_core2.forwardRef)(
159
163
  data__loading: (0, import_utils2.dataAttr)(isLoading),
160
164
  __css: css,
161
165
  ...rest,
166
+ onClick,
162
167
  children: [
163
168
  isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
164
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 }),
165
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null
170
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null,
171
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
172
+ import_ripple.Ripple,
173
+ {
174
+ isDisabled: disableRipple || isDisabled || isLoading,
175
+ ...rippleProps
176
+ }
177
+ )
166
178
  ]
167
179
  }
168
180
  );
package/dist/icon-button.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-FXSKVU6O.mjs";
5
- import "./chunk-R76PUVPU.mjs";
4
+ } from "./chunk-HS3OELMU.mjs";
5
+ import "./chunk-57COV3NK.mjs";
6
6
  import "./chunk-PRLQOIIO.mjs";
7
7
  export {
8
8
  IconButton
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ module.exports = __toCommonJS(src_exports);
30
30
  // src/button.tsx
31
31
  var import_core2 = require("@yamada-ui/core");
32
32
  var import_loading = require("@yamada-ui/loading");
33
+ var import_ripple = require("@yamada-ui/ripple");
33
34
  var import_utils2 = require("@yamada-ui/utils");
34
35
  var import_react2 = require("react");
35
36
 
@@ -114,11 +115,13 @@ var Button = (0, import_core2.forwardRef)(
114
115
  loadingIcon,
115
116
  loadingText,
116
117
  loadingPlacement = "start",
118
+ disableRipple,
117
119
  __css,
118
120
  ...rest
119
121
  } = (0, import_core2.omitThemeProps)(mergedProps);
120
122
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
121
123
  const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
124
+ const { onClick, ...rippleProps } = (0, import_ripple.useRipple)(rest);
122
125
  const css = (0, import_react2.useMemo)(() => {
123
126
  var _a;
124
127
  const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: "yamcha" }) : {};
@@ -132,6 +135,7 @@ var Button = (0, import_core2.forwardRef)(
132
135
  position: "relative",
133
136
  whiteSpace: "nowrap",
134
137
  verticalAlign: "middle",
138
+ overflow: "hidden",
135
139
  outline: "none",
136
140
  ...styles,
137
141
  ...__css,
@@ -159,10 +163,18 @@ var Button = (0, import_core2.forwardRef)(
159
163
  data__loading: (0, import_utils2.dataAttr)(isLoading),
160
164
  __css: css,
161
165
  ...rest,
166
+ onClick,
162
167
  children: [
163
168
  isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--start", ...loadingProps }) : null,
164
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 }),
165
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null
170
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button__loading--end", ...loadingProps }) : null,
171
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
172
+ import_ripple.Ripple,
173
+ {
174
+ isDisabled: disableRipple || isDisabled || isLoading,
175
+ ...rippleProps
176
+ }
177
+ )
166
178
  ]
167
179
  }
168
180
  );
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  IconButton
4
- } from "./chunk-FXSKVU6O.mjs";
4
+ } from "./chunk-HS3OELMU.mjs";
5
5
  import {
6
6
  Button
7
- } from "./chunk-R76PUVPU.mjs";
7
+ } from "./chunk-57COV3NK.mjs";
8
8
  import {
9
9
  ButtonGroup
10
10
  } from "./chunk-PRLQOIIO.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/button",
3
- "version": "0.3.21",
3
+ "version": "0.4.0",
4
4
  "description": "Yamada UI button components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -37,9 +37,10 @@
37
37
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
38
38
  },
39
39
  "dependencies": {
40
- "@yamada-ui/core": "0.13.0",
41
- "@yamada-ui/utils": "0.3.3",
42
- "@yamada-ui/loading": "0.5.7"
40
+ "@yamada-ui/core": "0.13.2",
41
+ "@yamada-ui/utils": "0.4.1",
42
+ "@yamada-ui/loading": "0.5.9",
43
+ "@yamada-ui/ripple": "0.1.1"
43
44
  },
44
45
  "devDependencies": {
45
46
  "react": "^18.0.0",