@spark-ui/components/dist/form-field/index.d.mts

Spark (Leboncoin design system) components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
import { b as LabelProps, c as LabelRequiredIndicatorProps } from '../LabelRequiredIndicator-DRnCzHMU.mjs';
import 'radix-ui';

interface FormFieldContextState {
    /**
     * Generated id for the input component.
     */
    id: string;
    /**
     * Generated id for the label component.
     */
    labelId?: string;
    /**
     * The name of the input. Submitted with its owning form as part of a name/value pair.
     */
    name?: string;
    /**
     * A set of ids separated by a space used to describe the input component given by a set of messages.
     */
    description?: string;
    /**
     * Disables the field and its associated input
     */
    disabled?: boolean;
    /**
     * Marks the field and its associated input as read only
     */
    readOnly?: boolean;
    /**
     * The validation state of the input.
     */
    state?: 'error' | 'success' | 'alert';
    /**
     * If true, the form field will be invalid.
     */
    isInvalid?: boolean;
    /**
     * If true, the form field will be required.
     */
    isRequired?: boolean;
    /**
     * Callback used to store a descriptive message.
     */
    onMessageIdAdd: (id: string) => void;
    /**
     * Callback used to remove a descriptive message.
     */
    onMessageIdRemove: (id: string) => void;
}

interface FormFieldProps extends ComponentPropsWithoutRef<'div'>, Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {
    /**
     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
     */
    asChild?: boolean;
    /**
     * When `true`, prevents the user from interacting.
     */
    disabled?: boolean;
    /**
     * Sets the component as interactive or not.
     */
    readOnly?: boolean;
    ref?: Ref<HTMLDivElement>;
}
declare const FormField$1: {
    ({ className, disabled, readOnly, name, state, isRequired, asChild, ref, ...others }: FormFieldProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {
    ref?: Ref<HTMLSpanElement>;
};

interface FormFieldStateMessageProps extends FormFieldMessageProps {
    state: 'error' | 'alert' | 'success';
    ref?: Ref<HTMLSpanElement>;
}
declare const FormFieldStateMessage: {
    ({ className, state, children, ref, ...others }: FormFieldStateMessageProps): react_jsx_runtime.JSX.Element | null;
    displayName: string;
};

type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldAlertMessage: {
    ({ ref, ...props }: FormFieldAlertMessageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {
    /**
     * Current value for the input this component belongs to.
     */
    value?: string;
    /**
     * Maximum numeric value to be displayed.
     */
    maxLength: number;
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldCharactersCount: {
    ({ className, value, maxLength, ref, ...others }: FormFieldCharactersCountProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type State = Partial<Pick<FormFieldContextState, 'id' | 'name' | 'description' | 'labelId' | 'disabled' | 'readOnly' | 'state' | 'isInvalid' | 'isRequired'>>;
interface FormFieldControlProps {
    children: (state: State) => ReactNode;
}
declare const useFormFieldControl: () => State;
declare const FormFieldControl: {
    ({ children }: FormFieldControlProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldErrorMessage: {
    ({ ref, ...props }: FormFieldErrorMessageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldHelperMessageProps = FormFieldMessageProps & {
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldHelperMessage: {
    ({ className, ref, ...others }: FormFieldHelperMessageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

interface FormFieldLabelProps extends LabelProps {
    /**
     * Element shown when the input is required inside the label.
     */
    requiredIndicator?: ReactNode;
    ref?: Ref<HTMLLabelElement>;
}
declare const FormFieldLabel: {
    ({ htmlFor: htmlForProp, className, children, requiredIndicator, asChild, ref, ...others }: FormFieldLabelProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldRequiredIndicator: {
    ({ className, ref, ...props }: FormFieldRequiredIndicatorProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {
    ref?: Ref<HTMLSpanElement>;
};
declare const FormFieldSuccessMessage: {
    ({ ref, ...props }: FormFieldSuccessMessageProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const FormField: typeof FormField$1 & {
    Label: typeof FormFieldLabel;
    Control: typeof FormFieldControl;
    StateMessage: typeof FormFieldStateMessage;
    SuccessMessage: typeof FormFieldSuccessMessage;
    AlertMessage: typeof FormFieldAlertMessage;
    ErrorMessage: typeof FormFieldErrorMessage;
    HelperMessage: typeof FormFieldHelperMessage;
    RequiredIndicator: typeof FormFieldRequiredIndicator;
    CharactersCount: typeof FormFieldCharactersCount;
};

export { FormField, type FormFieldAlertMessageProps, type FormFieldCharactersCountProps, FormFieldControl, type FormFieldErrorMessageProps, type FormFieldHelperMessageProps, type FormFieldLabelProps, type FormFieldProps, type FormFieldRequiredIndicatorProps, type FormFieldStateMessageProps, type FormFieldSuccessMessageProps, useFormFieldControl };