@jepepa/like-button 0.8.0

package/dist/chunk-WTGBDIZW.js

@@ -0,0 +1,841 @@
+// 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/LikeButton/LikeButton.tsx
+import { 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, useState } from "react";
+function useParticle({
+  angle,
+  distance,
+  scale,
+  speed,
+  easing,
+  fadeOut
+}) {
+  const [isAnimating, setIsAnimating] = useState(false);
+  useEffect(() => {
+    const timer = requestAnimationFrame(() => setIsAnimating(true));
+    return () => cancelAnimationFrame(timer);
+  }, []);
+  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(0)",
+    opacity: isAnimating ? 0 : 1,
+    speed,
+    easing,
+    fadeOut
+  };
+}
+
+// src/Particle/Particle.tsx
+import { jsx as jsx7 } from "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__ */ jsx7(
+    "div",
+    {
+      className: "absolute w-10 h-10 transition-all",
+      style: {
+        color,
+        transform,
+        opacity: fadeOut ? opacity : 1,
+        transitionDuration: `${speed}ms`,
+        transitionTimingFunction: easing
+      },
+      children: /* @__PURE__ */ jsx7(ShapeComponent, { size: 40, color, className: "w-full h-full" })
+    }
+  );
+}
+
+// src/LikeButton/useLikeButton.ts
+import { useCallback, useState as useState2 } from "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/useLikeButton.ts
+var LIKE_BUTTON_DEFAULTS = {
+  maxClicks: 14,
+  size: 96,
+  fillColor: "#EF4444",
+  waveColor: "#B91C1C"
+};
+function useLikeButton(options = {}) {
+  const {
+    localClicks: externalLocalClicks,
+    maxClicks = LIKE_BUTTON_DEFAULTS.maxClicks,
+    onClick,
+    onRightClick,
+    disabled: externalDisabled,
+    showParticles = true,
+    particlePreset,
+    particleConfig,
+    ariaLabel: customAriaLabel
+  } = options;
+  const [internalLocalClicks, setInternalLocalClicks] = useState2(0);
+  const [particles, setParticles] = useState2([]);
+  const localClicks = externalLocalClicks ?? internalLocalClicks;
+  const isMaxed = localClicks >= 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 + 100;
+    setTimeout(() => {
+      setParticles((prev) => prev.filter((p) => !newParticles.find((np) => np.id === p.id)));
+    }, cleanupDelay);
+  }, [showParticles, particlePreset, particleConfig]);
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    const newLocalClicks = localClicks + 1;
+    if (externalLocalClicks === void 0) {
+      setInternalLocalClicks(newLocalClicks);
+    }
+    spawnParticles();
+    onClick?.(newLocalClicks);
+  }, [disabled, localClicks, externalLocalClicks, spawnParticles, onClick]);
+  const handleRightClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      onRightClick?.(localClicks);
+    },
+    [disabled, localClicks, onRightClick]
+  );
+  const fillPercentage = localClicks / maxClicks * 100;
+  const defaultAriaLabel = isMaxed ? "Thank you for your likes!" : `Like this content. ${maxClicks - localClicks} clicks remaining`;
+  return {
+    localClicks,
+    isMaxed,
+    disabled,
+    fillPercentage,
+    particles,
+    handleClick,
+    handleRightClick,
+    ariaLabel: customAriaLabel ?? defaultAriaLabel,
+    isPressed: localClicks > 0
+  };
+}
+
+// src/LikeButton/utils.ts
+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, 2);
+}
+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 generateDynamicStyles(buttonSelector, hoverShadowOffset, mergedStyles) {
+  const translateOnHover = mergedStyles.shadowOffset - hoverShadowOffset;
+  return `
+    ${buttonSelector}:hover:not(:disabled) {
+      box-shadow: ${hoverShadowOffset}px ${hoverShadowOffset}px 0px ${mergedStyles.shadowColor};
+      transform: translate(${translateOnHover}px, ${translateOnHover}px);
+    }
+    ${buttonSelector}:active:not(:disabled) {
+      box-shadow: none;
+      transform: translate(${mergedStyles.shadowOffset}px, ${mergedStyles.shadowOffset}px) scale(0.9);
+    }
+  `;
+}
+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/LikeButton.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var MAX_FILL_HEIGHT = 85;
+function LikeButton({
+  size = LIKE_BUTTON_DEFAULTS.size,
+  fillColor = LIKE_BUTTON_DEFAULTS.fillColor,
+  waveColor = LIKE_BUTTON_DEFAULTS.waveColor,
+  className = "",
+  showParticles = true,
+  renderIcon,
+  shape = "circle",
+  styles = {},
+  cursor = "heart",
+  minFillPercent = 0,
+  ...hookOptions
+}) {
+  const clampedMinFill = Math.max(0, Math.min(MAX_FILL_HEIGHT, minFillPercent));
+  const reactId = useId();
+  const buttonId = `like-button${reactId.replace(/:/g, "-")}`;
+  const {
+    handleClick,
+    handleRightClick,
+    disabled,
+    ariaLabel,
+    isPressed,
+    isMaxed,
+    fillPercentage,
+    particles
+  } = 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 dynamicStyles = useMemo(
+    () => `
+      @keyframes wave-scroll-left {
+        from { transform: translateX(0); }
+        to { transform: translateX(-50%); }
+      }
+      @keyframes wave-scroll-right {
+        from { transform: translateX(-50%); }
+        to { transform: translateX(0); }
+      }
+      ${generateDynamicStyles(`#${buttonId}`, hoverShadowOffset, mergedStyles)}
+    `,
+    [buttonId, hoverShadowOffset, mergedStyles]
+  );
+  const cursorStyle = useMemo(
+    () => disabled ? "not-allowed" : getCursorStyle(cursor),
+    [cursor, disabled]
+  );
+  const iconSize = size * 0.5;
+  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__ */ jsx8(DefaultHeartIcon, { ...iconRenderProps }) : renderIcon(iconRenderProps);
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx8("style", { children: dynamicStyles }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: buttonId,
+        type: "button",
+        onClick: handleClick,
+        onContextMenu: handleRightClick,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-pressed": isPressed,
+        "aria-disabled": disabled,
+        style: { ...buttonStyle, cursor: cursorStyle },
+        className: `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 ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 z-0 transition-[height] duration-500 ease-out",
+              style: {
+                backgroundColor: fillColor,
+                height: isMaxed ? "100%" : `${clampedMinFill + fillPercentage / 100 * (MAX_FILL_HEIGHT - clampedMinFill)}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    className: "absolute bottom-full left-0 w-[200%] h-4 flex",
+                    style: { animation: "wave-scroll-left 3s linear infinite" },
+                    children: [0, 1].map((i) => /* @__PURE__ */ jsx8(
+                      "svg",
+                      {
+                        className: "w-1/2 h-full fill-current",
+                        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: "absolute bottom-full left-0 w-[200%] h-4 flex",
+                    style: { animation: "wave-scroll-right 1.5s linear infinite" },
+                    children: [0, 1].map((i) => /* @__PURE__ */ jsx8(
+                      "svg",
+                      {
+                        className: "w-1/2 h-full fill-current",
+                        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: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none",
+        "aria-hidden": "true",
+        children: particles.map((p) => /* @__PURE__ */ jsx8(Particle, { ...p }, p.id))
+      }
+    )
+  ] });
+}
+
+// src/LikeButton/LikeButton.vanilla.tsx
+import { useId as useId2, useMemo as useMemo2 } from "react";
+
+// src/Particle/Particle.vanilla.tsx
+import { jsx as jsx9 } 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__ */ jsx9(
+    "div",
+    {
+      className: "particle",
+      style: {
+        color,
+        transform,
+        opacity: fadeOut ? opacity : 1,
+        transitionDuration: `${speed}ms`,
+        transitionTimingFunction: easing
+      },
+      children: /* @__PURE__ */ jsx9(ShapeComponent, { size: 40, color, className: "particle__icon" })
+    }
+  );
+}
+
+// src/LikeButton/LikeButton.vanilla.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAX_FILL_HEIGHT2 = 85;
+function LikeButtonVanilla({
+  size = LIKE_BUTTON_DEFAULTS.size,
+  fillColor = LIKE_BUTTON_DEFAULTS.fillColor,
+  waveColor = LIKE_BUTTON_DEFAULTS.waveColor,
+  className = "",
+  showParticles = true,
+  renderIcon,
+  shape = "circle",
+  styles = {},
+  cursor = "heart",
+  minFillPercent = 0,
+  ...hookOptions
+}) {
+  const clampedMinFill = Math.max(0, Math.min(MAX_FILL_HEIGHT2, minFillPercent));
+  const reactId = useId2();
+  const buttonId = `like-button${reactId.replace(/:/g, "-")}`;
+  const {
+    handleClick,
+    handleRightClick,
+    disabled,
+    ariaLabel,
+    isPressed,
+    isMaxed,
+    fillPercentage,
+    particles
+  } = useLikeButton({ showParticles, ...hookOptions });
+  const mergedStyles = useMemo2(() => ({ ...DEFAULT_STYLES, ...styles }), [styles]);
+  const shapeStyles = useMemo2(() => getShapeStyles(shape), [shape]);
+  const buttonStyle = useMemo2(
+    () => computeButtonStyles(size, mergedStyles, shapeStyles),
+    [size, mergedStyles, shapeStyles]
+  );
+  const hoverShadowOffset = useMemo2(
+    () => computeHoverOffset(mergedStyles.shadowOffset),
+    [mergedStyles.shadowOffset]
+  );
+  const dynamicStyles = useMemo2(
+    () => generateDynamicStyles(`#${buttonId}`, hoverShadowOffset, mergedStyles),
+    [buttonId, hoverShadowOffset, mergedStyles]
+  );
+  const cursorStyle = useMemo2(
+    () => disabled ? "not-allowed" : getCursorStyle(cursor),
+    [cursor, disabled]
+  );
+  const iconSize = size * 0.5;
+  const iconRenderProps = {
+    size: iconSize,
+    className: "like-button__icon",
+    isMaxed,
+    fillPercentage
+  };
+  const renderedIcon = renderIcon === null ? null : renderIcon === void 0 ? /* @__PURE__ */ jsx10(DefaultHeartIcon, { ...iconRenderProps }) : renderIcon(iconRenderProps);
+  return /* @__PURE__ */ jsxs2("div", { className: "like-button-container", children: [
+    /* @__PURE__ */ jsx10("style", { children: dynamicStyles }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        id: buttonId,
+        type: "button",
+        onClick: handleClick,
+        onContextMenu: handleRightClick,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-pressed": isPressed,
+        "aria-disabled": disabled,
+        style: { ...buttonStyle, cursor: cursorStyle },
+        className: `like-button ${className}`.trim(),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "like-button__fill",
+              style: {
+                backgroundColor: fillColor,
+                height: isMaxed ? "100%" : `${clampedMinFill + fillPercentage / 100 * (MAX_FILL_HEIGHT2 - clampedMinFill)}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx10("div", { className: "like-button__wave like-button__wave--back", children: [0, 1].map((i) => /* @__PURE__ */ jsx10(
+                  "svg",
+                  {
+                    className: "like-button__wave-svg",
+                    style: { color: waveColor },
+                    viewBox: "0 0 100 20",
+                    preserveAspectRatio: "none",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx10("path", { d: "M0,10 Q25,0 50,10 T100,10 V20 H0 Z" })
+                  },
+                  i
+                )) }),
+                /* @__PURE__ */ jsx10("div", { className: "like-button__wave like-button__wave--front", children: [0, 1].map((i) => /* @__PURE__ */ jsx10(
+                  "svg",
+                  {
+                    className: "like-button__wave-svg",
+                    style: { color: fillColor },
+                    viewBox: "0 0 100 20",
+                    preserveAspectRatio: "none",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx10("path", { d: "M0,10 Q25,5 50,10 T100,10 V20 H0 Z" })
+                  },
+                  i
+                )) })
+              ]
+            }
+          ),
+          renderedIcon
+        ]
+      }
+    ),
+    showParticles && /* @__PURE__ */ jsx10("div", { className: "like-button__particles", "aria-hidden": "true", children: particles.map((p) => /* @__PURE__ */ jsx10(ParticleVanilla, { ...p }, p.id)) })
+  ] });
+}
+
+export {
+  DefaultHeartIcon,
+  useParticle,
+  Particle,
+  LIKE_BUTTON_DEFAULTS,
+  useLikeButton,
+  LikeButton,
+  ParticleVanilla,
+  LikeButtonVanilla
+};
+//# sourceMappingURL=chunk-WTGBDIZW.js.map