@etoile-dev/react 0.1.2 → 0.2.0

package/dist/Search.d.ts

@@ -13,6 +13,7 @@ export type SearchProps = {
     className?: string;
     /** Custom render function for each result (optional) */
     renderResult?: (result: SearchResultData) => React.ReactNode;
+    baseUrl?: string;
 };
 /**
  * All-in-one search component with sensible defaults.
@@ -33,4 +34,4 @@ export type SearchProps = {
  * <Search apiKey="your-api-key" collections={["paintings"]} className="dark" />
  * ```
  */
-export declare const Search: ({ apiKey, collections, limit, placeholder, className, renderResult, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ apiKey, collections, limit, placeholder, className, renderResult, baseUrl, }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Search.js

@@ -26,6 +26,6 @@ const DefaultResult = (result) => (_jsxs(SearchResult, { children: [_jsx(SearchR
  * <Search apiKey="your-api-key" collections={["paintings"]} className="dark" />
  * ```
  */
-export const Search = ({ apiKey, collections, limit, placeholder = "Search...", className, renderResult, }) => {
-    return (_jsxs(SearchRoot, { apiKey: apiKey, collections: collections, limit: limit, className: className, children: [_jsxs("div", { className: "etoile-input-wrapper", children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { placeholder: placeholder }), _jsx(SearchKbd, {})] }), _jsx(SearchResults, { children: renderResult ?? DefaultResult })] }));
+export const Search = ({ apiKey, collections, limit, placeholder = "Search...", className, renderResult, baseUrl, }) => {
+    return (_jsxs(SearchRoot, { apiKey: apiKey, collections: collections, limit: limit, className: className, baseUrl: baseUrl, children: [_jsxs("div", { className: "etoile-input-wrapper", children: [_jsx(SearchIcon, {}), _jsx(SearchInput, { placeholder: placeholder }), _jsx(SearchKbd, {})] }), _jsx(SearchResults, { children: renderResult ?? DefaultResult })] }));
 };

package/dist/components/SearchRoot.d.ts

@@ -14,6 +14,7 @@ export type SearchRootProps = {
     className?: string;
     /** Child components (SearchInput, SearchResults, etc.) */
     children: React.ReactNode;
+    baseUrl?: string;
 };
 /**
  * Root component for Étoile search that provides context to all child components.
@@ -40,4 +41,4 @@ export type SearchRootProps = {
  * </SearchRoot>
  * ```
  */
-export declare const SearchRoot: ({ apiKey, collections, limit, debounceMs, autoFocus, className, children, }: SearchRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchRoot: ({ apiKey, collections, limit, debounceMs, autoFocus, className, children, baseUrl, }: SearchRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchRoot.js

@@ -27,8 +27,8 @@ import { useSearch } from "../hooks/useSearch.js";
  * </SearchRoot>
  * ```
  */
-export const SearchRoot = ({ apiKey, collections, limit, debounceMs, autoFocus = false, className, children, }) => {
-    const search = useSearch({ apiKey, collections, limit, debounceMs });
+export const SearchRoot = ({ apiKey, collections, limit, debounceMs, autoFocus = false, className, children, baseUrl, }) => {
+    const search = useSearch({ apiKey, collections, limit, debounceMs, baseUrl });
     const listboxId = React.useId();
     const resultRefs = React.useRef(new Map());
     const registerResult = (index, node) => {

package/dist/hooks/useSearch.d.ts

@@ -8,6 +8,7 @@ export type UseSearchOptions = {
     limit?: number;
     /** Debounce delay in milliseconds before triggering search (default: 100) */
     debounceMs?: number;
+    baseUrl?: string;
 };
 export type UseSearchReturn = {
     /** Current search query string */
@@ -52,4 +53,4 @@ export type UseSearchReturn = {
  * });
  * ```
  */
-export declare const useSearch: ({ apiKey, collections, limit, debounceMs, }: UseSearchOptions) => UseSearchReturn;
+export declare const useSearch: ({ apiKey, collections, limit, debounceMs, baseUrl, }: UseSearchOptions) => UseSearchReturn;

package/dist/hooks/useSearch.js

@@ -39,12 +39,13 @@ const clampIndex = (index, length) => {
  * });
  * ```
  */
-export const useSearch = ({ apiKey, collections, limit = 10, debounceMs = 100, }) => {
+export const useSearch = ({ apiKey, collections, limit = 10, debounceMs = 100, baseUrl, }) => {
     const [query, setQuery] = React.useState("");
     const [debouncedQuery, setDebouncedQuery] = React.useState("");
     const [results, setResults] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
     const [selectedIndex, setSelectedIndexState] = React.useState(-1);
+    const client = React.useMemo(() => new Etoile({ apiKey, baseUrl }), [apiKey, baseUrl]);
     React.useEffect(() => {
         const handle = setTimeout(() => {
             setDebouncedQuery(query);
@@ -63,7 +64,6 @@ export const useSearch = ({ apiKey, collections, limit = 10, debounceMs = 100, }
         const runSearch = async () => {
             setIsLoading(true);
             try {
-                const client = new Etoile({ apiKey });
                 const response = await client.search({
                     collections,
                     query: debouncedQuery,
@@ -90,7 +90,7 @@ export const useSearch = ({ apiKey, collections, limit = 10, debounceMs = 100, }
         return () => {
             isActive = false;
         };
-    }, [apiKey, collections, debouncedQuery, limit]);
+    }, [client, collections, debouncedQuery, limit]);
     React.useEffect(() => {
         setSelectedIndexState((current) => clampIndex(current, results.length));
     }, [results.length]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etoile-dev/react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Official React primitives for Étoile - Headless, composable search components",
   "keywords": [
     "etoile",
@@ -49,10 +49,10 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@etoile-dev/client": "^0.1.0"
+    "@etoile-dev/client": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "typescript": "^5.0.0"
   }
-}
+}