@kopexa/ripple 0.0.0-canary-20250718183330

package/README.md

@@ -0,0 +1,24 @@
+# @kopexa/ripple
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @kopexa/ripple
+# or
+npm i @kopexa/ripple
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).

package/dist/chunk-B6V7GEJQ.mjs

@@ -0,0 +1,32 @@
+"use client";
+
+// src/use-ripple.ts
+import { getUniqueID } from "@kopexa/shared-utils";
+import { useCallback, useState } from "react";
+function useRipple() {
+  const [ripples, setRipples] = useState([]);
+  const onClick = useCallback((event) => {
+    const trigger = event.target;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    const x = event.clientX - rect.left - size / 2;
+    const y = event.clientY - rect.top - size / 2;
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x,
+        y
+      }
+    ]);
+  }, []);
+  const onClear = useCallback((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClick, onClear };
+}
+
+export {
+  useRipple
+};

package/dist/chunk-FVH6YPZP.mjs

@@ -0,0 +1,59 @@
+"use client";
+
+// src/ripple.tsx
+import { clamp } from "@kopexa/shared-utils";
+import {
+  AnimatePresence,
+  domAnimation,
+  LazyMotion,
+  m
+} from "motion/react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Ripple = (props) => {
+  const {
+    ripples = [],
+    motionProps,
+    color = "currentColor",
+    style,
+    onClear
+  } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: ripples.map((ripple) => {
+    const duration = clamp(
+      0.01 * ripple.size,
+      0.2,
+      ripple.size > 100 ? 0.75 : 0.5
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+      m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+
+export {
+  Ripple
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { Ripple, RippleProps } from './ripple.mjs';
+export { useRipple } from './use-ripple.mjs';
+import 'react/jsx-runtime';
+import 'motion/react';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Ripple, RippleProps } from './ripple.js';
+export { useRipple } from './use-ripple.js';
+import 'react/jsx-runtime';
+import 'motion/react';
+import 'react';

package/dist/index.js

@@ -0,0 +1,108 @@
+"use client";
+"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 index_exports = {};
+__export(index_exports, {
+  Ripple: () => Ripple,
+  useRipple: () => useRipple
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ripple.tsx
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("motion/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Ripple = (props) => {
+  const {
+    ripples = [],
+    motionProps,
+    color = "currentColor",
+    style,
+    onClear
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map((ripple) => {
+    const duration = (0, import_shared_utils.clamp)(
+      0.01 * ripple.size,
+      0.2,
+      ripple.size > 100 ? 0.75 : 0.5
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.LazyMotion, { features: import_react.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+
+// src/use-ripple.ts
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_react2 = require("react");
+function useRipple() {
+  const [ripples, setRipples] = (0, import_react2.useState)([]);
+  const onClick = (0, import_react2.useCallback)((event) => {
+    const trigger = event.target;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    const x = event.clientX - rect.left - size / 2;
+    const y = event.clientY - rect.top - size / 2;
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: (0, import_shared_utils2.getUniqueID)(prevRipples.length.toString()),
+        size,
+        x,
+        y
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react2.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClick, onClear };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ripple,
+  useRipple
+});

package/dist/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  Ripple
+} from "./chunk-FVH6YPZP.mjs";
+import {
+  useRipple
+} from "./chunk-B6V7GEJQ.mjs";
+export {
+  Ripple,
+  useRipple
+};

package/dist/ripple.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLMotionProps } from 'motion/react';
+import { RippleType } from './use-ripple.mjs';
+import 'react';
+
+type RippleProps = {
+    ripples: RippleType[];
+    color?: string;
+    style?: React.CSSProperties;
+    onClear: (key: React.Key) => void;
+    motionProps?: Omit<HTMLMotionProps<"span">, "ref">;
+};
+declare const Ripple: (props: RippleProps) => react_jsx_runtime.JSX.Element;
+
+export { Ripple, type RippleProps };

package/dist/ripple.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLMotionProps } from 'motion/react';
+import { RippleType } from './use-ripple.js';
+import 'react';
+
+type RippleProps = {
+    ripples: RippleType[];
+    color?: string;
+    style?: React.CSSProperties;
+    onClear: (key: React.Key) => void;
+    motionProps?: Omit<HTMLMotionProps<"span">, "ref">;
+};
+declare const Ripple: (props: RippleProps) => react_jsx_runtime.JSX.Element;
+
+export { Ripple, type RippleProps };

package/dist/ripple.js

@@ -0,0 +1,77 @@
+"use client";
+"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_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("motion/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Ripple = (props) => {
+  const {
+    ripples = [],
+    motionProps,
+    color = "currentColor",
+    style,
+    onClear
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ripples.map((ripple) => {
+    const duration = (0, import_shared_utils.clamp)(
+      0.01 * ripple.size,
+      0.2,
+      ripple.size > 100 ? 0.75 : 0.5
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.LazyMotion, { features: import_react.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ripple
+});

package/dist/ripple.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  Ripple
+} from "./chunk-FVH6YPZP.mjs";
+export {
+  Ripple
+};

package/dist/use-ripple.d.mts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type RippleType = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+declare function useRipple(): {
+    ripples: RippleType[];
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onClear: (key: React.Key) => void;
+};
+
+export { type RippleType, useRipple };

package/dist/use-ripple.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type RippleType = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+declare function useRipple(): {
+    ripples: RippleType[];
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onClear: (key: React.Key) => void;
+};
+
+export { type RippleType, useRipple };

package/dist/use-ripple.js

@@ -0,0 +1,55 @@
+"use client";
+"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_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("react");
+function useRipple() {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const onClick = (0, import_react.useCallback)((event) => {
+    const trigger = event.target;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    const rect = trigger.getBoundingClientRect();
+    const x = event.clientX - rect.left - size / 2;
+    const y = event.clientY - rect.top - size / 2;
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: (0, import_shared_utils.getUniqueID)(prevRipples.length.toString()),
+        size,
+        x,
+        y
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClick, onClear };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRipple
+});

package/dist/use-ripple.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useRipple
+} from "./chunk-B6V7GEJQ.mjs";
+export {
+  useRipple
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kopexa/ripple",
+  "version": "0.0.0-canary-20250718183330",
+  "description": "",
+  "keywords": [
+    "ripple"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/ripple"
+  },
+  "bugs": {
+    "url": "https://github.com/kopexa-grc/sight/issues"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0",
+    "motion": ">=12.23.6",
+    "@kopexa/theme": "0.0.0-canary-20250718183330"
+  },
+  "dependencies": {
+    "@kopexa/react-utils": "0.0.0-canary-20250718183330",
+    "@kopexa/shared-utils": "0.0.0-canary-20250718183330"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "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": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}