@jepepa/like-button 0.8.0 → 0.8.2

package/README.md

@@ -69,7 +69,7 @@ function App() {
 
 ### Built-in Presets
 
-Choose from 5 professionally designed particle effects:
+Choose from 5 designed particle effects:
 
 ```tsx
 // Quick explosion of hearts (12 particles)
@@ -90,7 +90,7 @@ Choose from 5 professionally designed particle effects:
 
 ### Custom Particle Configuration
 
-Fully customize particle behavior:
+Or fully customize particle behavior:
 
 ```tsx
 <LikeButton particleConfig={{

package/dist/{chunk-WTGBDIZW.js → chunk-BQEOACLZ.js}

@@ -830,12 +830,10 @@ function LikeButtonVanilla({
 
 export {
   DefaultHeartIcon,
-  useParticle,
-  Particle,
+  PARTICLE_PRESETS,
   LIKE_BUTTON_DEFAULTS,
   useLikeButton,
   LikeButton,
-  ParticleVanilla,
   LikeButtonVanilla
 };
-//# sourceMappingURL=chunk-WTGBDIZW.js.map
+//# sourceMappingURL=chunk-BQEOACLZ.js.map

package/dist/index.d.ts

@@ -182,6 +182,13 @@ interface ParticleConfig {
      */
     fadeOut?: boolean;
 }
+/**
+ * Preset configuration type.
+ * Used internally to define preset configurations.
+ */
+type ParticlePresetConfig = Required<Omit<ParticleConfig, "shape">> & {
+    shape: ParticleShapePreset;
+};
 
 /** Data structure for a single particle effect */
 interface ParticleData {
@@ -515,66 +522,18 @@ declare function LikeButton({ size, fillColor, waveColor, className, showParticl
  */
 declare function LikeButtonVanilla({ size, fillColor, waveColor, className, showParticles, renderIcon, shape, styles, cursor, minFillPercent, ...hookOptions }: LikeButtonVanillaProps): react_jsx_runtime.JSX.Element;
 
-/** Props for particle components */
-interface ParticleProps {
-    /** Angle in degrees (0-360) for particle direction */
-    angle: number;
-    /** Distance in pixels the particle travels */
-    distance: number;
-    /** Scale multiplier for particle size */
-    scale: number;
-    /** Color of the particle (hex or CSS color) */
-    color: string;
-    /** Particle shape (preset or custom) */
-    shape: ParticleShape;
-    /** Animation duration in milliseconds */
-    speed: number;
-    /** CSS easing function for animation */
-    easing: string;
-    /** Whether particle should fade out */
-    fadeOut: boolean;
-}
-/** Return type for the useParticle hook */
-interface UseParticleReturn {
-    /** Whether the animation has started */
-    isAnimating: boolean;
-    /** X position offset in pixels */
-    x: number;
-    /** Y position offset in pixels */
-    y: number;
-    /** Computed transform string */
-    transform: string;
-    /** Computed opacity value */
-    opacity: number;
-    /** Animation duration in milliseconds */
-    speed: number;
-    /** CSS easing function */
-    easing: string;
-    /** Whether to fade out */
-    fadeOut: boolean;
-}
 /**
- * Headless hook for particle animation logic.
- * Handles animation state and position calculations.
- */
-declare function useParticle({ angle, distance, scale, speed, easing, fadeOut, }: Pick<ParticleProps, "angle" | "distance" | "scale" | "speed" | "easing" | "fadeOut">): UseParticleReturn;
-
-/**
- * Particle - Animated particle for burst effects.
- * This version uses Tailwind CSS for styling.
+ * Built-in particle effect presets.
+ * Each preset provides a distinct visual effect optimized for different use cases.
  *
- * Supports multiple shapes (heart, star, circle, square, sparkle) and custom shapes.
- * Animation is fully configurable via speed, easing, and fadeOut props.
- */
-declare function Particle({ angle, distance, scale, color, shape, speed, easing, fadeOut, }: ParticleProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Particle - Animated particle for burst effects.
- * This version uses vanilla CSS (no Tailwind dependency).
+ * @example
+ * ```tsx
+ * import { PARTICLE_PRESETS } from '@jepepa/like-button';
  *
- * Supports multiple shapes (heart, star, circle, square, sparkle) and custom shapes.
- * Animation is fully configurable via speed, easing, and fadeOut props.
+ * // Use a preset directly
+ * const burstConfig = PARTICLE_PRESETS.burst;
+ * ```
  */
-declare function ParticleVanilla({ angle, distance, scale, color, shape, speed, easing, fadeOut, }: ParticleProps): react_jsx_runtime.JSX.Element;
+declare const PARTICLE_PRESETS: Record<ParticlePreset, ParticlePresetConfig>;
 
-export { type BaseLikeButtonProps, type Cursor, type CursorPreset, type CustomCursor, type CustomShape, DefaultHeartIcon, type IconRenderProps, LIKE_BUTTON_DEFAULTS, LikeButton, type LikeButtonProps, LikeButtonVanilla, type LikeButtonVanillaProps, Particle, type ParticleData, type ParticleProps, ParticleVanilla, type Shape, type ShapePreset, type StyleOverrides, type UseLikeButtonOptions, type UseLikeButtonReturn, type UseParticleReturn, LikeButton as default, useLikeButton, useParticle };
+export { type BaseLikeButtonProps, type Cursor, type CursorPreset, type CustomCursor, type CustomParticleShape, type CustomShape, DefaultHeartIcon, type IconRenderProps, LIKE_BUTTON_DEFAULTS, LikeButton, type LikeButtonProps, LikeButtonVanilla, type LikeButtonVanillaProps, PARTICLE_PRESETS, type ParticleConfig, type ParticleData, type ParticlePreset, type ParticleShape, type ParticleShapePreset, type ParticleShapeProps, type Range, type Shape, type ShapePreset, type StyleOverrides, type UseLikeButtonOptions, type UseLikeButtonReturn, LikeButton as default, useLikeButton };

package/dist/index.js

@@ -3,20 +3,16 @@ import {
   LIKE_BUTTON_DEFAULTS,
   LikeButton,
   LikeButtonVanilla,
-  Particle,
-  ParticleVanilla,
-  useLikeButton,
-  useParticle
-} from "./chunk-WTGBDIZW.js";
+  PARTICLE_PRESETS,
+  useLikeButton
+} from "./chunk-BQEOACLZ.js";
 export {
   DefaultHeartIcon,
   LIKE_BUTTON_DEFAULTS,
   LikeButton,
   LikeButtonVanilla,
-  Particle,
-  ParticleVanilla,
+  PARTICLE_PRESETS,
   LikeButton as default,
-  useLikeButton,
-  useParticle
+  useLikeButton
 };
 //# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -0,0 +1,161 @@
+/* LikeButton Vanilla CSS - No Tailwind dependency */
+
+/* ============================================
+   Animations
+   ============================================ */
+
+@keyframes wave-scroll-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes wave-scroll-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* ============================================
+   Container
+   ============================================ */
+
+.like-button-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* ============================================
+   Button Base
+   Note: border-radius, border, box-shadow, and
+   background-color are set via inline styles
+   to support customization props
+   ============================================ */
+
+.like-button {
+  position: relative;
+  overflow: hidden;
+  z-index: 10;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+  cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath 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'/%3E%3C/svg%3E"),
+    pointer;
+}
+
+/* ============================================
+   Focus States
+   ============================================ */
+
+.like-button:focus {
+  outline: none;
+}
+
+.like-button:focus-visible {
+  outline: 4px solid #111827;
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Disabled State
+   ============================================ */
+
+.like-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.like-button:disabled:hover {
+  transform: none;
+}
+
+/* ============================================
+   Liquid Fill
+   ============================================ */
+
+.like-button__fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  transition: height 0.5s ease-out;
+}
+
+/* ============================================
+   Wave Containers
+   ============================================ */
+
+.like-button__wave {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: 200%;
+  height: 16px;
+  display: flex;
+}
+
+.like-button__wave--back {
+  animation: wave-scroll-left 3s linear infinite;
+}
+
+.like-button__wave--front {
+  animation: wave-scroll-right 1.5s linear infinite;
+}
+
+.like-button__wave-svg {
+  width: 50%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* ============================================
+   Icon
+   ============================================ */
+
+.like-button__icon {
+  position: relative;
+  z-index: 20;
+  transition: color 0.3s ease;
+  pointer-events: none;
+}
+
+/* ============================================
+   Particles Container
+   ============================================ */
+
+.like-button__particles {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* Particle Vanilla CSS - No Tailwind dependency */
+
+.particle {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  /* Transition properties (duration, timing-function) are set inline via style prop */
+  transition-property: transform, opacity;
+}
+
+.particle__icon {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+

package/dist/vanilla.d.ts

@@ -1,2 +1,2 @@
-export { BaseLikeButtonProps, Cursor, CursorPreset, CustomCursor, CustomShape, DefaultHeartIcon, IconRenderProps, LIKE_BUTTON_DEFAULTS, LikeButton, LikeButtonProps, LikeButtonVanilla, LikeButtonVanillaProps, Particle, ParticleData, ParticleProps, ParticleVanilla, Shape, ShapePreset, StyleOverrides, UseLikeButtonOptions, UseLikeButtonReturn, UseParticleReturn, LikeButtonVanilla as default, useLikeButton, useParticle } from './index.js';
+export { BaseLikeButtonProps, Cursor, CursorPreset, CustomCursor, CustomParticleShape, CustomShape, DefaultHeartIcon, IconRenderProps, LIKE_BUTTON_DEFAULTS, LikeButton, LikeButtonProps, LikeButtonVanilla, LikeButtonVanillaProps, PARTICLE_PRESETS, ParticleConfig, ParticleData, ParticlePreset, ParticleShape, ParticleShapePreset, ParticleShapeProps, Range, Shape, ShapePreset, StyleOverrides, UseLikeButtonOptions, UseLikeButtonReturn, LikeButtonVanilla as default, useLikeButton } from './index.js';
 import 'react/jsx-runtime';

package/dist/vanilla.js

@@ -3,20 +3,16 @@ import {
   LIKE_BUTTON_DEFAULTS,
   LikeButton,
   LikeButtonVanilla,
-  Particle,
-  ParticleVanilla,
-  useLikeButton,
-  useParticle
-} from "./chunk-WTGBDIZW.js";
+  PARTICLE_PRESETS,
+  useLikeButton
+} from "./chunk-BQEOACLZ.js";
 export {
   DefaultHeartIcon,
   LIKE_BUTTON_DEFAULTS,
   LikeButton,
   LikeButtonVanilla,
-  Particle,
-  ParticleVanilla,
+  PARTICLE_PRESETS,
   LikeButtonVanilla as default,
-  useLikeButton,
-  useParticle
+  useLikeButton
 };
 //# sourceMappingURL=vanilla.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jepepa/like-button",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Animated like button with liquid fill and particle effects",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,13 +14,14 @@
     "./vanilla": {
       "types": "./dist/vanilla.d.ts",
       "import": "./dist/vanilla.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cat src/LikeButton/LikeButton.vanilla.css src/Particle/Particle.vanilla.css > dist/styles.css",
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",