@umituz/react-native-design-system 2.8.44 → 2.8.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.8.44",
+  "version": "2.8.45",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/onboarding/index.ts

@@ -68,7 +68,7 @@ export {
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
-export { OnboardingProvider, type OnboardingProviderProps, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
+export { OnboardingProvider, type OnboardingProviderProps, type OnboardingTranslations, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
 export { BackgroundImageCollage, type CollageLayout, type BackgroundImageCollageProps } from "./presentation/components/BackgroundImageCollage";
 export type { OnboardingTheme, OnboardingColors } from "./presentation/types/OnboardingTheme";
 

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useLocalization } from "@umituz/react-native-localization";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
@@ -13,8 +12,6 @@ export interface OnboardingFooterProps {
   showProgressBar?: boolean;
   showDots?: boolean;
   showProgressText?: boolean;
-  nextButtonText?: string;
-  getStartedButtonText?: string;
   disabled?: boolean;
 }
 
@@ -26,19 +23,14 @@ export const OnboardingFooter = ({
   showProgressBar = true,
   showDots = true,
   showProgressText = true,
-  nextButtonText,
-  getStartedButtonText,
   disabled = false,
 }: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
-  const { t } = useLocalization();
-  const {
-    theme: { colors },
-  } = useOnboardingProvider();
+  const { theme: { colors }, translations } = useOnboardingProvider();
 
   const buttonText = isLastSlide
-    ? getStartedButtonText || t("onboarding.getStarted")
-    : nextButtonText || t("general.continue");
+    ? translations.getStartedButton
+    : translations.nextButton;
 
   const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
 
@@ -95,7 +87,7 @@ export const OnboardingFooter = ({
           type="labelSmall"
           style={[styles.progressText, { color: colors.progressTextColor }]}
         >
-          {currentIndex + 1} {t("general.of")} {totalSlides}
+          {currentIndex + 1} {translations.of} {totalSlides}
         </AtomicText>
       )}
     </View>

package/src/onboarding/presentation/components/OnboardingScreenContent.tsx

@@ -127,8 +127,6 @@ export const OnboardingScreenContent = ({
           showProgressBar={showProgressBar}
           showDots={showDots}
           showProgressText={showProgressText}
-          nextButtonText={nextButtonText}
-          getStartedButtonText={getStartedButtonText}
           disabled={!isAnswerValid}
         />
       )}

package/src/onboarding/presentation/providers/OnboardingProvider.tsx

@@ -8,8 +8,15 @@
 import React, { createContext, useContext, useMemo } from "react";
 import type { OnboardingTheme, OnboardingColors } from "../types/OnboardingTheme";
 
+export interface OnboardingTranslations {
+  nextButton: string;
+  getStartedButton: string;
+  of: string;
+}
+
 interface OnboardingProviderValue {
   theme: OnboardingTheme;
+  translations: OnboardingTranslations;
 }
 
 const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undefined);
@@ -18,12 +25,14 @@ export interface OnboardingProviderProps {
   children: React.ReactNode;
   useCustomBackground: boolean;
   colors: OnboardingColors;
+  translations: OnboardingTranslations;
 }
 
 export const OnboardingProvider = ({
   children,
   useCustomBackground,
   colors,
+  translations,
 }: OnboardingProviderProps) => {
   const value = useMemo(
     () => ({
@@ -31,8 +40,9 @@ export const OnboardingProvider = ({
         colors,
         useCustomBackground,
       },
+      translations,
     }),
-    [colors, useCustomBackground]
+    [colors, useCustomBackground, translations]
   );
 
   return (

package/src/onboarding/presentation/screens/OnboardingScreen.tsx

@@ -13,7 +13,7 @@ import { useAppDesignTokens } from "../../../theme/hooks/useAppDesignTokens";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
-import { OnboardingProvider } from "../providers/OnboardingProvider";
+import { OnboardingProvider, type OnboardingTranslations } from "../providers/OnboardingProvider";
 import type { OnboardingColors } from "../types/OnboardingTheme";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
@@ -59,6 +59,11 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * Theme colors for the onboarding (Optional - will use design tokens if not provided)
    */
   themeColors?: OnboardingColors;
+
+  /**
+   * All translations for the onboarding (required)
+   */
+  translations: OnboardingTranslations;
 }
 
 export const OnboardingScreen = ({
@@ -82,6 +87,7 @@ export const OnboardingScreen = ({
   useCustomBackground: globalUseCustomBackground = false,
   themeVariant = "default",
   themeColors: providedThemeColors,
+  translations,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
@@ -147,7 +153,7 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors}>
+    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors} translations={translations}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
         useCustomBackground={useCustomBackground}