@fmarlats/react-like-button 1.1.4

package/dist/chunk-VLFZGMEX.js

@@ -0,0 +1,725 @@
+// src/LikeButton/DefaultHeartIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function DefaultHeartIcon({ size, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        stroke: "#111827",
+        strokeWidth: 2,
+        fill: "transparent"
+      },
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+        }
+      )
+    }
+  );
+}
+
+// src/Particle/presets.ts
+var DEFAULT_PARTICLE_CONFIG = {
+  shape: "heart",
+  speed: 500,
+  distance: { min: 60, max: 100 },
+  spread: 360,
+  spreadOffset: 0,
+  size: { min: 1, max: 1.5 },
+  colors: ["#EF4444", "#B9FF14", "#3B82F6"],
+  count: 8,
+  easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+  fadeOut: true
+};
+var PARTICLE_PRESETS = {
+  /**
+   * Burst - Fast, enthusiastic explosion effect
+   * - Wide 360° spread
+   * - Fast animation (400ms)
+   * - Multiple colors
+   * - 12 particles
+   * - Perfect for: Likes, favorites, celebrations
+   */
+  burst: {
+    shape: "heart",
+    speed: 400,
+    distance: { min: 80, max: 120 },
+    spread: 360,
+    spreadOffset: 0,
+    size: { min: 1, max: 1.5 },
+    colors: ["#EF4444", "#F59E0B", "#3B82F6"],
+    count: 12,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    fadeOut: true
+  },
+  /**
+   * Fountain - Upward spray effect
+   * - 120° upward spread
+   * - Medium animation (600ms)
+   * - Cool colors (blue, purple, pink)
+   * - 10 particles
+   * - Perfect for: Achievements, upgrades, success
+   */
+  fountain: {
+    shape: "circle",
+    speed: 600,
+    distance: { min: 60, max: 100 },
+    spread: 120,
+    spreadOffset: -90,
+    // Upward
+    size: { min: 0.8, max: 1.2 },
+    colors: ["#3B82F6", "#8B5CF6", "#EC4899"],
+    count: 10,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    fadeOut: true
+  },
+  /**
+   * Confetti - Colorful celebration effect
+   * - Full 360° spread
+   * - Slow animation (800ms)
+   * - Rainbow colors
+   * - 15 particles
+   * - Perfect for: Milestones, victories, special events
+   */
+  confetti: {
+    shape: "square",
+    speed: 800,
+    distance: { min: 70, max: 110 },
+    spread: 360,
+    spreadOffset: 0,
+    size: { min: 0.6, max: 1.4 },
+    colors: ["#EF4444", "#F59E0B", "#10B981", "#3B82F6", "#8B5CF6", "#EC4899"],
+    count: 15,
+    easing: "ease-out",
+    fadeOut: true
+  },
+  /**
+   * Gentle - Subtle, calm effect
+   * - 180° upward spread
+   * - Slow animation (700ms)
+   * - Soft red tones
+   * - 6 particles
+   * - Perfect for: Subtle interactions, quiet appreciation
+   */
+  gentle: {
+    shape: "heart",
+    speed: 700,
+    distance: { min: 40, max: 60 },
+    spread: 180,
+    spreadOffset: -90,
+    size: { min: 0.8, max: 1 },
+    colors: ["#EF4444", "#F87171"],
+    count: 6,
+    easing: "ease-in-out",
+    fadeOut: true
+  },
+  /**
+   * Fireworks - Explosive sparkle effect
+   * - Full 360° spread
+   * - Medium-fast animation (500ms)
+   * - Warm sparkle colors
+   * - 16 particles
+   * - Large size range
+   * - Perfect for: Big celebrations, major achievements
+   */
+  fireworks: {
+    shape: "sparkle",
+    speed: 500,
+    distance: { min: 100, max: 150 },
+    spread: 360,
+    spreadOffset: 0,
+    size: { min: 1.2, max: 2 },
+    colors: ["#FBBF24", "#F59E0B", "#EF4444", "#EC4899"],
+    count: 16,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    fadeOut: true
+  }
+};
+function getParticlePreset(preset) {
+  return PARTICLE_PRESETS[preset];
+}
+
+// src/LikeButton/useLikeButton.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/Particle/utils.ts
+function normalizeRange(value) {
+  return typeof value === "number" ? { min: value, max: value } : value;
+}
+function randomInRange(range) {
+  return range.min + Math.random() * (range.max - range.min);
+}
+function normalizeAngle(angle) {
+  const normalized = angle % 360;
+  const result = normalized < 0 ? normalized + 360 : normalized;
+  return result === 0 ? 0 : result;
+}
+function randomAngle(spread, offset) {
+  const angle = offset + Math.random() * spread;
+  return normalizeAngle(angle);
+}
+function mergeParticleConfig(base, override) {
+  if (!override) {
+    return base;
+  }
+  return {
+    ...base,
+    ...override
+  };
+}
+function resolveParticleConfig(preset, config) {
+  let resolved = { ...DEFAULT_PARTICLE_CONFIG };
+  if (preset) {
+    resolved = mergeParticleConfig(resolved, getParticlePreset(preset));
+  }
+  if (config) {
+    resolved = mergeParticleConfig(resolved, config);
+  }
+  return resolved;
+}
+
+// src/LikeButton/utils.ts
+var MAX_FILL_HEIGHT = 85;
+var ICON_SIZE_RATIO = 0.5;
+var MIN_HOVER_OFFSET = 2;
+var PARTICLE_CLEANUP_BUFFER_MS = 100;
+var WAVE_BACK_DURATION_S = 3;
+var WAVE_FRONT_DURATION_S = 1.5;
+var DEFAULT_STYLES = {
+  borderWidth: 4,
+  borderColor: "#111827",
+  shadowOffset: 8,
+  shadowColor: "#111827",
+  backgroundColor: "white"
+};
+function getShapeStyles(shape = "circle") {
+  if (typeof shape === "string") {
+    switch (shape) {
+      case "circle":
+        return { borderRadius: "9999px" };
+      case "rounded":
+        return { borderRadius: "1rem" };
+      case "square":
+        return { borderRadius: "0" };
+      default:
+        return { borderRadius: "9999px" };
+    }
+  }
+  const styles = {};
+  if (shape.clipPath) {
+    styles.clipPath = shape.clipPath;
+    styles.borderRadius = shape.borderRadius ?? "0";
+  } else if (shape.borderRadius) {
+    styles.borderRadius = shape.borderRadius;
+  }
+  return styles;
+}
+function computeHoverOffset(shadowOffset) {
+  return Math.max(shadowOffset / 2, MIN_HOVER_OFFSET);
+}
+function computeButtonStyles(size, mergedStyles, shapeStyles) {
+  return {
+    width: size,
+    height: size,
+    borderWidth: mergedStyles.borderWidth,
+    borderColor: mergedStyles.borderColor,
+    backgroundColor: mergedStyles.backgroundColor,
+    boxShadow: `${mergedStyles.shadowOffset}px ${mergedStyles.shadowOffset}px 0px ${mergedStyles.shadowColor}`,
+    ...shapeStyles
+  };
+}
+function computeHoverActiveVars(hoverShadowOffset, mergedStyles) {
+  const translateOnHover = mergedStyles.shadowOffset - hoverShadowOffset;
+  return {
+    "--shadow-offset": `${mergedStyles.shadowOffset}px`,
+    "--shadow-color": mergedStyles.shadowColor,
+    "--hover-shadow-offset": `${hoverShadowOffset}px`,
+    "--translate-hover": `${translateOnHover}px`
+  };
+}
+var CURSOR_SVGS = {
+  heart: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%23EF4444' stroke='%23111827' stroke-width='1.5'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>`,
+  star: `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%23FBBF24' stroke='%23111827' stroke-width='1.5'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>`,
+  "thumbs-up": `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%233B82F6' stroke='%23111827' stroke-width='1.5'><path d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/></svg>`
+};
+var DEFAULT_HOTSPOT = 16;
+function getCursorStyle(cursor = "heart") {
+  if (typeof cursor === "string") {
+    switch (cursor) {
+      case "pointer":
+        return "pointer";
+      case "none":
+        return "none";
+      case "heart":
+      case "star":
+      case "thumbs-up":
+        return `url("${CURSOR_SVGS[cursor]}") ${DEFAULT_HOTSPOT} ${DEFAULT_HOTSPOT}, pointer`;
+      default:
+        return "pointer";
+    }
+  }
+  const {
+    url,
+    hotspotX = DEFAULT_HOTSPOT,
+    hotspotY = DEFAULT_HOTSPOT,
+    fallback = "pointer"
+  } = cursor;
+  return `url("${url}") ${hotspotX} ${hotspotY}, ${fallback}`;
+}
+
+// src/LikeButton/useLikeButton.ts
+var LIKE_BUTTON_DEFAULTS = {
+  maxClicks: 1,
+  size: 96,
+  fillColor: "#EF4444",
+  waveColor: "#B91C1C"
+};
+function useLikeButton(options = {}) {
+  const {
+    clicks: externalClicks,
+    defaultClicks = 0,
+    maxClicks = LIKE_BUTTON_DEFAULTS.maxClicks,
+    onClick,
+    onChange,
+    onRightClick,
+    disabled: externalDisabled,
+    showParticles = true,
+    particlePreset,
+    particleConfig,
+    ariaLabel: customAriaLabel
+  } = options;
+  if (externalClicks !== void 0 && options.defaultClicks !== void 0) {
+    console.warn(
+      "LikeButton: `defaultClicks` is ignored when `clicks` is provided (controlled mode)."
+    );
+  }
+  const [internalClicks, setInternalClicks] = useState(defaultClicks);
+  const [particles, setParticles] = useState([]);
+  const timeoutRefs = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    return () => {
+      for (const timeoutId of timeoutRefs.current) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+  const clicks = externalClicks ?? internalClicks;
+  const isMaxed = clicks >= maxClicks;
+  const disabled = externalDisabled ?? isMaxed;
+  const spawnParticles = useCallback(() => {
+    if (!showParticles) return;
+    const config = resolveParticleConfig(particlePreset, particleConfig);
+    const distanceRange = normalizeRange(config.distance);
+    const sizeRange = normalizeRange(config.size);
+    const id = Date.now();
+    const newParticles = Array.from({ length: config.count }).map((_, i) => ({
+      id: `${id}-${i}`,
+      angle: randomAngle(config.spread, config.spreadOffset),
+      distance: randomInRange(distanceRange),
+      scale: randomInRange(sizeRange),
+      color: config.colors[Math.floor(Math.random() * config.colors.length)],
+      shape: config.shape,
+      speed: config.speed,
+      easing: config.easing,
+      fadeOut: config.fadeOut
+    }));
+    setParticles((prev) => [...prev, ...newParticles]);
+    const cleanupDelay = config.speed + PARTICLE_CLEANUP_BUFFER_MS;
+    const idsToRemove = new Set(newParticles.map((p) => p.id));
+    const timeoutId = setTimeout(() => {
+      setParticles((prev) => prev.filter((p) => !idsToRemove.has(p.id)));
+      timeoutRefs.current.delete(timeoutId);
+    }, cleanupDelay);
+    timeoutRefs.current.add(timeoutId);
+  }, [showParticles, particlePreset, particleConfig]);
+  const handleClick = useCallback(
+    (e) => {
+      if (disabled) return;
+      const newClicks = clicks + 1;
+      if (externalClicks === void 0) {
+        setInternalClicks(newClicks);
+      }
+      spawnParticles();
+      onChange?.(newClicks);
+      onClick?.(newClicks, e);
+    },
+    [disabled, clicks, externalClicks, spawnParticles, onChange, onClick]
+  );
+  const handleRightClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      onRightClick?.(clicks, e);
+    },
+    [disabled, clicks, onRightClick]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.shiftKey && e.key === "Enter") {
+        e.preventDefault();
+        if (disabled) return;
+        onRightClick?.(clicks, e);
+      }
+    },
+    [disabled, clicks, onRightClick]
+  );
+  const fillPercentage = clicks / maxClicks * 100;
+  const defaultAriaLabel = isMaxed ? "Thank you for your likes!" : `Like this content. ${maxClicks - clicks} clicks remaining`;
+  const ariaLabelState = {
+    isMaxed,
+    remaining: maxClicks - clicks,
+    clicks,
+    maxClicks
+  };
+  const computedAriaLabel = customAriaLabel === void 0 ? defaultAriaLabel : typeof customAriaLabel === "function" ? customAriaLabel(ariaLabelState) : customAriaLabel;
+  return {
+    clicks,
+    isMaxed,
+    disabled,
+    fillPercentage,
+    particles,
+    handleClick,
+    handleRightClick,
+    handleKeyDown,
+    ariaLabel: computedAriaLabel,
+    isPressed: clicks > 0,
+    hasRightClickAction: onRightClick !== void 0
+  };
+}
+
+// src/LikeButton/LikeButton.vanilla.tsx
+import { forwardRef, useId, useMemo } from "react";
+
+// src/Particle/shapes/CircleShape.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function CircleShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" })
+    }
+  );
+}
+
+// src/Particle/shapes/HeartShape.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function HeartShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx3("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
+    }
+  );
+}
+
+// src/Particle/shapes/SparkleShape.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SparkleShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx4("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5L12 2z" })
+    }
+  );
+}
+
+// src/Particle/shapes/SquareShape.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SquareShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" })
+    }
+  );
+}
+
+// src/Particle/shapes/StarShape.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function StarShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx6("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+    }
+  );
+}
+
+// src/Particle/shapes/utils.ts
+function getParticleShape(shape) {
+  if (typeof shape === "object" && "render" in shape) {
+    return ({ size, color, className }) => shape.render({ size, color, className });
+  }
+  switch (shape) {
+    case "heart":
+      return HeartShape;
+    case "star":
+      return StarShape;
+    case "circle":
+      return CircleShape;
+    case "square":
+      return SquareShape;
+    case "sparkle":
+      return SparkleShape;
+    default:
+      return HeartShape;
+  }
+}
+
+// src/Particle/useParticle.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useParticle({
+  angle,
+  distance,
+  scale,
+  speed,
+  easing,
+  fadeOut
+}) {
+  const [isAnimating, setIsAnimating] = useState2(false);
+  useEffect2(() => {
+    let cancelled = false;
+    let raf2;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        if (!cancelled) {
+          setIsAnimating(true);
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf1);
+      if (raf2 !== void 0) cancelAnimationFrame(raf2);
+    };
+  }, []);
+  const x = Math.cos(angle * Math.PI / 180) * distance;
+  const y = Math.sin(angle * Math.PI / 180) * distance;
+  return {
+    isAnimating,
+    x,
+    y,
+    transform: isAnimating ? `translate(${x}px, ${y}px) scale(${scale})` : "translate(0, 0) scale(1)",
+    opacity: isAnimating ? 0 : 1,
+    speed,
+    easing,
+    fadeOut
+  };
+}
+
+// src/Particle/Particle.vanilla.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ParticleVanilla({
+  angle,
+  distance,
+  scale,
+  color,
+  shape,
+  speed,
+  easing,
+  fadeOut
+}) {
+  const { transform, opacity } = useParticle({
+    angle,
+    distance,
+    scale,
+    speed,
+    easing,
+    fadeOut
+  });
+  const ShapeComponent = getParticleShape(shape);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "particle",
+      style: {
+        color,
+        transform,
+        opacity: fadeOut ? opacity : 1,
+        transitionDuration: `${speed}ms`,
+        transitionTimingFunction: easing
+      },
+      children: /* @__PURE__ */ jsx7(ShapeComponent, { size: 40, color, className: "particle__icon" })
+    }
+  );
+}
+
+// src/LikeButton/LikeButton.vanilla.tsx
+import { Fragment, jsx as jsx8, jsxs } from "react/jsx-runtime";
+var LikeButtonVanilla = forwardRef(
+  function LikeButtonVanilla2({
+    size = LIKE_BUTTON_DEFAULTS.size,
+    fillColor = LIKE_BUTTON_DEFAULTS.fillColor,
+    waveColor = LIKE_BUTTON_DEFAULTS.waveColor,
+    className = "",
+    showParticles = true,
+    showWaves = true,
+    renderIcon,
+    shape = "circle",
+    styles = {},
+    cursor = "heart",
+    minFillPercent = 0,
+    ...hookOptions
+  }, ref) {
+    const clampedMinFill = Math.max(0, Math.min(MAX_FILL_HEIGHT, minFillPercent));
+    const reactId = useId();
+    const buttonId = `like-button${reactId.replace(/:/g, "-")}`;
+    const {
+      handleClick,
+      handleRightClick,
+      handleKeyDown,
+      disabled,
+      ariaLabel,
+      isPressed,
+      isMaxed,
+      fillPercentage,
+      particles,
+      hasRightClickAction
+    } = useLikeButton({ showParticles, ...hookOptions });
+    const mergedStyles = useMemo(() => ({ ...DEFAULT_STYLES, ...styles }), [styles]);
+    const shapeStyles = useMemo(() => getShapeStyles(shape), [shape]);
+    const buttonStyle = useMemo(
+      () => computeButtonStyles(size, mergedStyles, shapeStyles),
+      [size, mergedStyles, shapeStyles]
+    );
+    const hoverShadowOffset = useMemo(
+      () => computeHoverOffset(mergedStyles.shadowOffset),
+      [mergedStyles.shadowOffset]
+    );
+    const hoverActiveVars = useMemo(
+      () => computeHoverActiveVars(hoverShadowOffset, mergedStyles),
+      [hoverShadowOffset, mergedStyles]
+    );
+    const cursorStyle = useMemo(
+      () => disabled ? "not-allowed" : getCursorStyle(cursor),
+      [cursor, disabled]
+    );
+    const iconSize = size * ICON_SIZE_RATIO;
+    const iconRenderProps = {
+      size: iconSize,
+      className: "like-button__icon",
+      isMaxed,
+      fillPercentage
+    };
+    const renderedIcon = renderIcon === null ? null : renderIcon === void 0 ? /* @__PURE__ */ jsx8(DefaultHeartIcon, { ...iconRenderProps }) : renderIcon(iconRenderProps);
+    return /* @__PURE__ */ jsxs("div", { className: "like-button-container", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id: buttonId,
+          type: "button",
+          onClick: handleClick,
+          onContextMenu: handleRightClick,
+          onKeyDown: handleKeyDown,
+          disabled,
+          "aria-label": ariaLabel,
+          "aria-pressed": isPressed,
+          "aria-disabled": disabled,
+          "aria-keyshortcuts": hasRightClickAction ? "Shift+Enter" : void 0,
+          style: { ...buttonStyle, ...hoverActiveVars, cursor: cursorStyle },
+          className: `like-button ${className}`.trim(),
+          children: [
+            /* @__PURE__ */ jsx8(
+              "div",
+              {
+                className: "like-button__fill",
+                style: {
+                  backgroundColor: fillColor,
+                  height: isMaxed ? "100%" : `${clampedMinFill + fillPercentage / 100 * (MAX_FILL_HEIGHT - clampedMinFill)}%`
+                },
+                children: showWaves && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx8("div", { className: "like-button__wave like-button__wave--back", children: [0, 1].map((i) => /* @__PURE__ */ jsx8(
+                    "svg",
+                    {
+                      className: "like-button__wave-svg",
+                      style: { color: waveColor },
+                      viewBox: "0 0 100 20",
+                      preserveAspectRatio: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx8("path", { d: "M0,10 Q25,0 50,10 T100,10 V20 H0 Z" })
+                    },
+                    i
+                  )) }),
+                  /* @__PURE__ */ jsx8("div", { className: "like-button__wave like-button__wave--front", children: [0, 1].map((i) => /* @__PURE__ */ jsx8(
+                    "svg",
+                    {
+                      className: "like-button__wave-svg",
+                      style: { color: fillColor },
+                      viewBox: "0 0 100 20",
+                      preserveAspectRatio: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx8("path", { d: "M0,10 Q25,5 50,10 T100,10 V20 H0 Z" })
+                    },
+                    i
+                  )) })
+                ] })
+              }
+            ),
+            renderedIcon
+          ]
+        }
+      ),
+      showParticles && /* @__PURE__ */ jsx8("div", { className: "like-button__particles", "aria-hidden": "true", children: particles.map((p) => /* @__PURE__ */ jsx8(ParticleVanilla, { ...p }, p.id)) })
+    ] });
+  }
+);
+
+export {
+  DefaultHeartIcon,
+  getParticleShape,
+  useParticle,
+  PARTICLE_PRESETS,
+  MAX_FILL_HEIGHT,
+  ICON_SIZE_RATIO,
+  WAVE_BACK_DURATION_S,
+  WAVE_FRONT_DURATION_S,
+  DEFAULT_STYLES,
+  getShapeStyles,
+  computeHoverOffset,
+  computeButtonStyles,
+  computeHoverActiveVars,
+  getCursorStyle,
+  LIKE_BUTTON_DEFAULTS,
+  useLikeButton,
+  LikeButtonVanilla
+};
+//# sourceMappingURL=chunk-VLFZGMEX.js.map