import { type ChangeEventHandler, type FocusEventHandler, type HTMLAttributes, type JSX } from "react";
import type { BaseSchema } from "valibot";
import { type ValidationProps } from "../../../hook/useInputValidation";
import { caption } from "../../typography";
import type { InputProps } from "../input";
/**
 * Props passed to the custom render function for each chip.
 */
type RenderProps = {
    /** The text value of the chip. */
    value: string;
    /** Whether the chip is currently focused (e.g., for deletion). */
    isFocus: boolean;
    /** Callback to delete the chip. */
    onDelete: () => void;
};
/**
 * Function signature for rendering a custom chip.
 */
type RenderFn = (props: RenderProps) => JSX.Element;
/**
 * Props for the {@link ChipsInput} component.
 *
 * @remarks
 * Extends standard HTML div attributes (as the wrapper) and adds validation and chip-specific properties.
 */
export type ChipsInputProps<Schema extends BaseSchema<any, any, any>, InputSchema extends BaseSchema<any, any, any>> = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "children"> & ValidationProps<Schema> & {
    /** Whether the field is required. */
    required?: boolean;
    /**
     * The character used to separate values in the hidden input and when pasting.
     * @defaultValue ","
     */
    separator?: string;
    /** Initial value as a separated string. */
    defaultValue?: string;
    /** Controlled value as a separated string. */
    value?: string;
    /** Custom render function for chips. */
    render?: RenderFn;
    /** Name attribute for the hidden input. */
    name?: string;
    /** Callback when the hidden input value changes. */
    onChange?: ChangeEventHandler<HTMLInputElement>;
    /** Callback when the input is blurred. */
    onBlur?: FocusEventHandler<HTMLInputElement>;
    /** Props passed to the internal text input. */
    input?: InputProps<InputSchema>;
};
/**
 * A component that allows users to enter multiple values as "chips".
 *
 * @remarks
 * This component manages a list of strings, rendering them as chips. It uses a hidden input
 * to store the joined values (separated by `separator`) for form submission.
 * Users can add chips by typing and pressing Enter, or by pasting text containing the separator.
 * Chips can be deleted by backspacing or clicking a delete button (if provided in `render`).
 *
 * @param props - The component props.
 * @returns The rendered chips input component.
 *
 * @example
 * ```tsx
 * import { string, array, minLength } from 'valibot';
 * import { ChipsInput, Chip, RemoveChipButton } from './chip_input';
 *
 * function TagsInput() {
 *   return (
 *     <ChipsInput
 *       name="tags"
 *       separator=","
 *       render={({ value, isFocus, onDelete }) => (
 *         <Chip className={isFocus ? 'focused' : ''}>
 *           {value}
 *           <RemoveChipButton onClick={onDelete} />
 *         </Chip>
 *       )}
 *     />
 *   );
 * }
 * ```
 */
export declare function ChipsInput<Schema extends BaseSchema<any, any, any>, InputSchema extends BaseSchema<any, any, any>>({ separator, onChange, className, value, defaultValue, render, name, id, validate, onValidationError, required, onBlur, input: { validate: validateInput, onValidationError: onInputValidationError, ...inputProps }, ...props }: ChipsInputProps<Schema, InputSchema>): JSX.Element;
/**
 * A button component for removing a chip.
 *
 * @param props - Standard HTML button attributes.
 * @returns The rendered button element.
 *
 * @example
 * ```tsx
 * <RemoveChipButton onClick={handleRemove} />
 * ```
 */
export declare let RemoveChipButton: ({ className, ...props }: JSX.IntrinsicElements["button"]) => JSX.Element;
/**
 * Creates a function to parse a separated string into an array of values.
 *
 * @param separator - The separator character.
 * @returns A function that takes a string and returns an array of trimmed, non-empty strings.
 */
export declare function makeGetValues(separator: string): (value?: string) => Array<string>;
/**
 * Props for the {@link Chip} component.
 */
export type ChipProps = JSX.IntrinsicElements["li"] & {
    /** The size of the chip text. */
    size?: keyof typeof caption;
};
/**
 * A styled chip component.
 *
 * @param props - The component props.
 * @returns The rendered chip element.
 *
 * @example
 * ```tsx
 * <Chip>React</Chip>
 * ```
 */
export declare function Chip({ children, size, ...props }: ChipProps): JSX.Element;
export {};