@etoile-dev/react 0.2.3 → 1.0.1

package/dist/primitives/Root.js

@@ -0,0 +1,413 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createSearchbarStore } from "../store.js";
+import { SearchbarProvider, useSearchbarStore, } from "../context.js";
+import { Slot } from "../utils/slot.js";
+/** Clear query/results only after Content has unmounted (presence is 300ms) */
+const CLEAR_AFTER_CLOSE_MS = 350;
+const escapeSelectorValue = (value) => {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    return value.replace(/["\\]/g, "\\$&");
+};
+/**
+ * Root of the Searchbar component tree. Manages all search state and provides
+ * it to child primitives via an external store (`useSyncExternalStore`).
+ *
+ * Supports fully controlled, fully uncontrolled, and mixed modes for `open`,
+ * `search`, and `value`. Handles keyboard navigation, selection, escape
+ * behavior, outside click close, and portal-aware focus boundaries.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root onSelect={(value) => console.log(value)}>
+ *   <Searchbar.Input />
+ *   <Searchbar.List>
+ *     {items.map((item) => (
+ *       <Searchbar.Item key={item.id} value={item.id}>{item.title}</Searchbar.Item>
+ *     ))}
+ *     <Searchbar.Empty>No results</Searchbar.Empty>
+ *   </Searchbar.List>
+ * </Searchbar.Root>
+ * ```
+ *
+ * @example Command palette
+ * ```tsx
+ * <Searchbar.Root hotkey="mod+k" className="etoile-search">
+ *   <Searchbar.Trigger>
+ *     <Searchbar.Icon />
+ *     Search paintings…
+ *     <Searchbar.Kbd />
+ *   </Searchbar.Trigger>
+ *   <Searchbar.Portal>
+ *     <Searchbar.Overlay />
+ *     <Searchbar.Content aria-label="Search paintings">
+ *       <Searchbar.Input />
+ *       <Searchbar.List>
+ *         <Searchbar.Item value="starry-night">The Starry Night</Searchbar.Item>
+ *       </Searchbar.List>
+ *     </Searchbar.Content>
+ *   </Searchbar.Portal>
+ * </Searchbar.Root>
+ * ```
+ */
+export const Root = React.forwardRef(({ open: controlledOpen, defaultOpen = false, onOpenChange, search: controlledSearch, defaultSearch = "", onSearchChange, value: controlledValue, defaultValue = null, onValueChange, isLoading = false, error, hotkey, hotkeyBehavior = "toggle", onSelect, children, className, asChild = false, ...domProps }, forwardedRef) => {
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const listId = React.useId();
+    const baseId = React.useId();
+    const rootId = React.useId();
+    const isOpenControlled = controlledOpen !== undefined;
+    const isSearchControlled = controlledSearch !== undefined;
+    const isValueControlled = controlledValue !== undefined;
+    // Create the store once; never recreate it
+    const [store] = React.useState(() => createSearchbarStore({
+        open: isOpenControlled ? controlledOpen : defaultOpen,
+        query: isSearchControlled ? controlledSearch : defaultSearch,
+        selectedValue: isValueControlled ? (controlledValue ?? null) : defaultValue,
+    }));
+    // ── Sync controlled props into the store ─────────────────────────────
+    React.useEffect(() => {
+        if (isOpenControlled) {
+            store.setState((s) => ({ ...s, open: controlledOpen }));
+        }
+    }, [isOpenControlled, controlledOpen, store]);
+    React.useEffect(() => {
+        if (isSearchControlled) {
+            store.setState((s) => ({ ...s, query: controlledSearch }));
+        }
+    }, [isSearchControlled, controlledSearch, store]);
+    React.useEffect(() => {
+        if (isValueControlled) {
+            store.setState((s) => ({ ...s, selectedValue: controlledValue ?? null }));
+        }
+    }, [isValueControlled, controlledValue, store]);
+    // ── Sync loading / error from external source ────────────────────────
+    React.useEffect(() => {
+        store.setState((s) => ({ ...s, isLoading, error: error ?? null }));
+    }, [isLoading, error, store]);
+    // ── Store subscriber: fire callbacks + auto-open/close ────────────────
+    const prevQueryRef = React.useRef(store.getState().query);
+    const prevOpenRef = React.useRef(store.getState().open);
+    const prevValueRef = React.useRef(store.getState().selectedValue);
+    React.useEffect(() => {
+        let clearTimeoutId = null;
+        const unsub = store.subscribe(() => {
+            const state = store.getState();
+            // Capture previous values before updating refs
+            const prevQuery = prevQueryRef.current;
+            const prevOpen = prevOpenRef.current;
+            // Fire callbacks only for uncontrolled props (single source of truth).
+            // Controlled props: setter calls the callback when requesting a change.
+            const queryChanged = state.query !== prevQuery;
+            if (queryChanged) {
+                prevQueryRef.current = state.query;
+                if (!isSearchControlled)
+                    onSearchChange?.(state.query);
+            }
+            if (state.open !== prevOpen) {
+                prevOpenRef.current = state.open;
+                if (!isOpenControlled)
+                    onOpenChange?.(state.open);
+                if (prevOpen && !state.open) {
+                    // Defer clearing query/selection until close animation finishes.
+                    // Avoids flash of empty state during exit.
+                    clearTimeoutId = window.setTimeout(() => {
+                        if (!isSearchControlled) {
+                            store.setState((s) => ({ ...s, query: "" }));
+                        }
+                        else {
+                            onSearchChange?.("");
+                        }
+                        if (!isValueControlled) {
+                            store.setState((s) => ({ ...s, selectedValue: null }));
+                        }
+                        else {
+                            onValueChange?.(null);
+                        }
+                        clearTimeoutId = null;
+                    }, CLEAR_AFTER_CLOSE_MS);
+                }
+                else if (!prevOpen && state.open && clearTimeoutId) {
+                    // Reopened before clear fired — cancel it.
+                    window.clearTimeout(clearTimeoutId);
+                    clearTimeoutId = null;
+                }
+            }
+            if (state.selectedValue !== prevValueRef.current) {
+                prevValueRef.current = state.selectedValue;
+                if (!isValueControlled)
+                    onValueChange?.(state.selectedValue);
+            }
+            // Auto-open only when query actually changes to non-empty. This avoids
+            // immediate reopen after explicit close actions (Escape / outside click).
+            if (queryChanged && state.query.trim() !== "" && !state.open && !isOpenControlled) {
+                store.setState((s) => ({ ...s, open: true }));
+            }
+            // Auto-close when query becomes empty (e.g. user deletes all letters).
+            if (queryChanged && state.query.trim() === "" && state.open && !isOpenControlled) {
+                store.setState((s) => ({ ...s, open: false }));
+            }
+        });
+        return () => {
+            if (clearTimeoutId)
+                window.clearTimeout(clearTimeoutId);
+            unsub();
+        };
+    }, [store]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ── Helpers ───────────────────────────────────────────────────────────
+    const getItemId = React.useCallback((value) => `${baseId}-item-${value}`, [baseId]);
+    // Setters update store (uncontrolled) or notify parent (controlled).
+    // Subscriber fires callbacks when store changes — avoid firing from both.
+    const setOpen = React.useCallback((next) => {
+        if (isOpenControlled) {
+            onOpenChange?.(next);
+        }
+        else {
+            store.setState((s) => ({ ...s, open: next }));
+        }
+    }, [isOpenControlled, store, onOpenChange]);
+    // ── Global hotkey (e.g. "mod+k", "/") ─────────────────────────────────
+    React.useEffect(() => {
+        if (!hotkey)
+            return;
+        const parts = hotkey.toLowerCase().split("+");
+        const key = parts[parts.length - 1];
+        const needsMod = parts.includes("mod");
+        const needsCtrl = parts.includes("ctrl");
+        const needsShift = parts.includes("shift");
+        const needsAlt = parts.includes("alt");
+        const normalizeKey = (k) => (k === "slash" ? "/" : k);
+        const handler = (e) => {
+            if (e.target instanceof HTMLElement &&
+                (e.target.closest("input") || e.target.closest("textarea") || e.target.closest("[contenteditable]"))) {
+                return;
+            }
+            const isMac = /mac/i.test(navigator.platform);
+            if (needsMod && !(isMac ? e.metaKey : e.ctrlKey))
+                return;
+            if (needsCtrl && !e.ctrlKey)
+                return;
+            if (needsShift && !e.shiftKey)
+                return;
+            if (needsAlt && !e.altKey)
+                return;
+            const eventKey = normalizeKey(e.key.toLowerCase());
+            const expectedKey = normalizeKey(key);
+            if (eventKey !== expectedKey)
+                return;
+            e.preventDefault();
+            if (hotkeyBehavior === "focus") {
+                const input = rootRef.current?.querySelector('input[role="combobox"]');
+                input?.focus();
+            }
+            else {
+                setOpen(!store.getState().open);
+            }
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [hotkey, hotkeyBehavior, store, setOpen]);
+    const setQuery = React.useCallback((next) => {
+        if (isSearchControlled) {
+            onSearchChange?.(next);
+        }
+        else {
+            store.setState((s) => ({ ...s, query: next }));
+        }
+    }, [isSearchControlled, store, onSearchChange]);
+    const setSelectedValue = React.useCallback((next) => {
+        if (isValueControlled) {
+            onValueChange?.(next);
+        }
+        else {
+            store.setState((s) => ({ ...s, selectedValue: next }));
+        }
+    }, [isValueControlled, store, onValueChange]);
+    const handleSelect = React.useCallback((value) => {
+        const item = store.getState().items.get(value);
+        item?.onSelect?.(value);
+        onSelect?.(value);
+        setSelectedValue(value);
+        setOpen(false);
+    }, [store, onSelect, setSelectedValue, setOpen]);
+    const registerItem = React.useCallback((meta) => {
+        store.setState((s) => {
+            const items = new Map(s.items);
+            items.set(meta.value, meta);
+            const sortedValues = s.sortedValues.includes(meta.value)
+                ? s.sortedValues
+                : [...s.sortedValues, meta.value];
+            return { ...s, items, sortedValues };
+        });
+    }, [store]);
+    const unregisterItem = React.useCallback((value) => {
+        store.setState((s) => {
+            const items = new Map(s.items);
+            items.delete(value);
+            const sortedValues = s.sortedValues.filter((v) => v !== value);
+            return { ...s, items, sortedValues };
+        });
+    }, [store]);
+    // Defer scroll so it runs after React commits.
+    // Two RAFs are intentionally used here so DOM updates from selection state
+    // are reflected before calling scrollIntoView (prevents missed scrolls).
+    const scheduleScrollSelectedIntoView = React.useCallback(() => {
+        const tryScroll = () => {
+            const state = store.getState();
+            if (!state.open || !state.selectedValue)
+                return false;
+            const node = state.items.get(state.selectedValue)?.node;
+            if (!node)
+                return false;
+            node.scrollIntoView({ block: "nearest", inline: "nearest" });
+            return true;
+        };
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (tryScroll())
+                    return;
+                // Fallback for slower renders where the node reference lands later.
+                window.setTimeout(() => {
+                    tryScroll();
+                }, 0);
+            });
+        });
+    }, [store]);
+    // ── Keyboard navigation (cmdk-inspired: IME guard, Home/End) ─────────────
+    const handleKeyDown = React.useCallback((event) => {
+        // Don't trigger navigation while IME composition is active (CJK input).
+        // keyCode 229 = IME composition in legacy browsers.
+        const isComposing = event.nativeEvent.isComposing ||
+            event.nativeEvent.keyCode === 229;
+        if (event.defaultPrevented || isComposing)
+            return;
+        const state = store.getState();
+        const values = state.filteredValues;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+            const currentIdx = values.indexOf(state.selectedValue ?? "");
+            const nextIdx = currentIdx < values.length - 1 ? currentIdx + 1 : 0;
+            const nextValue = values[nextIdx];
+            if (nextValue !== undefined) {
+                store.setState((s) => ({ ...s, selectedValue: nextValue }));
+                scheduleScrollSelectedIntoView();
+            }
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setOpen(true);
+            const currentIdx = values.indexOf(state.selectedValue ?? "");
+            const prevIdx = currentIdx > 0 ? currentIdx - 1 : values.length - 1;
+            const prevValue = values[prevIdx];
+            if (prevValue !== undefined) {
+                store.setState((s) => ({ ...s, selectedValue: prevValue }));
+                scheduleScrollSelectedIntoView();
+            }
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setOpen(true);
+            const first = values[0];
+            if (first !== undefined) {
+                store.setState((s) => ({ ...s, selectedValue: first }));
+                scheduleScrollSelectedIntoView();
+            }
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setOpen(true);
+            const last = values[values.length - 1];
+            if (last !== undefined) {
+                store.setState((s) => ({ ...s, selectedValue: last }));
+                scheduleScrollSelectedIntoView();
+            }
+            return;
+        }
+        if (event.key === "Enter") {
+            if (state.selectedValue && state.open) {
+                event.preventDefault();
+                handleSelect(state.selectedValue);
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (state.open) {
+                setOpen(false);
+            }
+            return;
+        }
+    }, [store, setOpen, handleSelect]);
+    // ── Click-outside (portal-aware) ──────────────────────────────────────
+    // We tag every DOM node belonging to this instance with data-searchbar-root
+    // (including portaled Content). The check uses .closest() so portal nodes
+    // that aren't inside rootRef are still recognised as "inside" the searchbar.
+    React.useEffect(() => {
+        const escapedRootId = escapeSelectorValue(rootId);
+        const handlePointerDown = (event) => {
+            if (!(event.target instanceof Element))
+                return;
+            const inside = event.target.closest(`[data-searchbar-root="${escapedRootId}"]`);
+            if (!inside) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        return () => document.removeEventListener("pointerdown", handlePointerDown);
+    }, [rootId, setOpen]);
+    // Focus-out for the inline (non-portal) case.
+    // In portal mode the Input is outside rootRef so this is a no-op there;
+    // the click-outside and Escape handlers cover that path instead.
+    const handleBlur = (event) => {
+        const related = event.relatedTarget;
+        if (!related) {
+            setOpen(false);
+            return;
+        }
+        if (related instanceof Element) {
+            const escapedRootId = escapeSelectorValue(rootId);
+            const inside = related.closest(`[data-searchbar-root="${escapedRootId}"]`);
+            if (!inside)
+                setOpen(false);
+        }
+    };
+    // ── Context value ─────────────────────────────────────────────────────
+    const ctx = React.useMemo(() => ({
+        store,
+        listId,
+        rootId,
+        rootClassName: className,
+        isSearchControlled,
+        onSearchChange,
+        triggerRef,
+        getItemId,
+        onSelect: handleSelect,
+        setOpen,
+        handleKeyDown,
+        registerItem,
+        unregisterItem,
+    }), [store, listId, rootId, className, isSearchControlled, onSearchChange, triggerRef, getItemId, handleSelect, setOpen, handleKeyDown, registerItem, unregisterItem]);
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(SearchbarProvider, { value: ctx, children: _jsx(RootInner, { comp: Comp, store: store, domProps: domProps, forwardedRef: forwardedRef, rootRef: rootRef, rootId: rootId, className: className, handleBlur: handleBlur, handleKeyDown: handleKeyDown, children: children }) }));
+});
+Root.displayName = "Searchbar.Root";
+// Inner component so we can legally call useSearchbarStore inside JSX
+const RootInner = ({ comp: Comp, store, domProps, forwardedRef, rootRef, rootId, className, handleBlur, handleKeyDown, children, }) => {
+    const dataState = useSearchbarStore(store, (s) => (s.open ? "open" : "closed"));
+    return (_jsx(Comp, { ...domProps, ref: (node) => {
+            rootRef.current = node;
+            if (typeof forwardedRef === "function")
+                forwardedRef(node);
+            else if (forwardedRef)
+                forwardedRef.current = node;
+        }, className: className, onBlur: handleBlur, onKeyDown: (event) => {
+            domProps.onKeyDown?.(event);
+            handleKeyDown(event);
+        }, "data-slot": "searchbar-root", "data-state": dataState, "data-searchbar-root": rootId, children: children }));
+};

package/dist/primitives/Separator.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type SearchbarSeparatorProps = {
+    className?: string;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Visual separator between groups or sections.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Group label="Paintings">…</Searchbar.Group>
+ * <Searchbar.Separator />
+ * <Searchbar.Group label="Artists">…</Searchbar.Group>
+ * ```
+ */
+export declare const Separator: React.ForwardRefExoticComponent<{
+    className?: string;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Separator.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "../utils/slot.js";
+/**
+ * Visual separator between groups or sections.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Group label="Paintings">…</Searchbar.Group>
+ * <Searchbar.Separator />
+ * <Searchbar.Group label="Artists">…</Searchbar.Group>
+ * ```
+ */
+export const Separator = React.forwardRef(({ className, asChild = false, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ...props, ref: forwardedRef, role: "separator", "aria-orientation": "horizontal", className: className, "data-slot": "searchbar-separator" }));
+});
+Separator.displayName = "Searchbar.Separator";

package/dist/primitives/Thumbnail.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export type SearchbarThumbnailProps = {
+    /** Explicit image source. Defaults to `metadata.thumbnailUrl` from item context. */
+    src?: string;
+    /** Alt text. Defaults to item title from context. */
+    alt?: string;
+    /** Width and height in pixels (default: 40) */
+    size?: number;
+    className?: string;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "width" | "height">;
+/**
+ * Thumbnail image for a search result item.
+ *
+ * When used inside the Etoile `<Searchbar />` wrapper, automatically reads
+ * `metadata.thumbnailUrl` and the item title from context. Pass `src` and
+ * `alt` explicitly when using headless primitives.
+ *
+ * Returns null if no source is found.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Item value={result.id}>
+ *   <Searchbar.Thumbnail src={result.thumbnailUrl} alt={result.title} />
+ *   {result.title}
+ * </Searchbar.Item>
+ * ```
+ */
+export declare const Thumbnail: {
+    ({ src, alt, size, className, ...props }: SearchbarThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/primitives/Thumbnail.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { SearchbarItemDataContext } from "../context.js";
+/**
+ * Thumbnail image for a search result item.
+ *
+ * When used inside the Etoile `<Searchbar />` wrapper, automatically reads
+ * `metadata.thumbnailUrl` and the item title from context. Pass `src` and
+ * `alt` explicitly when using headless primitives.
+ *
+ * Returns null if no source is found.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Item value={result.id}>
+ *   <Searchbar.Thumbnail src={result.thumbnailUrl} alt={result.title} />
+ *   {result.title}
+ * </Searchbar.Item>
+ * ```
+ */
+export const Thumbnail = ({ src, alt, size = 40, className, ...props }) => {
+    const itemData = React.useContext(SearchbarItemDataContext);
+    const metadata = itemData?.metadata;
+    const imageSrc = src ??
+        readImageSource(metadata, [
+            "thumbnailUrl",
+            "thumbnail_url",
+            "thumbnail",
+            "image",
+            "imageUrl",
+            "image_url",
+            "cover",
+            "coverUrl",
+            "cover_url",
+            "artwork",
+            "artworkUrl",
+            "artwork_url",
+        ]);
+    const imageAlt = alt ?? itemData?.title ?? "";
+    if (!imageSrc)
+        return null;
+    return (_jsx("img", { ...props, src: imageSrc, alt: imageAlt, width: size, height: size, className: className, draggable: false }));
+};
+Thumbnail.displayName = "Searchbar.Thumbnail";
+const readImageSource = (metadata, keys) => {
+    if (!metadata)
+        return undefined;
+    for (const key of keys) {
+        const value = metadata[key];
+        if (typeof value === "string" && value.trim() !== "")
+            return value;
+        if (value && typeof value === "object") {
+            const nestedUrl = value.url;
+            if (typeof nestedUrl === "string" && nestedUrl.trim() !== "")
+                return nestedUrl;
+        }
+    }
+    return undefined;
+};

package/dist/primitives/Trigger.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type SearchbarTriggerProps = {
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Button that toggles the search open/closed state.
+ * Designed for command palette / modal mode.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Trigger>
+ *     <Searchbar.Icon /> Search
+ *   </Searchbar.Trigger>
+ *   <Searchbar.Portal>
+ *     <Searchbar.Overlay />
+ *     <Searchbar.Content>…</Searchbar.Content>
+ *   </Searchbar.Portal>
+ * </Searchbar.Root>
+ * ```
+ */
+export declare const Trigger: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/primitives/Trigger.js

@@ -0,0 +1,35 @@
+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";
+import { useComposeRefs } from "../utils/composeRefs.js";
+/**
+ * Button that toggles the search open/closed state.
+ * Designed for command palette / modal mode.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Trigger>
+ *     <Searchbar.Icon /> Search
+ *   </Searchbar.Trigger>
+ *   <Searchbar.Portal>
+ *     <Searchbar.Overlay />
+ *     <Searchbar.Content>…</Searchbar.Content>
+ *   </Searchbar.Portal>
+ * </Searchbar.Root>
+ * ```
+ */
+export const Trigger = React.forwardRef(({ children, className, asChild = false, ...props }, forwardedRef) => {
+    const { store, triggerRef } = useSearchbarContext();
+    const isOpen = useSearchbarStore(store, (s) => s.open);
+    const composedRef = useComposeRefs(triggerRef, forwardedRef);
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { ...props, ref: composedRef, type: asChild ? undefined : "button", "aria-expanded": isOpen, "aria-haspopup": "listbox", className: className, "data-state": isOpen ? "open" : "closed", "data-slot": "searchbar-trigger", onClick: (event) => {
+            props.onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            store.setState((s) => ({ ...s, open: !s.open }));
+        }, children: children }));
+});
+Trigger.displayName = "Searchbar.Trigger";

package/dist/store.d.ts

@@ -0,0 +1,38 @@
+/**
+ * SearchbarStore — external state container for the Searchbar primitives.
+ *
+ * Uses the subscribe/getSnapshot pattern compatible with useSyncExternalStore,
+ * so each component can subscribe to exactly the slice of state it needs and
+ * avoid re-rendering on unrelated updates (e.g. a keystroke should not force
+ * every item to re-render).
+ */
+export type ItemMeta = {
+    /** Stable identifier matching the `value` prop on Searchbar.Item */
+    value: string;
+    /** Optional item label (consumer-defined, useful for analytics/debugging). */
+    label: string;
+    disabled: boolean;
+    node: HTMLElement | null;
+    /** Per-item select handler — called in addition to root onSelect */
+    onSelect?: (value: string) => void;
+};
+export type SearchbarState = {
+    query: string;
+    open: boolean;
+    selectedValue: string | null;
+    isLoading: boolean;
+    error: unknown;
+    items: Map<string, ItemMeta>;
+    /** Registration order — determines keyboard navigation sequence */
+    sortedValues: string[];
+    /** Subset of enabled items currently rendered in navigation order */
+    filteredValues: string[];
+    /** Set mirror of filteredValues for O(1) lookup by Item primitives */
+    filteredSet: Set<string>;
+};
+export type SearchbarStore = {
+    getState: () => SearchbarState;
+    setState: (updater: (prev: SearchbarState) => SearchbarState) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+export declare function createSearchbarStore(initial?: Partial<Pick<SearchbarState, "query" | "open" | "selectedValue" | "isLoading">>): SearchbarStore;