@rubixscript/react-native-onboarding 1.0.0 → 1.1.0

package/dist/themes/index.js

@@ -0,0 +1,547 @@
+import { Platform } from 'react-native';
+// ============================================================================
+// BASE THEME UTILITIES
+// ============================================================================
+const createBaseTypography = () => ({
+    title: {
+        fontFamily: Platform.select({ ios: 'System', android: 'Roboto' }),
+        fontWeight: '700',
+        letterSpacing: -0.5,
+    },
+    description: {
+        fontFamily: Platform.select({ ios: 'System', android: 'Roboto' }),
+        fontWeight: '400',
+        lineHeight: 24,
+    },
+    button: {
+        fontFamily: Platform.select({ ios: 'System', android: 'Roboto' }),
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    label: {
+        fontFamily: Platform.select({ ios: 'System', android: 'Roboto' }),
+        fontWeight: '500',
+    },
+});
+const createSpacing = () => ({
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+});
+const createBorderRadius = () => ({
+    sm: 4,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+});
+const createShadows = () => ({
+    sm: {
+        ...Platform.select({
+            ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2 },
+            android: { elevation: 2 },
+        }),
+    },
+    md: {
+        ...Platform.select({
+            ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 4 },
+            android: { elevation: 4 },
+        }),
+    },
+    lg: {
+        ...Platform.select({
+            ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8 },
+            android: { elevation: 8 },
+        }),
+    },
+});
+// ============================================================================
+// ONEPAGE THEME
+// ============================================================================
+export const onepageTheme = {
+    colors: {
+        primary: '#667EEA',
+        secondary: '#06D6A0',
+        background: '#F8FAFC',
+        surface: '#FFFFFF',
+        text: {
+            primary: '#1E293B',
+            secondary: '#64748B',
+            inverse: '#FFFFFF',
+        },
+        border: '#E2E8F0',
+        overlay: 'rgba(0, 0, 0, 0.1)',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 28,
+            color: '#1E293B',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 15,
+            color: '#64748B',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 16,
+            color: '#FFFFFF',
+        },
+        label: {
+            ...createBaseTypography().label,
+            fontSize: 14,
+            color: '#475569',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const onepagePreset = {
+    theme: onepageTheme,
+    navigation: {
+        style: 'dots',
+        position: 'bottom',
+        showSkip: true,
+        showBack: true,
+        skipLabel: 'Skip',
+        backLabel: 'Back',
+        nextLabel: 'Next',
+        doneLabel: "Let's Get Started",
+    },
+    animation: {
+        type: 'slide',
+        duration: 300,
+    },
+    defaultSlideStyles: {
+        image: {
+            width: '100%',
+            height: 280,
+            borderRadius: 16,
+            marginBottom: 24,
+        },
+        title: {
+            fontSize: 24,
+            marginBottom: 12,
+            textAlign: 'center',
+        },
+        description: {
+            fontSize: 15,
+            textAlign: 'center',
+            paddingHorizontal: 32,
+            lineHeight: 22,
+        },
+    },
+};
+// ============================================================================
+// ZAPRECIPE THEME
+// ============================================================================
+export const zaprecipeTheme = {
+    colors: {
+        primary: '#6B4EFF',
+        secondary: '#FF8C42',
+        background: '#FFFFFF',
+        surface: '#FFFFFF',
+        text: {
+            primary: '#1E293B',
+            secondary: '#64748B',
+            inverse: '#FFFFFF',
+        },
+        border: '#E2E8F0',
+        overlay: 'rgba(255, 255, 255, 0.2)',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 32,
+            color: '#FFFFFF',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 16,
+            color: 'rgba(255, 255, 255, 0.9)',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 16,
+            color: '#FFFFFF',
+        },
+        label: {
+            ...createBaseTypography().label,
+            fontSize: 14,
+            color: '#FFFFFF',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const zaprecipePreset = {
+    theme: zaprecipeTheme,
+    navigation: {
+        style: 'dots',
+        position: 'floating',
+        showSkip: true,
+        showBack: true,
+        skipLabel: 'Skip',
+        backLabel: 'Back',
+        nextLabel: 'Continue',
+        doneLabel: "Let's Start Cooking!",
+    },
+    animation: {
+        type: 'fade',
+        duration: 250,
+    },
+    defaultSlideStyles: {
+        image: {
+            width: '100%',
+            height: 300,
+            borderRadius: 0,
+            marginBottom: 0,
+        },
+        title: {
+            fontSize: 28,
+            marginBottom: 16,
+            textAlign: 'center',
+        },
+        description: {
+            fontSize: 15,
+            textAlign: 'center',
+            paddingHorizontal: 24,
+            lineHeight: 22,
+        },
+    },
+};
+// ============================================================================
+// POMODO THEME
+// ============================================================================
+export const pomodoTheme = {
+    colors: {
+        primary: '#FF6B6B',
+        secondary: '#667EEA',
+        background: '#F6F6F6',
+        surface: '#FFFFFF',
+        text: {
+            primary: '#1E293B',
+            secondary: '#64748B',
+            inverse: '#FFFFFF',
+        },
+        border: '#E2E8F0',
+        overlay: 'rgba(0, 0, 0, 0.05)',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 24,
+            color: '#1E293B',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 14,
+            color: '#64748B',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 16,
+            color: '#FFFFFF',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const pomodoPreset = {
+    theme: pomodoTheme,
+    navigation: {
+        style: 'dots',
+        position: 'bottom',
+        showSkip: false,
+        showBack: false,
+        nextLabel: 'Next',
+        doneLabel: 'Get Started',
+    },
+    animation: {
+        type: 'fade',
+        duration: 500,
+    },
+    defaultSlideStyles: {
+        icon: {
+            width: 160,
+            height: 160,
+            borderRadius: 80,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginBottom: 40,
+        },
+        title: {
+            fontSize: 28,
+            marginBottom: 16,
+            textAlign: 'center',
+            fontWeight: '700',
+            color: '#000000',
+        },
+        description: {
+            fontSize: 17,
+            textAlign: 'center',
+            paddingHorizontal: 40,
+            lineHeight: 24,
+            color: '#666666',
+        },
+    },
+};
+// ============================================================================
+// MODERN THEME
+// ============================================================================
+export const modernTheme = {
+    colors: {
+        primary: '#8B5CF6',
+        secondary: '#EC4899',
+        background: '#FFFFFF',
+        surface: '#F9FAFB',
+        text: {
+            primary: '#111827',
+            secondary: '#6B7280',
+            inverse: '#FFFFFF',
+        },
+        border: '#E5E7EB',
+        overlay: 'rgba(0, 0, 0, 0.05)',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 30,
+            color: '#111827',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 16,
+            color: '#6B7280',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 16,
+            color: '#FFFFFF',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const modernPreset = {
+    theme: modernTheme,
+    navigation: {
+        style: 'progress-bar',
+        position: 'top',
+        showSkip: true,
+        showBack: true,
+        skipLabel: 'Skip',
+        backLabel: 'Back',
+        nextLabel: 'Next',
+        doneLabel: 'Get Started',
+    },
+    animation: {
+        type: 'slide',
+        duration: 350,
+    },
+    defaultSlideStyles: {
+        title: {
+            fontSize: 28,
+            marginBottom: 16,
+            fontWeight: '700',
+        },
+        description: {
+            fontSize: 16,
+            lineHeight: 24,
+        },
+    },
+};
+// ============================================================================
+// MINIMAL THEME
+// ============================================================================
+export const minimalTheme = {
+    colors: {
+        primary: '#111827',
+        secondary: '#6B7280',
+        background: '#FFFFFF',
+        surface: '#FFFFFF',
+        text: {
+            primary: '#111827',
+            secondary: '#6B7280',
+            inverse: '#FFFFFF',
+        },
+        border: '#E5E7EB',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 24,
+            color: '#111827',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 15,
+            color: '#6B7280',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 15,
+            color: '#FFFFFF',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const minimalPreset = {
+    theme: minimalTheme,
+    navigation: {
+        style: 'steps',
+        position: 'bottom',
+        showSkip: true,
+        showBack: false,
+        skipLabel: 'Skip',
+        nextLabel: 'Next',
+        doneLabel: 'Start',
+    },
+    animation: {
+        type: 'fade',
+        duration: 200,
+    },
+    defaultSlideStyles: {
+        title: {
+            fontSize: 22,
+            marginBottom: 8,
+            fontWeight: '600',
+        },
+        description: {
+            fontSize: 14,
+            lineHeight: 20,
+        },
+    },
+};
+// ============================================================================
+// GRADIENT THEME
+// ============================================================================
+export const gradientTheme = {
+    colors: {
+        primary: '#667EEA',
+        secondary: '#764BA2',
+        background: '#667EEA',
+        surface: 'rgba(255, 255, 255, 0.15)',
+        text: {
+            primary: '#FFFFFF',
+            secondary: 'rgba(255, 255, 255, 0.8)',
+            inverse: '#FFFFFF',
+        },
+        border: 'rgba(255, 255, 255, 0.2)',
+        overlay: 'rgba(255, 255, 255, 0.1)',
+    },
+    typography: {
+        title: {
+            ...createBaseTypography().title,
+            fontSize: 32,
+            color: '#FFFFFF',
+        },
+        description: {
+            ...createBaseTypography().description,
+            fontSize: 16,
+            color: 'rgba(255, 255, 255, 0.9)',
+        },
+        button: {
+            ...createBaseTypography().button,
+            fontSize: 16,
+            color: '#FFFFFF',
+        },
+    },
+    spacing: createSpacing(),
+    borderRadius: createBorderRadius(),
+    shadows: createShadows(),
+};
+export const gradientPreset = {
+    theme: gradientTheme,
+    navigation: {
+        style: 'dots',
+        position: 'floating',
+        showSkip: true,
+        showBack: true,
+        skipLabel: 'Skip',
+        backLabel: 'Back',
+        nextLabel: 'Next',
+        doneLabel: 'Get Started',
+    },
+    animation: {
+        type: 'parallax',
+        duration: 400,
+        parallaxFactor: 0.3,
+    },
+    defaultSlideStyles: {
+        title: {
+            fontSize: 28,
+            marginBottom: 16,
+            textAlign: 'center',
+        },
+        description: {
+            fontSize: 15,
+            textAlign: 'center',
+            paddingHorizontal: 24,
+            lineHeight: 22,
+        },
+    },
+};
+// ============================================================================
+// THEME GETTERS
+// ============================================================================
+export const getTheme = (preset) => {
+    const themes = {
+        onepage: onepageTheme,
+        zaprecipe: zaprecipeTheme,
+        pomodo: pomodoTheme,
+        modern: modernTheme,
+        minimal: minimalTheme,
+        gradient: gradientTheme,
+    };
+    return themes[preset] || modernTheme;
+};
+export const getPreset = (preset) => {
+    const presets = {
+        onepage: onepagePreset,
+        zaprecipe: zaprecipePreset,
+        pomodo: pomodoPreset,
+        modern: modernPreset,
+        minimal: minimalPreset,
+        gradient: gradientPreset,
+    };
+    return presets[preset] || modernPreset;
+};
+export const mergeTheme = (base, custom) => {
+    if (!custom)
+        return base;
+    return {
+        colors: { ...base.colors, ...custom.colors, text: { ...base.colors.text, ...custom.colors?.text } },
+        typography: { ...base.typography, ...custom.typography },
+        spacing: { ...base.spacing, ...custom.spacing },
+        borderRadius: { ...base.borderRadius, ...custom.borderRadius },
+        shadows: { ...base.shadows, ...custom.shadows },
+    };
+};
+export default {
+    onepageTheme,
+    zaprecipeTheme,
+    pomodoTheme,
+    modernTheme,
+    minimalTheme,
+    gradientTheme,
+    onepagePreset,
+    zaprecipePreset,
+    pomodoPreset,
+    modernPreset,
+    minimalPreset,
+    gradientPreset,
+    getTheme,
+    getPreset,
+    mergeTheme,
+};