@rocapine/react-native-onboarding-ui 1.1.3 → 1.1.6

package/dist/UI/Templates/OnboardingTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTemplate.js","sourceRoot":"","sources":["../../../src/UI/Templates/OnboardingTemplate.tsx"],"names":[],"mappings":";;;;AAAA,+CAAwE;AAExE,mFAAmE;AACnE,8CAAgD;AAEhD,wDAAqD;AAa9C,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,GAAG,2BAAY,GACI,EAAE,EAAE;IAC5B,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAE5C,OAAO,CACL,wBAAC,mBAAI,IACH,KAAK,EAAE;YACL,MAAM,CAAC,SAAS;YAChB;gBACE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;gBAC5C,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG;gBACvD,aAAa,EAAE,MAAM;aACtB;SACF,aAEA,QAAQ,EACR,MAAM,IAAI,CACT,uBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,YAC/B,uBAAC,+BAAgB,IACf,KAAK,EAAE;wBACL,MAAM,CAAC,SAAS;wBAChB,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;wBACzC,MAAM,CAAC,QAAQ,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;qBAC7D,EACD,OAAO,EAAE,UAAU,EACnB,aAAa,EAAE,GAAG,EAClB,QAAQ,EAAE,MAAM,CAAC,QAAQ,YAEzB,uBAAC,mBAAI,IACH,KAAK,EAAE;4BACL,IAAA,sBAAY,EAAC,KAAK,EAAE,QAAQ,CAAC;4BAC7B,MAAM,CAAC,aAAa;4BACpB,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE;4BACrC,MAAM,CAAC,QAAQ,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE;yBACxD,YAEA,MAAM,CAAC,IAAI,GACP,GACU,GACd,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,kBAAkB,sBAgD7B;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;IACD,aAAa,EAAE;QACb,iBAAiB,EAAE,EAAE;QACrB,GAAG,EAAE,EAAE;QACP,UAAU,EAAE,QAAQ;KACrB;IACD,SAAS,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;QACrB,QAAQ,EAAE,GAAG;QACb,UAAU,EAAE,QAAQ;KACrB;IACD,aAAa,EAAE,EAAE;CAClB,CAAC,CAAC"}
+{"version":3,"file":"OnboardingTemplate.js","sourceRoot":"","sources":["../../../src/UI/Templates/OnboardingTemplate.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/UI/Pages/Carousel/Renderer.tsx

@@ -63,7 +63,10 @@ const CarouselRendererBase = ({ step, onContinue, theme = defaultTheme }: Conten
       onContinue={handleButtonPress}
       theme={theme}
       button={{
-        text: isLastPage ? validatedData.continueButtonLabel : "Next",
+        text: isLastPage
+          ? (validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel)
+          : "Next",
+        icon: isLastPage ? (validatedData.buttonSection?.icon?.trim() || null) : null,
       }}
     >
       <View style={styles.container}>

package/src/UI/Pages/Carousel/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema } from "../types";
 
 export const CarouselScreenSchema = z.object({
   mediaUrl: z.string(),
@@ -19,6 +19,7 @@ export const CarouselStepTypeSchema = z.object({
   payload: CarouselStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/Commitment/Renderer.tsx

@@ -85,7 +85,8 @@ const CommitmentRendererBase = ({ step, onContinue, theme = defaultTheme }: Cont
       onContinue={onContinue}
       theme={theme}
       button={{
-        text: validatedData.continueButtonLabel,
+        text: validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel,
+        icon: validatedData.buttonSection?.icon?.trim() || null,
         disabled: isButtonDisabled,
       }}
     >

package/src/UI/Pages/Commitment/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema } from "../types";
 
 export const CommitmentItemSchema = z.object({
   text: z.string(),
@@ -22,6 +22,7 @@ export const CommitmentStepTypeSchema = z.object({
   payload: CommitmentStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/Loader/Renderer.tsx

@@ -102,7 +102,12 @@ const BarsVariant = ({
       onContinue={onContinue}
       theme={theme}
       button={
-        isComplete ? { text: validatedData.continueButtonLabel } : undefined
+        isComplete
+          ? {
+              text: validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel,
+              icon: validatedData.buttonSection?.icon?.trim() || null,
+            }
+          : undefined
       }
     >
       <ScrollView

package/src/UI/Pages/Loader/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema, MediaSourceSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema, MediaSourceSchema } from "../types";
 
 export const LoaderStepSchema = z.object({
   label: z.string(),
@@ -25,6 +25,7 @@ export const LoaderStepTypeSchema = z.object({
   payload: LoaderStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/MediaContent/Renderer.tsx

@@ -119,7 +119,10 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
       step={step}
       onContinue={onContinue}
       theme={theme}
-      button={{ text: validatedData.continueButtonLabel }}
+      button={{
+        text: validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel,
+        icon: validatedData.buttonSection?.icon?.trim() || null,
+      }}
     >
       {renderContent()}
     </OnboardingTemplate>

package/src/UI/Pages/MediaContent/types.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import {
+  ButtonSectionSchema,
   CustomPayloadSchema,
   MediaSourceSchema,
   SocialProofSchema,
@@ -25,6 +26,7 @@ export const MediaContentStepTypeSchema = z.object({
   payload: MediaContentStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/Picker/Renderer.tsx

@@ -90,7 +90,7 @@ const PickerRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentP
       step={step}
       onContinue={() => onContinue()}
       theme={theme}
-      button={{ text: validatedData.continueButtonLabel }}
+      button={{ text: validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel, icon: validatedData.buttonSection?.icon?.trim() || null }}
     >
       <View style={styles.container}>
         <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
@@ -149,7 +149,7 @@ const WeightPicker = ({
       step={step}
       onContinue={handleContinue}
       theme={theme}
-      button={{ text: step.continueButtonLabel }}
+      button={{ text: step.buttonSection?.label?.trim() || step.continueButtonLabel, icon: step.buttonSection?.icon?.trim() || null }}
     >
       <View style={styles.container}>
         <View style={styles.textContainer}>
@@ -265,7 +265,7 @@ const HeightPicker = ({
       step={step}
       onContinue={handleContinue}
       theme={theme}
-      button={{ text: step.continueButtonLabel }}
+      button={{ text: step.buttonSection?.label?.trim() || step.continueButtonLabel, icon: step.buttonSection?.icon?.trim() || null }}
     >
       <View style={styles.container}>
         <View style={styles.textContainer}>
@@ -372,7 +372,8 @@ const NamePicker = ({
             onContinue={handleContinue}
             theme={theme}
             button={{
-              text: step.continueButtonLabel,
+              text: step.buttonSection?.label?.trim() || step.continueButtonLabel,
+              icon: step.buttonSection?.icon?.trim() || null,
               disabled: !name.trim(),
             }}
           >
@@ -479,7 +480,7 @@ const DatePicker = ({
       step={step}
       onContinue={handleContinue}
       theme={theme}
-      button={{ text: step.continueButtonLabel }}
+      button={{ text: step.buttonSection?.label?.trim() || step.continueButtonLabel, icon: step.buttonSection?.icon?.trim() || null }}
     >
       <View style={styles.container}>
         <View style={styles.textContainer}>

package/src/UI/Pages/Picker/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema } from "../types";
 
 export const PickerTypeEnum = z.enum([
   "height",
@@ -25,6 +25,7 @@ export const PickerStepTypeSchema = z.object({
   payload: PickerStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/Question/Renderer.tsx

@@ -90,7 +90,10 @@ const QuestionRendererBase = ({ step, onContinue, theme = defaultTheme, customCo
       step={step}
       onContinue={handleContinue || (() => { })}
       theme={theme}
-      button={multipleAnswer && isAnySelected ? { text: "Continue" } : undefined}
+      button={multipleAnswer && isAnySelected ? {
+        text: validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel,
+        icon: validatedData.buttonSection?.icon?.trim() || null,
+      } : undefined}
     >
       <View style={styles.container}>
         {/* Main Content */}

package/src/UI/Pages/Question/types.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { CustomPayloadSchema, InfoBoxSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema, InfoBoxSchema } from "../types";
 
 export const AnswerSchema = z.object({
   label: z.string(),
@@ -23,6 +23,8 @@ export const QuestionStepTypeSchema = z.object({
   displayProgressHeader: z.boolean(),
   payload: QuestionStepPayloadSchema,
   customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/Ratings/Renderer.tsx

@@ -83,7 +83,8 @@ const RatingsRendererBase = ({ step, onContinue, theme = defaultTheme }: Ratings
       button={{
         text: !hasOpenedRequestReview
           ? rateTheAppButtonLabel
-          : validatedData.continueButtonLabel,
+          : (validatedData.buttonSection?.label?.trim() || validatedData.continueButtonLabel),
+        icon: hasOpenedRequestReview ? (validatedData.buttonSection?.icon?.trim() || null) : null,
       }}
     >
       <View style={styles.container}>

package/src/UI/Pages/Ratings/types.ts

@@ -1,5 +1,5 @@
 import z from "zod";
-import { CustomPayloadSchema, SocialProofSchema } from "../types";
+import { ButtonSectionSchema, CustomPayloadSchema, SocialProofSchema } from "../types";
 
 export const RatingsStepPayloadSchema = z.object({
   title: z.string(),
@@ -16,6 +16,7 @@ export const RatingsStepTypeSchema = z.object({
   payload: RatingsStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
+  buttonSection: ButtonSectionSchema.optional(),
   figmaUrl: z.string().nullish(),
 });
 

package/src/UI/Pages/types.ts

@@ -23,3 +23,8 @@ export const InfoBoxSchema = z.object({
   title: z.string(),
   content: z.string(),
 });
+
+export const ButtonSectionSchema = z.object({
+  label: z.string().optional(),
+  icon: z.string().nullish(),
+});

package/src/UI/Templates/OnboardingTemplate.tsx

@@ -4,6 +4,42 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { getTextStyle } from "../Theme/helpers";
 import { Theme } from "../Theme/types";
 import { defaultTheme } from "../Theme/defaultTheme";
+import * as LucideIcons from "lucide-react-native";
+
+function lucideIconLookupKeys(raw: string): string[] {
+  const s = raw.trim();
+  if (!s) return [];
+  const keys: string[] = [s];
+  if (/[-_\s]/.test(s)) {
+    const pascal = s
+      .split(/[-_\s]+/)
+      .filter(Boolean)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+      .join("");
+    if (pascal && !keys.includes(pascal)) keys.push(pascal);
+  }
+  if (/^[a-z][a-z0-9]*$/.test(s)) {
+    const cap = s.charAt(0).toUpperCase() + s.slice(1);
+    if (!keys.includes(cap)) keys.push(cap);
+  }
+  if (/^[A-Z0-9]+$/.test(s) && s.length > 1) {
+    const title = s.charAt(0) + s.slice(1).toLowerCase();
+    if (!keys.includes(title)) keys.push(title);
+  }
+  return keys;
+}
+
+function resolveIcon(iconName: string, color: string): React.ReactElement | null {
+  if (!iconName?.trim()) return null;
+  const mod = LucideIcons as Record<string, any>;
+  for (const key of lucideIconLookupKeys(iconName)) {
+    const IconComponent = mod[key];
+    if (IconComponent != null) {
+      return <IconComponent size={20} color={color} strokeWidth={2} />;
+    }
+  }
+  return null;
+}
 
 type OnboardingTemplateProps = {
   children: React.ReactNode;
@@ -11,6 +47,7 @@ type OnboardingTemplateProps = {
   button?: {
     text: string;
     disabled?: boolean;
+    icon?: string | null;
   };
   step: OnboardingStepType;
   theme?: Theme;
@@ -49,16 +86,37 @@ export const OnboardingTemplate = ({
             activeOpacity={0.8}
             disabled={button.disabled}
           >
-            <Text
-              style={[
-                getTextStyle(theme, "button"),
-                styles.ctaButtonText,
-                { color: theme.colors.text.opposite },
-                button.disabled && { color: theme.colors.text.disable },
-              ]}
-            >
-              {button.text}
-            </Text>
+            {button.icon ? (
+              <View style={styles.ctaButtonContent}>
+                {resolveIcon(
+                  button.icon,
+                  button.disabled
+                    ? theme.colors.text.disable
+                    : theme.colors.text.opposite
+                )}
+                <Text
+                  style={[
+                    getTextStyle(theme, "button"),
+                    styles.ctaButtonText,
+                    { color: theme.colors.text.opposite },
+                    button.disabled && { color: theme.colors.text.disable },
+                  ]}
+                >
+                  {button.text}
+                </Text>
+              </View>
+            ) : (
+              <Text
+                style={[
+                  getTextStyle(theme, "button"),
+                  styles.ctaButtonText,
+                  { color: theme.colors.text.opposite },
+                  button.disabled && { color: theme.colors.text.disable },
+                ]}
+              >
+                {button.text}
+              </Text>
+            )}
           </TouchableOpacity>
         </View>
       )}
@@ -83,4 +141,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   ctaButtonText: {},
+  ctaButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
 });

package/dist/provider/CustomComponentsContext.d.ts

@@ -1,57 +0,0 @@
-import React from "react";
-import { QuestionAnswerButtonProps, QuestionAnswersListProps } from "../UI/Pages/Question/components";
-/**
- * Custom components that can be provided to override default implementations.
- * Allows full UI customization for specific parts of the onboarding flow.
- */
-export interface CustomComponents {
-    /**
-     * Custom component for individual Question answer buttons.
-     * Replaces the default button styling while keeping list logic.
-     *
-     * @example
-     * ```tsx
-     * const MyButton = ({ answer, selected, onPress, theme }) => (
-     *   <TouchableOpacity onPress={onPress} style={{ height: 96 }}>
-     *     <Text>{answer.label}</Text>
-     *   </TouchableOpacity>
-     * );
-     *
-     * <OnboardingProvider customComponents={{ QuestionAnswerButton: MyButton }} />
-     * ```
-     */
-    QuestionAnswerButton?: React.ComponentType<QuestionAnswerButtonProps>;
-    /**
-     * Custom component for the entire Question answers list.
-     * Provides full control over list rendering, animations, and layout.
-     * Takes priority over QuestionAnswerButton.
-     *
-     * @example
-     * ```tsx
-     * const MyList = ({ answers, selected, onAnswerPress, theme }) => (
-     *   <Animated.View>
-     *     {answers.map(answer => (
-     *       <MyButton key={answer.value} answer={answer} />
-     *     ))}
-     *   </Animated.View>
-     * );
-     *
-     * <OnboardingProvider customComponents={{ QuestionAnswersList: MyList }} />
-     * ```
-     */
-    QuestionAnswersList?: React.ComponentType<QuestionAnswersListProps>;
-}
-/**
- * Provider for custom components.
- * Wraps the app to make custom components available to all renderers.
- */
-export declare const CustomComponentsProvider: React.FC<{
-    children: React.ReactNode;
-    components?: CustomComponents;
-}>;
-/**
- * Hook to access custom components from context.
- * Returns empty object if no custom components are provided.
- */
-export declare const useCustomComponents: () => CustomComponents;
-//# sourceMappingURL=CustomComponentsContext.d.ts.map

package/dist/provider/CustomComponentsContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomComponentsContext.d.ts","sourceRoot":"","sources":["../../src/provider/CustomComponentsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,iCAAiC,CAAC;AAEzC;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAEtE;;;;;;;;;;;;;;;;;OAiBG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;CAMrE;AAID;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,CAIA,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,wBAA4C,CAAC"}

package/dist/provider/CustomComponentsContext.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCustomComponents = exports.CustomComponentsProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const CustomComponentsContext = (0, react_1.createContext)({});
-/**
- * Provider for custom components.
- * Wraps the app to make custom components available to all renderers.
- */
-const CustomComponentsProvider = ({ children, components = {} }) => ((0, jsx_runtime_1.jsx)(CustomComponentsContext.Provider, { value: components, children: children }));
-exports.CustomComponentsProvider = CustomComponentsProvider;
-/**
- * Hook to access custom components from context.
- * Returns empty object if no custom components are provided.
- */
-const useCustomComponents = () => (0, react_1.useContext)(CustomComponentsContext);
-exports.useCustomComponents = useCustomComponents;
-//# sourceMappingURL=CustomComponentsContext.js.map

package/dist/provider/CustomComponentsContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomComponentsContext.js","sourceRoot":"","sources":["../../src/provider/CustomComponentsContext.tsx"],"names":[],"mappings":";;;;AAAA,iCAAyD;AAsDzD,MAAM,uBAAuB,GAAG,IAAA,qBAAa,EAAmB,EAAE,CAAC,CAAC;AAEpE;;;GAGG;AACI,MAAM,wBAAwB,GAGhC,CAAC,EAAE,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CACtC,uBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAChD,QAAQ,GACwB,CACpC,CAAC;AAPW,QAAA,wBAAwB,4BAOnC;AAEF;;;GAGG;AACI,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;AAAhE,QAAA,mBAAmB,uBAA6C"}

package/dist/provider/OnboardingUIProvider.d.ts

@@ -1,44 +0,0 @@
-import { ColorScheme, DeepPartial, Theme } from "../UI/Theme/types";
-import { CustomComponents } from "./CustomComponentsContext";
-interface OnboardingUIProviderProps {
-    children: React.ReactNode;
-    initialColorScheme?: ColorScheme;
-    locale?: string;
-    customAudienceParams?: Record<string, any>;
-    /**
-     * Custom theme to override default theme tokens for both light and dark modes.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    theme?: DeepPartial<Theme>;
-    /**
-     * Custom theme tokens for light mode only.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    lightTheme?: DeepPartial<Theme>;
-    /**
-     * Custom theme tokens for dark mode only.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    darkTheme?: DeepPartial<Theme>;
-    /**
-     * Custom components to replace default implementations.
-     * Allows full UI customization for specific parts of the onboarding flow.
-     * @example
-     * ```tsx
-     * <OnboardingUIProvider
-     *   customComponents={{
-     *     QuestionAnswerButton: MyCustomButton,
-     *     QuestionAnswersList: MyCustomList
-     *   }}
-     * />
-     * ```
-     */
-    customComponents?: CustomComponents;
-}
-/**
- * UI Provider that wraps the headless OnboardingProvider with theme, progress tracking, and custom components.
- * Use this provider when you want the complete UI experience with all features.
- */
-export declare const OnboardingUIProvider: ({ children, client, initialColorScheme, locale, customAudienceParams, theme, lightTheme, darkTheme, customComponents, }: OnboardingUIProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=OnboardingUIProvider.d.ts.map

package/dist/provider/OnboardingUIProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OnboardingUIProvider.d.ts","sourceRoot":"","sources":["../../src/provider/OnboardingUIProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAEL,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAGnC,UAAU,yBAAyB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,yHAUlC,yBAAyB,4CAwC3B,CAAC"}

package/dist/provider/OnboardingUIProvider.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnboardingUIProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_onboarding_1 = require("@rocapine/react-native-onboarding");
-const ThemeProvider_1 = require("../UI/Theme/ThemeProvider");
-const CustomComponentsContext_1 = require("./CustomComponentsContext");
-/**
- * UI Provider that wraps the headless OnboardingProvider with theme, progress tracking, and custom components.
- * Use this provider when you want the complete UI experience with all features.
- */
-const OnboardingUIProvider = ({ children, client, initialColorScheme = "light", locale = "en", customAudienceParams = {}, theme, lightTheme, darkTheme, customComponents, }) => {
-    const [activeStep, setActiveStep] = (0, react_1.useState)({
-        number: 0,
-        displayProgressHeader: false,
-    });
-    const [totalSteps, setTotalSteps] = (0, react_1.useState)(0);
-    const [onboarding, setOnboarding] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsx)(react_native_onboarding_1.OnboardingProvider, { client: client, locale: locale, customAudienceParams: customAudienceParams, children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { initialColorScheme: initialColorScheme, customTheme: theme, customLightTheme: lightTheme, customDarkTheme: darkTheme, children: (0, jsx_runtime_1.jsx)(CustomComponentsContext_1.CustomComponentsProvider, { components: customComponents, children: (0, jsx_runtime_1.jsx)(OnboardingProgressContext.Provider, { value: {
-                        activeStep,
-                        setActiveStep,
-                        totalSteps,
-                        setTotalSteps,
-                        client,
-                        locale,
-                        customAudienceParams,
-                        onboarding,
-                        setOnboarding,
-                    }, children: children }) }) }) }));
-};
-exports.OnboardingUIProvider = OnboardingUIProvider;
-//# sourceMappingURL=OnboardingUIProvider.js.map

package/dist/provider/OnboardingUIProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OnboardingUIProvider.js","sourceRoot":"","sources":["../../src/provider/OnboardingUIProvider.tsx"],"names":[],"mappings":";;;;AAAA,iCAAgD;AAChD,+EAK2C;AAC3C,6DAA0D;AAE1D,uEAGmC;AAuCnC;;;GAGG;AACI,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,kBAAkB,GAAG,OAAO,EAC5B,MAAM,GAAG,IAAI,EACb,oBAAoB,GAAG,EAAE,EACzB,KAAK,EACL,UAAU,EACV,SAAS,EACT,gBAAgB,GACU,EAAE,EAAE;IAC9B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC;QAC3C,MAAM,EAAE,CAAC;QACT,qBAAqB,EAAE,KAAK;KAC7B,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAwC,IAAI,CAAC,CAAC;IAE1F,OAAO,CACL,uBAAC,4CAAkB,IACjB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,oBAAoB,EAAE,oBAAoB,YAE1C,uBAAC,6BAAa,IACZ,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,KAAK,EAClB,gBAAgB,EAAE,UAAU,EAC5B,eAAe,EAAE,SAAS,YAE1B,uBAAC,kDAAwB,IAAC,UAAU,EAAE,gBAAgB,YACpD,uBAAC,yBAAyB,CAAC,QAAQ,IACjC,KAAK,EAAE;wBACL,UAAU;wBACV,aAAa;wBACb,UAAU;wBACV,aAAa;wBACb,MAAM;wBACN,MAAM;wBACN,oBAAoB;wBACpB,UAAU;wBACV,aAAa;qBACd,YAEA,QAAQ,GAC0B,GACZ,GACb,GACG,CACtB,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,oBAAoB,wBAkD/B"}

package/dist/provider/OnboardingUIProvider.old.d.ts

@@ -1,60 +0,0 @@
-import { OnboardingStudioClient, Onboarding } from "@rocapine/react-native-onboarding";
-import { ColorScheme, DeepPartial, Theme } from "../UI/Theme/types";
-import { CustomComponents } from "./CustomComponentsContext";
-import { OnboardingStepType } from "../UI/types";
-interface OnboardingProviderProps {
-    children: React.ReactNode;
-    client: OnboardingStudioClient;
-    initialColorScheme?: ColorScheme;
-    locale?: string;
-    customAudienceParams?: Record<string, any>;
-    /**
-     * Custom theme to override default theme tokens for both light and dark modes.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    theme?: DeepPartial<Theme>;
-    /**
-     * Custom theme tokens for light mode only.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    lightTheme?: DeepPartial<Theme>;
-    /**
-     * Custom theme tokens for dark mode only.
-     * Partial overrides are supported - only provide the tokens you want to customize.
-     */
-    darkTheme?: DeepPartial<Theme>;
-    /**
-     * Custom components to replace default implementations.
-     * Allows full UI customization for specific parts of the onboarding flow.
-     * @example
-     * ```tsx
-     * <OnboardingProvider
-     *   customComponents={{
-     *     QuestionAnswerButton: MyCustomButton,
-     *     QuestionAnswersList: MyCustomList
-     *   }}
-     * />
-     * ```
-     */
-    customComponents?: CustomComponents;
-}
-export declare const OnboardingProvider: ({ children, client, initialColorScheme, locale, customAudienceParams, theme, lightTheme, darkTheme, customComponents, }: OnboardingProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const OnboardingProgressContext: import("react").Context<{
-    activeStep: {
-        number: number;
-        displayProgressHeader: boolean;
-    };
-    setActiveStep: (step: {
-        number: number;
-        displayProgressHeader: boolean;
-    }) => void;
-    totalSteps: number;
-    setTotalSteps: (steps: number) => void;
-    client: OnboardingStudioClient;
-    locale: string;
-    customAudienceParams: Record<string, any>;
-    onboarding: Onboarding<OnboardingStepType> | null;
-    setOnboarding: (onboarding: Onboarding<OnboardingStepType>) => void;
-}>;
-export {};
-//# sourceMappingURL=OnboardingUIProvider.old.d.ts.map

package/dist/provider/OnboardingUIProvider.old.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OnboardingUIProvider.old.d.ts","sourceRoot":"","sources":["../../src/provider/OnboardingUIProvider.old.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,sBAAsB,EACtB,UAAU,EACX,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAEL,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAUjD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB,GAAI,yHAUhC,uBAAuB,4CAsCzB,CAAC;AAEF,eAAO,MAAM,yBAAyB;gBACxB;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,qBAAqB,EAAE,OAAO,CAAA;KAAE;mBAC/C,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,qBAAqB,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;gBACrE,MAAM;mBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YAC9B,sBAAsB;YACtB,MAAM;0BACQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAC7B,UAAU,CAAC,kBAAkB,CAAC,GAAG,IAAI;mBAClC,CAAC,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,IAAI;EAWnE,CAAC"}