@rubixscript/react-native-onboarding 1.0.1 → 1.1.0

package/dist/slides/FormSlide.js

@@ -61,33 +61,33 @@ export const FormSlide = ({ data, theme, onSubmit, darkMode, isSubmitting = fals
         const value = formData[field.key];
         const error = errors[field.key];
         if (field.type === 'select') {
-            return (<View key={field.key} style={styles.fieldContainer}>
-          <Text style={styles.label}>{field.label}</Text>
-          <View style={styles.optionsContainer}>
+            return (<View key={field.key} style={styles.fieldContainer}>
+          <Text style={styles.label}>{field.label}</Text>
+          <View style={styles.optionsContainer}>
             {field.options?.map(option => (<TouchableOpacity key={option.value} style={[
                         styles.optionCard,
                         value === option.value && styles.optionCardActive,
                         { borderColor: theme.colors.border },
-                    ]} onPress={() => updateField(field.key, option.value)}>
-                {option.icon && (<Ionicons name={option.icon} size={20} color={value === option.value ? theme.colors.text.inverse : theme.colors.text.secondary} style={{ marginRight: 8 }}/>)}
+                    ]} onPress={() => updateField(field.key, option.value)}>
+                {option.icon && (<Ionicons name={option.icon} size={20} color={value === option.value ? theme.colors.text.inverse : theme.colors.text.secondary} style={{ marginRight: 8 }}/>)}
                 <Text style={[
                         styles.optionLabel,
                         value === option.value && { color: theme.colors.text.inverse },
-                    ]}>
-                  {option.label}
-                </Text>
-              </TouchableOpacity>))}
-          </View>
-          {error && <Text style={styles.errorText}>{error}</Text>}
+                    ]}>
+                  {option.label}
+                </Text>
+              </TouchableOpacity>))}
+          </View>
+          {error && <Text style={styles.errorText}>{error}</Text>}
         </View>);
         }
-        return (<View key={field.key} style={styles.fieldContainer}>
-        <Text style={styles.label}>{field.label}</Text>
+        return (<View key={field.key} style={styles.fieldContainer}>
+        <Text style={styles.label}>{field.label}</Text>
         <TextInput style={[
                 styles.input,
                 { borderColor: error ? theme.colors.text.secondary : theme.colors.border },
-            ]} placeholder={field.placeholder} placeholderTextColor={theme.colors.text.secondary} value={value} onChangeText={text => updateField(field.key, text)} keyboardType={field.type === 'number' ? 'numeric' : field.type === 'email' ? 'email-address' : 'default'} secureTextEntry={field.type === 'password'} multiline={field.multiline} numberOfLines={field.numberOfLines}/>
-        {error && <Text style={styles.errorText}>{error}</Text>}
+            ]} placeholder={field.placeholder} placeholderTextColor={theme.colors.text.secondary} value={value} onChangeText={text => updateField(field.key, text)} keyboardType={field.type === 'number' ? 'numeric' : field.type === 'email' ? 'email-address' : 'default'} secureTextEntry={field.type === 'password'} multiline={field.multiline} numberOfLines={field.numberOfLines}/>
+        {error && <Text style={styles.errorText}>{error}</Text>}
       </View>);
     };
     const headerStyle = useMemo(() => ({
@@ -102,30 +102,30 @@ export const FormSlide = ({ data, theme, onSubmit, darkMode, isSubmitting = fals
         ...styles.description,
         color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
     }), [gradientColors, theme]);
-    const content = (<KeyboardAvoidingView style={styles.keyboardContainer} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
-      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        {/* Header */}
-        <Animated.View entering={FadeIn.duration(300)} style={headerStyle}>
-          {title && <Text style={titleStyle}>{title}</Text>}
-          {description && <Text style={descriptionStyle}>{description}</Text>}
-        </Animated.View>
-
-        {/* Form Fields */}
-        <View style={styles.formContainer}>
-          {fields.map(renderField)}
-        </View>
-
-        {/* Submit Button */}
-        <Animated.View entering={FadeIn.delay(300).duration(300)} style={styles.buttonContainer}>
-          <TouchableOpacity style={[styles.submitButton, { backgroundColor: theme.colors.primary }]} onPress={handleSubmit} disabled={isSubmitting} activeOpacity={0.8}>
-            <Text style={styles.submitButtonText}>{isSubmitting ? 'Submitting...' : submitLabel}</Text>
-          </TouchableOpacity>
-        </Animated.View>
-      </ScrollView>
+    const content = (<KeyboardAvoidingView style={styles.keyboardContainer} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Header */}
+        <Animated.View entering={FadeIn.duration(300)} style={headerStyle}>
+          {title && <Text style={titleStyle}>{title}</Text>}
+          {description && <Text style={descriptionStyle}>{description}</Text>}
+        </Animated.View>
+
+        {/* Form Fields */}
+        <View style={styles.formContainer}>
+          {fields.map(renderField)}
+        </View>
+
+        {/* Submit Button */}
+        <Animated.View entering={FadeIn.delay(300).duration(300)} style={styles.buttonContainer}>
+          <TouchableOpacity style={[styles.submitButton, { backgroundColor: theme.colors.primary }]} onPress={handleSubmit} disabled={isSubmitting} activeOpacity={0.8}>
+            <Text style={styles.submitButtonText}>{isSubmitting ? 'Submitting...' : submitLabel}</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      </ScrollView>
     </KeyboardAvoidingView>);
     if (gradientColors && gradientColors.length > 0) {
-        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
-        <View style={containerStyle}>{content}</View>
+        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
+        <View style={containerStyle}>{content}</View>
       </LinearGradient>);
     }
     return <View style={containerStyle}>{content}</View>;

package/dist/slides/IconSlide.js

@@ -78,32 +78,32 @@ export const IconSlide = ({ data, theme, darkMode }) => {
         ...styles.description,
         color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
     }), [gradientColors, theme]);
-    const content = (<>
-      {/* Icon */}
-      <Animated.View style={iconAnimatedStyle}>
-        <View style={iconContainerStyle}>
-          {renderIcon()}
-        </View>
-      </Animated.View>
-
-      {/* Title */}
-      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
-          {title}
-        </Animated.Text>)}
-
-      {/* Subtitle */}
-      {subtitle && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={subtitleStyle}>
-          {subtitle}
-        </Animated.Text>)}
-
-      {/* Description */}
-      {description && (<Animated.Text entering={FadeInDown.delay(300).springify()} style={descriptionStyle}>
-          {description}
-        </Animated.Text>)}
+    const content = (<>
+      {/* Icon */}
+      <Animated.View style={iconAnimatedStyle}>
+        <View style={iconContainerStyle}>
+          {renderIcon()}
+        </View>
+      </Animated.View>
+
+      {/* Title */}
+      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
+          {title}
+        </Animated.Text>)}
+
+      {/* Subtitle */}
+      {subtitle && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={subtitleStyle}>
+          {subtitle}
+        </Animated.Text>)}
+
+      {/* Description */}
+      {description && (<Animated.Text entering={FadeInDown.delay(300).springify()} style={descriptionStyle}>
+          {description}
+        </Animated.Text>)}
     </>);
     if (gradientColors && gradientColors.length > 0) {
-        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
-        <View style={containerStyle}>{content}</View>
+        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
+        <View style={containerStyle}>{content}</View>
       </LinearGradient>);
     }
     return <View style={containerStyle}>{content}</View>;

package/dist/slides/ImageSlide.js

@@ -43,28 +43,28 @@ export const ImageSlide = ({ data, theme, darkMode }) => {
         ...styles.description,
         color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
     }), [gradientColors, theme]);
-    const content = (<>
-      {/* Image with optional overlay icon */}
-      <Animated.View entering={FadeIn.duration(400).springify()} style={imageContainerStyle}>
-        <Image source={image} style={baseImageStyle}/>
-        {overlayIcon && (<View style={styles.overlayIcon}>
-            <Ionicons name={overlayIcon.name} size={overlayIcon.size || 48} color={overlayIcon.color || '#FFFFFF'}/>
-          </View>)}
-      </Animated.View>
-
-      {/* Title */}
-      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
-          {title}
-        </Animated.Text>)}
-
-      {/* Description */}
-      {description && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={descriptionStyle}>
-          {description}
-        </Animated.Text>)}
+    const content = (<>
+      {/* Image with optional overlay icon */}
+      <Animated.View entering={FadeIn.duration(400).springify()} style={imageContainerStyle}>
+        <Image source={image} style={baseImageStyle}/>
+        {overlayIcon && (<View style={styles.overlayIcon}>
+            <Ionicons name={overlayIcon.name} size={overlayIcon.size || 48} color={overlayIcon.color || '#FFFFFF'}/>
+          </View>)}
+      </Animated.View>
+
+      {/* Title */}
+      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
+          {title}
+        </Animated.Text>)}
+
+      {/* Description */}
+      {description && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={descriptionStyle}>
+          {description}
+        </Animated.Text>)}
     </>);
     if (gradientColors && gradientColors.length > 0) {
-        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
-        <View style={containerStyle}>{content}</View>
+        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
+        <View style={containerStyle}>{content}</View>
       </LinearGradient>);
     }
     return <View style={containerStyle}>{content}</View>;

package/dist/slides/VideoSlide.js

@@ -52,28 +52,28 @@ export const VideoSlide = ({ data, theme, darkMode }) => {
         color: gradientColors?.length ? theme.colors.text.secondary : theme.colors.text.secondary,
     }), [gradientColors, theme]);
     const videoSourceUri = typeof videoSource === 'string' ? { uri: videoSource } : videoSource;
-    const content = (<>
-      {/* Video */}
-      <Animated.View entering={FadeIn.duration(400)} style={videoContainerStyle}>
-        <View style={videoStyle}>
-          <Video ref={videoRef} source={videoSourceUri} style={StyleSheet.absoluteFillObject} useNativeControls={false} resizeMode={ResizeMode.CONTAIN} shouldPlay={autoPlay} isLooping={loop} isMuted={muted} onLoad={handleVideoLoad}/>
-          {!isReady && poster && (<Animated.Image source={poster} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
-        </View>
-      </Animated.View>
-
-      {/* Title */}
-      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
-          {title}
-        </Animated.Text>)}
-
-      {/* Description */}
-      {description && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={descriptionStyle}>
-          {description}
-        </Animated.Text>)}
+    const content = (<>
+      {/* Video */}
+      <Animated.View entering={FadeIn.duration(400)} style={videoContainerStyle}>
+        <View style={videoStyle}>
+          <Video ref={videoRef} source={videoSourceUri} style={StyleSheet.absoluteFillObject} useNativeControls={false} resizeMode={ResizeMode.CONTAIN} shouldPlay={autoPlay} isLooping={loop} isMuted={muted} onLoad={handleVideoLoad}/>
+          {!isReady && poster && (<Animated.Image source={poster} style={StyleSheet.absoluteFillObject} resizeMode="cover"/>)}
+        </View>
+      </Animated.View>
+
+      {/* Title */}
+      {title && (<Animated.Text entering={FadeInDown.delay(100).springify()} style={titleStyle}>
+          {title}
+        </Animated.Text>)}
+
+      {/* Description */}
+      {description && (<Animated.Text entering={FadeInDown.delay(200).springify()} style={descriptionStyle}>
+          {description}
+        </Animated.Text>)}
     </>);
     if (gradientColors && gradientColors.length > 0) {
-        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
-        <View style={containerStyle}>{content}</View>
+        return (<LinearGradient colors={gradientColors} style={StyleSheet.absoluteFillObject}>
+        <View style={containerStyle}>{content}</View>
       </LinearGradient>);
     }
     return <View style={containerStyle}>{content}</View>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAsEzD,eAAO,MAAM,YAAY,EAAE,eAuC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAmC3B,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,eAuC5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAmC7B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAoC1B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YA2B1B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,eAiC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YA0B3B,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,eAkC3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YA8B5B,CAAC;AAMF,eAAO,MAAM,QAAQ,GAAI,QAAQ,MAAM,KAAG,eAUzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,QAAQ,MAAM,KAAG,YAU1C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,eAAe,EAAE,SAAS,OAAO,CAAC,eAAe,CAAC,KAAG,eAUrF,CAAC;;;;;;;;;;;;;;uBAlC+B,MAAM,KAAG,eAAe;wBAYvB,MAAM,KAAG,YAAY;uBAYtB,eAAe,WAAW,OAAO,CAAC,eAAe,CAAC,KAAG,eAAe;;AAYrG,wBAgBE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAsEzD,eAAO,MAAM,YAAY,EAAE,eAuC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YAmC3B,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,eAuC5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAmC7B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YAsC1B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,eAkCzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,YA2B1B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,eAiC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,YA0B3B,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,eAkC3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YA8B5B,CAAC;AAMF,eAAO,MAAM,QAAQ,GAAI,QAAQ,MAAM,KAAG,eAUzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,QAAQ,MAAM,KAAG,YAU1C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,eAAe,EAAE,SAAS,OAAO,CAAC,eAAe,CAAC,KAAG,eAUrF,CAAC;;;;;;;;;;;;;;uBAlC+B,MAAM,KAAG,eAAe;wBAYvB,MAAM,KAAG,YAAY;uBAYtB,eAAe,WAAW,OAAO,CAAC,eAAe,CAAC,KAAG,eAAe;;AAYrG,wBAgBE"}

package/dist/themes/index.js

@@ -275,19 +275,21 @@ export const pomodoPreset = {
             borderRadius: 80,
             justifyContent: 'center',
             alignItems: 'center',
-            marginBottom: 24,
+            marginBottom: 40,
         },
         title: {
-            fontSize: 22,
-            marginBottom: 12,
+            fontSize: 28,
+            marginBottom: 16,
             textAlign: 'center',
-            fontWeight: '600',
+            fontWeight: '700',
+            color: '#000000',
         },
         description: {
-            fontSize: 14,
+            fontSize: 17,
             textAlign: 'center',
-            paddingHorizontal: 32,
-            lineHeight: 20,
+            paddingHorizontal: 40,
+            lineHeight: 24,
+            color: '#666666',
         },
     },
 };

package/package.json

@@ -1,66 +1,73 @@
-{
-  "name": "@rubixscript/react-native-onboarding",
-  "version": "1.0.1",
-  "description": "A comprehensive React Native onboarding library with customizable slide types, animations, and themes",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "lint": "eslint src --ext .ts,.tsx",
-    "type-check": "tsc --noEmit"
-  },
-  "keywords": [
-    "react-native",
-    "onboarding",
-    "walkthrough",
-    "tutorial",
-    "user-onboarding",
-    "expo",
-    "react",
-    "slides",
-    "carousel"
-  ],
-  "author": "RubixScript Team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rubixscript/react-native-onboarding.git"
-  },
-  "peerDependencies": {
-    "expo": ">=48.0.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-reanimated": ">=3.0.0"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "@react-native-async-storage/async-storage": ">=1.19.0",
-    "expo-av": "~15.0.0",
-    "expo-blur": "~15.0.7",
-    "expo-linear-gradient": "~15.0.7",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-safe-area-context": "~5.0.0"
-  },
-  "devDependencies": {
-    "@testing-library/react-native": "^12.0.0",
-    "@types/jest": "^29.5.0",
-    "@types/react": "~19.1.10",
-    "@types/react-native": "^0.73.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.0.0",
-    "jest": "^29.0.0",
-    "typescript": "~5.9.2"
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=16.0.0"
-  }
-}
+{
+  "name": "@rubixscript/react-native-onboarding",
+  "version": "1.1.0",
+  "description": "A comprehensive React Native onboarding library with customizable slide types, animations, and themes",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "build:rollup": "rollup -c",
+    "prepublishOnly": "npm run build",
+    "test": "jest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "onboarding",
+    "walkthrough",
+    "tutorial",
+    "user-onboarding",
+    "expo",
+    "react",
+    "slides",
+    "carousel"
+  ],
+  "author": "RubixScript Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rubixscript/react-native-onboarding.git"
+  },
+  "peerDependencies": {
+    "expo": ">=48.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": ">=1.19.0",
+    "expo-av": "~15.0.0",
+    "expo-blur": "~15.0.7",
+    "expo-linear-gradient": "~15.0.7",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": "~5.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@testing-library/react-native": "^12.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "~19.1.10",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.0.0",
+    "rollup": "^4.28.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "~5.9.2"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}