@limboai/react 0.1.0

package/README.md

@@ -0,0 +1,134 @@
+# @limboai/react
+
+Headless React components for displaying [C2PA](https://c2pa.org/) content credentials.
+
+## Installation
+
+```bash
+yarn add @limboai/react
+```
+
+## Storybook
+
+See the Storybook for live examples and usage patterns:
+
+```bash
+yarn dev
+```
+
+Opens at [http://localhost:6006](http://localhost:6006).
+
+## Public API
+
+### Compound Components
+
+- **Passport** - Object with `.Root`, `.Header`, `.Field`, `.Actions`, `.Identities`, `.Signers`, `.Footer`, `.CopyButton`, `.Logo`, `.Title`
+- **CredentialBadge** - Object with `.Root`, `.Loading`, `.Verified`, `.NoCredentials`, `.Error`, `.Idle`
+- **CredentialOverlay** - Object with `.Root`, `.Trigger`, `.Content`
+
+### Context Hooks (for advanced usage inside render props)
+
+- `usePassportContext` - Access passport data within Passport.Root
+- `useCredentialBadgeContext` - Access badge state within CredentialBadge.Root
+- `useCredentialOverlayContext` - Access overlay state within CredentialOverlay.Root
+- `useMediaContext` - Access media context within MediaImage/MediaVideo render props
+
+### Headless Media Components
+
+- `MediaImage` - Image component with credential overlay support
+- `MediaVideo` - Video component with credential overlay support
+
+### Pre-styled Components
+
+- `LimboImage` - Ready-to-use image with badge and passport
+- `LimboVideo` - Ready-to-use video with badge and passport
+- `LimboBadge` - Pre-styled credential badge
+- `LimboPassport` - Pre-styled passport tooltip
+
+### User-facing Hooks
+
+- `usePassportData` - Extract passport data from validation response
+- `useHeicConversion` - HEIC to JPEG conversion utility
+- `useTooltipVisibility` - Tooltip state management with delayed hide
+
+### Constants & Types
+
+- `BadgePosition`, `BadgePositionType` - Badge positioning options
+- `Theme`, `ThemeType` - Light/dark theme options
+- `PassportVariant`, `PassportVariantType` - Passport display variants
+- `ValidationStatus`, `ValidationStatusType` - Validation states
+- Core types: `C2PAValidationResponse`, `PassportData`, `SignerInfo`, `IdentityInfo`, etc.
+
+### Icons
+
+- `CRLogo` - Content Credentials logo
+- `LinkedInIcon` - LinkedIn icon for identity display
+
+## Usage Examples
+
+### Headless Passport
+
+```tsx
+import { Passport } from "@limboai/react";
+
+<Passport.Root validation={validation}>
+  <Passport.Header>
+    <Passport.Logo className="w-6 h-6" />
+    <Passport.Title className="text-lg font-bold" />
+  </Passport.Header>
+
+  <Passport.Field name="issuer" />
+  <Passport.Field name="date" />
+
+  <Passport.Actions>
+    {(actions) => actions.map(a => <span key={a}>{a}</span>)}
+  </Passport.Actions>
+
+  <Passport.Footer>
+    <Passport.CopyButton />
+  </Passport.Footer>
+</Passport.Root>
+```
+
+### Headless Badge + Overlay
+
+```tsx
+import { CredentialBadge, CredentialOverlay, Passport } from "@limboai/react";
+
+<CredentialOverlay.Root validation={validation} status={status}>
+  <CredentialOverlay.Trigger>
+    <CredentialBadge.Root status={status} hasCredentials={hasCredentials}>
+      <CredentialBadge.Verified>
+        <CheckIcon className="text-green-500" />
+      </CredentialBadge.Verified>
+      <CredentialBadge.Loading>
+        <Spinner />
+      </CredentialBadge.Loading>
+    </CredentialBadge.Root>
+  </CredentialOverlay.Trigger>
+
+  <CredentialOverlay.Content>
+    <Passport.Root validation={validation}>
+      ...
+    </Passport.Root>
+  </CredentialOverlay.Content>
+</CredentialOverlay.Root>
+```
+
+### Pre-styled Components
+
+```tsx
+import { LimboImage, BadgePosition, Theme } from "@limboai/react";
+
+<LimboImage
+  src="/photo.jpg"
+  validation={validation}
+  status={status}
+  badgePosition={BadgePosition.TopRight}
+  theme={Theme.Light}
+/>
+```
+
+## License
+
+MIT

package/dist/icons/CRLogo.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, FC } from "react";
+export interface CRLogoProps {
+    className?: string;
+    style?: CSSProperties;
+    size?: number;
+}
+/**
+ * Content Credentials (CR) Logo
+ *
+ * Based on the Content Authenticity Initiative logo
+ */
+export declare const CRLogo: FC<CRLogoProps>;

package/dist/icons/LinkedInIcon.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, FC } from "react";
+export interface LinkedInIconProps {
+    className?: string;
+    style?: CSSProperties;
+    size?: number;
+    color?: string;
+}
+/**
+ * LinkedIn Icon as inline SVG
+ *
+ * Used for LinkedIn identity verification links
+ */
+export declare const LinkedInIcon: FC<LinkedInIconProps>;

package/dist/icons/index.d.ts

@@ -0,0 +1,4 @@
+export type { CRLogoProps } from "./CRLogo";
+export { CRLogo } from "./CRLogo";
+export type { LinkedInIconProps } from "./LinkedInIcon";
+export { LinkedInIcon } from "./LinkedInIcon";