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

package/dist/components/SliderComponent.js

@@ -0,0 +1,263 @@
+"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.SliderComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const SliderComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const props = component.properties;
+    const minValue = (_a = props.minValue) !== null && _a !== void 0 ? _a : 0;
+    const maxValue = (_b = props.maxValue) !== null && _b !== void 0 ? _b : 100;
+    const step = (_c = props.step) !== null && _c !== void 0 ? _c : 1;
+    const defaultValue = (_d = props.defaultValue) !== null && _d !== void 0 ? _d : minValue;
+    const disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const showValue = props.showValue !== false;
+    const label = props.sliderLabel || props.label;
+    const valuePrefix = (_f = props.valuePrefix) !== null && _f !== void 0 ? _f : '';
+    const valueSuffix = (_g = props.valueSuffix) !== null && _g !== void 0 ? _g : '';
+    // Colors
+    const activeColor = (_h = props.activeColor) !== null && _h !== void 0 ? _h : '#007AFF';
+    const trackColor = (_j = props.trackColor) !== null && _j !== void 0 ? _j : '#e0e0e0';
+    const thumbColor = (_k = props.thumbColor) !== null && _k !== void 0 ? _k : activeColor;
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue);
+    const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const isDragging = (0, react_1.useRef)(false);
+    // Calculate value from position
+    const positionToValue = (0, react_1.useCallback)((position) => {
+        if (trackWidth === 0)
+            return minValue;
+        const ratio = Math.max(0, Math.min(1, position / trackWidth));
+        const rawValue = minValue + ratio * (maxValue - minValue);
+        // Apply step
+        const steppedValue = Math.round(rawValue / step) * step;
+        return Math.max(minValue, Math.min(maxValue, steppedValue));
+    }, [trackWidth, minValue, maxValue, step]);
+    // Calculate position from value
+    const valueToPosition = (0, react_1.useCallback)((value) => {
+        if (maxValue === minValue)
+            return 0;
+        const ratio = (value - minValue) / (maxValue - minValue);
+        return ratio * trackWidth;
+    }, [trackWidth, minValue, maxValue]);
+    // Update animated value when currentValue or trackWidth changes
+    (0, react_1.useEffect)(() => {
+        const position = valueToPosition(currentValue);
+        animatedValue.setValue(position);
+    }, [currentValue, trackWidth, valueToPosition, animatedValue]);
+    // Register initial state
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.currentValue`, currentValue);
+        }
+    }, []);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${component.id}.currentValue`, (value) => {
+                if (value !== currentValue && !isDragging.current) {
+                    setCurrentValue(value);
+                }
+            });
+        }
+    }, [component.id, stateManager, currentValue]);
+    // Pan responder for drag handling
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: (_, gestureState) => {
+            isDragging.current = true;
+            // Calculate initial position from touch
+            const touchX = gestureState.x0;
+            // This needs adjustment based on actual component position
+        },
+        onPanResponderMove: (_, gestureState) => {
+            if (disabled || trackWidth === 0)
+                return;
+            // Calculate new position based on accumulated movement
+            const currentPosition = valueToPosition(currentValue);
+            const newPosition = Math.max(0, Math.min(trackWidth, currentPosition + gestureState.dx));
+            const newValue = positionToValue(newPosition);
+            if (newValue !== currentValue) {
+                setCurrentValue(newValue);
+                animatedValue.setValue(newPosition);
+            }
+        },
+        onPanResponderRelease: () => {
+            isDragging.current = false;
+            // Update state manager on release
+            if (stateManager) {
+                stateManager.updateState(`element:${component.id}.currentValue`, currentValue);
+            }
+        },
+        onPanResponderTerminate: () => {
+            isDragging.current = false;
+        },
+    })).current;
+    // Handle track layout
+    const onTrackLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setTrackWidth(width);
+    };
+    // Handle direct tap on track
+    const handleTrackPress = (event) => {
+        if (disabled || trackWidth === 0)
+            return;
+        const touchX = event.nativeEvent.locationX;
+        const newValue = positionToValue(touchX);
+        setCurrentValue(newValue);
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.currentValue`, newValue);
+        }
+    };
+    const formatValue = (value) => {
+        if (step >= 1) {
+            return Math.round(value).toString();
+        }
+        else if (step >= 0.1) {
+            return value.toFixed(1);
+        }
+        return value.toFixed(2);
+    };
+    // Calculate progress percentage
+    const progress = trackWidth > 0 ? ((currentValue - minValue) / (maxValue - minValue)) * 100 : 0;
+    return (<react_native_1.View style={[styles.container, disabled && styles.disabled]}>
+      {(label || showValue) && (<react_native_1.View style={styles.header}>
+          {label && <react_native_1.Text style={styles.label}>{label}</react_native_1.Text>}
+          {showValue && (<react_native_1.Text style={styles.value}>
+              {valuePrefix}{formatValue(currentValue)}{valueSuffix}
+            </react_native_1.Text>)}
+        </react_native_1.View>)}
+      
+      <react_native_1.View style={styles.sliderContainer} onStartShouldSetResponder={() => !disabled} onResponderGrant={handleTrackPress} {...panResponder.panHandlers}>
+        <react_native_1.View style={[styles.track, { backgroundColor: trackColor }]} onLayout={onTrackLayout}>
+          <react_native_1.Animated.View style={[
+            styles.fill,
+            {
+                backgroundColor: activeColor,
+                width: animatedValue.interpolate({
+                    inputRange: [0, trackWidth || 1],
+                    outputRange: ['0%', '100%'],
+                    extrapolate: 'clamp',
+                }),
+            }
+        ]}/>
+        </react_native_1.View>
+        <react_native_1.Animated.View style={[
+            styles.thumb,
+            {
+                backgroundColor: thumbColor,
+                transform: [{
+                        translateX: animatedValue.interpolate({
+                            inputRange: [0, trackWidth || 1],
+                            outputRange: [0, trackWidth || 0],
+                            extrapolate: 'clamp',
+                        }),
+                    }],
+            }
+        ]}/>
+      </react_native_1.View>
+      
+      <react_native_1.View style={styles.rangeLabels}>
+        <react_native_1.Text style={styles.rangeLabel}>{minValue}</react_native_1.Text>
+        <react_native_1.Text style={styles.rangeLabel}>{maxValue}</react_native_1.Text>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.SliderComponent = SliderComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        paddingVertical: 8,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#333',
+    },
+    value: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#007AFF',
+    },
+    sliderContainer: {
+        height: 44,
+        justifyContent: 'center',
+        paddingHorizontal: 10, // Padding for thumb
+    },
+    track: {
+        height: 6,
+        borderRadius: 3,
+        overflow: 'hidden',
+    },
+    fill: {
+        height: '100%',
+        borderRadius: 3,
+    },
+    thumb: {
+        position: 'absolute',
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        marginLeft: -2, // Center thumb on track edge
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 4,
+        borderWidth: 2,
+        borderColor: '#fff',
+    },
+    rangeLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 8,
+        paddingHorizontal: 4,
+    },
+    rangeLabel: {
+        fontSize: 12,
+        color: '#999',
+    },
+});

package/dist/components/StarRatingInputComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StarRatingInputComponent - React Native
+ *
+ * Interactive star rating with customizable appearance.
+ * Features:
+ * - Configurable max stars
+ * - Half-star support
+ * - State manager integration
+ * - Animated feedback
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface StarRatingInputComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+export declare const StarRatingInputComponent: React.FC<StarRatingInputComponentProps>;
+export {};

package/dist/components/StarRatingInputComponent.js

@@ -0,0 +1,198 @@
+"use strict";
+/**
+ * StarRatingInputComponent - React Native
+ *
+ * Interactive star rating with customizable appearance.
+ * Features:
+ * - Configurable max stars
+ * - Half-star support
+ * - State manager integration
+ * - Animated feedback
+ */
+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.StarRatingInputComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const StarRatingInputComponent = ({ component, stateManager, isPreviewMode = false, renderComponent, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    const props = component.properties;
+    const componentId = component.id;
+    // Rating configuration
+    const maxStars = (_a = props.maxStars) !== null && _a !== void 0 ? _a : 5;
+    const defaultRating = Math.min(Math.max((_b = props.defaultRating) !== null && _b !== void 0 ? _b : 0, 0), maxStars);
+    const allowHalfStars = (_c = props.allowHalfStars) !== null && _c !== void 0 ? _c : false;
+    const allowZeroRating = (_d = props.allowZeroRating) !== null && _d !== void 0 ? _d : true;
+    const disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const tapSameToDeselect = (_f = props.tapSameToDeselect) !== null && _f !== void 0 ? _f : true;
+    // Label configuration
+    const showLabel = (_g = props.showLabel) !== null && _g !== void 0 ? _g : true;
+    const labelText = (_h = props.labelText) !== null && _h !== void 0 ? _h : 'Rate your experience';
+    const labelFontSize = (_k = (_j = props.labelFontSize) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : 16;
+    const labelFontWeight = (_l = props.labelFontWeight) !== null && _l !== void 0 ? _l : '600';
+    const labelTextColor = (_m = props.labelTextColor) !== null && _m !== void 0 ? _m : '#1F2937';
+    // Star appearance
+    const starSize = (_o = props.starSize) !== null && _o !== void 0 ? _o : 32;
+    const starSpacing = (_p = props.starSpacing) !== null && _p !== void 0 ? _p : 4;
+    const activeColor = (_q = props.activeColor) !== null && _q !== void 0 ? _q : '#FFD700';
+    const inactiveColor = (_r = props.inactiveColor) !== null && _r !== void 0 ? _r : '#D1D5DB';
+    // Display options
+    const showRatingText = (_s = props.showRatingText) !== null && _s !== void 0 ? _s : true;
+    const ratingTextFormat = (_t = props.ratingTextFormat) !== null && _t !== void 0 ? _t : 'fraction';
+    const ratingTextFontSize = (_v = (_u = props.ratingTextFontSize) === null || _u === void 0 ? void 0 : _u.value) !== null && _v !== void 0 ? _v : 14;
+    const ratingTextColor = (_w = props.ratingTextColor) !== null && _w !== void 0 ? _w : '#6B7280';
+    const [currentRating, setCurrentRating] = (0, react_1.useState)(defaultRating);
+    const [animatedScales] = (0, react_1.useState)(() => Array.from({ length: maxStars }, () => new react_native_1.Animated.Value(1)));
+    // Connect to state manager
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            // Subscribe to external changes
+            return stateManager.subscribeToState(`element:${componentId}.rating`, (value) => {
+                if (value !== currentRating) {
+                    setCurrentRating(value);
+                }
+            });
+        }
+    }, [componentId, stateManager, currentRating]);
+    // Update state manager when rating changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.rating`, currentRating);
+        }
+    }, [componentId, currentRating, stateManager]);
+    // Handle star press
+    const handleStarPress = (0, react_1.useCallback)((starIndex) => {
+        if (disabled)
+            return;
+        let newRating = starIndex + 1;
+        // Tap same to deselect
+        if (tapSameToDeselect && newRating === currentRating) {
+            newRating = allowZeroRating ? 0 : 1;
+        }
+        // Clamp rating
+        newRating = Math.max(allowZeroRating ? 0 : 1, Math.min(maxStars, newRating));
+        // Animate the star
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(animatedScales[starIndex], {
+                toValue: 1.3,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(animatedScales[starIndex], {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        setCurrentRating(newRating);
+    }, [disabled, tapSameToDeselect, currentRating, allowZeroRating, maxStars, animatedScales]);
+    // Format rating text
+    const formatRatingText = (0, react_1.useCallback)(() => {
+        switch (ratingTextFormat) {
+            case 'written':
+                return `${currentRating} of ${maxStars}`;
+            case 'stars':
+                return `${currentRating} ${currentRating === 1 ? 'star' : 'stars'}`;
+            case 'percentage':
+                return `${Math.round((currentRating / maxStars) * 100)}%`;
+            case 'fraction':
+            default:
+                return `${currentRating}/${maxStars}`;
+        }
+    }, [currentRating, maxStars, ratingTextFormat]);
+    return (<react_native_1.View style={[styles.container, disabled && styles.disabled]}>
+      {/* Label */}
+      {showLabel && labelText && (<react_native_1.Text style={[
+                styles.label,
+                {
+                    fontSize: labelFontSize,
+                    fontWeight: labelFontWeight,
+                    color: labelTextColor,
+                },
+            ]}>
+          {labelText}
+        </react_native_1.Text>)}
+      
+      {/* Stars Row */}
+      <react_native_1.View style={[styles.starsRow, { gap: starSpacing }]}>
+        {Array.from({ length: maxStars }, (_, index) => {
+            const isFilled = index < currentRating;
+            return (<react_native_1.TouchableOpacity key={index} onPress={() => handleStarPress(index)} disabled={disabled} activeOpacity={0.7}>
+              <react_native_1.Animated.View style={{
+                    transform: [{ scale: animatedScales[index] }],
+                }}>
+                <react_native_1.Text style={{
+                    fontSize: starSize,
+                    color: isFilled ? activeColor : inactiveColor,
+                }}>
+                  ★
+                </react_native_1.Text>
+              </react_native_1.Animated.View>
+            </react_native_1.TouchableOpacity>);
+        })}
+      </react_native_1.View>
+      
+      {/* Rating Text */}
+      {showRatingText && (<react_native_1.Text style={[
+                styles.ratingText,
+                {
+                    fontSize: ratingTextFontSize,
+                    color: ratingTextColor,
+                },
+            ]}>
+          {formatRatingText()}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+};
+exports.StarRatingInputComponent = StarRatingInputComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        gap: 12,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    label: {
+        textAlign: 'center',
+    },
+    starsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    ratingText: {
+        textAlign: 'center',
+    },
+});

package/dist/components/StickerCompositeComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * StickerCompositeComponent - Native React Native implementation
+ * Positioned overlay sticker with rotation, icons, images, and text
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface StickerCompositeComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const StickerCompositeComponent: React.FC<StickerCompositeComponentProps>;
+export default StickerCompositeComponent;

package/dist/components/StickerCompositeComponent.js

@@ -0,0 +1,136 @@
+"use strict";
+/**
+ * StickerCompositeComponent - Native React Native implementation
+ * Positioned overlay sticker with rotation, icons, images, and text
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickerCompositeComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Icon mapping for common icon names
+const ICON_MAP = {
+    star: '⭐',
+    heart: '❤️',
+    fire: '🔥',
+    check: '✅',
+    crown: '👑',
+    lightning: '⚡',
+    trophy: '🏆',
+    diamond: '💎',
+    rocket: '🚀',
+    gift: '🎁',
+    medal: '🏅',
+    sparkle: '✨',
+    thumbsup: '👍',
+    badge: '🏷️',
+};
+const getColorFromValue = (value, fallback) => {
+    if (!value)
+        return fallback;
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'object' && value.color)
+        return value.color;
+    return fallback;
+};
+const StickerCompositeComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const props = component.properties;
+    // Properties
+    const imageUrl = props.imageUrl;
+    const iconName = props.iconName;
+    const text = props.text;
+    const rotation = props.rotation || 0;
+    const backgroundColor = getColorFromValue(props.backgroundColor, '#FFEB3B');
+    const borderRadius = (_a = props.borderRadius) !== null && _a !== void 0 ? _a : 8;
+    const borderColor = props.borderColor ? getColorFromValue(props.borderColor, 'transparent') : undefined;
+    const borderWidth = (_b = props.borderWidth) !== null && _b !== void 0 ? _b : 0;
+    const shadowColor = props.shadowColor ? getColorFromValue(props.shadowColor, 'rgba(0,0,0,0.2)') : undefined;
+    const shadowBlur = (_c = props.shadowBlur) !== null && _c !== void 0 ? _c : 8;
+    const paddingHorizontal = (_d = props.paddingHorizontal) !== null && _d !== void 0 ? _d : 16;
+    const paddingVertical = (_e = props.paddingVertical) !== null && _e !== void 0 ? _e : 8;
+    const fontSize = (_f = props.fontSize) !== null && _f !== void 0 ? _f : 14;
+    const textColor = getColorFromValue(props.textColor, '#000000');
+    const fontWeight = (_g = props.fontWeight) !== null && _g !== void 0 ? _g : '600';
+    const iconSize = (_h = props.iconSize) !== null && _h !== void 0 ? _h : 24;
+    const iconColor = props.iconColor ? getColorFromValue(props.iconColor, textColor) : textColor;
+    // Get icon emoji
+    const iconEmoji = iconName ? ICON_MAP[iconName.toLowerCase()] || '🏷️' : null;
+    // Build content
+    const hasIcon = !!iconEmoji;
+    const hasImage = !!imageUrl;
+    const hasText = !!text;
+    if (!hasIcon && !hasImage && !hasText) {
+        return null;
+    }
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                transform: [{ rotate: `${rotation}deg` }],
+                backgroundColor,
+                borderRadius,
+                paddingHorizontal,
+                paddingVertical,
+                ...(borderColor && borderWidth > 0 && {
+                    borderColor,
+                    borderWidth,
+                }),
+                ...(shadowColor && {
+                    shadowColor,
+                    shadowOffset: { width: 2, height: 2 },
+                    shadowOpacity: 0.3,
+                    shadowRadius: shadowBlur / 2,
+                    elevation: 4,
+                }),
+            },
+        ]}>
+      {/* Icon */}
+      {hasIcon && (<react_native_1.Text style={[styles.icon, { fontSize: iconSize }]}>
+          {iconEmoji}
+        </react_native_1.Text>)}
+      
+      {/* Image */}
+      {hasImage && (<react_native_1.Image source={{ uri: imageUrl }} style={[
+                styles.image,
+                {
+                    width: iconSize,
+                    height: iconSize,
+                    borderRadius: borderRadius / 2,
+                },
+            ]} resizeMode="cover"/>)}
+      
+      {/* Text */}
+      {hasText && (<react_native_1.Text style={[
+                styles.text,
+                {
+                    fontSize,
+                    color: textColor,
+                    fontWeight: fontWeight,
+                    marginLeft: (hasIcon || hasImage) ? 8 : 0,
+                },
+            ]}>
+          {text}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+};
+exports.StickerCompositeComponent = StickerCompositeComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+    image: {
+        overflow: 'hidden',
+    },
+    text: {
+        textAlign: 'center',
+    },
+});
+exports.default = exports.StickerCompositeComponent;

package/dist/components/TabsComponent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TabsComponent - Interactive tabs for React Native
+ * Uses element:{id}.currentIndex for state tracking (Superwall pattern)
+ * Full property support matching web schema for cross-platform consistency
+ * Phase 2 Enhanced: icon support, alignment, sizing, disabled state, animation duration, overflow
+ */
+import React from 'react';
+import type { PaywallComponent } from '../types';
+interface TabsComponentProps {
+    component: PaywallComponent;
+    /** Child components to render within the tabs (defaults to component.children) */
+    children?: PaywallComponent[];
+    renderChild: (child: PaywallComponent, index: number) => React.ReactNode;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    onTabChange?: (componentId: string, previousIndex: number, newIndex: number, tabLabel: string) => void;
+}
+export declare const TabsComponent: React.FC<TabsComponentProps>;
+export {};