@app-studio/components 0.10.17

package/dist/native/components/Title/Title/SlideEffect.js

@@ -0,0 +1,195 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { Element, Text as DefaultText, Animation } from 'app-studio';
+// The main SlideEffect functional component, designed to animate text words sliding in and out.
+export const SlideEffect = ({ 
+// The text content to be animated.
+text, 
+// The duration of each word's animation, defaulting to 500ms.
+duration = 500, 
+// The animation direction, defaulting to 'up'.
+direction = 'up', 
+// The stagger delay between words, defaulting to 50ms.
+stagger = 50, 
+// Boolean indicating sequential animation, defaulting to false.
+sequential = false, 
+// Custom styles for the text container.
+textStyle, as: _as, 
+// Additional props to apply to individual words.
+wordProps, 
+// The component used to render each word.
+textComponent, 
+// Captures any other remaining props to pass to the root element.
+...props }) => {
+    // Manages the text string that is currently being displayed and animated.
+    const [displayedText, setDisplayedText] = useState(text);
+    // Tracks the current phase of the animation ('entering', 'visible', 'exiting') to control word animations.
+    const [phase, setPhase] = useState('entering');
+    // A key incremented to force re-rendering of animations when text changes, ensuring re-triggering.
+    const [animKey, setAnimKey] = useState(0);
+    // Determines the component to render each word, using the provided `textComponent` or the `DefaultText` component.
+    const TextComponent = textComponent || DefaultText;
+    // Holds the new text value that needs to be displayed after the current exiting animation finishes.
+    const pendingTextRef = useRef(null);
+    // Stores the reference to any active timeout, allowing it to be cleared to prevent memory leaks or incorrect state updates.
+    const timeoutRef = useRef(null);
+    // Manages transitions between animation phases based on changes in the input `text` prop.
+    useEffect(() => {
+        if (text === displayedText && phase === 'visible') {
+            return;
+        }
+        if (text !== displayedText) {
+            if (phase === 'entering' || phase === 'visible') {
+                pendingTextRef.current = text;
+                setPhase('exiting');
+            }
+            else if (phase === 'exiting') {
+                pendingTextRef.current = text;
+            }
+        }
+    }, [text, displayedText, phase]);
+    // Memoizes the processing of the input `displayedText` into an array of words, split by lines, and calculates the total word count for animation timing. Optimizes performance for unchanged text.
+    const { lines, totalWordCount } = useMemo(() => {
+        const rawLines = displayedText.split('|');
+        const processedLines = rawLines.map((line) => line
+            .trim()
+            .split(/\s+/)
+            .filter((w) => w.length > 0));
+        const count = processedLines.reduce((acc, line) => acc + line.length, 0);
+        return { lines: processedLines, totalWordCount: count };
+    }, [displayedText]);
+    // Calculates the total duration required for all words to complete their 'entering' animation, accounting for stagger and sequential options. Memoized for efficiency.
+    const totalEnterDuration = useMemo(() => {
+        if (sequential) {
+            return totalWordCount * (duration + stagger);
+        }
+        return (totalWordCount - 1) * stagger + duration;
+    }, [totalWordCount, duration, stagger, sequential]);
+    // Calculates the total duration required for all words to complete their 'exiting' animation, accounting for stagger and sequential options. Memoized for efficiency.
+    const totalExitDuration = useMemo(() => {
+        if (sequential) {
+            return totalWordCount * (duration + stagger);
+        }
+        return (totalWordCount - 1) * stagger + duration;
+    }, [totalWordCount, duration, stagger, sequential]);
+    // Manages the progression of animation phases by setting and clearing timeouts after `totalEnterDuration` or `totalExitDuration`.
+    useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (phase === 'entering') {
+            timeoutRef.current = setTimeout(() => {
+                setPhase('visible');
+            }, totalEnterDuration + 50);
+        }
+        else if (phase === 'exiting') {
+            timeoutRef.current = setTimeout(() => {
+                if (pendingTextRef.current !== null) {
+                    setDisplayedText(pendingTextRef.current);
+                    pendingTextRef.current = null;
+                }
+                setAnimKey((k) => k + 1);
+                setPhase('entering');
+            }, totalExitDuration + 50);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [phase, totalEnterDuration, totalExitDuration]);
+    // Extracts custom styles and any other properties specifically intended for individual words from the `wordProps` object.
+    const { style: customWordStyle, ...restWordProps } = wordProps || {};
+    // A boolean flag indicating if the animation direction is 'up' for easier conditional logic.
+    const isUp = direction === 'up';
+    // Calculates the animation delay for a given word based on its global index, staggering, and whether the animation is sequential.
+    const getDelay = (index) => {
+        if (sequential) {
+            return index * (duration + stagger);
+        }
+        return index * stagger;
+    };
+    // Memoized style object for the main container element, combining base styles with any `textStyle` prop, ensuring efficient rendering.
+    const containerStyle = useMemo(() => ({
+        display: 'inline-block',
+        position: 'relative',
+        verticalAlign: 'bottom',
+        whiteSpace: 'nowrap',
+        ...textStyle,
+    }), [textStyle]);
+    // Memoized style object for the container holding all lines of text, configuring it for inline flex display.
+    const linesContainerStyle = useMemo(() => ({
+        display: 'inline-flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    }), []);
+    // Memoized style object for individual lines of text, ensuring they are block-level and do not wrap.
+    const lineStyle = useMemo(() => ({
+        display: 'block',
+        whiteSpace: 'nowrap',
+    }), []);
+    // A boolean flag indicating whether the component is currently in an 'entering' or 'exiting' animation phase.
+    const isAnimating = phase === 'entering' || phase === 'exiting';
+    // A mutable index to track the global position of each word across all lines, used for calculating unique animation delays.
+    let globalWordIndex = 0;
+    // Renders the animated text, iterating through lines and words to apply individual slide effects.
+    return (<Element as="span" style={containerStyle} {...props}>
+      <span style={linesContainerStyle}>
+        {lines.map((lineWords, lineIndex) => (<span key={`line-${lineIndex}`} style={lineStyle}>
+            {lineWords.map((word, wordIndex) => {
+                const currentGlobalIndex = globalWordIndex++;
+                const delay = getDelay(currentGlobalIndex);
+                const isLastInLine = wordIndex === lineWords.length - 1;
+                let wordAnimation;
+                const durationStr = `${duration}ms`;
+                const delayStr = `${delay}ms`;
+                if (phase === 'entering') {
+                    wordAnimation = isUp
+                        ? Animation.slideInUp({
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-out',
+                            fillMode: 'both',
+                        })
+                        : Animation.slideInDown({
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-out',
+                            fillMode: 'both',
+                        });
+                }
+                else if (phase === 'exiting') {
+                    wordAnimation = isUp
+                        ? {
+                            from: { transform: 'translateY(0)', opacity: 1 },
+                            to: { transform: 'translateY(-100%)', opacity: 0 },
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-in',
+                            fillMode: 'both',
+                        }
+                        : {
+                            from: { transform: 'translateY(0)', opacity: 1 },
+                            to: { transform: 'translateY(100%)', opacity: 0 },
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-in',
+                            fillMode: 'both',
+                        };
+                }
+                const wordStyle = {
+                    ...customWordStyle,
+                    display: 'inline-block',
+                    marginRight: isLastInLine ? 0 : '0.25em',
+                    transform: phase === 'visible' ? 'translateY(0)' : undefined,
+                    opacity: phase === 'visible' ? 1 : undefined,
+                };
+                return (<TextComponent key={`${animKey}-${lineIndex}-${wordIndex}`} as="span" animate={wordAnimation} {...restWordProps} {...wordStyle}>
+                  {word}
+                </TextComponent>);
+            })}
+          </span>))}
+      </span>
+    </Element>);
+};
+export default SlideEffect;
+//# sourceMappingURL=SlideEffect.js.map

package/dist/native/components/Title/Title/SlideEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideEffect.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/SlideEffect.tsx"],"names":[],"mappings":"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"}

package/dist/native/components/Title/Title/SlideEffect.native.d.ts

@@ -0,0 +1,26 @@
+/**
+ * SlideEffect (React Native) — port of the web word-by-word slide effect.
+ *   - Lines are laid out as a Vertical stack; words inside a line are a
+ *     Horizontal with flexWrap. (Web uses inline-block + inline-flex which
+ *     don't exist on RN.)
+ *   - Each word is an animated <View/> with `animate={Animation.slideInUp/
+ *     Down(...)}` — Reanimated takes care of timing/stagger via the per-word
+ *     `delay`. The same state machine as web drives `entering`/`exiting`
+ *     phases.
+ */
+import React from 'react';
+interface SlideEffectProps {
+    text: string;
+    duration?: number;
+    direction?: 'up' | 'down';
+    stagger?: number;
+    sequential?: boolean;
+    textStyle?: any;
+    as?: any;
+    wordProps?: any;
+    backgroundColor?: string;
+    textComponent?: any;
+    [key: string]: any;
+}
+export declare const SlideEffect: React.FC<SlideEffectProps>;
+export default SlideEffect;

package/dist/native/components/Title/Title/SlideEffect.native.js

@@ -0,0 +1,127 @@
+/**
+ * SlideEffect (React Native) — port of the web word-by-word slide effect.
+ *   - Lines are laid out as a Vertical stack; words inside a line are a
+ *     Horizontal with flexWrap. (Web uses inline-block + inline-flex which
+ *     don't exist on RN.)
+ *   - Each word is an animated <View/> with `animate={Animation.slideInUp/
+ *     Down(...)}` — Reanimated takes care of timing/stagger via the per-word
+ *     `delay`. The same state machine as web drives `entering`/`exiting`
+ *     phases.
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Element, Text as DefaultText, Animation } from 'app-studio';
+export const SlideEffect = ({ text, duration = 500, direction = 'up', stagger = 50, sequential = false, textStyle, as: _as, wordProps, textComponent, ...props }) => {
+    const [displayedText, setDisplayedText] = useState(text);
+    const [phase, setPhase] = useState('entering');
+    const [animKey, setAnimKey] = useState(0);
+    const TextComponent = textComponent || DefaultText;
+    const pendingTextRef = useRef(null);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (text === displayedText && phase === 'visible')
+            return;
+        if (text !== displayedText) {
+            if (phase === 'entering' || phase === 'visible') {
+                pendingTextRef.current = text;
+                setPhase('exiting');
+            }
+            else if (phase === 'exiting') {
+                pendingTextRef.current = text;
+            }
+        }
+    }, [text, displayedText, phase]);
+    const { lines, totalWordCount } = useMemo(() => {
+        const rawLines = displayedText.split('|');
+        const processedLines = rawLines.map((line) => line
+            .trim()
+            .split(/\s+/)
+            .filter((w) => w.length > 0));
+        const count = processedLines.reduce((acc, line) => acc + line.length, 0);
+        return { lines: processedLines, totalWordCount: count };
+    }, [displayedText]);
+    const totalDuration = useMemo(() => {
+        if (sequential)
+            return totalWordCount * (duration + stagger);
+        return (Math.max(1, totalWordCount) - 1) * stagger + duration;
+    }, [totalWordCount, duration, stagger, sequential]);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (phase === 'entering') {
+            timeoutRef.current = setTimeout(() => {
+                setPhase('visible');
+            }, totalDuration + 50);
+        }
+        else if (phase === 'exiting') {
+            timeoutRef.current = setTimeout(() => {
+                if (pendingTextRef.current !== null) {
+                    setDisplayedText(pendingTextRef.current);
+                    pendingTextRef.current = null;
+                }
+                setAnimKey((k) => k + 1);
+                setPhase('entering');
+            }, totalDuration + 50);
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [phase, totalDuration]);
+    const { style: customWordStyle, ...restWordProps } = wordProps || {};
+    const isUp = direction === 'up';
+    const getDelay = (index) => sequential ? index * (duration + stagger) : index * stagger;
+    let globalWordIndex = 0;
+    return (<Element {...props}>
+      {lines.map((lineWords, lineIndex) => (<Element key={`line-${lineIndex}`} flexDirection="row" flexWrap="wrap" alignItems="flex-end" justifyContent="center">
+          {lineWords.map((word, wordIndex) => {
+                const currentGlobalIndex = globalWordIndex++;
+                const delay = getDelay(currentGlobalIndex);
+                const isLastInLine = wordIndex === lineWords.length - 1;
+                const durationStr = `${duration}ms`;
+                const delayStr = `${delay}ms`;
+                let wordAnimation;
+                if (phase === 'entering') {
+                    wordAnimation = isUp
+                        ? Animation.slideInUp({
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-out',
+                            fillMode: 'both',
+                        })
+                        : Animation.slideInDown({
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-out',
+                            fillMode: 'both',
+                        });
+                }
+                else if (phase === 'exiting') {
+                    wordAnimation = isUp
+                        ? {
+                            from: { transform: 'translateY(0)', opacity: 1 },
+                            to: { transform: 'translateY(-100%)', opacity: 0 },
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-in',
+                            fillMode: 'both',
+                        }
+                        : {
+                            from: { transform: 'translateY(0)', opacity: 1 },
+                            to: { transform: 'translateY(100%)', opacity: 0 },
+                            duration: durationStr,
+                            delay: delayStr,
+                            timingFunction: 'ease-in',
+                            fillMode: 'both',
+                        };
+                }
+                return (<Element key={`${animKey}-${lineIndex}-${wordIndex}`} animate={wordAnimation} marginRight={isLastInLine ? 0 : 6}>
+                <TextComponent {...restWordProps} {...customWordStyle}>
+                  {word}
+                </TextComponent>
+              </Element>);
+            })}
+        </Element>))}
+    </Element>);
+};
+export default SlideEffect;
+//# sourceMappingURL=SlideEffect.native.js.map

package/dist/native/components/Title/Title/SlideEffect.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideEffect.native.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/SlideEffect.native.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { AnimationProps, ViewProps } from 'app-studio';
+import { HighlightStyle, TitleSize, TitleStyles } from './Title.type';
+export interface TitleProps extends ViewProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    centered?: boolean;
+    _isInView?: boolean;
+    children: React.ReactNode;
+    highlightText?: string | string[];
+    alternateHighlightText?: string[];
+    highlightAnimate?: AnimationProps | AnimationProps[];
+    highlightTypewriter?: boolean;
+    highlightTypewriterDuration?: number;
+    highlightSlide?: boolean;
+    highlightSlideDuration?: number;
+    highlightSlideStagger?: number;
+    highlightSlideSequential?: boolean;
+    highlightStyle?: HighlightStyle;
+    highlightColor?: string;
+    highlightSecondaryColor?: string;
+    animate?: AnimationProps | AnimationProps[];
+    animationLoop?: number | 'infinite';
+    highlightAnimationLoop?: number | 'infinite';
+    size?: TitleSize;
+    responsive?: boolean;
+    views?: TitleStyles;
+    alternateAnimation?: boolean;
+    alternateDuration?: number;
+}

package/dist/native/components/Title/Title/Title.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Title.props.js.map

package/dist/native/components/Title/Title/Title.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.props.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/Title.props.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,10 @@
+import { TitleProps } from './Title.props';
+export declare const useTitleState: (props: TitleProps) => {
+    finalDisplayedText: import("react").ReactNode;
+    activeHighlightTarget: string | string[] | undefined;
+    highlightTypewriter: boolean;
+    highlightSlide: boolean;
+    highlightSlideDuration: number;
+    highlightSlideStagger: number;
+    highlightSlideSequential: boolean;
+};

package/dist/native/components/Title/Title/Title.state.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+// This file defines the `useTitleState` hook, which manages the dynamic state for the Title component, including text content, active highlight targets, and animation logic for alternating and highlighting text based on component props.
+export const useTitleState = (props) => {
+    const { children, _isInView = false, alternateHighlightText = [], alternateAnimation = false, alternateDuration = 3000, highlightText: initialHighlightText, highlightTypewriter = false, highlightTypewriterDuration = 1500, highlightSlide = false, highlightSlideDuration = 500, highlightSlideStagger = 50, highlightSlideSequential = true, } = props;
+    const [finalDisplayedText, setFinalDisplayedText] = useState(children);
+    const [activeHighlightTarget, setActiveHighlightTarget] = useState(initialHighlightText);
+    useEffect(() => {
+        if (!alternateAnimation ||
+            alternateHighlightText.length === 0 ||
+            !_isInView ||
+            typeof children !== 'string' ||
+            typeof initialHighlightText !== 'string') {
+            setFinalDisplayedText(children);
+            setActiveHighlightTarget(initialHighlightText);
+            return () => { };
+        }
+        const baseText = children;
+        const placeholder = initialHighlightText;
+        let currentIndex = 0;
+        const updateAlternatingState = (index) => {
+            const currentWordToHighlight = alternateHighlightText[index];
+            const escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const regex = new RegExp(escapedPlaceholder, 'gi');
+            const newContent = baseText.replace(regex, currentWordToHighlight);
+            setFinalDisplayedText(newContent);
+            setActiveHighlightTarget(currentWordToHighlight);
+        };
+        updateAlternatingState(currentIndex);
+        const interval = setInterval(() => {
+            currentIndex = (currentIndex + 1) % alternateHighlightText.length;
+            updateAlternatingState(currentIndex);
+        }, alternateDuration);
+        return () => clearInterval(interval);
+    }, [
+        alternateAnimation,
+        alternateHighlightText,
+        alternateDuration,
+        initialHighlightText,
+        children,
+        _isInView,
+    ]);
+    return {
+        finalDisplayedText,
+        activeHighlightTarget,
+        highlightTypewriter,
+        highlightSlide,
+        highlightSlideDuration,
+        highlightSlideStagger,
+        highlightSlideSequential,
+    };
+};
+//# sourceMappingURL=Title.state.js.map

package/dist/native/components/Title/Title/Title.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.state.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/Title.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,6OAA6O;AAC7O,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;IACjD,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,sBAAsB,GAAG,EAAE,EAC3B,kBAAkB,GAAG,KAAK,EAC1B,iBAAiB,GAAG,IAAI,EACxB,aAAa,EAAE,oBAAoB,EACnC,mBAAmB,GAAG,KAAK,EAC3B,2BAA2B,GAAG,IAAI,EAClC,cAAc,GAAG,KAAK,EACtB,sBAAsB,GAAG,GAAG,EAC5B,qBAAqB,GAAG,EAAE,EAC1B,wBAAwB,GAAG,IAAI,GAChC,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,QAAQ,CAAkB,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAEhE,oBAAoB,CAAC,CAAC;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,kBAAkB;YACnB,sBAAsB,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,SAAS;YACV,OAAO,QAAQ,KAAK,QAAQ;YAC5B,OAAO,oBAAoB,KAAK,QAAQ,EACxC,CAAC;YACD,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChC,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;YAC/C,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,CAAC;QACD,MAAM,QAAQ,GAAG,QAAkB,CAAC;QACpC,MAAM,WAAW,GAAG,oBAA8B,CAAC;QACnD,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC/C,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAC7D,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAC5C,qBAAqB,EACrB,MAAM,CACP,CAAC;YACF,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;YACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,sBAAsB,CAAC,CAAC;YACnE,qBAAqB,CAAC,UAAU,CAAC,CAAC;YAClC,wBAAwB,CAAC,sBAAsB,CAAC,CAAC;QACnD,CAAC,CAAC;QACF,sBAAsB,CAAC,YAAY,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,sBAAsB,CAAC,MAAM,CAAC;YAClE,sBAAsB,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EAAE,iBAAiB,CAAC,CAAC;QACtB,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE;QACD,kBAAkB;QAClB,sBAAsB;QACtB,iBAAiB;QACjB,oBAAoB;QACpB,QAAQ;QACR,SAAS;KACV,CAAC,CAAC;IACH,OAAO;QACL,kBAAkB;QAClB,qBAAqB;QACrB,mBAAmB;QACnB,cAAc;QACd,sBAAsB;QACtB,qBAAqB;QACrB,wBAAwB;KACzB,CAAC;AACJ,CAAC,CAAC"}

package/dist/native/components/Title/Title/Title.style.d.ts

@@ -0,0 +1,29 @@
+import { ViewProps } from 'app-studio';
+import { TitleSize, HighlightStyle } from './Title.type';
+export declare const TitleSizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const ResponsiveTypography: Record<TitleSize, {
+    media: {
+        mobile: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+        tablet: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+        desktop: {
+            fontSize: number;
+            width?: string;
+            minWidth?: string;
+        };
+    };
+}>;
+export declare const HighlightStyles: Record<HighlightStyle, (color: string, secondaryColor?: string) => ViewProps>;

package/dist/native/components/Title/Title/Title.style.js

@@ -0,0 +1,85 @@
+// Defines a mapping of abstract title sizes (xs, sm, md, lg, xl) to their corresponding fixed pixel values for consistent sizing across the component.
+export const TitleSizes = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 96,
+    xl: 110,
+};
+// Provides a comprehensive set of responsive typography settings. It maps each defined `TitleSize` to specific font sizes and optional width constraints tailored for various device breakpoints (mobile, tablet, desktop).
+export const ResponsiveTypography = {
+    xl: {
+        media: {
+            mobile: { fontSize: 48 },
+            tablet: { fontSize: 96 },
+            desktop: { fontSize: 110 },
+        },
+    },
+    lg: {
+        media: {
+            mobile: { fontSize: 48 },
+            tablet: { fontSize: 48 },
+            desktop: { fontSize: 70 },
+        },
+    },
+    md: {
+        media: {
+            mobile: { fontSize: 32 },
+            tablet: { fontSize: 40 },
+            desktop: { fontSize: 56 },
+        },
+    },
+    sm: {
+        media: {
+            mobile: { fontSize: 20 },
+            tablet: { fontSize: 24 },
+            desktop: { fontSize: 32 },
+        },
+    },
+    xs: {
+        media: {
+            mobile: { fontSize: 14 },
+            tablet: { fontSize: 18 },
+            desktop: { fontSize: 20 },
+        },
+    },
+};
+// Contains a collection of functions, each representing a distinct text highlight style. These functions accept primary and optional secondary color parameters and return `ViewProps` objects with the necessary CSS-like properties to apply the chosen highlight effect.
+export const HighlightStyles = {
+    underline: (color) => ({
+        textDecoration: 'underline',
+        textDecorationColor: color,
+        textDecorationThickness: '4px',
+        textUnderlineOffset: '4px',
+    }),
+    background: (color) => ({
+        backgroundColor: color,
+        color: 'color-white',
+        padding: '0 8px',
+        borderRadius: '4px',
+    }),
+    gradient: (color, secondaryColor) => ({
+        background: `linear-gradient(135deg, ${color}, ${secondaryColor || color})`,
+        backgroundClip: 'text',
+        WebkitBackgroundClip: 'text !important',
+        WebkitTextFillColor: 'transparent',
+        color: 'transparent',
+        display: 'inline-block',
+        textShadow: 'none',
+    }),
+    outline: (color) => ({
+        WebkitTextStroke: `1px ${color}`,
+        WebkitTextFillColor: 'transparent !important',
+        color: 'transparent',
+        textShadow: 'none',
+    }),
+    glow: (color) => ({
+        color: color,
+        textShadow: `0 0 10px ${color}80, 0 0 20px ${color}40, 0 0 30px ${color}20`,
+    }),
+    solid: (color) => ({
+        color: color,
+    }),
+    default: () => ({}),
+};
+//# sourceMappingURL=Title.style.js.map

package/dist/native/components/Title/Title/Title.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.style.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/Title.style.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { ViewProps } from 'app-studio';
+export type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow' | 'solid' | 'default';
+export type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TitleStyles = {
+    container?: ViewProps;
+    text?: ViewProps;
+    highlight?: ViewProps;
+};

package/dist/native/components/Title/Title/Title.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Title.type.js.map

package/dist/native/components/Title/Title/Title.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.type.js","sourceRoot":"","sources":["../../../../../src/components/Title/Title/Title.type.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TitleProps } from './Title.props';
+declare const TitleView: React.FC<TitleProps>;
+export default TitleView;