import { HTMLAttributes, MaybeRef, ComputedRef, Ref } from 'vue';
import { ElementIds } from './field.types';
import { Booleanish } from 'node_modules/@zag-js/dom-query/dist/types.d.mts';
export interface UseFieldProps {
/**
* The id of the field.
*/
id?: string;
/**
* The ids of the field parts.
*/
ids?: ElementIds;
/**
* Indicates whether the field is required.
*/
required?: boolean;
/**
* Indicates whether the field is disabled.
*/
disabled?: boolean;
/**
* Indicates whether the field is invalid.
*/
invalid?: boolean;
/**
* Indicates whether the field is read-only.
*/
readOnly?: boolean;
/**
* The target field item value the label should point to.
*/
target?: string;
}
export type UseFieldReturn = ReturnType;
export declare const useField: (props?: MaybeRef) => ComputedRef<{
ariaDescribedby: string | undefined;
ids: {
control: string;
label: string;
errorText: string;
helperText: string;
};
refs: {
rootRef: Ref;
};
disabled: boolean | undefined;
invalid: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
getLabelProps: () => {
id: string;
'data-disabled': Booleanish;
'data-invalid': Booleanish;
'data-readonly': Booleanish;
'data-required': Booleanish;
htmlFor: string;
"data-scope": string;
"data-part": string;
};
getRootProps: () => {
id: string;
role: string;
'data-disabled': Booleanish;
'data-invalid': Booleanish;
'data-readonly': Booleanish;
"data-scope": string;
"data-part": string;
};
getInputProps: () => {
"data-scope": string;
"data-part": string;
'aria-describedby': string | undefined;
'aria-invalid': "true" | undefined;
'data-invalid': Booleanish;
'data-required': Booleanish;
'data-readonly': Booleanish;
id: string;
required: boolean | undefined;
disabled: boolean | undefined;
readOnly: boolean | undefined;
};
getTextareaProps: () => {
"data-scope": string;
"data-part": string;
'aria-describedby': string | undefined;
'aria-invalid': "true" | undefined;
'data-invalid': Booleanish;
'data-required': Booleanish;
'data-readonly': Booleanish;
id: string;
required: boolean | undefined;
disabled: boolean | undefined;
readOnly: boolean | undefined;
};
getSelectProps: () => {
"data-scope": string;
"data-part": string;
'aria-describedby': string | undefined;
'aria-invalid': "true" | undefined;
'data-invalid': Booleanish;
'data-required': Booleanish;
'data-readonly': Booleanish;
id: string;
required: boolean | undefined;
disabled: boolean | undefined;
readOnly: boolean | undefined;
};
getHelperTextProps: () => {
'data-disabled': Booleanish;
"data-scope": string;
"data-part": string;
id: string;
};
getErrorTextProps: () => HTMLAttributes;
getRequiredIndicatorProps: () => HTMLAttributes;
}>;