@rubixscript/react-native-onboarding 1.0.0 → 1.0.1

package/dist/components/NavigationButtons.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NavigationButtonProps } from '../types';
+export declare const NavigationButton: React.FC<NavigationButtonProps>;
+interface NavigationButtonsProps {
+    currentIndex: number;
+    totalSlides: number;
+    theme: any;
+    config: any;
+    onNext: () => void;
+    onBack: () => void;
+    onSkip: () => void;
+    canGoNext?: boolean;
+    isLastSlide?: boolean;
+    isLoading?: boolean;
+    darkMode?: boolean;
+}
+export declare const NavigationButtons: React.FC<NavigationButtonsProps>;
+declare const _default: {
+    NavigationButton: React.FC<NavigationButtonProps>;
+    NavigationButtons: React.FC<NavigationButtonsProps>;
+};
+export default _default;
+//# sourceMappingURL=NavigationButtons.d.ts.map

package/dist/components/NavigationButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationButtons.d.ts","sourceRoot":"","sources":["../../src/components/NavigationButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAIjD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+D5D,CAAC;AAEF,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgF9D,CAAC;;;;;AA4BF,wBAAuD"}

package/dist/components/NavigationButtons.js

@@ -0,0 +1,106 @@
+import React, { useMemo } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
+import { BlurView } from 'expo-blur';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
+export const NavigationButton = ({ label, onPress, theme, variant = 'primary', disabled = false, loading = false, style, textStyle, }) => {
+    const buttonStyle = useMemo(() => {
+        const base = {
+            ...styles.button,
+            minHeight: 48,
+            paddingHorizontal: 24,
+            borderRadius: theme.borderRadius.full,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+        };
+        switch (variant) {
+            case 'primary':
+                base.backgroundColor = theme.colors.primary;
+                break;
+            case 'secondary':
+                base.backgroundColor = theme.colors.secondary;
+                break;
+            case 'ghost':
+                base.backgroundColor = 'transparent';
+                base.borderWidth = 1.5;
+                base.borderColor = theme.colors.border;
+                break;
+        }
+        return base;
+    }, [theme, variant]);
+    const buttonText = useMemo(() => {
+        const base = {
+            ...styles.buttonText,
+            color: variant === 'ghost' ? theme.colors.text.primary : theme.colors.text.inverse,
+        };
+        return base;
+    }, [theme, variant]);
+    return (<AnimatedTouchableOpacity style={[buttonStyle, style]} onPress={onPress} disabled={disabled || loading} activeOpacity={0.8} entering={FadeIn} exiting={FadeOut}>
+      {loading ? (<ActivityIndicator color={variant === 'ghost' ? theme.colors.text.primary : theme.colors.text.inverse}/>) : (<Text style={[buttonText, textStyle]}>{label}</Text>)}
+    </AnimatedTouchableOpacity>);
+};
+export const NavigationButtons = ({ currentIndex, totalSlides, theme, config, onNext, onBack, onSkip, canGoNext = true, isLastSlide = false, isLoading = false, darkMode = false, }) => {
+    const { showSkip = true, showBack = true, skipLabel = 'Skip', backLabel = 'Back', nextLabel = 'Next', doneLabel = 'Get Started', position = 'bottom' } = config;
+    const containerStyle = useMemo(() => {
+        const base = {
+            paddingHorizontal: theme.spacing.lg,
+            paddingVertical: theme.spacing.md,
+            gap: theme.spacing.sm,
+        };
+        if (position === 'floating') {
+            base.position = 'absolute';
+            base.bottom = theme.spacing.xl;
+            base.left = theme.spacing.lg;
+            base.right = theme.spacing.lg;
+        }
+        return base;
+    }, [theme, position]);
+    const isAtStart = currentIndex === 0;
+    const buttons = (<>
+      {/* Back Button */}
+      {showBack && !isAtStart && (<NavigationButton label={backLabel} onPress={onBack} theme={theme} variant="ghost"/>)}
+
+      {/* Skip Button */}
+      {showSkip && !isLastSlide && !isLoading && (<TouchableOpacity style={styles.skipButton} onPress={onSkip} activeOpacity={0.7}>
+          <Text style={[styles.skipButtonText, { color: theme.colors.text.secondary }]}>
+            {skipLabel}
+          </Text>
+        </TouchableOpacity>)}
+
+      {/* Next/Done Button */}
+      <NavigationButton label={isLastSlide ? doneLabel : nextLabel} onPress={onNext} theme={theme} variant="primary" disabled={!canGoNext} loading={isLoading}/>
+    </>);
+    if (position === 'floating') {
+        return (<BlurView intensity={80} tint={darkMode ? 'dark' : 'light'} style={containerStyle}>
+        <View style={styles.buttonRow}>{buttons}</View>
+      </BlurView>);
+    }
+    return <View style={containerStyle}>{buttons}</View>;
+};
+const styles = StyleSheet.create({
+    button: {
+        minWidth: 120,
+    },
+    buttonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    skipButton: {
+        alignSelf: 'flex-end',
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+        marginRight: 8,
+    },
+    skipButtonText: {
+        fontSize: 15,
+        fontWeight: '500',
+    },
+});
+export default { NavigationButton, NavigationButtons };

package/dist/components/Onboarding.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { OnboardingProps } from '../types';
+export declare const Onboarding: React.FC<OnboardingProps>;
+export declare const useOnboarding: (storageKey?: string) => {
+    hasCompletedOnboarding: boolean | null;
+    isLoading: boolean;
+    markComplete: () => Promise<void>;
+    reset: () => Promise<void>;
+};
+export default Onboarding;
+//# sourceMappingURL=Onboarding.d.ts.map

package/dist/components/Onboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Onboarding.d.ts","sourceRoot":"","sources":["../../src/components/Onboarding.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAgBzE,OAAO,EAAE,eAAe,EAAoB,MAAM,UAAU,CAAC;AAQ7D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4PhD,CAAC;AAGF,eAAO,MAAM,aAAa,GAAI,aAAY,MAA+B;;;;;CAuCxE,CAAC;AAkBF,eAAe,UAAU,CAAC"}

package/dist/components/Onboarding.js

@@ -0,0 +1,219 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { View, StyleSheet, SafeAreaView, } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import FlatList from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { mergeTheme, getPreset } from '../themes';
+import { SlideRenderer } from '../slides';
+import { Pagination, NavigationButtons } from './index';
+// Type assertion for AnimatedFlatList from react-native-reanimated
+const AnimatedFlatListImplemented = FlatList;
+export const Onboarding = ({ visible, slides = [], theme: customTheme, navigation: customNavigation, animation: customAnimation, storage, onboardingComplete, onSlideChange, onSkip, initialSlide = 0, swipeEnabled = true, containerStyle, safeAreaEnabled = true, darkMode = false, }) => {
+    // State
+    const [currentIndex, setCurrentIndex] = useState(initialSlide);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [formData, setFormData] = useState({});
+    //Refs
+    const flatListRef = React.useRef(null);
+    // Merge theme with preset
+    const preset = useMemo(() => {
+        if (!customTheme)
+            return getPreset('modern');
+        const presetKey = Object.keys(getPreset('modern')).find(key => customTheme[key]);
+        return presetKey ? getPreset(presetKey) : getPreset('modern');
+    }, [customTheme]);
+    const theme = useMemo(() => mergeTheme(preset.theme, customTheme), [preset, customTheme]);
+    const navigationConfig = useMemo(() => ({ ...preset.navigation, ...customNavigation }), [preset, customNavigation]);
+    const animationConfig = useMemo(() => ({ ...preset.animation, ...customAnimation }), [preset, customAnimation]);
+    // Check storage on mount
+    useEffect(() => {
+        if (storage?.enabled) {
+            checkOnboardingStatus();
+        }
+    }, [storage]);
+    const checkOnboardingStatus = async () => {
+        try {
+            const key = storage?.key || '@onboarding_complete';
+            const completed = await AsyncStorage.getItem(key);
+            if (completed && !visible) {
+                // Already completed, don't show
+                return;
+            }
+        }
+        catch (error) {
+            console.warn('Error checking onboarding status:', error);
+        }
+    };
+    const saveOnboardingComplete = async () => {
+        if (storage?.enabled) {
+            try {
+                const key = storage?.key || '@onboarding_complete';
+                await AsyncStorage.setItem(key, 'true');
+                if (storage.onComplete) {
+                    await storage.onComplete();
+                }
+            }
+            catch (error) {
+                console.warn('Error saving onboarding status:', error);
+            }
+        }
+    };
+    // Handlers
+    const handleNext = useCallback(async () => {
+        const currentSlide = slides[currentIndex];
+        // Check if form slide and validate
+        if (currentSlide.type === 'form') {
+            const formSlide = currentSlide;
+            const requiredFields = formSlide.fields.filter((f) => f.required);
+            const isValid = requiredFields.every((field) => formData[field.key]);
+            if (!isValid) {
+                return; // Form validation failed
+            }
+            // Submit form data
+            if (formSlide.onSubmit) {
+                setIsSubmitting(true);
+                try {
+                    await formSlide.onSubmit(formData);
+                }
+                catch (error) {
+                    console.warn('Form submit error:', error);
+                }
+                setIsSubmitting(false);
+            }
+        }
+        if (currentIndex < slides.length - 1) {
+            flatListRef.current?.scrollToIndex({ index: currentIndex + 1, animated: true });
+        }
+        else {
+            // Complete onboarding
+            await saveOnboardingComplete();
+            if (onboardingComplete) {
+                await onboardingComplete(formData);
+            }
+        }
+    }, [currentIndex, slides, formData, onboardingComplete, storage]);
+    const handleBack = useCallback(() => {
+        if (currentIndex > 0) {
+            flatListRef.current?.scrollToIndex({ index: currentIndex - 1, animated: true });
+        }
+    }, [currentIndex]);
+    const handleSkip = useCallback(async () => {
+        await saveOnboardingComplete();
+        if (onSkip) {
+            await onSkip();
+        }
+        else if (onboardingComplete) {
+            await onboardingComplete();
+        }
+    }, [onSkip, onboardingComplete, storage]);
+    const handleMomentumScrollEnd = useCallback((event) => {
+        const index = Math.round(event.nativeEvent.contentOffset.x / event.nativeEvent.layoutMeasurement.width);
+        if (index !== currentIndex) {
+            setCurrentIndex(index);
+            if (onSlideChange) {
+                onSlideChange(index);
+            }
+        }
+    }, [currentIndex, onSlideChange]);
+    const handleFormDataChange = useCallback((data) => {
+        setFormData(prev => ({ ...prev, ...data }));
+    }, []);
+    // Renderers
+    const renderSlide = useCallback(({ item, index }) => {
+        return (<View style={[styles.slide, { width: '100%' }]}>
+          <SlideRenderer data={item} theme={theme} darkMode={darkMode} onSubmit={handleFormDataChange} isSubmitting={isSubmitting}/>
+        </View>);
+    }, [theme, darkMode, isSubmitting, handleFormDataChange]);
+    const getKey = useCallback((item, index) => item.id || `slide-${index}`, []);
+    // Computed values
+    const isLastSlide = currentIndex === slides.length - 1;
+    const currentSlide = slides[currentIndex];
+    // Determine if we should show navigation (not for form slides that handle their own)
+    const showNavigation = currentSlide?.type !== 'form';
+    if (!visible)
+        return null;
+    const content = (<View style={[styles.container, containerStyle]}>
+      {/* Background Gradient if applicable */}
+      {currentSlide?.gradientColors && currentSlide.gradientColors.length > 0 && (<LinearGradient colors={currentSlide.gradientColors} style={StyleSheet.absoluteFillObject}/>)}
+
+      {/* Pagination */}
+      {showNavigation && (<Pagination currentIndex={currentIndex} totalSlides={slides.length} theme={theme} config={navigationConfig}/>)}
+
+      {/* Slides */}
+      <AnimatedFlatListImplemented ref={flatListRef} data={slides} renderItem={renderSlide} keyExtractor={getKey} horizontal pagingEnabled showsHorizontalScrollIndicator={false} scrollEventThrottle={32} onMomentumScrollEnd={handleMomentumScrollEnd} scrollEnabled={swipeEnabled} bounces={false} initialScrollIndex={initialSlide} onScrollToIndexFailed={(info) => {
+            // Retry if scroll to index fails
+            setTimeout(() => {
+                flatListRef.current?.scrollToIndex({
+                    index: info.index,
+                    animated: true,
+                });
+            }, 100);
+        }}/>
+
+      {/* Navigation Buttons */}
+      {showNavigation && (<NavigationButtons currentIndex={currentIndex} totalSlides={slides.length} theme={theme} config={navigationConfig} onNext={handleNext} onBack={handleBack} onSkip={handleSkip} isLastSlide={isLastSlide} isLoading={isSubmitting} darkMode={darkMode}/>)}
+    </View>);
+    if (safeAreaEnabled) {
+        return (<SafeAreaView style={styles.safeArea}>
+        <SafeAreaProvider>{content}</SafeAreaProvider>
+      </SafeAreaView>);
+    }
+    return content;
+};
+// Hook for checking onboarding status
+export const useOnboarding = (storageKey = '@onboarding_complete') => {
+    const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(true);
+    React.useEffect(() => {
+        checkStatus();
+    }, []);
+    const checkStatus = async () => {
+        try {
+            const completed = await AsyncStorage.getItem(storageKey);
+            setHasCompletedOnboarding(completed === 'true');
+        }
+        catch (error) {
+            console.warn('Error checking onboarding:', error);
+            setHasCompletedOnboarding(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const markComplete = async () => {
+        try {
+            await AsyncStorage.setItem(storageKey, 'true');
+            setHasCompletedOnboarding(true);
+        }
+        catch (error) {
+            console.warn('Error marking onboarding complete:', error);
+        }
+    };
+    const reset = async () => {
+        try {
+            await AsyncStorage.removeItem(storageKey);
+            setHasCompletedOnboarding(false);
+        }
+        catch (error) {
+            console.warn('Error resetting onboarding:', error);
+        }
+    };
+    return { hasCompletedOnboarding, isLoading, markComplete, reset };
+};
+const styles = StyleSheet.create({
+    safeArea: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    slide: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default Onboarding;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PaginationProps } from '../types';
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,eAAe,EAAmB,MAAM,UAAU,CAAC;AAmK5D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2ChD,CAAC;AA8HF,eAAe,UAAU,CAAC"}

package/dist/components/Pagination.js

@@ -0,0 +1,269 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, useDerivedValue } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+// DOTS PAGINATION
+const DotsPagination = ({ currentIndex, totalSlides, theme, style }) => {
+    const animatedIndex = useDerivedValue(() => withSpring(currentIndex, { damping: 15, stiffness: 150 }));
+    return (<View style={[styles.dotsContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+            const animatedStyle = useAnimatedStyle(() => ({
+                width: index === animatedIndex.value ? 24 : 8,
+                opacity: withSpring(index === animatedIndex.value ? 1 : 0.4, { damping: 15, stiffness: 150 }),
+            }));
+            return (<Animated.View key={index} style={[
+                    styles.dot,
+                    {
+                        backgroundColor: theme.colors.primary,
+                    },
+                    animatedStyle,
+                ]}/>);
+        })}
+    </View>);
+};
+// PROGRESS BAR PAGINATION
+const ProgressBarPagination = ({ currentIndex, totalSlides, theme, style }) => {
+    const progress = useMemo(() => (currentIndex + 1) / totalSlides, [currentIndex, totalSlides]);
+    return (<View style={[styles.progressContainer, style]}>
+      <View style={[styles.progressBackground, { backgroundColor: theme.colors.border }]}>
+        <Animated.View style={[
+            styles.progressFill,
+            {
+                width: `${progress * 100}%`,
+                backgroundColor: theme.colors.primary,
+            },
+        ]}/>
+      </View>
+      <Animated.Text style={[styles.progressText, { color: theme.colors.text.secondary }]}>
+        {currentIndex + 1} / {totalSlides}
+      </Animated.Text>
+    </View>);
+};
+// STEPS PAGINATION
+const StepsPagination = ({ currentIndex, totalSlides, theme, style }) => {
+    return (<View style={[styles.stepsContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+            const isCompleted = index < currentIndex;
+            const isCurrent = index === currentIndex;
+            return (<View key={index} style={styles.stepItem}>
+            <View style={[
+                    styles.stepCircle,
+                    {
+                        backgroundColor: isCompleted ? theme.colors.primary : isCurrent ? theme.colors.primary : theme.colors.border,
+                        borderColor: theme.colors.border,
+                    },
+                ]}>
+              {isCompleted ? (<View style={styles.stepCheckmark}/>) : (<Animated.Text style={[
+                        styles.stepNumber,
+                        { color: isCurrent ? theme.colors.text.inverse : theme.colors.text.secondary },
+                    ]}>
+                  {index + 1}
+                </Animated.Text>)}
+            </View>
+            {index < totalSlides - 1 && (<View style={[
+                        styles.stepLine,
+                        { backgroundColor: isCompleted ? theme.colors.primary : theme.colors.border },
+                    ]}/>)}
+          </View>);
+        })}
+    </View>);
+};
+// NUMBERS PAGINATION
+const NumbersPagination = ({ currentIndex, totalSlides, theme, style }) => {
+    return (<View style={[styles.numbersContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+            const isCurrent = index === currentIndex;
+            return (<Animated.View key={index} style={[
+                    styles.numberCircle,
+                    {
+                        backgroundColor: isCurrent ? theme.colors.primary : 'transparent',
+                        borderColor: theme.colors.border,
+                    },
+                ]}>
+            <Animated.Text style={[
+                    styles.numberText,
+                    { color: isCurrent ? theme.colors.text.inverse : theme.colors.text.secondary },
+                ]}>
+              {index + 1}
+            </Animated.Text>
+          </Animated.View>);
+        })}
+    </View>);
+};
+// FLOATING DOTS PAGINATION
+const FloatingDotsPagination = ({ currentIndex, totalSlides, theme, style }) => {
+    return (<View style={[styles.floatingContainer, style]}>
+      <LinearGradient colors={[theme.colors.surface + 'CC', theme.colors.surface + 'CC']} style={styles.floatingBackground}>
+        <View style={styles.floatingDots}>
+          {Array.from({ length: totalSlides }).map((_, index) => (<Animated.View key={index} style={[
+                styles.floatingDot,
+                {
+                    width: index === currentIndex ? 28 : 10,
+                    backgroundColor: index === currentIndex ? theme.colors.primary : theme.colors.border,
+                },
+            ]}/>))}
+        </View>
+      </LinearGradient>
+    </View>);
+};
+// MAIN PAGINATION COMPONENT
+export const Pagination = ({ currentIndex, totalSlides, theme, config, style }) => {
+    const { style: navStyle, position } = config || { style: 'dots', position: 'bottom' };
+    const containerStyle = useMemo(() => {
+        const base = {};
+        if (position === 'top') {
+            base.position = 'absolute';
+            base.top = 0;
+            base.left = 0;
+            base.right = 0;
+            base.paddingTop = 20;
+        }
+        else if (position === 'bottom') {
+            base.position = 'absolute';
+            base.bottom = 0;
+            base.left = 0;
+            base.right = 0;
+            base.paddingBottom = 20;
+        }
+        return base;
+    }, [position]);
+    const renderPagination = () => {
+        switch (navStyle) {
+            case 'dots':
+                return <DotsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style}/>;
+            case 'progress-bar':
+                return <ProgressBarPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style}/>;
+            case 'steps':
+                return <StepsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style}/>;
+            case 'numbers':
+                return <NumbersPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style}/>;
+            case 'none':
+                return null;
+            default:
+                return <DotsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style}/>;
+        }
+    };
+    if (navStyle === 'none')
+        return null;
+    return <View style={containerStyle}>{renderPagination()}</View>;
+};
+const styles = StyleSheet.create({
+    // Dots
+    dotsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        paddingVertical: 16,
+    },
+    dot: {
+        height: 8,
+        borderRadius: 4,
+    },
+    // Progress Bar
+    progressContainer: {
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+        alignItems: 'center',
+    },
+    progressBackground: {
+        width: '100%',
+        height: 4,
+        borderRadius: 2,
+        overflow: 'hidden',
+        marginBottom: 8,
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    progressText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    // Steps
+    stepsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 24,
+        paddingVertical: 16,
+    },
+    stepItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    stepCircle: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stepNumber: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    stepCheckmark: {
+        width: 12,
+        height: 6,
+        borderBottomWidth: 2,
+        borderLeftWidth: 2,
+        borderColor: '#FFFFFF',
+        transform: [{ rotate: '-45deg' }, { translateY: -2 }],
+    },
+    stepLine: {
+        flex: 1,
+        height: 2,
+        minWidth: 8,
+    },
+    // Numbers
+    numbersContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 16,
+        paddingVertical: 16,
+    },
+    numberCircle: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    numberText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    // Floating
+    floatingContainer: {
+        position: 'absolute',
+        bottom: 32,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    },
+    floatingBackground: {
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderRadius: 24,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    floatingDots: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    floatingDot: {
+        height: 10,
+        borderRadius: 5,
+    },
+});
+export default Pagination;

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+export { default } from './Onboarding';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+export { default } from './Onboarding';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Onboarding, useOnboarding } from './components/Onboarding';
+export { ImageSlide, IconSlide, FormSlide, VideoSlide, SlideRenderer, } from './slides';
+export { Pagination, NavigationButton, NavigationButtons, } from './components';
+export { onepageTheme, zaprecipeTheme, pomodoTheme, modernTheme, minimalTheme, gradientTheme, onepagePreset, zaprecipePreset, pomodoPreset, modernPreset, minimalPreset, gradientPreset, getTheme, getPreset, mergeTheme, } from './themes';
+export type { SlideType, BaseSlideData, ImageSlideData, IconSlideData, FormSlideData, VideoSlideData, CustomSlideData, SlideData, OnboardingTheme, NavigationStyle, NavigationConfig, AnimationType, AnimationConfig, StorageConfig, OnboardingConfig, OnboardingProps, FormSlideCustomProps, PaginationProps, NavigationButtonProps, OnboardingPreset, PresetConfig, } from './types';
+export { default } from './components/Onboarding';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAC;AAGlB,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}