@perspective-ai/sdk-react 0.0.0-pr-21-20260224144030

package/dist/index.d.cts

@@ -0,0 +1,175 @@
+import { EmbedConfig, EmbedHandle, FloatHandle, TriggerConfig, ShowOnce } from '@perspective-ai/sdk';
+export { AutoOpenConfig, BrandColors, EmbedConfig, EmbedError, EmbedHandle, FloatHandle, ShowOnce, ThemeValue, TriggerConfig } from '@perspective-ai/sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, RefObject } from 'react';
+
+/** Options for usePopup hook */
+interface UsePopupOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for usePopup hook */
+interface UsePopupReturn {
+    /** Open the popup */
+    open: () => void;
+    /** Close the popup */
+    close: () => void;
+    /** Toggle the popup */
+    toggle: () => void;
+    /** Whether the popup is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null when closed) */
+    handle: EmbedHandle | null;
+}
+/**
+ * Headless hook for programmatic popup control.
+ * Use this when you need custom trigger elements or programmatic control.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with custom trigger
+ * const { open, isOpen } = usePopup({ researchId: "abc" });
+ * <MyCustomButton onClick={open}>Open Survey</MyCustomButton>
+ *
+ * // Controlled mode
+ * const [isOpen, setIsOpen] = useState(false);
+ * const popup = usePopup({
+ *   researchId: "abc",
+ *   open: isOpen,
+ *   onOpenChange: setIsOpen
+ * });
+ * ```
+ */
+declare function usePopup(options: UsePopupOptions): UsePopupReturn;
+
+/** Options for useSlider hook */
+interface UseSliderOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for useSlider hook */
+interface UseSliderReturn {
+    /** Open the slider */
+    open: () => void;
+    /** Close the slider */
+    close: () => void;
+    /** Toggle the slider */
+    toggle: () => void;
+    /** Whether the slider is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null when closed) */
+    handle: EmbedHandle | null;
+}
+/**
+ * Headless hook for programmatic slider control.
+ * Use this when you need custom trigger elements or programmatic control.
+ *
+ * @example
+ * ```tsx
+ * const { open, isOpen } = useSlider({ researchId: "abc" });
+ * <MyCustomButton onClick={open}>Give Feedback</MyCustomButton>
+ * ```
+ */
+declare function useSlider(options: UseSliderOptions): UseSliderReturn;
+
+/** Options for useFloatBubble hook */
+interface UseFloatBubbleOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for useFloatBubble hook */
+interface UseFloatBubbleReturn {
+    /** Open the float bubble window */
+    open: () => void;
+    /** Close the float bubble window */
+    close: () => void;
+    /** Toggle the float bubble window */
+    toggle: () => void;
+    /** Unmount the float bubble entirely */
+    unmount: () => void;
+    /** Whether the float bubble window is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null until mounted) */
+    handle: FloatHandle | null;
+}
+/**
+ * Headless hook for float bubble lifecycle management.
+ * Creates a floating bubble button that expands into a chat window.
+ * The bubble mounts on component mount and unmounts on component unmount.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - bubble mounts on component mount
+ * useFloatBubble({ researchId: "abc" });
+ *
+ * // With programmatic control
+ * const { open, close, isOpen } = useFloatBubble({ researchId: "abc" });
+ * <button onClick={open}>Open Chat</button>
+ * ```
+ */
+declare function useFloatBubble(options: UseFloatBubbleOptions): UseFloatBubbleReturn;
+
+interface UseAutoOpenOptions extends Omit<EmbedConfig, "type" | "autoOpen"> {
+    trigger: TriggerConfig;
+    showOnce?: ShowOnce;
+}
+interface UseAutoOpenReturn {
+    /** Cancel the pending trigger */
+    cancel: () => void;
+    /** Whether the trigger has fired */
+    triggered: boolean;
+}
+declare function useAutoOpen(options: UseAutoOpenOptions): UseAutoOpenReturn;
+
+type Theme = "light" | "dark";
+type ThemeInput = "light" | "dark" | "system";
+/**
+ * Hook to resolve theme based on override and system preference.
+ * Listens for system preference changes when theme is "system".
+ */
+declare function useThemeSync(theme?: ThemeInput): Theme;
+
+declare function useStableCallback<T extends ((...args: any[]) => any) | undefined>(callback: T): T;
+
+interface WidgetProps extends Omit<EmbedConfig, "type">, Omit<HTMLAttributes<HTMLDivElement>, "onError" | "onSubmit"> {
+    /** Ref to access the embed handle for programmatic control */
+    embedRef?: RefObject<EmbedHandle | null>;
+}
+/**
+ * Inline widget embed component.
+ * Renders the interview directly in a container.
+ */
+declare function Widget({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, className, style, ...divProps }: WidgetProps): react_jsx_runtime.JSX.Element;
+
+interface FullpageProps extends Omit<EmbedConfig, "type"> {
+    /** Ref to access the embed handle for programmatic control */
+    embedRef?: RefObject<EmbedHandle | null>;
+}
+/**
+ * Full viewport embed component.
+ * Takes over the entire screen with the interview.
+ */
+declare function Fullpage({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, }: FullpageProps): null;
+
+interface FloatBubbleProps extends Omit<EmbedConfig, "type"> {
+    /** Ref to access the handle for programmatic control */
+    embedRef?: RefObject<FloatHandle | null>;
+}
+/**
+ * Floating bubble widget that expands into a chat window.
+ * This is a convenience wrapper around useFloatBubble hook.
+ *
+ * @example
+ * ```tsx
+ * <FloatBubble researchId="abc" onSubmit={handleSubmit} />
+ * ```
+ */
+declare function FloatBubble({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, }: FloatBubbleProps): null;
+
+export { FloatBubble, type FloatBubbleProps, Fullpage, type FullpageProps, type UseAutoOpenOptions, type UseAutoOpenReturn, type UseFloatBubbleOptions, type UseFloatBubbleReturn, type UsePopupOptions, type UsePopupReturn, type UseSliderOptions, type UseSliderReturn, Widget, type WidgetProps, useAutoOpen, useFloatBubble, usePopup, useSlider, useStableCallback, useThemeSync };

package/dist/index.d.ts

@@ -0,0 +1,175 @@
+import { EmbedConfig, EmbedHandle, FloatHandle, TriggerConfig, ShowOnce } from '@perspective-ai/sdk';
+export { AutoOpenConfig, BrandColors, EmbedConfig, EmbedError, EmbedHandle, FloatHandle, ShowOnce, ThemeValue, TriggerConfig } from '@perspective-ai/sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, RefObject } from 'react';
+
+/** Options for usePopup hook */
+interface UsePopupOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for usePopup hook */
+interface UsePopupReturn {
+    /** Open the popup */
+    open: () => void;
+    /** Close the popup */
+    close: () => void;
+    /** Toggle the popup */
+    toggle: () => void;
+    /** Whether the popup is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null when closed) */
+    handle: EmbedHandle | null;
+}
+/**
+ * Headless hook for programmatic popup control.
+ * Use this when you need custom trigger elements or programmatic control.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with custom trigger
+ * const { open, isOpen } = usePopup({ researchId: "abc" });
+ * <MyCustomButton onClick={open}>Open Survey</MyCustomButton>
+ *
+ * // Controlled mode
+ * const [isOpen, setIsOpen] = useState(false);
+ * const popup = usePopup({
+ *   researchId: "abc",
+ *   open: isOpen,
+ *   onOpenChange: setIsOpen
+ * });
+ * ```
+ */
+declare function usePopup(options: UsePopupOptions): UsePopupReturn;
+
+/** Options for useSlider hook */
+interface UseSliderOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for useSlider hook */
+interface UseSliderReturn {
+    /** Open the slider */
+    open: () => void;
+    /** Close the slider */
+    close: () => void;
+    /** Toggle the slider */
+    toggle: () => void;
+    /** Whether the slider is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null when closed) */
+    handle: EmbedHandle | null;
+}
+/**
+ * Headless hook for programmatic slider control.
+ * Use this when you need custom trigger elements or programmatic control.
+ *
+ * @example
+ * ```tsx
+ * const { open, isOpen } = useSlider({ researchId: "abc" });
+ * <MyCustomButton onClick={open}>Give Feedback</MyCustomButton>
+ * ```
+ */
+declare function useSlider(options: UseSliderOptions): UseSliderReturn;
+
+/** Options for useFloatBubble hook */
+interface UseFloatBubbleOptions extends Omit<EmbedConfig, "type"> {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Return type for useFloatBubble hook */
+interface UseFloatBubbleReturn {
+    /** Open the float bubble window */
+    open: () => void;
+    /** Close the float bubble window */
+    close: () => void;
+    /** Toggle the float bubble window */
+    toggle: () => void;
+    /** Unmount the float bubble entirely */
+    unmount: () => void;
+    /** Whether the float bubble window is currently open */
+    isOpen: boolean;
+    /** The underlying SDK handle (null until mounted) */
+    handle: FloatHandle | null;
+}
+/**
+ * Headless hook for float bubble lifecycle management.
+ * Creates a floating bubble button that expands into a chat window.
+ * The bubble mounts on component mount and unmounts on component unmount.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - bubble mounts on component mount
+ * useFloatBubble({ researchId: "abc" });
+ *
+ * // With programmatic control
+ * const { open, close, isOpen } = useFloatBubble({ researchId: "abc" });
+ * <button onClick={open}>Open Chat</button>
+ * ```
+ */
+declare function useFloatBubble(options: UseFloatBubbleOptions): UseFloatBubbleReturn;
+
+interface UseAutoOpenOptions extends Omit<EmbedConfig, "type" | "autoOpen"> {
+    trigger: TriggerConfig;
+    showOnce?: ShowOnce;
+}
+interface UseAutoOpenReturn {
+    /** Cancel the pending trigger */
+    cancel: () => void;
+    /** Whether the trigger has fired */
+    triggered: boolean;
+}
+declare function useAutoOpen(options: UseAutoOpenOptions): UseAutoOpenReturn;
+
+type Theme = "light" | "dark";
+type ThemeInput = "light" | "dark" | "system";
+/**
+ * Hook to resolve theme based on override and system preference.
+ * Listens for system preference changes when theme is "system".
+ */
+declare function useThemeSync(theme?: ThemeInput): Theme;
+
+declare function useStableCallback<T extends ((...args: any[]) => any) | undefined>(callback: T): T;
+
+interface WidgetProps extends Omit<EmbedConfig, "type">, Omit<HTMLAttributes<HTMLDivElement>, "onError" | "onSubmit"> {
+    /** Ref to access the embed handle for programmatic control */
+    embedRef?: RefObject<EmbedHandle | null>;
+}
+/**
+ * Inline widget embed component.
+ * Renders the interview directly in a container.
+ */
+declare function Widget({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, className, style, ...divProps }: WidgetProps): react_jsx_runtime.JSX.Element;
+
+interface FullpageProps extends Omit<EmbedConfig, "type"> {
+    /** Ref to access the embed handle for programmatic control */
+    embedRef?: RefObject<EmbedHandle | null>;
+}
+/**
+ * Full viewport embed component.
+ * Takes over the entire screen with the interview.
+ */
+declare function Fullpage({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, }: FullpageProps): null;
+
+interface FloatBubbleProps extends Omit<EmbedConfig, "type"> {
+    /** Ref to access the handle for programmatic control */
+    embedRef?: RefObject<FloatHandle | null>;
+}
+/**
+ * Floating bubble widget that expands into a chat window.
+ * This is a convenience wrapper around useFloatBubble hook.
+ *
+ * @example
+ * ```tsx
+ * <FloatBubble researchId="abc" onSubmit={handleSubmit} />
+ * ```
+ */
+declare function FloatBubble({ researchId, params, brand, theme, host, onReady, onSubmit, onNavigate, onClose, onError, embedRef, }: FloatBubbleProps): null;
+
+export { FloatBubble, type FloatBubbleProps, Fullpage, type FullpageProps, type UseAutoOpenOptions, type UseAutoOpenReturn, type UseFloatBubbleOptions, type UseFloatBubbleReturn, type UsePopupOptions, type UsePopupReturn, type UseSliderOptions, type UseSliderReturn, Widget, type WidgetProps, useAutoOpen, useFloatBubble, usePopup, useSlider, useStableCallback, useThemeSync };