@yamada-ui/close-button 0.3.20 → 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.
package/README.md CHANGED
@@ -22,7 +22,7 @@ $ npm install @yamada-ui/close-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).
@@ -8,13 +8,17 @@ import {
8
8
  omitThemeProps
9
9
  } from "@yamada-ui/core";
10
10
  import { CloseIcon } from "@yamada-ui/icon";
11
+ import { Ripple, useRipple } from "@yamada-ui/ripple";
11
12
  import { cx } from "@yamada-ui/utils";
12
- import { jsx } from "react/jsx-runtime";
13
+ import { jsx, jsxs } from "react/jsx-runtime";
13
14
  var CloseButton = forwardRef(
14
15
  (props, ref) => {
15
16
  const [styles, mergedProps] = useComponentStyle("CloseButton", props);
16
- const { className, children, isDisabled, __css, ...rest } = omitThemeProps(mergedProps);
17
+ const { className, children, isDisabled, __css, disableRipple, ...rest } = omitThemeProps(mergedProps);
18
+ const { onClick, ...rippleProps } = useRipple(rest);
17
19
  const css = {
20
+ position: "relative",
21
+ overflow: "hidden",
18
22
  outline: 0,
19
23
  display: "flex",
20
24
  justifyContent: "center",
@@ -23,7 +27,7 @@ var CloseButton = forwardRef(
23
27
  ...styles,
24
28
  ...__css
25
29
  };
26
- return /* @__PURE__ */ jsx(
30
+ return /* @__PURE__ */ jsxs(
27
31
  ui.button,
28
32
  {
29
33
  ref,
@@ -33,7 +37,11 @@ var CloseButton = forwardRef(
33
37
  disabled: isDisabled,
34
38
  __css: css,
35
39
  ...rest,
36
- children: children || /* @__PURE__ */ jsx(CloseIcon, { width: "1em", height: "1em" })
40
+ onClick,
41
+ children: [
42
+ children || /* @__PURE__ */ jsx(CloseIcon, { width: "1em", height: "1em" }),
43
+ /* @__PURE__ */ jsx(Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
44
+ ]
37
45
  }
38
46
  );
39
47
  }
@@ -8,6 +8,12 @@ type CloseButtonOptions = {
8
8
  * @default false
9
9
  */
10
10
  isDisabled?: boolean;
11
+ /**
12
+ * If `true`, disable ripple effects when pressing a element.
13
+ *
14
+ * @default false
15
+ */
16
+ disableRipple?: boolean;
11
17
  };
12
18
  type CloseButtonProps = HTMLUIProps<"button"> & ThemeProps<"CloseButton"> & CloseButtonOptions;
13
19
  declare const CloseButton: _yamada_ui_core.Component<"button", CloseButtonProps>;
@@ -8,6 +8,12 @@ type CloseButtonOptions = {
8
8
  * @default false
9
9
  */
10
10
  isDisabled?: boolean;
11
+ /**
12
+ * If `true`, disable ripple effects when pressing a element.
13
+ *
14
+ * @default false
15
+ */
16
+ disableRipple?: boolean;
11
17
  };
12
18
  type CloseButtonProps = HTMLUIProps<"button"> & ThemeProps<"CloseButton"> & CloseButtonOptions;
13
19
  declare const CloseButton: _yamada_ui_core.Component<"button", CloseButtonProps>;
@@ -26,13 +26,17 @@ __export(close_button_exports, {
26
26
  module.exports = __toCommonJS(close_button_exports);
27
27
  var import_core = require("@yamada-ui/core");
28
28
  var import_icon = require("@yamada-ui/icon");
29
+ var import_ripple = require("@yamada-ui/ripple");
29
30
  var import_utils = require("@yamada-ui/utils");
30
31
  var import_jsx_runtime = require("react/jsx-runtime");
31
32
  var CloseButton = (0, import_core.forwardRef)(
32
33
  (props, ref) => {
33
34
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("CloseButton", props);
34
- const { className, children, isDisabled, __css, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
35
+ const { className, children, isDisabled, __css, disableRipple, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
36
+ const { onClick, ...rippleProps } = (0, import_ripple.useRipple)(rest);
35
37
  const css = {
38
+ position: "relative",
39
+ overflow: "hidden",
36
40
  outline: 0,
37
41
  display: "flex",
38
42
  justifyContent: "center",
@@ -41,7 +45,7 @@ var CloseButton = (0, import_core.forwardRef)(
41
45
  ...styles,
42
46
  ...__css
43
47
  };
44
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
48
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
45
49
  import_core.ui.button,
46
50
  {
47
51
  ref,
@@ -51,7 +55,11 @@ var CloseButton = (0, import_core.forwardRef)(
51
55
  disabled: isDisabled,
52
56
  __css: css,
53
57
  ...rest,
54
- children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { width: "1em", height: "1em" })
58
+ onClick,
59
+ children: [
60
+ children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { width: "1em", height: "1em" }),
61
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
62
+ ]
55
63
  }
56
64
  );
57
65
  }
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  CloseButton
4
- } from "./chunk-MSFCLVZP.mjs";
4
+ } from "./chunk-EPNX7ZM2.mjs";
5
5
  export {
6
6
  CloseButton
7
7
  };
package/dist/index.js CHANGED
@@ -28,13 +28,17 @@ module.exports = __toCommonJS(src_exports);
28
28
  // src/close-button.tsx
29
29
  var import_core = require("@yamada-ui/core");
30
30
  var import_icon = require("@yamada-ui/icon");
31
+ var import_ripple = require("@yamada-ui/ripple");
31
32
  var import_utils = require("@yamada-ui/utils");
32
33
  var import_jsx_runtime = require("react/jsx-runtime");
33
34
  var CloseButton = (0, import_core.forwardRef)(
34
35
  (props, ref) => {
35
36
  const [styles, mergedProps] = (0, import_core.useComponentStyle)("CloseButton", props);
36
- const { className, children, isDisabled, __css, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
37
+ const { className, children, isDisabled, __css, disableRipple, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
38
+ const { onClick, ...rippleProps } = (0, import_ripple.useRipple)(rest);
37
39
  const css = {
40
+ position: "relative",
41
+ overflow: "hidden",
38
42
  outline: 0,
39
43
  display: "flex",
40
44
  justifyContent: "center",
@@ -43,7 +47,7 @@ var CloseButton = (0, import_core.forwardRef)(
43
47
  ...styles,
44
48
  ...__css
45
49
  };
46
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
47
51
  import_core.ui.button,
48
52
  {
49
53
  ref,
@@ -53,7 +57,11 @@ var CloseButton = (0, import_core.forwardRef)(
53
57
  disabled: isDisabled,
54
58
  __css: css,
55
59
  ...rest,
56
- children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { width: "1em", height: "1em" })
60
+ onClick,
61
+ children: [
62
+ children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.CloseIcon, { width: "1em", height: "1em" }),
63
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ripple.Ripple, { isDisabled: disableRipple || isDisabled, ...rippleProps })
64
+ ]
57
65
  }
58
66
  );
59
67
  }
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  CloseButton
4
- } from "./chunk-MSFCLVZP.mjs";
4
+ } from "./chunk-EPNX7ZM2.mjs";
5
5
  export {
6
6
  CloseButton
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/close-button",
3
- "version": "0.3.20",
3
+ "version": "0.4.0",
4
4
  "description": "Yamada UI close button component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -35,9 +35,10 @@
35
35
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
36
36
  },
37
37
  "dependencies": {
38
- "@yamada-ui/core": "0.13.0",
39
- "@yamada-ui/utils": "0.3.3",
40
- "@yamada-ui/icon": "0.3.19"
38
+ "@yamada-ui/core": "0.13.2",
39
+ "@yamada-ui/utils": "0.4.1",
40
+ "@yamada-ui/ripple": "0.1.1",
41
+ "@yamada-ui/icon": "0.3.21"
41
42
  },
42
43
  "devDependencies": {
43
44
  "react": "^18.0.0",