@jepepa/like-button 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -69,7 +69,7 @@ function App() {
69
69
 
70
70
  ### Built-in Presets
71
71
 
72
- Choose from 5 professionally designed particle effects:
72
+ Choose from 5 designed particle effects:
73
73
 
74
74
  ```tsx
75
75
  // Quick explosion of hearts (12 particles)
@@ -90,7 +90,7 @@ Choose from 5 professionally designed particle effects:
90
90
 
91
91
  ### Custom Particle Configuration
92
92
 
93
- Fully customize particle behavior:
93
+ Or fully customize particle behavior:
94
94
 
95
95
  ```tsx
96
96
  <LikeButton particleConfig={{
@@ -830,12 +830,10 @@ function LikeButtonVanilla({
830
830
 
831
831
  export {
832
832
  DefaultHeartIcon,
833
- useParticle,
834
- Particle,
833
+ PARTICLE_PRESETS,
835
834
  LIKE_BUTTON_DEFAULTS,
836
835
  useLikeButton,
837
836
  LikeButton,
838
- ParticleVanilla,
839
837
  LikeButtonVanilla
840
838
  };
841
- //# sourceMappingURL=chunk-WTGBDIZW.js.map
839
+ //# sourceMappingURL=chunk-BQEOACLZ.js.map
package/dist/index.d.ts CHANGED
@@ -182,6 +182,13 @@ interface ParticleConfig {
182
182
  */
183
183
  fadeOut?: boolean;
184
184
  }
185
+ /**
186
+ * Preset configuration type.
187
+ * Used internally to define preset configurations.
188
+ */
189
+ type ParticlePresetConfig = Required<Omit<ParticleConfig, "shape">> & {
190
+ shape: ParticleShapePreset;
191
+ };
185
192
 
186
193
  /** Data structure for a single particle effect */
187
194
  interface ParticleData {
@@ -515,66 +522,18 @@ declare function LikeButton({ size, fillColor, waveColor, className, showParticl
515
522
  */
516
523
  declare function LikeButtonVanilla({ size, fillColor, waveColor, className, showParticles, renderIcon, shape, styles, cursor, minFillPercent, ...hookOptions }: LikeButtonVanillaProps): react_jsx_runtime.JSX.Element;
517
524
 
518
- /** Props for particle components */
519
- interface ParticleProps {
520
- /** Angle in degrees (0-360) for particle direction */
521
- angle: number;
522
- /** Distance in pixels the particle travels */
523
- distance: number;
524
- /** Scale multiplier for particle size */
525
- scale: number;
526
- /** Color of the particle (hex or CSS color) */
527
- color: string;
528
- /** Particle shape (preset or custom) */
529
- shape: ParticleShape;
530
- /** Animation duration in milliseconds */
531
- speed: number;
532
- /** CSS easing function for animation */
533
- easing: string;
534
- /** Whether particle should fade out */
535
- fadeOut: boolean;
536
- }
537
- /** Return type for the useParticle hook */
538
- interface UseParticleReturn {
539
- /** Whether the animation has started */
540
- isAnimating: boolean;
541
- /** X position offset in pixels */
542
- x: number;
543
- /** Y position offset in pixels */
544
- y: number;
545
- /** Computed transform string */
546
- transform: string;
547
- /** Computed opacity value */
548
- opacity: number;
549
- /** Animation duration in milliseconds */
550
- speed: number;
551
- /** CSS easing function */
552
- easing: string;
553
- /** Whether to fade out */
554
- fadeOut: boolean;
555
- }
556
525
  /**
557
- * Headless hook for particle animation logic.
558
- * Handles animation state and position calculations.
559
- */
560
- declare function useParticle({ angle, distance, scale, speed, easing, fadeOut, }: Pick<ParticleProps, "angle" | "distance" | "scale" | "speed" | "easing" | "fadeOut">): UseParticleReturn;
561
-
562
- /**
563
- * Particle - Animated particle for burst effects.
564
- * This version uses Tailwind CSS for styling.
526
+ * Built-in particle effect presets.
527
+ * Each preset provides a distinct visual effect optimized for different use cases.
565
528
  *
566
- * Supports multiple shapes (heart, star, circle, square, sparkle) and custom shapes.
567
- * Animation is fully configurable via speed, easing, and fadeOut props.
568
- */
569
- declare function Particle({ angle, distance, scale, color, shape, speed, easing, fadeOut, }: ParticleProps): react_jsx_runtime.JSX.Element;
570
-
571
- /**
572
- * Particle - Animated particle for burst effects.
573
- * This version uses vanilla CSS (no Tailwind dependency).
529
+ * @example
530
+ * ```tsx
531
+ * import { PARTICLE_PRESETS } from '@jepepa/like-button';
574
532
  *
575
- * Supports multiple shapes (heart, star, circle, square, sparkle) and custom shapes.
576
- * Animation is fully configurable via speed, easing, and fadeOut props.
533
+ * // Use a preset directly
534
+ * const burstConfig = PARTICLE_PRESETS.burst;
535
+ * ```
577
536
  */
578
- declare function ParticleVanilla({ angle, distance, scale, color, shape, speed, easing, fadeOut, }: ParticleProps): react_jsx_runtime.JSX.Element;
537
+ declare const PARTICLE_PRESETS: Record<ParticlePreset, ParticlePresetConfig>;
579
538
 
580
- 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 };
539
+ 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 CHANGED
@@ -3,20 +3,16 @@ import {
3
3
  LIKE_BUTTON_DEFAULTS,
4
4
  LikeButton,
5
5
  LikeButtonVanilla,
6
- Particle,
7
- ParticleVanilla,
8
- useLikeButton,
9
- useParticle
10
- } from "./chunk-WTGBDIZW.js";
6
+ PARTICLE_PRESETS,
7
+ useLikeButton
8
+ } from "./chunk-BQEOACLZ.js";
11
9
  export {
12
10
  DefaultHeartIcon,
13
11
  LIKE_BUTTON_DEFAULTS,
14
12
  LikeButton,
15
13
  LikeButtonVanilla,
16
- Particle,
17
- ParticleVanilla,
14
+ PARTICLE_PRESETS,
18
15
  LikeButton as default,
19
- useLikeButton,
20
- useParticle
16
+ useLikeButton
21
17
  };
22
18
  //# sourceMappingURL=index.js.map
package/dist/vanilla.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- 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';
1
+ 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';
2
2
  import 'react/jsx-runtime';
package/dist/vanilla.js CHANGED
@@ -3,20 +3,16 @@ import {
3
3
  LIKE_BUTTON_DEFAULTS,
4
4
  LikeButton,
5
5
  LikeButtonVanilla,
6
- Particle,
7
- ParticleVanilla,
8
- useLikeButton,
9
- useParticle
10
- } from "./chunk-WTGBDIZW.js";
6
+ PARTICLE_PRESETS,
7
+ useLikeButton
8
+ } from "./chunk-BQEOACLZ.js";
11
9
  export {
12
10
  DefaultHeartIcon,
13
11
  LIKE_BUTTON_DEFAULTS,
14
12
  LikeButton,
15
13
  LikeButtonVanilla,
16
- Particle,
17
- ParticleVanilla,
14
+ PARTICLE_PRESETS,
18
15
  LikeButtonVanilla as default,
19
- useLikeButton,
20
- useParticle
16
+ useLikeButton
21
17
  };
22
18
  //# sourceMappingURL=vanilla.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jepepa/like-button",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "Animated like button with liquid fill and particle effects",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",