@limboai/react 0.1.0

package/dist/ui/default/LimboImage.d.ts

@@ -0,0 +1,66 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import { type CSSProperties, type ImgHTMLAttributes } from "react";
+import type { InteractionModeType, PassportVariantType, ValidationStatusType } from "../../types";
+import { type BadgePositionType, type ThemeType } from "./constants";
+export interface LimboImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "onError"> {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation?: C2PAValidationResponse | null;
+    /** Current validation status */
+    validationStatus?: ValidationStatusType;
+    /** Native img onError handler */
+    onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
+    /** Position of the badge (default: 'top-right') */
+    badgePosition?: BadgePositionType;
+    /** Color theme (default: 'light') */
+    theme?: ThemeType;
+    /** Passport variant - basic shows issuer/date, full shows all fields (default: 'basic') */
+    passportVariant?: PassportVariantType;
+    /** Interaction mode - click or hover to show passport (default: 'click') */
+    interactionMode?: InteractionModeType;
+    /** Whether to show the date field in passport (default: true) */
+    showDate?: boolean;
+    /** Delay in ms before hiding the tooltip (default: 300ms) */
+    hideDelay?: number;
+    /** Whether to enable automatic HEIC conversion (default: true) */
+    enableHeicConversion?: boolean;
+    /** Additional inline styles for the wrapper div */
+    wrapperStyle?: CSSProperties;
+}
+/**
+ * LimboImage - Pre-styled image component with default badge and passport
+ *
+ * A ready-to-use image component that displays content credentials with
+ * a pre-configured badge and passport tooltip.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with click interaction
+ * <LimboImage
+ *   src="/photo.jpg"
+ *   alt="Photo"
+ *   validation={validation}
+ *   validationStatus="success"
+ * />
+ *
+ * // With hover interaction and dark theme
+ * <LimboImage
+ *   src="/photo.jpg"
+ *   alt="Photo"
+ *   validation={validation}
+ *   validationStatus="success"
+ *   interactionMode="hover"
+ *   theme="dark"
+ *   badgePosition="bottomRight"
+ * />
+ *
+ * // Full passport variant
+ * <LimboImage
+ *   src="/photo.jpg"
+ *   alt="Photo"
+ *   validation={validation}
+ *   validationStatus="success"
+ *   passportVariant="full"
+ * />
+ * ```
+ */
+export declare const LimboImage: import("react").ForwardRefExoticComponent<LimboImageProps & import("react").RefAttributes<HTMLImageElement>>;

package/dist/ui/default/LimboPassport.d.ts

@@ -0,0 +1,30 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import type { CSSProperties, FC } from "react";
+import type { PassportVariantType } from "../../types";
+import { type BadgePositionType, type ThemeType } from "./constants";
+export interface LimboPassportProps {
+    /** Validation result from @limboai/node SDK */
+    validation: C2PAValidationResponse;
+    /** Whether the passport is visible */
+    isVisible: boolean;
+    /** Theme for the passport */
+    theme?: ThemeType;
+    /** Position (determines tooltip placement) */
+    position?: BadgePositionType;
+    /** Passport variant - basic shows issuer/date, full shows all fields */
+    variant?: PassportVariantType;
+    /** Whether to show the date field */
+    showDate?: boolean;
+    /** Mouse enter handler */
+    onMouseEnter?: () => void;
+    /** Close handler */
+    onClose?: () => void;
+    /** Additional inline styles for the container */
+    style?: CSSProperties;
+}
+/**
+ * LimboPassport - Pre-styled passport tooltip component
+ *
+ * Renders a passport with configurable variant (basic or full).
+ */
+export declare const LimboPassport: FC<LimboPassportProps>;

package/dist/ui/default/LimboVideo.d.ts

@@ -0,0 +1,64 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import { type CSSProperties, type VideoHTMLAttributes } from "react";
+import type { InteractionModeType, PassportVariantType, ValidationStatusType } from "../../types";
+import { type BadgePositionType, type ThemeType } from "./constants";
+export interface LimboVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, "onError"> {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation?: C2PAValidationResponse | null;
+    /** Current validation status */
+    validationStatus?: ValidationStatusType;
+    /** Native video onError handler */
+    onError?: VideoHTMLAttributes<HTMLVideoElement>["onError"];
+    /** Position of the badge (default: 'top-right') */
+    badgePosition?: BadgePositionType;
+    /** Color theme (default: 'light') */
+    theme?: ThemeType;
+    /** Passport variant - basic shows issuer/date, full shows all fields (default: 'basic') */
+    passportVariant?: PassportVariantType;
+    /** Interaction mode - click or hover to show passport (default: 'click') */
+    interactionMode?: InteractionModeType;
+    /** Whether to show the date field in passport (default: true) */
+    showDate?: boolean;
+    /** Delay in ms before hiding the tooltip (default: 300ms) */
+    hideDelay?: number;
+    /** Additional inline styles for the wrapper div */
+    wrapperStyle?: CSSProperties;
+}
+/**
+ * LimboVideo - Pre-styled video component with default badge and passport
+ *
+ * A ready-to-use video component that displays content credentials with
+ * a pre-configured badge and passport tooltip.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with click interaction
+ * <LimboVideo
+ *   src="/video.mp4"
+ *   controls
+ *   validation={validation}
+ *   validationStatus="success"
+ * />
+ *
+ * // With hover interaction and dark theme
+ * <LimboVideo
+ *   src="/video.mp4"
+ *   controls
+ *   validation={validation}
+ *   validationStatus="success"
+ *   interactionMode="hover"
+ *   theme="dark"
+ *   badgePosition="bottomRight"
+ * />
+ *
+ * // Full passport variant
+ * <LimboVideo
+ *   src="/video.mp4"
+ *   controls
+ *   validation={validation}
+ *   validationStatus="success"
+ *   passportVariant="full"
+ * />
+ * ```
+ */
+export declare const LimboVideo: import("react").ForwardRefExoticComponent<LimboVideoProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/ui/default/constants.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+export declare const BadgePosition: {
+    readonly TopRight: "top-right";
+    readonly TopLeft: "top-left";
+    readonly BottomRight: "bottom-right";
+    readonly BottomLeft: "bottom-left";
+};
+export type BadgePositionType = (typeof BadgePosition)[keyof typeof BadgePosition];
+export declare const PassportVariant: {
+    readonly Basic: "basic";
+    readonly Full: "full";
+};
+export type PassportVariantType = (typeof PassportVariant)[keyof typeof PassportVariant];
+export declare const Theme: {
+    readonly Light: "light";
+    readonly Dark: "dark";
+};
+export type ThemeType = (typeof Theme)[keyof typeof Theme];
+export declare const wrapperStyle: CSSProperties;

package/dist/ui/default/index.d.ts

@@ -0,0 +1,10 @@
+export type { BadgePositionType, PassportVariantType, ThemeType, } from "./constants";
+export { BadgePosition, PassportVariant, Theme } from "./constants";
+export type { LimboBadgeProps } from "./LimboBadge";
+export { LimboBadge } from "./LimboBadge";
+export type { LimboImageProps } from "./LimboImage";
+export { LimboImage } from "./LimboImage";
+export type { LimboPassportProps } from "./LimboPassport";
+export { LimboPassport } from "./LimboPassport";
+export type { LimboVideoProps } from "./LimboVideo";
+export { LimboVideo } from "./LimboVideo";

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./core";
+export * from "./default";
+export * from "./media";

package/dist/ui/media/MediaImage.d.ts

@@ -0,0 +1,87 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import { type CSSProperties, type ImgHTMLAttributes, type ReactNode } from "react";
+import type { RenderBadgeProps, RenderTooltipProps, ValidationStatusType } from "../../types";
+export interface MediaImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "onError"> {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation?: C2PAValidationResponse | null;
+    /** Current validation status */
+    validationStatus?: ValidationStatusType;
+    /** Native img onError handler */
+    onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
+    /** CSS class for the wrapper div (required for positioning badge/tooltip) */
+    wrapperClassName?: string;
+    /** Inline styles for the wrapper div */
+    wrapperStyle?: CSSProperties;
+    /** Custom badge render function */
+    renderBadge?: (props: RenderBadgeProps) => ReactNode;
+    /** Custom tooltip render function */
+    renderTooltip?: (props: RenderTooltipProps) => ReactNode;
+    /** Delay in ms before hiding the tooltip (default: 300ms) */
+    hideDelay?: number;
+    /** Whether to enable automatic HEIC conversion (default: true) */
+    enableHeicConversion?: boolean;
+}
+/**
+ * MediaImage - Headless image component with built-in credential overlay support
+ *
+ * A minimal image component that handles HEIC to JPEG conversion and provides
+ * built-in support for displaying credential badges and tooltips via render props.
+ *
+ * This component is headless - it applies no styles. Users must provide
+ * all styling through className, style props, or render functions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - just the image with HEIC support
+ * <MediaImage src="/photo.heic" alt="Photo" className="w-full h-auto" />
+ *
+ * // With built-in overlay (using render props)
+ * <MediaImage
+ *   src="/photo.jpg"
+ *   alt="Photo"
+ *   validation={validation}
+ *   validationStatus="success"
+ *   wrapperClassName="relative inline-block"
+ *   className="w-80 h-60 object-cover rounded-lg"
+ *   renderBadge={({ status, hasCredentials, toggle }) => (
+ *     <button
+ *       onClick={toggle}
+ *       className="absolute top-2 right-2 bg-green-500 rounded-full p-2"
+ *     >
+ *       <CRLogo size={16} />
+ *     </button>
+ *   )}
+ *   renderTooltip={({ validation, isVisible, onClose }) =>
+ *     isVisible && (
+ *       <div className="absolute top-14 right-0 bg-white shadow-lg rounded-lg p-4">
+ *         <Passport.Root validation={validation}>
+ *           <Passport.Header>...</Passport.Header>
+ *           <Passport.Field name="issuer" />
+ *           <Passport.Footer>
+ *             <Passport.CopyButton />
+ *           </Passport.Footer>
+ *         </Passport.Root>
+ *       </div>
+ *     )
+ *   }
+ * />
+ *
+ * // With compound components (external overlay)
+ * <div className="relative">
+ *   <MediaImage src="/photo.jpg" alt="Photo" className="w-full" />
+ *   <CredentialOverlay.Root validation={validation} status="success">
+ *     <CredentialOverlay.Trigger className="absolute top-2 right-2">
+ *       <CredentialBadge.Root status="success" hasCredentials={true}>
+ *         <CredentialBadge.Verified>
+ *           <button className="bg-green-500 p-2 rounded-full">OK</button>
+ *         </CredentialBadge.Verified>
+ *       </CredentialBadge.Root>
+ *     </CredentialOverlay.Trigger>
+ *     <CredentialOverlay.Content className="absolute top-12 right-0">
+ *       <Passport.Root validation={validation}>...</Passport.Root>
+ *     </CredentialOverlay.Content>
+ *   </CredentialOverlay.Root>
+ * </div>
+ * ```
+ */
+export declare const MediaImage: import("react").ForwardRefExoticComponent<MediaImageProps & import("react").RefAttributes<HTMLImageElement>>;

package/dist/ui/media/MediaVideo.d.ts

@@ -0,0 +1,85 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import { type CSSProperties, type ReactNode, type VideoHTMLAttributes } from "react";
+import type { RenderBadgeProps, RenderTooltipProps, ValidationStatusType } from "../../types";
+export interface MediaVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, "onError"> {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation?: C2PAValidationResponse | null;
+    /** Current validation status */
+    validationStatus?: ValidationStatusType;
+    /** Native video onError handler */
+    onError?: VideoHTMLAttributes<HTMLVideoElement>["onError"];
+    /** CSS class for the wrapper div (required for positioning badge/tooltip) */
+    wrapperClassName?: string;
+    /** Inline styles for the wrapper div */
+    wrapperStyle?: CSSProperties;
+    /** Custom badge render function */
+    renderBadge?: (props: RenderBadgeProps) => ReactNode;
+    /** Custom tooltip render function */
+    renderTooltip?: (props: RenderTooltipProps) => ReactNode;
+    /** Delay in ms before hiding the tooltip (default: 300ms) */
+    hideDelay?: number;
+}
+/**
+ * MediaVideo - Headless video component with built-in credential overlay support
+ *
+ * A minimal video component for use with C2PA credentials. Provides built-in
+ * support for displaying credential badges and tooltips via render props.
+ *
+ * This component is headless - it applies no styles. Users must provide
+ * all styling through className, style props, or render functions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - just the video
+ * <MediaVideo src="/video.mp4" controls className="w-full h-auto" />
+ *
+ * // With built-in overlay (using render props)
+ * <MediaVideo
+ *   src="/video.mp4"
+ *   controls
+ *   validation={validation}
+ *   validationStatus="success"
+ *   wrapperClassName="relative inline-block"
+ *   className="w-80 h-60 object-cover rounded-lg"
+ *   renderBadge={({ status, hasCredentials, toggle }) => (
+ *     <button
+ *       onClick={toggle}
+ *       className="absolute top-2 right-2 bg-green-500 rounded-full p-2"
+ *     >
+ *       <CRLogo size={16} />
+ *     </button>
+ *   )}
+ *   renderTooltip={({ validation, isVisible, onClose }) =>
+ *     isVisible && (
+ *       <div className="absolute top-14 right-0 bg-white shadow-lg rounded-lg p-4">
+ *         <Passport.Root validation={validation}>
+ *           <Passport.Header>...</Passport.Header>
+ *           <Passport.Field name="issuer" />
+ *           <Passport.Footer>
+ *             <Passport.CopyButton />
+ *           </Passport.Footer>
+ *         </Passport.Root>
+ *       </div>
+ *     )
+ *   }
+ * />
+ *
+ * // With compound components (external overlay)
+ * <div className="relative">
+ *   <MediaVideo src="/video.mp4" controls className="w-full" />
+ *   <CredentialOverlay.Root validation={validation} status="success">
+ *     <CredentialOverlay.Trigger className="absolute top-2 right-2">
+ *       <CredentialBadge.Root status="success" hasCredentials={true}>
+ *         <CredentialBadge.Verified>
+ *           <button className="bg-green-500 p-2 rounded-full">OK</button>
+ *         </CredentialBadge.Verified>
+ *       </CredentialBadge.Root>
+ *     </CredentialOverlay.Trigger>
+ *     <CredentialOverlay.Content className="absolute top-12 right-0">
+ *       <Passport.Root validation={validation}>...</Passport.Root>
+ *     </CredentialOverlay.Content>
+ *   </CredentialOverlay.Root>
+ * </div>
+ * ```
+ */
+export declare const MediaVideo: import("react").ForwardRefExoticComponent<MediaVideoProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/ui/media/context/MediaContext.d.ts

@@ -0,0 +1,19 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import type { ValidationStatusType } from "../../../types";
+export interface MediaContextValue {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation: C2PAValidationResponse | null;
+    /** Current validation status */
+    status: ValidationStatusType;
+    /** Whether the content has credentials */
+    hasCredentials: boolean;
+    /** Whether the tooltip is currently visible */
+    isVisible: boolean;
+    /** Show the tooltip */
+    show: () => void;
+    /** Hide the tooltip (with delay) */
+    hide: () => void;
+    /** Toggle tooltip visibility */
+    toggle: () => void;
+}
+export declare const MediaContext: import("react").Context<MediaContextValue | null>;

package/dist/ui/media/context/index.d.ts

@@ -0,0 +1 @@
+export type { MediaContextValue } from "./MediaContext";

package/dist/ui/media/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export type { UseHeicConversionOptions, UseHeicConversionReturn, } from "./useHeicConversion";
+export { useHeicConversion } from "./useHeicConversion";
+export { useMediaContext } from "./useMediaContext";

package/dist/ui/media/hooks/useHeicConversion.d.ts

@@ -0,0 +1,32 @@
+export interface UseHeicConversionOptions {
+    src: string | undefined;
+    enabled?: boolean;
+    quality?: number;
+}
+export interface UseHeicConversionReturn {
+    displaySrc: string | undefined;
+    isConverting: boolean;
+    error: string | null;
+}
+/**
+ * Hook for automatic HEIC to JPEG conversion
+ *
+ * Uses AbortController for proper cleanup and race condition handling.
+ * Automatically revokes blob URLs on cleanup.
+ *
+ * @example
+ * ```tsx
+ * const { displaySrc, isConverting, error } = useHeicConversion({
+ *   src: imageUrl,
+ *   enabled: true,
+ * });
+ *
+ * return (
+ *   <img
+ *     src={displaySrc}
+ *     data-converting={isConverting || undefined}
+ *   />
+ * );
+ * ```
+ */
+export declare function useHeicConversion({ src, enabled, }: UseHeicConversionOptions): UseHeicConversionReturn;

package/dist/ui/media/hooks/useMediaContext.d.ts

@@ -0,0 +1,13 @@
+import { type MediaContextValue } from "../context/MediaContext";
+/**
+ * Hook to access Media context
+ *
+ * Use this hook inside MediaImage/MediaVideo render props to access
+ * the media context including validation data and overlay visibility state.
+ *
+ * @example
+ * ```tsx
+ * const { validation, status, isVisible, toggle } = useMediaContext();
+ * ```
+ */
+export declare function useMediaContext(): MediaContextValue;

package/dist/ui/media/hooks/useMediaOverlay.d.ts

@@ -0,0 +1,37 @@
+import type { C2PAValidationResponse } from "@limboai/node";
+import type { RenderBadgeProps, RenderTooltipProps, ValidationStatusType } from "../../../types";
+import type { MediaContextValue } from "../context";
+export interface UseMediaOverlayOptions {
+    /** Validation result from @limboai/node SDK (null if not validated yet) */
+    validation: C2PAValidationResponse | null;
+    /** Current validation status */
+    validationStatus: ValidationStatusType;
+    /** Delay in ms before hiding the tooltip (default: 300ms) */
+    hideDelay?: number;
+}
+export interface UseMediaOverlayReturn {
+    /** Whether the content has credentials */
+    hasCredentials: boolean;
+    /** Context value for MediaContext.Provider */
+    contextValue: MediaContextValue;
+    /** Props for the renderBadge callback */
+    badgeProps: RenderBadgeProps;
+    /** Props for the renderTooltip callback (null if no validation) */
+    tooltipProps: RenderTooltipProps | null;
+}
+/**
+ * Shared hook for overlay state management in media components
+ *
+ * Extracts common logic used by both MediaImage and MediaVideo components
+ * for managing tooltip visibility and building render props.
+ *
+ * @example
+ * ```tsx
+ * const { hasCredentials, contextValue, badgeProps, tooltipProps } = useMediaOverlay({
+ *   validation,
+ *   validationStatus,
+ *   hideDelay: 300,
+ * });
+ * ```
+ */
+export declare function useMediaOverlay({ validation, validationStatus, hideDelay, }: UseMediaOverlayOptions): UseMediaOverlayReturn;

package/dist/ui/media/index.d.ts

@@ -0,0 +1,5 @@
+export { useHeicConversion, useMediaContext } from "./hooks";
+export type { MediaImageProps } from "./MediaImage";
+export { MediaImage } from "./MediaImage";
+export type { MediaVideoProps } from "./MediaVideo";
+export { MediaVideo } from "./MediaVideo";

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@limboai/react",
+	"version": "0.1.0",
+	"type": "module",
+	"description": "Limbo AI React Components - Headless components for C2PA content credential display",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": false,
+	"scripts": {
+		"dev": "storybook dev -p 6006",
+		"build": "yarn dlx rolldown -c && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+		"build:storybook": "storybook build",
+		"typecheck": "tsc --noEmit"
+	},
+	"peerDependencies": {
+		"@limboai/node": ">=0.1.0",
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@limboai/node": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"heic2any": "^0.0.4"
+	},
+	"devDependencies": {
+		"@limboai/node": "workspace:*",
+		"@storybook/react": "10.2.1",
+		"@storybook/react-vite": "10.2.1",
+		"@types/react": "^19.2.10",
+		"@types/react-dom": "^19.2.3",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"storybook": "10.2.1",
+		"tsc-alias": "^1.8.16",
+		"tslib": "^2.8.1",
+		"typescript": "~5.9.3",
+		"vite": "^7.3.1"
+	},
+	"engines": {
+		"node": ">=20"
+	},
+	"keywords": [
+		"react",
+		"c2pa",
+		"content-credentials",
+		"image-validation",
+		"limbo",
+		"ai",
+		"headless",
+		"ssr"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/limboai/limbo-components"
+	},
+	"license": "MIT"
+}