@billdog.io/react-native 1.0.0-beta.2

package/dist/components/TimelineComponent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TimelineComponent - React Native
+ *
+ * Renders a connected timeline with event markers and content.
+ * Features:
+ * - Vertical timeline layout with connecting lines
+ * - Customizable markers and line styles
+ * - Support for icons in markers
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface TimelineComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+export declare const TimelineComponent: React.FC<TimelineComponentProps>;
+export {};

package/dist/components/TimelineComponent.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * TimelineComponent - React Native
+ *
+ * Renders a connected timeline with event markers and content.
+ * Features:
+ * - Vertical timeline layout with connecting lines
+ * - Customizable markers and line styles
+ * - Support for icons in markers
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Helper to parse color from various formats
+const parseColor = (value, fallback) => {
+    if (!value)
+        return fallback;
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'object' && value.color)
+        return value.color;
+    return fallback;
+};
+const TimelineComponent = ({ component, stateManager, isPreviewMode = false, renderComponent, }) => {
+    var _a;
+    const props = component.properties;
+    // Extract timeline-specific styling
+    const markerColor = parseColor(props.markerColor, '#3B82F6');
+    const markerSize = props.markerSize || 32;
+    const markerRadius = (_a = props.markerRadius) !== null && _a !== void 0 ? _a : markerSize / 2;
+    const lineColor = parseColor(props.lineColor, '#3B82F6');
+    const lineWidthRaw = props.lineWidth;
+    const lineWidth = typeof lineWidthRaw === 'object' ? lineWidthRaw.value : (lineWidthRaw || 2);
+    const lineStyle = props.lineStyle || 'solid';
+    const eventGap = props.eventGap || 0;
+    const contentGap = props.contentGap || 16;
+    const children = component.children || [];
+    return (<react_native_1.View style={[styles.container, { gap: eventGap }]}>
+      {children.map((child, index) => {
+            const isLast = index === children.length - 1;
+            return (<react_native_1.View key={child.id || index} style={styles.eventRow}>
+            {/* Marker Column */}
+            <react_native_1.View style={[styles.markerColumn, { width: markerSize }]}>
+              {/* Marker Circle */}
+              <react_native_1.View style={[
+                    styles.marker,
+                    {
+                        width: markerSize,
+                        height: markerSize,
+                        borderRadius: markerRadius,
+                        backgroundColor: markerColor,
+                    },
+                ]}/>
+              
+              {/* Connecting Line */}
+              {!isLast && (<react_native_1.View style={[
+                        styles.line,
+                        {
+                            width: lineWidth,
+                            backgroundColor: lineStyle === 'solid' ? lineColor : undefined,
+                            borderStyle: lineStyle === 'dashed' ? 'dashed' : lineStyle === 'dotted' ? 'dotted' : undefined,
+                            borderWidth: lineStyle !== 'solid' ? lineWidth : 0,
+                            borderColor: lineColor,
+                        },
+                    ]}/>)}
+            </react_native_1.View>
+            
+            {/* Content Column */}
+            <react_native_1.View style={[styles.contentColumn, { marginLeft: contentGap }]}>
+              {renderComponent === null || renderComponent === void 0 ? void 0 : renderComponent(child)}
+            </react_native_1.View>
+          </react_native_1.View>);
+        })}
+    </react_native_1.View>);
+};
+exports.TimelineComponent = TimelineComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    eventRow: {
+        flexDirection: 'row',
+    },
+    markerColumn: {
+        alignItems: 'center',
+    },
+    marker: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    line: {
+        flex: 1,
+        marginTop: 4,
+        marginBottom: 4,
+    },
+    contentColumn: {
+        flex: 1,
+        paddingBottom: 16,
+    },
+});

package/dist/components/ToggleComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface ToggleComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+/**
+ * ToggleComponent - Hybrid component that renders children (label/description) + switch
+ * Children are rendered via renderComponent callback, switch is functional
+ */
+export declare const ToggleComponent: React.FC<ToggleComponentProps>;
+export {};

package/dist/components/ToggleComponent.js

@@ -0,0 +1,132 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Size mappings matching web schema
+const SIZE_MAP = {
+    sm: { width: 40, height: 20 },
+    md: { width: 50, height: 26 },
+    lg: { width: 60, height: 32 },
+};
+/**
+ * ToggleComponent - Hybrid component that renders children (label/description) + switch
+ * Children are rendered via renderComponent callback, switch is functional
+ */
+const ToggleComponent = ({ component, stateManager, isPreviewMode = false, renderComponent, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const props = component.properties;
+    const defaultChecked = (_a = props.defaultValue) !== null && _a !== void 0 ? _a : false;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const size = (_c = props.size) !== null && _c !== void 0 ? _c : 'md';
+    const trackOnColor = (_d = props.trackOnColor) !== null && _d !== void 0 ? _d : '#007AFF';
+    const trackOffColor = (_e = props.trackOffColor) !== null && _e !== void 0 ? _e : '#767577';
+    const [isChecked, setIsChecked] = (0, react_1.useState)(defaultChecked);
+    // Register initial state
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.isChecked`, isChecked);
+        }
+    }, []);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${component.id}.isChecked`, (value) => {
+                if (value !== isChecked) {
+                    setIsChecked(value);
+                }
+            });
+        }
+    }, [component.id, stateManager]);
+    const handleToggle = (value) => {
+        var _a;
+        if (!disabled) {
+            const previousValue = isChecked;
+            setIsChecked(value);
+            if (stateManager) {
+                stateManager.updateState(`element:${component.id}.isChecked`, value);
+                // Emit toggle_change event for analytics
+                (_a = stateManager.trackEvent) === null || _a === void 0 ? void 0 : _a.call(stateManager, 'toggle_change', {
+                    componentId: component.id,
+                    previousValue,
+                    newValue: value,
+                });
+            }
+        }
+    };
+    // Structural inference: content container is the first child where type === 'stack'
+    // Label container is the first stack child within content container
+    const contentContainer = (_f = component.children) === null || _f === void 0 ? void 0 : _f.find(child => child.type === 'stack');
+    const labelContainer = (_g = contentContainer === null || contentContainer === void 0 ? void 0 : contentContainer.children) === null || _g === void 0 ? void 0 : _g.find(child => child.type === 'stack');
+    // Fallback: find text children directly if no nested structure
+    const textChildren = !labelContainer && ((_h = contentContainer === null || contentContainer === void 0 ? void 0 : contentContainer.children) === null || _h === void 0 ? void 0 : _h.filter(child => child.type === 'text'));
+    // Get size dimensions
+    const sizeConfig = (_j = SIZE_MAP[size]) !== null && _j !== void 0 ? _j : SIZE_MAP.md;
+    return (<react_native_1.View style={[styles.container, disabled && styles.disabled]}>
+      {/* Render label-container children */}
+      {labelContainer && renderComponent && (<react_native_1.View style={styles.labelContainer}>
+          {renderComponent(labelContainer)}
+        </react_native_1.View>)}
+      
+      {/* Backward compatibility: render text children directly */}
+      {!labelContainer && textChildren && renderComponent && textChildren.map(child => (<react_native_1.View key={child.id} style={styles.labelContainer}>
+          {renderComponent(child)}
+        </react_native_1.View>))}
+      
+      {/* Functional Switch control */}
+      <react_native_1.Switch value={isChecked} onValueChange={handleToggle} disabled={disabled} trackColor={{ false: trackOffColor, true: trackOnColor }} thumbColor={isChecked ? '#fff' : '#f4f3f4'} style={{
+            transform: [
+                { scaleX: sizeConfig.width / 50 },
+                { scaleY: sizeConfig.height / 26 }
+            ]
+        }}/>
+    </react_native_1.View>);
+};
+exports.ToggleComponent = ToggleComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+});

package/dist/components/VerticalProductsComponent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Vertical Products Component for React Native
+ * Pure Child Model: renders children via renderChild with overlay extraction,
+ * child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+import React from 'react';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+export interface VerticalProductsComponentProps {
+    component: PaywallComponent;
+    configuration: PaywallConfiguration;
+    renderChild: (child: PaywallComponent) => React.ReactNode;
+    stateManager?: any;
+    onAction?: (componentId: string, action: string) => void;
+}
+export declare const VerticalProductsComponent: React.FC<VerticalProductsComponentProps>;
+export default VerticalProductsComponent;

package/dist/components/VerticalProductsComponent.js

@@ -0,0 +1,311 @@
+"use strict";
+/**
+ * Vertical Products Component for React Native
+ * Pure Child Model: renders children via renderChild with overlay extraction,
+ * child sanitization, and selection state propagation.
+ * Matches Android ProductsComponent.kt and iOS ProductsRenderer.swift architecture.
+ */
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalProductsComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const PaywallStateManager_1 = require("../PaywallStateManager");
+function getRole(child) {
+    var _a;
+    return child.role || ((_a = child.properties) === null || _a === void 0 ? void 0 : _a.role);
+}
+function extractOverlays(children) {
+    if (!(children === null || children === void 0 ? void 0 : children.length)) {
+        return { badge: null, checkmark: null, radioIndicator: null, remainingChildren: [] };
+    }
+    const badge = children.find(c => getRole(c) === 'badge') || null;
+    const checkmark = children.find(c => getRole(c) === 'checkmark') || null;
+    const radioIndicator = children.find(c => getRole(c) === 'radio-indicator') || null;
+    const remaining = children.filter(c => c !== badge && c !== checkmark && c !== radioIndicator);
+    return { badge, checkmark, radioIndicator, remainingChildren: remaining };
+}
+// ============= CHILD SANITIZATION =============
+function sanitizeProductChild(child) {
+    const sanitized = { ...child };
+    // Strip card-level appearance (wrapper handles it)
+    if (sanitized.appearance) {
+        const { fill, backgroundColor, cornerRadius, borderColor, borderWidth, shadow, ...rest } = sanitized.appearance;
+        sanitized.appearance = rest;
+    }
+    // Strip selected appearance (wrapper handles selection styling)
+    sanitized.selectedAppearance = undefined;
+    // Strip layout padding (wrapper applies card padding)
+    if (sanitized.layout) {
+        const { padding, ...restLayout } = sanitized.layout;
+        sanitized.layout = restLayout;
+    }
+    return sanitized;
+}
+// ============= SELECTION STATE PROPAGATION =============
+function applySelectionState(component, isSelected, isHybridMode) {
+    var _a;
+    if (!isHybridMode)
+        return component;
+    const role = getRole(component);
+    // Handle radio-indicator composite
+    if (role === 'radio-indicator' && component.type === 'stack' && component.children) {
+        return {
+            ...component,
+            children: component.children.map(iconChild => {
+                const iconRole = getRole(iconChild);
+                if (iconRole === 'selected-icon')
+                    return { ...iconChild, visible: isSelected };
+                if (iconRole === 'unselected-icon')
+                    return { ...iconChild, visible: !isSelected };
+                return applySelectionState(iconChild, isSelected, isHybridMode);
+            }),
+        };
+    }
+    // Handle checkmark visibility
+    if (role === 'checkmark') {
+        return { ...component, visible: isSelected };
+    }
+    // Recurse into children
+    if ((_a = component.children) === null || _a === void 0 ? void 0 : _a.length) {
+        return {
+            ...component,
+            children: component.children.map(c => applySelectionState(c, isSelected, isHybridMode)),
+        };
+    }
+    return component;
+}
+// ============= HYBRID MODE DETECTION =============
+function hasHybridChildren(children) {
+    return children.some(child => {
+        if (getRole(child))
+            return true;
+        return hasChildWithRole(child);
+    });
+}
+function hasChildWithRole(component) {
+    if (!component.children)
+        return false;
+    for (const child of component.children) {
+        if (getRole(child))
+            return true;
+        if (hasChildWithRole(child))
+            return true;
+    }
+    return false;
+}
+// ============= HELPERS =============
+function resolveNumber(val, fallback) {
+    if (typeof val === 'number')
+        return val;
+    if (val && typeof val === 'object' && 'value' in val)
+        return val.value;
+    return fallback;
+}
+function resolveColor(appearance, key, fallback) {
+    if (!appearance)
+        return fallback;
+    const val = appearance[key];
+    if (!val)
+        return fallback;
+    if (typeof val === 'string')
+        return val;
+    if (val.resolvedColor)
+        return val.resolvedColor;
+    if (val.color)
+        return typeof val.color === 'string' ? val.color : fallback;
+    if (val.hex)
+        return val.hex;
+    return fallback;
+}
+function resolveFillColor(appearance, fallback) {
+    if (!appearance)
+        return fallback;
+    if (appearance.fill)
+        return resolveColor(appearance, 'fill', fallback);
+    if (appearance.backgroundColor)
+        return resolveColor(appearance, 'backgroundColor', fallback);
+    return fallback;
+}
+// ============= MAIN COMPONENT =============
+const VerticalProductsComponent = ({ component, configuration, renderChild, stateManager, onAction, }) => {
+    const properties = component.properties || {};
+    const allChildren = component.children || [];
+    // Package binding
+    const bindToPackages = properties.bindToPackages !== false;
+    const packageIdentifiers = properties.packageIdentifiers || [];
+    // Resolve bound packages
+    const boundPackages = bindToPackages
+        ? (packageIdentifiers.length > 0
+            ? packageIdentifiers
+                .map(id => (configuration.packages || []).find(p => p.identifier === id || p.productId === id))
+                .filter(Boolean)
+            : configuration.packages || [])
+        : [];
+    // Children resolution: bind mode with packages available -> limit; else show all visible
+    const children = (bindToPackages && boundPackages.length > 0)
+        ? allChildren.slice(0, boundPackages.length)
+        : allChildren.filter(c => c.visible !== false);
+    const gap = resolveNumber(properties.gap, 12);
+    const defaultSelectedIndex = resolveNumber(properties.defaultSelectedIndex, 0);
+    const showRadio = properties.showRadio !== false;
+    const showBadge = !!properties.showBadge;
+    const badgeProductIndex = resolveNumber(properties.badgeProductIndex, 0);
+    const isHybridMode = hasHybridChildren(children);
+    // State
+    const stateKey = `element:${component.id}.selectedIndex`;
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(defaultSelectedIndex);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        if (!stateManager)
+            return;
+        const existing = (_a = stateManager.getState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateKey);
+        if (existing !== undefined && existing !== null) {
+            setSelectedIndex(Number(existing));
+        }
+        else {
+            (_b = stateManager.setState) === null || _b === void 0 ? void 0 : _b.call(stateManager, stateKey, defaultSelectedIndex);
+        }
+        // Return the unsubscribe. This was dropped on the floor while nothing supplied a
+        // stateManager and every call no-opped; now that one is provided, an uncleaned
+        // subscription leaks a listener holding a stale setSelectedIndex on each remount.
+        return (_c = stateManager.subscribe) === null || _c === void 0 ? void 0 : _c.call(stateManager, stateKey, (value) => {
+            setSelectedIndex(Number(value) || 0);
+        });
+    }, [component.id, stateManager]);
+    // Publish the live selection PAYWALL-WIDE so Dynamic Values can react to it
+    // (`products.selectedIndex == 1` templates) and so `selectedProduct.*` resolves for
+    // the user's actual choice. The per-element key above is scoped to this component.
+    // With multiple products components, last write wins — same contract as Android
+    // ProductsComponent and iOS ProductsRenderer.updateSelectionState.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.setState) === null || _a === void 0 ? void 0 : _a.call(stateManager, PaywallStateManager_1.PaywallStateManager.SELECTED_INDEX_KEY, selectedIndex);
+    }, [selectedIndex, stateManager]);
+    const handleSelect = (0, react_1.useCallback)((index) => {
+        var _a, _b;
+        setSelectedIndex(index);
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.setState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateKey, index);
+        onAction === null || onAction === void 0 ? void 0 : onAction(component.id, `select_package:${index},${(_b = children[index]) === null || _b === void 0 ? void 0 : _b.id}`);
+        react_native_1.AccessibilityInfo.announceForAccessibility(`Selected product ${index + 1}`);
+    }, [stateKey, stateManager, onAction, component.id, children]);
+    // Render single product card (3-layer structure)
+    const renderProductCard = (child, index) => {
+        const isSelected = index === selectedIndex;
+        const childAppearance = child.appearance;
+        const childSelectedAppearance = child.selectedAppearance;
+        const childLayout = child.layout;
+        // Default state styling from child.appearance
+        const cardBg = resolveFillColor(childAppearance, 'transparent');
+        const cardCornerRadius = resolveNumber(childAppearance === null || childAppearance === void 0 ? void 0 : childAppearance.cornerRadius, 12);
+        const cardBorderColor = resolveColor(childAppearance, 'borderColor', 'rgba(128,128,128,0.2)');
+        const cardBorderWidth = resolveNumber(childAppearance === null || childAppearance === void 0 ? void 0 : childAppearance.borderWidth, 0);
+        // Selected state styling from child.selectedAppearance
+        const selectedBg = resolveFillColor(childSelectedAppearance, 'rgba(59,130,246,0.1)');
+        const selectedBorderColor = resolveColor(childSelectedAppearance, 'borderColor', '#3B82F6');
+        const selectedBorderWidth = resolveNumber(childSelectedAppearance === null || childSelectedAppearance === void 0 ? void 0 : childSelectedAppearance.borderWidth, 2);
+        const bgColor = isSelected ? selectedBg : cardBg;
+        const borderColor = isSelected ? selectedBorderColor : cardBorderColor;
+        const borderWidth = isSelected ? selectedBorderWidth : cardBorderWidth;
+        // Padding from child.layout.padding
+        const padding = childLayout === null || childLayout === void 0 ? void 0 : childLayout.padding;
+        const paddingTop = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.top, 14);
+        const paddingRight = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.right, 16);
+        const paddingBottom = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.bottom, 14);
+        const paddingLeft = resolveNumber(padding === null || padding === void 0 ? void 0 : padding.left, 16);
+        // Extract overlays
+        const extraction = extractOverlays(child.children);
+        // Sanitize child
+        const childWithRemaining = { ...child, children: extraction.remainingChildren };
+        const sanitized = sanitizeProductChild(childWithRemaining);
+        const transformed = applySelectionState(sanitized, isSelected, isHybridMode);
+        return (<react_native_1.TouchableOpacity key={child.id || `product-${index}`} activeOpacity={0.8} onPress={() => handleSelect(index)} accessibilityRole="radio" accessibilityState={{ selected: isSelected }} accessibilityLabel={`Product ${index + 1}, ${isSelected ? 'selected' : 'not selected'}`} style={{ marginBottom: index < children.length - 1 ? gap : 0 }}>
+        {/* 3-Layer Structure */}
+        <react_native_1.View style={{ position: 'relative' }}>
+          {/* Layer 1: Background */}
+          <react_native_1.View style={{
+                ...react_native_1.StyleSheet.absoluteFillObject,
+                backgroundColor: bgColor,
+                borderRadius: cardCornerRadius,
+                borderColor: borderColor,
+                borderWidth: borderWidth,
+            }}/>
+
+          {/* Layer 2: Content with padding */}
+          <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingTop,
+                paddingRight,
+                paddingBottom,
+                paddingLeft,
+            }}>
+            {/* Radio indicator */}
+            {showRadio && (isHybridMode && extraction.radioIndicator ? (<react_native_1.View style={{ marginRight: 12 }}>
+                  {renderChild(applySelectionState(extraction.radioIndicator, isSelected, true))}
+                </react_native_1.View>) : !isHybridMode ? (<react_native_1.View style={{ marginRight: 12 }}>
+                  <react_native_1.View style={{
+                    width: 22,
+                    height: 22,
+                    borderRadius: 11,
+                    borderWidth: 2,
+                    borderColor: isSelected ? '#3B82F6' : 'rgba(128,128,128,0.4)',
+                    backgroundColor: isSelected ? '#3B82F6' : 'transparent',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+                    {isSelected && (<react_native_1.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' }}>✓</react_native_1.Text>)}
+                  </react_native_1.View>
+                </react_native_1.View>) : null)}
+
+            {/* Render sanitized child content */}
+            <react_native_1.View style={{ flex: 1 }}>
+              {renderChild(transformed)}
+            </react_native_1.View>
+          </react_native_1.View>
+
+          {/* Layer 3: Badge overlay */}
+          {extraction.badge && showBadge && index === badgeProductIndex && (<react_native_1.View style={{ position: 'absolute', top: -10, right: 12, zIndex: 10 }}>
+              {renderChild(extraction.badge)}
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.TouchableOpacity>);
+    };
+    return (<react_native_1.View accessibilityRole="radiogroup" accessibilityLabel="Select a product">
+      {children.map((child, index) => renderProductCard(child, index))}
+    </react_native_1.View>);
+};
+exports.VerticalProductsComponent = VerticalProductsComponent;
+exports.default = exports.VerticalProductsComponent;

package/dist/dynamicValues.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Dynamic Values System for React Native SDK
+ * Supports nested condition groups with AND/OR logic
+ */
+export interface DynamicCondition {
+    id: string;
+    type: 'variable';
+    variableName?: string;
+    operator: 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'greater_than_or_equal' | 'less_than_or_equal' | 'contains' | 'exists';
+    value: any;
+}
+export interface ConditionGroup {
+    id: string;
+    logic: 'AND' | 'OR';
+    conditions: DynamicCondition[];
+    groups: ConditionGroup[];
+}
+export interface DynamicValueEntry {
+    id: string;
+    rootGroup: ConditionGroup;
+    value: any;
+}
+export interface DynamicValue {
+    _isDynamic: true;
+    default: any;
+    values: DynamicValueEntry[];
+}
+export declare function isDynamicValue(value: any): value is DynamicValue;
+export declare function evaluateDynamicValue(dynamicValue: any, variables: Record<string, any>): any;
+export declare function evaluateConditionGroup(group: ConditionGroup, variables: Record<string, any>): boolean;
+export declare function processComponentProperties(properties: Record<string, any>, variables: Record<string, any>): Record<string, any>;
+export declare function processFullComponent<T extends Record<string, any>>(component: T, variables: Record<string, any>): T;
+export declare function createConditionGroup(logic?: 'AND' | 'OR'): ConditionGroup;
+export declare function createDynamicValue(defaultValue: any, values?: DynamicValueEntry[]): DynamicValue;
+export declare function createCondition(variableName: string, operator: DynamicCondition['operator'], value: any): DynamicCondition;
+export declare function createSimpleValueEntry(variableName: string, operator: DynamicCondition['operator'], value: any, returnValue: any): DynamicValueEntry;