@etoile-dev/react 0.2.3 → 1.0.1

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>>;

package/dist/primitives/Overlay.js

@@ -0,0 +1,41 @@
+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";
+const PRESENCE_DURATION_MS = 300;
+/**
+ * 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 const Overlay = React.forwardRef(({ className, asChild = false, ...props }, forwardedRef) => {
+    const { store, rootId, rootClassName, setOpen } = useSearchbarContext();
+    const isOpen = useSearchbarStore(store, (s) => s.open);
+    const [present, setPresent] = React.useState(isOpen);
+    const mergedClassName = [rootClassName, className].filter(Boolean).join(" ") || undefined;
+    React.useEffect(() => {
+        if (isOpen) {
+            setPresent(true);
+            return;
+        }
+        const timeout = window.setTimeout(() => setPresent(false), PRESENCE_DURATION_MS);
+        return () => window.clearTimeout(timeout);
+    }, [isOpen]);
+    if (!present)
+        return null;
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { ...props, ref: forwardedRef, "aria-hidden": "true", className: mergedClassName, "data-state": isOpen ? "open" : "closed", "data-slot": "searchbar-overlay", "data-searchbar-root": rootId, onPointerDown: (event) => {
+            props.onPointerDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            setOpen(false);
+        } }));
+});
+Overlay.displayName = "Searchbar.Overlay";

package/dist/primitives/Portal.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export type SearchbarPortalProps = {
+    /** DOM node to portal into (default: document.body) */
+    container?: Element | null;
+    children: React.ReactNode;
+};
+/**
+ * Renders children into a portal — useful for command palette / modal mode
+ * to escape stacking contexts.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Trigger />
+ *   <Searchbar.Portal>
+ *     <Searchbar.Overlay />
+ *     <Searchbar.Content>
+ *       <Searchbar.Input />
+ *       <Searchbar.List>…</Searchbar.List>
+ *     </Searchbar.Content>
+ *   </Searchbar.Portal>
+ * </Searchbar.Root>
+ * ```
+ */
+export declare const Portal: {
+    ({ container, children }: SearchbarPortalProps): React.ReactPortal | null;
+    displayName: string;
+};

package/dist/primitives/Portal.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+/**
+ * Renders children into a portal — useful for command palette / modal mode
+ * to escape stacking contexts.
+ *
+ * @example
+ * ```tsx
+ * <Searchbar.Root>
+ *   <Searchbar.Trigger />
+ *   <Searchbar.Portal>
+ *     <Searchbar.Overlay />
+ *     <Searchbar.Content>
+ *       <Searchbar.Input />
+ *       <Searchbar.List>…</Searchbar.List>
+ *     </Searchbar.Content>
+ *   </Searchbar.Portal>
+ * </Searchbar.Root>
+ * ```
+ */
+export const Portal = ({ container, children }) => {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted)
+        return null;
+    return createPortal(children, container ?? document.body);
+};
+Portal.displayName = "Searchbar.Portal";

package/dist/primitives/Root.d.ts

@@ -0,0 +1,116 @@
+import * as React from "react";
+export type SearchbarRootProps = {
+    /** Controlled open state */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled search query */
+    search?: string;
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    /** Controlled selected item value */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Whether a search is currently in progress */
+    isLoading?: boolean;
+    /** Current error, if any */
+    error?: unknown;
+    /**
+     * Global keyboard shortcut.
+     * Use `"mod+k"` for ⌘K on Mac / Ctrl+K elsewhere, or `"/"` for the widely used search shortcut.
+     * Supports: `mod`, `ctrl`, `shift`, `alt` modifiers + any key (e.g. `"mod+k"`, `"/"`).
+     *
+     * @example `hotkey="mod+k"` — command palette (toggle modal)
+     * @example `hotkey="/"` with `hotkeyBehavior="focus"` — focus input (inline searchbar)
+     */
+    hotkey?: string;
+    /**
+     * What the hotkey does: `"toggle"` (default) opens/closes the modal; `"focus"` focuses the input.
+     * Use `"focus"` for inline Searchbar so the hotkey focuses the input instead of toggling.
+     */
+    hotkeyBehavior?: "focus" | "toggle";
+    /** Called when an item is selected. Receives the item's `value`. */
+    onSelect?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">;
+/**
+ * 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 declare const Root: React.ForwardRefExoticComponent<{
+    /** Controlled open state */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled search query */
+    search?: string;
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    /** Controlled selected item value */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** Whether a search is currently in progress */
+    isLoading?: boolean;
+    /** Current error, if any */
+    error?: unknown;
+    /**
+     * Global keyboard shortcut.
+     * Use `"mod+k"` for ⌘K on Mac / Ctrl+K elsewhere, or `"/"` for the widely used search shortcut.
+     * Supports: `mod`, `ctrl`, `shift`, `alt` modifiers + any key (e.g. `"mod+k"`, `"/"`).
+     *
+     * @example `hotkey="mod+k"` — command palette (toggle modal)
+     * @example `hotkey="/"` with `hotkeyBehavior="focus"` — focus input (inline searchbar)
+     */
+    hotkey?: string;
+    /**
+     * What the hotkey does: `"toggle"` (default) opens/closes the modal; `"focus"` focuses the input.
+     * Use `"focus"` for inline Searchbar so the hotkey focuses the input instead of toggling.
+     */
+    hotkeyBehavior?: "focus" | "toggle";
+    /** Called when an item is selected. Receives the item's `value`. */
+    onSelect?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> & React.RefAttributes<HTMLDivElement>>;