ivt/dist/form-layout/index.d.ts

Ivt Components Library

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';
import React__default from 'react';
import { FieldValues, FieldPath, UseFormReturn, Control } from 'react-hook-form';
import { DayPicker, DateRange, Matcher } from 'react-day-picker';
import { B as Button, a as ButtonProps } from '../chunks/button-CHGYaAzJ.js';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import 'class-variance-authority/types';
import 'class-variance-authority';

declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, fromYear, toYear, ...props }: React.ComponentProps<typeof DayPicker> & {
    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
}): react_jsx_runtime.JSX.Element;

declare function Popover({ ...props }: React__default.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;

interface CalendarRangeProps extends Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "disabled"> {
    /** Intervalo de datas selecionado (com `from` e `to`) */
    value: DateRange | null | undefined;
    /** Função chamada ao alterar o intervalo de datas selecionado */
    onChange: (range: DateRange | null | undefined) => void;
    /** Texto exibido quando não há intervalo selecionado */
    placeholder?: string;
    /** ID opcional do botão */
    id?: string;
    /** Props extras para o botão */
    buttonProps?: ButtonProps;
    /** Props extras para o popover */
    popoverProps?: React.ComponentProps<typeof Popover>;
    /** Classe extra para o conteúdo do popover */
    popoverContentClassName?: string;
    /** Classe extra para o botão */
    className?: string;
    /** Desabilita o botão e impede a seleção de datas */
    disabled?: Matcher | Matcher[] | boolean;
    /** Função para retornar mensagem de tooltip para datas desabilitadas */
    disabledDateTooltip?: (date: Date) => string | undefined;
    /**
     * Mês padrão a ser mostrado (caso nenhuma data esteja selecionada)
     * Por padrão, será o mês atual.
     */
    defaultMonth?: Date;
    /** Exibir opções de intervalos rápidos (Hoje, Esta Semana, etc) */
    showQuickRanges?: boolean;
    /** Opções de intervalos rápidos personalizadas (substitui as padrão se fornecidas e showQuickRanges for true) */
    quickRanges?: QuickRange[];
    /**
     * Define se o botão de limpar (X) o intervalo deve ser exibido.
     * @default true
     */
    clearable?: boolean;
}
interface QuickRange {
    label: string;
    getRange: () => DateRange;
}

type FormFieldType = "text" | "email" | "url" | "tel" | "textarea" | "number" | "numberRange" | "currency" | "pattern" | "select" | "multiselect" | "date" | "date-picker" | "dateRange" | "checkbox" | "switch" | "radio" | "slider" | "otp" | "toggle" | "autocomplete" | "combobox" | "file" | "custom";
interface FormFieldConfig<T extends FieldValues> {
    name: FieldPath<T>;
    label: string | null;
    type: FormFieldType;
    placeholder?: string;
    description?: React.ReactNode;
    required?: boolean;
    isCheckboxDefault?: boolean;
    disabled?: boolean;
    cols?: number;
    className?: string;
    inlineElement?: React.ReactNode;
    options?: {
        label: string;
        value: string | number;
    }[] | string[];
    items?: string[];
    allowNegative?: boolean;
    maxLength?: number;
    endAdornment?: (value: any) => React.ReactNode;
    decimalScale?: number;
    prefix?: string;
    format?: string;
    mask?: string;
    radioOptions?: {
        label: string;
        value: string;
    }[];
    otpLength?: number;
    sliderRange?: {
        min: number;
        max: number;
        step?: number;
    };
    autocompleteConfig?: {
        fetchOptions: (term: string) => Promise<Array<{
            id: number | string;
            label: string;
            [key: string]: any;
        }>>;
        getOptionLabel?: (option: any) => string;
        getOptionKey?: (option: any) => number | string;
        getOptionValue?: (option: any) => any;
        searchPlaceholder?: string;
        messageEmpty?: string;
        onChangeCallback?: (option: any, form: UseFormReturn<T>) => void;
        clearable?: boolean;
        className?: string;
    };
    multiSelectConfig?: {
        maxCount?: number;
        subtle?: boolean;
        searchPlaceholder?: string;
        emptyMessage?: string;
        groupHeading?: string;
        normalizeSearch?: boolean;
        valueType?: "number" | "string";
    };
    comboboxConfig?: {
        items: {
            value: string;
            label: string;
        }[];
        searchPlaceholder?: string;
        emptyMessage?: string;
        groupHeading?: string;
        normalizeSearch?: boolean;
        valueType?: "number" | "string";
    };
    dateConfig?: Omit<CalendarRangeProps, "value" | "onChange" | "id" | "className">;
    fileConfig?: {
        accept?: string;
    };
    selectConfig?: {
        clearable?: boolean;
    };
    render?: (props: {
        field: any;
        form: UseFormReturn<T>;
    }) => React.ReactNode;
}
interface FormSectionConfig<T extends FieldValues> {
    title?: string;
    description?: string;
    fields: FormFieldConfig<T>[];
}
interface BaseFormFieldProps<T extends FieldValues> {
    config: FormFieldConfig<T>;
    control: Control<T>;
    readOnly?: boolean;
    form?: UseFormReturn<T>;
}
declare function BaseFormField<T extends FieldValues>({ config, control, readOnly, form, }: BaseFormFieldProps<T>): react_jsx_runtime.JSX.Element;
declare namespace BaseFormField {
    var displayName: string;
}
interface FormLayoutProps<T extends FieldValues> {
    form: UseFormReturn<T>;
    sections?: FormSectionConfig<T>[];
    onSubmit?: (values: T) => void;
    onError?: (errors: any) => void;
    formId?: string;
    title?: string;
    description?: string;
    headerContent?: React.ReactNode;
    readOnly?: boolean;
    formRef?: React.RefObject<HTMLFormElement | null>;
    children?: React.ReactNode;
    stepNavigator?: React.ReactNode;
}
declare function FormLayout<T extends FieldValues>({ form, sections, onSubmit, onError, formId, title, description, headerContent, readOnly, formRef, children, stepNavigator, }: FormLayoutProps<T>): react_jsx_runtime.JSX.Element;
declare namespace FormLayout {
    var displayName: string;
}

export { BaseFormField, FormLayout };
export type { BaseFormFieldProps, FormFieldConfig, FormFieldType, FormLayoutProps, FormSectionConfig };