/**
 * # Quick Search Widget (JS)
 *
 * > A Vanilla JS widget that enables users to perform real-time product searches
 * > with instant results, enhancing product discoverability and conversion.
 *
 * Use this library when you want to display a widget without using a transpiler
 * like Babel and without using JSX. This library exports a `htm` HTML factory
 * to assemble custom elements of the widget.
 *
 * This widget library is version 0.2.0 and the API can change. Please specify
 * exact version when installing.
 *
 * ## Installation {#install}
 *
 * Install `@recombee/quick-search-widget-js@0.2.0` and `recombee-js-api-client`
 * packages using your preferred NPM package manager. This example is using
 * `pnpm`.
 *
 * ```sh
 * pnpm add @recombee/quick-search-widget-js@0.2.0 recombee-js-api-client
 * ```
 *
 * Always remember to apply the default CSS file distributed alongside the
 * widget library, as shown in the examples.
 *
 * ## Client Initialization {#client-initialization}
 *
 * The widget loads recommendation data using [Recombee API Client](/js_client).
 * Here is how to initialize the client with necessary configuration for a
 * specific database:
 *
 * ```ts
 * import { ApiClient } from "recombee-js-api-client";
 *
 * const DATABASE_ID = "[database-id]";
 * const PUBLIC_TOKEN = "[database-public-token]";
 * const REGION = "[database-region]";
 *
 * export const apiClient = new ApiClient(DATABASE_ID, PUBLIC_TOKEN, {
 *   region: REGION,
 * });
 * ```
 *
 * The Database Public Token can be found in the Admin UI
 * {@link https://admin.recombee.com/go-to-database/settings | Database Settings Page}.
 *
 * The widget also needs to be provided a `createRequest` function, which
 * instantiates a client request class to define which data to pull from the
 * database. Use Scenario ID which can be found on Admin GUI
 * {@link https://admin.recombee.com/go-to-database/scenarios | Database Scenarios Page}.
 *
 * Quick Search widget requires the `createRequest` function to return a Batch
 * Request. For a basic case of single search request, always wrap it in a
 * batch.
 *
 * ```ts
 * // @noErrors
 * import { type CreateRequestFunction } from "@recombee/quick-search-widget-react";
 * import {
 *   Batch,
 *   SearchItems,
 *   SearchItemSegments,
 * } from "recombee-js-api-client";
 *
 * const createRequest: CreateRequestFunction = ({ searchQuery }) => {
 *   return new Batch(
 *     [
 *       new SearchItems(userId, searchQuery, 5, {
 *         scenario: "search-items",
 *         cascadeCreate: true,
 *         returnProperties: true,
 *       }),
 *       new SearchItemSegments(userId, searchQuery, 5, {
 *         scenario: "search-categories",
 *         cascadeCreate: true,
 *       }),
 *     ],
 *     {
 *       distinctRecomms: true,
 *     },
 *   );
 * };
 * ```
 *
 * ### Providing User ID {#providing-user-id}
 *
 * Each visitor of your website should be identified by a user identificator
 * (`userId`) to correlate user activity and deliver best possible
 * recommendation performance. The `userId` should preferrably originate from
 * your user's account details when the user is authenticated or as some
 * session-persistent random ID when they are anonymous. The SDK provides
 * utility which generates random user id and saves it to a cookie to cover the
 * latter case:
 *
 * ```ts
 * // @noErrors
 * import { type CreateRequestFunction } from "@recombee/quick-search-widget-react";
 * import {
 *   Batch,
 *   SearchItems,
 *   SearchItemSegments,
 * } from "recombee-js-api-client";
 * import { PersistentUserID } from "@recombee/carousel-widget-react";
 *
 * let userId: string | undefined;
 * if (authenticatedUserId) {
 *   userId = authenticatedUserId;
 * } else {
 *   userId = PersistentUserID.getId();
 * }
 *
 * const createRequest: CreateRequestFunction = ({ searchQuery }) => {
 *   return new Batch(
 *     [
 *       new SearchItems(userId, searchQuery, 5, {
 *         scenario: "search-items",
 *         cascadeCreate: true,
 *         returnProperties: true,
 *       }),
 *       new SearchItemSegments(userId, searchQuery, 5, {
 *         scenario: "search-categories",
 *         cascadeCreate: true,
 *       }),
 *     ],
 *     {
 *       distinctRecomms: true,
 *     },
 *   );
 * };
 * ```
 *
 * ## Basic Example {#basic-example}
 *
 * The widget in this example uses the {@link DefaultItem} component to render
 * each recommendation in a consistent layout.
 *
 * The resulting widget is inserted into the element specified by the
 * `container` field.
 *
 * Values of the recommended items - such as title, image URL, or link URL - are
 * obtained from the API response and accessed via `props.result?.values`.
 *
 * Ensure that [returnProperties:
 * true](/api#recommend-items-to-user-param-returnProperties) is set in the
 * request, and optionally use
 * [includedProperties](/api#recommend-items-to-user-param-includedProperties)
 * to control which item properties are returned.
 *
 * @example
 *
 * {@includeExample ../examples/basic-example}
 *
 * ## Custom Template {#custom-template}
 *
 * You can customize the appearance and behavior of the Quick Search Widget by
 * overriding its individual components:
 *
 * - {@link DropdownComponent} – Renders the dropdown containing search results.
 * - {@link InputComponent} – Handles the search input field where users type their
 *   queries.
 * - {@link TriggerComponent} – Controls how the widget is opened on mobile
 *   devices.
 *
 * The example also demonstrates how to make the search form submittable to a
 * dedicated results page using a `submit` button.
 *
 * @example
 *
 * {@includeExample ../examples/custom-template}
 *
 * ## Multi-Type Search Results {#multi-type-search-results}
 *
 * You can use the Quick Search Widget to display multiple types of results. For
 * example, showing not only items but also categories or brands using the
 * [Search Item Segments](/api#search-item-segments) requests.
 *
 * All search requests are sent together in a single [Batch](/api#batch)
 * request.
 *
 * @example
 *
 * {@includeExample ../examples/multiple-requests}
 *
 * @public
 * @packageDocumentation
 */
/** End packageDocumentation */
import { type QuickSearchWidgetProps } from "@recombee/quick-search-widget-react";
export { PersistentUserID } from "@recombee/widgets-core";
export * from "@recombee/quick-search-widget-react";
export * from "htm/react";
/**
 * Quick Search widget
 *
 * @public
 */
export declare const QuickSearchWidget: ({
  container,
  ...props
}: QuickSearchWidgetOptions) => null | undefined;
/**
 * Quick Search widget options
 *
 * @public
 */
export type QuickSearchWidgetOptions = {
  /**
   * CSS Selector to target the element where the widget should be inserted.
   *
   * @public
   */
  container: string;
} & QuickSearchWidgetProps;
//# sourceMappingURL=index.d.ts.map