l-min-components 1.7.1302 → 1.7.1303

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1302",
+  "version": "1.7.1303",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/InputEmoji/index.jsx

@@ -0,0 +1,681 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+
+// Main React component for the Emoji Input
+// Manages its own state internally (uncontrolled behavior)
+const EmojiInput = forwardRef(
+  (
+    {
+      containerStyle,
+      inputStyle,
+      buttonStyle,
+      pickerStyle,
+      onChange, // Exposed onChange prop
+      onPaste, // Exposed onPaste prop
+      onFocus, // Exposed onFocus prop
+      onBlur, // Exposed onBlur prop
+      onKeyDown, // Exposed onKeyDown prop
+      onKeyUp, // Exposed onKeyUp prop
+      onKeyPress, // Exposed onKeyPress prop
+      onEnter, // Exposed onEnter prop for handling single Enter key press
+      disabled = false, // Disabled prop
+      readOnly = false, // ReadOnly prop
+      fontSize = "16px", // Font size prop
+      lineHeight = "20px", // Line height prop
+      // Removed 'value' prop for uncontrolled behavior
+    },
+    ref
+  ) => {
+    // Internal state is the source of truth for the input value
+    const [internalValue, setInternalValue] = useState("");
+
+    // State to manage the visibility of the emoji picker
+    const [showPicker, setShowPicker] = useState(false);
+    // State to manage the position of the emoji picker ('top' or 'bottom')
+    const [pickerPosition, setPickerPosition] = useState("bottom"); // Default to bottom (above input)
+    // State to manage the emoji search term
+    const [searchTerm, setSearchTerm] = useState("");
+
+    // Ref to access the textarea element directly
+    const textareaRef = useRef(null);
+    // Ref to access the input container element
+    const containerRef = useRef(null);
+    // Ref to access the emoji picker element
+    const emojiPickerRef = useRef(null);
+    // Ref to access the emoji toggle button element
+    const emojiToggleRef = useRef(null);
+
+    // Expose imperative methods to the parent component via the ref
+    useImperativeHandle(ref, () => ({
+      // Method to get the current input value (from internal state)
+      getValue: () => internalValue,
+      // Method to set the input value (updates internal state and calls onChange)
+      setValue: (newValue) => {
+        setInternalValue(newValue);
+        // Manually trigger onChange with the new value
+        if (onChange) {
+          const event = { target: { value: newValue } };
+          onChange(event);
+        }
+      },
+      // Method to focus the textarea
+      focus: () => {
+        if (textareaRef.current) {
+          textareaRef.current.focus();
+        }
+      },
+      // Method to clear the input (updates internal state to empty and calls onChange)
+      clear: () => {
+        setInternalValue("");
+        // Manually trigger onChange with empty string
+        if (onChange) {
+          const event = { target: { value: "" } };
+          onChange(event);
+        }
+      },
+      // Method to toggle the emoji picker visibility
+      toggleEmojiPicker: () => togglePicker(),
+      // Method to show the emoji picker
+      showEmojiPicker: () => setShowPicker(true),
+      // Method to hide the emoji picker
+      hideEmojiPicker: () => setShowPicker(false),
+      // You can expose other methods as needed
+    }));
+
+    // Expanded list of emojis with names/keywords for search
+    const allEmojisWithNames = [
+      { emoji: "😊", name: "Smiling Face with Smiling Eyes" },
+      { emoji: "😂", name: "Face with Tears of Joy" },
+      { emoji: "😍", name: "Smiling Face with Heart-Eyes" },
+      { emoji: "🥰", name: "Smiling Face with Hearts" },
+      { emoji: "😘", name: "Face Blowing a Kiss" },
+      { emoji: "😗", name: "Kissing Face" },
+      { emoji: "😙", name: "Kissing Face with Smiling Eyes" },
+      { emoji: "😚", name: "Kissing Face with Closed Eyes" },
+      { emoji: "😋", name: "Face Savoring Food" },
+      { emoji: "😛", name: "Face with Tongue" },
+      { emoji: "😜", name: "Winking Face with Tongue" },
+      { emoji: "🤪", name: "Zany Face" },
+      { emoji: "🤨", name: "Face with Raised Eyebrow" },
+      { emoji: "🧐", name: "Face with Monocle" },
+      { emoji: "🤓", name: "Nerd Face" },
+      { emoji: "😎", name: "Smiling Face with Sunglasses" },
+      { emoji: "🤩", name: "Star-Struck" },
+      { emoji: "🥳", name: "Partying Face" },
+      { emoji: "😏", name: "Smirking Face" },
+      { emoji: "😒", name: "Unamused Face" },
+      { emoji: "😞", name: "Disappointed Face" },
+      { emoji: "😔", name: "Pensive Face" },
+      { emoji: "😟", name: "Worried Face" },
+      { emoji: "😕", name: "Confused Face" },
+      { emoji: "🙁", name: "Slightly Frowning Face" },
+      { emoji: "☹️", name: "Frowning Face" },
+      { emoji: "😣", name: "Persevering Face" },
+      { emoji: "😖", name: "Confounded Face" },
+      { emoji: "😫", name: "Tired Face" },
+      { emoji: "😩", name: "Weary Face" },
+      { emoji: "🥺", name: "Pleading Face" },
+      { emoji: "😢", name: "Crying Face" },
+      { emoji: "😭", name: "Loudly Crying Face" },
+      { emoji: "😤", name: "Face with Steam From Nose" },
+      { emoji: "😠", name: "Angry Face" },
+      { emoji: "😡", name: "Pouting Face" },
+      { emoji: "🤬", name: "Face with Symbols on Mouth" },
+      { emoji: "😈", name: "Smiling Face with Horns" },
+      { emoji: "👿", name: "Angry Face with Horns" },
+      { emoji: "💀", name: "Skull" },
+      { emoji: "👻", name: "Ghost" },
+      { emoji: "👽", name: "Alien" },
+      { emoji: "🤖", name: "Robot" },
+      { emoji: "🎃", name: "Jack-O-Lantern" },
+      { emoji: "😺", name: "Grinning Cat" },
+      { emoji: "😸", name: "Grinning Cat with Smiling Eyes" },
+      { emoji: "😹", name: "Cat with Tears of Joy" },
+      { emoji: "😻", name: "Smiling Cat with Heart-Eyes" },
+      { emoji: "😼", name: "Cat with Wry Smile" },
+      { emoji: "😽", name: "Kissing Cat" },
+      { emoji: "🙀", name: "Weary Cat" },
+      { emoji: "😿", name: "Crying Cat" },
+      { emoji: "😾", name: "Pouting Cat" },
+      { emoji: "👍", name: "Thumbs Up" },
+      { emoji: "👎", name: "Thumbs Down" },
+      { emoji: "👏", name: "Clapping Hands" },
+      { emoji: "🙌", name: "Raising Hands" },
+      { emoji: "🤲", name: "Palms Up Together" },
+      { emoji: "🤝", name: "Handshake" },
+      { emoji: "🙏", name: "Folded Hands" },
+      { emoji: "💪", name: "Flexed Biceps" },
+      { emoji: "👈", name: "Backhand Index Pointing Left" },
+      { emoji: "👉", name: "Backhand Index Pointing Right" },
+      { emoji: "☝️", name: "Index Pointing Up" },
+      { emoji: "👆", name: "Index Pointing Up" }, // Duplicate, can be refined
+      { emoji: "👇", name: "Index Pointing Down" },
+      { emoji: "✌️", name: "Victory Hand" },
+      { emoji: "🤞", name: "Crossed Fingers" },
+      { emoji: "🖖", name: "Vulcan Salute" },
+      { emoji: "🤘", name: "Sign of the Horns" },
+      { emoji: "🤙", name: "Call Me Hand" },
+      { emoji: "🖐️", name: "Hand with Fingers Splayed" },
+      { emoji: "✋", name: "Raised Hand" },
+      { emoji: "👌", name: "OK Hand" },
+      { emoji: "🤏", name: "Pinched Fingers" },
+      { emoji: "👋", name: "Waving Hand" },
+      { emoji: "🤚", name: "Raised Back of Hand" },
+      { emoji: "❤️", name: "Red Heart" },
+      { emoji: "🧡", name: "Orange Heart" },
+      { emoji: "💛", name: "Yellow Heart" },
+      { emoji: "💚", name: "Green Heart" },
+      { emoji: "💙", name: "Blue Heart" },
+      { emoji: "💜", name: "Purple Heart" },
+      { emoji: "🖤", name: "Black Heart" },
+      { emoji: "🤍", name: "White Heart" },
+      { emoji: "🤎", name: "Brown Heart" },
+      { emoji: "💔", name: "Broken Heart" },
+      { emoji: "❣️", name: "Heart Exclamation" },
+      { emoji: "💕", name: "Two Hearts" },
+      { emoji: "💞", name: "Revolving Hearts" },
+      { emoji: "💓", name: "Beating Heart" },
+      { emoji: "💗", name: "Growing Heart" },
+      { emoji: "💖", name: "Sparkling Heart" },
+      { emoji: "💘", name: "Heart with Arrow" },
+      { emoji: "💝", name: "Heart with Ribbon" },
+      { emoji: "💯", name: "Hundred Points" },
+      { emoji: "💢", name: "Anger Symbol" },
+      { emoji: "💥", name: "Collision" },
+      { emoji: "💫", name: "Dizzy" },
+      { emoji: "💦", name: "Sweat Droplets" },
+      { emoji: "💨", name: "Dashing Away" },
+      { emoji: "💩", name: "Pile of Poo" },
+      { emoji: "🍎", name: "Red Apple" },
+      { emoji: "🍌", name: "Banana" },
+      { emoji: "🍒", name: "Cherries" },
+      { emoji: "🍓", name: "Strawberry" },
+      { emoji: "🍔", name: "Hamburger" },
+      { emoji: "🍕", name: "Pizza" },
+      { emoji: "🍟", name: "French Fries" },
+      { emoji: "🍦", name: "Soft Ice Cream" },
+      { emoji: "🍩", name: "Doughnut" },
+      { emoji: "☕", name: "Hot Beverage" },
+      { emoji: "🍵", name: "Teacup Without Handle" },
+      { emoji: "🍺", name: "Beer Bottle" },
+      { emoji: "🍷", name: "Wine Glass" },
+      { emoji: "🍸", name: "Cocktail Glass" },
+      { emoji: "🍹", name: "Tropical Drink" },
+      { emoji: "🍾", name: "Bottle with Popping Cork" },
+      { emoji: "🌍", name: "Earth Globe Europe-Africa" },
+      { emoji: "🌎", name: "Earth Globe Americas" },
+      { emoji: "🌏", name: "Earth Globe Asia-Australia" },
+      { emoji: "🌞", name: "Sun with Face" },
+      { emoji: "🌝", name: "Full Moon Face" },
+      { emoji: "🌚", name: "New Moon Face" },
+      { emoji: "🌙", name: "Crescent Moon" },
+      { emoji: "⭐", name: "Star" },
+      { emoji: "🌟", name: "Glowing Star" },
+      { emoji: "✨", name: "Sparkles" },
+      { emoji: "⚡", name: "High Voltage" },
+      { emoji: "🔥", name: "Fire" },
+      { emoji: "💧", name: "Droplet" },
+      { emoji: "🌊", name: "Water Wave" },
+      { emoji: "🌈", name: "Rainbow" },
+      { emoji: "☁️", name: "Cloud" },
+      { emoji: "🐶", name: "Dog Face" },
+      { emoji: "🐱", name: "Cat Face" },
+      { emoji: "🐭", name: "Mouse Face" },
+      { emoji: "🐹", name: "Hamster Face" },
+      { emoji: "🐰", name: "Rabbit Face" },
+      { emoji: "🦊", name: "Fox Face" },
+      { emoji: "🐻", name: "Bear" },
+      { emoji: "🐼", name: "Panda" },
+      { emoji: "🐨", name: "Koala" },
+      { emoji: "🐯", name: "Tiger Face" },
+      { emoji: "🦁", name: "Lion" },
+      { emoji: "🐮", name: "Cow Face" },
+      { emoji: "🐷", name: "Pig Face" },
+      { emoji: "🐸", name: "Frog" },
+      { emoji: "🐵", name: "Monkey Face" },
+      { emoji: "🐔", name: "Chicken" },
+      { emoji: "⚽", name: "Soccer Ball" },
+      { emoji: "🏀", name: "Basketball" },
+      { emoji: "🏈", name: "American Football" },
+      { emoji: "⚾", name: "Baseball" },
+      { emoji: "🎾", name: "Tennis Racquet and Ball" },
+      { emoji: "🏐", name: "Volleyball" },
+      { emoji: "🏉", name: "Rugby Football" },
+      { emoji: "🎱", name: "Pool 8 Ball" },
+      { emoji: "🏓", name: "Table Tennis Paddle and Ball" },
+      { emoji: "🏸", name: "Badminton Racquet and Shuttlecock" },
+      { emoji: "🏒", name: "Ice Hockey Stick and Puck" },
+      { emoji: "🥅", name: "Goal Net" },
+      { emoji: "⛳", name: "Flag in Hole" },
+      { emoji: "🏹", name: "Bow and Arrow" },
+      { emoji: "🎣", name: "Fishing Pole" },
+      { emoji: "🥊", name: "Boxing Glove" },
+    ];
+
+    // Filter emojis based on the search term (case-insensitive)
+    const filteredEmojis = allEmojisWithNames.filter((item) => {
+      const lowerCaseSearchTerm = searchTerm.toLowerCase();
+      // Check if the search term is included in the emoji's name
+      return (
+        searchTerm === "" ||
+        item.name.toLowerCase().includes(lowerCaseSearchTerm)
+      );
+    });
+
+    // Function to insert an emoji at the current cursor position
+    const insertEmoji = (emoji) => {
+      const textarea = textareaRef.current;
+      if (!textarea) return; // Ensure textarea is available
+
+      const cursorPosition = textarea.selectionStart;
+      const textBefore = internalValue.substring(0, cursorPosition);
+      const textAfter = internalValue.substring(cursorPosition);
+
+      // Calculate the new value
+      const newValue = textBefore + emoji + textAfter;
+
+      // Update internal state
+      setInternalValue(newValue);
+
+      // Manually trigger onChange with the new value
+      if (onChange) {
+        const event = { target: { value: newValue } };
+        onChange(event);
+      }
+
+      // Move cursor to after the inserted emoji
+      const newCursorPosition = cursorPosition + emoji.length;
+
+      // Use a timeout to ensure the state updates before setting selection
+      // This is a common pattern in React for DOM manipulations after state updates
+      setTimeout(() => {
+        textarea.selectionStart = newCursorPosition;
+        textarea.selectionEnd = newCursorPosition;
+        textarea.focus(); // Focus the textarea after inserting
+      }, 0);
+
+      // Optionally hide the picker after selection
+      // setShowPicker(false);
+    };
+
+    // Effect to handle clicks outside the emoji picker to close it
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        // Check if the click was outside the picker and not on the toggle button or the picker itself
+        if (
+          emojiPickerRef.current &&
+          !emojiPickerRef.current.contains(event.target) &&
+          event.target !== emojiToggleRef.current &&
+          !emojiToggleRef.current.contains(event.target)
+        ) {
+          setShowPicker(false);
+          setSearchTerm(""); // Clear search term when closing
+        }
+      };
+
+      // Add the event listener
+      document.addEventListener("click", handleClickOutside);
+
+      // Cleanup the event listener on component unmount
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }, [showPicker]); // Re-run effect if showPicker changes
+
+    // Function to determine picker position based on available space
+    const determinePickerPosition = () => {
+      const container = containerRef.current;
+      if (!container) return "bottom"; // Default to bottom if container not found
+
+      const rect = container.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      // Calculate space above and below the input container
+      const spaceAbove = rect.top;
+      const spaceBelow = viewportHeight - rect.bottom;
+
+      // Assume picker needs at least 200px height (based on max-height)
+      const requiredSpace = 200; // Match max-height of picker
+
+      // If there's enough space below, position below. Otherwise, position above.
+      // Prioritize below if space is sufficient, otherwise check above.
+      if (spaceBelow >= requiredSpace) {
+        return "top"; // Position below the input (top: 100%)
+      } else if (spaceAbove >= requiredSpace) {
+        return "bottom"; // Position above the input (bottom: 100%)
+      } else {
+        // If neither has enough space, position where there is more space
+        return spaceBelow > spaceAbove ? "top" : "bottom";
+      }
+    };
+
+    // Toggle emoji picker visibility and determine position
+    const togglePicker = () => {
+      if (!showPicker) {
+        // If about to show, determine the best position
+        setPickerPosition(determinePickerPosition());
+      } else {
+        setSearchTerm(""); // Clear search term when hiding
+      }
+      setShowPicker(!showPicker);
+    };
+
+    return (
+      // Apply containerStyle prop
+      <div
+        className="input-container"
+        style={containerStyle}
+        ref={containerRef}>
+        {/* Textarea for input */}
+        {/* Apply inputStyle prop */}
+        <textarea
+          ref={textareaRef} // Attach ref to textarea
+          className="text-input"
+          rows="1" // Start with 1 row, max-height will control size
+          placeholder="Start typing..." // Updated placeholder text
+          // Use internal state as the source of truth
+          value={internalValue}
+          onChange={(e) => {
+            // Update internal state
+            setInternalValue(e.target.value);
+            // Always call the passed-in onChange handler if it exists
+            if (onChange) {
+              onChange(e);
+            }
+          }}
+          onPaste={(e) => {
+            if (onPaste) {
+              onPaste(e); // Call the passed-in onPaste handler
+            }
+            // onChange handler will be triggered by paste, updating internal state
+          }}
+          onFocus={(e) => {
+            // Added onFocus handler
+            if (onFocus) {
+              onFocus(e);
+            }
+          }}
+          onBlur={(e) => {
+            // Added onBlur handler
+            if (onBlur) {
+              onBlur(e);
+            }
+          }}
+          onKeyDown={(e) => {
+            // Added onKeyDown handler
+            // Check for Enter key press
+            if (e.key === "Enter") {
+              // If Shift is NOT pressed, prevent default and call onEnter
+              if (!e.shiftKey) {
+                e.preventDefault();
+                if (onEnter) {
+                  onEnter(internalValue); // Pass current internal value to onEnter
+                }
+              }
+              // If Shift IS pressed, allow default (new line)
+            }
+
+            // Always call the passed-in onKeyDown handler if it exists
+            if (onKeyDown) {
+              onKeyDown(e);
+            }
+          }}
+          onKeyUp={(e) => {
+            // Added onKeyUp handler
+            if (onKeyUp) {
+              onKeyUp(e);
+            }
+          }}
+          onKeyPress={(e) => {
+            // Added onKeyPress handler
+            if (onKeyPress) {
+              onKeyPress(e);
+            }
+          }}
+          disabled={disabled} // Apply disabled prop
+          readOnly={readOnly} // Apply readOnly prop
+          style={{
+            maxHeight: "52px",
+            overflowY: "auto",
+            fontSize: fontSize, // Apply fontSize prop
+            lineHeight: lineHeight, // Apply lineHeight prop
+            ...inputStyle, // Apply custom inputStyle prop
+          }} // Set max height and overflow, apply inputStyle
+        ></textarea>
+
+        {/* Button to toggle the emoji picker */}
+        {/* Apply buttonStyle prop */}
+        <button
+          ref={emojiToggleRef} // Attach ref to toggle button
+          className="emoji-toggle-button"
+          onClick={togglePicker} // Use the new togglePicker function
+          // Disable button if input is disabled or readOnly
+          disabled={disabled || readOnly}
+          style={buttonStyle} // Apply buttonStyle
+        >
+          {/* SVG Icon */}
+          <svg
+            width="24"
+            height="25"
+            viewBox="0 0 24 25"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M19.0668 5.51844C23.0368 9.48844 22.9668 15.9684 18.8668 19.8584C15.0768 23.4484 8.92679 23.4484 5.12679 19.8584C1.01679 15.9684 0.946776 9.48844 4.92678 5.51844C8.82678 1.60844 15.1668 1.60844 19.0668 5.51844Z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M15.834 16.6367C13.714 18.6367 10.2741 18.6367 8.16406 16.6367"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M8.66638 9.55859H8.67536"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M15.8383 9.55859H15.8472"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+
+        {/* Emoji picker container, shown conditionally */}
+        {showPicker && (
+          // Apply pickerStyle prop and dynamic position class
+          <div
+            ref={emojiPickerRef} // Attach ref to picker container
+            className={`emoji-picker-container show ${pickerPosition}`} // Add pickerPosition class
+            style={pickerStyle} // Apply pickerStyle
+          >
+            {/* Emoji Search Input */}
+            <input
+              type="text"
+              placeholder="Search emojis..."
+              className="emoji-search-input"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+
+            {/* Emoji Grid */}
+            <div className="emoji-grid">
+              {/* Map over filtered emojis and create buttons */}
+              {filteredEmojis.map((item, index) => (
+                <button
+                  key={index} // Use index as key (safe for static list)
+                  className="emoji-button"
+                  onClick={() => insertEmoji(item.emoji)} // Insert emoji on click
+                  title={item.name} // Add title for accessibility
+                >
+                  {item.emoji}
+                </button>
+              ))}
+              {filteredEmojis.length === 0 && (
+                <p className="no-results">No emojis found.</p>
+              )}
+            </div>
+          </div>
+        )}
+        {/* Plain CSS styles */}
+        <style>{`
+                  .input-container {
+                      position: relative;
+                      width: 100%;
+                      max-width: 400px; /* Adjusted max-width slightly for a common input size */
+                      margin: 20px auto;
+                      /* Updated default border color */
+                      border: 1px solid rgba(229, 229, 234, 1);
+                      border-radius: 0.375rem; /* Default rounded-md */
+                      /* Removed overflow: hidden; */
+                      /* Default background, can be overridden by prop */
+                      background-color: #ffffff;
+                  }
+  
+                  .text-input {
+                      display: block; /* Make it a block element */
+                      width: 100%;
+                      padding: 8px; /* p-2 */
+                      padding-right: 40px; /* Adjust padding to make space for the button */
+                      border: none; /* Removed border */
+                      outline: none; /* Removed default outline */
+                      resize: none; /* Disable resize handle */
+                      max-height: 52px; /* Set the maximum height */
+                      overflow-y: auto; /* Add scrollbar if content exceeds max-height */
+                      font-family: sans-serif; /* Use a common sans-serif font */
+                      box-sizing: border-box; /* Include padding and border in element's total width and height */
+                      /* Default background, can be overridden by prop */
+                      background-color: transparent; /* Make textarea background transparent to show container background */
+                      color: #374151; /* Set text color to a shade of gray */
+                      /* Removed hardcoded font-size and line-height here */
+                  }
+  
+                   .text-input:disabled,
+                   .text-input[readOnly] {
+                       background-color: #f3f4f6; /* gray-100 */
+                       cursor: not-allowed;
+                   }
+  
+  
+                  .emoji-toggle-button {
+                      position: absolute;
+                      top: 50%; /* Center vertically */
+                      right: 8px; /* Position from the right */
+                      transform: translateY(-50%); /* Adjust for vertical centering */
+                      display: inline-flex;
+                      align-items: center;
+                      justify-content: center;
+                      padding: 4px; /* p-1 */
+                      color: #6b7280; /* gray-500 */
+                      cursor: pointer;
+                      background: none; /* No background */
+                      border: none; /* No border */
+                      transition: color 0.2s ease-in-out;
+                  }
+  
+                  .emoji-toggle-button:hover:not(:disabled) {
+                      color: #4b5563; /* gray-700 */
+                  }
+  
+                   .emoji-toggle-button:disabled {
+                       cursor: not-allowed;
+                       opacity: 0.6;
+                   }
+  
+  
+                   .emoji-toggle-button svg {
+                       stroke: currentColor; /* Make SVG stroke color match text color */
+                   }
+  
+                  .emoji-picker-container {
+                      display: none; /* Hidden by default */
+                      position: absolute;
+                      left: 0;
+                      right: 0;
+                      z-index: 10;
+                      max-height: 192px; /* max-h-48 */
+                      overflow-y: hidden; /* Hide overflow for the container itself */
+                      background-color: #ffffff; /* bg-white */
+                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
+                      border: 1px solid #e5e7eb; /* gray-200 */
+                      border-radius: 0.375rem; /* rounded-md */
+                      padding: 8px; /* p-2 */
+                      flex-direction: column; /* Stack search and grid vertically */
+                  }
+  
+                  .emoji-picker-container.show {
+                      display: flex; /* Show as flex container when 'show' class is present */
+                  }
+  
+                  .emoji-search-input {
+                      width: 100%;
+                      padding: 8px;
+                      margin-bottom: 8px; /* Space below search input */
+                      border: 1px solid #d1d5db;
+                      border-radius: 0.25rem;
+                      outline: none;
+                      box-sizing: border-box;
+                  }
+  
+                  .emoji-grid {
+                       display: grid; /* Use grid for layout */
+                       grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); /* Responsive columns */
+                       gap: 4px; /* gap-1 */
+                       overflow-y: auto; /* Add scrollbar to the grid */
+                       max-height: calc(100% - 40px); /* Calculate remaining height for grid (adjust 40px based on search input height + margin) */
+                       padding-right: 8px; /* Add padding for scrollbar */
+                  }
+  
+  
+                  /* Positioning classes */
+                  .emoji-picker-container.bottom {
+                      bottom: 100%; /* Position above the input */
+                  }
+  
+                  .emoji-picker-container.top {
+                      top: 100%; /* Position below the input */
+                  }
+  
+  
+                  .emoji-button {
+                      cursor: pointer;
+                      font-size: 1.25rem; /* text-xl */
+                      text-align: center;
+                      padding: 4px; /* p-1 */
+                      border-radius: 0.25rem; /* rounded */
+                      background: none; /* No background */
+                      border: none; /* No border */
+                      transition: background-color 0.2s ease-in-out;
+                  }
+  
+                  .emoji-button:hover {
+                      background-color: #f3f4f6; /* gray-100 */
+                  }
+  
+                  .no-results {
+                      text-align: center;
+                      color: #6b7280; /* gray-500 */
+                      grid-column: 1 / -1; /* Span across all columns in the grid */
+                  }
+               `}</style>
+      </div>
+    );
+  }
+);
+
+export default EmojiInput; // Export the component with the new name

package/src/components/index.js

@@ -56,3 +56,4 @@ export { default as DeveloperBanner } from "./banner/developerBanner";
 export { default as VideoPlayer } from "./video-player";
 export { default as useAudioPlayer } from "./useAudioPlayer";
 export { default as AudioWaveComponent } from "./useAudioPlayer/audioWave";
+export { default as InputEmoji } from "./InputEmoji";