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

package/dist/components/TabsComponent.js

@@ -0,0 +1,431 @@
+"use strict";
+/**
+ * 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
+ */
+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.TabsComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Enable LayoutAnimation on Android
+if (react_native_1.Platform.OS === 'android' && react_native_1.UIManager.setLayoutAnimationEnabledExperimental) {
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+// Icon mapping for React Native (using basic Unicode symbols as fallback)
+const ICON_MAP = {
+    home: '🏠',
+    star: '⭐',
+    settings: '⚙️',
+    person: '👤',
+    favorite: '❤️',
+    heart: '❤️',
+    search: '🔍',
+    check: '✓',
+    close: '✕',
+    add: '+',
+    remove: '-',
+    edit: '✏️',
+    delete: '🗑️',
+    share: '↗️',
+    download: '⬇️',
+    upload: '⬆️',
+    refresh: '🔄',
+    info: 'ℹ️',
+    help: '❓',
+    warning: '⚠️',
+    error: '❌',
+    lock: '🔒',
+    unlock: '🔓',
+    notification: '🔔',
+    email: '✉️',
+    phone: '📞',
+    location: '📍',
+    calendar: '📅',
+    time: '⏰',
+    camera: '📷',
+    photo: '🖼️',
+    video: '🎥',
+    music: '🎵',
+    play: '▶️',
+    pause: '⏸️',
+    stop: '⏹️',
+    crown: '👑',
+    premium: '👑',
+    diamond: '💎',
+    gift: '🎁',
+    cart: '🛒',
+    wallet: '💰',
+    rocket: '🚀',
+    trophy: '🏆',
+    medal: '🏅',
+    badge: '📛',
+    verified: '✅',
+    shield: '🛡️',
+    bolt: '⚡',
+    fire: '🔥',
+    sparkle: '✨',
+    magic: '🪄',
+};
+const TabsComponent = ({ component, renderChild, stateManager, isPreviewMode = false, onTabChange, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    const props = component.properties || {};
+    // Core Properties
+    const tabCount = (_a = props.tabCount) !== null && _a !== void 0 ? _a : 3;
+    const defaultTab = (_b = props.defaultTab) !== null && _b !== void 0 ? _b : 0;
+    const animated = (_c = props.animated) !== null && _c !== void 0 ? _c : true;
+    const variant = (_d = props.variant) !== null && _d !== void 0 ? _d : 'pills';
+    // Phase 2: New Properties
+    const tabAlignment = (_e = props.tabAlignment) !== null && _e !== void 0 ? _e : 'stretch';
+    const tabSizing = (_f = props.tabSizing) !== null && _f !== void 0 ? _f : 'equal';
+    const fixedTabWidth = props.fixedTabWidth;
+    const animationDuration = (_g = props.animationDuration) !== null && _g !== void 0 ? _g : 200;
+    const overflowBehavior = (_h = props.overflowBehavior) !== null && _h !== void 0 ? _h : 'scroll';
+    const tabIconPosition = (_j = props.tabIconPosition) !== null && _j !== void 0 ? _j : 'left';
+    // Styling Properties (matching web schema)
+    const activeTabColor = (_k = props.activeTabColor) !== null && _k !== void 0 ? _k : '#FFFFFF';
+    const inactiveTabColor = (_l = props.inactiveTabColor) !== null && _l !== void 0 ? _l : 'transparent';
+    const activeTextColor = (_m = props.activeTextColor) !== null && _m !== void 0 ? _m : '#000000';
+    const inactiveTextColor = (_o = props.inactiveTextColor) !== null && _o !== void 0 ? _o : '#666666';
+    const tabListBackgroundColor = (_p = props.tabListBackgroundColor) !== null && _p !== void 0 ? _p : '#F5F5F5';
+    const tabFontSize = (_q = props.tabFontSize) !== null && _q !== void 0 ? _q : 14;
+    const tabFontWeight = (_r = props.tabFontWeight) !== null && _r !== void 0 ? _r : '600';
+    const tabBorderRadius = (_s = props.tabBorderRadius) !== null && _s !== void 0 ? _s : 8;
+    const tabListBorderRadius = (_t = props.tabListBorderRadius) !== null && _t !== void 0 ? _t : 10;
+    const tabGap = (_u = props.tabGap) !== null && _u !== void 0 ? _u : 4;
+    const tabPaddingX = (_v = props.tabPaddingX) !== null && _v !== void 0 ? _v : 16;
+    const tabPaddingY = (_w = props.tabPaddingY) !== null && _w !== void 0 ? _w : 10;
+    // Phase 2: Disabled state colors
+    const disabledTextColor = (_x = props.disabledTextColor) !== null && _x !== void 0 ? _x : '#AAAAAA';
+    const disabledTabFill = (_y = props.disabledTabFill) !== null && _y !== void 0 ? _y : '#F0F0F0';
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(defaultTab);
+    // Resolve tab children by role (canonical pattern matching all other renderers)
+    const tabChildren = (0, react_1.useMemo)(() => {
+        return (component.children || [])
+            .filter(child => /^tab-\d+$/.test(child.role || ''))
+            .sort((a, b) => {
+            var _a, _b;
+            const aNum = parseInt(((_a = a.role) === null || _a === void 0 ? void 0 : _a.replace('tab-', '')) || '0');
+            const bNum = parseInt(((_b = b.role) === null || _b === void 0 ? void 0 : _b.replace('tab-', '')) || '0');
+            return aNum - bNum;
+        });
+    }, [component.children]);
+    // Get tab label from child properties (canonical: label → text → name)
+    const getTabLabel = (0, react_1.useCallback)((index) => {
+        var _a, _b, _c, _d, _e;
+        const child = tabChildren[index];
+        if (!child)
+            return `Tab ${index + 1}`;
+        return (_e = (_d = (_b = (_a = child.properties) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = child.properties) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : child.name) !== null && _e !== void 0 ? _e : `Tab ${index + 1}`;
+    }, [tabChildren]);
+    // Get tab icon from child properties
+    const getTabIcon = (0, react_1.useCallback)((index) => {
+        var _a;
+        const child = tabChildren[index];
+        const iconName = (_a = child === null || child === void 0 ? void 0 : child.properties) === null || _a === void 0 ? void 0 : _a.icon;
+        if (iconName && ICON_MAP[iconName.toLowerCase()]) {
+            return ICON_MAP[iconName.toLowerCase()];
+        }
+        return undefined;
+    }, [tabChildren]);
+    // Check if tab is disabled from child properties
+    const isTabDisabled = (0, react_1.useCallback)((index) => {
+        var _a, _b;
+        const child = tabChildren[index];
+        return (_b = (_a = child === null || child === void 0 ? void 0 : child.properties) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : false;
+    }, [tabChildren]);
+    // Parse children to find content panels - filter by content-panel-X role and sort
+    const contentPanels = (0, react_1.useMemo)(() => {
+        const children = component.children || [];
+        return children
+            .filter(child => /^content-panel-\d+$/.test(child.role || ''))
+            .sort((a, b) => {
+            var _a, _b;
+            const aNum = parseInt(((_a = a.role) === null || _a === void 0 ? void 0 : _a.replace('content-panel-', '')) || '0');
+            const bNum = parseInt(((_b = b.role) === null || _b === void 0 ? void 0 : _b.replace('content-panel-', '')) || '0');
+            return aNum - bNum;
+        });
+    }, [component.children]);
+    // Update state manager
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+        }
+    }, [component.id, currentIndex, stateManager]);
+    // Listen for external state changes
+    (0, react_1.useEffect)(() => {
+        if (!stateManager)
+            return;
+        const unsubscribe = stateManager.subscribeToState(`element:${component.id}.currentIndex`, (value) => {
+            if (typeof value === 'number' && value !== currentIndex) {
+                selectTab(value);
+            }
+        });
+        return unsubscribe;
+    }, [component.id, currentIndex, stateManager]);
+    const selectTab = (0, react_1.useCallback)((index) => {
+        if (index < 0 || index >= tabCount)
+            return;
+        // Phase 2: Check if tab is disabled
+        if (isTabDisabled(index))
+            return;
+        const previousIndex = currentIndex;
+        const tabLabel = getTabLabel(index);
+        if (animated) {
+            react_native_1.LayoutAnimation.configureNext({
+                duration: animationDuration,
+                update: { type: react_native_1.LayoutAnimation.Types.easeInEaseOut },
+            });
+        }
+        setCurrentIndex(index);
+        // Phase 2: Fire tab change callback
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(component.id, previousIndex, index, tabLabel);
+    }, [animated, animationDuration, tabCount, currentIndex, isTabDisabled, getTabLabel, onTabChange, component.id]);
+    // Content gap from containerLayout (matching web schema)
+    const contentGap = (_0 = (_z = component.containerLayout) === null || _z === void 0 ? void 0 : _z.gap) !== null && _0 !== void 0 ? _0 : 12;
+    // Phase 2: Get flex justification based on alignment
+    const getJustifyContent = () => {
+        switch (tabAlignment) {
+            case 'start': return 'flex-start';
+            case 'center': return 'center';
+            case 'end': return 'flex-end';
+            case 'stretch':
+            default: return 'flex-start';
+        }
+    };
+    // Variant-specific styles
+    const getTabListStyle = () => {
+        const baseStyle = {
+            backgroundColor: tabListBackgroundColor,
+            flexDirection: 'row',
+            padding: 4,
+            marginBottom: contentGap,
+            justifyContent: getJustifyContent(),
+        };
+        switch (variant) {
+            case 'underline':
+                return {
+                    ...baseStyle,
+                    backgroundColor: 'transparent',
+                    borderBottomWidth: 1,
+                    borderBottomColor: '#e5e5e5',
+                    padding: 0,
+                };
+            case 'boxed':
+                return {
+                    ...baseStyle,
+                    borderRadius: tabBorderRadius,
+                    borderWidth: 1,
+                    borderColor: '#e5e5e5',
+                    padding: 0,
+                };
+            default: // pills
+                return {
+                    ...baseStyle,
+                    borderRadius: tabListBorderRadius,
+                };
+        }
+    };
+    const getTabButtonStyle = (isActive, isDisabled) => {
+        // Phase 2: Determine width based on sizing mode
+        let widthStyle = {};
+        if (tabSizing === 'equal' && tabAlignment === 'stretch') {
+            widthStyle = { flex: 1 };
+        }
+        else if (tabSizing === 'fixed' && fixedTabWidth) {
+            widthStyle = { width: fixedTabWidth };
+        }
+        // Phase 2: Determine background color
+        const bgColor = isDisabled
+            ? disabledTabFill
+            : (isActive ? activeTabColor : inactiveTabColor);
+        const baseStyle = {
+            ...widthStyle,
+            paddingVertical: tabPaddingY,
+            paddingHorizontal: tabPaddingX,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginHorizontal: tabGap / 2,
+            opacity: isDisabled ? 0.5 : 1,
+        };
+        switch (variant) {
+            case 'underline':
+                return {
+                    ...baseStyle,
+                    marginHorizontal: 0,
+                    borderBottomWidth: isActive ? 2 : 0,
+                    borderBottomColor: isActive ? activeTextColor : 'transparent',
+                };
+            case 'boxed':
+                return {
+                    ...baseStyle,
+                    marginHorizontal: 0,
+                    backgroundColor: bgColor,
+                };
+            default: // pills
+                return {
+                    ...baseStyle,
+                    backgroundColor: bgColor,
+                    borderRadius: tabBorderRadius,
+                };
+        }
+    };
+    const getTabTextStyle = (isActive, isDisabled) => {
+        const textColor = isDisabled
+            ? disabledTextColor
+            : (isActive ? activeTextColor : inactiveTextColor);
+        return {
+            fontSize: tabFontSize,
+            fontWeight: isActive ? tabFontWeight : '500',
+            color: textColor,
+        };
+    };
+    // Phase 2: Render tab content with icon
+    const renderTabContent = (index, isActive, isDisabled) => {
+        const label = getTabLabel(index);
+        const icon = getTabIcon(index);
+        const textStyle = getTabTextStyle(isActive, isDisabled);
+        if (!icon || tabIconPosition === 'only') {
+            if (icon && tabIconPosition === 'only') {
+                return <react_native_1.Text style={[textStyle, { fontSize: tabFontSize + 4 }]}>{icon}</react_native_1.Text>;
+            }
+            return <react_native_1.Text style={textStyle}>{label}</react_native_1.Text>;
+        }
+        const iconElement = <react_native_1.Text style={[textStyle, { fontSize: tabFontSize + 2, marginHorizontal: 4 }]}>{icon}</react_native_1.Text>;
+        const labelElement = <react_native_1.Text style={textStyle}>{label}</react_native_1.Text>;
+        switch (tabIconPosition) {
+            case 'right':
+                return (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {labelElement}
+            {iconElement}
+          </react_native_1.View>);
+            case 'top':
+                return (<react_native_1.View style={{ alignItems: 'center' }}>
+            {iconElement}
+            {labelElement}
+          </react_native_1.View>);
+            case 'left':
+            default:
+                return (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {iconElement}
+            {labelElement}
+          </react_native_1.View>);
+        }
+    };
+    // Render tab list
+    const renderTabList = () => {
+        const actualTabCount = tabChildren.length || tabCount;
+        const tabButtons = Array.from({ length: actualTabCount }, (_, index) => {
+            const isActive = index === currentIndex;
+            const disabled = isTabDisabled(index);
+            return (<react_1.default.Fragment key={index}>
+          <react_native_1.TouchableOpacity style={getTabButtonStyle(isActive, disabled)} onPress={() => selectTab(index)} activeOpacity={disabled ? 1 : 0.7} disabled={disabled}>
+            {renderTabContent(index, isActive, disabled)}
+          </react_native_1.TouchableOpacity>
+          {variant === 'boxed' && index < actualTabCount - 1 && (<react_native_1.View style={styles.boxedDivider}/>)}
+        </react_1.default.Fragment>);
+        });
+        const tabListStyle = getTabListStyle();
+        // Phase 2: Handle overflow behavior
+        if (overflowBehavior === 'scroll') {
+            return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={tabListStyle}>
+          {tabButtons}
+        </react_native_1.ScrollView>);
+        }
+        return (<react_native_1.View style={tabListStyle}>
+        {tabButtons}
+      </react_native_1.View>);
+    };
+    // Render content panel - no fallback to first panel
+    const renderContentPanel = () => {
+        const panel = contentPanels[currentIndex];
+        if (!panel) {
+            // Empty placeholder matching web style
+            return (<react_native_1.View style={styles.emptyPlaceholder}>
+          <react_native_1.Text style={styles.emptyPlaceholderText}>
+            No content panel for Tab {currentIndex + 1}
+          </react_native_1.Text>
+        </react_native_1.View>);
+        }
+        return (<react_native_1.View style={styles.contentPanel}>
+        {renderChild(panel, currentIndex)}
+      </react_native_1.View>);
+    };
+    if (!((_1 = component.children) === null || _1 === void 0 ? void 0 : _1.length)) {
+        return (<react_native_1.View style={styles.emptyContainer}>
+        <react_native_1.Text style={styles.emptyText}>Add tabs to the component</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.View style={styles.container}>
+      {renderTabList()}
+      {renderContentPanel()}
+    </react_native_1.View>);
+};
+exports.TabsComponent = TabsComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentPanel: {
+        flex: 1,
+    },
+    boxedDivider: {
+        width: 1,
+        backgroundColor: '#e5e5e5',
+    },
+    emptyContainer: {
+        padding: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        color: '#999',
+        fontSize: 14,
+    },
+    emptyPlaceholder: {
+        minHeight: 100,
+        backgroundColor: 'rgba(128, 128, 128, 0.1)',
+        borderRadius: 8,
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyPlaceholderText: {
+        color: 'rgba(128, 128, 128, 0.6)',
+        fontSize: 14,
+    },
+});

package/dist/components/TextInputComponent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TextInputComponent - React Native
+ *
+ * Form field for text/email/password input with validation.
+ * Features:
+ * - Multiple field types (text, email, password, phone, number)
+ * - Real-time validation
+ * - State manager integration for form data collection
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface TextInputComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const TextInputComponent: React.FC<TextInputComponentProps>;
+export {};

package/dist/components/TextInputComponent.js

@@ -0,0 +1,227 @@
+"use strict";
+/**
+ * TextInputComponent - React Native
+ *
+ * Form field for text/email/password input with validation.
+ * Features:
+ * - Multiple field types (text, email, password, phone, number)
+ * - Real-time validation
+ * - State manager integration for form data collection
+ */
+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.TextInputComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Validation patterns
+const VALIDATION_PATTERNS = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    phone: /^[\d\s\-+()]{7,20}$/,
+    url: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
+};
+const TextInputComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a;
+    const props = component.properties;
+    const componentId = component.id;
+    // Extract props
+    const fieldType = props.fieldType || 'text';
+    const placeholder = props.placeholder || 'Enter text...';
+    const label = props.label;
+    const helperText = props.helperText;
+    const defaultValue = props.defaultValue || '';
+    const required = props.required || false;
+    const minLength = props.minLength || 0;
+    const maxLength = props.maxLength || 255;
+    const fontSize = props.fontSize || 16;
+    const textColor = props.textColor || '#000000';
+    const placeholderColor = props.placeholderColor || '#9CA3AF';
+    const labelColor = props.labelColor || '#374151';
+    const errorColor = props.errorColor || '#EF4444';
+    const backgroundColor = ((_a = props.backgroundColor) === null || _a === void 0 ? void 0 : _a.color) || '#FFFFFF';
+    const borderColor = props.borderColor || '#D1D5DB';
+    const focusBorderColor = props.focusBorderColor || '#3B82F6';
+    const errorBorderColor = props.errorBorderColor || '#EF4444';
+    const borderRadius = props.borderRadius || 8;
+    const borderWidth = props.borderWidth || 1;
+    const inputHeight = props.inputHeight || 48;
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [errors, setErrors] = (0, react_1.useState)([]);
+    const [touched, setTouched] = (0, react_1.useState)(false);
+    // Validate value
+    const validate = (0, react_1.useCallback)((val) => {
+        const validationErrors = [];
+        if (required && !val.trim()) {
+            validationErrors.push('This field is required');
+        }
+        if (val.length > 0 && minLength > 0 && val.length < minLength) {
+            validationErrors.push(`Must be at least ${minLength} characters`);
+        }
+        if (val.length > maxLength) {
+            validationErrors.push(`Must be less than ${maxLength} characters`);
+        }
+        if (fieldType === 'email' && val && !VALIDATION_PATTERNS.email.test(val)) {
+            validationErrors.push('Please enter a valid email address');
+        }
+        if (fieldType === 'phone' && val && !VALIDATION_PATTERNS.phone.test(val)) {
+            validationErrors.push('Please enter a valid phone number');
+        }
+        return validationErrors;
+    }, [required, minLength, maxLength, fieldType]);
+    // Update state manager when value changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            const validationErrors = validate(value);
+            const isValid = validationErrors.length === 0;
+            stateManager.updateState(`element:${componentId}.value`, value);
+            stateManager.updateState(`element:${componentId}.isValid`, isValid);
+            stateManager.updateState(`element:${componentId}.fieldData`, {
+                fieldId: componentId,
+                fieldType,
+                value,
+                isValid,
+                validationErrors,
+            });
+        }
+    }, [value, componentId, fieldType, stateManager, validate]);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${componentId}.value`, (newValue) => {
+                if (newValue !== value) {
+                    setValue(newValue);
+                }
+            });
+        }
+    }, [componentId, stateManager, value]);
+    // Handle input change
+    const handleChange = (0, react_1.useCallback)((text) => {
+        setValue(text);
+        if (touched) {
+            setErrors(validate(text));
+        }
+    }, [touched, validate]);
+    // Handle blur
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setIsFocused(false);
+        setTouched(true);
+        setErrors(validate(value));
+    }, [value, validate]);
+    // Determine keyboard type
+    const keyboardType = (0, react_1.useMemo)(() => {
+        switch (fieldType) {
+            case 'email': return 'email-address';
+            case 'phone': return 'phone-pad';
+            case 'number': return 'numeric';
+            default: return 'default';
+        }
+    }, [fieldType]);
+    // Current border color
+    const currentBorderColor = errors.length > 0 && touched
+        ? errorBorderColor
+        : isFocused
+            ? focusBorderColor
+            : borderColor;
+    const hasError = errors.length > 0 && touched;
+    return (<react_native_1.View style={styles.container}>
+      {/* Label */}
+      {label && (<react_native_1.Text style={[styles.label, { fontSize: fontSize - 2, color: labelColor }]}>
+          {label}
+          {required && <react_native_1.Text style={{ color: errorColor }}> *</react_native_1.Text>}
+        </react_native_1.Text>)}
+      
+      {/* Input Container */}
+      <react_native_1.View style={styles.inputContainer}>
+        <react_native_1.TextInput value={value} onChangeText={handleChange} onFocus={() => setIsFocused(true)} onBlur={handleBlur} placeholder={placeholder} placeholderTextColor={placeholderColor} maxLength={maxLength} keyboardType={keyboardType} secureTextEntry={fieldType === 'password' && !showPassword} autoCapitalize={fieldType === 'email' ? 'none' : 'sentences'} autoCorrect={fieldType !== 'email' && fieldType !== 'password'} style={[
+            styles.input,
+            {
+                height: inputHeight,
+                fontSize,
+                color: textColor,
+                backgroundColor,
+                borderColor: currentBorderColor,
+                borderRadius,
+                borderWidth,
+                paddingRight: fieldType === 'password' ? 48 : 16,
+            },
+        ]}/>
+        
+        {/* Password Toggle */}
+        {fieldType === 'password' && (<react_native_1.TouchableOpacity style={styles.passwordToggle} onPress={() => setShowPassword(!showPassword)}>
+            <react_native_1.Text style={{ color: placeholderColor, fontSize: 12 }}>
+              {showPassword ? 'HIDE' : 'SHOW'}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>)}
+      </react_native_1.View>
+      
+      {/* Helper Text / Error */}
+      {(helperText || hasError) && (<react_native_1.Text style={[
+                styles.helperText,
+                {
+                    fontSize: fontSize - 4,
+                    color: hasError ? errorColor : placeholderColor,
+                },
+            ]}>
+          {hasError ? errors[0] : helperText}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+};
+exports.TextInputComponent = TextInputComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    label: {
+        fontWeight: '500',
+        marginBottom: 6,
+    },
+    inputContainer: {
+        position: 'relative',
+    },
+    input: {
+        paddingHorizontal: 16,
+    },
+    passwordToggle: {
+        position: 'absolute',
+        right: 16,
+        top: 0,
+        bottom: 0,
+        justifyContent: 'center',
+    },
+    helperText: {
+        marginTop: 4,
+    },
+});