formio-react-native 1.0.3 → 1.0.5

package/lib/commonjs/components/FormioField.js

@@ -1,2 +1,2 @@
-import React from'react';import{View,Text,StyleSheet}from'react-native';import{useTheme}from'../hooks/useTheme';import{useI18n}from'../i18n/I18nContext';import{useFormioContext}from'../context/FormioContext';import{createRegistryWithComponents}from'../registry';import{DEFAULT_RENDERERS,FallbackRenderer}from'../components/renderers';let Picker=null;try{Picker=require('@react-native-picker/picker').Picker;}catch(e){Picker=null;}const getOptions=component=>{const ds=component.data;if(!ds)return[];if(ds.values)return ds.values;if(ds.json&&Array.isArray(ds.json))return ds.json;return[];};export const FormioField=({component,value,onChange,error})=>{const{type,key,label,placeholder,required,disabled}=component;const{createStyles,getColor,getComponent}=useTheme();const{translate,isRTL}=useI18n();const formioContext=useFormioContext();const translatedLabel=translate(label||'',label);const translatedPlaceholder=translate(placeholder||'',placeholder);const translatedError=translate(error||'',error);const themedStyles=createStyles(theme=>({fieldContainer:{marginBottom:getComponent('container.marginBottom',16)},label:{fontSize:getComponent('label.fontSize',16),fontWeight:getComponent('label.fontWeight','500'),marginBottom:getComponent('label.marginBottom',8),color:getComponent('label.color')||getColor('text','#333'),textAlign:isRTL?'right':'left'},input:{borderWidth:getComponent('input.borderWidth',1),borderColor:error?getColor('error','#e74c3c'):getColor('border','#ddd'),borderRadius:getComponent('input.borderRadius',8),padding:getComponent('input.padding',12),fontSize:getComponent('input.fontSize',16),minHeight:getComponent('input.minHeight',44),backgroundColor:disabled?getColor('disabled','#f0f0f0'):getColor('background','#fff'),textAlign:isRTL?'right':'left',writingDirection:isRTL?'rtl':'ltr'},errorText:{color:getColor('error','#e74c3c'),fontSize:getComponent('error.fontSize',14),marginTop:getComponent('error.marginTop',4)}}));const registry=React.useMemo(()=>{const reg=createRegistryWithComponents(DEFAULT_RENDERERS);const overrides=formioContext==null?void 0:formioContext.componentOverrides;if(overrides){Object.entries(overrides).forEach(([t,override])=>{if(override&&typeof override==='function'){reg.register(t,props=>{return override(props.component,{value:props.value,onChange:props.onChange,error:props.error,disabled:props.disabled,readOnly:props.readOnly,formData:props.formData,validationErrors:props.validationErrors});});}});}return reg;},[formioContext==null?void 0:formioContext.componentOverrides]);const renderField=()=>{const renderer=registry.get(type);if(renderer){return React.createElement(React.Fragment,null,renderer({component,value,onChange:val=>onChange(key,val),error:translatedError,disabled,readOnly:!!component.readOnly}));}return React.createElement(FallbackRenderer,{component:component,value:value,onChange:v=>onChange(key,v),error:translatedError,disabled:disabled});};if(component.input===false)return null;if(type==='checkbox'){return renderField();}return React.createElement(View,{style:themedStyles.fieldContainer},translatedLabel&&React.createElement(Text,{style:themedStyles.label},translatedLabel,required&&React.createElement(Text,{style:[styles.required,{color:getColor('error')}]}," *")),renderField(),component.description?React.createElement(Text,{style:[styles.description,{color:getColor('textSecondary'),textAlign:isRTL?'right':'left'}]},translate(component.description,component.description)):null,translatedError&&React.createElement(Text,{style:themedStyles.errorText},translatedError));};const styles=StyleSheet.create({fieldContainer:{marginBottom:16},label:{fontSize:16,fontWeight:'500',marginBottom:8,color:'#333'},required:{color:'#e74c3c'},input:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,fontSize:16,backgroundColor:'#fff'},disabled:{backgroundColor:'#f0f0f0',color:'#999'},textarea:{height:100,textAlignVertical:'top'},selectPlaceholder:{padding:12,fontSize:16,color:'#999',fontStyle:'italic'},inputError:{borderColor:'#e74c3c'},description:{color:'#666',fontSize:13,marginTop:4},errorText:{color:'#e74c3c',fontSize:14,marginTop:4},pickerWrapper:{borderWidth:1,borderColor:'#ddd',borderRadius:8,overflow:'hidden',backgroundColor:'#fff'},radioGroup:{gap:8},radioItem:{fontSize:16,paddingVertical:6},switchRow:{flexDirection:'row',alignItems:'center',gap:8},switchLabel:{fontSize:16}});
+import React from'react';import{View,Text,StyleSheet}from'react-native';import{useTheme}from'../hooks/useTheme';import{useI18n}from'../i18n/I18nContext';import{useFormioContext}from'../context/FormioContext';import{createRegistryWithComponents}from'../registry';import{DEFAULT_RENDERERS,FallbackRenderer}from'../components/renderers';import{getFlexDirection}from'../utils/rtlUtils';let Picker=null;try{Picker=require('@react-native-picker/picker').Picker;}catch(e){Picker=null;}const getOptions=component=>{const ds=component.data;if(!ds)return[];if(ds.values)return ds.values;if(ds.json&&Array.isArray(ds.json))return ds.json;return[];};export const FormioField=({component,value,onChange,error})=>{const{type,key,label,placeholder,required,disabled}=component;const{createStyles,getColor,getComponent}=useTheme();const{translate,isRTL}=useI18n();const formioContext=useFormioContext();const translatedLabel=translate(label||'',label);const translatedPlaceholder=translate(placeholder||'',placeholder);const translatedError=translate(error||'',error);const themedStyles=createStyles(theme=>({fieldContainer:{marginBottom:getComponent('container.marginBottom',16)},label:{fontSize:getComponent('label.fontSize',16),fontWeight:getComponent('label.fontWeight','500'),marginBottom:getComponent('label.marginBottom',8),color:getComponent('label.color')||getColor('text','#333'),textAlign:isRTL?'right':'left'},input:{borderWidth:getComponent('input.borderWidth',1),borderColor:error?getColor('error','#e74c3c'):getColor('border','#ddd'),borderRadius:getComponent('input.borderRadius',8),padding:getComponent('input.padding',12),fontSize:getComponent('input.fontSize',16),minHeight:getComponent('input.minHeight',44),backgroundColor:disabled?getColor('disabled','#f0f0f0'):getColor('background','#fff'),textAlign:isRTL?'right':'left',writingDirection:isRTL?'rtl':'ltr'},errorText:{color:getColor('error','#e74c3c'),fontSize:getComponent('error.fontSize',14),marginTop:getComponent('error.marginTop',4)}}));const registry=React.useMemo(()=>{const reg=createRegistryWithComponents(DEFAULT_RENDERERS);const overrides=formioContext==null?void 0:formioContext.componentOverrides;if(overrides){Object.entries(overrides).forEach(([t,override])=>{if(override&&typeof override==='function'){reg.register(t,props=>{return override(props.component,{value:props.value,onChange:props.onChange,error:props.error,disabled:props.disabled,readOnly:props.readOnly,formData:props.formData,validationErrors:props.validationErrors});});}});}return reg;},[formioContext==null?void 0:formioContext.componentOverrides]);const renderField=()=>{const renderer=registry.get(type);if(renderer){return React.createElement(React.Fragment,null,renderer({component,value,onChange:val=>onChange(key,val),error:translatedError,disabled,readOnly:!!component.readOnly}));}return React.createElement(FallbackRenderer,{component:component,value:value,onChange:v=>onChange(key,v),error:translatedError,disabled:disabled});};if(component.input===false)return null;if(type==='checkbox'){return renderField();}return React.createElement(View,{style:[themedStyles.fieldContainer,{flexDirection:getFlexDirection(isRTL)}]},translatedLabel&&React.createElement(Text,{style:themedStyles.label},translatedLabel,required&&React.createElement(Text,{style:[styles.required,{color:getColor('error')}]}," *")),renderField(),component.description?React.createElement(Text,{style:[styles.description,{color:getColor('textSecondary'),textAlign:isRTL?'right':'left'}]},translate(component.description,component.description)):null,translatedError&&React.createElement(Text,{style:themedStyles.errorText},translatedError));};const styles=StyleSheet.create({fieldContainer:{marginBottom:16},label:{fontSize:16,fontWeight:'500',marginBottom:8,color:'#333'},required:{color:'#e74c3c'},input:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,fontSize:16,backgroundColor:'#fff'},disabled:{backgroundColor:'#f0f0f0',color:'#999'},textarea:{height:100,textAlignVertical:'top'},selectPlaceholder:{padding:12,fontSize:16,color:'#999',fontStyle:'italic'},inputError:{borderColor:'#e74c3c'},description:{color:'#666',fontSize:13,marginTop:4},errorText:{color:'#e74c3c',fontSize:14,marginTop:4},pickerWrapper:{borderWidth:1,borderColor:'#ddd',borderRadius:8,overflow:'hidden',backgroundColor:'#fff'},radioGroup:{gap:8},radioItem:{fontSize:16,paddingVertical:6},switchRow:{flexDirection:'row',alignItems:'center',gap:8},switchLabel:{fontSize:16}});
 //# sourceMappingURL=FormioField.js.map

package/lib/commonjs/components/renderers/CheckboxRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{Switch,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getCheckboxAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},checkboxContainer:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.sm},label:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,marginLeft:SPACING.sm,flex:1},labelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});const CheckboxRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{const{label}=component;const{isRTL}=useI18n();const isChecked=Boolean(value);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.checkboxContainer,{flexDirection:getFlexDirection(isRTL)}]},React.createElement(View,getCheckboxAriaAttributes(label||'',isChecked,disabled||readOnly),React.createElement(Switch,{value:isChecked,onValueChange:onChange,disabled:disabled||readOnly,trackColor:{false:COLORS.border,true:COLORS.primary},thumbColor:isChecked?COLORS.primary:COLORS.disabled})),label&&React.createElement(Text,{style:[styles.label,(disabled||readOnly)&&styles.labelDisabled,{textAlign:getTextAlign(isRTL)}]},label)),error&&React.createElement(Text,{style:[styles.errorText,{textAlign:getTextAlign(isRTL)}]},error));};export const CheckboxRenderer=React.memo(CheckboxRendererComponent);
+import React from'react';import{Switch,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getCheckboxAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},checkboxContainer:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.sm},label:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,marginLeft:SPACING.sm,flex:1},labelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});const CheckboxRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{const{label}=component;const{isRTL,translate}=useI18n();const isChecked=Boolean(value);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.checkboxContainer,{flexDirection:getFlexDirection(isRTL)}]},React.createElement(View,getCheckboxAriaAttributes(translate(label||''),isChecked,disabled||readOnly),React.createElement(Switch,{value:isChecked,onValueChange:onChange,disabled:disabled||readOnly,trackColor:{false:COLORS.border,true:COLORS.primary},thumbColor:isChecked?COLORS.primary:COLORS.disabled})),label&&React.createElement(Text,{style:[styles.label,(disabled||readOnly)&&styles.labelDisabled,{textAlign:getTextAlign(isRTL)}]},label)),error&&React.createElement(Text,{style:[styles.errorText,{textAlign:getTextAlign(isRTL)}]},error));};export const CheckboxRenderer=React.memo(CheckboxRendererComponent);
 //# sourceMappingURL=CheckboxRenderer.js.map

package/lib/commonjs/components/renderers/EmailRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const EmailRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter email address',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"email-address",autoCapitalize:"none",autoCorrect:false,autoComplete:"email"}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const EmailRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter email address'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"email-address",autoCapitalize:"none",autoCorrect:false,autoComplete:"email"}));};
 //# sourceMappingURL=EmailRenderer.js.map

package/lib/commonjs/components/renderers/NumberRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const NumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,min,max}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const handleChange=text=>{if(text===''){onChange(null);return;}const numValue=parseFloat(text);if(!isNaN(numValue)){let constrainedValue=numValue;if(min!==undefined&&constrainedValue<min){constrainedValue=min;}if(max!==undefined&&constrainedValue>max){constrainedValue=max;}onChange(constrainedValue);}};return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter a number',placeholderTextColor:COLORS.placeholder,value:value!==null&&value!==undefined?String(value):'',onChangeText:handleChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"decimal-pad"}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const NumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,min,max}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const handleChange=text=>{if(text===''){onChange(null);return;}const numValue=parseFloat(text);if(!isNaN(numValue)){let constrainedValue=numValue;if(min!==undefined&&constrainedValue<min){constrainedValue=min;}if(max!==undefined&&constrainedValue>max){constrainedValue=max;}onChange(constrainedValue);}};return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter a number'),placeholderTextColor:COLORS.placeholder,value:value!==null&&value!==undefined?String(value):'',onChangeText:handleChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"decimal-pad"}));};
 //# sourceMappingURL=NumberRenderer.js.map

package/lib/commonjs/components/renderers/PasswordRenderer.js

@@ -1,2 +1,2 @@
-import React,{useState}from'react';import{TextInput,StyleSheet,View,Text,TouchableOpacity}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},inputWrapper:{flexDirection:'row',alignItems:'center',borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,backgroundColor:COLORS.background},inputWrapperFocused:{borderColor:COLORS.primary},inputWrapperError:{borderColor:COLORS.error},inputWrapperDisabled:{backgroundColor:COLORS.disabled},input:{flex:1,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},toggleButton:{padding:SPACING.xs,marginLeft:SPACING.xs},toggleText:{fontSize:18,color:COLORS.primary}});export const PasswordRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=useState({isFocused:false,showPassword:false});const{placeholder}=component;const inputWrapperStyle=[styles.inputWrapper,state.isFocused&&styles.inputWrapperFocused,error&&styles.inputWrapperError,disabled&&styles.inputWrapperDisabled];return React.createElement(View,{style:styles.container},React.createElement(View,{style:inputWrapperStyle},React.createElement(TextInput,{style:styles.input,placeholder:placeholder||'Enter password',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState(prev=>({...prev,isFocused:true})),onBlur:()=>setState(prev=>({...prev,isFocused:false})),secureTextEntry:!state.showPassword,autoCapitalize:"none",autoCorrect:false}),React.createElement(TouchableOpacity,{style:styles.toggleButton,onPress:()=>setState(prev=>({...prev,showPassword:!prev.showPassword})),disabled:disabled||readOnly},React.createElement(Text,{style:styles.toggleText},state.showPassword?'🐵':'🙈'))));};
+import React,{useState}from'react';import{TextInput,StyleSheet,View,Text,TouchableOpacity}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},inputWrapper:{flexDirection:'row',alignItems:'center',borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,backgroundColor:COLORS.background},inputWrapperFocused:{borderColor:COLORS.primary},inputWrapperError:{borderColor:COLORS.error},inputWrapperDisabled:{backgroundColor:COLORS.disabled},input:{flex:1,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},toggleButton:{padding:SPACING.xs,marginLeft:SPACING.xs},toggleText:{fontSize:18,color:COLORS.primary}});export const PasswordRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=useState({isFocused:false,showPassword:false});const{placeholder}=component;const{translate}=useI18n();const inputWrapperStyle=[styles.inputWrapper,state.isFocused&&styles.inputWrapperFocused,error&&styles.inputWrapperError,disabled&&styles.inputWrapperDisabled];return React.createElement(View,{style:styles.container},React.createElement(View,{style:inputWrapperStyle},React.createElement(TextInput,{style:styles.input,placeholder:translate(placeholder)||translate('Enter password'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState(prev=>({...prev,isFocused:true})),onBlur:()=>setState(prev=>({...prev,isFocused:false})),secureTextEntry:!state.showPassword,autoCapitalize:"none",autoCorrect:false}),React.createElement(TouchableOpacity,{style:styles.toggleButton,onPress:()=>setState(prev=>({...prev,showPassword:!prev.showPassword})),disabled:disabled||readOnly},React.createElement(Text,{style:styles.toggleText},state.showPassword?'🐵':'🙈'))));};
 //# sourceMappingURL=PasswordRenderer.js.map

package/lib/commonjs/components/renderers/PhoneNumberRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const PhoneNumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter phone number',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"phone-pad",autoCapitalize:"none",autoCorrect:false}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const PhoneNumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter phone number'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"phone-pad",autoCapitalize:"none",autoCorrect:false}));};
 //# sourceMappingURL=PhoneNumberRenderer.js.map

package/lib/commonjs/components/renderers/RadioRenderer.js

@@ -1,2 +1,2 @@
-import _extends from"@babel/runtime/helpers/esm/extends";import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getRadioAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},radioGroup:{gap:SPACING.sm},radioItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},radioButton:{width:20,height:20,borderRadius:10,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},radioButtonSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},radioButtonDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},radioInner:{width:8,height:8,borderRadius:4,backgroundColor:COLORS.background},radioLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},radioLabelDisabled:{color:COLORS.disabled}});const RadioRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{isRTL}=useI18n();const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.radioGroup,{flexDirection:getFlexDirection(isRTL)}]},options.map((option,index)=>React.createElement(TouchableOpacity,_extends({key:String(option.value),style:styles.radioItem,onPress:()=>!disabled&&!readOnly&&onChange(option.value),disabled:disabled||readOnly},getRadioAriaAttributes(option.label,value===option.value,disabled||readOnly)),React.createElement(View,{style:[styles.radioButton,value===option.value&&styles.radioButtonSelected,(disabled||readOnly)&&styles.radioButtonDisabled]},value===option.value&&React.createElement(View,{style:styles.radioInner})),React.createElement(Text,{style:[styles.radioLabel,(disabled||readOnly)&&styles.radioLabelDisabled,{textAlign:getTextAlign(isRTL)}]},option.label)))));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}export const RadioRenderer=React.memo(RadioRendererComponent);
+import _extends from"@babel/runtime/helpers/esm/extends";import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getRadioAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},radioGroup:{gap:SPACING.sm},radioItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},radioButton:{width:20,height:20,borderRadius:10,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},radioButtonSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},radioButtonDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},radioInner:{width:8,height:8,borderRadius:4,backgroundColor:COLORS.background},radioLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},radioLabelDisabled:{color:COLORS.disabled}});const RadioRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{isRTL,translate}=useI18n();const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.radioGroup,{flexDirection:getFlexDirection(isRTL)}]},options.map((option,index)=>React.createElement(TouchableOpacity,_extends({key:String(option.value),style:styles.radioItem,onPress:()=>!disabled&&!readOnly&&onChange(option.value),disabled:disabled||readOnly},getRadioAriaAttributes(option.label,value===option.value,disabled||readOnly)),React.createElement(View,{style:[styles.radioButton,value===option.value&&styles.radioButtonSelected,(disabled||readOnly)&&styles.radioButtonDisabled]},value===option.value&&React.createElement(View,{style:styles.radioInner})),React.createElement(Text,{style:[styles.radioLabel,(disabled||readOnly)&&styles.radioLabelDisabled,{textAlign:getTextAlign(isRTL)}]},translate(option.label))))));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}export const RadioRenderer=React.memo(RadioRendererComponent);
 //# sourceMappingURL=RadioRenderer.js.map

package/lib/commonjs/components/renderers/SelectRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{StyleSheet,View,Text,TouchableOpacity,Modal,FlatList}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},selectButton:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,minHeight:40,justifyContent:'center'},selectButtonFocused:{borderColor:COLORS.primary},selectButtonError:{borderColor:COLORS.error},selectButtonDisabled:{backgroundColor:COLORS.disabled},selectText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},selectTextPlaceholder:{color:COLORS.placeholder},selectTextDisabled:{color:COLORS.disabled},modalOverlay:{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',justifyContent:'flex-end'},modalContent:{backgroundColor:COLORS.background,borderTopLeftRadius:12,borderTopRightRadius:12,maxHeight:'80%'},modalHeader:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},modalTitle:{fontSize:TYPOGRAPHY.fontSize.lg,fontWeight:TYPOGRAPHY.fontWeight.bold,color:COLORS.text},closeButton:{padding:SPACING.sm},closeButtonText:{fontSize:TYPOGRAPHY.fontSize.lg,color:COLORS.primary,fontWeight:TYPOGRAPHY.fontWeight.bold},optionItem:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border},optionItemSelected:{backgroundColor:COLORS.primaryLight},optionText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},optionTextSelected:{fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.primary},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});export const SelectRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const[state,setState]=React.useState({isOpen:false,isFocused:false,options:parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[])});const{label,placeholder}=component;const selectedOption=state.options.find(opt=>opt.value===value);const displayText=(selectedOption==null?void 0:selectedOption.label)||placeholder||'Select an option';const selectButtonStyle=[styles.selectButton,state.isFocused&&styles.selectButtonFocused,error&&styles.selectButtonError,(disabled||readOnly)&&styles.selectButtonDisabled];const selectTextStyle=[styles.selectText,!selectedOption&&styles.selectTextPlaceholder,(disabled||readOnly)&&styles.selectTextDisabled];const handleSelect=selectedValue=>{onChange(selectedValue);setState(prev=>({...prev,isOpen:false}));};const handleOpenClose=()=>{if(!disabled&&!readOnly){setState(prev=>({...prev,isOpen:!prev.isOpen,isFocused:!prev.isOpen}));}};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(TouchableOpacity,{style:selectButtonStyle,onPress:handleOpenClose,disabled:disabled||readOnly},React.createElement(Text,{style:selectTextStyle},displayText)),React.createElement(Modal,{visible:state.isOpen&&!disabled&&!readOnly,transparent:true,animationType:"slide"},React.createElement(View,{style:styles.modalOverlay},React.createElement(View,{style:styles.modalContent},React.createElement(View,{style:styles.modalHeader},React.createElement(Text,{style:styles.modalTitle},label||'Select'),React.createElement(TouchableOpacity,{style:styles.closeButton,onPress:handleOpenClose},React.createElement(Text,{style:styles.closeButtonText},"Done"))),React.createElement(FlatList,{data:state.options,keyExtractor:(item,idx)=>String(idx),renderItem:({item})=>React.createElement(TouchableOpacity,{style:[styles.optionItem,item.value===value&&styles.optionItemSelected],onPress:()=>handleSelect(item.value)},React.createElement(Text,{style:[styles.optionText,item.value===value&&styles.optionTextSelected]},item.label))})))),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
+import React from'react';import{StyleSheet,View,Text,TouchableOpacity,Modal,FlatList}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},selectButton:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,minHeight:40,justifyContent:'center'},selectButtonFocused:{borderColor:COLORS.primary},selectButtonError:{borderColor:COLORS.error},selectButtonDisabled:{backgroundColor:COLORS.disabled},selectText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},selectTextPlaceholder:{color:COLORS.placeholder},selectTextDisabled:{color:COLORS.disabled},modalOverlay:{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',justifyContent:'flex-end'},modalContent:{backgroundColor:COLORS.background,borderTopLeftRadius:12,borderTopRightRadius:12,maxHeight:'80%'},modalHeader:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},modalTitle:{fontSize:TYPOGRAPHY.fontSize.lg,fontWeight:TYPOGRAPHY.fontWeight.bold,color:COLORS.text},closeButton:{padding:SPACING.sm},closeButtonText:{fontSize:TYPOGRAPHY.fontSize.lg,color:COLORS.primary,fontWeight:TYPOGRAPHY.fontWeight.bold},optionItem:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border},optionItemSelected:{backgroundColor:COLORS.primaryLight},optionText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},optionTextSelected:{fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.primary},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});export const SelectRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const[state,setState]=React.useState({isOpen:false,isFocused:false,options:parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[])});const{translate}=useI18n();const{label,placeholder}=component;const selectedOption=state.options.find(opt=>opt.value===value);const displayText=(selectedOption==null?void 0:selectedOption.label)||translate(placeholder)||translate('Select an option');const selectButtonStyle=[styles.selectButton,state.isFocused&&styles.selectButtonFocused,error&&styles.selectButtonError,(disabled||readOnly)&&styles.selectButtonDisabled];const selectTextStyle=[styles.selectText,!selectedOption&&styles.selectTextPlaceholder,(disabled||readOnly)&&styles.selectTextDisabled];const handleSelect=selectedValue=>{onChange(selectedValue);setState(prev=>({...prev,isOpen:false}));};const handleOpenClose=()=>{if(!disabled&&!readOnly){setState(prev=>({...prev,isOpen:!prev.isOpen,isFocused:!prev.isOpen}));}};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},translate(label)),React.createElement(TouchableOpacity,{style:selectButtonStyle,onPress:handleOpenClose,disabled:disabled||readOnly},React.createElement(Text,{style:selectTextStyle},displayText)),React.createElement(Modal,{visible:state.isOpen&&!disabled&&!readOnly,transparent:true,animationType:"slide"},React.createElement(View,{style:styles.modalOverlay},React.createElement(View,{style:styles.modalContent},React.createElement(View,{style:styles.modalHeader},React.createElement(Text,{style:styles.modalTitle},label||'Select'),React.createElement(TouchableOpacity,{style:styles.closeButton,onPress:handleOpenClose},React.createElement(Text,{style:styles.closeButtonText},"Done"))),React.createElement(FlatList,{data:state.options,keyExtractor:(item,idx)=>String(idx),renderItem:({item})=>React.createElement(TouchableOpacity,{style:[styles.optionItem,item.value===value&&styles.optionItemSelected],onPress:()=>handleSelect(item.value)},React.createElement(Text,{style:[styles.optionText,item.value===value&&styles.optionTextSelected]},item.label))})))),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
 //# sourceMappingURL=SelectRenderer.js.map

package/lib/commonjs/components/renderers/SelectboxesRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.sm},checkboxGroup:{gap:SPACING.sm},checkboxItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},checkbox:{width:20,height:20,borderRadius:3,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},checkboxSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},checkboxDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},checkmark:{fontSize:14,color:COLORS.background,fontWeight:'bold'},checkboxLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},checkboxLabelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.sm}});export const SelectboxesRenderer=({component,value={},onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{label}=component;const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);const selectedValues=value||{};const handleToggle=optionValue=>{if(disabled||readOnly)return;const newValue={...selectedValues,[String(optionValue)]:!selectedValues[String(optionValue)]};onChange(newValue);};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(View,{style:styles.checkboxGroup},options.map(option=>{const isSelected=selectedValues[String(option.value)];return React.createElement(TouchableOpacity,{key:String(option.value),style:styles.checkboxItem,onPress:()=>handleToggle(option.value),disabled:disabled||readOnly},React.createElement(View,{style:[styles.checkbox,isSelected&&styles.checkboxSelected,(disabled||readOnly)&&styles.checkboxDisabled]},isSelected&&React.createElement(Text,{style:styles.checkmark},"\u2713")),React.createElement(Text,{style:[styles.checkboxLabel,(disabled||readOnly)&&styles.checkboxLabelDisabled]},option.label));})),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
+import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.sm},checkboxGroup:{gap:SPACING.sm},checkboxItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},checkbox:{width:20,height:20,borderRadius:3,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},checkboxSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},checkboxDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},checkmark:{fontSize:14,color:COLORS.background,fontWeight:'bold'},checkboxLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},checkboxLabelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.sm}});export const SelectboxesRenderer=({component,value={},onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{label}=component;const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);const selectedValues=value||{};const handleToggle=optionValue=>{if(disabled||readOnly)return;const newValue={...selectedValues,[String(optionValue)]:!selectedValues[String(optionValue)]};onChange(newValue);};const{translate}=useI18n();return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},translate(label)),React.createElement(View,{style:styles.checkboxGroup},options.map(option=>{const isSelected=selectedValues[String(option.value)];return React.createElement(TouchableOpacity,{key:String(option.value),style:styles.checkboxItem,onPress:()=>handleToggle(option.value),disabled:disabled||readOnly},React.createElement(View,{style:[styles.checkbox,isSelected&&styles.checkboxSelected,(disabled||readOnly)&&styles.checkboxDisabled]},isSelected&&React.createElement(Text,{style:styles.checkmark},"\u2713")),React.createElement(Text,{style:[styles.checkboxLabel,(disabled||readOnly)&&styles.checkboxLabelDisabled]},option.label));})),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
 //# sourceMappingURL=SelectboxesRenderer.js.map

package/lib/commonjs/components/renderers/TextAreaRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:100,textAlignVertical:'top'},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs},charCount:{fontSize:TYPOGRAPHY.fontSize.xs,color:COLORS.textSecondary,marginTop:SPACING.xs}});export const TextAreaRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder,maxLength}=component;const currentLength=String(value||'').length;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(TextInput,{style:inputStyle,placeholder:placeholder,placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),multiline:true,numberOfLines:4,maxLength:maxLength}),maxLength&&React.createElement(Text,{style:styles.charCount},currentLength," / ",maxLength),error&&React.createElement(Text,{style:styles.errorText},error));};
+import React from'react';import{TextInput,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:100,textAlignVertical:'top'},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs},charCount:{fontSize:TYPOGRAPHY.fontSize.xs,color:COLORS.textSecondary,marginTop:SPACING.xs}});export const TextAreaRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,maxLength}=component;const currentLength=String(value||'').length;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),multiline:true,numberOfLines:4,maxLength:maxLength}),maxLength&&React.createElement(Text,{style:styles.charCount},currentLength," / ",maxLength),error&&React.createElement(Text,{style:styles.errorText},error));};
 //# sourceMappingURL=TextAreaRenderer.js.map

package/lib/commonjs/components/renderers/TextfieldRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const TextfieldRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,type='text'}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder,placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:getKeyboardType(type),secureTextEntry:type==='password',autoCapitalize:getAutoCapitalize(type),autoCorrect:type!=='email'&&type!=='url'}));};function getKeyboardType(type){const keyboardMap={email:'email-address',url:'url',number:'numeric',tel:'phone-pad',text:'default'};return keyboardMap[type]||'default';}function getAutoCapitalize(type){const capitalizeMap={email:'none',url:'none',text:'sentences'};return capitalizeMap[type]||'none';}
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const TextfieldRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,type='text'}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:getKeyboardType(type),secureTextEntry:type==='password',autoCapitalize:getAutoCapitalize(type),autoCorrect:type!=='email'&&type!=='url'}));};function getKeyboardType(type){const keyboardMap={email:'email-address',url:'url',number:'numeric',tel:'phone-pad',text:'default'};return keyboardMap[type]||'default';}function getAutoCapitalize(type){const capitalizeMap={email:'none',url:'none',text:'sentences'};return capitalizeMap[type]||'none';}
 //# sourceMappingURL=TextfieldRenderer.js.map

package/lib/commonjs/components/renderers/URLRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const URLRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter URL',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"default",autoCapitalize:"none",autoCorrect:false}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const URLRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const{translate}=useI18n();return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder||'Enter URL'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"default",autoCapitalize:"none",autoCorrect:false}));};
 //# sourceMappingURL=URLRenderer.js.map

package/lib/module/components/FormioField.js

@@ -1,2 +1,2 @@
-import React from'react';import{View,Text,StyleSheet}from'react-native';import{useTheme}from'../hooks/useTheme';import{useI18n}from'../i18n/I18nContext';import{useFormioContext}from'../context/FormioContext';import{createRegistryWithComponents}from'../registry';import{DEFAULT_RENDERERS,FallbackRenderer}from'../components/renderers';let Picker=null;try{Picker=require('@react-native-picker/picker').Picker;}catch(e){Picker=null;}const getOptions=component=>{const ds=component.data;if(!ds)return[];if(ds.values)return ds.values;if(ds.json&&Array.isArray(ds.json))return ds.json;return[];};export const FormioField=({component,value,onChange,error})=>{const{type,key,label,placeholder,required,disabled}=component;const{createStyles,getColor,getComponent}=useTheme();const{translate,isRTL}=useI18n();const formioContext=useFormioContext();const translatedLabel=translate(label||'',label);const translatedPlaceholder=translate(placeholder||'',placeholder);const translatedError=translate(error||'',error);const themedStyles=createStyles(theme=>({fieldContainer:{marginBottom:getComponent('container.marginBottom',16)},label:{fontSize:getComponent('label.fontSize',16),fontWeight:getComponent('label.fontWeight','500'),marginBottom:getComponent('label.marginBottom',8),color:getComponent('label.color')||getColor('text','#333'),textAlign:isRTL?'right':'left'},input:{borderWidth:getComponent('input.borderWidth',1),borderColor:error?getColor('error','#e74c3c'):getColor('border','#ddd'),borderRadius:getComponent('input.borderRadius',8),padding:getComponent('input.padding',12),fontSize:getComponent('input.fontSize',16),minHeight:getComponent('input.minHeight',44),backgroundColor:disabled?getColor('disabled','#f0f0f0'):getColor('background','#fff'),textAlign:isRTL?'right':'left',writingDirection:isRTL?'rtl':'ltr'},errorText:{color:getColor('error','#e74c3c'),fontSize:getComponent('error.fontSize',14),marginTop:getComponent('error.marginTop',4)}}));const registry=React.useMemo(()=>{const reg=createRegistryWithComponents(DEFAULT_RENDERERS);const overrides=formioContext==null?void 0:formioContext.componentOverrides;if(overrides){Object.entries(overrides).forEach(([t,override])=>{if(override&&typeof override==='function'){reg.register(t,props=>{return override(props.component,{value:props.value,onChange:props.onChange,error:props.error,disabled:props.disabled,readOnly:props.readOnly,formData:props.formData,validationErrors:props.validationErrors});});}});}return reg;},[formioContext==null?void 0:formioContext.componentOverrides]);const renderField=()=>{const renderer=registry.get(type);if(renderer){return React.createElement(React.Fragment,null,renderer({component,value,onChange:val=>onChange(key,val),error:translatedError,disabled,readOnly:!!component.readOnly}));}return React.createElement(FallbackRenderer,{component:component,value:value,onChange:v=>onChange(key,v),error:translatedError,disabled:disabled});};if(component.input===false)return null;if(type==='checkbox'){return renderField();}return React.createElement(View,{style:themedStyles.fieldContainer},translatedLabel&&React.createElement(Text,{style:themedStyles.label},translatedLabel,required&&React.createElement(Text,{style:[styles.required,{color:getColor('error')}]}," *")),renderField(),component.description?React.createElement(Text,{style:[styles.description,{color:getColor('textSecondary'),textAlign:isRTL?'right':'left'}]},translate(component.description,component.description)):null,translatedError&&React.createElement(Text,{style:themedStyles.errorText},translatedError));};const styles=StyleSheet.create({fieldContainer:{marginBottom:16},label:{fontSize:16,fontWeight:'500',marginBottom:8,color:'#333'},required:{color:'#e74c3c'},input:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,fontSize:16,backgroundColor:'#fff'},disabled:{backgroundColor:'#f0f0f0',color:'#999'},textarea:{height:100,textAlignVertical:'top'},selectPlaceholder:{padding:12,fontSize:16,color:'#999',fontStyle:'italic'},inputError:{borderColor:'#e74c3c'},description:{color:'#666',fontSize:13,marginTop:4},errorText:{color:'#e74c3c',fontSize:14,marginTop:4},pickerWrapper:{borderWidth:1,borderColor:'#ddd',borderRadius:8,overflow:'hidden',backgroundColor:'#fff'},radioGroup:{gap:8},radioItem:{fontSize:16,paddingVertical:6},switchRow:{flexDirection:'row',alignItems:'center',gap:8},switchLabel:{fontSize:16}});
+import React from'react';import{View,Text,StyleSheet}from'react-native';import{useTheme}from'../hooks/useTheme';import{useI18n}from'../i18n/I18nContext';import{useFormioContext}from'../context/FormioContext';import{createRegistryWithComponents}from'../registry';import{DEFAULT_RENDERERS,FallbackRenderer}from'../components/renderers';import{getFlexDirection}from'../utils/rtlUtils';let Picker=null;try{Picker=require('@react-native-picker/picker').Picker;}catch(e){Picker=null;}const getOptions=component=>{const ds=component.data;if(!ds)return[];if(ds.values)return ds.values;if(ds.json&&Array.isArray(ds.json))return ds.json;return[];};export const FormioField=({component,value,onChange,error})=>{const{type,key,label,placeholder,required,disabled}=component;const{createStyles,getColor,getComponent}=useTheme();const{translate,isRTL}=useI18n();const formioContext=useFormioContext();const translatedLabel=translate(label||'',label);const translatedPlaceholder=translate(placeholder||'',placeholder);const translatedError=translate(error||'',error);const themedStyles=createStyles(theme=>({fieldContainer:{marginBottom:getComponent('container.marginBottom',16)},label:{fontSize:getComponent('label.fontSize',16),fontWeight:getComponent('label.fontWeight','500'),marginBottom:getComponent('label.marginBottom',8),color:getComponent('label.color')||getColor('text','#333'),textAlign:isRTL?'right':'left'},input:{borderWidth:getComponent('input.borderWidth',1),borderColor:error?getColor('error','#e74c3c'):getColor('border','#ddd'),borderRadius:getComponent('input.borderRadius',8),padding:getComponent('input.padding',12),fontSize:getComponent('input.fontSize',16),minHeight:getComponent('input.minHeight',44),backgroundColor:disabled?getColor('disabled','#f0f0f0'):getColor('background','#fff'),textAlign:isRTL?'right':'left',writingDirection:isRTL?'rtl':'ltr'},errorText:{color:getColor('error','#e74c3c'),fontSize:getComponent('error.fontSize',14),marginTop:getComponent('error.marginTop',4)}}));const registry=React.useMemo(()=>{const reg=createRegistryWithComponents(DEFAULT_RENDERERS);const overrides=formioContext==null?void 0:formioContext.componentOverrides;if(overrides){Object.entries(overrides).forEach(([t,override])=>{if(override&&typeof override==='function'){reg.register(t,props=>{return override(props.component,{value:props.value,onChange:props.onChange,error:props.error,disabled:props.disabled,readOnly:props.readOnly,formData:props.formData,validationErrors:props.validationErrors});});}});}return reg;},[formioContext==null?void 0:formioContext.componentOverrides]);const renderField=()=>{const renderer=registry.get(type);if(renderer){return React.createElement(React.Fragment,null,renderer({component,value,onChange:val=>onChange(key,val),error:translatedError,disabled,readOnly:!!component.readOnly}));}return React.createElement(FallbackRenderer,{component:component,value:value,onChange:v=>onChange(key,v),error:translatedError,disabled:disabled});};if(component.input===false)return null;if(type==='checkbox'){return renderField();}return React.createElement(View,{style:[themedStyles.fieldContainer,{flexDirection:getFlexDirection(isRTL)}]},translatedLabel&&React.createElement(Text,{style:themedStyles.label},translatedLabel,required&&React.createElement(Text,{style:[styles.required,{color:getColor('error')}]}," *")),renderField(),component.description?React.createElement(Text,{style:[styles.description,{color:getColor('textSecondary'),textAlign:isRTL?'right':'left'}]},translate(component.description,component.description)):null,translatedError&&React.createElement(Text,{style:themedStyles.errorText},translatedError));};const styles=StyleSheet.create({fieldContainer:{marginBottom:16},label:{fontSize:16,fontWeight:'500',marginBottom:8,color:'#333'},required:{color:'#e74c3c'},input:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,fontSize:16,backgroundColor:'#fff'},disabled:{backgroundColor:'#f0f0f0',color:'#999'},textarea:{height:100,textAlignVertical:'top'},selectPlaceholder:{padding:12,fontSize:16,color:'#999',fontStyle:'italic'},inputError:{borderColor:'#e74c3c'},description:{color:'#666',fontSize:13,marginTop:4},errorText:{color:'#e74c3c',fontSize:14,marginTop:4},pickerWrapper:{borderWidth:1,borderColor:'#ddd',borderRadius:8,overflow:'hidden',backgroundColor:'#fff'},radioGroup:{gap:8},radioItem:{fontSize:16,paddingVertical:6},switchRow:{flexDirection:'row',alignItems:'center',gap:8},switchLabel:{fontSize:16}});
 //# sourceMappingURL=FormioField.js.map

package/lib/module/components/renderers/CheckboxRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{Switch,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getCheckboxAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},checkboxContainer:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.sm},label:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,marginLeft:SPACING.sm,flex:1},labelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});const CheckboxRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{const{label}=component;const{isRTL}=useI18n();const isChecked=Boolean(value);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.checkboxContainer,{flexDirection:getFlexDirection(isRTL)}]},React.createElement(View,getCheckboxAriaAttributes(label||'',isChecked,disabled||readOnly),React.createElement(Switch,{value:isChecked,onValueChange:onChange,disabled:disabled||readOnly,trackColor:{false:COLORS.border,true:COLORS.primary},thumbColor:isChecked?COLORS.primary:COLORS.disabled})),label&&React.createElement(Text,{style:[styles.label,(disabled||readOnly)&&styles.labelDisabled,{textAlign:getTextAlign(isRTL)}]},label)),error&&React.createElement(Text,{style:[styles.errorText,{textAlign:getTextAlign(isRTL)}]},error));};export const CheckboxRenderer=React.memo(CheckboxRendererComponent);
+import React from'react';import{Switch,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getCheckboxAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},checkboxContainer:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.sm},label:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,marginLeft:SPACING.sm,flex:1},labelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});const CheckboxRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{const{label}=component;const{isRTL,translate}=useI18n();const isChecked=Boolean(value);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.checkboxContainer,{flexDirection:getFlexDirection(isRTL)}]},React.createElement(View,getCheckboxAriaAttributes(translate(label||''),isChecked,disabled||readOnly),React.createElement(Switch,{value:isChecked,onValueChange:onChange,disabled:disabled||readOnly,trackColor:{false:COLORS.border,true:COLORS.primary},thumbColor:isChecked?COLORS.primary:COLORS.disabled})),label&&React.createElement(Text,{style:[styles.label,(disabled||readOnly)&&styles.labelDisabled,{textAlign:getTextAlign(isRTL)}]},label)),error&&React.createElement(Text,{style:[styles.errorText,{textAlign:getTextAlign(isRTL)}]},error));};export const CheckboxRenderer=React.memo(CheckboxRendererComponent);
 //# sourceMappingURL=CheckboxRenderer.js.map

package/lib/module/components/renderers/EmailRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const EmailRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter email address',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"email-address",autoCapitalize:"none",autoCorrect:false,autoComplete:"email"}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const EmailRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter email address'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"email-address",autoCapitalize:"none",autoCorrect:false,autoComplete:"email"}));};
 //# sourceMappingURL=EmailRenderer.js.map

package/lib/module/components/renderers/NumberRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const NumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,min,max}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const handleChange=text=>{if(text===''){onChange(null);return;}const numValue=parseFloat(text);if(!isNaN(numValue)){let constrainedValue=numValue;if(min!==undefined&&constrainedValue<min){constrainedValue=min;}if(max!==undefined&&constrainedValue>max){constrainedValue=max;}onChange(constrainedValue);}};return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter a number',placeholderTextColor:COLORS.placeholder,value:value!==null&&value!==undefined?String(value):'',onChangeText:handleChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"decimal-pad"}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const NumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,min,max}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const handleChange=text=>{if(text===''){onChange(null);return;}const numValue=parseFloat(text);if(!isNaN(numValue)){let constrainedValue=numValue;if(min!==undefined&&constrainedValue<min){constrainedValue=min;}if(max!==undefined&&constrainedValue>max){constrainedValue=max;}onChange(constrainedValue);}};return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter a number'),placeholderTextColor:COLORS.placeholder,value:value!==null&&value!==undefined?String(value):'',onChangeText:handleChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"decimal-pad"}));};
 //# sourceMappingURL=NumberRenderer.js.map

package/lib/module/components/renderers/PasswordRenderer.js

@@ -1,2 +1,2 @@
-import React,{useState}from'react';import{TextInput,StyleSheet,View,Text,TouchableOpacity}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},inputWrapper:{flexDirection:'row',alignItems:'center',borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,backgroundColor:COLORS.background},inputWrapperFocused:{borderColor:COLORS.primary},inputWrapperError:{borderColor:COLORS.error},inputWrapperDisabled:{backgroundColor:COLORS.disabled},input:{flex:1,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},toggleButton:{padding:SPACING.xs,marginLeft:SPACING.xs},toggleText:{fontSize:18,color:COLORS.primary}});export const PasswordRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=useState({isFocused:false,showPassword:false});const{placeholder}=component;const inputWrapperStyle=[styles.inputWrapper,state.isFocused&&styles.inputWrapperFocused,error&&styles.inputWrapperError,disabled&&styles.inputWrapperDisabled];return React.createElement(View,{style:styles.container},React.createElement(View,{style:inputWrapperStyle},React.createElement(TextInput,{style:styles.input,placeholder:placeholder||'Enter password',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState(prev=>({...prev,isFocused:true})),onBlur:()=>setState(prev=>({...prev,isFocused:false})),secureTextEntry:!state.showPassword,autoCapitalize:"none",autoCorrect:false}),React.createElement(TouchableOpacity,{style:styles.toggleButton,onPress:()=>setState(prev=>({...prev,showPassword:!prev.showPassword})),disabled:disabled||readOnly},React.createElement(Text,{style:styles.toggleText},state.showPassword?'🐵':'🙈'))));};
+import React,{useState}from'react';import{TextInput,StyleSheet,View,Text,TouchableOpacity}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},inputWrapper:{flexDirection:'row',alignItems:'center',borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,backgroundColor:COLORS.background},inputWrapperFocused:{borderColor:COLORS.primary},inputWrapperError:{borderColor:COLORS.error},inputWrapperDisabled:{backgroundColor:COLORS.disabled},input:{flex:1,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},toggleButton:{padding:SPACING.xs,marginLeft:SPACING.xs},toggleText:{fontSize:18,color:COLORS.primary}});export const PasswordRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=useState({isFocused:false,showPassword:false});const{placeholder}=component;const{translate}=useI18n();const inputWrapperStyle=[styles.inputWrapper,state.isFocused&&styles.inputWrapperFocused,error&&styles.inputWrapperError,disabled&&styles.inputWrapperDisabled];return React.createElement(View,{style:styles.container},React.createElement(View,{style:inputWrapperStyle},React.createElement(TextInput,{style:styles.input,placeholder:translate(placeholder)||translate('Enter password'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState(prev=>({...prev,isFocused:true})),onBlur:()=>setState(prev=>({...prev,isFocused:false})),secureTextEntry:!state.showPassword,autoCapitalize:"none",autoCorrect:false}),React.createElement(TouchableOpacity,{style:styles.toggleButton,onPress:()=>setState(prev=>({...prev,showPassword:!prev.showPassword})),disabled:disabled||readOnly},React.createElement(Text,{style:styles.toggleText},state.showPassword?'🐵':'🙈'))));};
 //# sourceMappingURL=PasswordRenderer.js.map

package/lib/module/components/renderers/PhoneNumberRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const PhoneNumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter phone number',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"phone-pad",autoCapitalize:"none",autoCorrect:false}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const PhoneNumberRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder)||translate('Enter phone number'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"phone-pad",autoCapitalize:"none",autoCorrect:false}));};
 //# sourceMappingURL=PhoneNumberRenderer.js.map

package/lib/module/components/renderers/RadioRenderer.js

@@ -1,2 +1,2 @@
-import _extends from"@babel/runtime/helpers/esm/extends";import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getRadioAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},radioGroup:{gap:SPACING.sm},radioItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},radioButton:{width:20,height:20,borderRadius:10,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},radioButtonSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},radioButtonDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},radioInner:{width:8,height:8,borderRadius:4,backgroundColor:COLORS.background},radioLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},radioLabelDisabled:{color:COLORS.disabled}});const RadioRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{isRTL}=useI18n();const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.radioGroup,{flexDirection:getFlexDirection(isRTL)}]},options.map((option,index)=>React.createElement(TouchableOpacity,_extends({key:String(option.value),style:styles.radioItem,onPress:()=>!disabled&&!readOnly&&onChange(option.value),disabled:disabled||readOnly},getRadioAriaAttributes(option.label,value===option.value,disabled||readOnly)),React.createElement(View,{style:[styles.radioButton,value===option.value&&styles.radioButtonSelected,(disabled||readOnly)&&styles.radioButtonDisabled]},value===option.value&&React.createElement(View,{style:styles.radioInner})),React.createElement(Text,{style:[styles.radioLabel,(disabled||readOnly)&&styles.radioLabelDisabled,{textAlign:getTextAlign(isRTL)}]},option.label)))));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}export const RadioRenderer=React.memo(RadioRendererComponent);
+import _extends from"@babel/runtime/helpers/esm/extends";import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';import{getTextAlign,getFlexDirection}from'../../utils/rtlUtils';import{getRadioAriaAttributes}from'../../utils/a11yUtils';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},radioGroup:{gap:SPACING.sm},radioItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},radioButton:{width:20,height:20,borderRadius:10,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},radioButtonSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},radioButtonDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},radioInner:{width:8,height:8,borderRadius:4,backgroundColor:COLORS.background},radioLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},radioLabelDisabled:{color:COLORS.disabled}});const RadioRendererComponent=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{isRTL,translate}=useI18n();const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);return React.createElement(View,{style:styles.container},React.createElement(View,{style:[styles.radioGroup,{flexDirection:getFlexDirection(isRTL)}]},options.map((option,index)=>React.createElement(TouchableOpacity,_extends({key:String(option.value),style:styles.radioItem,onPress:()=>!disabled&&!readOnly&&onChange(option.value),disabled:disabled||readOnly},getRadioAriaAttributes(option.label,value===option.value,disabled||readOnly)),React.createElement(View,{style:[styles.radioButton,value===option.value&&styles.radioButtonSelected,(disabled||readOnly)&&styles.radioButtonDisabled]},value===option.value&&React.createElement(View,{style:styles.radioInner})),React.createElement(Text,{style:[styles.radioLabel,(disabled||readOnly)&&styles.radioLabelDisabled,{textAlign:getTextAlign(isRTL)}]},translate(option.label))))));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}export const RadioRenderer=React.memo(RadioRendererComponent);
 //# sourceMappingURL=RadioRenderer.js.map

package/lib/module/components/renderers/SelectRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{StyleSheet,View,Text,TouchableOpacity,Modal,FlatList}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},selectButton:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,minHeight:40,justifyContent:'center'},selectButtonFocused:{borderColor:COLORS.primary},selectButtonError:{borderColor:COLORS.error},selectButtonDisabled:{backgroundColor:COLORS.disabled},selectText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},selectTextPlaceholder:{color:COLORS.placeholder},selectTextDisabled:{color:COLORS.disabled},modalOverlay:{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',justifyContent:'flex-end'},modalContent:{backgroundColor:COLORS.background,borderTopLeftRadius:12,borderTopRightRadius:12,maxHeight:'80%'},modalHeader:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},modalTitle:{fontSize:TYPOGRAPHY.fontSize.lg,fontWeight:TYPOGRAPHY.fontWeight.bold,color:COLORS.text},closeButton:{padding:SPACING.sm},closeButtonText:{fontSize:TYPOGRAPHY.fontSize.lg,color:COLORS.primary,fontWeight:TYPOGRAPHY.fontWeight.bold},optionItem:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border},optionItemSelected:{backgroundColor:COLORS.primaryLight},optionText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},optionTextSelected:{fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.primary},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});export const SelectRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const[state,setState]=React.useState({isOpen:false,isFocused:false,options:parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[])});const{label,placeholder}=component;const selectedOption=state.options.find(opt=>opt.value===value);const displayText=(selectedOption==null?void 0:selectedOption.label)||placeholder||'Select an option';const selectButtonStyle=[styles.selectButton,state.isFocused&&styles.selectButtonFocused,error&&styles.selectButtonError,(disabled||readOnly)&&styles.selectButtonDisabled];const selectTextStyle=[styles.selectText,!selectedOption&&styles.selectTextPlaceholder,(disabled||readOnly)&&styles.selectTextDisabled];const handleSelect=selectedValue=>{onChange(selectedValue);setState(prev=>({...prev,isOpen:false}));};const handleOpenClose=()=>{if(!disabled&&!readOnly){setState(prev=>({...prev,isOpen:!prev.isOpen,isFocused:!prev.isOpen}));}};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(TouchableOpacity,{style:selectButtonStyle,onPress:handleOpenClose,disabled:disabled||readOnly},React.createElement(Text,{style:selectTextStyle},displayText)),React.createElement(Modal,{visible:state.isOpen&&!disabled&&!readOnly,transparent:true,animationType:"slide"},React.createElement(View,{style:styles.modalOverlay},React.createElement(View,{style:styles.modalContent},React.createElement(View,{style:styles.modalHeader},React.createElement(Text,{style:styles.modalTitle},label||'Select'),React.createElement(TouchableOpacity,{style:styles.closeButton,onPress:handleOpenClose},React.createElement(Text,{style:styles.closeButtonText},"Done"))),React.createElement(FlatList,{data:state.options,keyExtractor:(item,idx)=>String(idx),renderItem:({item})=>React.createElement(TouchableOpacity,{style:[styles.optionItem,item.value===value&&styles.optionItemSelected],onPress:()=>handleSelect(item.value)},React.createElement(Text,{style:[styles.optionText,item.value===value&&styles.optionTextSelected]},item.label))})))),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
+import React from'react';import{StyleSheet,View,Text,TouchableOpacity,Modal,FlatList}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},selectButton:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,minHeight:40,justifyContent:'center'},selectButtonFocused:{borderColor:COLORS.primary},selectButtonError:{borderColor:COLORS.error},selectButtonDisabled:{backgroundColor:COLORS.disabled},selectText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},selectTextPlaceholder:{color:COLORS.placeholder},selectTextDisabled:{color:COLORS.disabled},modalOverlay:{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',justifyContent:'flex-end'},modalContent:{backgroundColor:COLORS.background,borderTopLeftRadius:12,borderTopRightRadius:12,maxHeight:'80%'},modalHeader:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},modalTitle:{fontSize:TYPOGRAPHY.fontSize.lg,fontWeight:TYPOGRAPHY.fontWeight.bold,color:COLORS.text},closeButton:{padding:SPACING.sm},closeButtonText:{fontSize:TYPOGRAPHY.fontSize.lg,color:COLORS.primary,fontWeight:TYPOGRAPHY.fontWeight.bold},optionItem:{paddingHorizontal:SPACING.md,paddingVertical:SPACING.md,borderBottomWidth:1,borderBottomColor:COLORS.border},optionItemSelected:{backgroundColor:COLORS.primaryLight},optionText:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text},optionTextSelected:{fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.primary},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs}});export const SelectRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{var _component$data;const[state,setState]=React.useState({isOpen:false,isFocused:false,options:parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[])});const{translate}=useI18n();const{label,placeholder}=component;const selectedOption=state.options.find(opt=>opt.value===value);const displayText=(selectedOption==null?void 0:selectedOption.label)||translate(placeholder)||translate('Select an option');const selectButtonStyle=[styles.selectButton,state.isFocused&&styles.selectButtonFocused,error&&styles.selectButtonError,(disabled||readOnly)&&styles.selectButtonDisabled];const selectTextStyle=[styles.selectText,!selectedOption&&styles.selectTextPlaceholder,(disabled||readOnly)&&styles.selectTextDisabled];const handleSelect=selectedValue=>{onChange(selectedValue);setState(prev=>({...prev,isOpen:false}));};const handleOpenClose=()=>{if(!disabled&&!readOnly){setState(prev=>({...prev,isOpen:!prev.isOpen,isFocused:!prev.isOpen}));}};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},translate(label)),React.createElement(TouchableOpacity,{style:selectButtonStyle,onPress:handleOpenClose,disabled:disabled||readOnly},React.createElement(Text,{style:selectTextStyle},displayText)),React.createElement(Modal,{visible:state.isOpen&&!disabled&&!readOnly,transparent:true,animationType:"slide"},React.createElement(View,{style:styles.modalOverlay},React.createElement(View,{style:styles.modalContent},React.createElement(View,{style:styles.modalHeader},React.createElement(Text,{style:styles.modalTitle},label||'Select'),React.createElement(TouchableOpacity,{style:styles.closeButton,onPress:handleOpenClose},React.createElement(Text,{style:styles.closeButtonText},"Done"))),React.createElement(FlatList,{data:state.options,keyExtractor:(item,idx)=>String(idx),renderItem:({item})=>React.createElement(TouchableOpacity,{style:[styles.optionItem,item.value===value&&styles.optionItemSelected],onPress:()=>handleSelect(item.value)},React.createElement(Text,{style:[styles.optionText,item.value===value&&styles.optionTextSelected]},item.label))})))),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
 //# sourceMappingURL=SelectRenderer.js.map

package/lib/module/components/renderers/SelectboxesRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.sm},checkboxGroup:{gap:SPACING.sm},checkboxItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},checkbox:{width:20,height:20,borderRadius:3,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},checkboxSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},checkboxDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},checkmark:{fontSize:14,color:COLORS.background,fontWeight:'bold'},checkboxLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},checkboxLabelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.sm}});export const SelectboxesRenderer=({component,value={},onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{label}=component;const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);const selectedValues=value||{};const handleToggle=optionValue=>{if(disabled||readOnly)return;const newValue={...selectedValues,[String(optionValue)]:!selectedValues[String(optionValue)]};onChange(newValue);};return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(View,{style:styles.checkboxGroup},options.map(option=>{const isSelected=selectedValues[String(option.value)];return React.createElement(TouchableOpacity,{key:String(option.value),style:styles.checkboxItem,onPress:()=>handleToggle(option.value),disabled:disabled||readOnly},React.createElement(View,{style:[styles.checkbox,isSelected&&styles.checkboxSelected,(disabled||readOnly)&&styles.checkboxDisabled]},isSelected&&React.createElement(Text,{style:styles.checkmark},"\u2713")),React.createElement(Text,{style:[styles.checkboxLabel,(disabled||readOnly)&&styles.checkboxLabelDisabled]},option.label));})),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
+import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.sm},checkboxGroup:{gap:SPACING.sm},checkboxItem:{flexDirection:'row',alignItems:'center',paddingVertical:SPACING.xs},checkbox:{width:20,height:20,borderRadius:3,borderWidth:2,borderColor:COLORS.border,justifyContent:'center',alignItems:'center',marginRight:SPACING.sm},checkboxSelected:{borderColor:COLORS.primary,backgroundColor:COLORS.primary},checkboxDisabled:{borderColor:COLORS.disabled,backgroundColor:COLORS.disabled},checkmark:{fontSize:14,color:COLORS.background,fontWeight:'bold'},checkboxLabel:{fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,flex:1},checkboxLabelDisabled:{color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.sm}});export const SelectboxesRenderer=({component,value={},onChange,error,disabled=false,readOnly=false})=>{var _component$data;const{label}=component;const options=parseOptions(((_component$data=component.data)==null?void 0:_component$data.values)||component.values||[]);const selectedValues=value||{};const handleToggle=optionValue=>{if(disabled||readOnly)return;const newValue={...selectedValues,[String(optionValue)]:!selectedValues[String(optionValue)]};onChange(newValue);};const{translate}=useI18n();return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},translate(label)),React.createElement(View,{style:styles.checkboxGroup},options.map(option=>{const isSelected=selectedValues[String(option.value)];return React.createElement(TouchableOpacity,{key:String(option.value),style:styles.checkboxItem,onPress:()=>handleToggle(option.value),disabled:disabled||readOnly},React.createElement(View,{style:[styles.checkbox,isSelected&&styles.checkboxSelected,(disabled||readOnly)&&styles.checkboxDisabled]},isSelected&&React.createElement(Text,{style:styles.checkmark},"\u2713")),React.createElement(Text,{style:[styles.checkboxLabel,(disabled||readOnly)&&styles.checkboxLabelDisabled]},option.label));})),error&&React.createElement(Text,{style:styles.errorText},error));};function parseOptions(data){if(!Array.isArray(data)){return[];}return data.map(item=>{if(typeof item==='string'){return{label:item,value:item};}if(typeof item==='object'&&item!==null){return{label:item.label||String(item.value),value:item.value};}return{label:String(item),value:item};});}
 //# sourceMappingURL=SelectboxesRenderer.js.map

package/lib/module/components/renderers/TextAreaRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:100,textAlignVertical:'top'},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs},charCount:{fontSize:TYPOGRAPHY.fontSize.xs,color:COLORS.textSecondary,marginTop:SPACING.xs}});export const TextAreaRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder,maxLength}=component;const currentLength=String(value||'').length;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},label&&React.createElement(Text,{style:styles.label},label),React.createElement(TextInput,{style:inputStyle,placeholder:placeholder,placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),multiline:true,numberOfLines:4,maxLength:maxLength}),maxLength&&React.createElement(Text,{style:styles.charCount},currentLength," / ",maxLength),error&&React.createElement(Text,{style:styles.errorText},error));};
+import React from'react';import{TextInput,StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},label:{fontSize:TYPOGRAPHY.fontSize.sm,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.text,marginBottom:SPACING.xs},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:100,textAlignVertical:'top'},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled},errorText:{color:COLORS.error,fontSize:TYPOGRAPHY.fontSize.xs,marginTop:SPACING.xs},charCount:{fontSize:TYPOGRAPHY.fontSize.xs,color:COLORS.textSecondary,marginTop:SPACING.xs}});export const TextAreaRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,maxLength}=component;const currentLength=String(value||'').length;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),multiline:true,numberOfLines:4,maxLength:maxLength}),maxLength&&React.createElement(Text,{style:styles.charCount},currentLength," / ",maxLength),error&&React.createElement(Text,{style:styles.errorText},error));};
 //# sourceMappingURL=TextAreaRenderer.js.map

package/lib/module/components/renderers/TextfieldRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const TextfieldRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,type='text'}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder,placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:getKeyboardType(type),secureTextEntry:type==='password',autoCapitalize:getAutoCapitalize(type),autoCorrect:type!=='email'&&type!=='url'}));};function getKeyboardType(type){const keyboardMap={email:'email-address',url:'url',number:'numeric',tel:'phone-pad',text:'default'};return keyboardMap[type]||'default';}function getAutoCapitalize(type){const capitalizeMap={email:'none',url:'none',text:'sentences'};return capitalizeMap[type]||'none';}
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const TextfieldRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{placeholder,type='text'}=component;const{translate}=useI18n();const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:getKeyboardType(type),secureTextEntry:type==='password',autoCapitalize:getAutoCapitalize(type),autoCorrect:type!=='email'&&type!=='url'}));};function getKeyboardType(type){const keyboardMap={email:'email-address',url:'url',number:'numeric',tel:'phone-pad',text:'default'};return keyboardMap[type]||'default';}function getAutoCapitalize(type){const capitalizeMap={email:'none',url:'none',text:'sentences'};return capitalizeMap[type]||'none';}
 //# sourceMappingURL=TextfieldRenderer.js.map

package/lib/module/components/renderers/URLRenderer.js

@@ -1,2 +1,2 @@
-import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const URLRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:placeholder||'Enter URL',placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"default",autoCapitalize:"none",autoCorrect:false}));};
+import React from'react';import{TextInput,StyleSheet,View}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{useI18n}from'../../i18n/I18nContext';const styles=StyleSheet.create({container:{marginBottom:SPACING.md},input:{borderWidth:1,borderColor:COLORS.border,borderRadius:4,paddingHorizontal:SPACING.sm,paddingVertical:SPACING.sm,fontSize:TYPOGRAPHY.fontSize.md,color:COLORS.text,minHeight:40},inputFocused:{borderColor:COLORS.primary},inputError:{borderColor:COLORS.error},inputDisabled:{backgroundColor:COLORS.disabled,color:COLORS.disabled}});export const URLRenderer=({component,value,onChange,error,disabled=false,readOnly=false})=>{const[state,setState]=React.useState({isFocused:false});const{label,placeholder}=component;const inputStyle=[styles.input,state.isFocused&&styles.inputFocused,error&&styles.inputError,disabled&&styles.inputDisabled];const{translate}=useI18n();return React.createElement(View,{style:styles.container},React.createElement(TextInput,{style:inputStyle,placeholder:translate(placeholder||'Enter URL'),placeholderTextColor:COLORS.placeholder,value:String(value||''),onChangeText:onChange,editable:!disabled&&!readOnly,onFocus:()=>setState({isFocused:true}),onBlur:()=>setState({isFocused:false}),keyboardType:"default",autoCapitalize:"none",autoCorrect:false}));};
 //# sourceMappingURL=URLRenderer.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formio-react-native",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "React Native renderer for Form.io forms",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",