@kitbase/analytics-react 0.1.6

package/README.md

@@ -0,0 +1,179 @@
+# @kitbase/analytics-react
+
+React integration for the Kitbase Analytics SDK. Provides hooks and context provider for easy integration with React applications.
+
+## Installation
+
+```bash
+npm install @kitbase/analytics-react
+# or
+pnpm add @kitbase/analytics-react
+# or
+yarn add @kitbase/analytics-react
+```
+
+## Quick Start
+
+```tsx
+import { KitbaseAnalyticsProvider, useTrack } from '@kitbase/analytics-react';
+
+function App() {
+  return (
+    <KitbaseAnalyticsProvider config={{ sdkKey: 'your-api-key' }}>
+      <MyComponent />
+    </KitbaseAnalyticsProvider>
+  );
+}
+
+function MyComponent() {
+  const track = useTrack();
+
+  return (
+    <button onClick={() => track({ channel: 'ui', event: 'Button Clicked' })}>
+      Click me
+    </button>
+  );
+}
+```
+
+## API Reference
+
+### Provider
+
+#### `KitbaseAnalyticsProvider`
+
+Wrap your app with this provider to initialize Kitbase.
+
+```tsx
+<KitbaseAnalyticsProvider
+  config={{
+    sdkKey: 'your-api-key',
+    debug: true,
+    analytics: { autoTrackPageViews: true },
+  }}
+>
+  <App />
+</KitbaseAnalyticsProvider>
+```
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useKitbaseAnalytics()` | Access the KitbaseAnalytics instance directly |
+| `useTrack()` | Track custom events |
+| `useIdentify()` | Identify users |
+| `usePageView()` | Track page views manually |
+| `useAutoPageView(options?, deps?)` | Auto-track page views on mount/deps change |
+| `useRevenue()` | Track revenue events |
+| `useTimeEvent(eventName)` | Track event duration |
+| `useSuperProperties(props, deps?)` | Register super properties |
+| `useUserId()` | Get the identified user ID |
+| `useReset()` | Reset user identity |
+
+### Direct Instance Access
+
+For features not covered by the convenience hooks (plugins, debug mode, etc.), use `useKitbaseAnalytics()` to get the raw `KitbaseAnalytics` instance:
+
+```tsx
+import { useKitbaseAnalytics, WebVitalsPlugin } from '@kitbase/analytics-react';
+
+function PluginLoader() {
+  const kitbase = useKitbaseAnalytics();
+
+  useEffect(() => {
+    kitbase.use(new WebVitalsPlugin());
+    console.log('Active plugins:', kitbase.getPlugins());
+  }, [kitbase]);
+
+  return null;
+}
+```
+
+### Re-exported Types
+
+All types, errors, and utilities from `@kitbase/analytics` are re-exported, so you can import everything from a single package:
+
+```tsx
+import {
+  type KitbaseConfig,
+  type TrackOptions,
+  type KitbasePlugin,
+  KitbaseError,
+  ValidationError,
+} from '@kitbase/analytics-react';
+```
+
+### Examples
+
+#### Track Events
+
+```tsx
+function Button() {
+  const track = useTrack();
+
+  return (
+    <button onClick={() => track({
+      channel: 'ui',
+      event: 'Button Clicked',
+      tags: { button_id: 'cta' }
+    })}>
+      Click me
+    </button>
+  );
+}
+```
+
+#### Identify Users
+
+```tsx
+function LoginForm() {
+  const identify = useIdentify();
+
+  const handleLogin = async (user: User) => {
+    await identify({
+      userId: user.id,
+      traits: { email: user.email, plan: user.plan }
+    });
+  };
+
+  return <form>...</form>;
+}
+```
+
+#### Auto Track Page Views
+
+```tsx
+function ProductPage({ productId }: { productId: string }) {
+  useAutoPageView(
+    { tags: { product_id: productId } },
+    [productId]
+  );
+
+  return <div>Product {productId}</div>;
+}
+```
+
+#### Track Duration
+
+```tsx
+function VideoPlayer() {
+  const { start } = useTimeEvent('Video Watched');
+  const track = useTrack();
+
+  return (
+    <video
+      onPlay={start}
+      onEnded={() => track({
+        channel: 'engagement',
+        event: 'Video Watched',
+        // $duration automatically included
+      })}
+    />
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,145 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  KitbaseAnalyticsProvider: () => KitbaseAnalyticsProvider,
+  useAutoPageView: () => useAutoPageView,
+  useIdentify: () => useIdentify,
+  useKitbaseAnalytics: () => useKitbaseAnalytics,
+  usePageView: () => usePageView,
+  useReset: () => useReset,
+  useRevenue: () => useRevenue,
+  useSuperProperties: () => useSuperProperties,
+  useTimeEvent: () => useTimeEvent,
+  useTrack: () => useTrack,
+  useUserId: () => useUserId
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_analytics = require("@kitbase/analytics");
+__reExport(index_exports, require("@kitbase/analytics"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var KitbaseAnalyticsContext = (0, import_react.createContext)(null);
+function KitbaseAnalyticsProvider({ config, children }) {
+  const kitbaseRef = (0, import_react.useRef)(null);
+  if (!kitbaseRef.current) {
+    kitbaseRef.current = new import_analytics.KitbaseAnalytics(config);
+  }
+  (0, import_react.useEffect)(() => {
+    return () => {
+      kitbaseRef.current?.shutdown();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KitbaseAnalyticsContext.Provider, { value: kitbaseRef.current, children });
+}
+function useKitbaseAnalytics() {
+  const context = (0, import_react.useContext)(KitbaseAnalyticsContext);
+  if (!context) {
+    throw new Error("useKitbaseAnalytics must be used within a KitbaseAnalyticsProvider");
+  }
+  return context;
+}
+function useTrack() {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useCallback)(
+    (options) => {
+      return kitbase.track(options);
+    },
+    [kitbase]
+  );
+}
+function useIdentify() {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useCallback)(
+    (options) => {
+      return kitbase.identify(options);
+    },
+    [kitbase]
+  );
+}
+function usePageView() {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useCallback)(
+    (options) => {
+      return kitbase.trackPageView(options);
+    },
+    [kitbase]
+  );
+}
+function useAutoPageView(options, deps = []) {
+  const kitbase = useKitbaseAnalytics();
+  (0, import_react.useEffect)(() => {
+    kitbase.trackPageView(options);
+  }, deps);
+}
+function useRevenue() {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useCallback)(
+    (options) => {
+      return kitbase.trackRevenue(options);
+    },
+    [kitbase]
+  );
+}
+function useTimeEvent(eventName) {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useMemo)(
+    () => ({
+      start: () => kitbase.timeEvent(eventName),
+      stop: () => kitbase.cancelTimeEvent(eventName),
+      getDuration: () => kitbase.getEventDuration(eventName)
+    }),
+    [kitbase, eventName]
+  );
+}
+function useSuperProperties(properties, deps = []) {
+  const kitbase = useKitbaseAnalytics();
+  (0, import_react.useEffect)(() => {
+    kitbase.register(properties);
+  }, deps);
+}
+function useUserId() {
+  const kitbase = useKitbaseAnalytics();
+  return kitbase.getUserId();
+}
+function useReset() {
+  const kitbase = useKitbaseAnalytics();
+  return (0, import_react.useCallback)(() => {
+    kitbase.reset();
+  }, [kitbase]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KitbaseAnalyticsProvider,
+  useAutoPageView,
+  useIdentify,
+  useKitbaseAnalytics,
+  usePageView,
+  useReset,
+  useRevenue,
+  useSuperProperties,
+  useTimeEvent,
+  useTrack,
+  useUserId,
+  ...require("@kitbase/analytics")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * React integration for Kitbase Analytics SDK\n *\n * Provides React hooks and context provider for easy integration\n * with React applications.\n *\n * @example\n * ```tsx\n * import { KitbaseAnalyticsProvider, useKitbaseAnalytics, useTrack } from '@kitbase/analytics-react';\n *\n * function App() {\n *   return (\n *     <KitbaseAnalyticsProvider config={{ sdkKey: 'your-api-key' }}>\n *       <MyComponent />\n *     </KitbaseAnalyticsProvider>\n *   );\n * }\n *\n * function MyComponent() {\n *   const track = useTrack();\n *\n *   return (\n *     <button onClick={() => track({ channel: 'ui', event: 'Button Clicked' })}>\n *       Click me\n *     </button>\n *   );\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  type ReactNode,\n} from 'react';\nimport {\n  KitbaseAnalytics,\n  type KitbaseConfig,\n  type TrackOptions,\n  type TrackResponse,\n  type PageViewOptions,\n  type RevenueOptions,\n  type IdentifyOptions,\n  type Tags,\n} from '@kitbase/analytics';\n\n// Re-export everything from core\nexport * from '@kitbase/analytics';\n\n// ============================================================\n// Context\n// ============================================================\n\nconst KitbaseAnalyticsContext = createContext<KitbaseAnalytics | null>(null);\n\n/**\n * Props for the KitbaseAnalyticsProvider component\n */\nexport interface KitbaseAnalyticsProviderProps {\n  /**\n   * KitbaseAnalytics configuration options\n   */\n  config: KitbaseConfig;\n\n  /**\n   * React children to render\n   */\n  children: ReactNode;\n}\n\n/**\n * Provider component that initializes KitbaseAnalytics and makes it available\n * to all child components via React context.\n *\n * @example\n * ```tsx\n * import { KitbaseAnalyticsProvider } from '@kitbase/analytics-react';\n *\n * function App() {\n *   return (\n *     <KitbaseAnalyticsProvider\n *       config={{\n *         sdkKey: 'your-api-key',\n *         debug: true,\n *         analytics: { autoTrackPageViews: true },\n *       }}\n *     >\n *       <YourApp />\n *     </KitbaseAnalyticsProvider>\n *   );\n * }\n * ```\n */\nexport function KitbaseAnalyticsProvider({ config, children }: KitbaseAnalyticsProviderProps) {\n  const kitbaseRef = useRef<KitbaseAnalytics | null>(null);\n\n  // Initialize KitbaseAnalytics instance once\n  if (!kitbaseRef.current) {\n    kitbaseRef.current = new KitbaseAnalytics(config);\n  }\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      kitbaseRef.current?.shutdown();\n    };\n  }, []);\n\n  return (\n    <KitbaseAnalyticsContext.Provider value={kitbaseRef.current}>\n      {children}\n    </KitbaseAnalyticsContext.Provider>\n  );\n}\n\n// ============================================================\n// Hooks\n// ============================================================\n\n/**\n * Hook to access the KitbaseAnalytics instance directly.\n *\n * @returns The KitbaseAnalytics instance\n * @throws Error if used outside of KitbaseAnalyticsProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const kitbase = useKitbaseAnalytics();\n *\n *   useEffect(() => {\n *     kitbase.register({ page: 'home' });\n *   }, [kitbase]);\n *\n *   return <div>My Component</div>;\n * }\n * ```\n */\nexport function useKitbaseAnalytics(): KitbaseAnalytics {\n  const context = useContext(KitbaseAnalyticsContext);\n\n  if (!context) {\n    throw new Error('useKitbaseAnalytics must be used within a KitbaseAnalyticsProvider');\n  }\n\n  return context;\n}\n\n/**\n * Hook to get a memoized track function.\n *\n * @returns A function to track events\n *\n * @example\n * ```tsx\n * function Button() {\n *   const track = useTrack();\n *\n *   const handleClick = () => {\n *     track({\n *       channel: 'ui',\n *       event: 'Button Clicked',\n *       tags: { button_id: 'cta' },\n *     });\n *   };\n *\n *   return <button onClick={handleClick}>Click me</button>;\n * }\n * ```\n */\nexport function useTrack() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: TrackOptions): Promise<TrackResponse | void> => {\n      return kitbase.track(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to get a memoized identify function.\n *\n * @returns A function to identify users\n *\n * @example\n * ```tsx\n * function LoginForm() {\n *   const identify = useIdentify();\n *\n *   const handleLogin = async (userId: string, email: string) => {\n *     await identify({\n *       userId,\n *       traits: { email },\n *     });\n *   };\n *\n *   return <form>...</form>;\n * }\n * ```\n */\nexport function useIdentify() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: IdentifyOptions): Promise<void> => {\n      return kitbase.identify(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to get a memoized page view tracking function.\n *\n * @returns A function to track page views\n *\n * @example\n * ```tsx\n * function Page() {\n *   const trackPageView = usePageView();\n *\n *   useEffect(() => {\n *     trackPageView({ path: '/dashboard', title: 'Dashboard' });\n *   }, [trackPageView]);\n *\n *   return <div>Dashboard</div>;\n * }\n * ```\n */\nexport function usePageView() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options?: PageViewOptions): Promise<TrackResponse | void> => {\n      return kitbase.trackPageView(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to automatically track page views when the component mounts\n * or when dependencies change.\n *\n * @param options - Page view options (optional)\n * @param deps - Dependencies that trigger a new page view when changed\n *\n * @example\n * ```tsx\n * function ProductPage({ productId }: { productId: string }) {\n *   // Track page view on mount and when productId changes\n *   useAutoPageView(\n *     { tags: { product_id: productId } },\n *     [productId]\n *   );\n *\n *   return <div>Product {productId}</div>;\n * }\n * ```\n */\nexport function useAutoPageView(\n  options?: PageViewOptions,\n  deps: React.DependencyList = []\n) {\n  const kitbase = useKitbaseAnalytics();\n\n  useEffect(() => {\n    kitbase.trackPageView(options);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n\n/**\n * Hook to get a memoized revenue tracking function.\n *\n * @returns A function to track revenue events\n *\n * @example\n * ```tsx\n * function Checkout() {\n *   const trackRevenue = useRevenue();\n *\n *   const handlePurchase = async (amount: number) => {\n *     await trackRevenue({\n *       amount,\n *       currency: 'USD',\n *       tags: { product: 'premium' },\n *     });\n *   };\n *\n *   return <button onClick={() => handlePurchase(1999)}>Buy</button>;\n * }\n * ```\n */\nexport function useRevenue() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: RevenueOptions): Promise<TrackResponse | void> => {\n      return kitbase.trackRevenue(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to track event duration.\n *\n * @param eventName - The name of the event to time\n * @returns Object with start and stop functions\n *\n * @example\n * ```tsx\n * function VideoPlayer() {\n *   const { start, stop } = useTimeEvent('Video Watched');\n *   const track = useTrack();\n *\n *   const handlePlay = () => start();\n *   const handleEnd = async () => {\n *     await track({\n *       channel: 'engagement',\n *       event: 'Video Watched',\n *       tags: { video_id: '123' },\n *     });\n *     // $duration is automatically included\n *   };\n *\n *   return (\n *     <video onPlay={handlePlay} onEnded={handleEnd}>\n *       ...\n *     </video>\n *   );\n * }\n * ```\n */\nexport function useTimeEvent(eventName: string) {\n  const kitbase = useKitbaseAnalytics();\n\n  return useMemo(\n    () => ({\n      start: () => kitbase.timeEvent(eventName),\n      stop: () => kitbase.cancelTimeEvent(eventName),\n      getDuration: () => kitbase.getEventDuration(eventName),\n    }),\n    [kitbase, eventName]\n  );\n}\n\n/**\n * Hook to register super properties.\n *\n * @param properties - Properties to register\n * @param deps - Dependencies that trigger re-registration when changed\n *\n * @example\n * ```tsx\n * function App({ user }: { user: User }) {\n *   // Register user properties that will be included in all events\n *   useSuperProperties(\n *     { user_type: user.type, plan: user.plan },\n *     [user.type, user.plan]\n *   );\n *\n *   return <MainContent />;\n * }\n * ```\n */\nexport function useSuperProperties(\n  properties: Tags,\n  deps: React.DependencyList = []\n) {\n  const kitbase = useKitbaseAnalytics();\n\n  useEffect(() => {\n    kitbase.register(properties);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n\n/**\n * Hook to get the current user ID (set via identify).\n *\n * @returns The user ID or null\n *\n * @example\n * ```tsx\n * function UserBadge() {\n *   const userId = useUserId();\n *   if (!userId) return null;\n *   return <div>Logged in as: {userId}</div>;\n * }\n * ```\n */\nexport function useUserId(): string | null {\n  const kitbase = useKitbaseAnalytics();\n  return kitbase.getUserId();\n}\n\n/**\n * Hook to reset the user identity.\n *\n * @returns A function to reset the user\n *\n * @example\n * ```tsx\n * function LogoutButton() {\n *   const reset = useReset();\n *\n *   const handleLogout = () => {\n *     // Clear server session...\n *     reset();\n *   };\n *\n *   return <button onClick={handleLogout}>Logout</button>;\n * }\n * ```\n */\nexport function useReset() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(() => {\n    kitbase.reset();\n  }, [kitbase]);\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCA,mBAQO;AACP,uBASO;AAGP,0BAAc,+BArDd;AAmHI;AAxDJ,IAAM,8BAA0B,4BAAuC,IAAI;AAwCpE,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAkC;AAC5F,QAAM,iBAAa,qBAAgC,IAAI;AAGvD,MAAI,CAAC,WAAW,SAAS;AACvB,eAAW,UAAU,IAAI,kCAAiB,MAAM;AAAA,EAClD;AAGA,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,SAAS,SAAS;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,wBAAwB,UAAxB,EAAiC,OAAO,WAAW,SACjD,UACH;AAEJ;AAyBO,SAAS,sBAAwC;AACtD,QAAM,cAAU,yBAAW,uBAAuB;AAElD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oEAAoE;AAAA,EACtF;AAEA,SAAO;AACT;AAwBO,SAAS,WAAW;AACzB,QAAM,UAAU,oBAAoB;AAEpC,aAAO;AAAA,IACL,CAAC,YAAyD;AACxD,aAAO,QAAQ,MAAM,OAAO;AAAA,IAC9B;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAuBO,SAAS,cAAc;AAC5B,QAAM,UAAU,oBAAoB;AAEpC,aAAO;AAAA,IACL,CAAC,YAA4C;AAC3C,aAAO,QAAQ,SAAS,OAAO;AAAA,IACjC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAoBO,SAAS,cAAc;AAC5B,QAAM,UAAU,oBAAoB;AAEpC,aAAO;AAAA,IACL,CAAC,YAA6D;AAC5D,aAAO,QAAQ,cAAc,OAAO;AAAA,IACtC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAsBO,SAAS,gBACd,SACA,OAA6B,CAAC,GAC9B;AACA,QAAM,UAAU,oBAAoB;AAEpC,8BAAU,MAAM;AACd,YAAQ,cAAc,OAAO;AAAA,EAE/B,GAAG,IAAI;AACT;AAwBO,SAAS,aAAa;AAC3B,QAAM,UAAU,oBAAoB;AAEpC,aAAO;AAAA,IACL,CAAC,YAA2D;AAC1D,aAAO,QAAQ,aAAa,OAAO;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAgCO,SAAS,aAAa,WAAmB;AAC9C,QAAM,UAAU,oBAAoB;AAEpC,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO,MAAM,QAAQ,UAAU,SAAS;AAAA,MACxC,MAAM,MAAM,QAAQ,gBAAgB,SAAS;AAAA,MAC7C,aAAa,MAAM,QAAQ,iBAAiB,SAAS;AAAA,IACvD;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,EACrB;AACF;AAqBO,SAAS,mBACd,YACA,OAA6B,CAAC,GAC9B;AACA,QAAM,UAAU,oBAAoB;AAEpC,8BAAU,MAAM;AACd,YAAQ,SAAS,UAAU;AAAA,EAE7B,GAAG,IAAI;AACT;AAgBO,SAAS,YAA2B;AACzC,QAAM,UAAU,oBAAoB;AACpC,SAAO,QAAQ,UAAU;AAC3B;AAqBO,SAAS,WAAW;AACzB,QAAM,UAAU,oBAAoB;AAEpC,aAAO,0BAAY,MAAM;AACvB,YAAQ,MAAM;AAAA,EAChB,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,262 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { KitbaseConfig, KitbaseAnalytics, TrackOptions, TrackResponse, IdentifyOptions, PageViewOptions, RevenueOptions, Tags } from '@kitbase/analytics';
+export * from '@kitbase/analytics';
+
+/**
+ * Props for the KitbaseAnalyticsProvider component
+ */
+interface KitbaseAnalyticsProviderProps {
+    /**
+     * KitbaseAnalytics configuration options
+     */
+    config: KitbaseConfig;
+    /**
+     * React children to render
+     */
+    children: ReactNode;
+}
+/**
+ * Provider component that initializes KitbaseAnalytics and makes it available
+ * to all child components via React context.
+ *
+ * @example
+ * ```tsx
+ * import { KitbaseAnalyticsProvider } from '@kitbase/analytics-react';
+ *
+ * function App() {
+ *   return (
+ *     <KitbaseAnalyticsProvider
+ *       config={{
+ *         sdkKey: 'your-api-key',
+ *         debug: true,
+ *         analytics: { autoTrackPageViews: true },
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </KitbaseAnalyticsProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function KitbaseAnalyticsProvider({ config, children }: KitbaseAnalyticsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the KitbaseAnalytics instance directly.
+ *
+ * @returns The KitbaseAnalytics instance
+ * @throws Error if used outside of KitbaseAnalyticsProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const kitbase = useKitbaseAnalytics();
+ *
+ *   useEffect(() => {
+ *     kitbase.register({ page: 'home' });
+ *   }, [kitbase]);
+ *
+ *   return <div>My Component</div>;
+ * }
+ * ```
+ */
+declare function useKitbaseAnalytics(): KitbaseAnalytics;
+/**
+ * Hook to get a memoized track function.
+ *
+ * @returns A function to track events
+ *
+ * @example
+ * ```tsx
+ * function Button() {
+ *   const track = useTrack();
+ *
+ *   const handleClick = () => {
+ *     track({
+ *       channel: 'ui',
+ *       event: 'Button Clicked',
+ *       tags: { button_id: 'cta' },
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleClick}>Click me</button>;
+ * }
+ * ```
+ */
+declare function useTrack(): (options: TrackOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to get a memoized identify function.
+ *
+ * @returns A function to identify users
+ *
+ * @example
+ * ```tsx
+ * function LoginForm() {
+ *   const identify = useIdentify();
+ *
+ *   const handleLogin = async (userId: string, email: string) => {
+ *     await identify({
+ *       userId,
+ *       traits: { email },
+ *     });
+ *   };
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ */
+declare function useIdentify(): (options: IdentifyOptions) => Promise<void>;
+/**
+ * Hook to get a memoized page view tracking function.
+ *
+ * @returns A function to track page views
+ *
+ * @example
+ * ```tsx
+ * function Page() {
+ *   const trackPageView = usePageView();
+ *
+ *   useEffect(() => {
+ *     trackPageView({ path: '/dashboard', title: 'Dashboard' });
+ *   }, [trackPageView]);
+ *
+ *   return <div>Dashboard</div>;
+ * }
+ * ```
+ */
+declare function usePageView(): (options?: PageViewOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to automatically track page views when the component mounts
+ * or when dependencies change.
+ *
+ * @param options - Page view options (optional)
+ * @param deps - Dependencies that trigger a new page view when changed
+ *
+ * @example
+ * ```tsx
+ * function ProductPage({ productId }: { productId: string }) {
+ *   // Track page view on mount and when productId changes
+ *   useAutoPageView(
+ *     { tags: { product_id: productId } },
+ *     [productId]
+ *   );
+ *
+ *   return <div>Product {productId}</div>;
+ * }
+ * ```
+ */
+declare function useAutoPageView(options?: PageViewOptions, deps?: React.DependencyList): void;
+/**
+ * Hook to get a memoized revenue tracking function.
+ *
+ * @returns A function to track revenue events
+ *
+ * @example
+ * ```tsx
+ * function Checkout() {
+ *   const trackRevenue = useRevenue();
+ *
+ *   const handlePurchase = async (amount: number) => {
+ *     await trackRevenue({
+ *       amount,
+ *       currency: 'USD',
+ *       tags: { product: 'premium' },
+ *     });
+ *   };
+ *
+ *   return <button onClick={() => handlePurchase(1999)}>Buy</button>;
+ * }
+ * ```
+ */
+declare function useRevenue(): (options: RevenueOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to track event duration.
+ *
+ * @param eventName - The name of the event to time
+ * @returns Object with start and stop functions
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer() {
+ *   const { start, stop } = useTimeEvent('Video Watched');
+ *   const track = useTrack();
+ *
+ *   const handlePlay = () => start();
+ *   const handleEnd = async () => {
+ *     await track({
+ *       channel: 'engagement',
+ *       event: 'Video Watched',
+ *       tags: { video_id: '123' },
+ *     });
+ *     // $duration is automatically included
+ *   };
+ *
+ *   return (
+ *     <video onPlay={handlePlay} onEnded={handleEnd}>
+ *       ...
+ *     </video>
+ *   );
+ * }
+ * ```
+ */
+declare function useTimeEvent(eventName: string): {
+    start: () => void;
+    stop: () => void;
+    getDuration: () => number | null;
+};
+/**
+ * Hook to register super properties.
+ *
+ * @param properties - Properties to register
+ * @param deps - Dependencies that trigger re-registration when changed
+ *
+ * @example
+ * ```tsx
+ * function App({ user }: { user: User }) {
+ *   // Register user properties that will be included in all events
+ *   useSuperProperties(
+ *     { user_type: user.type, plan: user.plan },
+ *     [user.type, user.plan]
+ *   );
+ *
+ *   return <MainContent />;
+ * }
+ * ```
+ */
+declare function useSuperProperties(properties: Tags, deps?: React.DependencyList): void;
+/**
+ * Hook to get the current user ID (set via identify).
+ *
+ * @returns The user ID or null
+ *
+ * @example
+ * ```tsx
+ * function UserBadge() {
+ *   const userId = useUserId();
+ *   if (!userId) return null;
+ *   return <div>Logged in as: {userId}</div>;
+ * }
+ * ```
+ */
+declare function useUserId(): string | null;
+/**
+ * Hook to reset the user identity.
+ *
+ * @returns A function to reset the user
+ *
+ * @example
+ * ```tsx
+ * function LogoutButton() {
+ *   const reset = useReset();
+ *
+ *   const handleLogout = () => {
+ *     // Clear server session...
+ *     reset();
+ *   };
+ *
+ *   return <button onClick={handleLogout}>Logout</button>;
+ * }
+ * ```
+ */
+declare function useReset(): () => void;
+
+export { KitbaseAnalyticsProvider, type KitbaseAnalyticsProviderProps, useAutoPageView, useIdentify, useKitbaseAnalytics, usePageView, useReset, useRevenue, useSuperProperties, useTimeEvent, useTrack, useUserId };

package/dist/index.d.ts

@@ -0,0 +1,262 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { KitbaseConfig, KitbaseAnalytics, TrackOptions, TrackResponse, IdentifyOptions, PageViewOptions, RevenueOptions, Tags } from '@kitbase/analytics';
+export * from '@kitbase/analytics';
+
+/**
+ * Props for the KitbaseAnalyticsProvider component
+ */
+interface KitbaseAnalyticsProviderProps {
+    /**
+     * KitbaseAnalytics configuration options
+     */
+    config: KitbaseConfig;
+    /**
+     * React children to render
+     */
+    children: ReactNode;
+}
+/**
+ * Provider component that initializes KitbaseAnalytics and makes it available
+ * to all child components via React context.
+ *
+ * @example
+ * ```tsx
+ * import { KitbaseAnalyticsProvider } from '@kitbase/analytics-react';
+ *
+ * function App() {
+ *   return (
+ *     <KitbaseAnalyticsProvider
+ *       config={{
+ *         sdkKey: 'your-api-key',
+ *         debug: true,
+ *         analytics: { autoTrackPageViews: true },
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </KitbaseAnalyticsProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function KitbaseAnalyticsProvider({ config, children }: KitbaseAnalyticsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the KitbaseAnalytics instance directly.
+ *
+ * @returns The KitbaseAnalytics instance
+ * @throws Error if used outside of KitbaseAnalyticsProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const kitbase = useKitbaseAnalytics();
+ *
+ *   useEffect(() => {
+ *     kitbase.register({ page: 'home' });
+ *   }, [kitbase]);
+ *
+ *   return <div>My Component</div>;
+ * }
+ * ```
+ */
+declare function useKitbaseAnalytics(): KitbaseAnalytics;
+/**
+ * Hook to get a memoized track function.
+ *
+ * @returns A function to track events
+ *
+ * @example
+ * ```tsx
+ * function Button() {
+ *   const track = useTrack();
+ *
+ *   const handleClick = () => {
+ *     track({
+ *       channel: 'ui',
+ *       event: 'Button Clicked',
+ *       tags: { button_id: 'cta' },
+ *     });
+ *   };
+ *
+ *   return <button onClick={handleClick}>Click me</button>;
+ * }
+ * ```
+ */
+declare function useTrack(): (options: TrackOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to get a memoized identify function.
+ *
+ * @returns A function to identify users
+ *
+ * @example
+ * ```tsx
+ * function LoginForm() {
+ *   const identify = useIdentify();
+ *
+ *   const handleLogin = async (userId: string, email: string) => {
+ *     await identify({
+ *       userId,
+ *       traits: { email },
+ *     });
+ *   };
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ */
+declare function useIdentify(): (options: IdentifyOptions) => Promise<void>;
+/**
+ * Hook to get a memoized page view tracking function.
+ *
+ * @returns A function to track page views
+ *
+ * @example
+ * ```tsx
+ * function Page() {
+ *   const trackPageView = usePageView();
+ *
+ *   useEffect(() => {
+ *     trackPageView({ path: '/dashboard', title: 'Dashboard' });
+ *   }, [trackPageView]);
+ *
+ *   return <div>Dashboard</div>;
+ * }
+ * ```
+ */
+declare function usePageView(): (options?: PageViewOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to automatically track page views when the component mounts
+ * or when dependencies change.
+ *
+ * @param options - Page view options (optional)
+ * @param deps - Dependencies that trigger a new page view when changed
+ *
+ * @example
+ * ```tsx
+ * function ProductPage({ productId }: { productId: string }) {
+ *   // Track page view on mount and when productId changes
+ *   useAutoPageView(
+ *     { tags: { product_id: productId } },
+ *     [productId]
+ *   );
+ *
+ *   return <div>Product {productId}</div>;
+ * }
+ * ```
+ */
+declare function useAutoPageView(options?: PageViewOptions, deps?: React.DependencyList): void;
+/**
+ * Hook to get a memoized revenue tracking function.
+ *
+ * @returns A function to track revenue events
+ *
+ * @example
+ * ```tsx
+ * function Checkout() {
+ *   const trackRevenue = useRevenue();
+ *
+ *   const handlePurchase = async (amount: number) => {
+ *     await trackRevenue({
+ *       amount,
+ *       currency: 'USD',
+ *       tags: { product: 'premium' },
+ *     });
+ *   };
+ *
+ *   return <button onClick={() => handlePurchase(1999)}>Buy</button>;
+ * }
+ * ```
+ */
+declare function useRevenue(): (options: RevenueOptions) => Promise<TrackResponse | void>;
+/**
+ * Hook to track event duration.
+ *
+ * @param eventName - The name of the event to time
+ * @returns Object with start and stop functions
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer() {
+ *   const { start, stop } = useTimeEvent('Video Watched');
+ *   const track = useTrack();
+ *
+ *   const handlePlay = () => start();
+ *   const handleEnd = async () => {
+ *     await track({
+ *       channel: 'engagement',
+ *       event: 'Video Watched',
+ *       tags: { video_id: '123' },
+ *     });
+ *     // $duration is automatically included
+ *   };
+ *
+ *   return (
+ *     <video onPlay={handlePlay} onEnded={handleEnd}>
+ *       ...
+ *     </video>
+ *   );
+ * }
+ * ```
+ */
+declare function useTimeEvent(eventName: string): {
+    start: () => void;
+    stop: () => void;
+    getDuration: () => number | null;
+};
+/**
+ * Hook to register super properties.
+ *
+ * @param properties - Properties to register
+ * @param deps - Dependencies that trigger re-registration when changed
+ *
+ * @example
+ * ```tsx
+ * function App({ user }: { user: User }) {
+ *   // Register user properties that will be included in all events
+ *   useSuperProperties(
+ *     { user_type: user.type, plan: user.plan },
+ *     [user.type, user.plan]
+ *   );
+ *
+ *   return <MainContent />;
+ * }
+ * ```
+ */
+declare function useSuperProperties(properties: Tags, deps?: React.DependencyList): void;
+/**
+ * Hook to get the current user ID (set via identify).
+ *
+ * @returns The user ID or null
+ *
+ * @example
+ * ```tsx
+ * function UserBadge() {
+ *   const userId = useUserId();
+ *   if (!userId) return null;
+ *   return <div>Logged in as: {userId}</div>;
+ * }
+ * ```
+ */
+declare function useUserId(): string | null;
+/**
+ * Hook to reset the user identity.
+ *
+ * @returns A function to reset the user
+ *
+ * @example
+ * ```tsx
+ * function LogoutButton() {
+ *   const reset = useReset();
+ *
+ *   const handleLogout = () => {
+ *     // Clear server session...
+ *     reset();
+ *   };
+ *
+ *   return <button onClick={handleLogout}>Logout</button>;
+ * }
+ * ```
+ */
+declare function useReset(): () => void;
+
+export { KitbaseAnalyticsProvider, type KitbaseAnalyticsProviderProps, useAutoPageView, useIdentify, useKitbaseAnalytics, usePageView, useReset, useRevenue, useSuperProperties, useTimeEvent, useTrack, useUserId };

package/dist/index.js

@@ -0,0 +1,117 @@
+// src/index.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback
+} from "react";
+import {
+  KitbaseAnalytics
+} from "@kitbase/analytics";
+export * from "@kitbase/analytics";
+import { jsx } from "react/jsx-runtime";
+var KitbaseAnalyticsContext = createContext(null);
+function KitbaseAnalyticsProvider({ config, children }) {
+  const kitbaseRef = useRef(null);
+  if (!kitbaseRef.current) {
+    kitbaseRef.current = new KitbaseAnalytics(config);
+  }
+  useEffect(() => {
+    return () => {
+      kitbaseRef.current?.shutdown();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(KitbaseAnalyticsContext.Provider, { value: kitbaseRef.current, children });
+}
+function useKitbaseAnalytics() {
+  const context = useContext(KitbaseAnalyticsContext);
+  if (!context) {
+    throw new Error("useKitbaseAnalytics must be used within a KitbaseAnalyticsProvider");
+  }
+  return context;
+}
+function useTrack() {
+  const kitbase = useKitbaseAnalytics();
+  return useCallback(
+    (options) => {
+      return kitbase.track(options);
+    },
+    [kitbase]
+  );
+}
+function useIdentify() {
+  const kitbase = useKitbaseAnalytics();
+  return useCallback(
+    (options) => {
+      return kitbase.identify(options);
+    },
+    [kitbase]
+  );
+}
+function usePageView() {
+  const kitbase = useKitbaseAnalytics();
+  return useCallback(
+    (options) => {
+      return kitbase.trackPageView(options);
+    },
+    [kitbase]
+  );
+}
+function useAutoPageView(options, deps = []) {
+  const kitbase = useKitbaseAnalytics();
+  useEffect(() => {
+    kitbase.trackPageView(options);
+  }, deps);
+}
+function useRevenue() {
+  const kitbase = useKitbaseAnalytics();
+  return useCallback(
+    (options) => {
+      return kitbase.trackRevenue(options);
+    },
+    [kitbase]
+  );
+}
+function useTimeEvent(eventName) {
+  const kitbase = useKitbaseAnalytics();
+  return useMemo(
+    () => ({
+      start: () => kitbase.timeEvent(eventName),
+      stop: () => kitbase.cancelTimeEvent(eventName),
+      getDuration: () => kitbase.getEventDuration(eventName)
+    }),
+    [kitbase, eventName]
+  );
+}
+function useSuperProperties(properties, deps = []) {
+  const kitbase = useKitbaseAnalytics();
+  useEffect(() => {
+    kitbase.register(properties);
+  }, deps);
+}
+function useUserId() {
+  const kitbase = useKitbaseAnalytics();
+  return kitbase.getUserId();
+}
+function useReset() {
+  const kitbase = useKitbaseAnalytics();
+  return useCallback(() => {
+    kitbase.reset();
+  }, [kitbase]);
+}
+export {
+  KitbaseAnalyticsProvider,
+  useAutoPageView,
+  useIdentify,
+  useKitbaseAnalytics,
+  usePageView,
+  useReset,
+  useRevenue,
+  useSuperProperties,
+  useTimeEvent,
+  useTrack,
+  useUserId
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * React integration for Kitbase Analytics SDK\n *\n * Provides React hooks and context provider for easy integration\n * with React applications.\n *\n * @example\n * ```tsx\n * import { KitbaseAnalyticsProvider, useKitbaseAnalytics, useTrack } from '@kitbase/analytics-react';\n *\n * function App() {\n *   return (\n *     <KitbaseAnalyticsProvider config={{ sdkKey: 'your-api-key' }}>\n *       <MyComponent />\n *     </KitbaseAnalyticsProvider>\n *   );\n * }\n *\n * function MyComponent() {\n *   const track = useTrack();\n *\n *   return (\n *     <button onClick={() => track({ channel: 'ui', event: 'Button Clicked' })}>\n *       Click me\n *     </button>\n *   );\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  type ReactNode,\n} from 'react';\nimport {\n  KitbaseAnalytics,\n  type KitbaseConfig,\n  type TrackOptions,\n  type TrackResponse,\n  type PageViewOptions,\n  type RevenueOptions,\n  type IdentifyOptions,\n  type Tags,\n} from '@kitbase/analytics';\n\n// Re-export everything from core\nexport * from '@kitbase/analytics';\n\n// ============================================================\n// Context\n// ============================================================\n\nconst KitbaseAnalyticsContext = createContext<KitbaseAnalytics | null>(null);\n\n/**\n * Props for the KitbaseAnalyticsProvider component\n */\nexport interface KitbaseAnalyticsProviderProps {\n  /**\n   * KitbaseAnalytics configuration options\n   */\n  config: KitbaseConfig;\n\n  /**\n   * React children to render\n   */\n  children: ReactNode;\n}\n\n/**\n * Provider component that initializes KitbaseAnalytics and makes it available\n * to all child components via React context.\n *\n * @example\n * ```tsx\n * import { KitbaseAnalyticsProvider } from '@kitbase/analytics-react';\n *\n * function App() {\n *   return (\n *     <KitbaseAnalyticsProvider\n *       config={{\n *         sdkKey: 'your-api-key',\n *         debug: true,\n *         analytics: { autoTrackPageViews: true },\n *       }}\n *     >\n *       <YourApp />\n *     </KitbaseAnalyticsProvider>\n *   );\n * }\n * ```\n */\nexport function KitbaseAnalyticsProvider({ config, children }: KitbaseAnalyticsProviderProps) {\n  const kitbaseRef = useRef<KitbaseAnalytics | null>(null);\n\n  // Initialize KitbaseAnalytics instance once\n  if (!kitbaseRef.current) {\n    kitbaseRef.current = new KitbaseAnalytics(config);\n  }\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      kitbaseRef.current?.shutdown();\n    };\n  }, []);\n\n  return (\n    <KitbaseAnalyticsContext.Provider value={kitbaseRef.current}>\n      {children}\n    </KitbaseAnalyticsContext.Provider>\n  );\n}\n\n// ============================================================\n// Hooks\n// ============================================================\n\n/**\n * Hook to access the KitbaseAnalytics instance directly.\n *\n * @returns The KitbaseAnalytics instance\n * @throws Error if used outside of KitbaseAnalyticsProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const kitbase = useKitbaseAnalytics();\n *\n *   useEffect(() => {\n *     kitbase.register({ page: 'home' });\n *   }, [kitbase]);\n *\n *   return <div>My Component</div>;\n * }\n * ```\n */\nexport function useKitbaseAnalytics(): KitbaseAnalytics {\n  const context = useContext(KitbaseAnalyticsContext);\n\n  if (!context) {\n    throw new Error('useKitbaseAnalytics must be used within a KitbaseAnalyticsProvider');\n  }\n\n  return context;\n}\n\n/**\n * Hook to get a memoized track function.\n *\n * @returns A function to track events\n *\n * @example\n * ```tsx\n * function Button() {\n *   const track = useTrack();\n *\n *   const handleClick = () => {\n *     track({\n *       channel: 'ui',\n *       event: 'Button Clicked',\n *       tags: { button_id: 'cta' },\n *     });\n *   };\n *\n *   return <button onClick={handleClick}>Click me</button>;\n * }\n * ```\n */\nexport function useTrack() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: TrackOptions): Promise<TrackResponse | void> => {\n      return kitbase.track(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to get a memoized identify function.\n *\n * @returns A function to identify users\n *\n * @example\n * ```tsx\n * function LoginForm() {\n *   const identify = useIdentify();\n *\n *   const handleLogin = async (userId: string, email: string) => {\n *     await identify({\n *       userId,\n *       traits: { email },\n *     });\n *   };\n *\n *   return <form>...</form>;\n * }\n * ```\n */\nexport function useIdentify() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: IdentifyOptions): Promise<void> => {\n      return kitbase.identify(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to get a memoized page view tracking function.\n *\n * @returns A function to track page views\n *\n * @example\n * ```tsx\n * function Page() {\n *   const trackPageView = usePageView();\n *\n *   useEffect(() => {\n *     trackPageView({ path: '/dashboard', title: 'Dashboard' });\n *   }, [trackPageView]);\n *\n *   return <div>Dashboard</div>;\n * }\n * ```\n */\nexport function usePageView() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options?: PageViewOptions): Promise<TrackResponse | void> => {\n      return kitbase.trackPageView(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to automatically track page views when the component mounts\n * or when dependencies change.\n *\n * @param options - Page view options (optional)\n * @param deps - Dependencies that trigger a new page view when changed\n *\n * @example\n * ```tsx\n * function ProductPage({ productId }: { productId: string }) {\n *   // Track page view on mount and when productId changes\n *   useAutoPageView(\n *     { tags: { product_id: productId } },\n *     [productId]\n *   );\n *\n *   return <div>Product {productId}</div>;\n * }\n * ```\n */\nexport function useAutoPageView(\n  options?: PageViewOptions,\n  deps: React.DependencyList = []\n) {\n  const kitbase = useKitbaseAnalytics();\n\n  useEffect(() => {\n    kitbase.trackPageView(options);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n\n/**\n * Hook to get a memoized revenue tracking function.\n *\n * @returns A function to track revenue events\n *\n * @example\n * ```tsx\n * function Checkout() {\n *   const trackRevenue = useRevenue();\n *\n *   const handlePurchase = async (amount: number) => {\n *     await trackRevenue({\n *       amount,\n *       currency: 'USD',\n *       tags: { product: 'premium' },\n *     });\n *   };\n *\n *   return <button onClick={() => handlePurchase(1999)}>Buy</button>;\n * }\n * ```\n */\nexport function useRevenue() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(\n    (options: RevenueOptions): Promise<TrackResponse | void> => {\n      return kitbase.trackRevenue(options);\n    },\n    [kitbase]\n  );\n}\n\n/**\n * Hook to track event duration.\n *\n * @param eventName - The name of the event to time\n * @returns Object with start and stop functions\n *\n * @example\n * ```tsx\n * function VideoPlayer() {\n *   const { start, stop } = useTimeEvent('Video Watched');\n *   const track = useTrack();\n *\n *   const handlePlay = () => start();\n *   const handleEnd = async () => {\n *     await track({\n *       channel: 'engagement',\n *       event: 'Video Watched',\n *       tags: { video_id: '123' },\n *     });\n *     // $duration is automatically included\n *   };\n *\n *   return (\n *     <video onPlay={handlePlay} onEnded={handleEnd}>\n *       ...\n *     </video>\n *   );\n * }\n * ```\n */\nexport function useTimeEvent(eventName: string) {\n  const kitbase = useKitbaseAnalytics();\n\n  return useMemo(\n    () => ({\n      start: () => kitbase.timeEvent(eventName),\n      stop: () => kitbase.cancelTimeEvent(eventName),\n      getDuration: () => kitbase.getEventDuration(eventName),\n    }),\n    [kitbase, eventName]\n  );\n}\n\n/**\n * Hook to register super properties.\n *\n * @param properties - Properties to register\n * @param deps - Dependencies that trigger re-registration when changed\n *\n * @example\n * ```tsx\n * function App({ user }: { user: User }) {\n *   // Register user properties that will be included in all events\n *   useSuperProperties(\n *     { user_type: user.type, plan: user.plan },\n *     [user.type, user.plan]\n *   );\n *\n *   return <MainContent />;\n * }\n * ```\n */\nexport function useSuperProperties(\n  properties: Tags,\n  deps: React.DependencyList = []\n) {\n  const kitbase = useKitbaseAnalytics();\n\n  useEffect(() => {\n    kitbase.register(properties);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n\n/**\n * Hook to get the current user ID (set via identify).\n *\n * @returns The user ID or null\n *\n * @example\n * ```tsx\n * function UserBadge() {\n *   const userId = useUserId();\n *   if (!userId) return null;\n *   return <div>Logged in as: {userId}</div>;\n * }\n * ```\n */\nexport function useUserId(): string | null {\n  const kitbase = useKitbaseAnalytics();\n  return kitbase.getUserId();\n}\n\n/**\n * Hook to reset the user identity.\n *\n * @returns A function to reset the user\n *\n * @example\n * ```tsx\n * function LogoutButton() {\n *   const reset = useReset();\n *\n *   const handleLogout = () => {\n *     // Clear server session...\n *     reset();\n *   };\n *\n *   return <button onClick={handleLogout}>Logout</button>;\n * }\n * ```\n */\nexport function useReset() {\n  const kitbase = useKitbaseAnalytics();\n\n  return useCallback(() => {\n    kitbase.reset();\n  }, [kitbase]);\n}\n\n"],"mappings":";AAgCA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAQK;AAGP,cAAc;AA8DV;AAxDJ,IAAM,0BAA0B,cAAuC,IAAI;AAwCpE,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAkC;AAC5F,QAAM,aAAa,OAAgC,IAAI;AAGvD,MAAI,CAAC,WAAW,SAAS;AACvB,eAAW,UAAU,IAAI,iBAAiB,MAAM;AAAA,EAClD;AAGA,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,SAAS,SAAS;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,WAAW,SACjD,UACH;AAEJ;AAyBO,SAAS,sBAAwC;AACtD,QAAM,UAAU,WAAW,uBAAuB;AAElD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oEAAoE;AAAA,EACtF;AAEA,SAAO;AACT;AAwBO,SAAS,WAAW;AACzB,QAAM,UAAU,oBAAoB;AAEpC,SAAO;AAAA,IACL,CAAC,YAAyD;AACxD,aAAO,QAAQ,MAAM,OAAO;AAAA,IAC9B;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAuBO,SAAS,cAAc;AAC5B,QAAM,UAAU,oBAAoB;AAEpC,SAAO;AAAA,IACL,CAAC,YAA4C;AAC3C,aAAO,QAAQ,SAAS,OAAO;AAAA,IACjC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAoBO,SAAS,cAAc;AAC5B,QAAM,UAAU,oBAAoB;AAEpC,SAAO;AAAA,IACL,CAAC,YAA6D;AAC5D,aAAO,QAAQ,cAAc,OAAO;AAAA,IACtC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAsBO,SAAS,gBACd,SACA,OAA6B,CAAC,GAC9B;AACA,QAAM,UAAU,oBAAoB;AAEpC,YAAU,MAAM;AACd,YAAQ,cAAc,OAAO;AAAA,EAE/B,GAAG,IAAI;AACT;AAwBO,SAAS,aAAa;AAC3B,QAAM,UAAU,oBAAoB;AAEpC,SAAO;AAAA,IACL,CAAC,YAA2D;AAC1D,aAAO,QAAQ,aAAa,OAAO;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACF;AAgCO,SAAS,aAAa,WAAmB;AAC9C,QAAM,UAAU,oBAAoB;AAEpC,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO,MAAM,QAAQ,UAAU,SAAS;AAAA,MACxC,MAAM,MAAM,QAAQ,gBAAgB,SAAS;AAAA,MAC7C,aAAa,MAAM,QAAQ,iBAAiB,SAAS;AAAA,IACvD;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,EACrB;AACF;AAqBO,SAAS,mBACd,YACA,OAA6B,CAAC,GAC9B;AACA,QAAM,UAAU,oBAAoB;AAEpC,YAAU,MAAM;AACd,YAAQ,SAAS,UAAU;AAAA,EAE7B,GAAG,IAAI;AACT;AAgBO,SAAS,YAA2B;AACzC,QAAM,UAAU,oBAAoB;AACpC,SAAO,QAAQ,UAAU;AAC3B;AAqBO,SAAS,WAAW;AACzB,QAAM,UAAU,oBAAoB;AAEpC,SAAO,YAAY,MAAM;AACvB,YAAQ,MAAM;AAAA,EAChB,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@kitbase/analytics-react",
+  "version": "0.1.6",
+  "description": "React integration for Kitbase Analytics SDK",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "kitbase",
+    "analytics",
+    "tracking",
+    "react",
+    "hooks"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scr2em/kitbase-sdk.git",
+    "directory": "customEvents/typescript/packages/react"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "dependencies": {
+    "@kitbase/analytics": "0.1.6"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.2.0",
+    "jsdom": "^28.1.0",
+    "react": "^18.2.0",
+    "react-dom": "18",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src",
+    "clean": "rm -rf dist"
+  }
+}