@getuserfeedback/react 0.1.0

package/README.md

@@ -0,0 +1,495 @@
+# @getuserfeedback/react
+
+A secure and performant SDK for [getuserfeedback.com](https://getuserfeedback.com).
+
+`@getuserfeedback/react` lets you easily add in-app messaging and micro-surveys optimized to help you connect with users, build trust, guide development, and avoid building in a vacuum.
+
+> Using plain JavaScript or another framework? Check out [@getuserfeedback/sdk](https://www.npmjs.com/package/@getuserfeedback/sdk).
+
+## Install
+
+```bash
+npm install @getuserfeedback/react
+```
+
+Requires `react >= 18`.
+
+## Get started
+
+### 1. Get an API key
+Sign up on [getuserfeedback.com](https://getuserfeedback.com) and grab your key in Settings.
+
+### 2. Add the provider
+
+```tsx
+import { GetUserFeedbackProvider } from "@getuserfeedback/react";
+
+export function App() {
+  return (
+    <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+      <AppRoutes />
+    </GetUserFeedbackProvider>
+  );
+}
+```
+
+### 3. Start collecting responses
+
+Pick one of our curated templates on [getuserfeedback.com/templates](https://getuserfeedback.com/templates) — from a post-signup welcome message to customer satisfaction surveys, feedback forms, and more. You can also customize everything or start from scratch.
+
+### 4. Get feedback — improve product — repeat
+Our widgets are optimized to get you *more* responses. Polished UI, crafted copy, templates, and a million subtle tricks. Result — you get more responses, make better roadmap calls, and find product-market fit faster.
+
+### Bonus
+Our AI-powered theme editor allows a complete overhaul of the widget look and feel with a single prompt. Demo: [getuserfeedback.com/themes](https://getuserfeedback.com/themes).
+
+## Advanced use cases
+### Feedback form
+You can call flows imperatively, e.g., open a feedback form when the user clicks a dedicated button in your UI.
+
+```tsx
+import { useFlow } from "@getuserfeedback/react";
+
+const FEEDBACK_FLOW_ID = "YOUR_FLOW_ID";
+
+export function FeedbackButton() {
+  const { open } = useFlow({ flowId: FEEDBACK_FLOW_ID });
+
+  return (
+    <button type="button" onClick={() => open()}>
+      Give feedback
+    </button>
+  );
+}
+```
+
+### Bring your own UI
+By default, flows are displayed in a floating container and [themed](https://getuserfeedback.com/themes) accordingly. Beyond that, you can replace the default floating container with your own. This gives you unprecedented customization options for a seamless user experience.
+
+For example, if you're using shadcn/ui dialogs throughout your product, our widgets can be seamlessly rendered into them and appear just like any other part of your app.
+
+```tsx
+import { useFlowContainer } from "@getuserfeedback/react";
+import { Button, Dialog, DialogContent } from "ui";
+
+export function FeedbackDialog() {
+  const {
+    isLoading,
+    setOpen,
+    shouldRenderContainer,
+    containerRef,
+    width,
+    height
+  } = useFlowContainer({ flowId: "YOUR_FLOW_ID" });
+
+  return (
+    <>
+      <Button
+        type="button"
+        onClick={() => setOpen(true)}
+        disabled={isLoading}
+      >
+        Open feedback
+      </Button>
+      <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>
+        <DialogContent
+          ref={containerRef}
+          style={{ width, height }}
+        />
+      </Dialog>
+    </>
+  );
+}
+```
+
+## API Overview
+
+- `GetUserFeedbackProvider`
+- `useGetUserFeedback()`
+- `useFlow({ flowId, prefetchOnMount? })`
+- `useFlowContainer({ flowId, prefetchOnMount? })`
+- `useDefaultFlowContainer()`
+
+## `GetUserFeedbackProvider`
+
+Initialize the SDK client.
+
+```tsx
+import { GetUserFeedbackProvider } from "@getuserfeedback/react";
+
+export function App() {
+  return (
+    <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+      <AppRoutes />
+    </GetUserFeedbackProvider>
+  );
+}
+```
+
+### Options
+
+Pass SDK options via `clientOptions`:
+
+- `apiKey` (`string`, required): your project API key.
+- `colorScheme` (`"light" | "dark" | "system" | { autoDetectColorScheme: string[] }`, optional):
+  controls widget theme mode. See [Dark mode](#dark-mode).
+- `disableAutoLoad` (`boolean`, optional): if `true`, call `client.load()` manually.
+- `disableTelemetry` (`boolean`, optional): disables anonymous telemetry used for performance and error monitoring.
+
+### Delay widget load
+
+If you want to manually control when the widget starts loading:
+
+```tsx
+import { useEffect } from "react";
+import {
+  GetUserFeedbackProvider,
+  useGetUserFeedback,
+} from "@getuserfeedback/react";
+
+function LoadWidget() {
+  const client = useGetUserFeedback();
+
+  useEffect(() => {
+    client.load();
+  }, [client]);
+
+  return null;
+}
+
+export function App() {
+  return (
+    <GetUserFeedbackProvider
+      clientOptions={{ apiKey: "YOUR_API_KEY", disableAutoLoad: true }}
+    >
+      <AppRoutes />
+      <LoadWidget />
+    </GetUserFeedbackProvider>
+  );
+}
+```
+
+## Identify users
+
+Use identity to unlock cohort targeting and attach responses to user profiles.
+
+### `client.identify(userId, traits?)` or `client.identify(traits)`
+
+```tsx
+import { useEffect } from "react";
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+type User = {
+  id: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+};
+
+export function FeedbackIdentity({ user }: { user: User | null }) {
+  const client = useGetUserFeedback();
+
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+
+    client.identify(user.id, {
+      email: user.email,
+      firstName: user.firstName,
+      lastName: user.lastName,
+    });
+  }, [client, user]);
+
+  return null;
+}
+```
+
+### `client.reset()`
+
+Call this on logout to clear active identity state and auth (if you use auth):
+
+```tsx
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+export function LogoutButton() {
+  const client = useGetUserFeedback();
+
+  return (
+    <button type="button" onClick={() => client.reset()}>
+      Log out
+    </button>
+  );
+}
+```
+
+## Dark mode
+
+If you're using industry-standard ways to indicate when dark mode is *on*, the widget will pick it up and automatically keep itself in sync. If you only have light mode, the widget will stay in light mode.
+
+Default behavior:
+- The widget observes `class` and `data-theme` attributes on both `html` and `body`.
+- `class="dark"` / `data-theme="dark"` enables dark mode.
+- `class="light"` / `data-theme="light"` enables light mode.
+- `class="system"` / `data-theme="system"` follows the user's system preference (`prefers-color-scheme`).
+- If nothing is detected, it falls back to `"light"`.
+
+You can control the behavior using the `colorScheme` option when creating a client, and you can also update it later.
+
+### Set a static color scheme at startup
+
+```tsx
+import { GetUserFeedbackProvider } from "@getuserfeedback/react";
+
+export function App() {
+  return (
+    <GetUserFeedbackProvider
+      clientOptions={{
+        apiKey: "YOUR_API_KEY",
+        colorScheme: "dark", // set to a static value
+      }}
+    >
+      <AppRoutes />
+    </GetUserFeedbackProvider>
+  );
+}
+```
+
+`colorScheme` supports:
+- `{ autoDetectColorScheme: string[] }`
+- `"light" | "dark" | "system"`
+
+### Update color scheme at runtime
+
+```tsx
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+export function ThemeButton() {
+  const client = useGetUserFeedback();
+
+  return (
+    <button
+      type="button"
+      onClick={() => client.configure({ colorScheme: "system" })}
+    >
+      Follow system
+    </button>
+  );
+}
+```
+
+You can also switch runtime behavior back to host-driven auto-detection:
+
+```tsx
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+export function ThemeAutoDetectButton() {
+  const client = useGetUserFeedback();
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        client.configure({
+          colorScheme: {
+            autoDetectColorScheme: ["class", "data-theme"], // default
+          },
+        })
+      }
+    >
+      Use host theme
+    </button>
+  );
+}
+```
+
+## Auth (optional)
+
+You can run the SDK without auth. This is standard industry practice for client-side widgets like ours, so it is not enforced by default. However, we encourage you to implement auth for stricter controls.
+
+Enable JWT validation in your workspace settings and pass a signed token from your app.
+
+### Clerk example: set, refresh, and clear auth token
+
+```tsx
+import { useEffect } from "react";
+import { useAuth } from "@clerk/clerk-react";
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+const AUTH_REFRESH_INTERVAL_MS = 5 * 60 * 1000;
+
+// Mount once inside both <ClerkProvider> and <GetUserFeedbackProvider>.
+export function GetUserFeedbackClerkAuth() {
+  const client = useGetUserFeedback();
+  const { isLoaded, userId, sessionId, getToken } = useAuth();
+
+  useEffect(() => {
+    if (!isLoaded) {
+      return;
+    }
+
+    let isDisposed = false;
+
+    const syncAuthToken = async () => {
+      // Signed out: clear auth token.
+      if (!userId) {
+        await client.configure({ auth: { jwt: null } });
+        return;
+      }
+
+      // Signed in: fetch/refresh Clerk JWT and pass it to the SDK.
+      const token = await getToken({ template: "getuserfeedback" });
+      if (isDisposed) {
+        return;
+      }
+
+      if (!token) {
+        await client.configure({ auth: { jwt: null } });
+        return;
+      }
+
+      await client.configure({ auth: { jwt: { token } } });
+    };
+
+    syncAuthToken();
+    const refreshTimer = window.setInterval(() => {
+      syncAuthToken();
+    }, AUTH_REFRESH_INTERVAL_MS);
+
+    return () => {
+      isDisposed = true;
+      window.clearInterval(refreshTimer);
+    };
+  }, [client, getToken, isLoaded, sessionId, userId]);
+
+  return null;
+}
+```
+
+## Privacy and consent (GDPR, CCPA, etc)
+
+Consent settings control non-essential data scopes: analytics, storage, personalization, ads.
+
+By default, the widget starts with `granted` consent. For compliance with privacy regulations like GDPR and CCPA, you may want to choose a different default.
+
+### Set default consent to `pending`
+```tsx
+import { GetUserFeedbackProvider } from "@getuserfeedback/react";
+
+export function App() {
+  return (
+    <GetUserFeedbackProvider
+      clientOptions={{
+        apiKey: "YOUR_API_KEY",
+        defaultConsent: "pending", // set to `pending`
+      }}
+    >
+      <AppRoutes />
+    </GetUserFeedbackProvider>
+  );
+}
+```
+With `pending` consent set by default, all non-essential data scopes are considered effectively denied.
+
+### Update consent at runtime
+
+```tsx
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+export function ConsentGrantedButton() {
+  const client = useGetUserFeedback();
+
+  return (
+    <button
+      type="button"
+      onClick={() => client.configure({ consent: "granted" })}
+    >
+      Grant consent
+    </button>
+  );
+}
+```
+
+You can also pass explicit granted scopes instead:
+
+```tsx
+import { useGetUserFeedback } from "@getuserfeedback/react";
+
+export function ConsentScopesButton() {
+  const client = useGetUserFeedback();
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        client.configure({
+          consent: ["analytics.measurement", "analytics.storage"],
+        })
+      }
+    >
+      Grant analytics scopes
+    </button>
+  );
+}
+
+```
+`defaultConsent` supports:
+- `"pending" | "granted" (default) | "denied" | "revoked"`
+- or a granted-scope list like `["analytics.measurement", "analytics.storage"]`
+
+### Impact of different consent settings
+
+- Response collection: never affected.
+- Imperative flow display: never affected.
+- Cohort targeting: rules that depend on persisted activity, identity continuity, or storage-backed signals require both `analytics.measurement` and `analytics.storage`.
+- Context targeting: rules based on current-page context (URL, referrer, timing, host signals) require `analytics.measurement` only.
+
+## Advanced — control flows imperatively
+
+### Open a flow
+
+```tsx
+import { useFlow } from "@getuserfeedback/react";
+
+export function OpenFlowButton() {
+  const { open } = useFlow({ flowId: "YOUR_FLOW_ID" });
+
+  return (
+    <button type="button" onClick={() => open()}>
+      Open flow
+    </button>
+  );
+}
+```
+
+### Prefetch and prerender
+
+Prefetching loads flow resources over the network, prerendering warms up the UI.
+
+```tsx
+import { useFlow } from "@getuserfeedback/react";
+
+export function FeedbackButton() {
+  const { prerender, open } = useFlow({
+    flowId: "YOUR_FLOW_ID",
+    prefetchOnMount: true,
+  });
+
+  return (
+    <button
+      type="button"
+      onMouseEnter={() => prerender()}
+      onFocus={() => prerender()}
+      onClick={() => open()}
+    >
+      Give feedback
+    </button>
+  );
+}
+```
+
+## Links
+
+- Docs: [getuserfeedback.com/docs](https://getuserfeedback.com/docs)
+- Package versions (release history): [npm versions for `@getuserfeedback/react`](https://www.npmjs.com/package/@getuserfeedback/react?activeTab=versions)
+- Report issues / support: [hello@getuserfeedback.com](mailto:hello@getuserfeedback.com)

package/dist/index.d.ts

@@ -0,0 +1,216 @@
+import { ClientOptions, Client } from '@getuserfeedback/sdk';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * Options for useFlow().
+ */
+interface UseFlowOptions {
+    /** The flow/survey ID to control. */
+    flowId: string;
+    /** Prefetch the flow resources on mount so it opens faster. Default `false`. */
+    prefetchOnMount?: boolean;
+}
+/**
+ * Return value for useFlow(): state and callbacks to show the default floating flow.
+ */
+interface UseFlowReturn {
+    /** True when the flow is visible. */
+    isOpen: boolean;
+    /** True when the flow is loading. */
+    isLoading: boolean;
+    /** Open the flow. */
+    open: () => Promise<void>;
+    /** Close the flow. */
+    close: () => Promise<void>;
+    /** Prerendering warms up the flow for instant display later. */
+    prerender: () => Promise<void>;
+    /** Flow width in pixels (when known). */
+    width?: number;
+    /** Flow height in pixels (when known). */
+    height?: number;
+}
+/**
+ * Return value for useFlowContainer(): state and callbacks for host-managed container flows.
+ */
+interface UseFlowContainerReturn {
+    /** True when the flow is visible. */
+    isOpen: boolean;
+    /** True when the flow is loading. */
+    isLoading: boolean;
+    /** True when your host UI should render the custom container element. */
+    shouldRenderContainer: boolean;
+    /** Open the flow when `true`, close when `false`. */
+    setOpen: (next: boolean) => Promise<void>;
+    /** Prerendering warms up the flow for instant display later. */
+    prerender: () => Promise<void>;
+    /** Ref callback: attach this to the container element where the flow should render. */
+    containerRef: (element: HTMLDivElement | null) => void;
+    /** Flow width in pixels (when known). */
+    width?: number;
+    /** Flow height in pixels (when known). */
+    height?: number;
+}
+/**
+ * Return value for useDefaultFlowContainer(): container ref and aggregate flow state
+ * for all flows in the same provider subtree (including targeting-engine opens).
+ */
+interface UseDefaultFlowContainerReturn {
+    /** True when any flow is visible. */
+    isOpen: boolean;
+    /** True when any flow is loading. */
+    isLoading: boolean;
+    /** True when your host UI should render the default flow container. */
+    shouldRenderContainer: boolean;
+    /** Active flow width in pixels (when known). */
+    width?: number;
+    /** Active flow height in pixels (when known). */
+    height?: number;
+    /** Close currently displayed flows when `false`; opening is flow-driven. */
+    setOpen: (next: boolean) => Promise<void>;
+    /** Ref callback for the default flow container element. */
+    containerRef: (element: HTMLDivElement | null) => void;
+}
+interface GetUserFeedbackProviderProps {
+    /** Application subtree that can use getuserfeedback hooks. */
+    children: ReactNode;
+    /** Core SDK client options used to create/reuse the underlying client. */
+    clientOptions: ClientOptions;
+}
+/**
+ * Provider for getuserfeedback React hooks.
+ * Wrap your app (or a subtree) so `useFlow`, `useFlowContainer`,
+ * `useDefaultFlowContainer`, and `useGetUserFeedback` can access a client
+ * created from `clientOptions`.
+ *
+ * If your app uses `useDefaultFlowContainer()`, all flows in this subtree
+ * (including targeting-engine opens) target that container.
+ * If the container ref is not mounted yet, loader keeps flows parked until it is.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+ *       <Routes />
+ *     </GetUserFeedbackProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Display *any* flow in your own dialog (a shadcn/ui dialog in this example):
+ * ```tsx
+ * function DefaultFlowContainer() {
+ *   const { containerRef, shouldRenderContainer, width, height, setOpen } = useDefaultFlowContainer();
+ *
+ *   return (
+ *     <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>
+ *       <DialogContent ref={containerRef} style={{ width, height }} />
+ *     </Dialog>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+ *       <AppRoutes />
+ *       <DefaultFlowContainer /> // Flows will be triggered by the targeting engine and displayed in your own dialog
+ *     </GetUserFeedbackProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function GetUserFeedbackProvider({ children, clientOptions, }: GetUserFeedbackProviderProps): ReactElement;
+/**
+ * @name useFlow
+ * @description Imperatively display a flow.
+ * @example Basic usage
+ * ```tsx
+ * function FeedbackButton() {
+ *   const { open, isLoading } = useFlow({ flowId: "sur_123" });
+ *   return <Button onClick={() => open()} disabled={isLoading}>Feedback</Button>;
+ * }
+ * ```
+ */
+declare function useFlow(flow: UseFlowOptions): UseFlowReturn;
+/**
+ * @name useFlowContainer
+ * @description Imperatively display a flow in your own container element.
+ * @example In a custom dialog
+ * ```tsx
+ * function FlowContainerDialog() {
+ *   const { containerRef, shouldRenderContainer, width, height, setOpen, isLoading } =
+ *     useFlowContainer({ flowId: "sur_123" });
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setOpen(true)} loading={isLoading}>
+ *         Feedback
+ *       </Button>
+ *       <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>
+ *         <DialogContent ref={containerRef} style={{ width, height }} />
+ *       </Dialog>
+ *     </>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+ *       <FlowContainerDialog />
+ *     </GetUserFeedbackProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function useFlowContainer(flow: UseFlowOptions): UseFlowContainerReturn;
+/**
+ * @name useDefaultFlowContainer
+ * @description Register and control a default flow container for all flows in this provider subtree.
+ * @example Display any flow in your own dialog
+ * ```tsx
+ * function DefaultFlowContainer() {
+ *   const { containerRef, shouldRenderContainer, width, height, setOpen } = useDefaultFlowContainer();
+ *   return (
+ *     <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>
+ *       <DialogContent ref={containerRef} style={{ width, height }} />
+ *     </Dialog>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <GetUserFeedbackProvider clientOptions={{ apiKey: "YOUR_API_KEY" }}>
+ *       <AppRoutes />
+ *       <DefaultFlowContainer />
+ *     </GetUserFeedbackProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function useDefaultFlowContainer(): UseDefaultFlowContainerReturn;
+/**
+ * Hook for accessing the getuserfeedback client instance.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const client = useGetUserFeedback();
+ *
+ * // on login
+ * client.identify('user-123', { email: 'user@example.com' });
+ *
+ * // on logout
+ * client.reset();
+ * ```
+ *
+ * @example Override color scheme
+ * ```tsx
+ * const client = useGetUserFeedback();
+ * await client.configure({ colorScheme: "dark" });
+ * ```
+ */
+declare function useGetUserFeedback(): Client;
+
+declare const REACT_SDK_VERSION: string;
+
+export { GetUserFeedbackProvider, REACT_SDK_VERSION, useDefaultFlowContainer, useFlow, useFlowContainer, useGetUserFeedback };
+export type { GetUserFeedbackProviderProps, UseDefaultFlowContainerReturn, UseFlowContainerReturn, UseFlowOptions, UseFlowReturn };

package/dist/index.js

@@ -0,0 +1,5 @@
+"use client";
+import{createClient as M}from"@getuserfeedback/sdk";import{createContext as Q,useCallback as _,useContext as q,useEffect as O,useMemo as h,useRef as y,useState as z}from"react";import{jsx as r}from"react/jsx-runtime";var W={isOpen:!1,isLoading:!1,shouldRenderContainer:!1,width:void 0,height:void 0},T=Q(null);function X({children:G,clientOptions:U}){let p=M(U),A=y(null),P=y(0),[R,v]=z(()=>({...p.getFlowState()})),b=_((E)=>{if(A.current=E,P.current===0)return;p.setDefaultContainerPolicy({kind:"hostContainer",host:E,sharing:"perFlowRun"})},[p]),F=_(()=>{if(P.current+=1,P.current===1)p.setDefaultContainerPolicy({kind:"hostContainer",host:A.current,sharing:"perFlowRun"});return()=>{if(P.current=Math.max(0,P.current-1),P.current===0)p.setDefaultContainerPolicy({kind:"floating"})}},[p]);O(()=>p.subscribeFlowState((E)=>{v({isOpen:E.isOpen,isLoading:E.isLoading,width:E.width,height:E.height})},{emitInitial:!0}),[p]);let K=h(()=>{if(!R.isOpen&&!R.isLoading)return W;return{isOpen:R.isOpen,isLoading:R.isLoading,shouldRenderContainer:!0,width:R.width,height:R.height}},[R]),N=h(()=>({client:p,apiKey:U.apiKey,setDefaultFlowContainer:b,registerDefaultFlowContainerConsumer:F,defaultFlowContainerState:K}),[p,U.apiKey,K,F,b]);return r(T.Provider,{value:N,children:G})}var B=(G)=>{let U=q(T);if(!U)throw Error("useFlow must be used within a GetUserFeedbackProvider");let{client:p}=U,{flowId:A,prefetchOnMount:P=!1}=G.flow,R=h(()=>p.flow(A),[p,A]),v=G.mode==="container",[b,F]=z(()=>R.getFlowState()),K=_(()=>{return R.open(v?{containerRequirement:"hostOnly"}:void 0)},[R,v]),N=_(()=>R.close(),[R]),E=_((I)=>I?K():N(),[N,K]),J=_((I)=>{if(!v)return;R.setContainer(I)},[R,v]),L=v&&(b.isLoading||b.isOpen);return O(()=>R.subscribeFlowState((I)=>F({isOpen:I.isOpen,isLoading:I.isLoading,width:I.width,height:I.height}),{emitInitial:!1}),[R]),O(()=>{if(!P)return;R.prefetch()},[R,P]),{isOpen:b.isOpen,isLoading:b.isLoading,width:b.width,height:b.height,shouldRenderContainer:L,setOpen:E,open:K,close:N,prerender:()=>R.prerender(),containerRef:J}};function Y(G){let U=B({flow:G,mode:"default"});return{isOpen:U.isOpen,isLoading:U.isLoading,width:U.width,height:U.height,open:U.open,close:U.close,prerender:U.prerender}}function Z(G){let U=B({flow:G,mode:"container"});return{isOpen:U.isOpen,isLoading:U.isLoading,width:U.width,height:U.height,shouldRenderContainer:U.shouldRenderContainer,setOpen:U.setOpen,prerender:U.prerender,containerRef:U.containerRef}}function $(){let G=q(T);if(!G)throw Error("useDefaultFlowContainer must be used within a GetUserFeedbackProvider");let{client:U,defaultFlowContainerState:p,registerDefaultFlowContainerConsumer:A,setDefaultFlowContainer:P}=G;O(()=>A(),[A]);let R=_((F)=>{P(F)},[P]),v=_(()=>U.close(),[U]),b=_((F)=>{if(F)return Promise.resolve();return v()},[v]);return{isOpen:p.isOpen,isLoading:p.isLoading,shouldRenderContainer:p.shouldRenderContainer,width:p.width,height:p.height,setOpen:b,containerRef:R}}function j(){let G=q(T);if(!G)throw Error("useGetUserFeedback must be used within a GetUserFeedbackProvider");return G.client}var H="0.1.0".trim(),D=H.length>0?H:"0.0.0-local";export{j as useGetUserFeedback,Z as useFlowContainer,Y as useFlow,$ as useDefaultFlowContainer,D as REACT_SDK_VERSION,X as GetUserFeedbackProvider};
+
+//# debugId=F70E7BF3F345A4F164756E2164756E21
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": ["../src/client.tsx", "../src/version.ts"],
+  "sourcesContent": [
+    "\"use client\";\n\nimport {\n\ttype Client,\n\ttype ClientOptions,\n\tcreateClient,\n\ttype FlowState,\n} from \"@getuserfeedback/sdk\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\n/**\n * Options for useFlow().\n */\nexport interface UseFlowOptions {\n\t/** The flow/survey ID to control. */\n\tflowId: string;\n\t/** Prefetch the flow resources on mount so it opens faster. Default `false`. */\n\tprefetchOnMount?: boolean;\n}\n\n/**\n * Return value for useFlow(): state and callbacks to show the default floating flow.\n */\nexport interface UseFlowReturn {\n\t/** True when the flow is visible. */\n\tisOpen: boolean;\n\t/** True when the flow is loading. */\n\tisLoading: boolean;\n\t/** Open the flow. */\n\topen: () => Promise<void>;\n\t/** Close the flow. */\n\tclose: () => Promise<void>;\n\t/** Prerendering warms up the flow for instant display later. */\n\tprerender: () => Promise<void>;\n\t/** Flow width in pixels (when known). */\n\twidth?: number;\n\t/** Flow height in pixels (when known). */\n\theight?: number;\n}\n\n/**\n * Return value for useFlowContainer(): state and callbacks for host-managed container flows.\n */\nexport interface UseFlowContainerReturn {\n\t/** True when the flow is visible. */\n\tisOpen: boolean;\n\t/** True when the flow is loading. */\n\tisLoading: boolean;\n\t/** True when your host UI should render the custom container element. */\n\tshouldRenderContainer: boolean;\n\t/** Open the flow when `true`, close when `false`. */\n\tsetOpen: (next: boolean) => Promise<void>;\n\t/** Prerendering warms up the flow for instant display later. */\n\tprerender: () => Promise<void>;\n\t/** Ref callback: attach this to the container element where the flow should render. */\n\tcontainerRef: (element: HTMLDivElement | null) => void;\n\t/** Flow width in pixels (when known). */\n\twidth?: number;\n\t/** Flow height in pixels (when known). */\n\theight?: number;\n}\n\n/**\n * Return value for useDefaultFlowContainer(): container ref and aggregate flow state\n * for all flows in the same provider subtree (including targeting-engine opens).\n */\nexport interface UseDefaultFlowContainerReturn {\n\t/** True when any flow is visible. */\n\tisOpen: boolean;\n\t/** True when any flow is loading. */\n\tisLoading: boolean;\n\t/** True when your host UI should render the default flow container. */\n\tshouldRenderContainer: boolean;\n\t/** Active flow width in pixels (when known). */\n\twidth?: number;\n\t/** Active flow height in pixels (when known). */\n\theight?: number;\n\t/** Close currently displayed flows when `false`; opening is flow-driven. */\n\tsetOpen: (next: boolean) => Promise<void>;\n\t/** Ref callback for the default flow container element. */\n\tcontainerRef: (element: HTMLDivElement | null) => void;\n}\n\ntype InstanceFlowRenderState = {\n\tisOpen: boolean;\n\tisLoading: boolean;\n\twidth?: number;\n\theight?: number;\n};\n\ntype DefaultFlowContainerState = {\n\tisOpen: boolean;\n\tisLoading: boolean;\n\tshouldRenderContainer: boolean;\n\twidth?: number;\n\theight?: number;\n};\n\nconst DEFAULT_FLOW_CONTAINER_STATE: DefaultFlowContainerState = {\n\tisOpen: false,\n\tisLoading: false,\n\tshouldRenderContainer: false,\n\twidth: undefined,\n\theight: undefined,\n};\n\ntype GetUserFeedbackContextValue = {\n\tclient: Client;\n\tapiKey: string;\n\tsetDefaultFlowContainer: (element: HTMLElement | null) => void;\n\tregisterDefaultFlowContainerConsumer: () => () => void;\n\tdefaultFlowContainerState: DefaultFlowContainerState;\n};\n\nconst GetUserFeedbackContext =\n\tcreateContext<GetUserFeedbackContextValue | null>(null);\n\nexport interface GetUserFeedbackProviderProps {\n\t/** Application subtree that can use getuserfeedback hooks. */\n\tchildren: ReactNode;\n\t/** Core SDK client options used to create/reuse the underlying client. */\n\tclientOptions: ClientOptions;\n}\n\n/**\n * Provider for getuserfeedback React hooks.\n * Wrap your app (or a subtree) so `useFlow`, `useFlowContainer`,\n * `useDefaultFlowContainer`, and `useGetUserFeedback` can access a client\n * created from `clientOptions`.\n *\n * If your app uses `useDefaultFlowContainer()`, all flows in this subtree\n * (including targeting-engine opens) target that container.\n * If the container ref is not mounted yet, loader keeps flows parked until it is.\n *\n * @example Basic usage\n * ```tsx\n * function App() {\n *   return (\n *     <GetUserFeedbackProvider clientOptions={{ apiKey: \"YOUR_API_KEY\" }}>\n *       <Routes />\n *     </GetUserFeedbackProvider>\n *   );\n * }\n * ```\n *\n * @example Display *any* flow in your own dialog (a shadcn/ui dialog in this example):\n * ```tsx\n * function DefaultFlowContainer() {\n *   const { containerRef, shouldRenderContainer, width, height, setOpen } = useDefaultFlowContainer();\n *\n *   return (\n *     <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>\n *       <DialogContent ref={containerRef} style={{ width, height }} />\n *     </Dialog>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <GetUserFeedbackProvider clientOptions={{ apiKey: \"YOUR_API_KEY\" }}>\n *       <AppRoutes />\n *       <DefaultFlowContainer /> // Flows will be triggered by the targeting engine and displayed in your own dialog\n *     </GetUserFeedbackProvider>\n *   );\n * }\n * ```\n */\nexport function GetUserFeedbackProvider({\n\tchildren,\n\tclientOptions,\n}: GetUserFeedbackProviderProps): ReactElement {\n\tconst client = createClient(clientOptions);\n\tconst defaultFlowContainerRef = useRef<HTMLElement | null>(null);\n\tconst defaultFlowContainerConsumerCountRef = useRef(0);\n\tconst [instanceFlowState, setInstanceFlowState] =\n\t\tuseState<InstanceFlowRenderState>(() => ({\n\t\t\t...client.getFlowState(),\n\t\t}));\n\n\tconst setDefaultFlowContainer = useCallback(\n\t\t(element: HTMLElement | null) => {\n\t\t\tdefaultFlowContainerRef.current = element;\n\t\t\tif (defaultFlowContainerConsumerCountRef.current === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tclient.setDefaultContainerPolicy({\n\t\t\t\tkind: \"hostContainer\",\n\t\t\t\thost: element,\n\t\t\t\tsharing: \"perFlowRun\",\n\t\t\t});\n\t\t},\n\t\t[client],\n\t);\n\n\tconst registerDefaultFlowContainerConsumer = useCallback(() => {\n\t\tdefaultFlowContainerConsumerCountRef.current += 1;\n\t\tif (defaultFlowContainerConsumerCountRef.current === 1) {\n\t\t\tclient.setDefaultContainerPolicy({\n\t\t\t\tkind: \"hostContainer\",\n\t\t\t\thost: defaultFlowContainerRef.current,\n\t\t\t\tsharing: \"perFlowRun\",\n\t\t\t});\n\t\t}\n\t\treturn () => {\n\t\t\tdefaultFlowContainerConsumerCountRef.current = Math.max(\n\t\t\t\t0,\n\t\t\t\tdefaultFlowContainerConsumerCountRef.current - 1,\n\t\t\t);\n\t\t\tif (defaultFlowContainerConsumerCountRef.current === 0) {\n\t\t\t\tclient.setDefaultContainerPolicy({ kind: \"floating\" });\n\t\t\t}\n\t\t};\n\t}, [client]);\n\n\tuseEffect(\n\t\t() =>\n\t\t\tclient.subscribeFlowState(\n\t\t\t\t(state) => {\n\t\t\t\t\tsetInstanceFlowState({\n\t\t\t\t\t\tisOpen: state.isOpen,\n\t\t\t\t\t\tisLoading: state.isLoading,\n\t\t\t\t\t\twidth: state.width,\n\t\t\t\t\t\theight: state.height,\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\temitInitial: true,\n\t\t\t\t},\n\t\t\t),\n\t\t[client],\n\t);\n\n\tconst defaultFlowContainerState = useMemo<DefaultFlowContainerState>(() => {\n\t\tif (!instanceFlowState.isOpen && !instanceFlowState.isLoading) {\n\t\t\treturn DEFAULT_FLOW_CONTAINER_STATE;\n\t\t}\n\t\treturn {\n\t\t\tisOpen: instanceFlowState.isOpen,\n\t\t\tisLoading: instanceFlowState.isLoading,\n\t\t\tshouldRenderContainer: true,\n\t\t\twidth: instanceFlowState.width,\n\t\t\theight: instanceFlowState.height,\n\t\t};\n\t}, [instanceFlowState]);\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tclient,\n\t\t\tapiKey: clientOptions.apiKey,\n\t\t\tsetDefaultFlowContainer,\n\t\t\tregisterDefaultFlowContainerConsumer,\n\t\t\tdefaultFlowContainerState,\n\t\t}),\n\t\t[\n\t\t\tclient,\n\t\t\tclientOptions.apiKey,\n\t\t\tdefaultFlowContainerState,\n\t\t\tregisterDefaultFlowContainerConsumer,\n\t\t\tsetDefaultFlowContainer,\n\t\t],\n\t);\n\n\treturn (\n\t\t<GetUserFeedbackContext.Provider value={contextValue}>\n\t\t\t{children}\n\t\t</GetUserFeedbackContext.Provider>\n\t);\n}\n\ntype UseFlowControllerOptions = {\n\tflow: UseFlowOptions;\n\tmode: \"default\" | \"container\";\n};\n\ntype UseFlowControllerReturn = {\n\tisOpen: boolean;\n\tisLoading: boolean;\n\twidth?: number;\n\theight?: number;\n\tshouldRenderContainer: boolean;\n\tsetOpen: (next: boolean) => Promise<void>;\n\topen: () => Promise<void>;\n\tclose: () => Promise<void>;\n\tprerender: () => Promise<void>;\n\tcontainerRef: (element: HTMLDivElement | null) => void;\n};\n\nconst useFlowController = (\n\toptions: UseFlowControllerOptions,\n): UseFlowControllerReturn => {\n\tconst ctx = useContext(GetUserFeedbackContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useFlow must be used within a GetUserFeedbackProvider\");\n\t}\n\tconst { client } = ctx;\n\tconst { flowId, prefetchOnMount = false } = options.flow;\n\tconst flowRun = useMemo(() => client.flow(flowId), [client, flowId]);\n\tconst requiresContainer = options.mode === \"container\";\n\n\t/** Flow state from loader events; open/loading + dimensions. */\n\tconst [flowState, setFlowState] = useState<FlowState>(() =>\n\t\tflowRun.getFlowState(),\n\t);\n\n\tconst open = useCallback((): Promise<void> => {\n\t\treturn flowRun.open(\n\t\t\trequiresContainer ? { containerRequirement: \"hostOnly\" } : undefined,\n\t\t);\n\t}, [flowRun, requiresContainer]);\n\n\tconst close = useCallback((): Promise<void> => flowRun.close(), [flowRun]);\n\n\tconst setOpen = useCallback(\n\t\t(next: boolean): Promise<void> => (next ? open() : close()),\n\t\t[close, open],\n\t);\n\n\tconst containerRef = useCallback(\n\t\t(element: HTMLDivElement | null): void => {\n\t\t\tif (!requiresContainer) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tflowRun.setContainer(element);\n\t\t},\n\t\t[flowRun, requiresContainer],\n\t);\n\n\tconst shouldRenderContainer =\n\t\trequiresContainer && (flowState.isLoading || flowState.isOpen);\n\n\tuseEffect(\n\t\t() =>\n\t\t\tflowRun.subscribeFlowState(\n\t\t\t\t(state) =>\n\t\t\t\t\tsetFlowState({\n\t\t\t\t\t\tisOpen: state.isOpen,\n\t\t\t\t\t\tisLoading: state.isLoading,\n\t\t\t\t\t\twidth: state.width,\n\t\t\t\t\t\theight: state.height,\n\t\t\t\t\t}),\n\t\t\t\t{\n\t\t\t\t\temitInitial: false,\n\t\t\t\t},\n\t\t\t),\n\t\t[flowRun],\n\t);\n\n\tuseEffect(() => {\n\t\tif (!prefetchOnMount) {\n\t\t\treturn;\n\t\t}\n\t\tflowRun.prefetch();\n\t}, [flowRun, prefetchOnMount]);\n\n\treturn {\n\t\tisOpen: flowState.isOpen,\n\t\tisLoading: flowState.isLoading,\n\t\twidth: flowState.width,\n\t\theight: flowState.height,\n\t\tshouldRenderContainer,\n\t\tsetOpen,\n\t\topen,\n\t\tclose,\n\t\tprerender: () => flowRun.prerender(),\n\t\tcontainerRef,\n\t};\n};\n\n/**\n * @name useFlow\n * @description Imperatively display a flow.\n * @example Basic usage\n * ```tsx\n * function FeedbackButton() {\n *   const { open, isLoading } = useFlow({ flowId: \"sur_123\" });\n *   return <Button onClick={() => open()} disabled={isLoading}>Feedback</Button>;\n * }\n * ```\n */\nexport function useFlow(flow: UseFlowOptions): UseFlowReturn {\n\tconst controller = useFlowController({ flow, mode: \"default\" });\n\treturn {\n\t\tisOpen: controller.isOpen,\n\t\tisLoading: controller.isLoading,\n\t\twidth: controller.width,\n\t\theight: controller.height,\n\t\topen: controller.open,\n\t\tclose: controller.close,\n\t\tprerender: controller.prerender,\n\t};\n}\n\n/**\n * @name useFlowContainer\n * @description Imperatively display a flow in your own container element.\n * @example In a custom dialog\n * ```tsx\n * function FlowContainerDialog() {\n *   const { containerRef, shouldRenderContainer, width, height, setOpen, isLoading } =\n *     useFlowContainer({ flowId: \"sur_123\" });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setOpen(true)} loading={isLoading}>\n *         Feedback\n *       </Button>\n *       <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>\n *         <DialogContent ref={containerRef} style={{ width, height }} />\n *       </Dialog>\n *     </>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <GetUserFeedbackProvider clientOptions={{ apiKey: \"YOUR_API_KEY\" }}>\n *       <FlowContainerDialog />\n *     </GetUserFeedbackProvider>\n *   );\n * }\n * ```\n */\nexport function useFlowContainer(flow: UseFlowOptions): UseFlowContainerReturn {\n\tconst controller = useFlowController({ flow, mode: \"container\" });\n\treturn {\n\t\tisOpen: controller.isOpen,\n\t\tisLoading: controller.isLoading,\n\t\twidth: controller.width,\n\t\theight: controller.height,\n\t\tshouldRenderContainer: controller.shouldRenderContainer,\n\t\tsetOpen: controller.setOpen,\n\t\tprerender: controller.prerender,\n\t\tcontainerRef: controller.containerRef,\n\t};\n}\n\n/**\n * @name useDefaultFlowContainer\n * @description Register and control a default flow container for all flows in this provider subtree.\n * @example Display any flow in your own dialog\n * ```tsx\n * function DefaultFlowContainer() {\n *   const { containerRef, shouldRenderContainer, width, height, setOpen } = useDefaultFlowContainer();\n *   return (\n *     <Dialog open={shouldRenderContainer} onOpenChange={setOpen}>\n *       <DialogContent ref={containerRef} style={{ width, height }} />\n *     </Dialog>\n *   );\n * }\n *\n * function App() {\n *   return (\n *     <GetUserFeedbackProvider clientOptions={{ apiKey: \"YOUR_API_KEY\" }}>\n *       <AppRoutes />\n *       <DefaultFlowContainer />\n *     </GetUserFeedbackProvider>\n *   );\n * }\n * ```\n */\nexport function useDefaultFlowContainer(): UseDefaultFlowContainerReturn {\n\tconst ctx = useContext(GetUserFeedbackContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useDefaultFlowContainer must be used within a GetUserFeedbackProvider\",\n\t\t);\n\t}\n\n\tconst {\n\t\tclient,\n\t\tdefaultFlowContainerState,\n\t\tregisterDefaultFlowContainerConsumer,\n\t\tsetDefaultFlowContainer,\n\t} = ctx;\n\n\tuseEffect(\n\t\t() => registerDefaultFlowContainerConsumer(),\n\t\t[registerDefaultFlowContainerConsumer],\n\t);\n\n\tconst containerRef = useCallback(\n\t\t(element: HTMLDivElement | null): void => {\n\t\t\tsetDefaultFlowContainer(element);\n\t\t},\n\t\t[setDefaultFlowContainer],\n\t);\n\n\tconst close = useCallback((): Promise<void> => client.close(), [client]);\n\n\tconst setOpen = useCallback(\n\t\t(next: boolean): Promise<void> => {\n\t\t\tif (next) {\n\t\t\t\treturn Promise.resolve();\n\t\t\t}\n\t\t\treturn close();\n\t\t},\n\t\t[close],\n\t);\n\n\treturn {\n\t\tisOpen: defaultFlowContainerState.isOpen,\n\t\tisLoading: defaultFlowContainerState.isLoading,\n\t\tshouldRenderContainer: defaultFlowContainerState.shouldRenderContainer,\n\t\twidth: defaultFlowContainerState.width,\n\t\theight: defaultFlowContainerState.height,\n\t\tsetOpen,\n\t\tcontainerRef,\n\t};\n}\n\n/**\n * Hook for accessing the getuserfeedback client instance.\n *\n * @example Basic usage\n * ```tsx\n * const client = useGetUserFeedback();\n *\n * // on login\n * client.identify('user-123', { email: 'user@example.com' });\n *\n * // on logout\n * client.reset();\n * ```\n *\n * @example Override color scheme\n * ```tsx\n * const client = useGetUserFeedback();\n * await client.configure({ colorScheme: \"dark\" });\n * ```\n */\nexport function useGetUserFeedback(): Client {\n\tconst ctx = useContext(GetUserFeedbackContext);\n\tif (!ctx) {\n\t\tthrow new Error(\n\t\t\t\"useGetUserFeedback must be used within a GetUserFeedbackProvider\",\n\t\t);\n\t}\n\treturn ctx.client;\n}\n",
+    "declare const __GX_REACT_SDK_VERSION__: string | undefined;\n\nconst reactSdkVersion =\n\ttypeof __GX_REACT_SDK_VERSION__ === \"string\"\n\t\t? __GX_REACT_SDK_VERSION__.trim()\n\t\t: \"\";\n\n// Build scripts inject __GX_REACT_SDK_VERSION__ for published artifacts.\n// Source-linked workspace usage may not inject defines, so keep a safe fallback.\nexport const REACT_SDK_VERSION =\n\treactSdkVersion.length > 0 ? reactSdkVersion : \"0.0.0-local\";\n"
+  ],
+  "mappings": ";AAEA,uBAGC,6BAID,wBACC,iBACA,gBACA,eACA,aACA,YACA,cACA,sDA2FD,IAAM,EAA0D,CAC/D,OAAQ,GACR,UAAW,GACX,sBAAuB,GACvB,MAAO,OACP,OAAQ,MACT,EAUM,EACL,EAAkD,IAAI,EAoDhD,SAAS,CAAuB,EACtC,WACA,iBAC8C,CAC9C,IAAM,EAAS,EAAa,CAAa,EACnC,EAA0B,EAA2B,IAAI,EACzD,EAAuC,EAAO,CAAC,GAC9C,EAAmB,GACzB,EAAkC,KAAO,IACrC,EAAO,aAAa,CACxB,EAAE,EAEG,EAA0B,EAC/B,CAAC,IAAgC,CAEhC,GADA,EAAwB,QAAU,EAC9B,EAAqC,UAAY,EACpD,OAED,EAAO,0BAA0B,CAChC,KAAM,gBACN,KAAM,EACN,QAAS,YACV,CAAC,GAEF,CAAC,CAAM,CACR,EAEM,EAAuC,EAAY,IAAM,CAE9D,GADA,EAAqC,SAAW,EAC5C,EAAqC,UAAY,EACpD,EAAO,0BAA0B,CAChC,KAAM,gBACN,KAAM,EAAwB,QAC9B,QAAS,YACV,CAAC,EAEF,MAAO,IAAM,CAKZ,GAJA,EAAqC,QAAU,KAAK,IACnD,EACA,EAAqC,QAAU,CAChD,EACI,EAAqC,UAAY,EACpD,EAAO,0BAA0B,CAAE,KAAM,UAAW,CAAC,IAGrD,CAAC,CAAM,CAAC,EAEX,EACC,IACC,EAAO,mBACN,CAAC,IAAU,CACV,EAAqB,CACpB,OAAQ,EAAM,OACd,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,OAAQ,EAAM,MACf,CAAC,GAEF,CACC,YAAa,EACd,CACD,EACD,CAAC,CAAM,CACR,EAEA,IAAM,EAA4B,EAAmC,IAAM,CAC1E,GAAI,CAAC,EAAkB,QAAU,CAAC,EAAkB,UACnD,OAAO,EAER,MAAO,CACN,OAAQ,EAAkB,OAC1B,UAAW,EAAkB,UAC7B,sBAAuB,GACvB,MAAO,EAAkB,MACzB,OAAQ,EAAkB,MAC3B,GACE,CAAC,CAAiB,CAAC,EAEhB,EAAe,EACpB,KAAO,CACN,SACA,OAAQ,EAAc,OACtB,0BACA,uCACA,2BACD,GACA,CACC,EACA,EAAc,OACd,EACA,EACA,CACD,CACD,EAEA,OACC,EAEE,EAAuB,SAFzB,CAAiC,MAAO,EAAxC,SACE,EACA,EAsBJ,IAAM,EAAoB,CACzB,IAC6B,CAC7B,IAAM,EAAM,EAAW,CAAsB,EAC7C,GAAI,CAAC,EACJ,MAAU,MAAM,uDAAuD,EAExE,IAAQ,UAAW,GACX,SAAQ,kBAAkB,IAAU,EAAQ,KAC9C,EAAU,EAAQ,IAAM,EAAO,KAAK,CAAM,EAAG,CAAC,EAAQ,CAAM,CAAC,EAC7D,EAAoB,EAAQ,OAAS,aAGpC,EAAW,GAAgB,EAAoB,IACrD,EAAQ,aAAa,CACtB,EAEM,EAAO,EAAY,IAAqB,CAC7C,OAAO,EAAQ,KACd,EAAoB,CAAE,qBAAsB,UAAW,EAAI,MAC5D,GACE,CAAC,EAAS,CAAiB,CAAC,EAEzB,EAAQ,EAAY,IAAqB,EAAQ,MAAM,EAAG,CAAC,CAAO,CAAC,EAEnE,EAAU,EACf,CAAC,IAAkC,EAAO,EAAK,EAAI,EAAM,EACzD,CAAC,EAAO,CAAI,CACb,EAEM,EAAe,EACpB,CAAC,IAAyC,CACzC,GAAI,CAAC,EACJ,OAED,EAAQ,aAAa,CAAO,GAE7B,CAAC,EAAS,CAAiB,CAC5B,EAEM,EACL,IAAsB,EAAU,WAAa,EAAU,QA0BxD,OAxBA,EACC,IACC,EAAQ,mBACP,CAAC,IACA,EAAa,CACZ,OAAQ,EAAM,OACd,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,OAAQ,EAAM,MACf,CAAC,EACF,CACC,YAAa,EACd,CACD,EACD,CAAC,CAAO,CACT,EAEA,EAAU,IAAM,CACf,GAAI,CAAC,EACJ,OAED,EAAQ,SAAS,GACf,CAAC,EAAS,CAAe,CAAC,EAEtB,CACN,OAAQ,EAAU,OAClB,UAAW,EAAU,UACrB,MAAO,EAAU,MACjB,OAAQ,EAAU,OAClB,wBACA,UACA,OACA,QACA,UAAW,IAAM,EAAQ,UAAU,EACnC,cACD,GAcM,SAAS,CAAO,CAAC,EAAqC,CAC5D,IAAM,EAAa,EAAkB,CAAE,OAAM,KAAM,SAAU,CAAC,EAC9D,MAAO,CACN,OAAQ,EAAW,OACnB,UAAW,EAAW,UACtB,MAAO,EAAW,MAClB,OAAQ,EAAW,OACnB,KAAM,EAAW,KACjB,MAAO,EAAW,MAClB,UAAW,EAAW,SACvB,EAiCM,SAAS,CAAgB,CAAC,EAA8C,CAC9E,IAAM,EAAa,EAAkB,CAAE,OAAM,KAAM,WAAY,CAAC,EAChE,MAAO,CACN,OAAQ,EAAW,OACnB,UAAW,EAAW,UACtB,MAAO,EAAW,MAClB,OAAQ,EAAW,OACnB,sBAAuB,EAAW,sBAClC,QAAS,EAAW,QACpB,UAAW,EAAW,UACtB,aAAc,EAAW,YAC1B,EA2BM,SAAS,CAAuB,EAAkC,CACxE,IAAM,EAAM,EAAW,CAAsB,EAC7C,GAAI,CAAC,EACJ,MAAU,MACT,uEACD,EAGD,IACC,SACA,4BACA,uCACA,2BACG,EAEJ,EACC,IAAM,EAAqC,EAC3C,CAAC,CAAoC,CACtC,EAEA,IAAM,EAAe,EACpB,CAAC,IAAyC,CACzC,EAAwB,CAAO,GAEhC,CAAC,CAAuB,CACzB,EAEM,EAAQ,EAAY,IAAqB,EAAO,MAAM,EAAG,CAAC,CAAM,CAAC,EAEjE,EAAU,EACf,CAAC,IAAiC,CACjC,GAAI,EACH,OAAO,QAAQ,QAAQ,EAExB,OAAO,EAAM,GAEd,CAAC,CAAK,CACP,EAEA,MAAO,CACN,OAAQ,EAA0B,OAClC,UAAW,EAA0B,UACrC,sBAAuB,EAA0B,sBACjD,MAAO,EAA0B,MACjC,OAAQ,EAA0B,OAClC,UACA,cACD,EAuBM,SAAS,CAAkB,EAAW,CAC5C,IAAM,EAAM,EAAW,CAAsB,EAC7C,GAAI,CAAC,EACJ,MAAU,MACT,kEACD,EAED,OAAO,EAAI,OChiBZ,IAAM,EAEF,QAAyB,KAAK,EAKrB,EACZ,EAAgB,OAAS,EAAI,EAAkB",
+  "debugId": "F70E7BF3F345A4F164756E2164756E21",
+  "names": []
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@getuserfeedback/react",
+  "version": "0.1.0",
+  "description": "getuserfeedback React SDK",
+  "keywords": [
+    "getuserfeedback",
+    "feedback",
+    "widget",
+    "react"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "node scripts/prepack.cjs",
+    "postpack": "node scripts/postpack.cjs",
+    "build": "bun x rimraf dist tsconfig.tsbuildinfo && bun run scripts/build.ts && bun x rollup -c rollup.dts.config.mjs",
+    "typecheck": "tsc -b tsconfig.json",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@getuserfeedback/sdk": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "rimraf": "^6.0.0",
+    "rollup": "^4.57.1",
+    "rollup-plugin-dts": "^6.3.0"
+  }
+}