@etoile-dev/react 0.2.3 → 1.0.0

package/dist/hooks/useEtoileSearch.d.ts

@@ -0,0 +1,122 @@
+import type { SearchFilter, SearchResult } from "@etoile-dev/client";
+export type UseEtoileSearchOptions = {
+    /** Your Etoile API key */
+    apiKey: string;
+    /** Collections to search */
+    collections: string[];
+    /** Current search query (controlled externally, e.g. from Searchbar.Root) */
+    query: string;
+    /** Maximum results to return (default: 10) */
+    limit?: number;
+    /** Number of results to skip for pagination (default: 0) */
+    offset?: number;
+    /** Debounce delay in ms before firing the request (default: 100) */
+    debounceMs?: number;
+    /**
+     * Explicit metadata filters applied to results.
+     * Mutually exclusive with `autoFilters`.
+     *
+     * @example
+     * ```tsx
+     * filters={[
+     *   { key: "artist", operator: "eq", value: "Vincent van Gogh" },
+     *   { key: "year", operator: "lte", value: 1900 },
+     * ]}
+     * ```
+     */
+    filters?: SearchFilter[];
+    /**
+     * When true, the AI extracts filters from the query automatically.
+     * Returns `appliedFilters` and `refinedQuery` in the result.
+     * Mutually exclusive with `filters`.
+     *
+     * @example
+     * ```tsx
+     * // Query: "Van Gogh paintings after 1888"
+     * // → refinedQuery: "paintings"
+     * // → appliedFilters: [{ key: "artist", operator: "eq", value: "Vincent van Gogh" }, ...]
+     * autoFilters={true}
+     * ```
+     */
+    autoFilters?: boolean;
+    baseUrl?: string;
+};
+export type UseEtoileSearchReturn = {
+    /** Results returned by the last successful search. Empty while loading or on error. */
+    results: SearchResult[];
+    /** True while a fetch is in flight. */
+    isLoading: boolean;
+    /** Set when the last request failed; null otherwise. */
+    error: unknown;
+    /** Filters that were applied. Populated when `filters` or `autoFilters` is used. */
+    appliedFilters?: SearchFilter[];
+    /**
+     * Query rewritten by the AI after extracting filters.
+     * Only populated when `autoFilters` is `true`.
+     */
+    refinedQuery?: string;
+};
+/**
+ * Fetch live Etoile results for a query.
+ *
+ * Handles debouncing, in-flight cancellation, loading, and error state.
+ * Use this hook when composing headless primitives with your own layout.
+ *
+ * @param options - Hook options.
+ * @param options.apiKey - Your Etoile API key.
+ * @param options.collections - Collections to search in (e.g. `["paintings", "artists"]`).
+ * @param options.query - Current query string (controlled externally).
+ * @param options.limit - Maximum results to return (default: `10`).
+ * @param options.offset - Number of results to skip for pagination (default: `0`).
+ * @param options.debounceMs - Debounce delay in ms before firing the request (default: `100`).
+ * @param options.filters - Explicit metadata filters. Mutually exclusive with `autoFilters`.
+ * @param options.autoFilters - When `true`, the AI extracts filters from the query automatically.
+ * @returns Current search state: `results`, `isLoading`, `error`, `appliedFilters`, `refinedQuery`.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const { results, isLoading } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ * });
+ * ```
+ *
+ * @example With explicit filters
+ * ```tsx
+ * const { results } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ *   filters: [{ key: "artist", operator: "eq", value: "Vincent van Gogh" }],
+ * });
+ * ```
+ *
+ * @example With AI-powered auto-filters
+ * ```tsx
+ * // Query: "Van Gogh paintings after 1888"
+ * // → refinedQuery: "paintings"
+ * // → appliedFilters: [{ key: "artist", operator: "eq", value: "Vincent van Gogh" }, ...]
+ * const { results, refinedQuery, appliedFilters } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ *   autoFilters: true,
+ * });
+ * ```
+ */
+export declare function useEtoileSearch({ apiKey, collections, query, limit, offset, debounceMs, filters, autoFilters, baseUrl, }: UseEtoileSearchOptions): UseEtoileSearchReturn;
+/**
+ * Alias of `useEtoileSearch` for ergonomic imports in examples.
+ *
+ * @example
+ * ```tsx
+ * const { results } = useSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ * });
+ * ```
+ */
+export declare const useSearch: typeof useEtoileSearch;

package/dist/hooks/useEtoileSearch.js

@@ -0,0 +1,138 @@
+import * as React from "react";
+import { Etoile } from "@etoile-dev/client";
+/**
+ * Fetch live Etoile results for a query.
+ *
+ * Handles debouncing, in-flight cancellation, loading, and error state.
+ * Use this hook when composing headless primitives with your own layout.
+ *
+ * @param options - Hook options.
+ * @param options.apiKey - Your Etoile API key.
+ * @param options.collections - Collections to search in (e.g. `["paintings", "artists"]`).
+ * @param options.query - Current query string (controlled externally).
+ * @param options.limit - Maximum results to return (default: `10`).
+ * @param options.offset - Number of results to skip for pagination (default: `0`).
+ * @param options.debounceMs - Debounce delay in ms before firing the request (default: `100`).
+ * @param options.filters - Explicit metadata filters. Mutually exclusive with `autoFilters`.
+ * @param options.autoFilters - When `true`, the AI extracts filters from the query automatically.
+ * @returns Current search state: `results`, `isLoading`, `error`, `appliedFilters`, `refinedQuery`.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const { results, isLoading } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ * });
+ * ```
+ *
+ * @example With explicit filters
+ * ```tsx
+ * const { results } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ *   filters: [{ key: "artist", operator: "eq", value: "Vincent van Gogh" }],
+ * });
+ * ```
+ *
+ * @example With AI-powered auto-filters
+ * ```tsx
+ * // Query: "Van Gogh paintings after 1888"
+ * // → refinedQuery: "paintings"
+ * // → appliedFilters: [{ key: "artist", operator: "eq", value: "Vincent van Gogh" }, ...]
+ * const { results, refinedQuery, appliedFilters } = useEtoileSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ *   autoFilters: true,
+ * });
+ * ```
+ */
+export function useEtoileSearch({ apiKey, collections, query, limit = 10, offset, debounceMs = 100, filters, autoFilters, baseUrl, }) {
+    const [results, setResults] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [appliedFilters, setAppliedFilters] = React.useState(undefined);
+    const [refinedQuery, setRefinedQuery] = React.useState(undefined);
+    const client = React.useMemo(() => new Etoile({ apiKey, baseUrl }), [apiKey, baseUrl]);
+    // Stable refs so the effect dep array doesn't need filters/autoFilters arrays
+    const filtersRef = React.useRef(filters);
+    filtersRef.current = filters;
+    const autoFiltersRef = React.useRef(autoFilters);
+    autoFiltersRef.current = autoFilters;
+    // Debounce the raw query
+    const [debouncedQuery, setDebouncedQuery] = React.useState(query);
+    React.useEffect(() => {
+        const handle = setTimeout(() => setDebouncedQuery(query), debounceMs);
+        return () => clearTimeout(handle);
+    }, [query, debounceMs]);
+    // Show loading as soon as user types (avoids "no results" flash before debounced fetch)
+    React.useEffect(() => {
+        if (query.trim() !== "") {
+            setIsLoading(true);
+        }
+        else {
+            setIsLoading(false);
+        }
+    }, [query]);
+    // Fetch on debounced query / filter change
+    React.useEffect(() => {
+        if (debouncedQuery.trim() === "") {
+            setResults([]);
+            setAppliedFilters(undefined);
+            setRefinedQuery(undefined);
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+        let active = true;
+        setError(null);
+        client
+            .search({
+            collections,
+            query: debouncedQuery,
+            limit,
+            ...(offset !== undefined && { offset }),
+            ...(filtersRef.current !== undefined && { filters: filtersRef.current }),
+            ...(autoFiltersRef.current !== undefined && { autoFilters: autoFiltersRef.current }),
+        })
+            .then((res) => {
+            if (!active)
+                return;
+            setResults(Array.isArray(res.results) ? res.results : []);
+            setAppliedFilters(res.appliedFilters);
+            setRefinedQuery(res.refinedQuery);
+        })
+            .catch((err) => {
+            if (!active)
+                return;
+            setResults([]);
+            setAppliedFilters(undefined);
+            setRefinedQuery(undefined);
+            setError(err);
+        })
+            .finally(() => {
+            if (active)
+                setIsLoading(false);
+        });
+        return () => {
+            active = false;
+        };
+    }, [client, collections, debouncedQuery, limit, offset]);
+    return { results, isLoading, error, appliedFilters, refinedQuery };
+}
+/**
+ * Alias of `useEtoileSearch` for ergonomic imports in examples.
+ *
+ * @example
+ * ```tsx
+ * const { results } = useSearch({
+ *   apiKey: process.env.ETOILE_API_KEY!,
+ *   collections: ["paintings"],
+ *   query,
+ * });
+ * ```
+ */
+export const useSearch = useEtoileSearch;

package/dist/index.d.ts

@@ -1,20 +1,45 @@
-export { SearchRoot } from "./components/SearchRoot.js";
-export { SearchInput } from "./components/SearchInput.js";
-export { SearchResults } from "./components/SearchResults.js";
-export { SearchResult } from "./components/SearchResult.js";
-export { SearchResultThumbnail } from "./components/SearchResultThumbnail.js";
-export { SearchIcon } from "./components/SearchIcon.js";
-export { SearchKbd } from "./components/SearchKbd.js";
-export { Search } from "./Search.js";
-export { useSearch } from "./hooks/useSearch.js";
-export { useSearchContext } from "./context/SearchContext.js";
+export { Searchbar, SearchModal } from "./Searchbar.js";
+export { Root as SearchbarRoot } from "./primitives/Root.js";
+export { Input as SearchbarInput } from "./primitives/Input.js";
+export { List as SearchbarList } from "./primitives/List.js";
+export { Item as SearchbarItem } from "./primitives/Item.js";
+export { Group as SearchbarGroup } from "./primitives/Group.js";
+export { Separator as SearchbarSeparator } from "./primitives/Separator.js";
+export { Empty as SearchbarEmpty } from "./primitives/Empty.js";
+export { Loading as SearchbarLoading } from "./primitives/Loading.js";
+export { Error as SearchbarError } from "./primitives/Error.js";
+export { Portal as SearchbarPortal } from "./primitives/Portal.js";
+export { Overlay as SearchbarOverlay } from "./primitives/Overlay.js";
+export { Content as SearchbarContent } from "./primitives/Content.js";
+export { Modal as SearchbarModal } from "./primitives/Modal.js";
+export { ModalInput as SearchbarModalInput } from "./primitives/ModalInput.js";
+export { Trigger as SearchbarTrigger } from "./primitives/Trigger.js";
+export { Icon as SearchbarIcon } from "./primitives/Icon.js";
+export { Kbd as SearchbarKbd } from "./primitives/Kbd.js";
+export { Thumbnail as SearchbarThumbnail } from "./primitives/Thumbnail.js";
+export { useSearchbarContext, useSearchbarStore, useSearchbarState } from "./context.js";
+export { useEtoileSearch, useSearch } from "./hooks/useEtoileSearch.js";
+export type { SearchResult, SearchFilter, FilterOperator } from "@etoile-dev/client";
+/** @deprecated Use `SearchResult` from `@etoile-dev/client` instead. */
 export type { SearchResultData } from "./types.js";
-export type { SearchRootProps } from "./components/SearchRoot.js";
-export type { SearchInputProps } from "./components/SearchInput.js";
-export type { SearchResultsProps } from "./components/SearchResults.js";
-export type { SearchResultProps } from "./components/SearchResult.js";
-export type { SearchResultThumbnailProps } from "./components/SearchResultThumbnail.js";
-export type { SearchIconProps } from "./components/SearchIcon.js";
-export type { SearchKbdProps } from "./components/SearchKbd.js";
-export type { SearchProps } from "./Search.js";
-export type { UseSearchOptions, UseSearchReturn } from "./hooks/useSearch.js";
+export type { SearchbarProps, SearchModalProps } from "./Searchbar.js";
+export type { SearchbarRootProps } from "./primitives/Root.js";
+export type { SearchbarInputProps } from "./primitives/Input.js";
+export type { SearchbarListProps } from "./primitives/List.js";
+export type { SearchbarItemProps } from "./primitives/Item.js";
+export type { SearchbarGroupProps } from "./primitives/Group.js";
+export type { SearchbarSeparatorProps } from "./primitives/Separator.js";
+export type { SearchbarEmptyProps } from "./primitives/Empty.js";
+export type { SearchbarLoadingProps } from "./primitives/Loading.js";
+export type { SearchbarErrorProps } from "./primitives/Error.js";
+export type { SearchbarPortalProps } from "./primitives/Portal.js";
+export type { SearchbarOverlayProps } from "./primitives/Overlay.js";
+export type { SearchbarContentProps } from "./primitives/Content.js";
+export type { SearchbarModalProps } from "./primitives/Modal.js";
+export type { SearchbarModalInputProps } from "./primitives/ModalInput.js";
+export type { SearchbarTriggerProps } from "./primitives/Trigger.js";
+export type { SearchbarIconProps } from "./primitives/Icon.js";
+export type { SearchbarKbdProps } from "./primitives/Kbd.js";
+export type { SearchbarThumbnailProps } from "./primitives/Thumbnail.js";
+export type { SearchbarState, SearchbarStore } from "./store.js";
+export type { UseEtoileSearchOptions, UseEtoileSearchReturn } from "./hooks/useEtoileSearch.js";

package/dist/index.js

@@ -1,12 +1,37 @@
-// Components
-export { SearchRoot } from "./components/SearchRoot.js";
-export { SearchInput } from "./components/SearchInput.js";
-export { SearchResults } from "./components/SearchResults.js";
-export { SearchResult } from "./components/SearchResult.js";
-export { SearchResultThumbnail } from "./components/SearchResultThumbnail.js";
-export { SearchIcon } from "./components/SearchIcon.js";
-export { SearchKbd } from "./components/SearchKbd.js";
-export { Search } from "./Search.js";
-// Hooks
-export { useSearch } from "./hooks/useSearch.js";
-export { useSearchContext } from "./context/SearchContext.js";
+// ─── Primary export ───────────────────────────────────────────────────────────
+//
+// `Searchbar` is both a ready-to-use Etoile search component AND
+// the namespace for all headless primitives:
+//
+//   <Searchbar apiKey="…" collections={["paintings"]} />
+//
+//   <Searchbar.Root onSelect={…}>
+//     <Searchbar.Input />
+//     <Searchbar.List>
+//       <Searchbar.Item value="…">…</Searchbar.Item>
+//       <Searchbar.Empty>No results</Searchbar.Empty>
+//     </Searchbar.List>
+//   </Searchbar.Root>
+export { Searchbar, SearchModal } from "./Searchbar.js";
+// ─── Individual primitive exports (tree-shakeable) ────────────────────────────
+export { Root as SearchbarRoot } from "./primitives/Root.js";
+export { Input as SearchbarInput } from "./primitives/Input.js";
+export { List as SearchbarList } from "./primitives/List.js";
+export { Item as SearchbarItem } from "./primitives/Item.js";
+export { Group as SearchbarGroup } from "./primitives/Group.js";
+export { Separator as SearchbarSeparator } from "./primitives/Separator.js";
+export { Empty as SearchbarEmpty } from "./primitives/Empty.js";
+export { Loading as SearchbarLoading } from "./primitives/Loading.js";
+export { Error as SearchbarError } from "./primitives/Error.js";
+export { Portal as SearchbarPortal } from "./primitives/Portal.js";
+export { Overlay as SearchbarOverlay } from "./primitives/Overlay.js";
+export { Content as SearchbarContent } from "./primitives/Content.js";
+export { Modal as SearchbarModal } from "./primitives/Modal.js";
+export { ModalInput as SearchbarModalInput } from "./primitives/ModalInput.js";
+export { Trigger as SearchbarTrigger } from "./primitives/Trigger.js";
+export { Icon as SearchbarIcon } from "./primitives/Icon.js";
+export { Kbd as SearchbarKbd } from "./primitives/Kbd.js";
+export { Thumbnail as SearchbarThumbnail } from "./primitives/Thumbnail.js";
+// ─── Context hook (advanced usage) ───────────────────────────────────────────
+export { useSearchbarContext, useSearchbarStore, useSearchbarState } from "./context.js";
+export { useEtoileSearch, useSearch } from "./hooks/useEtoileSearch.js";

package/dist/primitives/Content.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export type SearchbarContentProps = {
+    /** Accessible label for the dialog */
+    "aria-label"?: string;
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role">;
+/**
+ * Floating content panel for command palette / modal mode.
+ *
+ * Implements `role="dialog"` with `aria-modal`, focus trapping (focus stays
+ * inside when open), and restores focus to the Trigger on close.
+ *
+ * Height animates smoothly when results appear or disappear via ResizeObserver.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Portal>
+ *   <Searchbar.Overlay />
+ *   <Searchbar.Content aria-label="Search">
+ *     <Searchbar.ModalInput />
+ *     <Searchbar.List>…</Searchbar.List>
+ *   </Searchbar.Content>
+ * </Searchbar.Portal>
+ * ```
+ */
+export declare const Content: React.ForwardRefExoticComponent<{
+    /** Accessible label for the dialog */
+    "aria-label"?: string;
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Content.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSearchbarContext, useSearchbarStore, SearchbarHideListWhenQueryEmptyContext, } from "../context.js";
+import { Slot } from "../utils/slot.js";
+const PRESENCE_DURATION_MS = 300;
+/**
+ * Floating content panel for command palette / modal mode.
+ *
+ * Implements `role="dialog"` with `aria-modal`, focus trapping (focus stays
+ * inside when open), and restores focus to the Trigger on close.
+ *
+ * Height animates smoothly when results appear or disappear via ResizeObserver.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Portal>
+ *   <Searchbar.Overlay />
+ *   <Searchbar.Content aria-label="Search">
+ *     <Searchbar.ModalInput />
+ *     <Searchbar.List>…</Searchbar.List>
+ *   </Searchbar.Content>
+ * </Searchbar.Portal>
+ * ```
+ */
+export const Content = React.forwardRef(({ "aria-label": ariaLabel = "Search", className, asChild = false, children, ...props }, forwardedRef) => {
+    const { store, rootId, rootClassName, handleKeyDown, triggerRef } = useSearchbarContext();
+    const isOpen = useSearchbarStore(store, (s) => s.open);
+    const [present, setPresent] = React.useState(isOpen);
+    const contentRef = React.useRef(null);
+    const innerRef = React.useRef(null);
+    const mergedClassName = [rootClassName, className].filter(Boolean).join(" ") || undefined;
+    // Focus first focusable on open; restore focus to Trigger on close; trap focus
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const node = contentRef.current;
+        const getFocusables = () => Array.from(node?.querySelectorAll('input, button, [tabindex]:not([tabindex="-1"])') ?? []);
+        const focusable = getFocusables()[0];
+        focusable?.focus();
+        const handleFocusIn = (e) => {
+            if (!node?.contains(e.target)) {
+                e.preventDefault();
+                getFocusables()[0]?.focus();
+            }
+        };
+        document.addEventListener("focusin", handleFocusIn);
+        return () => {
+            document.removeEventListener("focusin", handleFocusIn);
+            triggerRef?.current?.focus();
+        };
+    }, [isOpen, triggerRef]);
+    React.useEffect(() => {
+        if (isOpen) {
+            setPresent(true);
+            return;
+        }
+        const timeout = window.setTimeout(() => setPresent(false), PRESENCE_DURATION_MS);
+        return () => window.clearTimeout(timeout);
+    }, [isOpen]);
+    // Animate height via ResizeObserver watching the inner content wrapper.
+    // The first measurement is applied instantly (no transition) so the open
+    // animation isn't interrupted. Subsequent changes (results appearing /
+    // disappearing) are handled by the CSS transition on the outer panel.
+    React.useLayoutEffect(() => {
+        const inner = innerRef.current;
+        const outer = contentRef.current;
+        if (!inner || !outer)
+            return;
+        const outerStyle = getComputedStyle(outer);
+        const paddingY = parseFloat(outerStyle.paddingTop) + parseFloat(outerStyle.paddingBottom);
+        let initial = true;
+        const observer = new ResizeObserver(([entry]) => {
+            const targetHeight = entry.contentRect.height + paddingY;
+            if (initial) {
+                // Set instantly on first render — don't fight the open animation.
+                outer.style.transition = "none";
+                outer.style.height = `${targetHeight}px`;
+                requestAnimationFrame(() => {
+                    outer.style.transition = "";
+                    initial = false;
+                });
+            }
+            else {
+                outer.style.height = `${targetHeight}px`;
+            }
+        });
+        observer.observe(inner);
+        return () => {
+            observer.disconnect();
+            outer.style.height = "";
+            outer.style.transition = "";
+        };
+    }, [present]);
+    if (!present)
+        return null;
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(SearchbarHideListWhenQueryEmptyContext.Provider, { value: true, children: _jsx(Comp, { ...props, ref: (node) => {
+                contentRef.current = node;
+                if (typeof forwardedRef === "function")
+                    forwardedRef(node);
+                else if (forwardedRef)
+                    forwardedRef.current = node;
+            }, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, className: mergedClassName, "data-state": isOpen ? "open" : "closed", "data-slot": "searchbar-content", "data-searchbar-root": rootId, onKeyDown: (event) => {
+                props.onKeyDown?.(event);
+                handleKeyDown(event);
+            }, children: _jsx("div", { ref: innerRef, "data-slot": "searchbar-content-inner", children: children }) }) }));
+});
+Content.displayName = "Searchbar.Content";

package/dist/primitives/Empty.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type SearchbarEmptyProps = {
+    /** Defaults to "No results." */
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role">;
+/**
+ * Renders only when the list is open, query is non-empty, no items match the
+ * current filter, and a search is not in progress.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map(…)}
+ *   <Searchbar.Empty>No paintings found.</Searchbar.Empty>
+ * </Searchbar.List>
+ * ```
+ */
+export declare const Empty: React.ForwardRefExoticComponent<{
+    /** Defaults to "No results." */
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Empty.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSearchbarContext, useSearchbarStore } from "../context.js";
+import { Slot } from "../utils/slot.js";
+/**
+ * Renders only when the list is open, query is non-empty, no items match the
+ * current filter, and a search is not in progress.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map(…)}
+ *   <Searchbar.Empty>No paintings found.</Searchbar.Empty>
+ * </Searchbar.List>
+ * ```
+ */
+export const Empty = React.forwardRef(({ children = "No results.", className, asChild = false, ...props }, forwardedRef) => {
+    const { store } = useSearchbarContext();
+    const show = useSearchbarStore(store, (s) => s.open && s.query.trim() !== "" && s.filteredValues.length === 0 && !s.isLoading);
+    if (!show)
+        return null;
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ...props, ref: forwardedRef, role: "status", className: className, "data-slot": "searchbar-empty", "data-state": "empty", children: children }));
+});
+Empty.displayName = "Searchbar.Empty";

package/dist/primitives/Error.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export type SearchbarErrorProps = {
+    /**
+     * Content to render. Can be a node or a render function that receives the
+     * current error value.
+     */
+    children?: React.ReactNode | ((error: unknown) => React.ReactNode);
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children">;
+/**
+ * Renders only when `error` is set on Searchbar.Root.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Error>
+ *   {(err) => `Search failed: ${String(err)}`}
+ * </Searchbar.Error>
+ * ```
+ */
+export declare const Error: React.ForwardRefExoticComponent<{
+    /**
+     * Content to render. Can be a node or a render function that receives the
+     * current error value.
+     */
+    children?: React.ReactNode | ((error: unknown) => React.ReactNode);
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "role"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Error.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSearchbarContext, useSearchbarStore } from "../context.js";
+import { Slot } from "../utils/slot.js";
+/**
+ * Renders only when `error` is set on Searchbar.Root.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Error>
+ *   {(err) => `Search failed: ${String(err)}`}
+ * </Searchbar.Error>
+ * ```
+ */
+export const Error = React.forwardRef(({ children = "Something went wrong.", className, asChild = false, ...props }, forwardedRef) => {
+    const { store } = useSearchbarContext();
+    const error = useSearchbarStore(store, (s) => s.error);
+    if (!error)
+        return null;
+    const Comp = asChild ? Slot : "div";
+    const content = typeof children === "function"
+        ? children(error)
+        : children;
+    return (_jsx(Comp, { ...props, ref: forwardedRef, role: "alert", className: className, "data-slot": "searchbar-error", "data-state": "error", children: content }));
+});
+Error.displayName = "Searchbar.Error";

package/dist/primitives/Group.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+export type SearchbarGroupProps = {
+    /** Accessible label for the group */
+    label?: string;
+    /** Additional CSS class name */
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Groups related search items under a labelled section.
+ *
+ * Renders a heading and wraps children in an ARIA group role.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Group label="Paintings">
+ *   <Searchbar.Item value="starry-night">The Starry Night</Searchbar.Item>
+ *   <Searchbar.Item value="irises">Irises</Searchbar.Item>
+ * </Searchbar.Group>
+ * ```
+ */
+export declare const Group: React.ForwardRefExoticComponent<{
+    /** Accessible label for the group */
+    label?: string;
+    /** Additional CSS class name */
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;