@fmarlats/react-like-button 1.1.4

package/dist/index.cjs

@@ -0,0 +1,926 @@
+"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, {
+  DefaultHeartIcon: () => DefaultHeartIcon,
+  LIKE_BUTTON_DEFAULTS: () => LIKE_BUTTON_DEFAULTS,
+  LikeButton: () => LikeButton,
+  LikeButtonVanilla: () => LikeButtonVanilla,
+  PARTICLE_PRESETS: () => PARTICLE_PRESETS,
+  default: () => LikeButton,
+  useLikeButton: () => useLikeButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/LikeButton/DefaultHeartIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function DefaultHeartIcon({ size, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      style: {
+        width: size,
+        height: size,
+        stroke: "#111827",
+        strokeWidth: 2,
+        fill: "transparent"
+      },
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.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/LikeButton/LikeButton.tsx
+var import_react3 = require("react");
+
+// src/Particle/shapes/CircleShape.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CircleShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" })
+    }
+  );
+}
+
+// src/Particle/shapes/HeartShape.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function HeartShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SparkleShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SquareShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" })
+    }
+  );
+}
+
+// src/Particle/shapes/StarShape.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function StarShape({ size, color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      className: `fill-current ${className}`,
+      style: { color },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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
+var import_react = require("react");
+function useParticle({
+  angle,
+  distance,
+  scale,
+  speed,
+  easing,
+  fadeOut
+}) {
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    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.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Particle({
+  angle,
+  distance,
+  scale,
+  color,
+  shape,
+  speed,
+  easing,
+  fadeOut
+}) {
+  const { transform, opacity } = useParticle({
+    angle,
+    distance,
+    scale,
+    speed,
+    easing,
+    fadeOut
+  });
+  const ShapeComponent = getParticleShape(shape);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: "absolute w-10 h-10 transition-all",
+      style: {
+        color,
+        transform,
+        opacity: fadeOut ? opacity : 1,
+        transitionDuration: `${speed}ms`,
+        transitionTimingFunction: easing
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ShapeComponent, { size: 40, color, className: "w-full h-full" })
+    }
+  );
+}
+
+// src/LikeButton/useLikeButton.ts
+var import_react2 = require("react");
+
+// 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/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] = (0, import_react2.useState)(defaultClicks);
+  const [particles, setParticles] = (0, import_react2.useState)([]);
+  const timeoutRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      for (const timeoutId of timeoutRefs.current) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+  const clicks = externalClicks ?? internalClicks;
+  const isMaxed = clicks >= maxClicks;
+  const disabled = externalDisabled ?? isMaxed;
+  const spawnParticles = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      onRightClick?.(clicks, e);
+    },
+    [disabled, clicks, onRightClick]
+  );
+  const handleKeyDown = (0, import_react2.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.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BUTTON_BASE_CLASSES = "relative overflow-hidden z-10 border-solid flex items-center justify-center group transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-dark focus-visible:ring-offset-2";
+var WRAPPER_CLASSES = "relative inline-block";
+var FILL_CONTAINER_CLASSES = "absolute bottom-0 left-0 right-0 z-0 transition-[height] duration-500 ease-out";
+var WAVE_CONTAINER_CLASSES = "absolute bottom-full left-0 w-[200%] h-4 flex";
+var WAVE_SVG_CLASSES = "w-1/2 h-full fill-current";
+var PARTICLE_CONTAINER_CLASSES = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none";
+var LikeButton = (0, import_react3.forwardRef)(function LikeButton2({
+  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 = (0, import_react3.useId)();
+  const buttonId = `like-button${reactId.replace(/:/g, "-")}`;
+  const {
+    handleClick,
+    handleRightClick,
+    handleKeyDown,
+    disabled,
+    ariaLabel,
+    isPressed,
+    isMaxed,
+    fillPercentage,
+    particles,
+    hasRightClickAction
+  } = useLikeButton({ showParticles, ...hookOptions });
+  const mergedStyles = (0, import_react3.useMemo)(() => ({ ...DEFAULT_STYLES, ...styles }), [styles]);
+  const shapeStyles = (0, import_react3.useMemo)(() => getShapeStyles(shape), [shape]);
+  const buttonStyle = (0, import_react3.useMemo)(
+    () => computeButtonStyles(size, mergedStyles, shapeStyles),
+    [size, mergedStyles, shapeStyles]
+  );
+  const hoverShadowOffset = (0, import_react3.useMemo)(
+    () => computeHoverOffset(mergedStyles.shadowOffset),
+    [mergedStyles.shadowOffset]
+  );
+  const hoverActiveVars = (0, import_react3.useMemo)(
+    () => computeHoverActiveVars(hoverShadowOffset, mergedStyles),
+    [hoverShadowOffset, mergedStyles]
+  );
+  const cursorStyle = (0, import_react3.useMemo)(
+    () => disabled ? "not-allowed" : getCursorStyle(cursor),
+    [cursor, disabled]
+  );
+  const iconSize = size * ICON_SIZE_RATIO;
+  const iconRenderProps = {
+    size: iconSize,
+    className: "relative z-20 transition-colors duration-300 pointer-events-none",
+    isMaxed,
+    fillPercentage
+  };
+  const renderedIcon = renderIcon === null ? null : renderIcon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultHeartIcon, { ...iconRenderProps }) : renderIcon(iconRenderProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: WRAPPER_CLASSES, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        ref,
+        id: buttonId,
+        "data-like-button": true,
+        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: `${BUTTON_BASE_CLASSES} ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: FILL_CONTAINER_CLASSES,
+              style: {
+                backgroundColor: fillColor,
+                height: isMaxed ? "100%" : `${clampedMinFill + fillPercentage / 100 * (MAX_FILL_HEIGHT - clampedMinFill)}%`
+              },
+              children: showWaves && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    className: WAVE_CONTAINER_CLASSES,
+                    style: { animation: `wave-scroll-left ${WAVE_BACK_DURATION_S}s linear infinite` },
+                    children: [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "svg",
+                      {
+                        className: WAVE_SVG_CLASSES,
+                        style: { color: waveColor },
+                        viewBox: "0 0 100 20",
+                        preserveAspectRatio: "none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0,10 Q25,0 50,10 T100,10 V20 H0 Z" })
+                      },
+                      i
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    className: WAVE_CONTAINER_CLASSES,
+                    style: { animation: `wave-scroll-right ${WAVE_FRONT_DURATION_S}s linear infinite` },
+                    children: [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "svg",
+                      {
+                        className: WAVE_SVG_CLASSES,
+                        style: { color: fillColor },
+                        viewBox: "0 0 100 20",
+                        preserveAspectRatio: "none",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0,10 Q25,5 50,10 T100,10 V20 H0 Z" })
+                      },
+                      i
+                    ))
+                  }
+                )
+              ] })
+            }
+          ),
+          renderedIcon
+        ]
+      }
+    ),
+    showParticles && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: PARTICLE_CONTAINER_CLASSES, "aria-hidden": "true", children: particles.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Particle, { ...p }, p.id)) })
+  ] });
+});
+
+// src/LikeButton/LikeButton.vanilla.tsx
+var import_react4 = require("react");
+
+// src/Particle/Particle.vanilla.tsx
+var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: "particle",
+      style: {
+        color,
+        transform,
+        opacity: fadeOut ? opacity : 1,
+        transitionDuration: `${speed}ms`,
+        transitionTimingFunction: easing
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ShapeComponent, { size: 40, color, className: "particle__icon" })
+    }
+  );
+}
+
+// src/LikeButton/LikeButton.vanilla.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var LikeButtonVanilla = (0, import_react4.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 = (0, import_react4.useId)();
+    const buttonId = `like-button${reactId.replace(/:/g, "-")}`;
+    const {
+      handleClick,
+      handleRightClick,
+      handleKeyDown,
+      disabled,
+      ariaLabel,
+      isPressed,
+      isMaxed,
+      fillPercentage,
+      particles,
+      hasRightClickAction
+    } = useLikeButton({ showParticles, ...hookOptions });
+    const mergedStyles = (0, import_react4.useMemo)(() => ({ ...DEFAULT_STYLES, ...styles }), [styles]);
+    const shapeStyles = (0, import_react4.useMemo)(() => getShapeStyles(shape), [shape]);
+    const buttonStyle = (0, import_react4.useMemo)(
+      () => computeButtonStyles(size, mergedStyles, shapeStyles),
+      [size, mergedStyles, shapeStyles]
+    );
+    const hoverShadowOffset = (0, import_react4.useMemo)(
+      () => computeHoverOffset(mergedStyles.shadowOffset),
+      [mergedStyles.shadowOffset]
+    );
+    const hoverActiveVars = (0, import_react4.useMemo)(
+      () => computeHoverActiveVars(hoverShadowOffset, mergedStyles),
+      [hoverShadowOffset, mergedStyles]
+    );
+    const cursorStyle = (0, import_react4.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__ */ (0, import_jsx_runtime10.jsx)(DefaultHeartIcon, { ...iconRenderProps }) : renderIcon(iconRenderProps);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "like-button-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                className: "like-button__fill",
+                style: {
+                  backgroundColor: fillColor,
+                  height: isMaxed ? "100%" : `${clampedMinFill + fillPercentage / 100 * (MAX_FILL_HEIGHT - clampedMinFill)}%`
+                },
+                children: showWaves && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "like-button__wave like-button__wave--back", children: [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "svg",
+                    {
+                      className: "like-button__wave-svg",
+                      style: { color: waveColor },
+                      viewBox: "0 0 100 20",
+                      preserveAspectRatio: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,10 Q25,0 50,10 T100,10 V20 H0 Z" })
+                    },
+                    i
+                  )) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "like-button__wave like-button__wave--front", children: [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "svg",
+                    {
+                      className: "like-button__wave-svg",
+                      style: { color: fillColor },
+                      viewBox: "0 0 100 20",
+                      preserveAspectRatio: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,10 Q25,5 50,10 T100,10 V20 H0 Z" })
+                    },
+                    i
+                  )) })
+                ] })
+              }
+            ),
+            renderedIcon
+          ]
+        }
+      ),
+      showParticles && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "like-button__particles", "aria-hidden": "true", children: particles.map((p) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParticleVanilla, { ...p }, p.id)) })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultHeartIcon,
+  LIKE_BUTTON_DEFAULTS,
+  LikeButton,
+  LikeButtonVanilla,
+  PARTICLE_PRESETS,
+  useLikeButton
+});
+//# sourceMappingURL=index.cjs.map