@etoile-dev/react 0.2.3 → 1.0.0

package/dist/primitives/Group.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "../utils/slot.js";
+/**
+ * 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 const Group = React.forwardRef(({ label, className, asChild = false, children, ...props }, forwardedRef) => {
+    const labelId = React.useId();
+    const Comp = asChild ? Slot : "div";
+    return (_jsxs(Comp, { ...props, ref: forwardedRef, role: "group", "aria-labelledby": label ? labelId : undefined, className: className, "data-slot": "searchbar-group", children: [label && (_jsx("div", { id: labelId, "data-slot": "searchbar-group-label", children: label })), children] }));
+});
+Group.displayName = "Searchbar.Group";

package/dist/primitives/Icon.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type SearchbarIconProps = {
+    /** Width and height in pixels (default: 18) */
+    size?: number;
+    className?: string;
+} & React.SVGAttributes<SVGElement>;
+/**
+ * Search magnifying glass icon.
+ *
+ * @example
+ * ```tsx
+ * <div data-slot="searchbar-input-row">
+ *   <Searchbar.Icon />
+ *   <Searchbar.Input />
+ * </div>
+ * ```
+ */
+export declare const Icon: {
+    ({ size, className, ...props }: SearchbarIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/primitives/Icon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Search magnifying glass icon.
+ *
+ * @example
+ * ```tsx
+ * <div data-slot="searchbar-input-row">
+ *   <Searchbar.Icon />
+ *   <Searchbar.Input />
+ * </div>
+ * ```
+ */
+export const Icon = ({ size = 18, className, ...props }) => (_jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [_jsx("path", { d: "m21 21-4.34-4.34" }), _jsx("circle", { cx: "11", cy: "11", r: "8" })] }));
+Icon.displayName = "Searchbar.Icon";

package/dist/primitives/Input.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type SearchbarInputProps = {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Render as child element instead of <input> */
+    asChild?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">;
+/**
+ * Combobox input primitive.
+ *
+ * Wires to Searchbar.Root state and applies ARIA combobox attributes.
+ * In uncontrolled mode, it updates internal query/open state.
+ * In controlled mode (`search` prop on Root), it emits `onSearchChange`
+ * without mutating the internal query directly.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Input placeholder="Search paintings…" />
+ * </Searchbar.Root>
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<{
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Render as child element instead of <input> */
+    asChild?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & React.RefAttributes<HTMLInputElement>>;

package/dist/primitives/Input.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useSearchbarContext, useSearchbarStore } from "../context.js";
+import { Slot } from "../utils/slot.js";
+/**
+ * Combobox input primitive.
+ *
+ * Wires to Searchbar.Root state and applies ARIA combobox attributes.
+ * In uncontrolled mode, it updates internal query/open state.
+ * In controlled mode (`search` prop on Root), it emits `onSearchChange`
+ * without mutating the internal query directly.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Input placeholder="Search paintings…" />
+ * </Searchbar.Root>
+ * ```
+ */
+export const Input = React.forwardRef(({ placeholder, className, asChild = false, ...props }, forwardedRef) => {
+    const { store, listId, getItemId, isSearchControlled, onSearchChange, handleKeyDown } = useSearchbarContext();
+    const query = useSearchbarStore(store, (s) => s.query);
+    const isOpen = useSearchbarStore(store, (s) => s.open);
+    const selectedValue = useSearchbarStore(store, (s) => s.selectedValue);
+    const hasItems = useSearchbarStore(store, (s) => s.filteredValues.length > 0);
+    const showResults = isOpen && hasItems;
+    const activeId = selectedValue && showResults ? getItemId(selectedValue) : undefined;
+    const handleChange = (event) => {
+        props.onChange?.(event);
+        const nextQuery = event.target.value;
+        if (isSearchControlled) {
+            onSearchChange?.(nextQuery);
+        }
+        else {
+            store.setState((s) => ({
+                ...s,
+                query: nextQuery,
+                open: nextQuery.trim() !== "",
+            }));
+        }
+    };
+    const Comp = asChild ? Slot : "input";
+    return (_jsxs(_Fragment, { children: [_jsx(Comp, { ...props, ref: forwardedRef, type: asChild ? undefined : "text", role: "combobox", "aria-expanded": showResults, "aria-controls": listId, "aria-activedescendant": activeId, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, className: className, value: query, "data-slot": "searchbar-input", "data-state": isOpen ? "open" : "closed", onChange: handleChange, onKeyDown: (e) => {
+                    handleKeyDown(e);
+                    props.onKeyDown?.(e);
+                }, onFocus: (event) => {
+                    props.onFocus?.(event);
+                    if (!event.defaultPrevented && query.trim() !== "" && hasItems) {
+                        store.setState((s) => ({ ...s, open: true }));
+                    }
+                } }), _jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: {
+                    position: "absolute",
+                    width: 1,
+                    height: 1,
+                    padding: 0,
+                    margin: -1,
+                    overflow: "hidden",
+                    clip: "rect(0,0,0,0)",
+                    whiteSpace: "nowrap",
+                    border: 0,
+                }, children: _jsx(ResultCount, { store: store, isOpen: showResults }) })] }));
+});
+Input.displayName = "Searchbar.Input";
+// Isolated component so only it re-renders for the count announcement
+const ResultCount = ({ store, isOpen, }) => {
+    const count = useSearchbarStore(store, (s) => s.filteredValues.length);
+    if (!isOpen)
+        return null;
+    return _jsxs(_Fragment, { children: [count === 1 ? "1 result" : `${count} results`, " available"] });
+};

package/dist/primitives/Item.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+export type SearchbarItemProps = {
+    /**
+     * Stable identifier for this item. Used for selection, keyboard navigation,
+     * and ARIA relationships. Must be unique within the list.
+     */
+    value: string;
+    /**
+     * Optional human-readable label. Useful when `value` is an opaque ID.
+     */
+    label?: string;
+    /** Whether this item can be selected */
+    disabled?: boolean;
+    /**
+     * Called when this specific item is selected (in addition to root onSelect).
+     * Receives the item's `value`.
+     */
+    onSelect?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">;
+/**
+ * Individual search result item with stable value-based identity.
+ *
+ * Registers itself in the store on mount and de-registers on unmount.
+ * Visibility is controlled by what you render in `Searchbar.List`
+ * (UI-only primitive; no internal filtering).
+ *
+ * When rendered inside the Etoile `<Searchbar />` wrapper, children can read
+ * result data via `SearchbarItemDataContext` (used by `Searchbar.Thumbnail`).
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Item value="starry-night" label="The Starry Night">
+ *   <img src={thumbnail} />
+ *   The Starry Night
+ * </Searchbar.Item>
+ * ```
+ */
+export declare const Item: React.ForwardRefExoticComponent<{
+    /**
+     * Stable identifier for this item. Used for selection, keyboard navigation,
+     * and ARIA relationships. Must be unique within the list.
+     */
+    value: string;
+    /**
+     * Optional human-readable label. Useful when `value` is an opaque ID.
+     */
+    label?: string;
+    /** Whether this item can be selected */
+    disabled?: boolean;
+    /**
+     * Called when this specific item is selected (in addition to root onSelect).
+     * Receives the item's `value`.
+     */
+    onSelect?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Item.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useSearchbarContext, useSearchbarStore, SearchbarItemContext } from "../context.js";
+import { Slot } from "../utils/slot.js";
+import { useComposeRefs } from "../utils/composeRefs.js";
+/**
+ * Individual search result item with stable value-based identity.
+ *
+ * Registers itself in the store on mount and de-registers on unmount.
+ * Visibility is controlled by what you render in `Searchbar.List`
+ * (UI-only primitive; no internal filtering).
+ *
+ * When rendered inside the Etoile `<Searchbar />` wrapper, children can read
+ * result data via `SearchbarItemDataContext` (used by `Searchbar.Thumbnail`).
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Item value="starry-night" label="The Starry Night">
+ *   <img src={thumbnail} />
+ *   The Starry Night
+ * </Searchbar.Item>
+ * ```
+ */
+export const Item = React.forwardRef(({ value, label, disabled = false, onSelect, children, className, asChild = false, ...props }, forwardedRef) => {
+    const { store, getItemId, onSelect: ctxOnSelect, registerItem, unregisterItem } = useSearchbarContext();
+    const internalRef = React.useRef(null);
+    const composedRef = useComposeRefs(internalRef, forwardedRef);
+    const effectiveLabel = label ?? value;
+    // Register on mount, update when meta changes, unregister on unmount
+    React.useLayoutEffect(() => {
+        registerItem({
+            value,
+            label: effectiveLabel,
+            disabled,
+            node: internalRef.current,
+            onSelect,
+        });
+        return () => unregisterItem(value);
+    }, [value, effectiveLabel, disabled]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Update onSelect callback reference without full re-register
+    React.useEffect(() => {
+        store.setState((s) => {
+            const items = new Map(s.items);
+            const existing = items.get(value);
+            if (existing) {
+                items.set(value, { ...existing, onSelect });
+            }
+            return { ...s, items };
+        });
+    }, [onSelect, value, store]);
+    const isSelected = useSearchbarStore(store, (s) => s.selectedValue === value);
+    const isVisible = useSearchbarStore(store, (s) => s.filteredSet.has(value));
+    if (!isVisible) {
+        return null;
+    }
+    const id = getItemId(value);
+    const handleClick = () => {
+        if (!disabled) {
+            ctxOnSelect(value);
+        }
+    };
+    const handlePointerMove = () => {
+        if (!disabled) {
+            store.setState((s) => ({ ...s, selectedValue: value }));
+        }
+    };
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(SearchbarItemContext.Provider, { value: value, children: _jsx(Comp, { ...props, ref: composedRef, id: id, role: "option", "aria-selected": isSelected, "aria-disabled": disabled || undefined, "data-selected": isSelected ? "true" : "false", "data-disabled": disabled ? "true" : undefined, "data-value": value, "data-slot": "searchbar-item", tabIndex: isSelected ? 0 : -1, className: className, onClick: (e) => {
+                props.onClick?.(e);
+                handleClick();
+            }, onPointerMove: (e) => {
+                props.onPointerMove?.(e);
+                handlePointerMove();
+            }, children: children }) }));
+});
+Item.displayName = "Searchbar.Item";

package/dist/primitives/Kbd.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type SearchbarKbdProps = {
+    /** Shortcut text (default: "⌘K") */
+    children?: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLElement>;
+/**
+ * Keyboard shortcut badge.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Kbd />           // renders "⌘K"
+ * <Searchbar.Kbd>/</Searchbar.Kbd>
+ * <Searchbar.Kbd>Ctrl K</Searchbar.Kbd>
+ * ```
+ */
+export declare const Kbd: {
+    ({ children, className, ...props }: SearchbarKbdProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/primitives/Kbd.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Keyboard shortcut badge.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Kbd />           // renders "⌘K"
+ * <Searchbar.Kbd>/</Searchbar.Kbd>
+ * <Searchbar.Kbd>Ctrl K</Searchbar.Kbd>
+ * ```
+ */
+export const Kbd = ({ children = "⌘K", className, ...props }) => (_jsx("kbd", { ...props, "data-slot": "searchbar-kbd", className: className, children: children }));
+Kbd.displayName = "Searchbar.Kbd";

package/dist/primitives/List.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export type SearchbarListProps = {
+    /** Additional CSS class name */
+    className?: string;
+    /** Render as child element instead of <div> */
+    asChild?: boolean;
+    children: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role">;
+/**
+ * Container for search result items implementing the ARIA listbox role.
+ *
+ * Renders while the list is open. This allows command-palette flows where
+ * the list stays visible even with an empty query (default actions).
+ *
+ * Place Searchbar.Item, Searchbar.Empty, Searchbar.Loading, and
+ * Searchbar.Error inside it.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map((item) => (
+ *     <Searchbar.Item key={item.id} value={item.id}>{item.title}</Searchbar.Item>
+ *   ))}
+ *   <Searchbar.Empty>No results</Searchbar.Empty>
+ *   <Searchbar.Loading>Searching…</Searchbar.Loading>
+ * </Searchbar.List>
+ * ```
+ */
+export declare const List: React.ForwardRefExoticComponent<{
+    /** Additional CSS class name */
+    className?: string;
+    /** Render as child element instead of <div> */
+    asChild?: boolean;
+    children: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/List.js

@@ -0,0 +1,37 @@
+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";
+/**
+ * Container for search result items implementing the ARIA listbox role.
+ *
+ * Renders while the list is open. This allows command-palette flows where
+ * the list stays visible even with an empty query (default actions).
+ *
+ * Place Searchbar.Item, Searchbar.Empty, Searchbar.Loading, and
+ * Searchbar.Error inside it.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map((item) => (
+ *     <Searchbar.Item key={item.id} value={item.id}>{item.title}</Searchbar.Item>
+ *   ))}
+ *   <Searchbar.Empty>No results</Searchbar.Empty>
+ *   <Searchbar.Loading>Searching…</Searchbar.Loading>
+ * </Searchbar.List>
+ * ```
+ */
+export const List = React.forwardRef(({ className, asChild = false, children, ...props }, forwardedRef) => {
+    const { store, listId } = useSearchbarContext();
+    const hideWhenQueryEmpty = React.useContext(SearchbarHideListWhenQueryEmptyContext);
+    const isOpen = useSearchbarStore(store, (s) => s.open);
+    const query = useSearchbarStore(store, (s) => s.query);
+    if (!isOpen)
+        return null;
+    if (hideWhenQueryEmpty && query.trim() === "")
+        return null;
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ...props, ref: forwardedRef, id: listId, role: "listbox", className: className, "data-state": "open", "data-slot": "searchbar-list", children: children }));
+});
+List.displayName = "Searchbar.List";

package/dist/primitives/Loading.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type SearchbarLoadingProps = {
+    /** Defaults to a built-in spinner */
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role">;
+/**
+ * Renders only while a search is in progress (isLoading=true).
+ * Designed to be placed inside or alongside Searchbar.List.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map(…)}
+ *   <Searchbar.Loading>Searching…</Searchbar.Loading>
+ * </Searchbar.List>
+ * ```
+ */
+export declare const Loading: React.ForwardRefExoticComponent<{
+    /** Defaults to a built-in spinner */
+    children?: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Loading.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 while a search is in progress (isLoading=true).
+ * Designed to be placed inside or alongside Searchbar.List.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.List>
+ *   {items.map(…)}
+ *   <Searchbar.Loading>Searching…</Searchbar.Loading>
+ * </Searchbar.List>
+ * ```
+ */
+export const Loading = React.forwardRef(({ children, className, asChild = false, ...props }, forwardedRef) => {
+    const { store } = useSearchbarContext();
+    const show = useSearchbarStore(store, (s) => s.isLoading && s.open && s.query.trim() !== "");
+    if (!show)
+        return null;
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ...props, ref: forwardedRef, role: "status", "aria-label": "Loading results", className: className, "data-slot": "searchbar-loading", "data-state": "loading", children: children ?? _jsx(DefaultSpinner, {}) }));
+});
+Loading.displayName = "Searchbar.Loading";
+const DefaultSpinner = () => (_jsx("svg", { "data-slot": "searchbar-spinner", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));

package/dist/primitives/Modal.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { SearchbarRootProps } from "./Root.js";
+export type SearchbarModalProps = {
+    /** Accessible label for the dialog (default: "Search") */
+    "aria-label"?: string;
+} & Omit<SearchbarRootProps, "asChild">;
+/**
+ * Command palette primitive. Combines Root + Portal + Overlay + Content
+ * into a single component — analogous to `Command.Dialog` in cmdk.
+ *
+ * Handles portal rendering, backdrop overlay, focus trapping, and
+ * Escape/outside-click close. Children go directly into the Content panel.
+ * This primitive is unstyled; add `className="etoile-search"` on Modal/Root
+ * and import `@etoile-dev/react/styles.css` to use the default theme.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Searchbar.Modal hotkey="mod+k">
+ *   <Searchbar.ModalInput />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ *
+ * @example Controlled open state
+ * ```tsx
+ * <Searchbar.Modal open={open} onOpenChange={setOpen}>
+ *   <Searchbar.ModalInput placeholder="Search paintings…" />
+ *   <Searchbar.List>
+ *     {items.map((item) => (
+ *       <Searchbar.Item key={item.id} value={item.id}>{item.title}</Searchbar.Item>
+ *     ))}
+ *   </Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ */
+export declare const Modal: React.ForwardRefExoticComponent<{
+    /** Accessible label for the dialog (default: "Search") */
+    "aria-label"?: string;
+} & Omit<SearchbarRootProps, "asChild"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/Modal.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Root } from "./Root.js";
+import { Portal } from "./Portal.js";
+import { Overlay } from "./Overlay.js";
+import { Content } from "./Content.js";
+/**
+ * Command palette primitive. Combines Root + Portal + Overlay + Content
+ * into a single component — analogous to `Command.Dialog` in cmdk.
+ *
+ * Handles portal rendering, backdrop overlay, focus trapping, and
+ * Escape/outside-click close. Children go directly into the Content panel.
+ * This primitive is unstyled; add `className="etoile-search"` on Modal/Root
+ * and import `@etoile-dev/react/styles.css` to use the default theme.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Searchbar.Modal hotkey="mod+k">
+ *   <Searchbar.ModalInput />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ *
+ * @example Controlled open state
+ * ```tsx
+ * <Searchbar.Modal open={open} onOpenChange={setOpen}>
+ *   <Searchbar.ModalInput placeholder="Search paintings…" />
+ *   <Searchbar.List>
+ *     {items.map((item) => (
+ *       <Searchbar.Item key={item.id} value={item.id}>{item.title}</Searchbar.Item>
+ *     ))}
+ *   </Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ */
+export const Modal = React.forwardRef(({ "aria-label": ariaLabel = "Search", children, className, ...rootProps }, ref) => (_jsx(Root, { ...rootProps, ref: ref, className: className, children: _jsxs(Portal, { children: [_jsx(Overlay, {}), _jsx(Content, { "aria-label": ariaLabel, children: children })] }) })));
+Modal.displayName = "Searchbar.Modal";

package/dist/primitives/ModalInput.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+export type SearchbarModalInputProps = {
+    /** Placeholder for the search input (default: "Search…") */
+    placeholder?: string;
+    /**
+     * Leading icon content.
+     * Pass `null` to hide it.
+     * Default: built-in Searchbar.Icon
+     */
+    icon?: React.ReactNode | null;
+    /**
+     * Content for the keyboard shortcut badge.
+     * Pass `null` to hide the badge entirely.
+     * Default: "Esc"
+     */
+    kbd?: React.ReactNode | null;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * Pre-composed input row for command palette mode.
+ *
+ * Renders a search icon, combobox input, and optional keyboard badge in a
+ * flex row. A separator border appears automatically when results are
+ * visible below (via `:has(+ [role="listbox"])`).
+ *
+ * Styled via `data-slot="searchbar-modal-input"` — fully independent from
+ * the inline `Searchbar` input wrapper.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Searchbar.Modal hotkey="mod+k">
+ *   <Searchbar.ModalInput />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ *
+ * @example Custom placeholder, no kbd badge
+ * ```tsx
+ * <Searchbar.Modal>
+ *   <Searchbar.ModalInput placeholder="Search paintings…" icon={null} kbd={null} />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ */
+export declare const ModalInput: React.ForwardRefExoticComponent<{
+    /** Placeholder for the search input (default: "Search…") */
+    placeholder?: string;
+    /**
+     * Leading icon content.
+     * Pass `null` to hide it.
+     * Default: built-in Searchbar.Icon
+     */
+    icon?: React.ReactNode | null;
+    /**
+     * Content for the keyboard shortcut badge.
+     * Pass `null` to hide the badge entirely.
+     * Default: "Esc"
+     */
+    kbd?: React.ReactNode | null;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/ModalInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "./Input.js";
+import { Icon } from "./Icon.js";
+import { Kbd } from "./Kbd.js";
+/**
+ * Pre-composed input row for command palette mode.
+ *
+ * Renders a search icon, combobox input, and optional keyboard badge in a
+ * flex row. A separator border appears automatically when results are
+ * visible below (via `:has(+ [role="listbox"])`).
+ *
+ * Styled via `data-slot="searchbar-modal-input"` — fully independent from
+ * the inline `Searchbar` input wrapper.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Searchbar.Modal hotkey="mod+k">
+ *   <Searchbar.ModalInput />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ *
+ * @example Custom placeholder, no kbd badge
+ * ```tsx
+ * <Searchbar.Modal>
+ *   <Searchbar.ModalInput placeholder="Search paintings…" icon={null} kbd={null} />
+ *   <Searchbar.List>…</Searchbar.List>
+ * </Searchbar.Modal>
+ * ```
+ */
+export const ModalInput = React.forwardRef(({ placeholder = "Search…", icon = _jsx(Icon, {}), kbd = "Esc", className, ...props }, ref) => (_jsxs("div", { ...props, ref: ref, "data-slot": "searchbar-modal-input", className: className, children: [icon, _jsx(Input, { autoFocus: true, placeholder: placeholder }), kbd !== null && _jsx(Kbd, { children: kbd })] })));
+ModalInput.displayName = "Searchbar.ModalInput";

package/dist/primitives/Overlay.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type SearchbarOverlayProps = {
+    className?: string;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Backdrop overlay for command palette / modal mode.
+ * Only renders when the search is open.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Portal>
+ *   <Searchbar.Overlay className="fixed inset-0 bg-black/40" />
+ *   <Searchbar.Content>…</Searchbar.Content>
+ * </Searchbar.Portal>
+ * ```
+ */
+export declare const Overlay: React.ForwardRefExoticComponent<{
+    className?: string;
+    asChild?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;