@zolaha/react-noto-animated-emoji 1.0.2 → 2.0.0

package/dist/AnimateEmojiModal.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+
+export type ModalPosition = 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | {
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+};
+export interface AnimateEmojiModalProps {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Called when the modal requests to close (Escape key, overlay click, X button) */
+    onClose: () => void;
+    /** Called with the selected emoji codepoint when the user clicks an emoji */
+    onEmojiSelect: (codepoint: string) => void;
+    /** Modal width (default: 480). Numbers are treated as px. */
+    width?: number | string;
+    /** Modal height (default: 520). Numbers are treated as px. */
+    height?: number | string;
+    /**
+     * Where to position the modal on screen (default: 'center').
+     * Pass a custom object for fine-grained control: `{ top: '80px', right: '20px' }`.
+     */
+    position?: ModalPosition;
+    /** Loop mode for emojis in the modal grid (default: true) */
+    loop?: boolean | number;
+    /** 'dark' | 'light' (default: 'dark') */
+    theme?: 'dark' | 'light';
+    /** Extra class applied to the modal panel */
+    className?: string;
+    /** Extra inline styles applied to the modal panel */
+    style?: React.CSSProperties;
+    /** Size of each emoji in the picker grid in px (default: 36) */
+    emojiSize?: number;
+}
+declare const AnimateEmojiModal: React.FC<AnimateEmojiModalProps>;
+export default AnimateEmojiModal;

package/dist/AnimatedEmoji.d.ts

@@ -19,15 +19,32 @@ export interface AnimatedEmojiProps {
      */
     style?: React.CSSProperties;
     /**
-     * Whether the animation should loop (default: false)
+     * Animation loop behaviour:
+     *  - `true`   → loop indefinitely
+     *  - `false`  → play once (default)
+     *  - `number` → play exactly N times then stop
      */
-    loop?: boolean;
+    loop?: boolean | number;
     /**
-     * Whether the animation should autoplay (default: true)
+     * Whether the animation should autoplay on mount (default: true)
      */
     autoplay?: boolean;
     /**
-     * Callback when animation finishes
+     * Playback speed multiplier (default: 1)
+     */
+    speed?: number;
+    /**
+     * When true, the animation resets to frame 0 after completing instead of
+     * staying on the last frame (default: false)
+     */
+    resetOnEnd?: boolean;
+    /**
+     * When true, hovering over the emoji replays the animation from the start
+     * (default: false)
+     */
+    replayOnHover?: boolean;
+    /**
+     * Callback fired when the animation finishes (all loop cycles done)
      */
     onComplete?: () => void;
     /**

package/dist/emoji-categories.d.ts

@@ -0,0 +1,9 @@
+export interface EmojiCategory {
+    id: string;
+    label: string;
+    /** A representative emoji char shown on the tab button */
+    icon: string;
+    /** Base codepoints (no skin-tone suffixes). Skin tones applied at runtime. */
+    emojis: string[];
+}
+export declare const EMOJI_CATEGORIES: EmojiCategory[];