@etoile-dev/react 0.2.2 → 1.0.0

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;

package/dist/store.js

@@ -0,0 +1,63 @@
+/**
+ * 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).
+ */
+function deriveFiltered(state) {
+    const base = state.sortedValues.filter((v) => {
+        const item = state.items.get(v);
+        return item && !item.disabled;
+    });
+    return { filteredValues: base, filteredSet: new Set(base) };
+}
+export function createSearchbarStore(initial = {}) {
+    let state = {
+        query: "",
+        open: false,
+        selectedValue: null,
+        isLoading: false,
+        error: null,
+        items: new Map(),
+        sortedValues: [],
+        filteredValues: [],
+        filteredSet: new Set(),
+        ...initial,
+    };
+    // Compute initial derived state
+    const derived = deriveFiltered(state);
+    state = { ...state, ...derived };
+    const listeners = new Set();
+    const emit = () => listeners.forEach((fn) => fn());
+    const shallowEqual = (a, b) => a.query === b.query &&
+        a.open === b.open &&
+        a.selectedValue === b.selectedValue &&
+        a.isLoading === b.isLoading &&
+        a.error === b.error &&
+        a.items === b.items &&
+        a.sortedValues === b.sortedValues &&
+        a.filteredValues === b.filteredValues;
+    return {
+        getState: () => state,
+        setState: (updater) => {
+            const prev = state;
+            const next = updater(prev);
+            const needsRefilter = next.query !== prev.query ||
+                next.sortedValues !== prev.sortedValues ||
+                next.items !== prev.items;
+            const nextState = needsRefilter
+                ? { ...next, ...deriveFiltered(next) }
+                : next;
+            if (shallowEqual(state, nextState))
+                return;
+            state = nextState;
+            emit();
+        },
+        subscribe: (fn) => {
+            listeners.add(fn);
+            return () => listeners.delete(fn);
+        },
+    };
+}