@deepnoid/ui 0.0.111 → 0.1.0

package/dist/components/ripple/index.js

@@ -0,0 +1,98 @@
+"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/components/ripple/index.ts
+var ripple_exports = {};
+__export(ripple_exports, {
+  Ripple: () => ripple_default,
+  useRipple: () => useRipple
+});
+module.exports = __toCommonJS(ripple_exports);
+
+// src/components/ripple/ripple.tsx
+var import_framer_motion = require("framer-motion");
+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_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        className: "deepnoidui-ripple",
+        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);
+  }) });
+};
+Ripple.displayName = "HeroUI.Ripple";
+var ripple_default = Ripple;
+
+// src/components/ripple/useRipple.ts
+var import_react = require("react");
+function useRipple(props = {}) {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
+  const onPress = (0, import_react.useCallback)((event) => {
+    const trigger = event.target;
+    const rect = trigger.getBoundingClientRect();
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClear, onPress, ...props };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ripple,
+  useRipple
+});

package/dist/components/ripple/index.mjs

@@ -0,0 +1,13 @@
+"use client";
+import "../../chunk-6WSACUIB.mjs";
+import {
+  ripple_default
+} from "../../chunk-LXHUO6VM.mjs";
+import {
+  useRipple
+} from "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+export {
+  ripple_default as Ripple,
+  useRipple
+};

package/dist/components/ripple/ripple.d.mts

@@ -0,0 +1,21 @@
+import { RippleType } from './useRipple.mjs';
+import { FC } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+
+type As<Props = any> = React.ElementType<Props>;
+type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+    as?: As;
+};
+type HTMLDeepnoidUIProps<T extends As = "div", OmitKeys extends keyof any = never> = Omit<PropsOf<T>, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue" | OmitKeys> & {
+    as?: As;
+};
+interface RippleProps extends HTMLDeepnoidUIProps<"span"> {
+    ripples: RippleType[];
+    color?: string;
+    motionProps?: HTMLMotionProps<"span">;
+    style?: React.CSSProperties;
+    onClear: (key: React.Key) => void;
+}
+declare const Ripple: FC<RippleProps>;
+
+export { type As, type HTMLDeepnoidUIProps, type PropsOf, type RippleProps, Ripple as default };

package/dist/components/ripple/ripple.d.ts

@@ -0,0 +1,21 @@
+import { RippleType } from './useRipple.js';
+import { FC } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+
+type As<Props = any> = React.ElementType<Props>;
+type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+    as?: As;
+};
+type HTMLDeepnoidUIProps<T extends As = "div", OmitKeys extends keyof any = never> = Omit<PropsOf<T>, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue" | OmitKeys> & {
+    as?: As;
+};
+interface RippleProps extends HTMLDeepnoidUIProps<"span"> {
+    ripples: RippleType[];
+    color?: string;
+    motionProps?: HTMLMotionProps<"span">;
+    style?: React.CSSProperties;
+    onClear: (key: React.Key) => void;
+}
+declare const Ripple: FC<RippleProps>;
+
+export { type As, type HTMLDeepnoidUIProps, type PropsOf, type RippleProps, Ripple as default };

package/dist/components/ripple/ripple.js

@@ -0,0 +1,65 @@
+"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/components/ripple/ripple.tsx
+var ripple_exports = {};
+__export(ripple_exports, {
+  default: () => ripple_default
+});
+module.exports = __toCommonJS(ripple_exports);
+var import_framer_motion = require("framer-motion");
+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_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        className: "deepnoidui-ripple",
+        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);
+  }) });
+};
+Ripple.displayName = "HeroUI.Ripple";
+var ripple_default = Ripple;

package/dist/components/ripple/ripple.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  ripple_default
+} from "../../chunk-LXHUO6VM.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+export {
+  ripple_default as default
+};

package/dist/components/ripple/useRipple.d.mts

@@ -0,0 +1,17 @@
+type RippleType = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+interface UseRippleProps {
+}
+declare function useRipple(props?: UseRippleProps): {
+    ripples: RippleType[];
+    onClear: (key: React.Key) => void;
+    onPress: (event: React.MouseEvent) => void;
+};
+type UseRippleReturn = ReturnType<typeof useRipple>;
+declare function clamp(value: number, min: number, max: number): number;
+
+export { type RippleType, type UseRippleProps, type UseRippleReturn, clamp, useRipple as default };

package/dist/components/ripple/useRipple.d.ts

@@ -0,0 +1,17 @@
+type RippleType = {
+    key: React.Key;
+    x: number;
+    y: number;
+    size: number;
+};
+interface UseRippleProps {
+}
+declare function useRipple(props?: UseRippleProps): {
+    ripples: RippleType[];
+    onClear: (key: React.Key) => void;
+    onPress: (event: React.MouseEvent) => void;
+};
+type UseRippleReturn = ReturnType<typeof useRipple>;
+declare function clamp(value: number, min: number, max: number): number;
+
+export { type RippleType, type UseRippleProps, type UseRippleReturn, clamp, useRipple as default };

package/dist/components/ripple/useRipple.js

@@ -0,0 +1,57 @@
+"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/components/ripple/useRipple.ts
+var useRipple_exports = {};
+__export(useRipple_exports, {
+  clamp: () => clamp,
+  default: () => useRipple
+});
+module.exports = __toCommonJS(useRipple_exports);
+var import_react = require("react");
+function useRipple(props = {}) {
+  const [ripples, setRipples] = (0, import_react.useState)([]);
+  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
+  const onPress = (0, import_react.useCallback)((event) => {
+    const trigger = event.target;
+    const rect = trigger.getBoundingClientRect();
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = (0, import_react.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClear, onPress, ...props };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clamp
+});

package/dist/components/ripple/useRipple.mjs

@@ -0,0 +1,10 @@
+"use client";
+import {
+  clamp,
+  useRipple
+} from "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+export {
+  clamp,
+  useRipple as default
+};

package/dist/components/select/index.d.mts

@@ -1,5 +1,4 @@
 export { default as Select, SelectOption, SelectProps } from './select.mjs';
 import 'tailwind-variants';
-import 'tailwind-variants/dist/config';
 import 'react';
 import '../../utils/types.mjs';

package/dist/components/select/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Select, SelectOption, SelectProps } from './select.js';
 import 'tailwind-variants';
-import 'tailwind-variants/dist/config';
 import 'react';
 import '../../utils/types.js';