@chem-po/react-native 0.0.14 → 0.0.16

package/lib/typescript/components/form/view/file.d.ts

@@ -1,10 +1,12 @@
+import { InputSize } from '@chem-po/core';
 import { FileField } from '@chem-po/react';
 import React from 'react';
 import { ViewStyle } from 'react-native';
-export declare const FileFieldView: ({ field, value, noLabel, style, }: {
+export declare const FileFieldView: ({ field, value, noLabel, style, size: sizeProp, }: {
     field: FileField;
     value: any;
     noLabel?: boolean;
     style?: ViewStyle;
+    size?: InputSize;
 }) => React.JSX.Element;
 //# sourceMappingURL=file.d.ts.map

package/lib/typescript/components/form/view/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/file.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAuBhE,eAAO,MAAM,aAAa,GAAI,mCAK3B;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,sBAsBA,CAAA"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/file.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAoChE,eAAO,MAAM,aAAa,GAAI,mDAM3B;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAsBA,CAAA"}

package/lib/typescript/components/form/view/index.d.ts

@@ -1,10 +1,12 @@
+import { InputSize } from '@chem-po/core';
 import { Field } from '@chem-po/react';
 import React from 'react';
 import { ViewStyle } from 'react-native';
-export declare const FieldView: ({ field, value, noLabel, style, }: {
+export declare const FieldView: ({ field, value, noLabel, style, size, }: {
     field: Field;
     value: any;
     noLabel?: boolean;
     style?: ViewStyle;
+    size?: InputSize;
 }) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/form/view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAqD1D,eAAO,MAAM,SAAS,GAAI,mCAKvB;IACD,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,sBAWA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,KAAK,EAAe,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAmD1D,eAAO,MAAM,SAAS,GAAI,yCAMvB;IACD,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAyBA,CAAA"}

package/lib/typescript/components/form/view/multipleSelect.d.ts

@@ -1,9 +1,11 @@
+import { InputSize } from '@chem-po/core';
 import { MultipleSelectField } from '@chem-po/react';
 import { ViewStyle } from 'react-native';
-export declare const MultipleSelectFieldView: ({ field, value, noLabel, style, }: {
-    field: MultipleSelectField;
-    value: any[];
+export declare const MultipleSelectFieldView: <F extends MultipleSelectField>({ field, value, noLabel, size: sizeProp, style, }: {
+    field: F;
+    value?: F["defaultValue"];
     noLabel?: boolean;
+    size?: InputSize;
     style?: ViewStyle;
 }) => any;
 //# sourceMappingURL=multipleSelect.d.ts.map

package/lib/typescript/components/form/view/multipleSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multipleSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/multipleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAA;AAClE,OAAc,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAsBvE,eAAO,MAAM,uBAAuB,GAAI,mCAKrC;IACD,KAAK,EAAE,mBAAmB,CAAA;IAC1B,KAAK,EAAE,GAAG,EAAE,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,QAoBA,CAAA"}
+{"version":3,"file":"multipleSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/multipleSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAA;AAElE,OAAc,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AA+BvE,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,mBAAmB,EAAE,mDAMpE;IACD,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,QAkCA,CAAA"}

package/lib/typescript/components/form/view/select.d.ts

@@ -1,10 +1,13 @@
+import { BaseSelectOption, InputSize, RenderSelectOptionProps } from '@chem-po/core';
 import { SelectField } from '@chem-po/react';
 import React from 'react';
 import { ViewStyle } from 'react-native';
-export declare const SelectFieldView: ({ field, value, noLabel, style, }: {
+export declare const DefaultRenderOption: <Value = string, Option extends BaseSelectOption<Value> = BaseSelectOption<Value>>({ option, }: RenderSelectOptionProps<Value, Option>) => React.JSX.Element;
+export declare const SelectFieldView: ({ field, value, noLabel, style, size: sizeProp, }: {
     field: SelectField;
     value: any;
     noLabel?: boolean;
     style?: ViewStyle;
+    size?: InputSize;
 }) => React.JSX.Element;
 //# sourceMappingURL=select.d.ts.map

package/lib/typescript/components/form/view/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAoBhE,eAAO,MAAM,eAAe,GAAI,mCAK7B;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,sBAeA,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AACpF,OAAO,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAgBhE,eAAO,MAAM,mBAAmB,GAC9B,KAAK,GAAG,MAAM,EACd,MAAM,SAAS,gBAAgB,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,KAAK,CAAC,EAChE,aAEC,uBAAuB,CAAC,KAAK,EAAE,MAAM,CAAC,sBAExC,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,mDAM7B;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,sBAyBA,CAAA"}

package/lib/typescript/components/form/view/styles.d.ts

@@ -0,0 +1,14 @@
+export declare const inputViewStyles: {
+    label: {
+        paddingRight: number;
+        opacity: number;
+        fontWeight: "600";
+    };
+    value: {
+        opacity: number;
+    };
+    valueEmpty: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/form/view/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/view/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;CAY1B,CAAA"}

package/lib/typescript/contexts/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AASzD,MAAM,WAAW,yBACf,SAAQ,iBAAiB,CACvB,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CACxE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AACD,eAAO,MAAM,oBAAoB,GAAI,kDAIlC,yBAAyB,sBAgB3B,CAAA"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAUzD,MAAM,WAAW,yBACf,SAAQ,iBAAiB,CACvB,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CACxE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AACD,eAAO,MAAM,oBAAoB,GAAI,kDAIlC,yBAAyB,sBAgB3B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-native",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -41,20 +41,21 @@
     "react": "19.0.0",
     "react-hook-form": "^7.55.0",
     "react-native": "0.79.2",
+    "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-notifier": "^2.0.0",
     "react-native-paper": "^5.14.3",
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.14",
-    "@chem-po/react": "0.0.14"
+    "@chem-po/core": "0.0.16",
+    "@chem-po/react": "0.0.16"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.25.4",
     "@expo/metro-runtime": "~5.0.4",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.0.12",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.19.10",
     "expo-build-properties": "~0.14.6",

package/src/components/form/Field.tsx

@@ -1,11 +1,11 @@
-import { InputRef, getFieldValidate } from '@chem-po/core'
+import { InputRef, InputSize, getFieldValidate } from '@chem-po/core'
 import { Field, useField } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef, useMemo } from 'react'
 import { ChangeHandler, Controller } from 'react-hook-form'
 import { Input } from './input/input'
 
 const FieldComponentBase = (
-  { field, name }: { field: Field; name: string },
+  { field, name, size: formSize }: { field: Field; name: string; size?: InputSize },
   ref: ForwardedRef<InputRef>,
 ) => {
   const { control, getOnChange, meta, onFocus, onBlur: fieldBlur } = useField(name, field)
@@ -31,6 +31,7 @@ const FieldComponentBase = (
               onChange: getOnChange(inputProps.onChange as ChangeHandler),
             }}
             meta={meta}
+            formSize={formSize}
           />
         )
       }}

package/src/components/form/Form.tsx

@@ -1,4 +1,4 @@
-import { isField, isListField } from '@chem-po/core'
+import { InputSize, isField, isListField } from '@chem-po/core'
 import {
   ChempoFormProvider,
   DataViewProps,
@@ -110,7 +110,11 @@ const styles = StyleSheet.create({
   },
 })
 
-export const ListFieldInput: FC<{ field: ListField; name: string }> = ({ field, name }) => {
+export const ListFieldInput: FC<{
+  field: ListField
+  name: string
+  size: InputSize
+}> = ({ field, name, size }) => {
   const emptyData = useMemo(() => {
     if (isField(field.itemField)) return ''
     if (isListField(field.itemField)) return []
@@ -133,7 +137,7 @@ export const ListFieldInput: FC<{ field: ListField; name: string }> = ({ field,
             <View key={formField.id} style={styles.listItem}>
               <View style={styles.listItemContent}>
                 <View style={styles.listItemInput}>
-                  <FormElement name={formField.id} field={field.itemField} />
+                  <FormElement size={size} name={formField.id} field={field.itemField} />
                 </View>
                 <DeleteButton
                   onDelete={() => remove(idx)}
@@ -155,7 +159,15 @@ export const ListFieldInput: FC<{ field: ListField; name: string }> = ({ field,
   )
 }
 
-export const FormElement = ({ field, name }: { field: IFormElement; name: string }) => {
+export const FormElement = ({
+  field,
+  name,
+  size,
+}: {
+  field: IFormElement
+  name: string
+  size: InputSize
+}) => {
   const fields = useMemo<Array<{ name: string; field: IFormElement }>>(() => {
     if (isField(field) || isListField(field)) return [{ name: 'value', field }]
 
@@ -169,7 +181,7 @@ export const FormElement = ({ field, name }: { field: IFormElement; name: string
     <View style={styles.formElementContainer}>
       {fields.map(f => {
         if (isListField(f.field)) {
-          const b = <ListFieldInput key={f.name} name={f.name} field={f.field} />
+          const b = <ListFieldInput key={f.name} name={f.name} field={f.field} size={size} />
           return f.field.condition ? (
             <Condition path={name} condition={f.field.condition} key={f.name}>
               {b}
@@ -179,7 +191,7 @@ export const FormElement = ({ field, name }: { field: IFormElement; name: string
           )
         }
         if (isField(f.field)) {
-          const b = <FieldComponent key={f.name} name={f.name} field={f.field} />
+          const b = <FieldComponent key={f.name} name={f.name} field={f.field} size={size} />
           return f.field.condition ? (
             <Condition path={name} condition={f.field.condition} key={f.name}>
               {b}
@@ -189,7 +201,7 @@ export const FormElement = ({ field, name }: { field: IFormElement; name: string
           )
         }
 
-        const b = <FormElement key={f.name} name={f.name} field={f.field} />
+        const b = <FormElement key={f.name} name={f.name} field={f.field} size={size} />
         return f.field.condition ? (
           <Condition path={name} condition={f.field.condition} key={f.name}>
             {b}
@@ -341,6 +353,7 @@ export const FieldMapForm = <F extends FieldMap>({
   buttonText = 'SUBMIT',
   renderFooter,
   storagePath,
+  size = 'md',
 }: FieldMapFormProps<F>) => {
   const useSubmitDataProps = useMemo<UseFormSubmitProps<F>>(
     () => ({
@@ -355,7 +368,7 @@ export const FieldMapForm = <F extends FieldMap>({
 
   return (
     <View style={styles.container}>
-      <FormElement name="" field={field} />
+      <FormElement name="" field={field} size={size} />
       <FormFooter
         uploads={uploads}
         onSubmit={onSubmit}
@@ -371,12 +384,14 @@ export const FieldForm = <F extends Field | ListField>({
   onSubmit,
   field,
   value,
+  size,
   ...props
 }: FieldFormProps<F>) => {
   const fieldMap = useMemo<FieldMap>(() => ({ children: { value: field } }), [field])
   const fieldMapValue = useMemo<FieldMapValue<FieldMap>>(() => ({ value }), [value])
   return (
     <FieldMapForm
+      size={size}
       field={fieldMap}
       value={fieldMapValue}
       onSubmit={data => onSubmit(data?.value)}
@@ -385,12 +400,27 @@ export const FieldForm = <F extends Field | ListField>({
   )
 }
 
-export const Form = <F extends IFormElement>({ field, onSubmit, ...props }: FormProps<F>) => {
+export const Form = <F extends IFormElement>({
+  field,
+  onSubmit,
+  size = 'md',
+  ...props
+}: FormProps<F>) => {
   const body =
     isField(field) || isListField(field) ? (
-      <FieldForm field={field} onSubmit={onSubmit as FormOnSubmit<Field | ListField>} {...props} />
+      <FieldForm
+        size={size}
+        field={field}
+        onSubmit={onSubmit as FormOnSubmit<Field | ListField>}
+        {...props}
+      />
     ) : (
-      <FieldMapForm field={field} onSubmit={onSubmit as FormOnSubmit<FieldMap>} {...props} />
+      <FieldMapForm
+        size={size}
+        field={field}
+        onSubmit={onSubmit as FormOnSubmit<FieldMap>}
+        {...props}
+      />
     )
 
   return <ChempoFormProvider>{body}</ChempoFormProvider>

package/src/components/form/input/Editable.tsx

@@ -13,6 +13,8 @@ import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
 import { StandaloneInput } from './StandaloneInput'
+import { InputClearButton } from './common/InputClearButton'
+import { useInputStyles } from './hooks/useInputStyles'
 
 export const Editable = <T extends Field>({
   value: initValue,
@@ -23,9 +25,9 @@ export const Editable = <T extends Field>({
   onEditClose,
   onEditOpen,
   containerStyle,
+  size,
 }: EditableProps<ViewStyle, T>) => {
   const {
-    formattedValue,
     inputRef,
     setValue,
     isLoading,
@@ -38,7 +40,6 @@ export const Editable = <T extends Field>({
     setEditHovered,
     submitValue,
     submit,
-    parse,
   } = useEditable({
     value: initValue,
     field,
@@ -88,10 +89,18 @@ export const Editable = <T extends Field>({
   }, [isEditing, inputRef])
 
   const iconColor = useIconColor()
-
+  const { clearButtonSize } = useInputStyles(true, field.size, size)
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
   const submitColor = useThemeValue('colors.accent.200')
 
+  const needsClearButton = useMemo(() => {
+    if (!field.optional) return false
+    switch (field._type) {
+      case 'select':
+        return true
+    }
+  }, [field])
+
   const handleBlur = useCallback(() => {
     switch (field._type) {
       case 'select':
@@ -134,20 +143,28 @@ export const Editable = <T extends Field>({
           {isEditing || alwaysEditing ? (
             <StandaloneInput
               ref={inputRef}
-              value={formattedValue}
+              value={value}
               inEditable
               field={editableField}
               style={style}
-              onChange={shouldSubmitOnChange ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+              onChange={shouldSubmitOnChange ? v => submitValue(v) : setValue}
               onBlur={handleBlur}
             />
           ) : (
             <FieldView noLabel style={style} field={field} value={value} />
           )}
         </View>
-
         {!alwaysEditing && (
           <View style={styles.buttonsContainer}>
+            {needsClearButton ? (
+              <InputClearButton
+                size={clearButtonSize}
+                onPress={() => {
+                  submitValue(null)
+                }}
+                isActive={!!value}
+              />
+            ) : null}
             {noCloseButton && isEditing ? null : (
               <TouchableOpacity
                 style={styles.editButton}

package/src/components/form/input/common/InputClearButton.tsx

@@ -1,4 +1,4 @@
-import { useBorderColor, useIconColor } from '@chem-po/react'
+import { useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React from 'react'
 import { StyleSheet, TouchableOpacity } from 'react-native'
@@ -7,20 +7,26 @@ export const InputClearButton = ({
   onPress,
   isActive,
   marginRight,
+  size,
 }: {
   onPress: () => void
   isActive: boolean
   marginRight?: number
+  size: number
 }) => {
   const iconColor = useIconColor()
   const borderColor = useBorderColor()
+  const backgroundColor = useBackgroundColor(100)
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={[styles.closeButton, { opacity: isActive ? 1 : 0, marginRight, borderColor }]}
+      style={[
+        styles.closeButton,
+        { opacity: isActive ? 1 : 0, marginRight, borderColor, backgroundColor },
+      ]}
       hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       disabled={!isActive}>
-      <Ionicons name="close" size={14} color={iconColor} style={{ alignSelf: 'center' }} />
+      <Ionicons name="close" size={size} color={iconColor} style={{ alignSelf: 'center' }} />
     </TouchableOpacity>
   )
 }
@@ -28,11 +34,13 @@ export const InputClearButton = ({
 export const DateInputClearButton = ({
   onPress,
   isActive,
+  size,
 }: {
   onPress: () => void
   isActive: boolean
+  size: number
 }) => {
-  return <InputClearButton marginRight={0} onPress={onPress} isActive={isActive} />
+  return <InputClearButton marginRight={0} onPress={onPress} isActive={isActive} size={size} />
 }
 
 const styles = StyleSheet.create({

package/src/components/form/input/date/index.tsx

@@ -8,7 +8,7 @@ import { DatePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
-import { inputStyles } from '../styles'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 // const parseDate = (date?: Date) =>
 //   date
@@ -21,12 +21,21 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
   (
     {
       input: { onChange, value, onFocus, onBlur },
-      field: { placeholder, minDate, maxDate, optional },
+      field: { placeholder, minDate, maxDate, optional, size },
       meta: { active },
+      formSize,
+      inEditable,
     },
     ref,
   ) => {
     const date = useMemo(() => (value ? new Date(`${value}T00:00:00.000`) : undefined), [value])
+    const {
+      container: inputStyles,
+      iconSize,
+      text,
+      clearButtonSize,
+      buttonContainer,
+    } = useInputStyles(inEditable, size, formSize)
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -49,14 +58,20 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={[styles.button, inputStyles.input]} onPress={showDialog}>
-          <Text style={[styles.text, { color: inputColor }]}>
+        <TouchableOpacity style={[styles.button, inputStyles]} onPress={showDialog}>
+          <Text style={[styles.text, text, { color: inputColor }]}>
             {value ? getDateString(value, 'short') : placeholder}
           </Text>
-          <Ionicons name="calendar" size={20} color={iconColor} style={styles.icon} />
-          {optional && value ? (
-            <DateInputClearButton onPress={() => onChange(null)} isActive />
-          ) : null}
+          <View style={buttonContainer}>
+            <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            {optional && value ? (
+              <DateInputClearButton
+                size={clearButtonSize}
+                onPress={() => onChange(null)}
+                isActive={!!value}
+              />
+            ) : null}
+          </View>
         </TouchableOpacity>
         <Portal>
           <DatePickerModal
@@ -92,10 +107,6 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   text: {
-    fontSize: 16,
     flex: 1,
   },
-  icon: {
-    marginRight: 10,
-  },
 })

package/src/components/form/input/datetime/index.tsx

@@ -8,14 +8,23 @@ import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
-import { inputStyles } from '../styles'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
-  ({ input: { value, onBlur, onChange, onFocus }, field, meta: { active } }, ref) => {
+  (
+    { input: { value, onBlur, onChange, onFocus }, field, meta: { active }, formSize, inEditable },
+    ref,
+  ) => {
     const { placeholder, optional } = field
     const [showDatePicker, setShowDatePicker] = useState(true)
     const [showTimePicker, setShowTimePicker] = useState(false)
-    // const [selectedDate] = useState<Date>(value ? new Date(value) : new Date())
+    const {
+      container: inputStyles,
+      iconSize,
+      text,
+      clearButtonSize,
+      buttonContainer,
+    } = useInputStyles(inEditable, field.size, formSize)
 
     const selectedDate = useMemo(() => (value ? new Date(value) : new Date()), [value])
     useImperativeHandle(ref, () => ({
@@ -77,17 +86,25 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={[styles.button, inputStyles.input]}
+          style={[styles.button, inputStyles]}
           onPress={() => {
             setShowDatePicker(true)
             onFocus()
           }}>
-          <Text style={[styles.text, { color: inputColor }]}>{formattedValue ?? placeholder}</Text>
-          <Ionicons name="calendar" size={20} color={iconColor} style={styles.icon} />
-          <Ionicons name="time" size={20} color={iconColor} style={styles.icon} />
-          {optional && value ? (
-            <DateInputClearButton onPress={() => onChange(null)} isActive={!!value} />
-          ) : null}
+          <Text style={[styles.text, text, { color: inputColor }]}>
+            {formattedValue ?? placeholder}
+          </Text>
+          <View style={buttonContainer}>
+            <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            <Ionicons name="time" size={iconSize} color={iconColor} />
+            {optional && value ? (
+              <DateInputClearButton
+                size={clearButtonSize}
+                onPress={() => onChange(null)}
+                isActive={!!value}
+              />
+            ) : null}
+          </View>
         </TouchableOpacity>
         <Portal>
           {showDatePicker && (
@@ -132,10 +149,6 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   text: {
-    fontSize: 16,
     flex: 1,
   },
-  icon: {
-    marginRight: 10,
-  },
 })

package/src/components/form/input/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from './useInputImperativeHandle'
-export * from './useInputStyle'
+export * from './useInputStyles'