@rocapine/react-native-onboarding-ui 1.0.0

package/dist/UI/types.d.ts

@@ -0,0 +1,23 @@
+import { CarouselStepType, CommitmentStepType, LoaderStepType, MediaContentStepType, PickerStepType, RatingsStepType, QuestionStepType } from "./Pages";
+export type CustomStepType<StepPayload = any> = {
+    id: string;
+    type: "CustomScreen";
+    name: string;
+    displayProgressHeader: boolean;
+    payload: {
+        customScreenId: string;
+        type: string;
+    };
+    customPayload: StepPayload;
+    figmaUrl?: string | null;
+};
+export type BaseStepType = {
+    id: string;
+    type: string;
+    name: string;
+    displayProgressHeader?: boolean;
+    payload?: any;
+    customPayload?: any;
+};
+export type OnboardingStepType = RatingsStepType | MediaContentStepType | PickerStepType | CommitmentStepType | CarouselStepType | LoaderStepType | QuestionStepType | CustomStepType;
+//# sourceMappingURL=types.d.ts.map

package/dist/UI/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/UI/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,cAAc,CAAC,WAAW,GAAG,GAAG,IAAI;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE;QACP,cAAc,EAAE,MAAM,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,kBAAkB,GAClB,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,cAAc,CAAC"}

package/dist/UI/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/UI/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/UI/types.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export type { BaseStepType, Onboarding, OnboardingMetadata, OnboardingStudioClientOptions, } from "@rocapine/react-native-onboarding";
+export { OnboardingPage } from "./UI/OnboardingPage";
+export * from "./UI/Pages";
+export * from "./UI/Templates";
+export * from "./UI/Components";
+export * from "./UI/Theme";
+export * from "./UI/ErrorBoundary";
+export * from "./UI/types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,cAAc,YAAY,CAAC;AAG3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,YAAY,CAAC;AAG3B,cAAc,oBAAoB,CAAC;AAKnC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingPage = void 0;
+// UI Components and Router
+var OnboardingPage_1 = require("./UI/OnboardingPage");
+Object.defineProperty(exports, "OnboardingPage", { enumerable: true, get: function () { return OnboardingPage_1.OnboardingPage; } });
+// All page types and renderers
+__exportStar(require("./UI/Pages"), exports);
+// Templates and shared components
+__exportStar(require("./UI/Templates"), exports);
+__exportStar(require("./UI/Components"), exports);
+// Theme system
+__exportStar(require("./UI/Theme"), exports);
+// Error boundary
+__exportStar(require("./UI/ErrorBoundary"), exports);
+// Custom components system
+// UI-specific types
+__exportStar(require("./UI/types"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAQA,2BAA2B;AAC3B,sDAAqD;AAA5C,gHAAA,cAAc,OAAA;AAEvB,+BAA+B;AAC/B,6CAA2B;AAE3B,kCAAkC;AAClC,iDAA+B;AAC/B,kDAAgC;AAEhC,eAAe;AACf,6CAA2B;AAE3B,iBAAiB;AACjB,qDAAmC;AAEnC,2BAA2B;AAE3B,oBAAoB;AACpB,6CAA2B"}

package/dist/provider/CustomComponentsContext.d.ts

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,33 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1 @@
+{"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"}

package/dist/provider/OnboardingUIProvider.old.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingProgressContext = exports.OnboardingProvider = 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");
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: Infinity,
+        },
+    },
+});
+const OnboardingProvider = ({ children, client, initialColorScheme = "light", // @todo To move in the Onboarding Layout
+locale = "en", customAudienceParams = {}, theme, // @todo To move in the Onboarding Layout
+lightTheme, // @todo To move in the Onboarding Layout
+darkTheme, // @todo To move in the Onboarding Layout
+customComponents, // @todo To move in the Onboarding Layout
+ }) => {
+    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);
+    queryClient.prefetchQuery(getOnboardingQuery(client, locale, customAudienceParams, setOnboarding));
+    return ((0, jsx_runtime_1.jsx)(QueryClientProvider, { client: queryClient, 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)(exports.OnboardingProgressContext.Provider, { value: {
+                        activeStep,
+                        setActiveStep,
+                        totalSteps,
+                        setTotalSteps,
+                        client,
+                        locale,
+                        customAudienceParams,
+                        onboarding,
+                        setOnboarding,
+                    }, children: children }) }) }) }));
+};
+exports.OnboardingProvider = OnboardingProvider;
+exports.OnboardingProgressContext = (0, react_1.createContext)({
+    activeStep: { number: 0, displayProgressHeader: false },
+    setActiveStep: () => { },
+    totalSteps: 0,
+    setTotalSteps: () => { },
+    client: new react_native_onboarding_1.OnboardingStudioClient('', {}),
+    locale: "en",
+    customAudienceParams: {},
+    onboarding: null,
+    setOnboarding: () => { },
+});
+//# sourceMappingURL=OnboardingUIProvider.old.js.map

package/dist/provider/OnboardingUIProvider.old.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingUIProvider.old.js","sourceRoot":"","sources":["../../src/provider/OnboardingUIProvider.old.tsx"],"names":[],"mappings":";;;;AAAA,iCAAgD;AAChD,+EAG2C;AAC3C,6DAA0D;AAE1D,uEAGmC;AAGnC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;IAClC,cAAc,EAAE;QACd,OAAO,EAAE;YACP,SAAS,EAAE,QAAQ;SACpB;KACF;CACF,CAAC,CAAA;AAuCK,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,kBAAkB,GAAG,OAAO,EAAE,yCAAyC;AACvE,MAAM,GAAG,IAAI,EACb,oBAAoB,GAAG,EAAE,EACzB,KAAK,EAAE,yCAAyC;AAChD,UAAU,EAAE,yCAAyC;AACrD,SAAS,EAAE,yCAAyC;AACpD,gBAAgB,EAAE,yCAAyC;EACnC,EAAE,EAAE;IAC5B,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,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,aAAa,CAAC,CAAC,CAAA;IAElG,OAAO,CACL,uBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,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,iCAAyB,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,GACI,CACvB,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,kBAAkB,sBAgD7B;AAEW,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAUnD;IACD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE;IACvD,aAAa,EAAE,GAAG,EAAE,GAAG,CAAC;IACxB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG,EAAE,GAAG,CAAC;IACxB,MAAM,EAAE,IAAI,gDAAsB,CAAC,EAAE,EAAE,EAAE,CAAC;IAC1C,MAAM,EAAE,IAAI;IACZ,oBAAoB,EAAE,EAAE;IACxB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,GAAG,EAAE,GAAG,CAAC;CACzB,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@rocapine/react-native-onboarding-ui",
+  "version": "1.0.0",
+  "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",
+  "scripts": {
+    "build": "tsc && cp -r src/assets dist/",
+    "prepare": "npm run build",
+    "watch": "tsc --watch",
+    "patch": "npm version patch && npm run build && npm publish"
+  },
+  "keywords": [
+    "react-native",
+    "onboarding",
+    "rocapine",
+    "ui",
+    "components",
+    "onboarding-studio"
+  ],
+  "author": "Rocapine",
+  "license": "MIT",
+  "dependencies": {
+    "lucide-react-native": "^0.545.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=13.0.0",
+    "zod": "^4.1.11"
+  },
+  "devDependencies": {
+    "@react-native-picker/picker": "^2.11.2",
+    "@shopify/react-native-skia": "^2.3.0",
+    "@types/react": "^19.0.0",
+    "expo-router": "^4.0.0",
+    "expo-store-review": "^9.0.8",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.2",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-svg": "^15.13.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@react-native-picker/picker": "*",
+    "@rocapine/react-native-onboarding": "^1.0.0",
+    "@shopify/react-native-skia": ">=1.0.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "@types/react": "*",
+    "expo-router": ">=3.0.0",
+    "expo-store-review": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-picker/picker": {
+      "optional": true
+    },
+    "@shopify/react-native-skia": {
+      "optional": true
+    },
+    "expo-store-review": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rocapine/react-native-onboarding-studio.git",
+    "directory": "packages/onboarding-ui"
+  }
+}

package/src/UI/Components/CircularProgress.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import { View, StyleSheet, Dimensions, Text } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedProps,
+  withTiming,
+  Easing,
+  runOnJS,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+import Svg, { Circle, Defs, LinearGradient, Stop } from "react-native-svg";
+import { useTheme } from "../Theme/useTheme";
+import { Theme } from "../Theme/types";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+type CircularProgressProps = {
+  onProgressComplete?: () => void;
+  duration: number;
+  totalSteps: number;
+};
+
+export const CircularProgress = ({
+  onProgressComplete,
+  duration,
+  totalSteps,
+}: CircularProgressProps) => {
+  const { theme } = useTheme();
+  const { width } = Dimensions.get("window");
+
+  const CIRCLE_RADIUS = 45;
+  const CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;
+  const strokeWidth = width * 0.02;
+
+  const progress = useSharedValue(0);
+  const [percentage, setPercentage] = useState(0);
+
+  // Update percentage text using useAnimatedReaction
+  useAnimatedReaction(
+    () => progress.value,
+    (currentValue) => {
+      runOnJS(setPercentage)(Math.round(currentValue));
+    }
+  );
+
+  useEffect(() => {
+    // Reset progress
+    progress.value = 0;
+
+    // Match StaggeredTextList timing: (totalSteps - 1) * duration + duration * 1.5
+    const totalDuration = duration * (totalSteps + 0.5);
+
+    // Animate progress from 0 to 100
+    progress.value = withTiming(
+      100,
+      {
+        duration: totalDuration,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+      },
+      (finished) => {
+        if (finished && onProgressComplete) {
+          runOnJS(onProgressComplete)();
+        }
+      }
+    );
+  }, [progress, duration, totalSteps, onProgressComplete]);
+
+  // Animate strokeDashoffset based on progress
+  const animatedCircleProps = useAnimatedProps(() => ({
+    strokeDashoffset: CIRCUMFERENCE * (1 - progress.value / 100),
+  }));
+
+  const styles = createStyles(theme, width);
+
+  return (
+    <View style={styles.container}>
+      <Svg height="100%" width="100%" viewBox="0 0 100 100">
+        <Defs>
+          <LinearGradient id="progressGrad" x1="0" y1="0" x2="0.2" y2="1.1">
+            <Stop offset="0" stopColor={theme.colors.neutral.medium} />
+            <Stop offset="0.33" stopColor={theme.colors.neutral.medium} />
+            <Stop offset="0.67" stopColor={theme.colors.neutral.low} />
+            <Stop offset="1" stopColor={theme.colors.neutral.low} />
+          </LinearGradient>
+        </Defs>
+
+        {/* Background Circle */}
+        <Circle
+          cx="50"
+          cy="50"
+          r={CIRCLE_RADIUS}
+          stroke={theme.colors.neutral.lower}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+
+        {/* Animated Progress Circle */}
+        <AnimatedCircle
+          cx="50"
+          cy="50"
+          r={CIRCLE_RADIUS}
+          stroke="url(#progressGrad)"
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={CIRCUMFERENCE}
+          animatedProps={animatedCircleProps}
+          strokeLinecap="round"
+          rotation="-90"
+          origin="50, 50"
+        />
+      </Svg>
+
+      {/* Percentage Text */}
+      <View style={styles.textContainer}>
+        <Text style={styles.percentageText}>{percentage}%</Text>
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (theme: Theme, width: number) =>
+  StyleSheet.create({
+    container: {
+      width: width * 0.7,
+      height: width * 0.7,
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+    },
+    textContainer: {
+      position: "absolute",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      height: "100%",
+    },
+    percentageText: {
+      fontFamily: theme.typography.textStyles.heading1.fontFamily,
+      fontSize: theme.typography.textStyles.heading1.fontSize,
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.text.primary,
+      textAlign: "center",
+      includeFontPadding: false,
+      padding: 0,
+    },
+  });