goji-search 1.0.1 → 1.1.0

package/dist/goji-search/components/elements/search-input.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sparkles } from "lucide-react";
 import { useEffect, useState } from "react";
 import { InspirationMenu } from "./inspiration-menu";
+import AutoExpandingTextarea from "./auto-expanding-textarea"; // make sure path matches
 export function SearchInput({ value, onChange, onFocus, onBlur, placeholder, size, inputRef, inspirationQuestions, onInspirationClick, sparkleRef, }) {
     const [showInspirationMenu, setShowInspirationMenu] = useState(false);
     const [isSparkleHovered, setIsSparkleHovered] = useState(false);
@@ -9,37 +10,31 @@ export function SearchInput({ value, onChange, onFocus, onBlur, placeholder, siz
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [isTyping, setIsTyping] = useState(true);
     const [charIndex, setCharIndex] = useState(0);
+    // Typewriter animation for placeholder
     useEffect(() => {
-        if (size !== "s" || value || inspirationQuestions.length === 0) {
+        if (size !== "s" || value || inspirationQuestions.length === 0)
             return;
-        }
         const currentQuestion = inspirationQuestions[currentQuestionIndex];
-        const typingSpeed = 40; // ms per character when typing
-        const deletingSpeed = 20; // ms per character when deleting
-        const pauseAfterTyping = 2000; // pause when fully typed
-        const pauseAfterDeleting = 500; // pause before typing next question
+        const typingSpeed = 40;
+        const deletingSpeed = 20;
+        const pauseAfterTyping = 2000;
+        const pauseAfterDeleting = 500;
         const timer = setTimeout(() => {
             if (isTyping) {
-                // Typing phase
                 if (charIndex < currentQuestion.length) {
                     setTypewriterText(currentQuestion.slice(0, charIndex + 1));
                     setCharIndex(charIndex + 1);
                 }
                 else {
-                    // Finished typing, pause then start deleting
-                    setTimeout(() => {
-                        setIsTyping(false);
-                    }, pauseAfterTyping);
+                    setTimeout(() => setIsTyping(false), pauseAfterTyping);
                 }
             }
             else {
-                // Deleting phase
                 if (charIndex > 0) {
                     setTypewriterText(currentQuestion.slice(0, charIndex - 1));
                     setCharIndex(charIndex - 1);
                 }
                 else {
-                    // Finished deleting, move to next question
                     setTimeout(() => {
                         setCurrentQuestionIndex((currentQuestionIndex + 1) % inspirationQuestions.length);
                         setIsTyping(true);
@@ -57,34 +52,43 @@ export function SearchInput({ value, onChange, onFocus, onBlur, placeholder, siz
         setShowInspirationMenu(false);
     };
     const displayPlaceholder = size === "s" && !value ? typewriterText : placeholder;
-    return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { ref: sparkleRef, onClick: handleSparkleClick, onMouseEnter: () => setIsSparkleHovered(true), onMouseLeave: () => setIsSparkleHovered(false), style: {
+    return (_jsxs("div", { style: { position: "relative", zIndex: 1 }, children: [_jsxs("div", { ref: sparkleRef, onClick: handleSparkleClick, onMouseEnter: () => setIsSparkleHovered(true), onMouseLeave: () => setIsSparkleHovered(false), style: {
                     position: "absolute",
                     left: "0.75rem",
-                    top: "50%",
-                    transform: "translateY(-50%)",
+                    top: "0.55rem",
                     cursor: "pointer",
-                    zIndex: 10,
+                    // Keep the trigger above the input; menu has an even higher z-index
+                    zIndex: 2,
                 }, children: [_jsx(Sparkles, { style: {
                             width: size === "s" ? "0.875rem" : "1rem",
                             height: size === "s" ? "0.875rem" : "1rem",
                             color: "rgba(0, 0, 0, 0.6)",
                             transition: "all 0.3s ease",
-                        } }), showInspirationMenu && (_jsx(InspirationMenu, { questions: inspirationQuestions, onQuestionClick: handleQuestionClick, onClose: () => setShowInspirationMenu(false) }))] }), _jsx("input", { ref: inputRef, type: "text", value: value, onChange: onChange, onFocus: onFocus, className: "sparkle-input", onBlur: onBlur, placeholder: displayPlaceholder, style: {
-                    width: "100%",
-                    borderRadius: "1.3rem",
-                    border: "1px solid rgba(255, 255, 255, 0.25)",
-                    backgroundColor: "rgba(255, 255, 255, 0.3)",
-                    padding: size === "s" ? "0.375rem 0.5rem 0.375rem 2rem" : "0.5rem 0.75rem 0.5rem 2.25rem",
-                    fontSize: size === "s" ? "0.8125rem" : "0.875rem",
-                    color: "rgba(0, 0, 0, 0.85)",
-                    backdropFilter: "blur(20px) saturate(180%)",
-                    WebkitBackdropFilter: "blur(20px) saturate(180%)",
-                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                        } }), showInspirationMenu && (_jsx(InspirationMenu, { questions: inspirationQuestions, onQuestionClick: handleQuestionClick, onClose: () => setShowInspirationMenu(false) }))] }), _jsx(AutoExpandingTextarea, { ref: inputRef, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: displayPlaceholder, className: `sparkle-input ${isSparkleHovered ? "sparkle-hover" : ""}`, style: {
+                    padding: "0.2rem 0.75rem 0.2rem 2rem",
                     outline: "none",
-                    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.4)",
+                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                 } }), _jsx("style", { children: `
-  input::placeholder {
-    color: rgba(0, 0, 0, 0.75);
-  }
-` })] }));
+         .sparkle-input {
+          width: 100%;
+          border: 1px solid rgba(255, 255, 255, 0.25);
+          background-color: transparent;
+          border-radius: 9999px; /* full rounded */
+          font-size: 0.875rem; /* ~14px */
+          color: rgba(0, 0, 0, 0.85);
+          backdrop-filter: blur(20px) saturate(180%);
+          -webkit-backdrop-filter: blur(20px) saturate(180%);
+          resize: none;
+          outline: none;
+          overflow: hidden; /* hide scrollbar toggles */
+          line-height: 1.5rem;
+          min-height: 1.5rem;
+          max-height: 160px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .sparkle-input::placeholder {
+          color: rgba(0, 0, 0, 0.75);
+        }
+        ` })] }));
 }

package/dist/goji-search/components/elements/suggested-questions.js

@@ -4,7 +4,7 @@ export function SuggestedQuestions({ questions, onQuestionClick }) {
             display: "flex",
             flexDirection: "column",
             gap: "0.5rem",
-            padding: "0.625rem",
+            padding: "0 0.625rem",
             borderRadius: "0.75rem",
             backgroundColor: "rgba(255, 255, 255, 0.08)",
             border: "1px solid rgba(255, 255, 255, 0.15)",

package/dist/goji-search/components/goji-search-component.d.ts

@@ -1,2 +1,10 @@
 import "./goji-search.css";
-export declare function GojiSearchComponent(): import("react/jsx-runtime").JSX.Element;
+export interface GojiSearchComponentProps {
+    /**
+     * Backend API URL for GojiSearch
+     * @default "http://localhost:8000"
+     * @example "https://api.example.com"
+     */
+    apiUrl?: string;
+}
+export declare function GojiSearchComponent({ apiUrl }?: GojiSearchComponentProps): import("react/jsx-runtime").JSX.Element;