formio-react-native 1.0.0

package/README.md

@@ -0,0 +1,384 @@
+# formio-react-native
+
+React Native renderer for Form.io forms using native components with theming and customization support.
+
+## Installation
+
+```bash
+npm install formio-react-native @react-native-picker/picker
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { FormioForm } from 'formio-react-native';
+
+const formSchema = {
+  components: [
+    {
+      type: 'textfield',
+      key: 'firstName',
+      label: 'First Name',
+      placeholder: 'Enter your first name',
+      required: true,
+      input: true
+    },
+    {
+      type: 'email',
+      key: 'email',
+      label: 'Email',
+      placeholder: 'Enter your email',
+      required: true,
+      input: true
+    },
+    {
+      type: 'button',
+      key: 'submit',
+      label: 'Submit'
+    }
+  ]
+};
+
+export default function App() {
+  const handleSubmit = (data) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <FormioForm
+      form={formSchema}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+## Theming and Customization
+
+### Using FormioProvider for Global Theming
+
+```tsx
+import React from 'react';
+import { FormioProvider, FormioForm } from 'formio-react-native';
+
+const App = () => {
+  return (
+    <FormioProvider
+      theme={{
+        colors: {
+          primary: '#007AFF',
+          error: '#FF3B30',
+          border: '#C7C7CC',
+          text: '#000',
+          background: '#fff',
+        },
+        input: {
+          borderRadius: 8,
+          padding: 12,
+          fontSize: 16,
+        },
+        label: {
+          fontSize: 16,
+          fontWeight: '600',
+          marginBottom: 8,
+        },
+      }}
+    >
+      <FormioForm form={formSchema} onSubmit={handleSubmit} />
+    </FormioProvider>
+  );
+};
+```
+
+### Custom Component Overrides
+
+```tsx
+import React from 'react';
+import { FormioProvider, ComponentRenderer } from 'formio-react-native';
+import { TextInput, Text, View } from 'react-native';
+
+const CustomTextField: ComponentRenderer = (component, props) => {
+  return (
+    <View style={{ marginBottom: 16 }}>
+      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+        {component.label}
+      </Text>
+      <TextInput
+        style={{
+          borderWidth: 2,
+          borderColor: '#3498db',
+          borderRadius: 12,
+          padding: 16,
+          backgroundColor: '#ecf0f1',
+        }}
+        value={props.value || ''}
+        onChangeText={props.onChange}
+        placeholder={component.placeholder}
+      />
+      {props.error && (
+        <Text style={{ color: '#e74c3c', marginTop: 4 }}>
+          {props.error}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const App = () => {
+  return (
+    <FormioProvider
+      components={{
+        textfield: CustomTextField,
+      }}
+    >
+      <FormioForm form={formSchema} onSubmit={handleSubmit} />
+    </FormioProvider>
+  );
+};
+```
+
+### Per-Form Component Overrides
+
+```tsx
+// Override components for specific forms
+<FormioForm
+  form={formSchema}
+  components={{
+    email: CustomEmailField, // Only for this form
+  }}
+  onSubmit={handleSubmit}
+/>
+```
+
+### Dynamic Component Registration
+
+```tsx
+import { useFormioContext } from 'formio-react-native';
+
+const MyComponent = () => {
+  const { registerComponent } = useFormioContext();
+
+  useEffect(() => {
+    registerComponent('customWidget', (component, props) => (
+      <CustomWidget {...component} {...props} />
+    ));
+  }, []);
+
+  return <FormioForm form={schema} />;
+};
+```
+
+## Supported Field Types
+
+### Input Components
+- `textfield` / `text` - Text input
+- `email` - Email input with validation
+- `password` - Password input (masked) with show/hide toggle
+- `number` - Numeric input with min/max constraints
+- `textarea` - Multi-line text input
+- `url` - URL input with URL keyboard
+- `phoneNumber` - Phone number input with phone keyboard
+
+### Selection Components
+- `select` - Dropdown picker with search
+- `checkbox` - Single checkbox/toggle
+- `radio` - Radio button group
+- `selectboxes` - Multi-select checkboxes
+
+### Date/Time Components
+- `date` - Date picker (text-based, ready for native integration)
+- `datetime` - Date and time picker
+- `time` - Time picker
+
+### File Components
+- `file` - File upload with callback support
+
+### Layout Components
+- `panel` - Container panel
+- `columns` - Column layout
+- `datagrid` - Data grid with add/remove rows
+- `editgrid` - Editable grid with inline editing
+
+### Advanced Components
+- `wizard` - Multi-step wizard form
+- `button` - Submit button
+
+## API
+
+### FormioForm Props
+
+- `form` - Form.io JSON schema
+- `data` - Initial form data (optional)
+- `components` - Component overrides for this form
+- `onSubmit` - Called when form is submitted with valid data
+- `onChange` - Called when any field value changes
+- `onValidation` - Called when validation state changes
+
+### FormioProvider Props
+
+- `theme` - Global theme configuration
+- `components` - Global component overrides
+- `children` - React children
+
+### ComponentRenderer Type
+
+```tsx
+type ComponentRenderer = (
+  component: FormioComponent,
+  props: ComponentRenderProps
+) => ReactNode;
+
+interface ComponentRenderProps {
+  value: any;
+  onChange: (value: any) => void;
+  error?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  formData?: Record<string, any>;
+}
+```
+
+## Override Precedence
+
+1. **Form-level components** (via `components` prop) - Highest priority
+2. **Context components** (via `FormioProvider`) - Medium priority
+3. **Built-in components** - Lowest priority (fallback)
+
+This allows you to set global defaults while still overriding specific forms when needed.
+
+## Internationalization (i18n)
+
+The library includes built-in support for multiple languages with automatic RTL detection.
+
+### Supported Languages
+
+- **English** (en) - Default
+- **Arabic** (ar) - RTL
+- **French** (fr)
+
+### Basic Usage
+
+```tsx
+import { FormioProvider, FormioForm } from 'formio-react-native';
+
+const App = () => {
+  return (
+    <FormioProvider
+      i18n={{
+        language: 'ar', // Set to Arabic
+        translations: {
+          // Use default translations or provide custom ones
+        },
+      }}
+    >
+      <FormioForm form={formSchema} onSubmit={handleSubmit} />
+    </FormioProvider>
+  );
+};
+```
+
+### Custom Translations
+
+```tsx
+const customTranslations = {
+  en: {
+    'validation.REQUIRED': 'This field is mandatory',
+    'Submit': 'Send Form',
+    'First Name': 'Given Name',
+  },
+  ar: {
+    'validation.REQUIRED': 'هذا الحقل إلزامي',
+    'Submit': 'إرسال النموذج',
+    'First Name': 'الاسم الأول',
+  },
+};
+
+<FormioProvider
+  i18n={{
+    language: 'ar',
+    translations: customTranslations,
+  }}
+>
+  <FormioForm form={formSchema} onSubmit={handleSubmit} />
+</FormioProvider>
+```
+
+### Language Switching
+
+```tsx
+import { useI18n } from 'formio-react-native';
+
+const LanguageSwitcher = () => {
+  const { language, setLanguage } = useI18n();
+
+  return (
+    <View>
+      <TouchableOpacity onPress={() => setLanguage('en')}>
+        <Text>English</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => setLanguage('ar')}>
+        <Text>العربية</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => setLanguage('fr')}>
+        <Text>Français</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+```
+
+### RTL Support
+
+RTL (Right-to-Left) is automatically enabled for Arabic and Hebrew. The library handles:
+
+- Text direction
+- Component alignment
+- Icon positioning
+- Margin/padding reversal
+
+```tsx
+import { useI18n } from 'formio-react-native';
+
+const MyComponent = () => {
+  const { isRTL } = useI18n();
+
+  return (
+    <View style={{ flexDirection: isRTL ? 'row-reverse' : 'row' }}>
+      {/* Your content */}
+    </View>
+  );
+};
+```
+
+### Translation Keys
+
+#### Validation Messages
+- `validation.REQUIRED` - Field is required
+- `validation.MIN_LENGTH` - Minimum length validation
+- `validation.MAX_LENGTH` - Maximum length validation
+- `validation.PATTERN` - Pattern validation
+- `validation.MIN_VALUE` - Minimum value validation
+- `validation.MAX_VALUE` - Maximum value validation
+- `validation.INVALID_EMAIL` - Email validation
+- `validation.INVALID_URL` - URL validation
+- `validation.INVALID_PHONE` - Phone validation
+- `validation.INVALID_DATE` - Date validation
+- `validation.FILE_TYPE_INVALID` - File type validation
+- `validation.FILE_SIZE_TOO_LARGE` - File size validation
+- `validation.CUSTOM_ERROR` - Custom validation error
+
+#### Common UI Strings
+- `Submit` - Submit button
+- `Previous` - Previous button
+- `Next` - Next button
+- `Finish` - Finish button
+- `Loading...` - Loading indicator
+- `Search...` - Search placeholder
+- `No options available` - Empty options message
+- `Select...` - Select placeholder
+- `No wizard pages found` - Wizard error message
+
+#### Component Labels
+- `First Name`, `Last Name`, `Email`, `Phone`, `Address`, `City`, `State`, `Zip Code`, `Country`
+- `Message`, `Comments`, `Agree`, `Yes`, `No`, `OK`, `Cancel`, `Delete`, `Edit`, `Add`, `Remove`, `Save`, `Close`, `Done`

package/lib/commonjs/components/CheckboxField.js

@@ -0,0 +1,2 @@
+import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{useI18n}from'../i18n/I18nContext';export const CheckboxField=({label,value,onChange,required,error})=>{const{translate,isRTL}=useI18n();return React.createElement(View,{style:styles.container},React.createElement(TouchableOpacity,{style:styles.checkboxContainer,onPress:()=>onChange(!value)},React.createElement(View,{style:[styles.checkbox,value&&styles.checkboxChecked]},value&&React.createElement(Text,{style:styles.checkmark},"\u2713")),React.createElement(Text,{style:[styles.label,{textAlign:isRTL?'right':'left'}]},translate(label,label),required&&React.createElement(Text,{style:styles.required}," *"))),error&&React.createElement(Text,{style:[styles.errorText,{textAlign:isRTL?'right':'left'}]},translate(error,error)));};const styles=StyleSheet.create({container:{marginBottom:16},checkboxContainer:{flexDirection:'row',alignItems:'center'},checkbox:{width:20,height:20,borderWidth:2,borderColor:'#ddd',borderRadius:4,marginRight:12,alignItems:'center',justifyContent:'center',backgroundColor:'#fff'},checkboxChecked:{backgroundColor:'#007bff',borderColor:'#007bff'},checkmark:{color:'#fff',fontSize:14,fontWeight:'bold'},label:{fontSize:16,color:'#333',flex:1},required:{color:'#e74c3c'},errorText:{color:'#e74c3c',fontSize:14,marginTop:4,marginLeft:32}});
+//# sourceMappingURL=CheckboxField.js.map

package/lib/commonjs/components/DataGrid.js

@@ -0,0 +1,2 @@
+import React from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{FormioField}from'./FormioField';export const DataGrid=({component,value=[],disabled,readOnly,error,onChange})=>{const addRow=()=>{const row={};component.components.forEach(c=>{var _c$defaultValue;if(c.key)row[c.key]=(_c$defaultValue=c.defaultValue)!=null?_c$defaultValue:undefined;});onChange([...value,row]);};const removeRow=index=>{const next=value.filter((_,i)=>i!==index);onChange(next);};const updateCell=(rowIndex,key,cellValue)=>{const next=value.map((row,i)=>i===rowIndex?{...row,[key]:cellValue}:row);onChange(next);};return React.createElement(View,null,value.map((row,rIdx)=>React.createElement(View,{key:rIdx,style:styles.row},component.components.map(col=>React.createElement(View,{key:col.key,style:styles.cell},React.createElement(FormioField,{component:col,value:row[col.key],onChange:(k,v)=>updateCell(rIdx,col.key,v),error:undefined}))),!disabled&&!readOnly&&React.createElement(TouchableOpacity,{style:styles.removeBtn,onPress:()=>removeRow(rIdx)},React.createElement(Text,{style:styles.removeText},"Remove")))),!disabled&&!readOnly&&React.createElement(TouchableOpacity,{style:styles.addBtn,onPress:addRow},React.createElement(Text,{style:styles.addText},"Add Row")),error?React.createElement(Text,{style:styles.errorText},error):null);};const styles=StyleSheet.create({row:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:8,marginBottom:8,backgroundColor:'#fff'},cell:{marginBottom:8},removeBtn:{alignSelf:'flex-end'},removeText:{color:'#e74c3c'},addBtn:{backgroundColor:'#007bff',padding:10,borderRadius:8,alignItems:'center'},addText:{color:'#fff',fontSize:14},errorText:{color:'#e74c3c',fontSize:14,marginTop:4}});
+//# sourceMappingURL=DataGrid.js.map

package/lib/commonjs/components/DatePicker.js

@@ -0,0 +1,2 @@
+import React,{useState}from'react';import{View,Text,TouchableOpacity,StyleSheet,Modal,ScrollView}from'react-native';import{useI18n}from'../i18n/I18nContext';export const DatePicker=({component,value,disabled,readOnly,error,onChange})=>{const[opened,setOpened]=useState(false);const[inputValue,setInputValue]=useState(value||'');const{translate}=useI18n();const handleConfirm=()=>{onChange(inputValue||null);setOpened(false);};const handleCancel=()=>{setInputValue(value||'');setOpened(false);};const getPlaceholder=()=>{switch(component.type){case'time':return'HH:mm';case'datetime':return'yyyy-MM-dd HH:mm';case'date':default:return'yyyy-MM-dd';}};return React.createElement(View,null,React.createElement(TouchableOpacity,{style:[styles.input,error&&styles.inputError,(disabled||readOnly)&&styles.disabled],onPress:()=>!disabled&&!readOnly&&setOpened(true),disabled:disabled||readOnly},React.createElement(Text,{style:[styles.valueText,!value&&styles.placeholder]},value||getPlaceholder())),error?React.createElement(Text,{style:styles.errorText},error):null,React.createElement(Modal,{visible:opened&&!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},translate(component.label||'Select Date',component.label||'Select Date'))),React.createElement(ScrollView,{style:styles.modalBody},React.createElement(Text,{style:styles.instructionText},translate('Enter date in format:','Enter date in format:')," ",getPlaceholder()),React.createElement(Text,{style:styles.exampleText},translate('Example:','Example:')," ",getExampleDate(component.type))),React.createElement(View,{style:styles.modalFooter},React.createElement(TouchableOpacity,{style:[styles.button,styles.cancelButton],onPress:handleCancel},React.createElement(Text,{style:styles.buttonText},translate('Cancel','Cancel'))),React.createElement(TouchableOpacity,{style:[styles.button,styles.confirmButton],onPress:handleConfirm},React.createElement(Text,{style:styles.buttonText},translate('OK','OK'))))))));};function getExampleDate(type){const now=new Date();const year=now.getFullYear();const month=String(now.getMonth()+1).padStart(2,'0');const day=String(now.getDate()).padStart(2,'0');const hours=String(now.getHours()).padStart(2,'0');const minutes=String(now.getMinutes()).padStart(2,'0');switch(type){case'time':return`${hours}:${minutes}`;case'datetime':return`${year}-${month}-${day} ${hours}:${minutes}`;case'date':default:return`${year}-${month}-${day}`;}}const styles=StyleSheet.create({input:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,backgroundColor:'#fff',marginBottom:8},inputError:{borderColor:'#e74c3c'},disabled:{backgroundColor:'#f0f0f0',opacity:0.6},valueText:{fontSize:16,color:'#333'},placeholder:{color:'#999'},errorText:{color:'#e74c3c',fontSize:14,marginTop:4},modalOverlay:{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',justifyContent:'flex-end'},modalContent:{backgroundColor:'#fff',borderTopLeftRadius:12,borderTopRightRadius:12,maxHeight:'80%'},modalHeader:{paddingHorizontal:16,paddingVertical:12,borderBottomWidth:1,borderBottomColor:'#eee'},modalTitle:{fontSize:18,fontWeight:'600',color:'#333'},modalBody:{paddingHorizontal:16,paddingVertical:12},instructionText:{fontSize:14,color:'#666',marginBottom:8},exampleText:{fontSize:14,color:'#999',fontStyle:'italic'},modalFooter:{flexDirection:'row',justifyContent:'flex-end',paddingHorizontal:16,paddingVertical:12,borderTopWidth:1,borderTopColor:'#eee',gap:8},button:{paddingHorizontal:16,paddingVertical:10,borderRadius:6,minWidth:80,alignItems:'center'},cancelButton:{backgroundColor:'#f0f0f0'},confirmButton:{backgroundColor:'#007bff'},buttonText:{fontSize:14,fontWeight:'600',color:'#333'}});
+//# sourceMappingURL=DatePicker.js.map

package/lib/commonjs/components/EditGrid.js

@@ -0,0 +1,2 @@
+import React,{useState}from'react';import{View,Text,TouchableOpacity,StyleSheet}from'react-native';import{FormioField}from'./FormioField';export const EditGrid=({component,value=[],disabled,readOnly,error,onChange})=>{const[editing,setEditing]=useState(null);const addRow=()=>{const row={};component.components.forEach(c=>{var _c$defaultValue;if(c.key)row[c.key]=(_c$defaultValue=c.defaultValue)!=null?_c$defaultValue:undefined;});onChange([...value,row]);setEditing(value.length);};const removeRow=index=>{const next=value.filter((_,i)=>i!==index);onChange(next);};const updateCell=(rowIndex,key,cellValue)=>{const next=value.map((row,i)=>i===rowIndex?{...row,[key]:cellValue}:row);onChange(next);};const finalizeRow=()=>setEditing(null);return React.createElement(View,null,value.map((row,rIdx)=>React.createElement(View,{key:rIdx,style:styles.row},component.components.map(col=>React.createElement(View,{key:col.key,style:styles.cell},React.createElement(FormioField,{component:col,value:row[col.key],onChange:(k,v)=>updateCell(rIdx,col.key,v),error:undefined}))),!disabled&&!readOnly&&React.createElement(View,{style:styles.rowActions},editing===rIdx?React.createElement(TouchableOpacity,{onPress:finalizeRow},React.createElement(Text,{style:styles.actionText},"Done")):React.createElement(TouchableOpacity,{onPress:()=>setEditing(rIdx)},React.createElement(Text,{style:styles.actionText},"Edit")),React.createElement(TouchableOpacity,{onPress:()=>removeRow(rIdx)},React.createElement(Text,{style:[styles.actionText,styles.delete]},"Delete"))))),!disabled&&!readOnly&&React.createElement(TouchableOpacity,{style:styles.addBtn,onPress:addRow},React.createElement(Text,{style:styles.addText},"Add Row")),error?React.createElement(Text,{style:styles.errorText},error):null);};const styles=StyleSheet.create({row:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:8,marginBottom:8,backgroundColor:'#fff'},cell:{marginBottom:8},rowActions:{flexDirection:'row',justifyContent:'flex-end',gap:16},actionText:{color:'#007bff'},delete:{color:'#e74c3c'},addBtn:{backgroundColor:'#007bff',padding:10,borderRadius:8,alignItems:'center'},addText:{color:'#fff',fontSize:14},errorText:{color:'#e74c3c',fontSize:14,marginTop:4}});
+//# sourceMappingURL=EditGrid.js.map

package/lib/commonjs/components/FileUpload.js

@@ -0,0 +1,2 @@
+import React from'react';import{View,Text,Image,TouchableOpacity,StyleSheet}from'react-native';import{useI18n}from'../i18n/I18nContext';export const FileUpload=({component,value=[],disabled,readOnly,error,onChange,onPickFile})=>{const{translate}=useI18n();const pickFile=async()=>{if(disabled||readOnly||!onPickFile)return;try{const newFiles=await onPickFile();const next=component.multiple?[...value,...newFiles]:newFiles;onChange(next);}catch(err){console.warn('File pick error:',err);}};const removeFile=index=>{const next=value.filter((_,i)=>i!==index);onChange(next);};return React.createElement(View,{style:styles.container},value.length>0&&React.createElement(View,{style:styles.filesRow},value.map((file,idx)=>React.createElement(View,{key:idx,style:styles.fileItem},file.url||file.base64?React.createElement(Image,{source:{uri:file.url||file.base64},style:styles.thumbnail}):React.createElement(View,{style:styles.thumbnailPlaceholder},React.createElement(Text,{style:styles.fileIcon},"\uD83D\uDCC4")),React.createElement(Text,{style:styles.fileName,numberOfLines:1},file.name),!disabled&&!readOnly&&React.createElement(TouchableOpacity,{onPress:()=>removeFile(idx),style:styles.removeButton},React.createElement(Text,{style:styles.removeText},translate('Remove','Remove')))))),!disabled&&!readOnly&&React.createElement(TouchableOpacity,{onPress:pickFile,style:styles.addButton},React.createElement(Text,{style:styles.addButtonText},translate(component.multiple?'Add Files':'Add File',component.multiple?'Add Files':'Add File'))),error?React.createElement(Text,{style:styles.errorText},error):null);};const styles=StyleSheet.create({container:{marginBottom:16},filesRow:{flexDirection:'row',flexWrap:'wrap',gap:12,marginBottom:12},fileItem:{width:100,alignItems:'center'},thumbnail:{width:80,height:80,borderRadius:8,backgroundColor:'#f5f5f5'},thumbnailPlaceholder:{width:80,height:80,borderRadius:8,backgroundColor:'#eee',justifyContent:'center',alignItems:'center'},fileIcon:{fontSize:32},fileName:{marginTop:6,fontSize:12,color:'#333'},removeButton:{marginTop:4},removeText:{color:'#e74c3c',fontSize:12},addButton:{padding:10,backgroundColor:'#007bff',borderRadius:8,alignItems:'center'},addButtonText:{color:'#fff',fontSize:14},errorText:{color:'#e74c3c',fontSize:14,marginTop:4}});
+//# sourceMappingURL=FileUpload.js.map

package/lib/commonjs/components/FormioField.js

@@ -0,0 +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}});
+//# sourceMappingURL=FormioField.js.map

package/lib/commonjs/components/FormioForm.js

@@ -0,0 +1,2 @@
+import React,{useState,useEffect}from'react';import{ScrollView,View,Text,TouchableOpacity,StyleSheet}from'react-native';import{useI18n}from'../i18n/I18nContext';import{FormioField}from'./FormioField';import{DatePicker}from'./DatePicker';import{FileUpload}from'./FileUpload';import{ResourceSelect}from'./ResourceSelect';import{DataGrid}from'./DataGrid';import{EditGrid}from'./EditGrid';import{Wizard}from'./Wizard';import{validateForm}from'../validation';import{useFormioContext}from'../context/FormioContext';import{safeEvalConditional,safeEvalValue}from'../utils';const traverseComponents=(components,cb)=>{const walk=comp=>{cb(comp);if(comp.components)comp.components.forEach(walk);if(comp.type==='columns'&&Array.isArray(comp.columns)){comp.columns.forEach(col=>{if(Array.isArray(col.components))col.components.forEach(walk);});}};components.forEach(walk);};const flatten=components=>{const out=[];traverseComponents(components,c=>out.push(c));return out;};const initDefaults=(components,data)=>{const flat=flatten(components);const next={...data};for(const c of flat){if(c.input!==false&&c.key&&next[c.key]===undefined){if(c.defaultValue!==undefined)next[c.key]=c.defaultValue;}}return next;};const isHidden=(component,data)=>{if(component.hidden)return true;const value=data[component.key];if(component.customConditional){const res=safeEvalConditional(component.customConditional,{data,value,row:data,util:{}});return!res;}if(component.conditional&&component.conditional.when){const whenVal=data[component.conditional.when];const eq=component.conditional.eq;const show=component.conditional.show!==false;const match=whenVal===eq;return show?!match:match;}return false;};const applyCalculations=(components,data)=>{const flat=flatten(components);let changed=true;let guard=0;let next={...data};while(changed&&guard<5){changed=false;guard++;for(const c of flat){if(c.calculateValue){const current=next[c.key];const calc=safeEvalValue(c.calculateValue,{data:next,value:current,row:next,util:{}});if(calc!==undefined&&calc!==current){next={...next,[c.key]:calc};changed=true;}}}}return next;};export const FormioForm=({form,data:initialData={},options,components:propComponents,onSubmit,onChange,onValidation})=>{const context=useFormioContext();const{translate,isRTL}=useI18n();const componentOverrides={...(context==null?void 0:context.componentOverrides),...propComponents};const theme=context==null?void 0:context.theme;const[formData,setFormData]=useState(initialData);const[errors,setErrors]=useState([]);if(form.display==='wizard'){return React.createElement(ScrollView,{style:styles.form},form.title&&React.createElement(Text,{style:styles.title},form.title),React.createElement(Wizard,{form:form,component:{type:'wizard',key:'wizard',pages:form.components},data:formData,setData:setFormData,errors:errors,onValidation:setErrors,onFinish:()=>{const validationErrors=validateForm(form.components,formData,{translate});if(validationErrors.length===0){onSubmit==null||onSubmit(formData);}else{setErrors(validationErrors);}}}));}useEffect(()=>{let next=initDefaults(form.components,initialData);next=applyCalculations(form.components,next);setFormData(next);const validationErrors=validateForm(form.components,next,{translate});setErrors(validationErrors);onValidation==null||onValidation(validationErrors);},[form]);useEffect(()=>{const validationErrors=validateForm(form.components,formData,{translate});setErrors(validationErrors);onValidation==null||onValidation(validationErrors);},[formData]);const handleFieldChange=(key,value)=>{let next={...formData,[key]:value};next=applyCalculations(form.components,next);setFormData(next);onChange==null||onChange(next);};const handleSubmit=()=>{const validationErrors=validateForm(form.components,formData,{translate});if(validationErrors.length===0){onSubmit==null||onSubmit(formData);}else{setErrors(validationErrors);}};const getFieldError=key=>{var _errors$find;return(_errors$find=errors.find(e=>e.field===key))==null?void 0:_errors$find.message;};const renderComponent=component=>{if(isHidden(component,formData))return null;const customRenderer=(componentOverrides==null?void 0:componentOverrides[component.type])||(componentOverrides==null?void 0:componentOverrides[component.key]);if(customRenderer){return customRenderer(component,{value:formData[component.key],onChange:value=>handleFieldChange(component.key,value),error:getFieldError(component.key),disabled:component.disabled||false,readOnly:(options==null?void 0:options.readOnly)||false,formData});}if(component.type==='button'&&component.key==='submit'){var _theme$colors;return React.createElement(TouchableOpacity,{key:component.key,style:[styles.submitButton,(theme==null||(_theme$colors=theme.colors)==null?void 0:_theme$colors.primary)&&{backgroundColor:theme.colors.primary}],onPress:handleSubmit},React.createElement(Text,{style:styles.submitButtonText},translate(component.label||'Submit',component.label||'Submit')));}if(component.type==='wizard'||form.display==='wizard'){const wizardPages=component.pages||form.components||[];return React.createElement(Wizard,{key:component.key||'wizard',form:form,component:{...component,pages:wizardPages,type:'wizard'},data:formData,setData:d=>setFormData(d),errors:errors,onFinish:handleSubmit});}if(component.type==='columns'&&Array.isArray(component.columns)){const cols=component.columns;const shouldShowLabel=component.label&&!component.hideLabel;return React.createElement(View,{key:component.key,style:styles.columnsContainer},shouldShowLabel?React.createElement(Text,{style:[styles.containerLabel,{textAlign:isRTL?'right':'left'}]},translate(component.label,component.label)):null,React.createElement(View,{style:styles.columnsRow},cols.map((col,i)=>React.createElement(View,{key:`${component.key}-col-${i}`,style:styles.column},Array.isArray(col.components)?col.components.map(renderComponent):null))));}if(component.components&&component.components.length&&component.type!=='wizard'){const children=component.components.map(renderComponent).filter(Boolean);if(children.length===0)return null;const displayText=component.title||component.label;const shouldShowLabel=displayText&&!component.hideLabel;return React.createElement(View,{key:component.key,style:styles.container},shouldShowLabel?React.createElement(Text,{style:[styles.containerLabel,{textAlign:isRTL?'right':'left'}]},translate(displayText,displayText)):null,children);}if(component.input===false)return null;switch(component.type){case'date':case'datetime':case'time':return React.createElement(DatePicker,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});case'file':return React.createElement(FileUpload,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});case'datagrid':return React.createElement(DataGrid,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});case'editgrid':return React.createElement(EditGrid,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});case'select':{return React.createElement(ResourceSelect,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});}case'PlatformFileInput':return React.createElement(FileUpload,{key:component.key,component:component,value:formData[component.key],onChange:val=>handleFieldChange(component.key,val),error:getFieldError(component.key),disabled:component.disabled,readOnly:options==null?void 0:options.readOnly});}return React.createElement(FormioField,{key:component.key,component:component,value:formData[component.key],onChange:handleFieldChange,error:getFieldError(component.key)});};return React.createElement(ScrollView,{style:[styles.form,{direction:isRTL?'rtl':'ltr'}]},form.components.map((c,index)=>React.createElement(React.Fragment,{key:c.key||index},renderComponent(c))));};const styles=StyleSheet.create({form:{flex:1,padding:16,backgroundColor:'#f5f5f5'},title:{fontSize:24,fontWeight:'bold',marginBottom:24,textAlign:'center',color:'#333'},container:{marginBottom:16},columnsContainer:{marginBottom:16},columnsRow:{flexDirection:'row',gap:12},column:{flex:1},containerLabel:{fontSize:18,fontWeight:'600',marginBottom:12,color:'#333'},submitButton:{backgroundColor:'#007bff',padding:16,borderRadius:8,alignItems:'center',marginTop:24},submitButtonText:{color:'#fff',fontSize:16,fontWeight:'600'}});
+//# sourceMappingURL=FormioForm.js.map

package/lib/commonjs/components/ResourceSelect.js

@@ -0,0 +1,2 @@
+import React,{useState,useEffect}from'react';import{View,Text,TouchableOpacity,FlatList,TextInput,StyleSheet,ActivityIndicator}from'react-native';import{useI18n}from'../i18n/I18nContext';export const ResourceSelect=({component,value,disabled,readOnly,error,onChange,fetcher})=>{var _component$searchEnab;const[items,setItems]=useState([]);const[search,setSearch]=useState('');const[showList,setShowList]=useState(false);const[loading,setLoading]=useState(false);const{translate,isRTL}=useI18n();const getOptions=()=>{const data=component.data;if(!data)return[];if(data.values)return data.values;if(data.json&&Array.isArray(data.json))return data.json;return items;};useEffect(()=>{const data=component.data;if(data&&(data.dataSrc==='url'||data.dataSrc==='resource'||data.url)){setLoading(true);const doFetch=async()=>{try{var _data$url;let base=(_data$url=data.url)!=null?_data$url:'';let labelProp=data.labelProperty||'title';let valueProp=data.valueProperty||'id';let sep=base.includes('?')?'&':'?';let q=search?`${sep}${data.searchField||'search'}=${encodeURIComponent(search)}`:'';let url=`${base}${q}`;const res=fetcher?await fetcher(url):await fetch(url).then(r=>r.json());const dataArray=Array.isArray(res)?res:res.data||res.items||[];const mapped=dataArray.map(item=>{const originalLabel=item[labelProp]||item.name||item.label||item.title||item._id||item.id||String(item);return{label:translate(originalLabel,originalLabel),value:item[valueProp]||item._id||item.id||item.value||item};});setItems(mapped);}catch(err){setItems([]);}finally{setLoading(false);}};doFetch();}else{setItems(getOptions());}},[component.data,search,fetcher]);const options=getOptions();const filteredItems=options&&Array.isArray(options)?options.filter(item=>(item.label||'').toLowerCase().includes((search||'').toLowerCase())):[];const selectedItem=options.find(item=>item.value===value);if(disabled||readOnly){return React.createElement(View,{style:styles.container},React.createElement(Text,{style:[styles.label,{textAlign:isRTL?'right':'left'}]},translate(component.label||'',component.label)),React.createElement(View,{style:[styles.selector,styles.disabled]},React.createElement(Text,{style:styles.selectorText},(selectedItem==null?void 0:selectedItem.label)||component.placeholder||'Select...')),error&&React.createElement(Text,{style:styles.error},error));}const useSearch=((_component$searchEnab=component.searchEnabled)!=null?_component$searchEnab:true)&&options.length>5;return React.createElement(View,{style:styles.container},React.createElement(Text,{style:[styles.label,{textAlign:isRTL?'right':'left'}]},translate(component.label||'',component.label),component.required&&React.createElement(Text,{style:styles.required}," *")),React.createElement(TouchableOpacity,{style:[styles.selector,error&&styles.selectorError],onPress:()=>setShowList(!showList),disabled:disabled||readOnly},React.createElement(Text,{style:[styles.selectorText,!selectedItem&&styles.placeholder,{textAlign:isRTL?'right':'left'}]},loading?translate('Loading...','Loading...'):(selectedItem==null?void 0:selectedItem.label)||translate(component.placeholder||'Select...',component.placeholder||'Select...')),React.createElement(Text,{style:styles.arrow},showList?'▲':'▼')),showList&&React.createElement(View,{style:styles.dropdownWrapper},React.createElement(View,{style:styles.dropdown},useSearch&&React.createElement(TextInput,{style:[styles.searchInput,{textAlign:isRTL?'right':'left'}],placeholder:translate('Search...','Search...'),value:search,onChangeText:setSearch,autoFocus:true,editable:!disabled&&!readOnly}),loading?React.createElement(ActivityIndicator,{style:{margin:12}}):React.createElement(FlatList,{data:filteredItems,keyExtractor:item=>{var _item$label;const v=typeof item.value==='object'?JSON.stringify(item.value):String(item.value);const l=String((_item$label=item.label)!=null?_item$label:'');return`${v}-${l}`;},renderItem:({item})=>React.createElement(TouchableOpacity,{key:(_item$label2=>{const v=typeof item.value==='object'?JSON.stringify(item.value):String(item.value);const l=String((_item$label2=item.label)!=null?_item$label2:'');return`${v}-${l}`;})(),style:[styles.item,item.value===value&&styles.selectedItem],onPress:()=>{onChange(item.value);setShowList(false);setSearch('');}},React.createElement(Text,{style:[styles.itemText,item.value===value&&styles.selectedText]},item.label)),ListEmptyComponent:React.createElement(Text,{style:[styles.emptyText,{textAlign:isRTL?'right':'left'}]},loading?translate('Loading...','Loading...'):translate('No options available','No options available')),keyboardShouldPersistTaps:"handled",style:styles.flatList,contentContainerStyle:{flexGrow:1},nestedScrollEnabled:true}))),error&&React.createElement(Text,{style:[styles.error,{textAlign:isRTL?'right':'left'}]},translate(error,error)));};const styles=StyleSheet.create({container:{marginBottom:16},label:{fontSize:16,fontWeight:'600',marginBottom:8,color:'#333'},required:{color:'#e74c3c'},selector:{borderWidth:1,borderColor:'#ddd',borderRadius:8,padding:12,backgroundColor:'#fff',flexDirection:'row',justifyContent:'space-between',alignItems:'center'},selectorError:{borderColor:'#e74c3c'},disabled:{backgroundColor:'#f5f5f5',opacity:0.6},selectorText:{fontSize:16,color:'#333',flex:1},placeholder:{color:'#999'},arrow:{fontSize:12,color:'#666'},dropdownWrapper:{position:'relative',zIndex:1000},dropdown:{borderWidth:1,borderColor:'#ddd',borderRadius:8,backgroundColor:'#fff',maxHeight:200,minHeight:10,marginTop:4,overflow:'hidden'},flatList:{flexGrow:1},searchInput:{borderBottomWidth:1,borderBottomColor:'#eee',padding:12,fontSize:16},item:{padding:12,borderBottomWidth:1,borderBottomColor:'#eee'},selectedItem:{backgroundColor:'#e3f2fd'},itemText:{fontSize:16,color:'#333'},selectedText:{fontWeight:'600',color:'#1976d2'},emptyText:{padding:12,textAlign:'center',color:'#999',fontStyle:'italic'},error:{color:'#e74c3c',fontSize:14,marginTop:4}});
+//# sourceMappingURL=ResourceSelect.js.map

package/lib/commonjs/components/Wizard.js

@@ -0,0 +1,2 @@
+import React,{useState,useEffect}from'react';import{View,Text,TouchableOpacity}from'react-native';import{FormioField}from'./FormioField';import{validateForm}from'../validation';import{useTheme}from'../hooks/useTheme';import{useI18n}from'../i18n/I18nContext';const safeEval=(code,ctx)=>{try{var _ctx$row,_ctx$util;const fn=new Function('data','row','value','util','show',`return (function(){\n${code}\nreturn typeof show !== 'undefined' ? show : undefined;\n})();`);return fn(ctx.data,(_ctx$row=ctx.row)!=null?_ctx$row:ctx.data,ctx.value,(_ctx$util=ctx.util)!=null?_ctx$util:{},undefined);}catch(e){return undefined;}};const isHidden=(component,data)=>{if(component.hidden)return true;const value=data[component.key];if(component.customConditional){const res=safeEval(component.customConditional,{data,value,row:data,util:{}});if(typeof res==='boolean')return!res;if(res!==undefined)return!Boolean(res);}if(component.conditional&&component.conditional.when){const whenVal=data[component.conditional.when];const eq=component.conditional.eq;const show=component.conditional.show!==false;const match=whenVal===eq;return show?!match:match;}return false;};const applyCalculations=(components,data)=>{let changed=true;let guard=0;let next={...data};while(changed&&guard<5){changed=false;guard++;for(const c of components){if(c.calculateValue){const current=next[c.key];const calc=safeEval(c.calculateValue,{data:next,value:current,row:next,util:{}});if(calc!==undefined&&calc!==current){next={...next,[c.key]:calc};changed=true;}}}}return next;};export const Wizard=({form,component,data,setData,errors,onValidation,onNext,onPrev,onFinish})=>{const[currentPage,setCurrentPage]=useState(0);const{createStyles,getColor,getComponent}=useTheme();const{translate,isRTL}=useI18n();const pages=component.pages||[];const currentPageData=pages[currentPage];const getError=key=>{var _errors$find;return(_errors$find=errors.find(e=>e.field===key))==null?void 0:_errors$find.message;};const handleChange=(key,value)=>{let next={...data,[key]:value};const allComponents=pages.flatMap(p=>p.components||[]);next=applyCalculations(allComponents,next);setData(next);};useEffect(()=>{if(currentPageData!=null&&currentPageData.components){const allComponents=pages.flatMap(p=>p.components||[]);const allErrors=validateForm(allComponents,data,{translate});onValidation==null||onValidation(allErrors);}},[data,currentPageData,pages,onValidation]);const nextPage=()=>{if(currentPage<pages.length-1){setCurrentPage(currentPage+1);onNext==null||onNext();}else{onFinish==null||onFinish();}};const prevPage=()=>{if(currentPage>0){setCurrentPage(currentPage-1);onPrev==null||onPrev();}};if(!currentPageData||pages.length===0){return React.createElement(Text,null,"No wizard pages found");}const themedStyles=createStyles(()=>({wizardContainer:{flex:1},pageIndicator:{alignItems:'center',marginBottom:getComponent('container.marginBottom',16)},pageText:{fontSize:getComponent('label.fontSize',14),color:getColor('textSecondary','#666')},pageTitle:{fontSize:getComponent('button.fontSize',20),fontWeight:getComponent('button.fontWeight','bold'),marginBottom:getComponent('container.marginBottom',16),textAlign:'center',color:getColor('text','#333')},pageContent:{flex:1,marginBottom:getComponent('container.marginBottom',20)},navRow:{flexDirection:'row',justifyContent:'space-between',paddingTop:getComponent('container.padding',16),borderTopWidth:1,borderTopColor:getColor('border','#eee')},navBtn:{padding:getComponent('button.padding',12),borderRadius:getComponent('button.borderRadius',8),minWidth:100,alignItems:'center',minHeight:getComponent('button.minHeight',44)},prevBtn:{backgroundColor:getColor('textSecondary','#6c757d')},nextBtn:{backgroundColor:getColor('primary','#007bff')},navText:{color:getColor('background','#fff'),fontWeight:getComponent('button.fontWeight','600'),fontSize:getComponent('button.fontSize',16)},disabled:{opacity:0.4}}));return React.createElement(View,{style:themedStyles.wizardContainer},React.createElement(View,{style:themedStyles.pageIndicator},React.createElement(Text,{style:themedStyles.pageText},"Page ",currentPage+1," of ",pages.length)),currentPageData.title&&React.createElement(Text,{style:[themedStyles.pageTitle,{textAlign:isRTL?'right':'left'}]},translate(currentPageData.title,currentPageData.title)),React.createElement(View,{style:themedStyles.pageContent},(currentPageData.components||[]).map(c=>{if(isHidden(c,data))return null;return React.createElement(FormioField,{key:c.key,component:c,value:data[c.key],onChange:handleChange,error:getError(c.key)});})),React.createElement(View,{style:themedStyles.navRow},React.createElement(TouchableOpacity,{onPress:prevPage,style:[themedStyles.navBtn,themedStyles.prevBtn,currentPage===0&&themedStyles.disabled],disabled:currentPage===0},React.createElement(Text,{style:themedStyles.navText},translate('Previous','Previous'))),React.createElement(TouchableOpacity,{onPress:nextPage,style:[themedStyles.navBtn,themedStyles.nextBtn]},React.createElement(Text,{style:themedStyles.navText},currentPage<pages.length-1?translate('Next','Next'):translate('Finish','Finish')))));};
+//# sourceMappingURL=Wizard.js.map

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

@@ -0,0 +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);
+//# sourceMappingURL=CheckboxRenderer.js.map

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

@@ -0,0 +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"}));};
+//# sourceMappingURL=EmailRenderer.js.map

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

@@ -0,0 +1,2 @@
+import React from'react';import{StyleSheet,View,Text}from'react-native';import{COLORS,SPACING,TYPOGRAPHY}from'../../constants';import{Logger}from'../../utils/logger';const logger=new Logger('FallbackRenderer');const styles=StyleSheet.create({container:{marginBottom:SPACING.md,padding:SPACING.md,backgroundColor:COLORS.warningLight,borderLeftWidth:4,borderLeftColor:COLORS.warning,borderRadius:4},title:{fontSize:TYPOGRAPHY.fontSize.md,fontWeight:TYPOGRAPHY.fontWeight.semibold,color:COLORS.warning,marginBottom:SPACING.xs},message:{fontSize:TYPOGRAPHY.fontSize.sm,color:COLORS.text,marginBottom:SPACING.sm},details:{fontSize:TYPOGRAPHY.fontSize.xs,color:COLORS.textSecondary,backgroundColor:COLORS.background,padding:SPACING.sm,borderRadius:3,fontFamily:'monospace'}});export const FallbackRenderer=({component})=>{const{type,label,key}=component;React.useEffect(()=>{logger.warn(`Unknown component type: "${type}" (${label||key||'unknown'})`);},[type,label,key]);return React.createElement(View,{style:styles.container},React.createElement(Text,{style:styles.title},"Unsupported Component Type"),React.createElement(Text,{style:styles.message},"Component type \"",type,"\" is not supported or not registered."),label&&React.createElement(Text,{style:styles.message},"Label: ",label),React.createElement(Text,{style:styles.details},key||'no-key'));};
+//# sourceMappingURL=FallbackRenderer.js.map

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

@@ -0,0 +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"}));};
+//# sourceMappingURL=NumberRenderer.js.map

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

@@ -0,0 +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?'🐵':'🙈'))));};
+//# sourceMappingURL=PasswordRenderer.js.map

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

@@ -0,0 +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}));};
+//# sourceMappingURL=PhoneNumberRenderer.js.map

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

@@ -0,0 +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);
+//# sourceMappingURL=RadioRenderer.js.map

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

@@ -0,0 +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};});}
+//# sourceMappingURL=SelectRenderer.js.map

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

@@ -0,0 +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};});}
+//# sourceMappingURL=SelectboxesRenderer.js.map

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

@@ -0,0 +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));};
+//# sourceMappingURL=TextAreaRenderer.js.map

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

@@ -0,0 +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';}
+//# sourceMappingURL=TextfieldRenderer.js.map

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

@@ -0,0 +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}));};
+//# sourceMappingURL=URLRenderer.js.map

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

@@ -0,0 +1,2 @@
+export{TextfieldRenderer}from'./TextfieldRenderer';export{EmailRenderer}from'./EmailRenderer';export{NumberRenderer}from'./NumberRenderer';export{CheckboxRenderer}from'./CheckboxRenderer';export{RadioRenderer}from'./RadioRenderer';export{SelectRenderer}from'./SelectRenderer';export{SelectboxesRenderer}from'./SelectboxesRenderer';export{TextAreaRenderer}from'./TextAreaRenderer';export{PasswordRenderer}from'./PasswordRenderer';export{URLRenderer}from'./URLRenderer';export{PhoneNumberRenderer}from'./PhoneNumberRenderer';export{FallbackRenderer}from'./FallbackRenderer';export const DEFAULT_RENDERERS={textfield:require('./TextfieldRenderer').TextfieldRenderer,text:require('./TextfieldRenderer').TextfieldRenderer,email:require('./EmailRenderer').EmailRenderer,number:require('./NumberRenderer').NumberRenderer,checkbox:require('./CheckboxRenderer').CheckboxRenderer,radio:require('./RadioRenderer').RadioRenderer,select:require('./SelectRenderer').SelectRenderer,selectboxes:require('./SelectboxesRenderer').SelectboxesRenderer,textarea:require('./TextAreaRenderer').TextAreaRenderer,password:require('./PasswordRenderer').PasswordRenderer,url:require('./URLRenderer').URLRenderer,phoneNumber:require('./PhoneNumberRenderer').PhoneNumberRenderer};
+//# sourceMappingURL=index.js.map

package/lib/commonjs/constants/colors.js

@@ -0,0 +1,2 @@
+export const DEFAULT_COLORS={PRIMARY:'#007AFF',SECONDARY:'#5856D6',ERROR:'#FF3B30',SUCCESS:'#34C759',WARNING:'#FF9500',INFO:'#00B0FF',BACKGROUND:'#FFFFFF',SURFACE:'#F2F2F7',TEXT:'#333333',TEXT_SECONDARY:'#8E8E93',BORDER:'#C7C7CC',BORDER_FOCUS:'#007AFF',DISABLED:'#F0F0F0',PLACEHOLDER:'#C7C7CC'};
+//# sourceMappingURL=colors.js.map

package/lib/commonjs/constants/componentTypes.js

@@ -0,0 +1,2 @@
+export const COMPONENT_TYPES={TEXTFIELD:'textfield',EMAIL:'email',PASSWORD:'password',NUMBER:'number',TEXTAREA:'textarea',URL:'url',PHONE_NUMBER:'phoneNumber',SELECT:'select',CHECKBOX:'checkbox',RADIO:'radio',SELECTBOXES:'selectboxes',DATE:'date',DATETIME:'datetime',TIME:'time',DAY:'day',FILE:'file',PANEL:'panel',CONTAINER:'container',COLUMNS:'columns',FIELDSET:'fieldset',WELL:'well',TABS:'tabs',TABLE:'table',BUTTON:'button',HTML:'html',LABEL:'label',HIDDEN:'hidden',CONTENT:'content',DATAGRID:'datagrid',EDITGRID:'editgrid',TREE:'tree',WIZARD:'wizard',SIGNATURE:'signature',RESOURCE:'resource',CUSTOM:'custom'};export const INPUT_COMPONENT_TYPES=[COMPONENT_TYPES.TEXTFIELD,COMPONENT_TYPES.EMAIL,COMPONENT_TYPES.PASSWORD,COMPONENT_TYPES.NUMBER,COMPONENT_TYPES.TEXTAREA,COMPONENT_TYPES.URL,COMPONENT_TYPES.PHONE_NUMBER,COMPONENT_TYPES.SELECT,COMPONENT_TYPES.CHECKBOX,COMPONENT_TYPES.RADIO,COMPONENT_TYPES.SELECTBOXES,COMPONENT_TYPES.DATE,COMPONENT_TYPES.DATETIME,COMPONENT_TYPES.TIME,COMPONENT_TYPES.DAY,COMPONENT_TYPES.FILE,COMPONENT_TYPES.DATAGRID,COMPONENT_TYPES.EDITGRID];export const CONTAINER_COMPONENT_TYPES=[COMPONENT_TYPES.PANEL,COMPONENT_TYPES.CONTAINER,COMPONENT_TYPES.COLUMNS,COMPONENT_TYPES.FIELDSET,COMPONENT_TYPES.WELL,COMPONENT_TYPES.TABS,COMPONENT_TYPES.TABLE];export const DISPLAY_COMPONENT_TYPES=[COMPONENT_TYPES.BUTTON,COMPONENT_TYPES.HTML,COMPONENT_TYPES.LABEL,COMPONENT_TYPES.HIDDEN,COMPONENT_TYPES.CONTENT];
+//# sourceMappingURL=componentTypes.js.map

package/lib/commonjs/constants/index.js

@@ -0,0 +1,2 @@
+import{DEFAULT_COLORS}from'./colors';import{FONT_SIZES,FONT_WEIGHTS}from'./typography';export{DEFAULT_COLORS}from'./colors';export const SPACING={xs:4,sm:8,md:12,lg:16,xl:24,xxl:32};export{FONT_SIZES,FONT_WEIGHTS,LINE_HEIGHTS}from'./typography';export{COMPONENT_TYPES,INPUT_COMPONENT_TYPES,CONTAINER_COMPONENT_TYPES,DISPLAY_COMPONENT_TYPES}from'./componentTypes';export{VALIDATION_MESSAGES}from'./validationMessages';export const COLORS={primary:DEFAULT_COLORS.PRIMARY,secondary:DEFAULT_COLORS.SECONDARY,error:DEFAULT_COLORS.ERROR,success:DEFAULT_COLORS.SUCCESS,warning:DEFAULT_COLORS.WARNING,info:DEFAULT_COLORS.INFO,background:DEFAULT_COLORS.BACKGROUND,surface:DEFAULT_COLORS.SURFACE,text:DEFAULT_COLORS.TEXT,textSecondary:DEFAULT_COLORS.TEXT_SECONDARY,border:DEFAULT_COLORS.BORDER,borderFocus:DEFAULT_COLORS.BORDER_FOCUS,disabled:DEFAULT_COLORS.DISABLED,placeholder:DEFAULT_COLORS.PLACEHOLDER,warningLight:'#FFF3CD',primaryLight:'#E3F2FD'};export const TYPOGRAPHY={fontSize:{xs:FONT_SIZES.XS,sm:FONT_SIZES.SM,md:FONT_SIZES.MD,lg:FONT_SIZES.LG,xl:FONT_SIZES.XL,xxl:FONT_SIZES.XXL},fontWeight:{light:FONT_WEIGHTS.LIGHT,normal:FONT_WEIGHTS.NORMAL,medium:FONT_WEIGHTS.MEDIUM,semibold:FONT_WEIGHTS.SEMI_BOLD,bold:FONT_WEIGHTS.BOLD}};
+//# sourceMappingURL=index.js.map

package/lib/commonjs/constants/spacing.js

@@ -0,0 +1,2 @@
+export const SPACING={XS:4,SM:8,MD:12,LG:16,XL:24,XXL:32};
+//# sourceMappingURL=spacing.js.map

package/lib/commonjs/constants/typography.js

@@ -0,0 +1,2 @@
+export const FONT_SIZES={XS:12,SM:14,MD:16,LG:18,XL:20,XXL:24};export const FONT_WEIGHTS={LIGHT:'300',NORMAL:'400',MEDIUM:'500',SEMI_BOLD:'600',BOLD:'700'};export const LINE_HEIGHTS={TIGHT:1.2,NORMAL:1.5,RELAXED:1.8};
+//# sourceMappingURL=typography.js.map

package/lib/commonjs/constants/validationMessages.js

@@ -0,0 +1,2 @@
+export const VALIDATION_MESSAGES={REQUIRED:'This field is required',MIN_LENGTH:'Minimum length is {min}',MAX_LENGTH:'Maximum length is {max}',PATTERN:'Invalid format',MIN_VALUE:'Minimum value is {min}',MAX_VALUE:'Maximum value is {max}',INVALID_EMAIL:'Invalid email address',INVALID_URL:'Invalid URL',INVALID_PHONE:'Invalid phone number',INVALID_DATE:'Invalid date',FILE_TYPE_INVALID:'Invalid file type',FILE_SIZE_TOO_LARGE:'File is too large',CUSTOM_ERROR:'This field is invalid'};
+//# sourceMappingURL=validationMessages.js.map