@vacano/ui 1.12.1 → 1.13.0

package/dist/form.d.ts

@@ -0,0 +1,540 @@
+import { ChangeEventHandler } from 'react';
+import { Control } from 'react-hook-form';
+import { FieldPath } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from '@emotion/react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+declare type AutocompleteClassNames = {
+    input?: string;
+    label?: string;
+    dropdown?: string;
+    item?: string;
+};
+
+declare type AutocompleteProps = VacanoComponentProps<HTMLInputElement, AutocompleteClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'onChange' | 'value'> & {
+    value?: AutocompleteValue;
+    onChange?: (value: AutocompleteValue) => void;
+    onSearch: (query: string) => Promise<AutocompleteSuggestion[]>;
+    debounceMs?: number;
+    minChars?: number;
+    fullWidth?: boolean;
+    label?: string;
+    size?: VacanoComponentSize;
+    variant?: AutocompleteVariant;
+    noResultsMessage?: string;
+    message?: string;
+};
+
+declare type AutocompleteSuggestion = {
+    id: string;
+    value: string;
+    image_url: string | null;
+};
+
+declare type AutocompleteValue = {
+    value: string;
+    image_url: string | null;
+};
+
+declare type AutocompleteVariant = 'normal' | 'error';
+
+declare type CheckboxCardClassNames = {
+    checkbox?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+declare type CheckboxCardProps = VacanoComponentProps<HTMLInputElement, CheckboxCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    variant?: CheckboxCardVariant;
+};
+
+declare type CheckboxCardVariant = 'normal' | 'error';
+
+declare type CheckboxClassNames = {
+    input?: string;
+    box?: string;
+    icon?: string;
+    label?: string;
+};
+
+declare type CheckboxGroupClassNames = {
+    label?: string;
+    options?: string;
+    checkbox?: string;
+};
+
+declare type CheckboxGroupOption = {
+    label: string;
+    value: string;
+};
+
+declare type CheckboxGroupProps = VacanoComponentProps<HTMLDivElement, CheckboxGroupClassNames> & {
+    options: CheckboxGroupOption[];
+    value: string[];
+    onChange: (values: string[]) => void;
+    label?: string;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+};
+
+declare type CheckboxProps = VacanoComponentProps<HTMLInputElement, CheckboxClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    indeterminate?: boolean;
+    label?: ReactNode;
+    variant?: CheckboxVariant;
+};
+
+declare type CheckboxVariant = 'normal' | 'error';
+
+declare type DatePickerClassNames = {
+    trigger?: string;
+    calendar?: string;
+    header?: string;
+    grid?: string;
+    cell?: string;
+};
+
+declare type DatePickerMode = 'date' | 'month' | 'year';
+
+declare type DatePickerProps = VacanoComponentProps<HTMLDivElement, DatePickerClassNames> & {
+    /** Selected date value */
+    value?: Date | null;
+    /** Callback when date changes */
+    onChange?: (date: Date | null) => void;
+    /** Selection mode */
+    mode?: DatePickerMode;
+    /** Display format using Go-style date formatting (e.g., "02.01.2006", "January 2006") */
+    displayFormat?: string;
+    /** Placeholder text when no date selected */
+    placeholder?: string;
+    /** Locale for month/weekday names (e.g., "en-US", "ru", "de") */
+    locale?: string;
+    /** First day of week: 0 = Sunday, 1 = Monday */
+    weekStartsOn?: 0 | 1;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Input size variant */
+    size?: VacanoComponentSize;
+    /** Input style variant */
+    variant?: DatePickerVariant;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Full width mode */
+    fullWidth?: boolean;
+    /** Label text */
+    label?: string;
+    /** Portal render node for dropdown (for overflow hidden containers) */
+    portalRenderNode?: HTMLElement | null;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when dropdown opens */
+    onOpen?: () => void;
+    /** Callback when dropdown closes */
+    onClose?: () => void;
+    /** Message text below the picker */
+    message?: string;
+};
+
+declare type DatePickerVariant = 'normal' | 'error';
+
+export declare const FormAutocomplete: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormAutocompleteProps<T>) => JSX.Element;
+
+export declare type FormAutocompleteProps<T extends FieldValues> = Omit<AutocompleteProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormCheckbox: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormCheckboxProps<T>) => JSX.Element;
+
+export declare const FormCheckboxCard: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormCheckboxCardProps<T>) => JSX.Element;
+
+export declare type FormCheckboxCardProps<T extends FieldValues> = Omit<CheckboxCardProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormCheckboxGroup: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormCheckboxGroupProps<T>) => JSX.Element;
+
+export declare type FormCheckboxGroupProps<T extends FieldValues> = Omit<CheckboxGroupProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare type FormCheckboxProps<T extends FieldValues> = Omit<CheckboxProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormDatePicker: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormDatePickerProps<T>) => JSX.Element;
+
+export declare type FormDatePickerProps<T extends FieldValues> = Omit<DatePickerProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormInput: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormInputProps<T>) => JSX.Element;
+
+export declare type FormInputProps<T extends FieldValues> = InputProps & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormMultiSelect: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormMultiSelectProps<T>) => JSX.Element;
+
+export declare type FormMultiSelectProps<T extends FieldValues> = Omit<MultiSelectProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormOtpCode: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormOtpCodeProps<T>) => JSX.Element;
+
+export declare type FormOtpCodeProps<T extends FieldValues> = Omit<OtpCodeProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormRadio: <T extends FieldValues = FieldValues>({ control, name, value, ...props }: FormRadioProps<T>) => JSX.Element;
+
+export declare const FormRadioCard: <T extends FieldValues = FieldValues>({ control, name, value, ...props }: FormRadioCardProps<T>) => JSX.Element;
+
+export declare type FormRadioCardProps<T extends FieldValues> = Omit<RadioCardProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormRadioGroup: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormRadioGroupProps<T>) => JSX.Element;
+
+export declare type FormRadioGroupProps<T extends FieldValues> = Omit<RadioGroupProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare type FormRadioProps<T extends FieldValues> = Omit<RadioProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormSelect: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormSelectProps<T>) => JSX.Element;
+
+export declare type FormSelectProps<T extends FieldValues> = Omit<SelectProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormTags: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormTagsProps<T>) => JSX.Element;
+
+export declare type FormTagsProps<T extends FieldValues> = Omit<TagsProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormTextarea: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormTextareaProps<T>) => JSX.Element;
+
+export declare type FormTextareaProps<T extends FieldValues> = TextareaProps & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormToggle: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormToggleProps<T>) => JSX.Element;
+
+export declare const FormToggleCard: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormToggleCardProps<T>) => JSX.Element;
+
+export declare type FormToggleCardProps<T extends FieldValues> = Omit<ToggleCardProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare const FormToggleGroup: <T extends FieldValues = FieldValues>({ control, name, ...props }: FormToggleGroupProps<T>) => JSX.Element;
+
+export declare type FormToggleGroupProps<T extends FieldValues> = Omit<ToggleGroupProps, 'value' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+export declare type FormToggleProps<T extends FieldValues> = Omit<ToggleProps, 'checked' | 'onChange'> & {
+    name: FieldPath<T>;
+    control: Control<T>;
+};
+
+declare type InputClassNames = {
+    input?: string;
+    label?: string;
+};
+
+declare type InputProps = VacanoComponentProps<HTMLInputElement, InputClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> & {
+    fullWidth?: boolean;
+    label?: string;
+    size?: VacanoComponentSize;
+    variant?: InputVariant;
+    message?: string;
+    prefix?: ReactNode;
+};
+
+declare type InputVariant = 'normal' | 'error';
+
+declare type MultiSelectClassNames = {
+    trigger?: string;
+    chips?: string;
+    chip?: string;
+    placeholder?: string;
+    modal?: string;
+    search?: string;
+    options?: string;
+    option?: string;
+    empty?: string;
+};
+
+declare type MultiSelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+
+declare type MultiSelectProps = VacanoComponentProps<HTMLDivElement, MultiSelectClassNames> & {
+    value: string[];
+    options: MultiSelectOption[];
+    onChange: (value: string[]) => void;
+    label?: string;
+    placeholder?: string;
+    variant?: MultiSelectVariant;
+    disabled?: boolean;
+    maxVisible?: number;
+    emptyMessage?: ReactNode;
+    searchPlaceholder?: string;
+    modalTitle?: string;
+    message?: string;
+};
+
+declare type MultiSelectVariant = 'normal' | 'error';
+
+declare type OtpCodeClassNames = {
+    container?: string;
+    input?: string;
+    label?: string;
+};
+
+declare type OtpCodeProps = VacanoComponentProps<HTMLDivElement, OtpCodeClassNames> & {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    label?: string;
+    length?: number;
+    onChange?: (value: string) => void;
+    size?: VacanoComponentSize;
+    value?: string;
+    variant?: OtpCodeVariant;
+    message?: string;
+};
+
+declare type OtpCodeVariant = 'normal' | 'error';
+
+declare type RadioCardClassNames = {
+    radio?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+declare type RadioCardProps = VacanoComponentProps<HTMLInputElement, RadioCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    variant?: RadioCardVariant;
+};
+
+declare type RadioCardVariant = 'normal' | 'error';
+
+declare type RadioClassNames = {
+    input?: string;
+    box?: string;
+    dot?: string;
+    label?: string;
+};
+
+declare type RadioGroupClassNames = {
+    label?: string;
+    options?: string;
+    radio?: string;
+};
+
+declare type RadioGroupOption<T extends string = string> = {
+    label: string;
+    value: T;
+};
+
+declare type RadioGroupProps<T extends string = string> = VacanoComponentProps<HTMLDivElement, RadioGroupClassNames> & {
+    options: RadioGroupOption<T>[];
+    value: T | null;
+    onChange: (value: T) => void;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    variant?: RadioVariant;
+};
+
+declare type RadioProps = VacanoComponentProps<HTMLInputElement, RadioClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label?: ReactNode;
+    variant?: RadioVariant;
+};
+
+declare type RadioVariant = 'normal' | 'error';
+
+declare type SelectClassNames = {
+    label?: string;
+    trigger?: string;
+    dropdown?: string;
+    option?: string;
+};
+
+declare type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+
+declare type SelectProps = VacanoComponentProps<HTMLDivElement, SelectClassNames> & {
+    value: string;
+    options: SelectOption[];
+    onChange?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    variant?: SelectVariant;
+    size?: VacanoComponentSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    message?: string;
+    portalRenderNode?: HTMLElement | null;
+};
+
+declare type SelectVariant = 'normal' | 'error';
+
+declare type TagsClassNames = {
+    trigger?: string;
+    chip?: string;
+    input?: string;
+    dropdown?: string;
+    option?: string;
+    empty?: string;
+};
+
+declare type TagsCreateKey = 'Tab' | 'Enter';
+
+declare type TagsOption = {
+    value: string;
+    label: string;
+};
+
+declare type TagsProps = VacanoComponentProps<HTMLDivElement, TagsClassNames> & {
+    value: string[];
+    onChange: (value: string[]) => void;
+    options?: TagsOption[];
+    label?: string;
+    placeholder?: string;
+    variant?: TagsVariant;
+    disabled?: boolean;
+    freeSolo?: boolean;
+    createKey?: TagsCreateKey;
+    emptyMessage?: ReactNode;
+    portalRenderNode?: HTMLElement | null;
+    message?: string;
+};
+
+declare type TagsVariant = 'normal' | 'error';
+
+declare type TextareaClassNames = {
+    textarea?: string;
+    label?: string;
+};
+
+declare type TextareaProps = VacanoComponentProps<HTMLTextAreaElement, TextareaClassNames> & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> & {
+    fullWidth?: boolean;
+    label?: string;
+    variant?: TextareaVariant;
+    message?: string;
+    count?: number;
+};
+
+declare type TextareaVariant = 'normal' | 'error';
+
+declare type ToggleCardClassNames = {
+    toggle?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+declare type ToggleCardProps = VacanoComponentProps<HTMLInputElement, ToggleCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    variant?: ToggleCardVariant;
+};
+
+declare type ToggleCardVariant = 'normal' | 'error';
+
+declare type ToggleClassNames = {
+    input?: string;
+    track?: string;
+    thumb?: string;
+    label?: string;
+};
+
+declare type ToggleGroupClassNames = {
+    label?: string;
+    options?: string;
+    toggle?: string;
+};
+
+declare type ToggleGroupOption = {
+    label: string;
+    value: string;
+};
+
+declare type ToggleGroupProps = VacanoComponentProps<HTMLDivElement, ToggleGroupClassNames> & {
+    options: ToggleGroupOption[];
+    value: string[];
+    onChange: (values: string[]) => void;
+    label?: string;
+    disabled?: boolean;
+    variant?: ToggleVariant;
+};
+
+declare type ToggleProps = VacanoComponentProps<HTMLInputElement, ToggleClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label?: ReactNode;
+    variant?: ToggleVariant;
+};
+
+declare type ToggleVariant = 'normal' | 'error';
+
+declare type VacanoComponentClassNames<T> = T;
+
+declare type VacanoComponentProps<E extends HTMLElement | null, T extends Record<string, string> = Record<string, never>> = {
+    'data-test-id'?: string;
+    className?: string;
+    classnames?: VacanoComponentClassNames<T>;
+    ref?: Ref<E>;
+};
+
+declare type VacanoComponentSize = 'compact' | 'default';
+
+export { }