@app-studio/web 0.8.91 → 0.8.92

package/dist/components/Title/Title/Title.props.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ViewProps } from 'app-studio';
-import { HighlightStyle, TitleAnimation, AnimationDirection, TitleSize, TitleStyles } from './Title.type';
+import { HighlightStyle, TitleSize, TitleStyles } from './Title.type';
+import { AnimationProps } from 'app-studio/dist/utils/constants';
 /**
  * Props for the Title component
  */
@@ -25,18 +26,21 @@ export interface TitleProps extends ViewProps {
      */
     alternateHighlightText?: string[];
     /**
-     * Enable alternating animation that replaces the highlightText with words from alternateHighlightText
-     * When enabled, the component will replace the text specified in highlightText with each word
-     * from alternateHighlightText in sequence, creating an infinite loop animation
+     * Animation for the highlighted text
+     * This can be a single animation object or an array of animation objects
+     * for multiple highlighted words
+     */
+    highlightAnimate?: AnimationProps | AnimationProps[];
+    /**
+     * Whether to apply a typewriter effect to the highlighted text
      * @default false
      */
-    alternateAnimation?: boolean;
+    highlightTypewriter?: boolean;
     /**
-     * Duration for each alternation cycle in milliseconds
-     * Controls how long each word from alternateHighlightText is displayed before switching to the next
-     * @default 3000
+     * Duration in milliseconds for the typewriter effect on highlighted text
+     * @default 1500
      */
-    alternateDuration?: number;
+    highlightTypewriterDuration?: number;
     /**
      * Style of the highlight effect
      * @default 'background'
@@ -53,25 +57,10 @@ export interface TitleProps extends ViewProps {
      */
     highlightSecondaryColor?: string;
     /**
-     * Animation type for the title
-     * @default 'none'
+     * Animation for the title
+     * This should be an animation object with properties like from, to, duration, etc.
      */
-    animation?: TitleAnimation;
-    /**
-     * Direction for slide animations
-     * @default 'left'
-     */
-    animationDirection?: AnimationDirection;
-    /**
-     * Duration of the animation in seconds
-     * @default '1s'
-     */
-    animationDuration?: string;
-    /**
-     * Delay before animation starts in seconds
-     * @default '0s'
-     */
-    animationDelay?: string;
+    animate?: AnimationProps | AnimationProps[];
     /**
      * Size of the title
      * @default 'xl'
@@ -86,4 +75,14 @@ export interface TitleProps extends ViewProps {
      * Custom styles for different parts of the component
      */
     views?: TitleStyles;
+    /**
+     * Whether to animate the alternating highlight text
+     * @default false
+     */
+    alternateAnimation?: boolean;
+    /**
+     * Duration in milliseconds for each alternating highlight text
+     * @default 3000
+     */
+    alternateDuration?: number;
 }

package/dist/components/Title/Title/Title.state.d.ts

@@ -1,124 +1,10 @@
 /// <reference types="react" />
 import { TitleProps } from './Title.props';
 /**
- * Custom hook for managing Title component state and animations
+ * Custom hook for managing Title component state
  */
 export declare const useTitleState: (props: TitleProps) => {
-    displayText: string;
-    getAnimation: () => {
-        from: {
-            opacity: number;
-            transform?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        to: {
-            opacity: number;
-            transform?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        duration: string;
-        delay: string;
-        direction: string;
-        '20%'?: undefined;
-        '40%'?: undefined;
-        '60%'?: undefined;
-        '80%'?: undefined;
-        iterationCount?: undefined;
-    } | {
-        from: {
-            transform: string;
-            opacity?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        to: {
-            transform: string;
-            opacity?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        duration: string;
-        delay: string;
-        direction: string;
-        '20%'?: undefined;
-        '40%'?: undefined;
-        '60%'?: undefined;
-        '80%'?: undefined;
-        iterationCount?: undefined;
-    } | {
-        from: {
-            transform: string;
-            opacity?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        '20%': {
-            transform: string;
-        };
-        '40%': {
-            transform: string;
-        };
-        '60%': {
-            transform: string;
-        };
-        '80%': {
-            transform: string;
-        };
-        to: {
-            transform: string;
-            opacity?: undefined;
-            backgroundSize?: undefined;
-            clipPath?: undefined;
-        };
-        duration: string;
-        delay: string;
-        iterationCount: string;
-        direction?: undefined;
-    } | {
-        from: {
-            backgroundSize: string;
-            opacity?: undefined;
-            transform?: undefined;
-            clipPath?: undefined;
-        };
-        to: {
-            backgroundSize: string;
-            opacity?: undefined;
-            transform?: undefined;
-            clipPath?: undefined;
-        };
-        duration: string;
-        delay: string;
-        direction?: undefined;
-        '20%'?: undefined;
-        '40%'?: undefined;
-        '60%'?: undefined;
-        '80%'?: undefined;
-        iterationCount?: undefined;
-    } | {
-        from: {
-            clipPath: string;
-            opacity?: undefined;
-            transform?: undefined;
-            backgroundSize?: undefined;
-        };
-        to: {
-            clipPath: string;
-            opacity?: undefined;
-            transform?: undefined;
-            backgroundSize?: undefined;
-        };
-        duration: string;
-        delay: string;
-        direction?: undefined;
-        '20%'?: undefined;
-        '40%'?: undefined;
-        '60%'?: undefined;
-        '80%'?: undefined;
-        iterationCount?: undefined;
-    } | undefined;
-    currentHighlightText: string | string[] | undefined;
-    alternatingContent: import("react").ReactNode;
+    finalDisplayedText: import("react").ReactNode;
+    activeHighlightTarget: string | string[] | undefined;
+    highlightTypewriter: boolean;
 };

package/dist/components/Title/Title/Title.type.d.ts

@@ -3,18 +3,10 @@ import { ViewProps } from 'app-studio';
  * Highlight style options for the Title component
  */
 export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow';
-/**
- * Animation type for the Title component
- */
-export declare type TitleAnimation = 'fadeIn' | 'slideIn' | 'typewriter' | 'highlight' | 'reveal' | 'bounce' | 'alternate' | 'none';
-/**
- * Animation direction for slide animations
- */
-export declare type AnimationDirection = 'left' | 'right' | 'top' | 'bottom';
 /**
  * Title size options
  */
-export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 /**
  * Title styles for customization
  */

package/dist/components/Title/Title/Title.view.d.ts

@@ -1,9 +1,4 @@
 import React from 'react';
 import { TitleProps } from './Title.props';
-/**
- * Title View Component
- *
- * Renders a title with optional highlighting and animations for hero sections.
- */
 declare const TitleView: React.FC<TitleProps>;
 export default TitleView;

package/dist/components/Title/Title/TypewriterEffect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface TypewriterEffectProps {
+    text: string | string[];
+    typingSpeed?: number;
+    pauseTime?: number;
+    onComplete?: () => void;
+    showCursor?: boolean;
+    cursorColor?: string;
+    textStyle?: React.CSSProperties;
+    as?: React.ElementType;
+    [key: string]: any;
+}
+/**
+ * A component that creates a typewriter effect for text
+ */
+export declare const TypewriterEffect: React.FC<TypewriterEffectProps>;
+export default TypewriterEffect;

package/dist/components/Title/examples/alternating.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of Title component with alternating highlighted text
+ * Examples of Title with alternating highlight text
  */
 export declare const AlternatingTitle: () => React.JSX.Element;

package/dist/components/Title/examples/animated.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Examples of Title component with different animations
+ * Examples of Title with different animation types
  */
 export declare const AnimatedTitle: () => React.JSX.Element;

package/dist/components/Title/examples/custom.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of Title component with custom styling
+ * Example of Title with custom styling using the views prop
  */
 export declare const CustomTitle: () => React.JSX.Element;

package/dist/components/Title/examples/default.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Default Title examples
+ * Default Title examples showing different sizes
  */
 export declare const DefaultTitle: () => React.JSX.Element;

package/dist/components/Title/examples/directAnimation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of direct animation without using Animation object
+ * Example of Title with direct animation props
  */
 export declare const DirectAnimationExample: () => React.JSX.Element;

package/dist/components/Title/examples/{gradientTest.d.ts → gradient.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Test for gradient highlighting in Title component
+ * Examples of Title with gradient highlight styles
  */
 export declare const GradientTest: () => React.JSX.Element;

package/dist/components/Title/examples/hero.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of Title component in a hero section context
+ * Example of Title in a hero section context
  */
 export declare const HeroTitle: () => React.JSX.Element;

package/dist/components/Title/examples/{highlightTest.d.ts → highlight.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Test for highlighting issues in Title component
+ * Examples of Title with different highlight animations
  */
 export declare const HighlightTest: () => React.JSX.Element;

package/dist/components/Title/examples/highlightStyles.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different highlight styles applied to the entire title
+ */
+export declare const HighlightStylesDemo: () => React.JSX.Element;

package/dist/components/Title/examples/highlighted.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Examples of Title component with different highlight styles
+ * Examples of Title with different highlight styles
  */
 export declare const HighlightedTitle: () => React.JSX.Element;

package/dist/components/Title/examples/index.d.ts

@@ -5,6 +5,8 @@ export * from './hero';
 export * from './responsive';
 export * from './custom';
 export * from './directAnimation';
-export * from './gradientTest';
-export * from './highlightTest';
+export * from './gradient';
+export * from './highlight';
 export * from './alternating';
+export * from './highlightStyles';
+export * from './typewriterHighlight';

package/dist/components/Title/examples/responsive.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 /**
- * Example of Title component with responsive behavior
+ * Example of responsive Title using media queries
  */
 export declare const ResponsiveTitle: () => React.JSX.Element;

package/dist/components/Title/examples/typewriterHighlight.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with typewriter effect on highlighted text
+ */
+export declare const TypewriterHighlightDemo: () => React.JSX.Element;