/**
 * # Feed Widget (JS)
 *
 * > A Vanilla JS widget that creates a personalized, scrollable feed of item
 * > recommendations, designed for continuous content discovery.
 *
 * 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.16 and the API can change. Please specify
 * exact version when installing.
 *
 * ## Installation {#install}
 *
 * Install `@recombee/feed-widget-js@0.2.16` and `recombee-js-api-client`
 * packages using your preferred NPM package manager. This example is using
 * `pnpm`.
 *
 * ```sh
 * pnpm add @recombee/feed-widget-js@0.2.16 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}.
 *
 * Please ensure that you provide the user ID (typically obtained from your
 * existing user tracking system), along with other relevant parameters - such
 * as an item ID or [Item Segment](/segmentations) ID - depending on the
 * specific type of recommendation request. See the
 * {@link file://./#providing-user-id | Providing User ID} section for details on
 * how to obtain user ID in specific cases.
 *
 * ```ts
 * // @noErrors
 * import { type CreateRequestFunction } from "@recombee/carousel-widget-react";
 * import { RecommendItemsToUser } from "recombee-js-api-client";
 *
 * const createRequest: CreateRequestFunction = ({ count }) => {
 *   const SCENARIO_ID = "recommend-items-to-user";
 *   return new RecommendItemsToUser(userId, count, {
 *     scenario: SCENARIO_ID,
 *     cascadeCreate: true,
 *     returnProperties: 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/carousel-widget-react";
 * import { RecommendItemsToUser } 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 = ({ count }) => {
 *   const SCENARIO_ID = "recommend-items-to-user";
 *   return new RecommendItemsToUser(userId, count, {
 *     scenario: SCENARIO_ID,
 *     cascadeCreate: true,
 *     returnProperties: 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.
 *
 * {@includeExample ../examples/basic-example}
 *
 * ## Custom CSS {#custom-css}
 *
 * Recombee Widgets are designed to be styling-agnostic. You can fully customize
 * their appearance using your own CSS by passing class names through
 * customization properties.
 *
 * In these docs examples, we use utility classes from [Tailwind
 * CSS](https://tailwindcss.com/) for styling.
 *
 * Class names for internal elements and custom components are passed as props
 * and applied by the widget during rendering. The default structure of the
 * _Basic Example_ widget is illustrated below (pseudo-code):
 *
 * ```html
 * <div class="{className}">
 *   <div class="{contentClassName}">
 *     <div class="{itemWrapperClassName}">
 *       <ItemComponent />
 *     </div>
 *     <div class="{itemWrapperClassName}">
 *       <ItemComponent />
 *     </div>
 *     <div class="{itemWrapperClassName}">
 *       <ItemComponent />
 *     </div>
 *     ... more items ...
 *   </div>
 *   <LoadMoreTriggerComponent />
 * </div>
 * ```
 *
 * This is especially handy for understanding how to customize the widget to its
 * full potential.
 *
 * ### Setting own classes
 *
 * {@includeExample ../examples/custom-class-names}
 *
 * ## Custom Templates {#custom-templates}
 *
 * Recombee Widgets support full customization of internal components such as
 * the appearance of the recommended items.
 *
 * You can provide your own components via props like {@link ItemComponent} to
 * control the structure, styling, and behavior of the widget.
 *
 * This flexibility allows you to adapt the widget's appearance and
 * functionality to match your design and user experience requirements.
 *
 * ### Custom Item
 *
 * {@includeExample ../examples/custom-item-template}
 *
 * ## Overriding Base Classes {#overriding-base-classes}
 *
 * Some base styles are always applied to ensure the widget maintains the
 * structural shape of a feed.
 *
 * However, these can be disabled or overridden if needed. Use the
 * {@link FeedWidgetProps.classNameDisableDefault} and related options to opt out
 * of default styling.
 *
 * {@includeExample ../examples/class-names-overrides}
 *
 * ## Composite Recommendations {#composite-recommendations}
 *
 * {@includeExample ../examples/composite-recomms}
 *
 * @public
 * @packageDocumentation
 */
/** End packageDocumentation */
import {
  type DefaultFeedProps,
  type FeedWidgetProps,
  FeedWidgetState,
} from "@recombee/feed-widget-react";
import { type FC } from "react";
export * from "@recombee/feed-widget-react";
export * from "@recombee/widgets-core";
export { PersistentUserID } from "@recombee/widgets-core";
export * from "htm/react";
/**
 * Feed widget initialization function. See {@link FeedWidgetOptions}
 *
 * @public
 */
export declare const FeedWidget: ({
  container,
  ...props
}: FeedWidgetOptions) => FeedWidgetState | null | undefined;
/**
 * Configuration options of Feed widget
 *
 * @public
 */
export type FeedWidgetOptions = {
  /**
   * CSS Selector to target the element where the widget should be inserted.
   *
   * @public
   */
  container: string;
  FeedComponent?: FC<DefaultFeedProps>;
} & FeedWidgetProps;
//# sourceMappingURL=index.d.ts.map