@gravity-ai/react 0.1.0

package/README.md

@@ -0,0 +1,166 @@
+# @gravity-ai/react
+
+React components for rendering Gravity AI advertisements with automatic impression and click tracking.
+
+## Installation
+
+```bash
+npm install @gravity-ai/react
+```
+
+> **Note:** This package has a peer dependency on React 17+.
+
+## Quick Start
+
+```tsx
+import { Client } from '@gravity-ai/api';
+import { AdBanner } from '@gravity-ai/react';
+import { useEffect, useState } from 'react';
+
+const client = new Client('your-api-key');
+
+function ChatMessage({ messages }) {
+  const [ad, setAd] = useState(null);
+
+  useEffect(() => {
+    client.getAd({ messages }).then(setAd);
+  }, [messages]);
+
+  return (
+    <div>
+      {/* Your chat content */}
+      <AdBanner ad={ad} theme="dark" size="medium" />
+    </div>
+  );
+}
+```
+
+## Components
+
+### `<AdBanner />`
+
+A fully-styled, customizable ad banner component.
+
+```tsx
+import { AdBanner } from '@gravity-ai/react';
+
+<AdBanner
+  ad={adResponse}
+  theme="dark"           // 'light' | 'dark' | 'minimal' | 'branded'
+  size="medium"          // 'small' | 'medium' | 'large' | 'responsive'
+  showLabel={true}       // Show "Sponsored" label
+  labelText="Ad"         // Custom label text
+  openInNewTab={true}    // Open click URL in new tab
+  onImpression={() => console.log('Impression tracked')}
+  onClickTracked={() => console.log('Click tracked')}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `ad` | `AdResponse \| null` | required | The ad response from Gravity API |
+| `theme` | `'light' \| 'dark' \| 'minimal' \| 'branded'` | `'light'` | Visual theme preset |
+| `size` | `'small' \| 'medium' \| 'large' \| 'responsive'` | `'medium'` | Size preset |
+| `className` | `string` | - | Custom class name for container |
+| `style` | `CSSProperties` | - | Custom inline styles |
+| `showLabel` | `boolean` | `true` | Show "Sponsored" label |
+| `labelText` | `string` | `'Sponsored'` | Custom label text |
+| `fallback` | `ReactNode` | `null` | Content when ad is null |
+| `openInNewTab` | `boolean` | `true` | Open link in new tab |
+| `backgroundColor` | `string` | - | Custom background (overrides theme) |
+| `textColor` | `string` | - | Custom text color (overrides theme) |
+| `accentColor` | `string` | - | Custom accent color |
+| `borderRadius` | `number \| string` | - | Custom border radius |
+| `disableImpressionTracking` | `boolean` | `false` | Disable auto impression tracking |
+| `onClick` | `() => void` | - | Custom click handler |
+| `onImpression` | `() => void` | - | Callback when impression fires |
+| `onClickTracked` | `() => void` | - | Callback when click is tracked |
+
+### `<AdText />`
+
+A minimal text-only component for full styling control.
+
+```tsx
+import { AdText } from '@gravity-ai/react';
+
+<AdText
+  ad={adResponse}
+  className="my-custom-class"
+  style={{ color: 'blue' }}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `ad` | `AdResponse \| null` | required | The ad response from Gravity API |
+| `className` | `string` | - | Custom class name |
+| `style` | `CSSProperties` | - | Custom inline styles |
+| `fallback` | `ReactNode` | `null` | Content when ad is null |
+| `openInNewTab` | `boolean` | `true` | Open link in new tab |
+| `disableImpressionTracking` | `boolean` | `false` | Disable auto tracking |
+| `onClick` | `() => void` | - | Custom click handler |
+| `onImpression` | `() => void` | - | Callback on impression |
+| `onClickTracked` | `() => void` | - | Callback on click |
+
+## Hooks
+
+### `useAdTracking`
+
+For building custom ad components with automatic tracking.
+
+```tsx
+import { useAdTracking } from '@gravity-ai/react';
+
+function CustomAdComponent({ ad }) {
+  const { handleClick } = useAdTracking({
+    ad,
+    onImpression: () => console.log('Viewed'),
+    onClickTracked: () => console.log('Clicked'),
+  });
+
+  return (
+    <a href={ad.clickUrl} onClick={handleClick}>
+      {ad.adText}
+    </a>
+  );
+}
+```
+
+## Theming Examples
+
+### Dark Theme
+```tsx
+<AdBanner ad={ad} theme="dark" />
+```
+
+### Custom Colors
+```tsx
+<AdBanner
+  ad={ad}
+  backgroundColor="#1e1b4b"
+  textColor="#e0e7ff"
+  accentColor="#818cf8"
+/>
+```
+
+### Minimal (Inherit Parent Styles)
+```tsx
+<AdBanner ad={ad} theme="minimal" showLabel={false} />
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { AdResponse, AdBannerProps, AdTheme, AdSize } from '@gravity-ai/react';
+```
+
+## License
+
+MIT
+

package/dist/index.d.mts

@@ -0,0 +1,160 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Ad response from the Gravity API
+ * This mirrors the type from @gravity-ai/api for convenience
+ */
+interface AdResponse {
+    adText: string;
+    impUrl?: string;
+    clickUrl?: string;
+    payout?: number;
+}
+/**
+ * Visual theme presets for the ad banner
+ */
+type AdTheme = 'light' | 'dark' | 'minimal' | 'branded';
+/**
+ * Banner size presets
+ */
+type AdSize = 'small' | 'medium' | 'large' | 'responsive';
+/**
+ * Props for the AdBanner component
+ */
+interface AdBannerProps {
+    /** The ad response from Gravity API */
+    ad: AdResponse | null;
+    /** Visual theme preset */
+    theme?: AdTheme;
+    /** Size preset */
+    size?: AdSize;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom inline styles for the container */
+    style?: CSSProperties;
+    /** Custom styles for the ad text */
+    textStyle?: CSSProperties;
+    /** Custom class name for the ad text */
+    textClassName?: string;
+    /** Whether to show the "Sponsored" label */
+    showLabel?: boolean;
+    /** Custom label text (default: "Sponsored") */
+    labelText?: string;
+    /** Custom styles for the label */
+    labelStyle?: CSSProperties;
+    /** Custom click handler (called in addition to tracking) */
+    onClick?: () => void;
+    /** Callback when impression is tracked */
+    onImpression?: () => void;
+    /** Callback when click is tracked */
+    onClickTracked?: () => void;
+    /** Custom content to render when ad is null */
+    fallback?: ReactNode;
+    /** Whether to disable automatic impression tracking */
+    disableImpressionTracking?: boolean;
+    /** Whether to open link in new tab (default: true) */
+    openInNewTab?: boolean;
+    /** Custom border radius */
+    borderRadius?: number | string;
+    /** Custom background color (overrides theme) */
+    backgroundColor?: string;
+    /** Custom text color (overrides theme) */
+    textColor?: string;
+    /** Custom accent/brand color */
+    accentColor?: string;
+}
+/**
+ * Props for the AdText component (minimal text-only rendering)
+ */
+interface AdTextProps {
+    /** The ad response from Gravity API */
+    ad: AdResponse | null;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Custom click handler */
+    onClick?: () => void;
+    /** Callback when impression is tracked */
+    onImpression?: () => void;
+    /** Callback when click is tracked */
+    onClickTracked?: () => void;
+    /** Content to render when ad is null */
+    fallback?: ReactNode;
+    /** Whether to disable automatic impression tracking */
+    disableImpressionTracking?: boolean;
+    /** Whether to open link in new tab (default: true) */
+    openInNewTab?: boolean;
+}
+
+/**
+ * AdBanner - A customizable component for rendering Gravity AI advertisements
+ *
+ * @example
+ * ```tsx
+ * import { AdBanner } from '@gravity-ai/react';
+ *
+ * function MyComponent() {
+ *   const [ad, setAd] = useState(null);
+ *
+ *   useEffect(() => {
+ *     client.getAd({ messages }).then(setAd);
+ *   }, []);
+ *
+ *   return (
+ *     <AdBanner
+ *       ad={ad}
+ *       theme="dark"
+ *       size="medium"
+ *       showLabel
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function AdBanner({ ad, theme, size, className, style, textStyle, textClassName, showLabel, labelText, labelStyle, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, borderRadius, backgroundColor, textColor, accentColor, }: AdBannerProps): react_jsx_runtime.JSX.Element;
+declare namespace AdBanner {
+    var displayName: string;
+}
+
+/**
+ * AdText - A minimal text-only component for rendering Gravity AI advertisements
+ *
+ * Use this when you want full control over styling and just need the ad text
+ * with automatic tracking.
+ *
+ * @example
+ * ```tsx
+ * import { AdText } from '@gravity-ai/react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AdText
+ *       ad={ad}
+ *       className="my-custom-ad-style"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function AdText({ ad, className, style, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, }: AdTextProps): react_jsx_runtime.JSX.Element;
+declare namespace AdText {
+    var displayName: string;
+}
+
+interface UseAdTrackingOptions {
+    ad: AdResponse | null;
+    disableImpressionTracking?: boolean;
+    onImpression?: () => void;
+    onClickTracked?: () => void;
+}
+/**
+ * Hook to handle ad impression and click tracking
+ */
+declare function useAdTracking({ ad, disableImpressionTracking, onImpression, onClickTracked, }: UseAdTrackingOptions): {
+    handleClick: () => void;
+    impressionTracked: boolean;
+};
+
+export { AdBanner, type AdBannerProps, type AdResponse, type AdSize, AdText, type AdTextProps, type AdTheme, useAdTracking };

package/dist/index.d.ts

@@ -0,0 +1,160 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Ad response from the Gravity API
+ * This mirrors the type from @gravity-ai/api for convenience
+ */
+interface AdResponse {
+    adText: string;
+    impUrl?: string;
+    clickUrl?: string;
+    payout?: number;
+}
+/**
+ * Visual theme presets for the ad banner
+ */
+type AdTheme = 'light' | 'dark' | 'minimal' | 'branded';
+/**
+ * Banner size presets
+ */
+type AdSize = 'small' | 'medium' | 'large' | 'responsive';
+/**
+ * Props for the AdBanner component
+ */
+interface AdBannerProps {
+    /** The ad response from Gravity API */
+    ad: AdResponse | null;
+    /** Visual theme preset */
+    theme?: AdTheme;
+    /** Size preset */
+    size?: AdSize;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom inline styles for the container */
+    style?: CSSProperties;
+    /** Custom styles for the ad text */
+    textStyle?: CSSProperties;
+    /** Custom class name for the ad text */
+    textClassName?: string;
+    /** Whether to show the "Sponsored" label */
+    showLabel?: boolean;
+    /** Custom label text (default: "Sponsored") */
+    labelText?: string;
+    /** Custom styles for the label */
+    labelStyle?: CSSProperties;
+    /** Custom click handler (called in addition to tracking) */
+    onClick?: () => void;
+    /** Callback when impression is tracked */
+    onImpression?: () => void;
+    /** Callback when click is tracked */
+    onClickTracked?: () => void;
+    /** Custom content to render when ad is null */
+    fallback?: ReactNode;
+    /** Whether to disable automatic impression tracking */
+    disableImpressionTracking?: boolean;
+    /** Whether to open link in new tab (default: true) */
+    openInNewTab?: boolean;
+    /** Custom border radius */
+    borderRadius?: number | string;
+    /** Custom background color (overrides theme) */
+    backgroundColor?: string;
+    /** Custom text color (overrides theme) */
+    textColor?: string;
+    /** Custom accent/brand color */
+    accentColor?: string;
+}
+/**
+ * Props for the AdText component (minimal text-only rendering)
+ */
+interface AdTextProps {
+    /** The ad response from Gravity API */
+    ad: AdResponse | null;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Custom click handler */
+    onClick?: () => void;
+    /** Callback when impression is tracked */
+    onImpression?: () => void;
+    /** Callback when click is tracked */
+    onClickTracked?: () => void;
+    /** Content to render when ad is null */
+    fallback?: ReactNode;
+    /** Whether to disable automatic impression tracking */
+    disableImpressionTracking?: boolean;
+    /** Whether to open link in new tab (default: true) */
+    openInNewTab?: boolean;
+}
+
+/**
+ * AdBanner - A customizable component for rendering Gravity AI advertisements
+ *
+ * @example
+ * ```tsx
+ * import { AdBanner } from '@gravity-ai/react';
+ *
+ * function MyComponent() {
+ *   const [ad, setAd] = useState(null);
+ *
+ *   useEffect(() => {
+ *     client.getAd({ messages }).then(setAd);
+ *   }, []);
+ *
+ *   return (
+ *     <AdBanner
+ *       ad={ad}
+ *       theme="dark"
+ *       size="medium"
+ *       showLabel
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function AdBanner({ ad, theme, size, className, style, textStyle, textClassName, showLabel, labelText, labelStyle, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, borderRadius, backgroundColor, textColor, accentColor, }: AdBannerProps): react_jsx_runtime.JSX.Element;
+declare namespace AdBanner {
+    var displayName: string;
+}
+
+/**
+ * AdText - A minimal text-only component for rendering Gravity AI advertisements
+ *
+ * Use this when you want full control over styling and just need the ad text
+ * with automatic tracking.
+ *
+ * @example
+ * ```tsx
+ * import { AdText } from '@gravity-ai/react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <AdText
+ *       ad={ad}
+ *       className="my-custom-ad-style"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function AdText({ ad, className, style, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, }: AdTextProps): react_jsx_runtime.JSX.Element;
+declare namespace AdText {
+    var displayName: string;
+}
+
+interface UseAdTrackingOptions {
+    ad: AdResponse | null;
+    disableImpressionTracking?: boolean;
+    onImpression?: () => void;
+    onClickTracked?: () => void;
+}
+/**
+ * Hook to handle ad impression and click tracking
+ */
+declare function useAdTracking({ ad, disableImpressionTracking, onImpression, onClickTracked, }: UseAdTrackingOptions): {
+    handleClick: () => void;
+    impressionTracked: boolean;
+};
+
+export { AdBanner, type AdBannerProps, type AdResponse, type AdSize, AdText, type AdTextProps, type AdTheme, useAdTracking };

package/dist/index.js

@@ -0,0 +1,303 @@
+"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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AdBanner: () => AdBanner,
+  AdText: () => AdText,
+  useAdTracking: () => useAdTracking
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/AdBanner.tsx
+var import_react2 = require("react");
+
+// src/hooks/useAdTracking.ts
+var import_react = require("react");
+function useAdTracking({
+  ad,
+  disableImpressionTracking = false,
+  onImpression,
+  onClickTracked
+}) {
+  const impressionTracked = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!ad || !ad.impUrl || disableImpressionTracking || impressionTracked.current) {
+      return;
+    }
+    const trackImpression = async () => {
+      try {
+        const img = new Image();
+        img.src = ad.impUrl;
+        impressionTracked.current = true;
+        onImpression?.();
+      } catch (error) {
+        console.error("[Gravity] Failed to track impression:", error);
+      }
+    };
+    trackImpression();
+  }, [ad, disableImpressionTracking, onImpression]);
+  (0, import_react.useEffect)(() => {
+    impressionTracked.current = false;
+  }, [ad?.impUrl]);
+  const handleClick = (0, import_react.useCallback)(() => {
+    if (!ad?.clickUrl) return;
+    onClickTracked?.();
+  }, [ad?.clickUrl, onClickTracked]);
+  return {
+    handleClick,
+    impressionTracked: impressionTracked.current
+  };
+}
+
+// src/styles.ts
+var baseContainerStyle = {
+  display: "block",
+  textDecoration: "none",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  boxSizing: "border-box",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+};
+var themeStyles = {
+  light: {
+    backgroundColor: "#ffffff",
+    color: "#1a1a1a",
+    border: "1px solid #e5e5e5",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)"
+  },
+  dark: {
+    backgroundColor: "#1a1a1a",
+    color: "#f5f5f5",
+    border: "1px solid #333333",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  },
+  minimal: {
+    backgroundColor: "transparent",
+    color: "inherit",
+    border: "none",
+    boxShadow: "none"
+  },
+  branded: {
+    backgroundColor: "#6366f1",
+    color: "#ffffff",
+    border: "none",
+    boxShadow: "0 2px 8px rgba(99, 102, 241, 0.3)"
+  }
+};
+var sizeStyles = {
+  small: {
+    padding: "8px 12px",
+    fontSize: "13px",
+    lineHeight: "1.4",
+    borderRadius: "6px"
+  },
+  medium: {
+    padding: "12px 16px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    borderRadius: "8px"
+  },
+  large: {
+    padding: "16px 20px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    borderRadius: "10px"
+  },
+  responsive: {
+    padding: "clamp(8px, 2vw, 16px) clamp(12px, 3vw, 20px)",
+    fontSize: "clamp(13px, 1.5vw, 16px)",
+    lineHeight: "1.5",
+    borderRadius: "clamp(6px, 1vw, 10px)"
+  }
+};
+var baseLabelStyle = {
+  fontSize: "10px",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  opacity: 0.7,
+  marginBottom: "4px",
+  display: "block"
+};
+function getAdBannerStyles(theme, size, customStyles) {
+  const combined = {
+    ...baseContainerStyle,
+    ...themeStyles[theme],
+    ...sizeStyles[size]
+  };
+  if (customStyles?.backgroundColor) {
+    combined.backgroundColor = customStyles.backgroundColor;
+  }
+  if (customStyles?.textColor) {
+    combined.color = customStyles.textColor;
+  }
+  if (customStyles?.borderRadius !== void 0) {
+    combined.borderRadius = customStyles.borderRadius;
+  }
+  if (customStyles?.style) {
+    Object.assign(combined, customStyles.style);
+  }
+  return combined;
+}
+
+// src/components/AdBanner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AdBanner({
+  ad,
+  theme = "light",
+  size = "medium",
+  className,
+  style,
+  textStyle,
+  textClassName,
+  showLabel = true,
+  labelText = "Sponsored",
+  labelStyle,
+  onClick,
+  onImpression,
+  onClickTracked,
+  fallback = null,
+  disableImpressionTracking = false,
+  openInNewTab = true,
+  borderRadius,
+  backgroundColor,
+  textColor,
+  accentColor
+}) {
+  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
+  const { handleClick } = useAdTracking({
+    ad,
+    disableImpressionTracking,
+    onImpression,
+    onClickTracked
+  });
+  if (!ad) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  const containerStyles = getAdBannerStyles(theme, size, {
+    backgroundColor,
+    textColor,
+    borderRadius,
+    style
+  });
+  if (isHovered && theme !== "minimal") {
+    containerStyles.transform = "translateY(-1px)";
+    containerStyles.boxShadow = theme === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.4)" : theme === "branded" ? "0 4px 16px rgba(99, 102, 241, 0.4)" : "0 4px 12px rgba(0, 0, 0, 0.12)";
+  }
+  const labelStyles = {
+    ...baseLabelStyle,
+    color: accentColor || (theme === "branded" ? "rgba(255,255,255,0.8)" : void 0),
+    ...labelStyle
+  };
+  const textStyles = {
+    margin: 0,
+    ...textStyle
+  };
+  const handleClickInternal = (e) => {
+    handleClick();
+    onClick?.();
+    if (!ad.clickUrl) {
+      e.preventDefault();
+    }
+  };
+  const linkProps = ad.clickUrl ? {
+    href: ad.clickUrl,
+    target: openInNewTab ? "_blank" : void 0,
+    rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored"
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "a",
+    {
+      ...linkProps,
+      className,
+      style: containerStyles,
+      onClick: handleClickInternal,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      "data-gravity-ad": true,
+      children: [
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyles, children: labelText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: textClassName, style: textStyles, children: ad.adText })
+      ]
+    }
+  );
+}
+AdBanner.displayName = "GravityAdBanner";
+
+// src/components/AdText.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AdText({
+  ad,
+  className,
+  style,
+  onClick,
+  onImpression,
+  onClickTracked,
+  fallback = null,
+  disableImpressionTracking = false,
+  openInNewTab = true
+}) {
+  const { handleClick } = useAdTracking({
+    ad,
+    disableImpressionTracking,
+    onImpression,
+    onClickTracked
+  });
+  if (!ad) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+  }
+  const handleClickInternal = (e) => {
+    handleClick();
+    onClick?.();
+    if (!ad.clickUrl) {
+      e.preventDefault();
+    }
+  };
+  const baseStyle = {
+    textDecoration: "none",
+    color: "inherit",
+    cursor: ad.clickUrl ? "pointer" : "default",
+    ...style
+  };
+  if (ad.clickUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "a",
+      {
+        href: ad.clickUrl,
+        target: openInNewTab ? "_blank" : void 0,
+        rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored",
+        className,
+        style: baseStyle,
+        onClick: handleClickInternal,
+        "data-gravity-ad": true,
+        children: ad.adText
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className, style: baseStyle, "data-gravity-ad": true, children: ad.adText });
+}
+AdText.displayName = "GravityAdText";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdBanner,
+  AdText,
+  useAdTracking
+});

package/dist/index.mjs

@@ -0,0 +1,274 @@
+// src/components/AdBanner.tsx
+import { useState } from "react";
+
+// src/hooks/useAdTracking.ts
+import { useEffect, useRef, useCallback } from "react";
+function useAdTracking({
+  ad,
+  disableImpressionTracking = false,
+  onImpression,
+  onClickTracked
+}) {
+  const impressionTracked = useRef(false);
+  useEffect(() => {
+    if (!ad || !ad.impUrl || disableImpressionTracking || impressionTracked.current) {
+      return;
+    }
+    const trackImpression = async () => {
+      try {
+        const img = new Image();
+        img.src = ad.impUrl;
+        impressionTracked.current = true;
+        onImpression?.();
+      } catch (error) {
+        console.error("[Gravity] Failed to track impression:", error);
+      }
+    };
+    trackImpression();
+  }, [ad, disableImpressionTracking, onImpression]);
+  useEffect(() => {
+    impressionTracked.current = false;
+  }, [ad?.impUrl]);
+  const handleClick = useCallback(() => {
+    if (!ad?.clickUrl) return;
+    onClickTracked?.();
+  }, [ad?.clickUrl, onClickTracked]);
+  return {
+    handleClick,
+    impressionTracked: impressionTracked.current
+  };
+}
+
+// src/styles.ts
+var baseContainerStyle = {
+  display: "block",
+  textDecoration: "none",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  boxSizing: "border-box",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+};
+var themeStyles = {
+  light: {
+    backgroundColor: "#ffffff",
+    color: "#1a1a1a",
+    border: "1px solid #e5e5e5",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.08)"
+  },
+  dark: {
+    backgroundColor: "#1a1a1a",
+    color: "#f5f5f5",
+    border: "1px solid #333333",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  },
+  minimal: {
+    backgroundColor: "transparent",
+    color: "inherit",
+    border: "none",
+    boxShadow: "none"
+  },
+  branded: {
+    backgroundColor: "#6366f1",
+    color: "#ffffff",
+    border: "none",
+    boxShadow: "0 2px 8px rgba(99, 102, 241, 0.3)"
+  }
+};
+var sizeStyles = {
+  small: {
+    padding: "8px 12px",
+    fontSize: "13px",
+    lineHeight: "1.4",
+    borderRadius: "6px"
+  },
+  medium: {
+    padding: "12px 16px",
+    fontSize: "14px",
+    lineHeight: "1.5",
+    borderRadius: "8px"
+  },
+  large: {
+    padding: "16px 20px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    borderRadius: "10px"
+  },
+  responsive: {
+    padding: "clamp(8px, 2vw, 16px) clamp(12px, 3vw, 20px)",
+    fontSize: "clamp(13px, 1.5vw, 16px)",
+    lineHeight: "1.5",
+    borderRadius: "clamp(6px, 1vw, 10px)"
+  }
+};
+var baseLabelStyle = {
+  fontSize: "10px",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  opacity: 0.7,
+  marginBottom: "4px",
+  display: "block"
+};
+function getAdBannerStyles(theme, size, customStyles) {
+  const combined = {
+    ...baseContainerStyle,
+    ...themeStyles[theme],
+    ...sizeStyles[size]
+  };
+  if (customStyles?.backgroundColor) {
+    combined.backgroundColor = customStyles.backgroundColor;
+  }
+  if (customStyles?.textColor) {
+    combined.color = customStyles.textColor;
+  }
+  if (customStyles?.borderRadius !== void 0) {
+    combined.borderRadius = customStyles.borderRadius;
+  }
+  if (customStyles?.style) {
+    Object.assign(combined, customStyles.style);
+  }
+  return combined;
+}
+
+// src/components/AdBanner.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AdBanner({
+  ad,
+  theme = "light",
+  size = "medium",
+  className,
+  style,
+  textStyle,
+  textClassName,
+  showLabel = true,
+  labelText = "Sponsored",
+  labelStyle,
+  onClick,
+  onImpression,
+  onClickTracked,
+  fallback = null,
+  disableImpressionTracking = false,
+  openInNewTab = true,
+  borderRadius,
+  backgroundColor,
+  textColor,
+  accentColor
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const { handleClick } = useAdTracking({
+    ad,
+    disableImpressionTracking,
+    onImpression,
+    onClickTracked
+  });
+  if (!ad) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  const containerStyles = getAdBannerStyles(theme, size, {
+    backgroundColor,
+    textColor,
+    borderRadius,
+    style
+  });
+  if (isHovered && theme !== "minimal") {
+    containerStyles.transform = "translateY(-1px)";
+    containerStyles.boxShadow = theme === "dark" ? "0 4px 12px rgba(0, 0, 0, 0.4)" : theme === "branded" ? "0 4px 16px rgba(99, 102, 241, 0.4)" : "0 4px 12px rgba(0, 0, 0, 0.12)";
+  }
+  const labelStyles = {
+    ...baseLabelStyle,
+    color: accentColor || (theme === "branded" ? "rgba(255,255,255,0.8)" : void 0),
+    ...labelStyle
+  };
+  const textStyles = {
+    margin: 0,
+    ...textStyle
+  };
+  const handleClickInternal = (e) => {
+    handleClick();
+    onClick?.();
+    if (!ad.clickUrl) {
+      e.preventDefault();
+    }
+  };
+  const linkProps = ad.clickUrl ? {
+    href: ad.clickUrl,
+    target: openInNewTab ? "_blank" : void 0,
+    rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored"
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...linkProps,
+      className,
+      style: containerStyles,
+      onClick: handleClickInternal,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      "data-gravity-ad": true,
+      children: [
+        showLabel && /* @__PURE__ */ jsx("span", { style: labelStyles, children: labelText }),
+        /* @__PURE__ */ jsx("p", { className: textClassName, style: textStyles, children: ad.adText })
+      ]
+    }
+  );
+}
+AdBanner.displayName = "GravityAdBanner";
+
+// src/components/AdText.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function AdText({
+  ad,
+  className,
+  style,
+  onClick,
+  onImpression,
+  onClickTracked,
+  fallback = null,
+  disableImpressionTracking = false,
+  openInNewTab = true
+}) {
+  const { handleClick } = useAdTracking({
+    ad,
+    disableImpressionTracking,
+    onImpression,
+    onClickTracked
+  });
+  if (!ad) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: fallback });
+  }
+  const handleClickInternal = (e) => {
+    handleClick();
+    onClick?.();
+    if (!ad.clickUrl) {
+      e.preventDefault();
+    }
+  };
+  const baseStyle = {
+    textDecoration: "none",
+    color: "inherit",
+    cursor: ad.clickUrl ? "pointer" : "default",
+    ...style
+  };
+  if (ad.clickUrl) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href: ad.clickUrl,
+        target: openInNewTab ? "_blank" : void 0,
+        rel: openInNewTab ? "noopener noreferrer sponsored" : "sponsored",
+        className,
+        style: baseStyle,
+        onClick: handleClickInternal,
+        "data-gravity-ad": true,
+        children: ad.adText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2("span", { className, style: baseStyle, "data-gravity-ad": true, children: ad.adText });
+}
+AdText.displayName = "GravityAdText";
+export {
+  AdBanner,
+  AdText,
+  useAdTracking
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@gravity-ai/react",
+  "version": "0.1.0",
+  "description": "React components for rendering Gravity AI advertisements",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react",
+    "clean": "rm -rf dist",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts --external react",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run clean && npm run build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "publish:patch": "npm run version:patch && npm publish",
+    "publish:minor": "npm run version:minor && npm publish",
+    "publish:major": "npm run version:major && npm publish"
+  },
+  "keywords": [
+    "gravity",
+    "advertising",
+    "react",
+    "ads",
+    "typescript",
+    "contextual-advertising",
+    "ai-ads",
+    "ad-component"
+  ],
+  "author": "Gravity Team",
+  "license": "MIT",
+  "homepage": "https://github.com/Try-Gravity/gravity-js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Try-Gravity/gravity-js.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Try-Gravity/gravity-js/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.48",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.1"
+  }
+}
+