@rubixscript/react-native-onboarding 1.0.1 → 1.1.1

package/dist/components/NavigationButtons.js

@@ -36,8 +36,8 @@ export const NavigationButton = ({ label, onPress, theme, variant = 'primary', d
         };
         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>)}
+    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, }) => {
@@ -57,23 +57,23 @@ export const NavigationButtons = ({ currentIndex, totalSlides, theme, config, on
         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}/>
+    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>
+        return (<BlurView intensity={80} tint={darkMode ? 'dark' : 'light'} style={containerStyle}>
+        <View style={styles.buttonRow}>{buttons}</View>
       </BlurView>);
     }
     return <View style={containerStyle}>{buttons}</View>;

package/dist/components/Onboarding.js

@@ -121,8 +121,8 @@ export const Onboarding = ({ visible, slides = [], theme: customTheme, navigatio
     }, []);
     // Renderers
     const renderSlide = useCallback(({ item, index }) => {
-        return (<View style={[styles.slide, { width: '100%' }]}>
-          <SlideRenderer data={item} theme={theme} darkMode={darkMode} onSubmit={handleFormDataChange} isSubmitting={isSubmitting}/>
+        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}`, []);
@@ -133,14 +133,14 @@ export const Onboarding = ({ visible, slides = [], theme: customTheme, navigatio
     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 */}
+    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(() => {
@@ -149,14 +149,14 @@ export const Onboarding = ({ visible, slides = [], theme: customTheme, navigatio
                     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}/>)}
+        }}/>
+
+      {/* 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>
+        return (<SafeAreaView style={styles.safeArea}>
+        <SafeAreaProvider>{content}</SafeAreaProvider>
       </SafeAreaView>);
     }
     return content;

package/dist/components/Pagination.js

@@ -5,7 +5,7 @@ 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]}>
+    return (<View style={[styles.dotsContainer, style]}>
       {Array.from({ length: totalSlides }).map((_, index) => {
             const animatedStyle = useAnimatedStyle(() => ({
                 width: index === animatedIndex.value ? 24 : 8,
@@ -18,59 +18,59 @@ const DotsPagination = ({ currentIndex, totalSlides, theme, style }) => {
                     },
                     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 }]}>
+    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>
+      <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]}>
+    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}>
+            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 + 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]}>
+    return (<View style={[styles.numbersContainer, style]}>
       {Array.from({ length: totalSlides }).map((_, index) => {
             const isCurrent = index === currentIndex;
             return (<Animated.View key={index} style={[
@@ -79,31 +79,31 @@ const NumbersPagination = ({ currentIndex, totalSlides, theme, style }) => {
                         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>
+                ]}>
+              {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}>
+    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>
+      </LinearGradient>
     </View>);
 };
 // MAIN PAGINATION COMPONENT

package/dist/components/SimpleOnboardingScreen.d.ts

@@ -0,0 +1,54 @@
+/**  METADATA
+ * @component SimpleOnboardingScreen
+ * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
+ *
+ * @props
+ * - onComplete: () => void - Handler called when onboarding is finished
+ * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - primaryColor: string - Primary color for buttons and active dots (default: '#FF6B6B')
+ * - backgroundColor: string - Background color of the screen (default: '#F6F6F6')
+ * - iconBackgroundColor: string - Background color for icon container (default: 'rgba(255, 107, 107, 0.1)')
+ * - textColor: string - Color for titles (default: '#000000')
+ * - descriptionColor: string - Color for descriptions (default: '#666666')
+ * - buttonTextNext: string - Text for next button (default: 'Next')
+ * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - testID?: string - Test identifier for testing
+ *
+ * @states
+ * - currentIndex: number - Current onboarding screen index
+ *
+ * @features
+ * - Step-by-step app introduction
+ * - Interactive animations
+ * - Feature highlights
+ * - Progress indication
+ * - Fully customizable styling
+ *
+ * @dependencies
+ * - react-native-reanimated: For animations
+ * - @expo/vector-icons: For UI icons
+ * - react-native components
+ */
+import React from 'react';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+export interface SimpleSlide {
+    id: string;
+    title: string;
+    description: string;
+    icon: keyof typeof MaterialCommunityIcons.glyphMap;
+}
+interface SimpleOnboardingScreenProps {
+    onComplete: () => Promise<void>;
+    slides?: SimpleSlide[];
+    primaryColor?: string;
+    backgroundColor?: string;
+    iconBackgroundColor?: string;
+    textColor?: string;
+    descriptionColor?: string;
+    buttonTextNext?: string;
+    buttonTextDone?: string;
+    testID?: string;
+}
+export default function SimpleOnboardingScreen({ onComplete, slides, primaryColor, backgroundColor, iconBackgroundColor, textColor, descriptionColor, buttonTextNext, buttonTextDone, testID, }: SimpleOnboardingScreenProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SimpleOnboardingScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleOnboardingScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimpleOnboardingScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,sBAAsB,CAAC,QAAQ,CAAC;CACpD;AAuBD,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,MAAsB,EACtB,YAAwB,EACxB,eAA2B,EAC3B,mBAAgD,EAChD,SAAqB,EACrB,gBAA4B,EAC5B,cAAuB,EACvB,cAA8B,EAC9B,MAAM,GACP,EAAE,2BAA2B,qBAuF7B"}

package/dist/components/SimpleOnboardingScreen.js

@@ -0,0 +1,184 @@
+/**  METADATA
+ * @component SimpleOnboardingScreen
+ * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
+ *
+ * @props
+ * - onComplete: () => void - Handler called when onboarding is finished
+ * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - primaryColor: string - Primary color for buttons and active dots (default: '#FF6B6B')
+ * - backgroundColor: string - Background color of the screen (default: '#F6F6F6')
+ * - iconBackgroundColor: string - Background color for icon container (default: 'rgba(255, 107, 107, 0.1)')
+ * - textColor: string - Color for titles (default: '#000000')
+ * - descriptionColor: string - Color for descriptions (default: '#666666')
+ * - buttonTextNext: string - Text for next button (default: 'Next')
+ * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - testID?: string - Test identifier for testing
+ *
+ * @states
+ * - currentIndex: number - Current onboarding screen index
+ *
+ * @features
+ * - Step-by-step app introduction
+ * - Interactive animations
+ * - Feature highlights
+ * - Progress indication
+ * - Fully customizable styling
+ *
+ * @dependencies
+ * - react-native-reanimated: For animations
+ * - @expo/vector-icons: For UI icons
+ * - react-native components
+ */
+import React, { useRef, useState } from 'react';
+import { View, Text, StyleSheet, Dimensions, TouchableOpacity, FlatList, Platform, StatusBar, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Animated, { FadeIn } from 'react-native-reanimated';
+const { width } = Dimensions.get('window');
+const defaultSlides = [
+    {
+        id: '1',
+        title: 'Focus Timer',
+        description: 'Stay productive with our Pomodoro timer. Work in focused intervals for better results.',
+        icon: 'timer-outline',
+    },
+    {
+        id: '2',
+        title: 'Task Management',
+        description: 'Organize your tasks efficiently. Track progress and set priorities with ease.',
+        icon: 'checkbox-marked-circle-outline',
+    },
+    {
+        id: '3',
+        title: 'Statistics',
+        description: 'Monitor your productivity with detailed statistics and insights.',
+        icon: 'chart-line',
+    },
+];
+export default function SimpleOnboardingScreen({ onComplete, slides = defaultSlides, primaryColor = '#FF6B6B', backgroundColor = '#F6F6F6', iconBackgroundColor = 'rgba(255, 107, 107, 0.1)', textColor = '#000000', descriptionColor = '#666666', buttonTextNext = 'Next', buttonTextDone = 'Get Started', testID, }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const flatListRef = useRef(null);
+    const renderSlide = ({ item }) => (<View style={styles.slide}>
+      <Animated.View entering={FadeIn.duration(500)} style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}>
+        <MaterialCommunityIcons name={item.icon} size={80} color={textColor}/>
+      </Animated.View>
+      <Text style={[styles.title, { color: textColor }]}>
+        {item.title}
+      </Text>
+      <Text style={[styles.description, { color: descriptionColor }]}>
+        {item.description}
+      </Text>
+    </View>);
+    const handleNext = () => {
+        if (currentIndex < slides.length - 1) {
+            flatListRef.current?.scrollToIndex({
+                index: currentIndex + 1,
+                animated: true,
+            });
+            setCurrentIndex(currentIndex + 1);
+        }
+        else {
+            onComplete();
+        }
+    };
+    return (<SafeAreaView testID={testID} style={[styles.container, { backgroundColor }]} edges={['top', 'bottom']}>
+      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent/>
+
+      <FlatList ref={flatListRef} data={slides} renderItem={renderSlide} horizontal pagingEnabled showsHorizontalScrollIndicator={false} onMomentumScrollEnd={(event) => {
+            const index = Math.round(event.nativeEvent.contentOffset.x / width);
+            setCurrentIndex(index);
+        }}/>
+
+      <BlurView intensity={80} tint="light" style={styles.footer}>
+        <View style={styles.pagination}>
+          {slides.map((_, index) => (<View key={index} style={[
+                styles.paginationDot,
+                index === currentIndex && styles.paginationDotActive,
+                index === currentIndex && { backgroundColor: primaryColor },
+            ]}/>))}
+        </View>
+
+        <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor }]} onPress={handleNext}>
+          <Text style={styles.buttonText}>
+            {currentIndex === slides.length - 1 ? buttonTextDone : buttonTextNext}
+          </Text>
+        </TouchableOpacity>
+      </BlurView>
+    </SafeAreaView>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    slide: {
+        width,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 40,
+    },
+    iconContainer: {
+        width: 160,
+        height: 160,
+        borderRadius: 80,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 40,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        marginBottom: 16,
+        textAlign: 'center',
+    },
+    description: {
+        fontSize: 17,
+        textAlign: 'center',
+        lineHeight: 24,
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        paddingHorizontal: 20,
+        paddingVertical: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    pagination: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    paginationDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    },
+    paginationDotActive: {
+        width: 20,
+    },
+    button: {
+        paddingHorizontal: 32,
+        paddingVertical: 16,
+        borderRadius: 24,
+        ...Platform.select({
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 8 },
+                shadowOpacity: 0.15,
+                shadowRadius: 12,
+            },
+            android: {
+                elevation: 8,
+            },
+        }),
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 17,
+        fontWeight: '600',
+    },
+});

package/dist/components/index.d.ts

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

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

@@ -1 +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"}
+{"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;AACzD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/index.js

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

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { Onboarding, useOnboarding } from './components/Onboarding';
+export { SimpleOnboardingScreen } from './components';
+export type { SimpleSlide } from './components';
 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';

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,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"}

package/dist/index.js

@@ -1,5 +1,7 @@
 // Main Component
 export { Onboarding, useOnboarding } from './components/Onboarding';
+// Simple Onboarding Screen - A simple, customizable onboarding component
+export { SimpleOnboardingScreen } from './components';
 // Slide Components
 export { ImageSlide, IconSlide, FormSlide, VideoSlide, SlideRenderer, } from './slides';
 // UI Components

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMvD,eAAO,MAAM,aAAa,EAAE,SAAS,EAuEpC,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,SAAS,EAqEtC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EAiDnC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EA2CnC,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,SAAS,EA2CpC,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,SAAS,EAyBrC,CAAC;AAMF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,SAAS,EAUzD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAKxE,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,gBAG3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,gBAG7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAI1B,CAAC;;;;;;;;8BArCsC,MAAM,KAAG,SAAS,EAAE;8BAYpB,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAAC;;;;;AA2B1E,wBAYE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMvD,eAAO,MAAM,aAAa,EAAE,SAAS,EAuEpC,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,SAAS,EAqEtC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EA8CnC,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAAS,EA2CnC,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,SAAS,EA2CpC,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,SAAS,EAyBrC,CAAC;AAMF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,SAAS,EAUzD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAKxE,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,gBAG3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,gBAG7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,gBAI1B,CAAC;;;;;;;;8BArCsC,MAAM,KAAG,SAAS,EAAE;8BAYpB,MAAM,KAAG,OAAO,CAAC,gBAAgB,CAAC;;;;;AA2B1E,wBAYE"}

package/dist/presets/index.js

@@ -151,49 +151,46 @@ export const zaprecipeSlides = [
 // ============================================================================
 export const pomodoSlides = [
     {
-        id: 'focus',
+        id: '1',
         type: 'icon',
-        title: 'Stay Focused',
-        subtitle: 'Pomodoro Timer',
-        description: 'Boost your productivity with our customizable Pomodoro timer. Work in focused intervals and take meaningful breaks.',
+        title: 'Focus Timer',
+        description: 'Stay productive with our Pomodoro timer. Work in focused intervals for better results.',
         icon: {
-            name: 'timer',
-            type: 'ionicons',
-            size: 64,
-            color: '#FFFFFF',
-            backgroundColor: '#FF6B6B',
+            name: 'timer-outline',
+            type: 'material-community',
+            size: 80,
+            color: '#000000',
+            backgroundColor: 'rgba(255, 107, 107, 0.1)',
             backgroundSize: 160,
         },
         backgroundColor: '#F6F6F6',
     },
     {
-        id: 'tasks',
+        id: '2',
         type: 'icon',
-        title: 'Organize Tasks',
-        subtitle: 'Task Management',
-        description: 'Keep track of all your tasks with priorities, tags, and subtasks. Never lose track of what needs to be done.',
+        title: 'Task Management',
+        description: 'Organize your tasks efficiently. Track progress and set priorities with ease.',
         icon: {
-            name: 'checkmark-circle',
-            type: 'ionicons',
-            size: 64,
-            color: '#FFFFFF',
-            backgroundColor: '#667EEA',
+            name: 'checkbox-marked-circle-outline',
+            type: 'material-community',
+            size: 80,
+            color: '#000000',
+            backgroundColor: 'rgba(255, 107, 107, 0.1)',
             backgroundSize: 160,
         },
         backgroundColor: '#F6F6F6',
     },
     {
-        id: 'stats',
+        id: '3',
         type: 'icon',
-        title: 'Track Progress',
-        subtitle: 'Insights & Analytics',
-        description: 'Monitor your productivity with detailed statistics. See your focus time, completed tasks, and patterns.',
+        title: 'Statistics',
+        description: 'Monitor your productivity with detailed statistics and insights.',
         icon: {
-            name: 'stats-chart',
-            type: 'ionicons',
-            size: 64,
-            color: '#FFFFFF',
-            backgroundColor: '#06D6A0',
+            name: 'chart-line',
+            type: 'material-community',
+            size: 80,
+            color: '#000000',
+            backgroundColor: 'rgba(255, 107, 107, 0.1)',
             backgroundSize: 160,
         },
         backgroundColor: '#F6F6F6',