@fmarlats/react-like-button 1.1.4

package/dist/vanilla.d.ts

@@ -0,0 +1,562 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+/**
+ * Particle System Type Definitions
+ *
+ * This file contains all type definitions for the enhanced particle effects system.
+ * Supports configurable shapes, animations, presets, and custom particle configurations.
+ */
+/**
+ * Built-in particle shape presets
+ *
+ * @example
+ * ```tsx
+ * <LikeButton particleConfig={{ shape: 'star' }} />
+ * <LikeButton particleConfig={{ shape: 'heart' }} />
+ * <LikeButton particleConfig={{ shape: 'sparkle' }} />
+ * ```
+ */
+type ParticleShapePreset = "heart" | "star" | "circle" | "square" | "sparkle";
+/**
+ * Props passed to particle shape render functions
+ *
+ * @example
+ * ```tsx
+ * const MyShape = ({ size, color, className }: ParticleShapeProps) => (
+ *   <svg width={size} height={size} className={className}>
+ *     <circle cx={size/2} cy={size/2} r={size/2} fill={color} />
+ *   </svg>
+ * );
+ * ```
+ */
+interface ParticleShapeProps {
+    /** Size of the shape in pixels */
+    size: number;
+    /** Color of the shape (hex or CSS color) */
+    color: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * Custom particle shape configuration
+ *
+ * @example
+ * ```tsx
+ * const customShape: CustomParticleShape = {
+ *   render: ({ size, color }) => (
+ *     <svg width={size} height={size}>
+ *       <polygon points="..." fill={color} />
+ *     </svg>
+ *   )
+ * };
+ *
+ * <LikeButton particleConfig={{ shape: customShape }} />
+ * ```
+ */
+interface CustomParticleShape {
+    /** Custom render function for the particle shape */
+    render: (props: ParticleShapeProps) => React.ReactNode;
+}
+/**
+ * Particle shape - either a preset string or custom shape config
+ *
+ * @example
+ * ```tsx
+ * // Using preset
+ * const shape1: ParticleShape = 'star';
+ *
+ * // Using custom shape
+ * const shape2: ParticleShape = {
+ *   render: (props) => <MyCustomShape {...props} />
+ * };
+ * ```
+ */
+type ParticleShape = ParticleShapePreset | CustomParticleShape;
+/**
+ * Built-in particle effect presets
+ *
+ * - **burst**: Quick explosion of hearts in all directions (12 particles)
+ * - **fountain**: Upward spray effect (10 particles)
+ * - **confetti**: Colorful celebration with mixed shapes (15 particles)
+ * - **gentle**: Subtle floating effect (6 particles)
+ * - **fireworks**: Explosive sparkle effect (16 particles)
+ *
+ * @example
+ * ```tsx
+ * <LikeButton particlePreset="burst" />
+ * <LikeButton particlePreset="confetti" />
+ * <LikeButton particlePreset="fireworks" />
+ * ```
+ */
+type ParticlePreset = "burst" | "fountain" | "confetti" | "gentle" | "fireworks";
+/**
+ * Range configuration for numeric values
+ *
+ * @example
+ * ```tsx
+ * const distanceRange: Range = { min: 80, max: 120 };
+ * const sizeRange: Range = { min: 1.0, max: 2.0 };
+ *
+ * <LikeButton particleConfig={{
+ *   distance: distanceRange,
+ *   size: sizeRange
+ * }} />
+ * ```
+ */
+interface Range {
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+}
+/**
+ * Complete particle configuration interface.
+ * All fields are optional - defaults will be applied.
+ *
+ * @example
+ * ```tsx
+ * const config: ParticleConfig = {
+ *   shape: 'star',
+ *   colors: ['#FFD700', '#FFA500'],
+ *   count: 12,
+ *   speed: 600,
+ *   distance: { min: 80, max: 120 },
+ *   spread: 180,
+ *   spreadOffset: -90,
+ * };
+ * ```
+ */
+interface ParticleConfig {
+    /**
+     * Particle shape - preset name or custom shape config
+     * @default 'heart'
+     */
+    shape?: ParticleShape;
+    /**
+     * Array of colors for particles (randomly selected)
+     * @default ['#EF4444', '#B9FF14', '#3B82F6']
+     */
+    colors?: string[];
+    /**
+     * Number of particles to spawn per click
+     * @default 8
+     */
+    count?: number;
+    /**
+     * Size range for particles (scale multiplier)
+     * Can be a single number or a range
+     * @default { min: 1.0, max: 1.5 }
+     */
+    size?: number | Range;
+    /**
+     * Animation duration in milliseconds
+     * @default 500
+     */
+    speed?: number;
+    /**
+     * Distance particles travel in pixels
+     * Can be a single number or a range
+     * @default { min: 60, max: 100 }
+     */
+    distance?: number | Range;
+    /**
+     * Spread angle in degrees (0-360)
+     * 360 = full circle, 180 = semicircle, etc.
+     * @default 360
+     */
+    spread?: number;
+    /**
+     * Starting angle offset in degrees
+     * 0 = right, 90 = down, 180 = left, 270 = up
+     * @default 0
+     */
+    spreadOffset?: number;
+    /**
+     * CSS easing function for particle animation
+     * @default 'cubic-bezier(0.22, 1, 0.36, 1)'
+     */
+    easing?: string;
+    /**
+     * Whether particles fade out during animation
+     * @default true
+     */
+    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 {
+    id: string;
+    angle: number;
+    distance: number;
+    scale: number;
+    color: string;
+    shape: ParticleShape;
+    speed: number;
+    easing: string;
+    fadeOut: boolean;
+}
+/**
+ * State object passed to dynamic aria-label functions.
+ * Enables internationalization (i18n) support for accessibility labels.
+ */
+interface AriaLabelState {
+    /** Whether the maximum clicks have been reached */
+    isMaxed: boolean;
+    /** Number of clicks remaining before max */
+    remaining: number;
+    /** Current number of clicks by the user */
+    clicks: number;
+    /** Maximum number of clicks allowed */
+    maxClicks: number;
+}
+/**
+ * Aria label can be either:
+ * - A static string for simple use cases
+ * - A function that receives state for dynamic/i18n labels
+ *
+ * @example
+ * ```tsx
+ * // Static string
+ * ariaLabel="Like this post"
+ *
+ * // Dynamic function for i18n
+ * ariaLabel={({ isMaxed, remaining }) =>
+ *   isMaxed ? t('likes.maxed') : t('likes.remaining', { count: remaining })
+ * }
+ * ```
+ */
+type AriaLabelProp = string | ((state: AriaLabelState) => string);
+/** Options for the useLikeButton hook */
+interface UseLikeButtonOptions {
+    /** Current click count (controlled mode). If not provided, internal state is used. */
+    clicks?: number;
+    /**
+     * Initial click count for uncontrolled mode.
+     * Only used on first render; ignored if `clicks` prop is provided.
+     * @default 0
+     */
+    defaultClicks?: number;
+    /** Maximum number of clicks allowed per user */
+    maxClicks?: number;
+    /**
+     * Callback when button is clicked.
+     * @param clicks - The current click count, after increment
+     * @param event - The mouse event that triggered the click
+     */
+    onClick?: (clicks: number, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback when click count changes. Simpler alternative to onClick for controlled mode.
+     * Called with just the new count, ideal for state setters like `onChange={setClicks}`.
+     * @param clicks - The new click count
+     */
+    onChange?: (clicks: number) => void;
+    /**
+     * Callback when button is right-clicked. Also triggered by Shift+Enter for keyboard accessibility.
+     * @param clicks - The current click count, not incremented as right-click does not increment
+     * @param event - The mouse or keyboard event that triggered the action
+     */
+    onRightClick?: (clicks: number, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /**
+     * Show particle effects on click.
+     * When false, no particles are spawned or rendered.
+     * @default true
+     */
+    showParticles?: boolean;
+    /**
+     * Custom aria-label override. Accepts either a static string or a function
+     * that receives the current state for dynamic/i18n labels.
+     *
+     * @example
+     * ```tsx
+     * // Static string
+     * ariaLabel="Like this post"
+     *
+     * // Dynamic function for i18n support
+     * ariaLabel={({ isMaxed, remaining }) =>
+     *   isMaxed ? t('likes.maxed') : t('likes.remaining', { count: remaining })
+     * }
+     * ```
+     */
+    ariaLabel?: AriaLabelProp;
+    /**
+     * Particle effect preset (burst, fountain, confetti, gentle, fireworks)
+     * @example
+     * ```tsx
+     * useLikeButton({ particlePreset: 'burst' })
+     * ```
+     */
+    particlePreset?: ParticlePreset;
+    /**
+     * Custom particle configuration (overrides preset)
+     * @example
+     * ```tsx
+     * useLikeButton({
+     *   particleConfig: {
+     *     shape: 'star',
+     *     colors: ['#FFD700', '#FFA500'],
+     *     count: 12,
+     *   }
+     * })
+     * ```
+     */
+    particleConfig?: Partial<ParticleConfig>;
+}
+/** Default values */
+declare const LIKE_BUTTON_DEFAULTS: {
+    readonly maxClicks: 1;
+    readonly size: 96;
+    readonly fillColor: "#EF4444";
+    readonly waveColor: "#B91C1C";
+};
+/** Return type for the useLikeButton hook */
+interface UseLikeButtonReturn {
+    /** Current click count */
+    clicks: number;
+    /** Whether max clicks reached */
+    isMaxed: boolean;
+    /** Whether button is disabled */
+    disabled: boolean;
+    /** Fill percentage (0-100) */
+    fillPercentage: number;
+    /** Active particles to render */
+    particles: ParticleData[];
+    /** Click handler for the button */
+    handleClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Right-click handler for the button */
+    handleRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Keyboard handler for accessibility.
+     * Triggers onRightClick when Shift+Enter is pressed.
+     */
+    handleKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Aria label for accessibility */
+    ariaLabel: string;
+    /** Whether button has been pressed */
+    isPressed: boolean;
+    /** Whether onRightClick is provided (for aria-keyshortcuts) */
+    hasRightClickAction: boolean;
+}
+/**
+ * Headless hook for LikeButton logic.
+ * Handles state management, particle spawning, and accessibility.
+ *
+ * @example
+ * ```tsx
+ * const { handleClick, clicks, particles, ariaLabel } = useLikeButton({
+ *   maxClicks: 10,
+ *   onClick: (count, event) => {
+ *     console.log('Clicked!', count)
+ *     // Access event if needed
+ *     event.stopPropagation()
+ *   },
+ * });
+ * ```
+ */
+declare function useLikeButton(options?: UseLikeButtonOptions): UseLikeButtonReturn;
+
+/** Props passed to custom icon render function */
+interface IconRenderProps {
+    /** Suggested icon size in pixels (50% of button size by default) */
+    size: number;
+    /** Base CSS classes for positioning and transitions */
+    className: string;
+    /** Whether button is at max clicks */
+    isMaxed: boolean;
+    /** Current fill percentage (0-100) */
+    fillPercentage: number;
+}
+/** Preset shape values */
+type ShapePreset = "circle" | "rounded" | "square";
+/** Custom shape configuration */
+interface CustomShape {
+    /** CSS border-radius value (e.g., "1rem", "50%", "1rem 2rem") */
+    borderRadius?: string;
+    /** CSS clip-path value for custom shapes (e.g., "polygon(...)", "circle(...)") */
+    clipPath?: string;
+}
+/** Shape prop type - either a preset or custom configuration */
+type Shape = ShapePreset | CustomShape;
+/** Preset cursor values */
+type CursorPreset = "heart" | "star" | "thumbs-up" | "pointer" | "none";
+/** Custom cursor configuration */
+interface CustomCursor {
+    /**
+     * Cursor URL - can be a data URL (SVG/image) or external URL.
+     * @example "data:image/svg+xml;utf8,<svg>...</svg>"
+     * @example "/cursors/my-cursor.png"
+     */
+    url: string;
+    /** Hotspot X coordinate (default: 16) */
+    hotspotX?: number;
+    /** Hotspot Y coordinate (default: 16) */
+    hotspotY?: number;
+    /** Fallback cursor if custom cursor fails to load (default: "pointer") */
+    fallback?: "pointer" | "default" | "grab";
+}
+/**
+ * Cursor prop type - either a preset string or custom configuration.
+ * - "heart" (default): Heart-shaped cursor
+ * - "star": Star-shaped cursor
+ * - "thumbs-up": Thumbs up cursor
+ * - "pointer": Standard pointer cursor (disables custom cursor)
+ * - "none": Hides cursor entirely
+ * - CustomCursor: Custom cursor with URL and hotspot configuration
+ */
+type Cursor = CursorPreset | CustomCursor;
+/** Override brutalist styling */
+interface StyleOverrides {
+    /** Border width in pixels (default: 4) */
+    borderWidth?: number;
+    /** Border color (default: "#111827") */
+    borderColor?: string;
+    /** Shadow offset in pixels (default: 8) */
+    shadowOffset?: number;
+    /** Shadow color (default: "#111827") */
+    shadowColor?: string;
+    /** Background color (default: "white") */
+    backgroundColor?: string;
+}
+/**
+ * Base props shared between Tailwind and Vanilla CSS versions.
+ * Both versions accept identical props for API consistency.
+ */
+interface BaseLikeButtonProps extends UseLikeButtonOptions {
+    /** Button size in pixels */
+    size?: number;
+    /** Fill color for the liquid effect */
+    fillColor?: string;
+    /** Wave color (darker shade for back wave) */
+    waveColor?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /**
+     * Show animated wave effect on top of the liquid fill.
+     * When false, the fill displays as a flat color without wave animation.
+     * @default true
+     */
+    showWaves?: boolean;
+    /**
+     * Initial/minimum fill percentage shown even before any clicks.
+     * Useful for custom shapes with narrow bottoms (e.g., hearts, diamonds)
+     * where low fill percentages may be invisible.
+     *
+     * Valid range: 0-85 (values above 85 will be clamped to 85)
+     * @default 0
+     * @example
+     * // Show 15% minimum fill for a heart shape
+     * <LikeButton minFillPercent={15} shape={{ clipPath: "polygon(...)" }} />
+     */
+    minFillPercent?: number;
+    /**
+     * Custom icon render function.
+     * - If undefined: renders default heart icon
+     * - If null: renders no icon
+     * - If function: calls with IconRenderProps
+     */
+    renderIcon?: ((props: IconRenderProps) => React.ReactNode) | null;
+    /**
+     * Button shape.
+     * - Presets: "circle" (default), "rounded", "square"
+     * - Custom: { borderRadius?: string, clipPath?: string }
+     */
+    shape?: Shape;
+    /** Override brutalist styling (border, shadow, background) */
+    styles?: StyleOverrides;
+    /**
+     * Cursor displayed when hovering over the button.
+     * - "heart" (default): Heart-shaped cursor
+     * - "star": Star-shaped cursor
+     * - "thumbs-up": Thumbs up cursor
+     * - "pointer": Standard pointer cursor
+     * - "none": Hides cursor
+     * - CustomCursor: { url, hotspotX?, hotspotY?, fallback? }
+     */
+    cursor?: Cursor;
+}
+/** Props for the LikeButton component (Tailwind version) */
+type LikeButtonProps = BaseLikeButtonProps;
+/** Props for the LikeButton component (Vanilla CSS version) */
+type LikeButtonVanillaProps = BaseLikeButtonProps;
+
+/**
+ * Default heart icon for LikeButton.
+ * Can be used as reference for creating custom icons.
+ */
+declare function DefaultHeartIcon({ size, className }: IconRenderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * LikeButton - Animated like button with liquid fill and particle effects.
+ * This version uses vanilla CSS (no Tailwind dependency).
+ *
+ * @example
+ * ```tsx
+ * import { LikeButtonVanilla } from '@fmarlats/react-like-button';
+ * import '@fmarlats/react-like-button/styles.css';
+ *
+ * // Default usage
+ * <LikeButtonVanilla onClick={(clicks, event) => console.log('Clicks:', clicks)} />
+ *
+ * // Custom icon
+ * <LikeButtonVanilla renderIcon={({ size }) => <CustomIcon size={size} />} />
+ *
+ * // Custom shape
+ * <LikeButtonVanilla shape="rounded" />
+ * <LikeButtonVanilla shape={{ clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" }} />
+ *
+ * // Custom styles
+ * <LikeButtonVanilla styles={{ shadowOffset: 4, borderWidth: 2 }} />
+ *
+ * // Custom cursor
+ * <LikeButtonVanilla cursor="star" />
+ * <LikeButtonVanilla cursor={{ url: "data:image/svg+xml;...", hotspotX: 16, hotspotY: 16 }} />
+ *
+ * // Minimum fill for custom shapes
+ * <LikeButtonVanilla minFillPercent={15} shape={{ clipPath: "polygon(...)" }} />
+ *
+ * // Particle presets (same API as Tailwind version)
+ * <LikeButtonVanilla particlePreset="burst" />
+ * <LikeButtonVanilla particlePreset="confetti" />
+ * <LikeButtonVanilla particlePreset="fireworks" />
+ *
+ * // Custom particle configuration
+ * <LikeButtonVanilla particleConfig={{
+ *   shape: 'star',
+ *   colors: ['#FFD700', '#FFA500'],
+ *   count: 15,
+ *   speed: 800
+ * }} />
+ *
+ * // Combine preset with custom config
+ * <LikeButtonVanilla
+ *   particlePreset="burst"
+ *   particleConfig={{ count: 20 }}
+ * />
+ * ```
+ */
+declare const LikeButtonVanilla: react.ForwardRefExoticComponent<BaseLikeButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Built-in particle effect presets.
+ * Each preset provides a distinct visual effect optimized for different use cases.
+ *
+ * @example
+ * ```tsx
+ * import { PARTICLE_PRESETS } from '@fmarlats/react-like-button';
+ *
+ * // Use a preset directly
+ * const burstConfig = PARTICLE_PRESETS.burst;
+ * ```
+ */
+declare const PARTICLE_PRESETS: Record<ParticlePreset, ParticlePresetConfig>;
+
+export { type AriaLabelProp, type AriaLabelState, type BaseLikeButtonProps, type Cursor, type CursorPreset, type CustomCursor, type CustomParticleShape, type CustomShape, DefaultHeartIcon, type IconRenderProps, LIKE_BUTTON_DEFAULTS, 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, LikeButtonVanilla as default, useLikeButton };

package/dist/vanilla.js

@@ -0,0 +1,16 @@
+import {
+  DefaultHeartIcon,
+  LIKE_BUTTON_DEFAULTS,
+  LikeButtonVanilla,
+  PARTICLE_PRESETS,
+  useLikeButton
+} from "./chunk-VLFZGMEX.js";
+export {
+  DefaultHeartIcon,
+  LIKE_BUTTON_DEFAULTS,
+  LikeButtonVanilla,
+  PARTICLE_PRESETS,
+  LikeButtonVanilla as default,
+  useLikeButton
+};
+//# sourceMappingURL=vanilla.js.map

package/dist/vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@fmarlats/react-like-button",
+  "version": "1.1.4",
+  "description": "Animated React like button component with configurable multi clicks to fill the button, particle animations on click, all customizable. Supports Tailwind CSS and vanilla CSS. TypeScript-ready and accessible.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./vanilla": {
+      "types": "./dist/vanilla.d.ts",
+      "import": "./dist/vanilla.js",
+      "require": "./dist/vanilla.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./like-button.css": "./dist/like-button.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/build-css.js",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "check": "biome check --write .",
+    "ci": "biome ci .",
+    "prepublishOnly": "pnpm run ci && pnpm run typecheck && pnpm run test && pnpm run build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.3"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "like-button",
+    "like",
+    "button",
+    "animation",
+    "animated-button",
+    "particles",
+    "particle-effects",
+    "liquid-fill",
+    "liquid-animation",
+    "wave-animation",
+    "brutalist",
+    "brutalist-design",
+    "tailwind",
+    "tailwindcss",
+    "vanilla-css",
+    "typescript",
+    "interactive",
+    "ui-component",
+    "react-ui",
+    "engagement",
+    "social",
+    "heart-button",
+    "favorite-button",
+    "upvote",
+    "rating",
+    "feedback",
+    "click-animation",
+    "micro-interaction",
+    "headless-ui",
+    "customizable",
+    "accessible",
+    "a11y",
+    "multiple-likes"
+  ],
+  "author": "Florian MARLATS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fmarlats/react-like-button.git"
+  },
+  "homepage": "https://github.com/fmarlats/react-like-button#readme",
+  "bugs": {
+    "url": "https://github.com/fmarlats/react-like-button/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}