reacthub-pixitweenjs 0.2.109-alpha.7 → 0.3.0-alpha.4

package/dist/components/PixiVideoSprite/PixiVideoSprite.stories.d.ts

@@ -1,146 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-
-import * as React from "react";
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import('./PixiVideoSprite').PixiVideoSpriteProps & React.RefAttributes<import('../..').ForwardedRefResponse | null>>;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    tags: string[];
-    argTypes: {
-        uniqueId: {
-            control: "text";
-            description: string;
-        };
-        src: {
-            control: "text";
-            description: string;
-        };
-        transformation: {
-            control: "object";
-            description: string;
-            x: {
-                control: string;
-                description: string;
-            };
-            y: {
-                control: string;
-                description: string;
-            };
-            width: {
-                control: string;
-                description: string;
-            };
-            height: {
-                control: string;
-                description: string;
-            };
-            anchor: {
-                control: string;
-                description: string;
-            };
-            rotation: {
-                control: string;
-                description: string;
-            };
-            alpha: {
-                control: string;
-                min: number;
-                max: number;
-                description: string;
-            };
-            scale: {
-                control: string;
-                description: string;
-            };
-            tint: {
-                control: string;
-                description: string;
-            };
-            blendMode: {
-                control: string;
-                description: string;
-            };
-            colorCorrection: {
-                control: string;
-                description: string;
-                brightness: {
-                    control: string;
-                    description: string;
-                };
-                contrast: {
-                    control: string;
-                    description: string;
-                };
-                saturation: {
-                    control: string;
-                    description: string;
-                };
-                alpha: {
-                    control: string;
-                    description: string;
-                };
-            };
-        };
-        applyTransformer: {
-            control: "boolean";
-            description: string;
-        };
-        startAt: {
-            control: "number";
-            description: string;
-        };
-        endAt: {
-            control: "number";
-            description: string;
-        };
-        frameStartAt: {
-            control: "number";
-            description: string;
-        };
-        frameEndAt: {
-            control: "number";
-            description: string;
-        };
-        mute: {
-            control: "boolean";
-            description: string;
-        };
-        locked: {
-            control: "boolean";
-            description: string;
-        };
-        visible: {
-            control: "boolean";
-            description: string;
-        };
-        onAnchorTransformationEnd: {
-            action: string;
-            description: string;
-        };
-        pointerdown: {
-            action: string;
-            description: string;
-        };
-        fps: {
-            control: "number";
-            description: string;
-        };
-        onContainerRefReady: {
-            action: string;
-            description: string;
-        };
-        onSpriteRefReady: {
-            action: string;
-            description: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const FadeIn: Story;
-export declare const Filters: Story;
-export declare const SplitPosition: Story;
-export declare const SplitStartPos: Story;
-export declare const VideoFps: Story;
-export declare const WithUnifiedTransformer: Story;

package/dist/favicon.svg

@@ -1,41 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Gradient for the favicon -->
-    <linearGradient id="faviconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#4FC3F7;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#0288D1;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  
-  <!-- Background circle -->
-  <circle cx="16" cy="16" r="15" fill="url(#faviconGradient)"/>
-  
-  <!-- Film strip simplified -->
-  <g>
-    <!-- Main frame -->
-    <rect x="6" y="8" width="20" height="16" rx="2" fill="white" opacity="0.9"/>
-    
-    <!-- Film holes - top -->
-    <rect x="7" y="9" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="11" y="9" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="15" y="9" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="19" y="9" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="23" y="9" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    
-    <!-- Film holes - bottom -->
-    <rect x="7" y="21.5" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="11" y="21.5" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="15" y="21.5" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="19" y="21.5" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    <rect x="23" y="21.5" width="2" height="1.5" rx="0.5" fill="url(#faviconGradient)"/>
-    
-    <!-- Timeline bars inside -->
-    <rect x="8" y="13" width="6" height="1" rx="0.5" fill="url(#faviconGradient)" opacity="0.5"/>
-    <rect x="8" y="15.5" width="8" height="1" rx="0.5" fill="url(#faviconGradient)" opacity="0.5"/>
-    <rect x="8" y="18" width="5" height="1" rx="0.5" fill="url(#faviconGradient)" opacity="0.5"/>
-    
-    <!-- Play button -->
-    <circle cx="20" cy="16" r="4" fill="url(#faviconGradient)" opacity="0.9"/>
-    <polygon points="19,14 19,18 23,16" fill="white"/>
-  </g>
-</svg>

package/dist/pixitweenjs-logo-dark.svg

@@ -1,98 +0,0 @@
-<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Gradient for the logo - brighter for dark mode -->
-    <linearGradient id="logoDarkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#64B5F6;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#42A5F5;stop-opacity:1" />
-    </linearGradient>
-    
-    <!-- Gradient for text - brighter -->
-    <linearGradient id="textDarkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#64B5F6;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#42A5F5;stop-opacity:1" />
-    </linearGradient>
-
-    <!-- Glow effect for dark mode -->
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  </defs>
-  
-  <!-- Dark background (optional, for preview) -->
-  <rect width="600" height="200" fill="#0d1117"/>
-  
-  <!-- Film strip frame -->
-  <g id="filmStrip" filter="url(#glow)">
-    <!-- Main frame -->
-    <rect x="30" y="40" width="150" height="120" rx="8" fill="none" stroke="url(#logoDarkGradient)" stroke-width="4"/>
-    
-    <!-- Film holes - top -->
-    <rect x="40" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="60" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="80" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="100" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="120" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="140" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="160" y="45" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    
-    <!-- Film holes - bottom -->
-    <rect x="40" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="60" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="80" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="100" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="120" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="140" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    <rect x="160" y="147" width="12" height="8" rx="2" fill="url(#logoDarkGradient)"/>
-    
-    <!-- Timeline bars inside -->
-    <rect x="50" y="75" width="50" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
-    <rect x="50" y="90" width="70" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
-    <rect x="50" y="105" width="40" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
-    <rect x="50" y="120" width="60" height="4" rx="2" fill="url(#logoDarkGradient)" opacity="0.7"/>
-    
-    <!-- Play button circle with animation -->
-    <g>
-      <circle cx="135" cy="100" r="22" fill="none" stroke="url(#logoDarkGradient)" stroke-width="3" opacity="0.9">
-        <animateTransform
-          attributeName="transform"
-          attributeType="XML"
-          type="rotate"
-          from="0 135 100"
-          to="360 135 100"
-          dur="3s"
-          repeatCount="indefinite"/>
-      </circle>
-      
-      <!-- Play triangle -->
-      <polygon points="130,90 130,110 148,100" fill="url(#logoDarkGradient)"/>
-    </g>
-  </g>
-  
-  <!-- Text: PixiTweenJS -->
-  <text x="200" y="100" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="52" font-weight="700" fill="url(#textDarkGradient)" filter="url(#glow)">
-    PixiTweenJS
-  </text>
-  
-  <!-- Tagline -->
-  <text x="200" y="130" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="20" font-weight="400" fill="#90CAF9" opacity="0.9">
-    Timeline-based canvas animation
-  </text>
-  
-  <!-- Decorative elements - brighter sparkles -->
-  <g opacity="0.6">
-    <!-- Small sparkles -->
-    <circle cx="190" cy="65" r="2" fill="#64B5F6">
-      <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="570" cy="75" r="2" fill="#64B5F6">
-      <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="210" cy="145" r="2" fill="#64B5F6">
-      <animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-</svg>

package/dist/pixitweenjs-logo.svg

@@ -1,97 +0,0 @@
-<svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <!-- Gradient for the logo -->
-    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#4FC3F7;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#29B6F6;stop-opacity:1" />
-    </linearGradient>
-    
-    <!-- Gradient for text -->
-    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#29B6F6;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#039BE5;stop-opacity:1" />
-    </linearGradient>
-
-    <!-- Animation for the play circle -->
-    <animateTransform
-      id="playAnimation"
-      attributeName="transform"
-      attributeType="XML"
-      type="rotate"
-      from="0 135 100"
-      to="360 135 100"
-      dur="3s"
-      repeatCount="indefinite"/>
-  </defs>
-  
-  <!-- Film strip frame -->
-  <g id="filmStrip">
-    <!-- Main frame -->
-    <rect x="30" y="40" width="150" height="120" rx="8" fill="none" stroke="url(#logoGradient)" stroke-width="4"/>
-    
-    <!-- Film holes - top -->
-    <rect x="40" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="60" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="80" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="100" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="120" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="140" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="160" y="45" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    
-    <!-- Film holes - bottom -->
-    <rect x="40" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="60" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="80" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="100" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="120" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="140" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    <rect x="160" y="147" width="12" height="8" rx="2" fill="url(#logoGradient)"/>
-    
-    <!-- Timeline bars inside -->
-    <rect x="50" y="75" width="50" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
-    <rect x="50" y="90" width="70" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
-    <rect x="50" y="105" width="40" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
-    <rect x="50" y="120" width="60" height="4" rx="2" fill="url(#logoGradient)" opacity="0.6"/>
-    
-    <!-- Play button circle with animation -->
-    <g>
-      <circle cx="135" cy="100" r="22" fill="none" stroke="url(#logoGradient)" stroke-width="3" opacity="0.8">
-        <animateTransform
-          attributeName="transform"
-          attributeType="XML"
-          type="rotate"
-          from="0 135 100"
-          to="360 135 100"
-          dur="3s"
-          repeatCount="indefinite"/>
-      </circle>
-      
-      <!-- Play triangle -->
-      <polygon points="130,90 130,110 148,100" fill="url(#logoGradient)"/>
-    </g>
-  </g>
-  
-  <!-- Text: PixiTweenJS -->
-  <text x="200" y="100" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="52" font-weight="700" fill="url(#textGradient)">
-    PixiTweenJS
-  </text>
-  
-  <!-- Tagline -->
-  <text x="200" y="130" font-family="'Segoe UI', -apple-system, system-ui, sans-serif" font-size="20" font-weight="400" fill="#64B5F6" opacity="0.8">
-    Timeline-based canvas animation
-  </text>
-  
-  <!-- Decorative elements -->
-  <g opacity="0.3">
-    <!-- Small sparkles -->
-    <circle cx="190" cy="65" r="2" fill="#29B6F6">
-      <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="570" cy="75" r="2" fill="#29B6F6">
-      <animate attributeName="opacity" values="0.3;1;0.3" dur="2.5s" repeatCount="indefinite"/>
-    </circle>
-    <circle cx="210" cy="145" r="2" fill="#29B6F6">
-      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
-    </circle>
-  </g>
-</svg>

package/dist/stories/Features/TestHowlerAudioFiles.d.ts

@@ -1,2 +0,0 @@
-declare function TestAudioFiles(): import("react/jsx-runtime").JSX.Element;
-export default TestAudioFiles;

package/dist/stories/Features/TimelineAnimations.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export declare enum SpriteType {
-    Image = "Image",
-    Gif = "Gif",
-    Video = "Video"
-}
-export interface TimelineTestProps {
-    startAt: number;
-    endAt: number;
-}
-export interface TimelineProps {
-    children?: React.ReactNode;
-    sequences: TimelineTestProps[];
-}
-export declare const TimelineAnimationTest: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineTest.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export declare enum SpriteType {
-    Image = "Image",
-    Gif = "Gif",
-    Video = "Video"
-}
-export interface TimelineTestProps {
-    startAt: number;
-    endAt: number;
-}
-export interface TimelineProps {
-    children?: React.ReactNode;
-    sequences: TimelineTestProps[];
-}
-export declare const TimelineTest: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineTest.stories.d.ts

@@ -1,23 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-
-declare const meta: {
-    id: string;
-    title: string;
-    component: (props: import('./TimelineTest').TimelineProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    argTypes: {
-        sequences: {
-            description: string;
-            control: {
-                type: "object";
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Normal: Story;
-export declare const GifTest: Story;
-export declare const VideoTest: Story;
-export declare const AudioTest: Story;
-export declare const Animations: Story;

package/dist/stories/Features/TimelineTestAudios.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export declare enum SpriteType {
-    Image = "Image",
-    Gif = "Gif",
-    Video = "Video"
-}
-export interface TimelineTestProps {
-    startAt: number;
-    endAt: number;
-}
-export interface TimelineProps {
-    children?: React.ReactNode;
-    sequences: TimelineTestProps[];
-}
-export declare const TimelineTestAudios: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineTestWithVideos.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-export declare enum SpriteType {
-    Image = "Image",
-    Gif = "Gif",
-    Video = "Video"
-}
-export interface TimelineTestProps {
-    startAt: number;
-    endAt: number;
-}
-export interface TimelineProps {
-    children?: React.ReactNode;
-    sequences: TimelineTestProps[];
-}
-export declare const TimelineTestVideos: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineWithGif.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-export declare enum SpriteType {
-    Image = "Image",
-    Gif = "Gif",
-    Video = "Video"
-}
-export interface TimelineTestProps {
-    startAt: number;
-    endAt: number;
-}
-export interface TimelineProps {
-    children?: React.ReactNode;
-    sequences: TimelineTestProps[];
-}
-export declare const TimelineWithGif: {
-    (props: TimelineProps): import("react/jsx-runtime").JSX.Element;
-    whyDidYouRender: {
-        logOnDifferentValues: boolean;
-        customName: string;
-    };
-};