@yamada-ui/ripple 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/ripple
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/ripple
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/ripple
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/ripple
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](./CONTRIBUTING.md) to assist you.
+
+## License
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-AY3JROH4.mjs

@@ -0,0 +1,54 @@
+// src/ripple.tsx
+import { AnimatePresence, Motion } from "@yamada-ui/motion";
+import { cx, handlerAll } from "@yamada-ui/utils";
+import { Fragment, jsx } from "react/jsx-runtime";
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var Ripple = ({
+  className,
+  ripples,
+  onAnimationComplete,
+  onClear,
+  color = "currentColor",
+  style,
+  isDisabled,
+  ...rest
+}) => {
+  if (isDisabled)
+    return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: ripples.map(({ key, x, y, size }) => {
+    const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
+    return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+      Motion,
+      {
+        as: "span",
+        className: cx("ui-ripple", className),
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        transition: { duration },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          zIndex: 10,
+          left: x,
+          top: y,
+          width: `${size}px`,
+          height: `${size}px`,
+          ...style
+        },
+        ...rest,
+        onAnimationComplete: handlerAll(
+          onAnimationComplete,
+          () => onClear(key)
+        )
+      }
+    ) }, key);
+  }) });
+};
+
+export {
+  Ripple
+};

package/dist/chunk-V3W3PQD3.mjs

@@ -0,0 +1,28 @@
+// src/use-ripple.ts
+import { createId, handlerAll } from "@yamada-ui/utils";
+import { useCallback, useState } from "react";
+var useRipple = (props) => {
+  const [ripples, setRipples] = useState([]);
+  const onClick = useCallback((ev) => {
+    const trigger = ev.currentTarget;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    setRipples((prev) => [
+      ...prev,
+      {
+        key: createId(prev.length.toString()),
+        size,
+        x: ev.clientX - rect.x - size / 2,
+        y: ev.clientY - rect.y - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = useCallback((key) => {
+    setRipples((prev) => prev.filter((item) => item.key !== key));
+  }, []);
+  return { ripples, onClick: handlerAll(onClick, props.onClick), onClear };
+};
+
+export {
+  useRipple
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { Ripple, RippleProps } from './ripple.mjs';
+export { RippleOptions, UseRippleProps, UseRippleReturn, useRipple } from './use-ripple.mjs';
+import '@yamada-ui/motion';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Ripple, RippleProps } from './ripple.js';
+export { RippleOptions, UseRippleProps, UseRippleReturn, useRipple } from './use-ripple.js';
+import '@yamada-ui/motion';
+import 'react';

package/dist/index.js

@@ -0,0 +1,107 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Ripple: () => Ripple,
+  useRipple: () => useRipple
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ripple.tsx
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var Ripple = ({
+  className,
+  ripples,
+  onAnimationComplete,
+  onClear,
+  color = "currentColor",
+  style,
+  isDisabled,
+  ...rest
+}) => {
+  if (isDisabled)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
+    const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_motion.Motion,
+      {
+        as: "span",
+        className: (0, import_utils.cx)("ui-ripple", className),
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        transition: { duration },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          zIndex: 10,
+          left: x,
+          top: y,
+          width: `${size}px`,
+          height: `${size}px`,
+          ...style
+        },
+        ...rest,
+        onAnimationComplete: (0, import_utils.handlerAll)(
+          onAnimationComplete,
+          () => onClear(key)
+        )
+      }
+    ) }, key);
+  }) });
+};
+
+// src/use-ripple.ts
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
+var useRipple = (props) => {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const onClick = (0, import_react.useCallback)((ev) => {
+    const trigger = ev.currentTarget;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    setRipples((prev) => [
+      ...prev,
+      {
+        key: (0, import_utils2.createId)(prev.length.toString()),
+        size,
+        x: ev.clientX - rect.x - size / 2,
+        y: ev.clientY - rect.y - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prev) => prev.filter((item) => item.key !== key));
+  }, []);
+  return { ripples, onClick: (0, import_utils2.handlerAll)(onClick, props.onClick), onClear };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ripple,
+  useRipple
+});

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import {
+  Ripple
+} from "./chunk-AY3JROH4.mjs";
+import {
+  useRipple
+} from "./chunk-V3W3PQD3.mjs";
+export {
+  Ripple,
+  useRipple
+};

package/dist/ripple.d.mts

@@ -0,0 +1,17 @@
+import { MotionProps } from '@yamada-ui/motion';
+import { Key, FC } from 'react';
+import { RippleOptions } from './use-ripple.mjs';
+
+type RippleProps = MotionProps<"span"> & {
+    /**
+     * If `true`, disable ripple effects when pressing a element.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    ripples: RippleOptions[];
+    onClear: (key: Key) => void;
+};
+declare const Ripple: FC<RippleProps>;
+
+export { Ripple, type RippleProps };

package/dist/ripple.d.ts

@@ -0,0 +1,17 @@
+import { MotionProps } from '@yamada-ui/motion';
+import { Key, FC } from 'react';
+import { RippleOptions } from './use-ripple.js';
+
+type RippleProps = MotionProps<"span"> & {
+    /**
+     * If `true`, disable ripple effects when pressing a element.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    ripples: RippleOptions[];
+    onClear: (key: Key) => void;
+};
+declare const Ripple: FC<RippleProps>;
+
+export { Ripple, type RippleProps };

package/dist/ripple.js

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ripple.tsx
+var ripple_exports = {};
+__export(ripple_exports, {
+  Ripple: () => Ripple
+});
+module.exports = __toCommonJS(ripple_exports);
+var import_motion = require("@yamada-ui/motion");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var Ripple = ({
+  className,
+  ripples,
+  onAnimationComplete,
+  onClear,
+  color = "currentColor",
+  style,
+  isDisabled,
+  ...rest
+}) => {
+  if (isDisabled)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map(({ key, x, y, size }) => {
+    const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_motion.Motion,
+      {
+        as: "span",
+        className: (0, import_utils.cx)("ui-ripple", className),
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        transition: { duration },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          zIndex: 10,
+          left: x,
+          top: y,
+          width: `${size}px`,
+          height: `${size}px`,
+          ...style
+        },
+        ...rest,
+        onAnimationComplete: (0, import_utils.handlerAll)(
+          onAnimationComplete,
+          () => onClear(key)
+        )
+      }
+    ) }, key);
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ripple
+});

package/dist/ripple.mjs

@@ -0,0 +1,6 @@
+import {
+  Ripple
+} from "./chunk-AY3JROH4.mjs";
+export {
+  Ripple
+};

package/dist/use-ripple.d.mts

@@ -0,0 +1,19 @@
+import React, { MouseEventHandler, Key } from 'react';
+
+type RippleOptions = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+type UseRippleProps<T extends any = HTMLElement> = {
+    onClick?: MouseEventHandler<T>;
+};
+declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
+    ripples: RippleOptions[];
+    onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
+    onClear: (key: Key) => void;
+};
+type UseRippleReturn = ReturnType<typeof useRipple>;
+
+export { type RippleOptions, type UseRippleProps, type UseRippleReturn, useRipple };

package/dist/use-ripple.d.ts

@@ -0,0 +1,19 @@
+import React, { MouseEventHandler, Key } from 'react';
+
+type RippleOptions = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+type UseRippleProps<T extends any = HTMLElement> = {
+    onClick?: MouseEventHandler<T>;
+};
+declare const useRipple: <T extends unknown = HTMLElement>(props: UseRippleProps<T>) => {
+    ripples: RippleOptions[];
+    onClick: (event: React.MouseEvent<T, MouseEvent>) => void;
+    onClear: (key: Key) => void;
+};
+type UseRippleReturn = ReturnType<typeof useRipple>;
+
+export { type RippleOptions, type UseRippleProps, type UseRippleReturn, useRipple };

package/dist/use-ripple.js

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-ripple.ts
+var use_ripple_exports = {};
+__export(use_ripple_exports, {
+  useRipple: () => useRipple
+});
+module.exports = __toCommonJS(use_ripple_exports);
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var useRipple = (props) => {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const onClick = (0, import_react.useCallback)((ev) => {
+    const trigger = ev.currentTarget;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    setRipples((prev) => [
+      ...prev,
+      {
+        key: (0, import_utils.createId)(prev.length.toString()),
+        size,
+        x: ev.clientX - rect.x - size / 2,
+        y: ev.clientY - rect.y - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prev) => prev.filter((item) => item.key !== key));
+  }, []);
+  return { ripples, onClick: (0, import_utils.handlerAll)(onClick, props.onClick), onClear };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRipple
+});

package/dist/use-ripple.mjs

@@ -0,0 +1,6 @@
+import {
+  useRipple
+} from "./chunk-V3W3PQD3.mjs";
+export {
+  useRipple
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@yamada-ui/ripple",
+  "version": "0.1.0",
+  "description": "Yamada UI ripple component",
+  "keywords": [],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/ripple"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.13.0",
+    "@yamada-ui/motion": "0.4.19",
+    "@yamada-ui/utils": "0.3.3"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}