@appforgeapps/uiforge 0.1.0 → 0.5.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { default as default_2 } from 'react';
+import { FC } from 'react';
 import { JSX } from 'react/jsx-runtime';
 
 /**
@@ -43,16 +44,22 @@ export declare interface ActivityEvent {
     children?: ActivityEvent[];
 }
 
+/**
+ * Icon Maps - Icon lookup tables for easy access to icon components
+ *
+ * These maps are in a separate file to avoid React Fast Refresh issues
+ * when exporting both components and constants from the same file.
+ */
 export declare const ActivityIcons: {
-    commit: default_2.FC<IconProps>;
-    pr: default_2.FC<IconProps>;
-    issue: default_2.FC<IconProps>;
-    comment: default_2.FC<IconProps>;
-    star: default_2.FC<IconProps>;
-    fork: default_2.FC<IconProps>;
-    merge: default_2.FC<IconProps>;
-    release: default_2.FC<IconProps>;
-    deploy: default_2.FC<IconProps>;
+    commit: FC<IconProps>;
+    pr: FC<IconProps>;
+    issue: FC<IconProps>;
+    comment: FC<IconProps>;
+    star: FC<IconProps>;
+    fork: FC<IconProps>;
+    merge: FC<IconProps>;
+    release: FC<IconProps>;
+    deploy: FC<IconProps>;
 };
 
 /**
@@ -94,11 +101,11 @@ export declare const BugIcon: default_2.FC<IconProps>;
 export declare const BuildIcon: default_2.FC<IconProps>;
 
 export declare const BusinessIcons: {
-    chart: default_2.FC<IconProps>;
-    meeting: default_2.FC<IconProps>;
-    document: default_2.FC<IconProps>;
-    calendar: default_2.FC<IconProps>;
-    briefcase: default_2.FC<IconProps>;
+    chart: FC<IconProps>;
+    meeting: FC<IconProps>;
+    document: FC<IconProps>;
+    calendar: FC<IconProps>;
+    briefcase: FC<IconProps>;
 };
 
 /**
@@ -196,35 +203,83 @@ export declare const DeployIcon: default_2.FC<IconProps>;
 
 export declare const DeploymentIcon: default_2.FC<IconProps>;
 
+/**
+ * Detect which video provider handles a given URL
+ * @param url - The video URL to analyze
+ * @returns The matching VideoProvider or null if not found
+ */
+export declare function detectProvider(url: string): VideoProvider | null;
+
 export declare const DevProcessIcons: {
-    gitbranch: default_2.FC<IconProps>;
-    prdraft: default_2.FC<IconProps>;
-    testing: default_2.FC<IconProps>;
-    deployment: default_2.FC<IconProps>;
-    review: default_2.FC<IconProps>;
-    build: default_2.FC<IconProps>;
+    gitbranch: FC<IconProps>;
+    prdraft: FC<IconProps>;
+    testing: FC<IconProps>;
+    deployment: FC<IconProps>;
+    review: FC<IconProps>;
+    build: FC<IconProps>;
 };
 
 export declare const DocumentIcon: default_2.FC<IconProps>;
 
 export declare const DumbbellIcon: default_2.FC<IconProps>;
 
+/**
+ * Options for video embedding
+ */
+export declare interface EmbedOptions {
+    /**
+     * Enable autoplay (note: most browsers require muted=true for autoplay to work)
+     */
+    autoplay?: boolean;
+    /**
+     * Mute the video by default
+     */
+    muted?: boolean;
+    /**
+     * Loop the video
+     */
+    loop?: boolean;
+    /**
+     * Start time in seconds
+     */
+    startTime?: number;
+    /**
+     * Show video controls
+     */
+    controls?: boolean;
+}
+
 /**
  * Export format options
  */
 export declare type ExportFormat = 'json' | 'html' | 'markdown';
 
+/**
+ * Extract video ID from a URL using the appropriate provider
+ * @param url - The video URL to parse
+ * @returns Object containing the provider and video ID, or null if not found
+ */
+export declare function extractVideoId(url: string): VideoIdExtractionResult | null;
+
 export declare const FitnessIcons: {
-    dumbbell: default_2.FC<IconProps>;
-    running: default_2.FC<IconProps>;
-    heartrate: default_2.FC<IconProps>;
-    strength: default_2.FC<IconProps>;
+    dumbbell: FC<IconProps>;
+    running: FC<IconProps>;
+    heartrate: FC<IconProps>;
+    strength: FC<IconProps>;
 };
 
 export declare const FoldIcon: default_2.FC<IconProps>;
 
 export declare const ForkIcon: default_2.FC<IconProps>;
 
+/**
+ * Get embed URL from a video URL
+ * @param url - The video URL
+ * @param options - Embed options
+ * @returns The embed URL or null if not found
+ */
+export declare function getEmbedUrlFromVideoUrl(url: string, options?: Parameters<VideoProvider['getEmbedUrl']>[1]): string | null;
+
 export declare const GitBranchIcon: default_2.FC<IconProps>;
 
 /**
@@ -321,6 +376,13 @@ export declare interface IconProps {
     color?: string;
 }
 
+/**
+ * Check if a URL is from an adult content provider
+ * @param url - The video URL to check
+ * @returns true if the URL is from an adult content provider
+ */
+export declare function isAdultContent(url: string): boolean;
+
 export declare const IssueIcon: default_2.FC<IconProps>;
 
 export declare const MeditationIcon: default_2.FC<IconProps>;
@@ -331,6 +393,11 @@ export declare const MergeIcon: default_2.FC<IconProps>;
 
 export declare const PlanetIcon: default_2.FC<IconProps>;
 
+/**
+ * Map of provider names to provider objects for quick lookup
+ */
+export declare const providersByName: Record<string, VideoProvider>;
+
 export declare const PullRequestDraftIcon: default_2.FC<IconProps>;
 
 export declare const PullRequestIcon: default_2.FC<IconProps>;
@@ -348,11 +415,11 @@ export declare const SatelliteIcon: default_2.FC<IconProps>;
 export declare const ServerIcon: default_2.FC<IconProps>;
 
 export declare const SpaceIcons: {
-    rocket: default_2.FC<IconProps>;
-    satellite: default_2.FC<IconProps>;
-    alien: default_2.FC<IconProps>;
-    planet: default_2.FC<IconProps>;
-    telescope: default_2.FC<IconProps>;
+    rocket: FC<IconProps>;
+    satellite: FC<IconProps>;
+    alien: FC<IconProps>;
+    planet: FC<IconProps>;
+    telescope: FC<IconProps>;
 };
 
 export declare const StarIcon: default_2.FC<IconProps>;
@@ -362,12 +429,12 @@ export declare const StrengthIcon: default_2.FC<IconProps>;
 export declare const TaiChiIcon: default_2.FC<IconProps>;
 
 export declare const TechIcons: {
-    server: default_2.FC<IconProps>;
-    database: default_2.FC<IconProps>;
-    cloud: default_2.FC<IconProps>;
-    terminal: default_2.FC<IconProps>;
-    bug: default_2.FC<IconProps>;
-    code: default_2.FC<IconProps>;
+    server: FC<IconProps>;
+    database: FC<IconProps>;
+    cloud: FC<IconProps>;
+    terminal: FC<IconProps>;
+    bug: FC<IconProps>;
+    code: FC<IconProps>;
 };
 
 export declare const TelescopeIcon: default_2.FC<IconProps>;
@@ -722,24 +789,29 @@ export declare interface UIForgeGridProps<T = Record<string, unknown>> {
 }
 
 /**
- * UIForgeVideo - A video component with overlay that supports YouTube and Vimeo embeds
+ * UIForgeVideo - A universal video component that supports 30+ video platforms
  *
  * Features:
- * - Displays video title and optional description
- * - Supports YouTube and Vimeo video embeds
+ * - Auto-detects video provider from URL
+ * - Supports 30+ video platforms including YouTube, Vimeo, Twitch, and more
  * - Shows thumbnail with overlay icon before playing
- * - Emits event when video is clicked to play
+ * - Emits events for video interactions
  * - Lazy loads the video player on interaction
+ * - Adult content filtering (disabled by default)
+ * - Responsive design with configurable aspect ratios
  *
  * @example
  * ```tsx
+ * // Auto-detect from URL
+ * <UIForgeVideo url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+ *
+ * // With options
  * <UIForgeVideo
- *   title="Introduction to React"
- *   description="Learn React basics in this tutorial"
- *   youtubeId="dQw4w9WgXcQ"
- *   onPlay={(videoId, provider) => {
- *     console.log(`Playing ${provider} video: ${videoId}`)
- *   }}
+ *   url="https://vimeo.com/123456789"
+ *   autoplay={false}
+ *   muted={true}
+ *   aspectRatio="16:9"
+ *   onPlay={(id, provider) => console.log(`Playing ${provider} video ${id}`)}
  * />
  * ```
  */
@@ -790,21 +862,56 @@ export declare interface UIForgeVideoPreviewProps {
  */
 export declare interface UIForgeVideoProps {
     /**
-     * Video title
+     * Video title (optional when using url prop)
      */
-    title: string;
+    title?: string;
     /**
      * Video description
      */
     description?: string;
+    /**
+     * Video URL from any supported platform
+     * The provider and video ID will be automatically detected
+     */
+    url?: string;
     /**
      * YouTube video ID (e.g., "dQw4w9WgXcQ" from https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+     * @deprecated Use url prop instead
      */
     youtubeId?: string;
     /**
      * Vimeo video ID (e.g., "123456789" from https://vimeo.com/123456789)
+     * @deprecated Use url prop instead
      */
     vimeoId?: string;
+    /**
+     * Directly specify the provider name (e.g., "youtube", "vimeo")
+     */
+    provider?: string;
+    /**
+     * Video ID when using direct provider specification
+     */
+    videoId?: string;
+    /**
+     * Enable autoplay (note: most browsers require muted=true for autoplay to work)
+     */
+    autoplay?: boolean;
+    /**
+     * Mute the video by default
+     */
+    muted?: boolean;
+    /**
+     * Loop the video
+     */
+    loop?: boolean;
+    /**
+     * Start time in seconds
+     */
+    startTime?: number;
+    /**
+     * Show video controls (default: true)
+     */
+    controls?: boolean;
     /**
      * Custom thumbnail URL (optional, will use provider's default if not specified)
      */
@@ -812,34 +919,124 @@ export declare interface UIForgeVideoProps {
     /**
      * Callback fired when the video overlay is clicked and playback begins
      */
-    onPlay?: (videoId: string, provider: 'youtube' | 'vimeo') => void;
+    onPlay?: (videoId: string, provider: string) => void;
+    /**
+     * Callback fired when video playback is paused
+     */
+    onPause?: (videoId: string, provider: string) => void;
+    /**
+     * Callback fired when video playback ends
+     */
+    onEnded?: (videoId: string, provider: string) => void;
+    /**
+     * Callback fired when an error occurs
+     */
+    onError?: (error: Error, provider: string) => void;
+    /**
+     * Callback fired when the video player is ready
+     */
+    onReady?: (videoId: string, provider: string) => void;
     /**
      * Custom className for styling
      */
     className?: string;
+    /**
+     * Aspect ratio of the video player (default: "16:9")
+     */
+    aspectRatio?: '16:9' | '4:3' | '1:1' | 'auto' | string;
+    /**
+     * Width of the video player
+     */
+    width?: string | number;
+    /**
+     * Height of the video player
+     */
+    height?: string | number;
     /**
      * Custom overlay icon (defaults to play icon)
      */
     overlayIcon?: default_2.ReactNode;
     /**
-     * Aspect ratio of the video player (default: "16/9")
+     * Allow adult content to be embedded
+     * Default: false (must be explicitly enabled)
+     */
+    allowAdultContent?: boolean;
+    /**
+     * Fallback content when video cannot be loaded
      */
-    aspectRatio?: string;
+    fallback?: default_2.ReactNode;
 }
 
 export declare const UIIcons: {
-    unfold: default_2.FC<IconProps>;
-    fold: default_2.FC<IconProps>;
-    close: default_2.FC<IconProps>;
-    check: default_2.FC<IconProps>;
+    unfold: FC<IconProps>;
+    fold: FC<IconProps>;
+    close: FC<IconProps>;
+    check: FC<IconProps>;
 };
 
 export declare const UnfoldIcon: default_2.FC<IconProps>;
 
+/**
+ * Result of video ID extraction from a URL
+ */
+declare interface VideoIdExtractionResult {
+    provider: VideoProvider;
+    videoId: string;
+}
+
+/**
+ * Video provider interface
+ */
+export declare interface VideoProvider {
+    /**
+     * Internal provider name (lowercase, no spaces)
+     */
+    name: string;
+    /**
+     * Display name for the provider
+     */
+    displayName: string;
+    /**
+     * Domains this provider handles
+     */
+    domains: string[];
+    /**
+     * Extract video ID from a URL
+     */
+    extractVideoId: (url: string) => string | null;
+    /**
+     * Generate embed URL for a video ID
+     */
+    getEmbedUrl: (videoId: string, options?: EmbedOptions) => string;
+    /**
+     * Whether the provider supports autoplay
+     */
+    supportsAutoplay?: boolean;
+    /**
+     * Whether the provider has a JavaScript API
+     */
+    supportsApi?: boolean;
+    /**
+     * Provider tier classification
+     */
+    tier: VideoProviderTier;
+}
+
+/**
+ * Array of all registered video providers
+ * Ordered by tier and priority for matching
+ */
+export declare const videoProviders: VideoProvider[];
+
+/**
+ * Video provider tier classification
+ */
+export declare type VideoProviderTier = 'major' | 'professional' | 'cloud' | 'social' | 'adult';
+
 export declare const WellnessIcons: {
-    taichi: default_2.FC<IconProps>;
-    meditation: default_2.FC<IconProps>;
-    yoga: default_2.FC<IconProps>;
+    taichi: FC<IconProps>;
+    meditation: FC<IconProps>;
+    yoga: FC<IconProps>;
 };
 
 export declare const YogaIcon: default_2.FC<IconProps>;