bonsai-search 3.0.8

package/dist/bonsai-searchbar-3.0.8.js

@@ -0,0 +1,486 @@
+(function(exports) {
+
+
+//#region src/searchbar.ts
+	const VERSION = "3.0.8";
+	const ICONS = {
+		search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"></circle>
+    <path d="m21 21-4.35-4.35"></path>
+  </svg>`,
+		arrowRight: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14"></path>
+    <path d="m12 5 7 7-7 7"></path>
+  </svg>`,
+		close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M18 6L6 18"></path>
+    <path d="M6 6l12 12"></path>
+  </svg>`
+	};
+	const SEARCHBAR_STYLES = `
+  @keyframes bonsai-searchbar-fade-in {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes bonsai-searchbar-scale-in {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  .bonsai-searchbar-container {
+    margin: 24px auto;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+  .bonsai-searchbar-wrapper {
+    position: relative;
+  }
+  .bonsai-searchbar {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    position: relative;
+    z-index: 2;
+    background-color: var(--bonsai-input-bg);
+    border-radius: 8px;
+    transition: box-shadow 200ms ease-out;
+  }
+  .bonsai-searchbar.bonsai-searchbar-focused {
+    box-shadow: 0 0 0 2px var(--bonsai-brand-color);
+  }
+  .bonsai-searchbar-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 16px;
+    padding-right: 8px;
+    color: var(--bonsai-muted-color);
+    transition: color 200ms ease-out;
+  }
+  .bonsai-searchbar-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+  .bonsai-searchbar:hover .bonsai-searchbar-icon,
+  .bonsai-searchbar.bonsai-searchbar-focused .bonsai-searchbar-icon {
+    color: var(--bonsai-input-text-color, var(--bonsai-text-color));
+  }
+  .bonsai-searchbar-input {
+    flex: 1;
+    min-width: 0;
+    padding: 16px 16px 16px 0;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 16px;
+    color: var(--bonsai-input-text-color, var(--bonsai-text-color));
+    outline: none;
+  }
+  .bonsai-searchbar-input::placeholder {
+    color: var(--bonsai-muted-color);
+  }
+  .bonsai-searchbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 12px;
+    flex: 0 0 auto;
+    min-width: max-content;
+  }
+  .bonsai-searchbar-submit {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+    background-color: var(--bonsai-brand-color);
+    cursor: pointer;
+    touch-action: manipulation;
+    flex-shrink: 0;
+    color: white;
+    animation: bonsai-searchbar-scale-in 0.2s ease-out forwards;
+  }
+  .bonsai-searchbar-submit.bonsai-searchbar-visible {
+    display: flex;
+  }
+  .bonsai-searchbar-submit svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-close {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    touch-action: manipulation;
+    flex-shrink: 0;
+    color: var(--bonsai-muted-color);
+    transition: color 200ms ease-out;
+  }
+  .bonsai-searchbar-close.bonsai-searchbar-visible {
+    display: flex;
+  }
+  .bonsai-searchbar-close:hover {
+    color: var(--bonsai-text-color);
+  }
+  .bonsai-searchbar-close svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-suggestions {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background-color: var(--bonsai-input-bg);
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    overflow: hidden;
+    z-index: 10;
+    display: none;
+    animation: bonsai-searchbar-fade-in 0.2s ease-out forwards;
+  }
+  .bonsai-searchbar-suggestions.bonsai-searchbar-visible {
+    display: block;
+  }
+  .bonsai-searchbar-suggestion {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--bonsai-suggestions-text-color, var(--bonsai-text-color));
+    text-align: left;
+    background-color: var(--bonsai-input-bg);
+    cursor: pointer;
+    transition: background-color 150ms ease-out;
+  }
+  .bonsai-searchbar-suggestion:hover {
+    background-color: var(--bonsai-suggestions-hover-bg, rgba(0, 0, 0, 0.04));
+  }
+  .bonsai-searchbar-suggestion-arrow {
+    color: var(--bonsai-muted-color);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
+  }
+  .bonsai-searchbar-suggestion:hover .bonsai-searchbar-suggestion-arrow {
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 0s;
+  }
+  .bonsai-searchbar-suggestion-arrow svg {
+    width: 16px;
+    height: 16px;
+  }
+  .bonsai-searchbar-powered {
+    position: relative;
+    z-index: 1;
+    height: 24px;
+    margin-top: 4px;
+    text-align: right;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--bonsai-muted-color);
+  }
+  .bonsai-searchbar-powered-link {
+    color: var(--bonsai-brand-color);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    transition: gap 0.2s ease-out;
+  }
+  .bonsai-searchbar-powered-link:hover {
+    gap: 4px;
+  }
+  .bonsai-searchbar-powered-dot {
+    display: inline-block;
+    height: 8px;
+    width: 0;
+    border-radius: 50%;
+    background-color: var(--bonsai-brand-color);
+    transform: scale(0);
+    transition: transform 0.2s ease-out, width 0.2s ease-out;
+  }
+  .bonsai-searchbar-powered-link:hover .bonsai-searchbar-powered-dot {
+    transform: scale(1);
+    width: 8px;
+  }
+`;
+	var BonsaiSearchBar = class {
+		config;
+		state = "default";
+		container;
+		searchBar = null;
+		searchInput = null;
+		submitBtn = null;
+		suggestionsDropdown = null;
+		query = "";
+		stylesInjected = false;
+		constructor(config) {
+			this.container = config.container;
+			const inputBg = config.inputBg || config.inputBackground || "#f5f5f5";
+			this.config = {
+				container: config.container,
+				searchPath: config.searchPath || "/ai-search",
+				placeholder: config.placeholder || "Describe what you're looking for...",
+				suggestions: config.suggestions || [],
+				brandColor: config.brandColor || "#0A5B3B",
+				textColor: config.textColor || "#303030",
+				suggestionsTextColor: config.suggestionsTextColor || "",
+				inputTextColor: config.inputTextColor || "",
+				mutedColor: config.mutedColor || "#9CA3AF",
+				inputBg,
+				inputBackground: inputBg,
+				inputOpacity: config.inputOpacity || "1",
+				suggestionsHoverBg: config.suggestionsHoverBg || "",
+				theme: config.theme || "light",
+				closeButton: config.closeButton || false,
+				onClose: config.onClose || (() => {}),
+				classAdditions: config.classAdditions || {}
+			};
+			this.validateConfig();
+			this.injectStyles();
+			this.render();
+			this.attachEventListeners();
+		}
+		/** Get the SDK version */
+		static get version() {
+			return VERSION;
+		}
+		/** Validate configuration */
+		validateConfig() {
+			if (!this.config.container) throw new Error("BonsaiSearchBar: container element is required");
+		}
+		/** Build class name string with any configured additional classes */
+		buildClassName(baseClass) {
+			const additions = this.config.classAdditions[baseClass];
+			if (additions && additions.length > 0) return `${baseClass} ${additions.join(" ")}`;
+			return baseClass;
+		}
+		/** Apply a shadow part name for external styling */
+		applyPart(el, part) {
+			el.setAttribute("part", part);
+		}
+		/** Inject CSS styles into the document */
+		injectStyles() {
+			if (this.stylesInjected) return;
+			if (document.getElementById("bonsai-searchbar-styles")) {
+				this.stylesInjected = true;
+				return;
+			}
+			const styleElement = document.createElement("style");
+			styleElement.id = "bonsai-searchbar-styles";
+			styleElement.textContent = SEARCHBAR_STYLES;
+			document.head.appendChild(styleElement);
+			this.stylesInjected = true;
+		}
+		/** Render the search bar UI */
+		render() {
+			this.container.innerHTML = "";
+			this.container.classList.add("bonsai-searchbar-container");
+			this.applyPart(this.container, "searchbar-container");
+			this.container.setAttribute("data-theme", this.config.theme);
+			this.container.style.setProperty("--bonsai-brand-color", this.config.brandColor);
+			this.container.style.setProperty("--bonsai-text-color", this.config.textColor);
+			this.container.style.setProperty("--bonsai-muted-color", this.config.mutedColor);
+			this.container.style.setProperty("--bonsai-input-bg", this.config.inputBg);
+			if (this.config.suggestionsTextColor) this.container.style.setProperty("--bonsai-suggestions-text-color", this.config.suggestionsTextColor);
+			if (this.config.inputTextColor) this.container.style.setProperty("--bonsai-input-text-color", this.config.inputTextColor);
+			if (this.config.suggestionsHoverBg) this.container.style.setProperty("--bonsai-suggestions-hover-bg", this.config.suggestionsHoverBg);
+			const wrapper = document.createElement("div");
+			wrapper.className = this.buildClassName("bonsai-searchbar-wrapper");
+			this.applyPart(wrapper, "searchbar-wrapper");
+			this.searchBar = document.createElement("div");
+			this.searchBar.className = this.buildClassName("bonsai-searchbar");
+			this.applyPart(this.searchBar, "searchbar");
+			this.searchBar.style.opacity = this.config.inputOpacity;
+			const searchIcon = document.createElement("div");
+			searchIcon.className = this.buildClassName("bonsai-searchbar-icon");
+			this.applyPart(searchIcon, "searchbar-icon");
+			searchIcon.innerHTML = ICONS.search;
+			this.searchBar.appendChild(searchIcon);
+			this.searchInput = document.createElement("input");
+			this.searchInput.type = "text";
+			this.searchInput.className = this.buildClassName("bonsai-searchbar-input");
+			this.applyPart(this.searchInput, "searchbar-input");
+			this.searchInput.placeholder = this.config.placeholder;
+			this.searchInput.setAttribute("aria-label", "Search input");
+			this.searchBar.appendChild(this.searchInput);
+			const actionsContainer = document.createElement("div");
+			actionsContainer.className = this.buildClassName("bonsai-searchbar-actions");
+			this.applyPart(actionsContainer, "searchbar-actions");
+			this.submitBtn = document.createElement("button");
+			this.submitBtn.type = "button";
+			this.submitBtn.className = this.buildClassName("bonsai-searchbar-submit");
+			this.applyPart(this.submitBtn, "searchbar-submit");
+			this.submitBtn.setAttribute("aria-label", "Submit search");
+			this.submitBtn.innerHTML = ICONS.arrowRight;
+			actionsContainer.appendChild(this.submitBtn);
+			const closeBtn = document.createElement("button");
+			closeBtn.type = "button";
+			closeBtn.className = this.buildClassName("bonsai-searchbar-close");
+			if (this.config.closeButton) closeBtn.classList.add("bonsai-searchbar-visible");
+			this.applyPart(closeBtn, "searchbar-close");
+			closeBtn.setAttribute("aria-label", "Close search");
+			closeBtn.innerHTML = ICONS.close;
+			closeBtn.addEventListener("click", () => this.config.onClose());
+			actionsContainer.appendChild(closeBtn);
+			this.searchBar.appendChild(actionsContainer);
+			wrapper.appendChild(this.searchBar);
+			if (this.config.suggestions.length > 0) {
+				this.suggestionsDropdown = document.createElement("div");
+				this.suggestionsDropdown.className = this.buildClassName("bonsai-searchbar-suggestions");
+				this.applyPart(this.suggestionsDropdown, "searchbar-suggestions");
+				this.suggestionsDropdown.setAttribute("role", "listbox");
+				this.renderSuggestions();
+				wrapper.appendChild(this.suggestionsDropdown);
+			}
+			this.container.appendChild(wrapper);
+			const poweredBy = document.createElement("div");
+			poweredBy.className = this.buildClassName("bonsai-searchbar-powered");
+			poweredBy.innerHTML = `powered by <a href="https://www.hibonsai.com/" target="_blank" rel="noopener" class="bonsai-searchbar-powered-link v${VERSION}">Bonsai<span class="bonsai-searchbar-powered-dot"></span></a>`;
+			this.applyPart(poweredBy, "searchbar-powered");
+			const poweredLink = poweredBy.querySelector(".bonsai-searchbar-powered-link");
+			if (poweredLink) this.applyPart(poweredLink, "searchbar-powered-link");
+			const poweredDot = poweredBy.querySelector(".bonsai-searchbar-powered-dot");
+			if (poweredDot) this.applyPart(poweredDot, "searchbar-powered-dot");
+			this.container.appendChild(poweredBy);
+		}
+		/** Render suggestions in the dropdown */
+		renderSuggestions() {
+			if (!this.suggestionsDropdown) return;
+			this.suggestionsDropdown.innerHTML = "";
+			(this.query ? this.config.suggestions.filter((s) => s.toLowerCase().includes(this.query.toLowerCase())).slice(0, 5) : this.config.suggestions.slice(0, 5)).forEach((suggestion) => {
+				const item = document.createElement("button");
+				item.type = "button";
+				item.className = this.buildClassName("bonsai-searchbar-suggestion");
+				this.applyPart(item, "searchbar-suggestion");
+				item.setAttribute("role", "option");
+				const text = document.createElement("span");
+				text.textContent = suggestion;
+				this.applyPart(text, "searchbar-suggestion-text");
+				item.appendChild(text);
+				const arrow = document.createElement("div");
+				arrow.className = this.buildClassName("bonsai-searchbar-suggestion-arrow");
+				this.applyPart(arrow, "searchbar-suggestion-arrow");
+				arrow.innerHTML = ICONS.arrowRight;
+				item.appendChild(arrow);
+				item.addEventListener("click", () => this.handleSuggestionClick(suggestion));
+				this.suggestionsDropdown.appendChild(item);
+			});
+		}
+		/** Attach event listeners */
+		attachEventListeners() {
+			if (!this.searchInput) return;
+			this.searchInput.addEventListener("focus", () => this.handleFocus());
+			this.searchInput.addEventListener("blur", () => this.handleBlur());
+			this.searchInput.addEventListener("input", (e) => this.handleInput(e));
+			this.searchInput.addEventListener("keydown", (e) => this.handleKeyDown(e));
+			this.submitBtn?.addEventListener("click", () => this.handleSubmit());
+		}
+		/** Handle input focus */
+		handleFocus() {
+			if (this.state === "default") this.setState("focused");
+			this.searchBar?.classList.add("bonsai-searchbar-focused");
+			if (this.suggestionsDropdown) {
+				this.renderSuggestions();
+				this.suggestionsDropdown.classList.add("bonsai-searchbar-visible");
+			}
+		}
+		/** Handle input blur */
+		handleBlur() {
+			this.searchBar?.classList.remove("bonsai-searchbar-focused");
+			setTimeout(() => {
+				this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+			}, 200);
+		}
+		/** Handle input change */
+		handleInput(e) {
+			this.query = e.target.value;
+			if (this.query) {
+				this.setState("filled");
+				this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+			} else {
+				this.setState("focused");
+				if (this.suggestionsDropdown) {
+					this.renderSuggestions();
+					this.suggestionsDropdown.classList.add("bonsai-searchbar-visible");
+				}
+			}
+		}
+		/** Handle key down */
+		handleKeyDown(e) {
+			if (e.key === "Enter" && this.query) {
+				e.preventDefault();
+				this.handleSubmit();
+			}
+		}
+		/** Handle suggestion click */
+		handleSuggestionClick(suggestion) {
+			this.query = suggestion;
+			if (this.searchInput) this.searchInput.value = suggestion;
+			this.suggestionsDropdown?.classList.remove("bonsai-searchbar-visible");
+			this.handleSubmit();
+		}
+		/** Handle search submit - redirect to search page */
+		handleSubmit(searchQuery) {
+			const queryToSearch = searchQuery ?? this.query;
+			if (!queryToSearch) return;
+			try {
+				localStorage.setItem("bonsai-search-query", queryToSearch);
+			} catch {}
+			const url = `${this.config.searchPath}?q=${encodeURIComponent(queryToSearch)}`;
+			window.location.href = url;
+		}
+		/** Set the current state and update UI */
+		setState(newState) {
+			this.state = newState;
+			this.updateSubmitButton();
+		}
+		/** Update submit button visibility based on state */
+		updateSubmitButton() {
+			if (!this.submitBtn) return;
+			if (this.state === "filled") this.submitBtn.classList.add("bonsai-searchbar-visible");
+			else this.submitBtn.classList.remove("bonsai-searchbar-visible");
+		}
+		/** Set the search query programmatically */
+		setQuery(query) {
+			this.query = query;
+			if (this.searchInput) this.searchInput.value = query;
+			if (query) this.setState("filled");
+			else this.setState("default");
+		}
+		/** Submit the search programmatically */
+		submit() {
+			this.handleSubmit();
+		}
+		/** Clear the search input */
+		clear() {
+			this.query = "";
+			if (this.searchInput) this.searchInput.value = "";
+			this.setState("default");
+		}
+		/** Destroy the instance and clean up */
+		destroy() {
+			this.container.innerHTML = "";
+		}
+	};
+	if (typeof window !== "undefined") window.BonsaiSearchBar = BonsaiSearchBar;
+
+//#endregion
+exports.BonsaiSearchBar = BonsaiSearchBar;
+exports.SEARCHBAR_STYLES = SEARCHBAR_STYLES;
+return exports;
+})({});