@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/particleEffects.js

@@ -1,197 +1,198 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
-import { SIZE_MAP } from './types.js';
-
-/* ────────────────────────────────────────────────────────────────────────────
-   PRESET CONFIGURATIONS
-───────────────────────────────────────────────────────────────────────────── */
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState, useCallback, useEffect } from "react";
+import { SIZE_MAP } from "./types.js";
 const PRESETS = {
-    confetti: {
-        count: 40,
-        lifetime: 1200,
-        shapes: ['rect', 'rect', 'circle'],
-        colors: [
-            '#ff6b6b',
-            '#feca57',
-            '#48dbfb',
-            '#ff9ff3',
-            '#54a0ff',
-            '#5f27cd',
-            '#00d2d3',
-            '#1dd1a1',
-        ],
-        sizeRange: [4, 8],
-        velocityRange: [3, 8],
-        gravity: 0.15,
-        spread: 360,
-        fadeOut: 0.8,
-        rotationRange: [-10, 10],
-    },
-    sparkles: {
-        count: 15,
-        lifetime: 800,
-        shapes: ['star', 'circle'],
-        colors: ['#ffd700', '#ffec8b', '#fff8dc', '#fffacd'],
-        sizeRange: [2, 6],
-        velocityRange: [1, 3],
-        gravity: -0.05,
-        spread: 360,
-        fadeOut: 1,
-        rotationRange: [-5, 5],
-    },
-    smoke: {
-        count: 20,
-        lifetime: 1000,
-        shapes: ['circle'],
-        colors: ['#94a3b8', '#64748b', '#475569', '#cbd5e1'],
-        sizeRange: [4, 12],
-        velocityRange: [0.5, 2],
-        gravity: -0.08,
-        spread: 120,
-        fadeOut: 1,
-        rotationRange: [0, 0],
-    },
-    dust: {
-        count: 25,
-        lifetime: 600,
-        shapes: ['circle'],
-        colors: ['#d4a574', '#c69c6d', '#b8860b', '#deb887'],
-        sizeRange: [2, 5],
-        velocityRange: [1, 4],
-        gravity: 0.12,
-        spread: 180,
-        fadeOut: 0.9,
-        rotationRange: [-3, 3],
-    },
-    firework: {
-        count: 50,
-        lifetime: 1000,
-        shapes: ['circle'],
-        colors: ['#ff0000', '#ff7700', '#ffff00', '#00ff00', '#0000ff', '#ff00ff'],
-        sizeRange: [2, 4],
-        velocityRange: [4, 10],
-        gravity: 0.2,
-        spread: 360,
-        fadeOut: 0.9,
-        rotationRange: [0, 0],
-    },
-    hearts: {
-        count: 12,
-        lifetime: 1200,
-        shapes: ['circle'], // drawn as hearts via custom render
-        colors: ['#e74c3c', '#ff6b81', '#ff4757', '#ff6348', '#c44569'],
-        sizeRange: [6, 12],
-        velocityRange: [1, 3],
-        gravity: -0.06,
-        spread: 120,
-        fadeOut: 1,
-        rotationRange: [-5, 5],
-    },
-    stars: {
-        count: 15,
-        lifetime: 1000,
-        shapes: ['star'],
-        colors: ['#ffd700', '#ffa500', '#ffec8b', '#f0e68c'],
-        sizeRange: [4, 10],
-        velocityRange: [2, 5],
-        gravity: 0.05,
-        spread: 360,
-        fadeOut: 0.9,
-        rotationRange: [-8, 8],
-    },
+  confetti: {
+    count: 40,
+    lifetime: 1200,
+    shapes: ["rect", "rect", "circle"],
+    colors: [
+      "#ff6b6b",
+      "#feca57",
+      "#48dbfb",
+      "#ff9ff3",
+      "#54a0ff",
+      "#5f27cd",
+      "#00d2d3",
+      "#1dd1a1"
+    ],
+    sizeRange: [4, 8],
+    velocityRange: [3, 8],
+    gravity: 0.15,
+    spread: 360,
+    fadeOut: 0.8,
+    rotationRange: [-10, 10]
+  },
+  sparkles: {
+    count: 15,
+    lifetime: 800,
+    shapes: ["star", "circle"],
+    colors: ["#ffd700", "#ffec8b", "#fff8dc", "#fffacd"],
+    sizeRange: [2, 6],
+    velocityRange: [1, 3],
+    gravity: -0.05,
+    spread: 360,
+    fadeOut: 1,
+    rotationRange: [-5, 5]
+  },
+  smoke: {
+    count: 20,
+    lifetime: 1e3,
+    shapes: ["circle"],
+    colors: ["#94a3b8", "#64748b", "#475569", "#cbd5e1"],
+    sizeRange: [4, 12],
+    velocityRange: [0.5, 2],
+    gravity: -0.08,
+    spread: 120,
+    fadeOut: 1,
+    rotationRange: [0, 0]
+  },
+  dust: {
+    count: 25,
+    lifetime: 600,
+    shapes: ["circle"],
+    colors: ["#d4a574", "#c69c6d", "#b8860b", "#deb887"],
+    sizeRange: [2, 5],
+    velocityRange: [1, 4],
+    gravity: 0.12,
+    spread: 180,
+    fadeOut: 0.9,
+    rotationRange: [-3, 3]
+  },
+  firework: {
+    count: 50,
+    lifetime: 1e3,
+    shapes: ["circle"],
+    colors: ["#ff0000", "#ff7700", "#ffff00", "#00ff00", "#0000ff", "#ff00ff"],
+    sizeRange: [2, 4],
+    velocityRange: [4, 10],
+    gravity: 0.2,
+    spread: 360,
+    fadeOut: 0.9,
+    rotationRange: [0, 0]
+  },
+  hearts: {
+    count: 12,
+    lifetime: 1200,
+    shapes: ["circle"],
+    // drawn as hearts via custom render
+    colors: ["#e74c3c", "#ff6b81", "#ff4757", "#ff6348", "#c44569"],
+    sizeRange: [6, 12],
+    velocityRange: [1, 3],
+    gravity: -0.06,
+    spread: 120,
+    fadeOut: 1,
+    rotationRange: [-5, 5]
+  },
+  stars: {
+    count: 15,
+    lifetime: 1e3,
+    shapes: ["star"],
+    colors: ["#ffd700", "#ffa500", "#ffec8b", "#f0e68c"],
+    sizeRange: [4, 10],
+    velocityRange: [2, 5],
+    gravity: 0.05,
+    spread: 360,
+    fadeOut: 0.9,
+    rotationRange: [-8, 8]
+  }
 };
 function createParticles(config, cx, cy) {
-    const particles = [];
-    for (let i = 0; i < config.count; i++) {
-        const angle = (Math.random() * config.spread - config.spread / 2) * (Math.PI / 180) - Math.PI / 2;
-        const speed = config.velocityRange[0] + Math.random() * (config.velocityRange[1] - config.velocityRange[0]);
-        particles.push({
-            x: cx,
-            y: cy,
-            vx: Math.cos(angle) * speed,
-            vy: Math.sin(angle) * speed,
-            size: config.sizeRange[0] + Math.random() * (config.sizeRange[1] - config.sizeRange[0]),
-            color: config.colors[Math.floor(Math.random() * config.colors.length)],
-            shape: config.shapes[Math.floor(Math.random() * config.shapes.length)],
-            rotation: Math.random() * 360,
-            rotationSpeed: config.rotationRange[0] +
-                Math.random() * (config.rotationRange[1] - config.rotationRange[0]),
-            alpha: 1,
-            life: 0,
-            maxLife: config.lifetime * (0.6 + Math.random() * 0.4),
-        });
-    }
-    return particles;
+  const particles = [];
+  for (let i = 0; i < config.count; i++) {
+    const angle = (Math.random() * config.spread - config.spread / 2) * (Math.PI / 180) - Math.PI / 2;
+    const speed = config.velocityRange[0] + Math.random() * (config.velocityRange[1] - config.velocityRange[0]);
+    particles.push({
+      x: cx,
+      y: cy,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      size: config.sizeRange[0] + Math.random() * (config.sizeRange[1] - config.sizeRange[0]),
+      color: config.colors[Math.floor(Math.random() * config.colors.length)],
+      shape: config.shapes[Math.floor(Math.random() * config.shapes.length)],
+      rotation: Math.random() * 360,
+      rotationSpeed: config.rotationRange[0] + Math.random() * (config.rotationRange[1] - config.rotationRange[0]),
+      alpha: 1,
+      life: 0,
+      maxLife: config.lifetime * (0.6 + Math.random() * 0.4)
+    });
+  }
+  return particles;
 }
 function drawParticle(ctx, p) {
-    ctx.save();
-    ctx.translate(p.x, p.y);
-    ctx.rotate((p.rotation * Math.PI) / 180);
-    ctx.globalAlpha = p.alpha;
-    ctx.fillStyle = p.color;
-    const s = p.size;
-    switch (p.shape) {
-        case 'circle':
-            ctx.beginPath();
-            ctx.arc(0, 0, s / 2, 0, Math.PI * 2);
-            ctx.fill();
-            break;
-        case 'rect':
-            ctx.fillRect(-s / 2, -s / 4, s, s / 2);
-            break;
-        case 'triangle':
-            ctx.beginPath();
-            ctx.moveTo(0, -s / 2);
-            ctx.lineTo(s / 2, s / 2);
-            ctx.lineTo(-s / 2, s / 2);
-            ctx.closePath();
-            ctx.fill();
-            break;
-        case 'star': {
-            ctx.beginPath();
-            for (let i = 0; i < 5; i++) {
-                const outerAngle = (i * 72 - 90) * (Math.PI / 180);
-                const innerAngle = (i * 72 + 36 - 90) * (Math.PI / 180);
-                const outer = s / 2;
-                const inner = s / 4;
-                if (i === 0) {
-                    ctx.moveTo(Math.cos(outerAngle) * outer, Math.sin(outerAngle) * outer);
-                }
-                else {
-                    ctx.lineTo(Math.cos(outerAngle) * outer, Math.sin(outerAngle) * outer);
-                }
-                ctx.lineTo(Math.cos(innerAngle) * inner, Math.sin(innerAngle) * inner);
-            }
-            ctx.closePath();
-            ctx.fill();
-            break;
+  ctx.save();
+  ctx.translate(p.x, p.y);
+  ctx.rotate(p.rotation * Math.PI / 180);
+  ctx.globalAlpha = p.alpha;
+  ctx.fillStyle = p.color;
+  const s = p.size;
+  switch (p.shape) {
+    case "circle":
+      ctx.beginPath();
+      ctx.arc(0, 0, s / 2, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    case "rect":
+      ctx.fillRect(-s / 2, -s / 4, s, s / 2);
+      break;
+    case "triangle":
+      ctx.beginPath();
+      ctx.moveTo(0, -s / 2);
+      ctx.lineTo(s / 2, s / 2);
+      ctx.lineTo(-s / 2, s / 2);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    case "star": {
+      ctx.beginPath();
+      for (let i = 0; i < 5; i++) {
+        const outerAngle = (i * 72 - 90) * (Math.PI / 180);
+        const innerAngle = (i * 72 + 36 - 90) * (Math.PI / 180);
+        const outer = s / 2;
+        const inner = s / 4;
+        if (i === 0) {
+          ctx.moveTo(Math.cos(outerAngle) * outer, Math.sin(outerAngle) * outer);
+        } else {
+          ctx.lineTo(Math.cos(outerAngle) * outer, Math.sin(outerAngle) * outer);
         }
+        ctx.lineTo(Math.cos(innerAngle) * inner, Math.sin(innerAngle) * inner);
+      }
+      ctx.closePath();
+      ctx.fill();
+      break;
     }
-    ctx.restore();
+  }
+  ctx.restore();
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
 const NtdParticleIcon = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ icon: Icon, particle, trigger = 'click', active, size = 'md', iconProps, className, style, onEffectEnd, }, ref) => {
-    var _a;
-    const containerRef = useRef(null);
-    const canvasRef = useRef(null);
-    const animRef = useRef(0);
-    const [_isPlaying, setIsPlaying] = useState(false);
-    const resolvedSize = typeof size === 'number' ? size : ((_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
-    const config = typeof particle === 'string' ? PRESETS[particle] : particle;
-    // Canvas dimensions (larger than icon for particle spread)
-    const canvasSize = resolvedSize * 4;
-    const canvasOffset = (canvasSize - resolvedSize) / 2;
-    const emit = useCallback(() => {
+  /* @__PURE__ */ forwardRef(
+    ({
+      icon: Icon,
+      particle,
+      trigger = "click",
+      active,
+      size = "md",
+      iconProps,
+      className,
+      style,
+      onEffectEnd
+    }, ref) => {
+      const containerRef = useRef(null);
+      const canvasRef = useRef(null);
+      const animRef = useRef(0);
+      const [_isPlaying, setIsPlaying] = useState(false);
+      const resolvedSize = typeof size === "number" ? size : SIZE_MAP[size] ?? 24;
+      const config = typeof particle === "string" ? PRESETS[particle] : particle;
+      const canvasSize = resolvedSize * 4;
+      const canvasOffset = (canvasSize - resolvedSize) / 2;
+      const emit = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas) {
-            return;
+          return;
         }
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (!ctx) {
-            return;
+          return;
         }
         const cx = canvasSize / 2;
         const cy = canvasSize / 2;
@@ -199,84 +200,104 @@ const NtdParticleIcon = /* @__PURE__ */ Object.assign(
         const startTime = performance.now();
         setIsPlaying(true);
         if (animRef.current) {
-            cancelAnimationFrame(animRef.current);
+          cancelAnimationFrame(animRef.current);
         }
         function animate(now) {
-            const elapsed = now - startTime;
-            ctx.clearRect(0, 0, canvasSize, canvasSize);
-            let alive = 0;
-            for (const p of particles) {
-                p.life = elapsed;
-                if (p.life >= p.maxLife) {
-                    continue;
-                }
-                alive++;
-                const progress = p.life / p.maxLife;
-                // Physics
-                p.x += p.vx;
-                p.y += p.vy;
-                p.vy += config.gravity;
-                p.rotation += p.rotationSpeed;
-                p.alpha = 1 - progress * config.fadeOut;
-                drawParticle(ctx, p);
-            }
-            if (alive > 0) {
-                animRef.current = requestAnimationFrame(animate);
-            }
-            else {
-                ctx.clearRect(0, 0, canvasSize, canvasSize);
-                setIsPlaying(false);
-                onEffectEnd === null || onEffectEnd === void 0 ? void 0 : onEffectEnd();
+          const elapsed = now - startTime;
+          ctx.clearRect(0, 0, canvasSize, canvasSize);
+          let alive = 0;
+          for (const p of particles) {
+            p.life = elapsed;
+            if (p.life >= p.maxLife) {
+              continue;
             }
+            alive++;
+            const progress = p.life / p.maxLife;
+            p.x += p.vx;
+            p.y += p.vy;
+            p.vy += config.gravity;
+            p.rotation += p.rotationSpeed;
+            p.alpha = 1 - progress * config.fadeOut;
+            drawParticle(ctx, p);
+          }
+          if (alive > 0) {
+            animRef.current = requestAnimationFrame(animate);
+          } else {
+            ctx.clearRect(0, 0, canvasSize, canvasSize);
+            setIsPlaying(false);
+            onEffectEnd?.();
+          }
         }
         animRef.current = requestAnimationFrame(animate);
-    }, [config, canvasSize, onEffectEnd]);
-    // Cleanup on unmount
-    useEffect(() => {
+      }, [config, canvasSize, onEffectEnd]);
+      useEffect(() => {
         return () => {
-            if (animRef.current) {
-                cancelAnimationFrame(animRef.current);
-            }
+          if (animRef.current) {
+            cancelAnimationFrame(animRef.current);
+          }
         };
-    }, []);
-    // Trigger on mount
-    useEffect(() => {
-        if (trigger === 'mount') {
-            emit();
+      }, []);
+      useEffect(() => {
+        if (trigger === "mount") {
+          emit();
         }
-    }, [trigger, emit]);
-    // Manual trigger
-    useEffect(() => {
-        if (trigger === 'manual' && active) {
-            emit();
+      }, [trigger, emit]);
+      useEffect(() => {
+        if (trigger === "manual" && active) {
+          emit();
         }
-    }, [trigger, active, emit]);
-    // Forward ref
-    React.useImperativeHandle(ref, () => containerRef.current);
-    return (jsxs("div", { ref: containerRef, className: className, style: {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+      }, [trigger, active, emit]);
+      React.useImperativeHandle(ref, () => containerRef.current);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className,
+          style: {
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
             width: resolvedSize,
             height: resolvedSize,
-            cursor: trigger === 'click' || trigger === 'hover' ? 'pointer' : undefined,
-            ...style,
-        }, onClick: trigger === 'click' ? emit : undefined, onKeyDown: trigger === 'click'
-            ? (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    emit();
-                }
+            cursor: trigger === "click" || trigger === "hover" ? "pointer" : void 0,
+            ...style
+          },
+          onClick: trigger === "click" ? emit : void 0,
+          onKeyDown: trigger === "click" ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              emit();
             }
-            : undefined, role: trigger === 'click' ? 'button' : undefined, tabIndex: trigger === 'click' ? 0 : undefined, onMouseEnter: trigger === 'hover' ? emit : undefined, children: [jsx(Icon, { size: size, ...iconProps }), jsx("canvas", { ref: canvasRef, width: canvasSize, height: canvasSize, style: {
-                    position: 'absolute',
-                    top: -canvasOffset,
-                    left: -canvasOffset,
-                    width: canvasSize,
-                    height: canvasSize,
-                    pointerEvents: 'none',
-                } })] }));
-}), { displayName: 'NtdParticleIcon' });
-
-export { NtdParticleIcon };
+          } : void 0,
+          role: trigger === "click" ? "button" : void 0,
+          tabIndex: trigger === "click" ? 0 : void 0,
+          onMouseEnter: trigger === "hover" ? emit : void 0,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { size, ...iconProps }),
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                width: canvasSize,
+                height: canvasSize,
+                style: {
+                  position: "absolute",
+                  top: -canvasOffset,
+                  left: -canvasOffset,
+                  width: canvasSize,
+                  height: canvasSize,
+                  pointerEvents: "none"
+                }
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdParticleIcon" }
+);
+export {
+  NtdParticleIcon
+};