@etoile-dev/react 0.2.1 → 0.2.3

package/README.md

@@ -223,6 +223,7 @@ Convenience component that composes all primitives.
 | `apiKey`       | `string`                                      | ✓        |         |
 | `collections`  | `string[]`                                    | ✓        |         |
 | `limit`        | `number`                                      |          | `10`    |
+| `debounceMs`   | `number`                                      |          | `100`   |
 | `renderResult` | `(result: SearchResultData) => React.ReactNode` |          |         |
 
 ---

package/dist/Search.d.ts

@@ -7,6 +7,8 @@ export type SearchProps = {
     collections: string[];
     /** Maximum number of results to return (default: 10) */
     limit?: number;
+    /** Debounce delay in milliseconds before triggering search (default: 100) */
+    debounceMs?: number;
     /** Placeholder text for the search input */
     placeholder?: string;
     /** Additional CSS class name (e.g., "dark" for dark mode) */
@@ -34,4 +36,4 @@ export type SearchProps = {
  * <Search apiKey="your-api-key" collections={["paintings"]} className="dark" />
  * ```
  */
-export declare const Search: ({ apiKey, collections, limit, placeholder, className, renderResult, baseUrl, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ apiKey, collections, limit, debounceMs, 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, 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 })] }));
+export const Search = ({ apiKey, collections, limit, debounceMs, placeholder = "Search...", className, renderResult, baseUrl, }) => {
+    return (_jsxs(SearchRoot, { apiKey: apiKey, collections: collections, limit: limit, debounceMs: debounceMs, 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/SearchInput.d.ts

@@ -1,14 +1,16 @@
+import * as React from "react";
 export type SearchInputProps = {
     /** Placeholder text for the input field */
     placeholder?: string;
     /** CSS class name for styling the input */
     className?: string;
-};
+} & React.InputHTMLAttributes<HTMLInputElement>;
 /**
  * Search input component with built-in keyboard navigation and accessibility.
  *
  * Integrates with SearchRoot context to provide debouncing and keyboard controls
  * (ArrowUp, ArrowDown, Enter, Escape). Implements ARIA combobox pattern.
+ * Accepts standard input props like aria-label and autoComplete.
  *
  * @param props - Component props
  *
@@ -25,4 +27,4 @@ export type SearchInputProps = {
  * />
  * ```
  */
-export declare const SearchInput: ({ placeholder, className }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchInput: ({ placeholder, className, ...props }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchInput.js

@@ -5,6 +5,7 @@ import { useSearchContext } from "../context/SearchContext.js";
  *
  * Integrates with SearchRoot context to provide debouncing and keyboard controls
  * (ArrowUp, ArrowDown, Enter, Escape). Implements ARIA combobox pattern.
+ * Accepts standard input props like aria-label and autoComplete.
  *
  * @param props - Component props
  *
@@ -21,21 +22,28 @@ import { useSearchContext } from "../context/SearchContext.js";
  * />
  * ```
  */
-export const SearchInput = ({ placeholder, className }) => {
+export const SearchInput = ({ placeholder, className, ...props }) => {
     const { query, setQuery, results, isOpen, setOpen, selectedIndex, setSelectedIndex, listboxId, getResultId, handleKeyDown, autoFocus, } = useSearchContext();
     const showResults = isOpen && results.length > 0;
     const activeId = selectedIndex >= 0 && showResults ? getResultId(selectedIndex) : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", placeholder: placeholder, className: className, value: query, autoFocus: autoFocus, role: "combobox", "aria-expanded": showResults, "aria-controls": listboxId, "aria-activedescendant": activeId, "aria-autocomplete": "list", onChange: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ...props, type: "text", placeholder: placeholder, className: className, value: query, autoFocus: autoFocus, role: "combobox", "aria-expanded": showResults, "aria-controls": listboxId, "aria-activedescendant": activeId, "aria-autocomplete": "list", onChange: (event) => {
+                    props.onChange?.(event);
                     const nextValue = event.target.value;
                     setQuery(nextValue);
                     if (nextValue.trim() !== "") {
                         setSelectedIndex(0);
                     }
-                }, onFocus: () => {
-                    if (query.trim() !== "" && results.length > 0) {
+                }, onFocus: (event) => {
+                    props.onFocus?.(event);
+                    if (!event.defaultPrevented && query.trim() !== "" && results.length > 0) {
                         setOpen(true);
                     }
-                }, onKeyDown: handleKeyDown }), _jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: {
+                }, onKeyDown: (event) => {
+                    props.onKeyDown?.(event);
+                    if (!event.defaultPrevented) {
+                        handleKeyDown(event);
+                    }
+                } }), _jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: {
                     position: "absolute",
                     width: 1,
                     height: 1,

package/dist/components/SearchResult.d.ts

@@ -4,12 +4,13 @@ export type SearchResultProps = {
     className?: string;
     /** Content to render inside the result */
     children: React.ReactNode;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 /**
  * Individual search result item with selection state and keyboard navigation.
  *
  * Manages selection state and accessibility attributes. Provides `data-selected`
  * attribute for styling the active result. Must be used inside SearchResults.
+ * Accepts standard div props like onClick for custom behavior.
  *
  * @param props - Component props
  *
@@ -27,4 +28,4 @@ export type SearchResultProps = {
  * // CSS: .result-item[data-selected="true"] { background: #f0f9ff; }
  * ```
  */
-export declare const SearchResult: ({ className, children }: SearchResultProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SearchResult: ({ className, children, ...props }: SearchResultProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SearchResult.js

@@ -7,6 +7,7 @@ import { SearchResultIndexContext } from "./SearchResults.js";
  *
  * Manages selection state and accessibility attributes. Provides `data-selected`
  * attribute for styling the active result. Must be used inside SearchResults.
+ * Accepts standard div props like onClick for custom behavior.
  *
  * @param props - Component props
  *
@@ -24,7 +25,7 @@ import { SearchResultIndexContext } from "./SearchResults.js";
  * // CSS: .result-item[data-selected="true"] { background: #f0f9ff; }
  * ```
  */
-export const SearchResult = ({ className, children }) => {
+export const SearchResult = ({ className, children, ...props }) => {
     const { selectedIndex, registerResult, getResultId } = useSearchContext();
     const index = React.useContext(SearchResultIndexContext);
     if (index === null) {
@@ -35,5 +36,5 @@ export const SearchResult = ({ className, children }) => {
     const setRef = React.useCallback((node) => {
         registerResult(index, node);
     }, [index, registerResult]);
-    return (_jsx("div", { ref: setRef, id: id, role: "option", "aria-selected": isSelected, "data-selected": isSelected ? "true" : "false", "data-index": index, tabIndex: isSelected ? 0 : -1, className: className, children: children }));
+    return (_jsx("div", { ...props, ref: setRef, id: id, role: "option", "aria-selected": isSelected, "data-selected": isSelected ? "true" : "false", "data-index": index, tabIndex: isSelected ? 0 : -1, className: className, children: children }));
 };

package/dist/components/SearchResultThumbnail.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export type SearchResultThumbnailProps = {
     /** Image source URL (defaults to result.metadata.thumbnailUrl) */
     src?: string;
@@ -7,12 +8,13 @@ export type SearchResultThumbnailProps = {
     size?: number;
     /** CSS class name for styling */
     className?: string;
-};
+} & React.ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Thumbnail image for search results with automatic source detection.
  *
  * Automatically uses `metadata.thumbnailUrl` if available. Returns null
  * if no image source is found. Must be used inside SearchResults.
+ * Accepts standard img props like loading and decoding.
  *
  * @param props - Component props
  *
@@ -33,4 +35,4 @@ export type SearchResultThumbnailProps = {
  * <SearchResultThumbnail size={48} className="rounded-full" />
  * ```
  */
-export declare const SearchResultThumbnail: ({ src, alt, size, className, }: SearchResultThumbnailProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SearchResultThumbnail: ({ src, alt, size, className, ...props }: SearchResultThumbnailProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SearchResultThumbnail.js

@@ -6,6 +6,7 @@ import { SearchResultDataContext } from "./SearchResults.js";
  *
  * Automatically uses `metadata.thumbnailUrl` if available. Returns null
  * if no image source is found. Must be used inside SearchResults.
+ * Accepts standard img props like loading and decoding.
  *
  * @param props - Component props
  *
@@ -26,12 +27,12 @@ import { SearchResultDataContext } from "./SearchResults.js";
  * <SearchResultThumbnail size={48} className="rounded-full" />
  * ```
  */
-export const SearchResultThumbnail = ({ src, alt, size = 40, className, }) => {
+export const SearchResultThumbnail = ({ src, alt, size = 40, className, ...props }) => {
     const result = React.useContext(SearchResultDataContext);
     const imageSrc = src ?? result?.metadata?.thumbnailUrl;
     const imageAlt = alt ?? result?.title ?? "";
     if (!imageSrc) {
         return null;
     }
-    return (_jsx("img", { src: imageSrc, alt: imageAlt, width: size, height: size, className: className, draggable: false }));
+    return (_jsx("img", { ...props, src: imageSrc, alt: imageAlt, width: size, height: size, className: className, draggable: false }));
 };

package/dist/components/SearchResults.d.ts

@@ -5,7 +5,7 @@ export type SearchResultsProps = {
     className?: string;
     /** Render function that receives each search result */
     children: (result: SearchResultData) => React.ReactNode;
-};
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 export declare const SearchResultIndexContext: React.Context<number | null>;
 export declare const SearchResultDataContext: React.Context<SearchResultData | null>;
 /**
@@ -13,6 +13,7 @@ export declare const SearchResultDataContext: React.Context<SearchResultData | n
  *
  * Accepts a render function that receives each result. Automatically hides
  * when query is empty or no results found. Includes ARIA listbox role.
+ * Accepts standard div props like onScroll and style.
  *
  * @param props - Component props
  *
@@ -35,4 +36,4 @@ export declare const SearchResultDataContext: React.Context<SearchResultData | n
  * </SearchResults>
  * ```
  */
-export declare const SearchResults: ({ className, children }: SearchResultsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SearchResults: ({ className, children, ...props }: SearchResultsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SearchResults.js

@@ -8,6 +8,7 @@ export const SearchResultDataContext = React.createContext(null);
  *
  * Accepts a render function that receives each result. Automatically hides
  * when query is empty or no results found. Includes ARIA listbox role.
+ * Accepts standard div props like onScroll and style.
  *
  * @param props - Component props
  *
@@ -30,7 +31,7 @@ export const SearchResultDataContext = React.createContext(null);
  * </SearchResults>
  * ```
  */
-export const SearchResults = ({ className, children }) => {
+export const SearchResults = ({ className, children, ...props }) => {
     const { query, results, isOpen, selectedIndex, listboxId, getResultNode } = useSearchContext();
     const listboxRef = React.useRef(null);
     React.useEffect(() => {
@@ -48,5 +49,5 @@ export const SearchResults = ({ className, children }) => {
     if (!isOpen || query.trim() === "" || results.length === 0) {
         return null;
     }
-    return (_jsx("div", { role: "listbox", id: listboxId, className: className, ref: listboxRef, children: results.map((result, index) => (_jsx(SearchResultIndexContext.Provider, { value: index, children: _jsx(SearchResultDataContext.Provider, { value: result, children: children(result) }) }, result.external_id))) }));
+    return (_jsx("div", { ...props, role: "listbox", id: listboxId, className: className, ref: listboxRef, children: results.map((result, index) => (_jsx(SearchResultIndexContext.Provider, { value: index, children: _jsx(SearchResultDataContext.Provider, { value: result, children: children(result) }) }, result.external_id))) }));
 };

package/package.json

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