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

package/dist/animations/presets.js

@@ -0,0 +1,367 @@
+"use strict";
+/**
+ * Shared Animation Preset Definitions
+ * Platform-agnostic animation configurations that can be executed on any SDK
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EASING_CURVES = exports.ANIMATION_PRESETS = void 0;
+exports.getAnimationPreset = getAnimationPreset;
+exports.getPresetsByCategory = getPresetsByCategory;
+exports.getAvailablePresetNames = getAvailablePresetNames;
+/**
+ * Animation Presets - Shared across all SDKs
+ */
+exports.ANIMATION_PRESETS = {
+    // ============ ENTER ANIMATIONS ============
+    'fade-in': {
+        name: 'Fade In',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, opacity: 0 },
+            { offset: 1, opacity: 1 }
+        ],
+        defaultDuration: 300,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Fades element in from transparent'
+    },
+    'fade-in-up': {
+        name: 'Fade In Up',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, opacity: 0, translateY: 20 },
+            { offset: 1, opacity: 1, translateY: 0 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Fades in while sliding up'
+    },
+    'fade-in-down': {
+        name: 'Fade In Down',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, opacity: 0, translateY: -20 },
+            { offset: 1, opacity: 1, translateY: 0 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Fades in while sliding down'
+    },
+    'slide-in-left': {
+        name: 'Slide In Left',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, translateX: '-100%', opacity: 0 },
+            { offset: 1, translateX: 0, opacity: 1 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Slides in from the left'
+    },
+    'slide-in-right': {
+        name: 'Slide In Right',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, translateX: '100%', opacity: 0 },
+            { offset: 1, translateX: 0, opacity: 1 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Slides in from the right'
+    },
+    'slide-in-up': {
+        name: 'Slide In Up',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, translateY: '100%', opacity: 0 },
+            { offset: 1, translateY: 0, opacity: 1 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Slides in from the bottom'
+    },
+    'slide-in-down': {
+        name: 'Slide In Down',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, translateY: '-100%', opacity: 0 },
+            { offset: 1, translateY: 0, opacity: 1 }
+        ],
+        defaultDuration: 400,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Slides in from the top'
+    },
+    'scale-in': {
+        name: 'Scale In',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, scale: 0.8, opacity: 0 },
+            { offset: 1, scale: 1, opacity: 1 }
+        ],
+        defaultDuration: 300,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Scales up while fading in'
+    },
+    'bounce-in': {
+        name: 'Bounce In',
+        category: 'enter',
+        keyframes: [
+            { offset: 0, scale: 0.3, opacity: 0 },
+            { offset: 0.5, scale: 1.05 },
+            { offset: 0.7, scale: 0.9 },
+            { offset: 1, scale: 1, opacity: 1 }
+        ],
+        defaultDuration: 500,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Bounces in with elastic effect'
+    },
+    // ============ EXIT ANIMATIONS ============
+    'fade-out': {
+        name: 'Fade Out',
+        category: 'exit',
+        keyframes: [
+            { offset: 0, opacity: 1 },
+            { offset: 1, opacity: 0 }
+        ],
+        defaultDuration: 300,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Fades element out to transparent'
+    },
+    'scale-out': {
+        name: 'Scale Out',
+        category: 'exit',
+        keyframes: [
+            { offset: 0, scale: 1, opacity: 1 },
+            { offset: 1, scale: 0.8, opacity: 0 }
+        ],
+        defaultDuration: 300,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Scales down while fading out'
+    },
+    // ============ LOOP ANIMATIONS ============
+    'pulse': {
+        name: 'Pulse',
+        category: 'loop',
+        keyframes: [
+            { offset: 0, scale: 1 },
+            { offset: 0.5, scale: 1.05 },
+            { offset: 1, scale: 1 }
+        ],
+        defaultDuration: 1000,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in-out',
+        defaultIterations: -1, // infinite
+        defaultDirection: 'normal',
+        description: 'Gentle pulsing scale effect'
+    },
+    'breathe': {
+        name: 'Breathe',
+        category: 'loop',
+        keyframes: [
+            { offset: 0, scale: 1, opacity: 1 },
+            { offset: 0.5, scale: 1.03, opacity: 0.9 },
+            { offset: 1, scale: 1, opacity: 1 }
+        ],
+        defaultDuration: 2000,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in-out',
+        defaultIterations: -1,
+        defaultDirection: 'normal',
+        description: 'Subtle breathing effect'
+    },
+    'float': {
+        name: 'Float',
+        category: 'loop',
+        keyframes: [
+            { offset: 0, translateY: 0 },
+            { offset: 0.5, translateY: -10 },
+            { offset: 1, translateY: 0 }
+        ],
+        defaultDuration: 2000,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in-out',
+        defaultIterations: -1,
+        defaultDirection: 'normal',
+        description: 'Floating up and down effect'
+    },
+    'wiggle': {
+        name: 'Wiggle',
+        category: 'loop',
+        keyframes: [
+            { offset: 0, rotate: 0 },
+            { offset: 0.25, rotate: -3 },
+            { offset: 0.5, rotate: 0 },
+            { offset: 0.75, rotate: 3 },
+            { offset: 1, rotate: 0 }
+        ],
+        defaultDuration: 500,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in-out',
+        defaultIterations: -1,
+        defaultDirection: 'normal',
+        description: 'Gentle rotation wiggle'
+    },
+    'spin': {
+        name: 'Spin',
+        category: 'loop',
+        keyframes: [
+            { offset: 0, rotate: 0 },
+            { offset: 1, rotate: 360 }
+        ],
+        defaultDuration: 1000,
+        defaultDelay: 0,
+        defaultEasing: 'linear',
+        defaultIterations: -1,
+        defaultDirection: 'normal',
+        description: 'Continuous rotation'
+    },
+    // ============ ATTENTION ANIMATIONS ============
+    'bounce': {
+        name: 'Bounce',
+        category: 'attention',
+        keyframes: [
+            { offset: 0, translateY: 0 },
+            { offset: 0.2, translateY: 0 },
+            { offset: 0.4, translateY: -15 },
+            { offset: 0.5, translateY: 0 },
+            { offset: 0.6, translateY: -7 },
+            { offset: 0.8, translateY: 0 },
+            { offset: 1, translateY: 0 }
+        ],
+        defaultDuration: 800,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Bouncing attention getter'
+    },
+    'shake': {
+        name: 'Shake',
+        category: 'attention',
+        keyframes: [
+            { offset: 0, translateX: 0 },
+            { offset: 0.1, translateX: -10 },
+            { offset: 0.2, translateX: 10 },
+            { offset: 0.3, translateX: -10 },
+            { offset: 0.4, translateX: 10 },
+            { offset: 0.5, translateX: -5 },
+            { offset: 0.6, translateX: 5 },
+            { offset: 0.7, translateX: -2 },
+            { offset: 0.8, translateX: 2 },
+            { offset: 1, translateX: 0 }
+        ],
+        defaultDuration: 600,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Horizontal shake effect'
+    },
+    'flash': {
+        name: 'Flash',
+        category: 'attention',
+        keyframes: [
+            { offset: 0, opacity: 1 },
+            { offset: 0.25, opacity: 0 },
+            { offset: 0.5, opacity: 1 },
+            { offset: 0.75, opacity: 0 },
+            { offset: 1, opacity: 1 }
+        ],
+        defaultDuration: 800,
+        defaultDelay: 0,
+        defaultEasing: 'ease-in-out',
+        defaultIterations: 1,
+        defaultDirection: 'normal',
+        description: 'Flashing opacity effect'
+    },
+    // ============ INTERACTION ANIMATIONS ============
+    'shrink': {
+        name: 'Shrink',
+        category: 'interaction',
+        keyframes: [
+            { offset: 0, scale: 1 },
+            { offset: 1, scale: 0.95 }
+        ],
+        defaultDuration: 100,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'alternate',
+        description: 'Button press shrink effect'
+    },
+    'grow': {
+        name: 'Grow',
+        category: 'interaction',
+        keyframes: [
+            { offset: 0, scale: 1 },
+            { offset: 1, scale: 1.05 }
+        ],
+        defaultDuration: 200,
+        defaultDelay: 0,
+        defaultEasing: 'ease-out',
+        defaultIterations: 1,
+        defaultDirection: 'alternate',
+        description: 'Hover grow effect'
+    },
+};
+/**
+ * Get preset by name
+ */
+function getAnimationPreset(name) {
+    return exports.ANIMATION_PRESETS[name];
+}
+/**
+ * Get all presets by category
+ */
+function getPresetsByCategory(category) {
+    return Object.values(exports.ANIMATION_PRESETS).filter(preset => preset.category === category);
+}
+/**
+ * List all available preset names
+ */
+function getAvailablePresetNames() {
+    return Object.keys(exports.ANIMATION_PRESETS);
+}
+/**
+ * Easing cubic-bezier mappings for CSS/platform conversion
+ */
+exports.EASING_CURVES = {
+    'linear': [0, 0, 1, 1],
+    'ease': [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1],
+    'ease-out': [0, 0, 0.58, 1],
+    'ease-in-out': [0.42, 0, 0.58, 1],
+    'spring': [0.175, 0.885, 0.32, 1.275], // Approximation
+};

package/dist/components/AccoladeCpsComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * AccoladeCpsComponent - Native React Native implementation
+ * Award badge with 6 variants: medal, trophy, ribbon, star, badge, certificate
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface AccoladeCpsComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const AccoladeCpsComponent: React.FC<AccoladeCpsComponentProps>;
+export default AccoladeCpsComponent;

package/dist/components/AccoladeCpsComponent.js

@@ -0,0 +1,248 @@
+"use strict";
+/**
+ * AccoladeCpsComponent - Native React Native implementation
+ * Award badge with 6 variants: medal, trophy, ribbon, star, badge, certificate
+ */
+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.AccoladeCpsComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Icon mapping for variants
+const VARIANT_ICONS = {
+    medal: '🏅',
+    trophy: '🏆',
+    ribbon: '🎀',
+    star: '⭐',
+    badge: '🏷️',
+    certificate: '📜',
+};
+// Icon mapping for custom icon names
+const ICON_MAP = {
+    star: '⭐',
+    trophy: '🏆',
+    medal: '🏅',
+    crown: '👑',
+    diamond: '💎',
+    heart: '❤️',
+    check: '✅',
+};
+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 AccoladeCpsComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a;
+    const props = component.properties;
+    // Properties
+    const variant = props.variant || 'medal';
+    const title = props.title || 'Award';
+    const subtitle = props.subtitle;
+    const iconName = props.iconName;
+    const primaryColor = getColorFromValue(props.primaryColor, '#FFD700');
+    const secondaryColor = getColorFromValue(props.secondaryColor, '#FFA500');
+    const textColor = getColorFromValue(props.textColor, '#1F2937');
+    const animated = props.animated !== false;
+    const size = (_a = props.size) !== null && _a !== void 0 ? _a : 80;
+    const showGlow = props.showGlow !== false;
+    const glowColor = props.glowColor ? getColorFromValue(props.glowColor, primaryColor) : primaryColor;
+    // Animation values
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const rotateAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(-0.1)).current;
+    (0, react_1.useEffect)(() => {
+        if (animated) {
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.spring(scaleAnim, {
+                    toValue: 1,
+                    friction: 4,
+                    tension: 40,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(rotateAnim, {
+                    toValue: 0,
+                    duration: 500,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.quad),
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+        else {
+            scaleAnim.setValue(1);
+            rotateAnim.setValue(0);
+        }
+    }, [animated, scaleAnim, rotateAnim]);
+    // Get icon
+    const icon = iconName
+        ? (ICON_MAP[iconName.toLowerCase()] || VARIANT_ICONS[variant])
+        : VARIANT_ICONS[variant];
+    const isRibbon = variant === 'ribbon';
+    const rotate = rotateAnim.interpolate({
+        inputRange: [-0.1, 0],
+        outputRange: ['-10deg', '0deg'],
+    });
+    return (<react_native_1.Animated.View style={[
+            styles.container,
+            {
+                transform: [
+                    { scale: scaleAnim },
+                    { rotate },
+                ],
+            },
+        ]}>
+      {/* Icon container */}
+      <react_native_1.View style={styles.iconContainer}>
+        {/* Glow effect */}
+        {showGlow && (<react_native_1.View style={[
+                styles.glow,
+                {
+                    width: size + 20,
+                    height: size + 20,
+                    backgroundColor: glowColor,
+                    borderRadius: isRibbon ? 8 : (size + 20) / 2,
+                },
+            ]}/>)}
+        
+        {/* Main badge */}
+        <react_native_1.View style={[
+            styles.badge,
+            {
+                width: size,
+                height: size,
+                borderRadius: isRibbon ? 8 : size / 2,
+                backgroundColor: primaryColor,
+            },
+        ]}>
+          {/* Gradient overlay simulation */}
+          <react_native_1.View style={[
+            styles.gradientOverlay,
+            {
+                borderRadius: isRibbon ? 8 : size / 2,
+            },
+        ]}/>
+          
+          {/* Icon */}
+          <react_native_1.Text style={[styles.icon, { fontSize: size * 0.45 }]}>
+            {icon}
+          </react_native_1.Text>
+        </react_native_1.View>
+        
+        {/* Ribbon decoration for medal variant */}
+        {variant === 'medal' && (<react_native_1.View style={[styles.ribbonContainer, { top: size * 0.7 }]}>
+            <react_native_1.View style={[
+                styles.ribbonStrip,
+                styles.ribbonLeft,
+                { backgroundColor: secondaryColor },
+            ]}/>
+            <react_native_1.View style={{ width: size * 0.4 }}/>
+            <react_native_1.View style={[
+                styles.ribbonStrip,
+                styles.ribbonRight,
+                { backgroundColor: secondaryColor },
+            ]}/>
+          </react_native_1.View>)}
+      </react_native_1.View>
+      
+      {/* Title */}
+      <react_native_1.Text style={[styles.title, { color: textColor }]}>
+        {title}
+      </react_native_1.Text>
+      
+      {/* Subtitle */}
+      {subtitle && (<react_native_1.Text style={[styles.subtitle, { color: textColor }]}>
+          {subtitle}
+        </react_native_1.Text>)}
+    </react_native_1.Animated.View>);
+};
+exports.AccoladeCpsComponent = AccoladeCpsComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+    },
+    iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 12,
+    },
+    glow: {
+        position: 'absolute',
+        opacity: 0.4,
+    },
+    badge: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    gradientOverlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+    },
+    icon: {
+        textAlign: 'center',
+    },
+    ribbonContainer: {
+        position: 'absolute',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    ribbonStrip: {
+        width: 12,
+        height: 24,
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4,
+    },
+    ribbonLeft: {
+        transform: [{ rotate: '15deg' }],
+    },
+    ribbonRight: {
+        transform: [{ rotate: '-15deg' }],
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 12,
+        opacity: 0.7,
+        textAlign: 'center',
+        marginTop: 4,
+    },
+});
+exports.default = exports.AccoladeCpsComponent;

package/dist/components/AccordionComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface AccordionComponentProps {
+    component: PaywallComponent;
+    renderChild: (child: PaywallComponent) => React.ReactNode;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const AccordionComponent: React.FC<AccordionComponentProps>;
+export {};