@gravity-ai/react 1.1.4 → 1.1.6

package/dist/index.d.ts

@@ -1,154 +1,142 @@
 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 {
-    /** The advertisement copy text */
     adText: string;
-    /** Ad title */
     title?: string;
-    /** Call-to-action text (e.g., 'Learn More', 'Shop Now') */
     cta?: string;
-    /** Brand/advertiser name */
     brandName?: string;
-    /** Landing page URL */
     url?: string;
-    /** Favicon URL */
     favicon?: string;
-    /** Impression tracking URL - fire this when ad is displayed */
     impUrl?: string;
-    /** Click-through tracking URL - use this as href for ad clicks */
     clickUrl?: string;
 }
+type GravityAdVariant = 'card' | 'inline' | 'minimal' | 'bubble' | 'contextual' | 'native' | 'footnote' | 'quote' | 'suggestion' | 'accent' | 'side-panel' | 'labeled' | 'spotlight' | 'embed' | 'split-action' | 'pill' | 'banner' | 'divider' | 'toolbar' | 'tooltip' | 'notification' | 'hyperlink' | 'text-link';
 /**
- * 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
+ * Style + className overrides for individual elements inside `<GravityAd />`.
+ *
+ * Each key maps 1:1 to a DOM element in the component's JSX tree.
+ * Pass `style` to merge onto the element's inline styles, or `className`
+ * to append a CSS class.
  */
-interface AdBannerProps {
-    /** The ad response from Gravity API */
+interface GravityAdSlotProps {
+    /** Outer `<a>` wrapper (same as the top-level `style`/`className` props) */
+    container?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Inner padding/layout wrapper */
+    inner?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Header row (favicon + brand + label) */
+    header?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Favicon `<img>` */
+    favicon?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Brand name `<span>` */
+    brand?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** "Sponsored" label `<span>` */
+    label?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Body wrapper (title + text) */
+    body?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Title `<p>` */
+    title?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Ad text `<p>` */
+    text?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** CTA button `<span>` */
+    cta?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Icon wrapper (larger background container around favicon) */
+    iconWrapper?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Colored accent bar (top of `accent` variant) */
+    accentBar?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Secondary CTA (`split-action` variant) */
+    secondaryCta?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Footer area */
+    footer?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Tooltip arrow element */
+    arrow?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+    /** Context header text (`contextual` variant) */
+    contextHeader?: {
+        style?: CSSProperties;
+        className?: string;
+    };
+}
+interface GravityAdProps {
     ad: AdResponse | null;
-    /** Visual theme preset */
-    theme?: AdTheme;
-    /** Size preset */
-    size?: AdSize;
-    /** Custom class name for the container */
+    variant?: GravityAdVariant;
     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 */
+    /** Targeted style overrides for inner elements. */
+    slotProps?: GravityAdSlotProps;
     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, sessionId, placements }).then(res => setAd(res?.[0] || null));
- *   }, [messages]);
- *
- *   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 {
+declare function GravityAd({ ad, variant, className, style, slotProps, showLabel, labelText, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, }: GravityAdProps): react_jsx_runtime.JSX.Element;
+declare namespace GravityAd {
     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"
- *     />
- *   );
- * }
- * ```
+ * Unstyled text-only ad renderer with automatic tracking.
+ * Use when you want full control over presentation.
  */
 declare function AdText({ ad, className, style, onClick, onImpression, onClickTracked, fallback, disableImpressionTracking, openInNewTab, }: AdTextProps): react_jsx_runtime.JSX.Element;
 declare namespace AdText {
@@ -161,12 +149,11 @@ interface UseAdTrackingOptions {
     onImpression?: () => void;
     onClickTracked?: () => void;
 }
-/**
- * Hook to handle ad impression and click tracking
- */
-declare function useAdTracking({ ad, disableImpressionTracking, onImpression, onClickTracked, }: UseAdTrackingOptions): {
+interface UseAdTrackingReturn {
+    containerRef: React.RefObject<HTMLElement | null>;
     handleClick: () => void;
-    impressionTracked: boolean;
-};
+    impressionFired: boolean;
+}
+declare function useAdTracking({ ad, disableImpressionTracking, onImpression, onClickTracked, }: UseAdTrackingOptions): UseAdTrackingReturn;
 
-export { AdBanner, type AdBannerProps, type AdResponse, type AdSize, AdText, type AdTextProps, type AdTheme, useAdTracking };
+export { type AdResponse, AdText, type AdTextProps, GravityAd, type GravityAdProps, type GravityAdSlotProps, type GravityAdVariant, useAdTracking };