@nestledjs/forms-native 0.1.0

package/lib/themes/default.d.ts

@@ -0,0 +1,933 @@
+/**
+ * Default native theme using StyleSheet.create.
+ * Provides a clean, Material-ish look out of the box.
+ * Each field component can override these via *Style props,
+ * or bypass them entirely with the `unstyled` prop for NativeWind users.
+ */
+export declare const defaultNativeTheme: {
+    readonly global: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        inputFocused: {
+            borderColor: string;
+            borderWidth: number;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnly: {
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        readOnlyText: {
+            fontSize: number;
+            color: string;
+        };
+        errorText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        fieldWrapper: {
+            marginBottom: number;
+        };
+    };
+    readonly label: {
+        base: {
+            fontSize: number;
+            fontWeight: "500";
+            color: string;
+            marginBottom: number;
+        };
+        requiredIndicator: {
+            color: string;
+            fontSize: number;
+        };
+    };
+    readonly textField: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnly: {
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        readOnlyText: {
+            fontSize: number;
+            color: string;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly textAreaField: {
+        textarea: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+            textAlignVertical: "top";
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly emailField: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+    };
+    readonly passwordField: {
+        container: {
+            position: "relative";
+        };
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            paddingRight: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        toggleButton: {
+            position: "absolute";
+            right: number;
+            top: number;
+            bottom: number;
+            justifyContent: "center";
+        };
+        toggleText: {
+            fontSize: number;
+            color: string;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly urlField: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly numberField: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly moneyField: {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        currencySymbol: {
+            fontSize: number;
+            color: string;
+            paddingHorizontal: number;
+        };
+        currencySymbolHidden: {
+            opacity: number;
+        };
+        input: {
+            flex: number;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+    };
+    readonly phoneField: {
+        input: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly checkbox: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        row: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: number;
+        };
+        label: {
+            fontSize: number;
+            color: string;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        errorMessage: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        disabled: {
+            opacity: number;
+        };
+        readOnly: {
+            fontSize: number;
+            color: string;
+        };
+    };
+    readonly customCheckbox: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        row: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: number;
+        };
+        checkboxContainer: {
+            width: number;
+            height: number;
+            justifyContent: "center";
+            alignItems: "center";
+        };
+        label: {
+            fontSize: number;
+            color: string;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        disabled: {
+            opacity: number;
+        };
+        readOnly: {
+            fontSize: number;
+            color: string;
+        };
+        checked: {};
+        error: {};
+    };
+    readonly switchField: {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        label: {
+            fontSize: number;
+            color: string;
+            flex: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        disabled: {
+            opacity: number;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+        };
+        error: {};
+    };
+    readonly checkboxGroup: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        containerColumn: {
+            flexDirection: "column";
+            gap: number;
+        };
+        containerRow: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+            gap: number;
+        };
+        optionContainer: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: number;
+        };
+        label: {
+            fontSize: number;
+            color: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+        };
+        readOnlySelected: {
+            fontSize: number;
+            color: string;
+        };
+        readOnlyUnselected: {
+            fontSize: number;
+            color: string;
+        };
+        disabled: {
+            opacity: number;
+        };
+    };
+    readonly button: {
+        base: {
+            borderRadius: number;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        primary: {
+            backgroundColor: string;
+        };
+        secondary: {
+            backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+        };
+        danger: {
+            backgroundColor: string;
+        };
+        disabled: {
+            opacity: number;
+        };
+        loading: {
+            opacity: number;
+        };
+        fullWidth: {
+            width: "100%";
+        };
+        text: {
+            fontSize: number;
+            fontWeight: "600";
+        };
+        primaryText: {
+            color: string;
+        };
+        secondaryText: {
+            color: string;
+        };
+        dangerText: {
+            color: string;
+        };
+        disabledText: {
+            color: string;
+        };
+    };
+    readonly datePicker: {
+        trigger: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            backgroundColor: string;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        triggerText: {
+            fontSize: number;
+            color: string;
+        };
+        placeholderText: {
+            fontSize: number;
+            color: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly dateTimePicker: {
+        trigger: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            backgroundColor: string;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        triggerText: {
+            fontSize: number;
+            color: string;
+        };
+        placeholderText: {
+            fontSize: number;
+            color: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly timePicker: {
+        trigger: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            backgroundColor: string;
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        triggerText: {
+            fontSize: number;
+            color: string;
+        };
+        placeholderText: {
+            fontSize: number;
+            color: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly selectField: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        container: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        placeholder: {
+            fontSize: number;
+            color: string;
+        };
+        selectedText: {
+            fontSize: number;
+            color: string;
+        };
+        itemText: {
+            fontSize: number;
+            color: string;
+        };
+        selectedItem: {
+            backgroundColor: string;
+        };
+    };
+    readonly multiSelect: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        container: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        selectedItem: {
+            backgroundColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            marginRight: number;
+            marginBottom: number;
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        selectedItemText: {
+            fontSize: number;
+            color: string;
+        };
+        removeButton: {
+            marginLeft: number;
+            padding: number;
+        };
+        removeButtonText: {
+            fontSize: number;
+            color: string;
+        };
+        placeholder: {
+            fontSize: number;
+            color: string;
+        };
+    };
+    readonly radioField: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        containerColumn: {
+            flexDirection: "column";
+            gap: number;
+        };
+        containerRow: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+            gap: number;
+        };
+        optionContainer: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: number;
+        };
+        radio: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            borderWidth: number;
+            borderColor: string;
+            justifyContent: "center";
+            alignItems: "center";
+        };
+        radioSelected: {
+            borderColor: string;
+        };
+        radioInner: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        label: {
+            fontSize: number;
+            color: string;
+        };
+        disabled: {
+            opacity: number;
+        };
+        readOnlySelected: {
+            flexDirection: "row";
+            alignItems: "center";
+            gap: number;
+        };
+        readOnlyUnselected: {
+            fontSize: number;
+            color: string;
+        };
+        subOptionInput: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+            marginTop: number;
+            marginLeft: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly searchSelect: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        container: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+        placeholder: {
+            fontSize: number;
+            color: string;
+        };
+        inputSearch: {
+            fontSize: number;
+            color: string;
+        };
+    };
+    readonly customField: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        readOnlyValue: {
+            fontSize: number;
+            color: string;
+            minHeight: number;
+            justifyContent: "center";
+            paddingHorizontal: number;
+        };
+        errorText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly markdownEditor: {
+        wrapper: {
+            flexDirection: "column";
+        };
+        editor: {
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            backgroundColor: string;
+            overflow: "hidden";
+        };
+        toolbar: {
+            flexDirection: "row";
+            borderBottomWidth: number;
+            borderBottomColor: string;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            gap: number;
+        };
+        toolbarButton: {
+            padding: number;
+            borderRadius: number;
+        };
+        toolbarButtonText: {
+            fontSize: number;
+            fontWeight: "600";
+            color: string;
+        };
+        textInput: {
+            padding: number;
+            fontSize: number;
+            color: string;
+            textAlignVertical: "top";
+        };
+        preview: {
+            padding: number;
+        };
+        toggleContainer: {
+            flexDirection: "row";
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        toggleButton: {
+            flex: number;
+            paddingVertical: number;
+            alignItems: "center";
+        };
+        toggleButtonActive: {
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
+        toggleButtonText: {
+            fontSize: number;
+            color: string;
+        };
+        toggleButtonTextActive: {
+            color: string;
+            fontWeight: "600";
+        };
+        error: {
+            borderColor: string;
+        };
+        disabled: {
+            opacity: number;
+            backgroundColor: string;
+        };
+        readOnlyValue: {
+            padding: number;
+        };
+        helpText: {
+            color: string;
+            fontSize: number;
+            marginTop: number;
+        };
+    };
+    readonly contentField: {
+        wrapper: {
+            flexDirection: "column";
+        };
+    };
+};
+export type NativeTheme = typeof defaultNativeTheme;