@nopends-ui/tags-input/dist/index.d.cts

Tags Input is a component that allows users to input tags.

import * as React from 'react';
import { Primitive, Direction } from '@nopends-ui/shared';

interface TagsInputInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
}
declare const TagsInputInput: React.ForwardRefExoticComponent<TagsInputInputProps & React.RefAttributes<HTMLInputElement>>;
declare const Input: React.ForwardRefExoticComponent<TagsInputInputProps & React.RefAttributes<HTMLInputElement>>;

type InputValue = string;
interface TagsInputRootProps<T = InputValue> extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, "value" | "defaultValue" | "onValueChange" | "onInvalid" | "children"> {
    /** Controlled array of tag values. */
    value?: T[];
    /** Initial array of tag values when uncontrolled. */
    defaultValue?: T[];
    /** Callback function to handle changes in the tag values. */
    onValueChange?: (value: T[]) => void;
    /** Callback function to validate tags before they're added. */
    onValidate?: (value: T) => boolean;
    /** Callback function to handle invalid input. */
    onInvalid?: (value: T) => void;
    /** Function to convert a tag value to its display string representation. */
    displayValue?: (value: T) => string;
    /**
     * Enable adding tags by pasting text, which will be split by the delimiter.
     * @default false
     */
    addOnPaste?: boolean;
    /**
     * Enable adding tags when Tab key is pressed.
     * @default false
     */
    addOnTab?: boolean;
    /**
     * Disables the entire tags input.
     * @default false
     */
    disabled?: boolean;
    /**
     * Allow editing of existing tags
     * @default false
     */
    editable?: boolean;
    /**
     * Enable wrapping focus from last to first tag and vice versa.
     * @default false
     */
    loop?: boolean;
    /**
     * Behavior when the input loses focus.
     * - "add": Add the current input value as a new tag.
     * - "clear": Reset the input field, removing its value.
     * By default, the input value will stay in the input field.
     * Can be overridden by the preventDefault() call in the input's onBlur handler.
     */
    blurBehavior?: "add" | "clear";
    /**
     * Character used to split pasted text into multiple tags.
     * @default ","
     */
    delimiter?: string;
    /**
     * Maximum number of tags allowed.
     * @default Number.POSITIVE_INFINITY
     */
    max?: number;
    /**
     * Whether the field is required in a form context.
     * @default false
     */
    required?: boolean;
    /**
     * Whether the tags input is read-only.
     * @default false
     */
    readOnly?: boolean;
    /**
     * The content of the tags input.
     *
     * Can be a function that receives the current value as an argument,
     * or a React node.
     * @default undefined
     */
    children?: ((context: {
        value: InputValue[];
    }) => React.ReactNode) | React.ReactNode;
    /**
     * The reading direction of the tags input.
     * @default "ltr"
     */
    dir?: Direction;
    /** Name of the form field when used in a form. */
    name?: string;
    /** Unique identifier for the tags input. */
    id?: string;
}
declare const TagsInputRoot: React.ForwardRefExoticComponent<TagsInputRootProps<string> & React.RefAttributes<HTMLDivElement>>;
declare const Root: React.ForwardRefExoticComponent<TagsInputRootProps<string> & React.RefAttributes<HTMLDivElement>>;

interface TagsInputLabelProps extends React.ComponentPropsWithoutRef<typeof Primitive.label> {
}
declare const TagsInputLabel: React.ForwardRefExoticComponent<TagsInputLabelProps & React.RefAttributes<HTMLLabelElement>>;
declare const Label: React.ForwardRefExoticComponent<TagsInputLabelProps & React.RefAttributes<HTMLLabelElement>>;

interface TagsInputItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
    /** The value of the item. */
    value: InputValue;
    /** Whether the item is disabled. */
    disabled?: boolean;
}
declare const TagsInputItem: React.ForwardRefExoticComponent<TagsInputItemProps & React.RefAttributes<HTMLDivElement>>;
declare const Item: React.ForwardRefExoticComponent<TagsInputItemProps & React.RefAttributes<HTMLDivElement>>;

interface TagsInputItemDeleteProps extends React.ComponentPropsWithoutRef<typeof Primitive.button> {
}
declare const TagsInputItemDelete: React.ForwardRefExoticComponent<TagsInputItemDeleteProps & React.RefAttributes<HTMLButtonElement>>;
declare const ItemDelete: React.ForwardRefExoticComponent<TagsInputItemDeleteProps & React.RefAttributes<HTMLButtonElement>>;

interface TagsInputItemTextProps extends React.ComponentPropsWithoutRef<typeof Primitive.span> {
}
declare const TagsInputItemText: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;
declare const ItemText: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;

interface TagsInputClearProps extends React.ComponentPropsWithoutRef<typeof Primitive.button> {
    /**
     * Whether the clear button should always be rendered.
     *
     * Can be used to animate the enter and exit of the clear button.
     * @default false
     */
    forceMount?: boolean;
}
declare const TagsInputClear: React.ForwardRefExoticComponent<TagsInputClearProps & React.RefAttributes<HTMLButtonElement>>;
declare const Clear: React.ForwardRefExoticComponent<TagsInputClearProps & React.RefAttributes<HTMLButtonElement>>;

export { Clear, Input, Item, ItemDelete, ItemText, Label, Root, TagsInputClear, type TagsInputClearProps, TagsInputInput, type TagsInputInputProps, TagsInputItem, TagsInputItemDelete, type TagsInputItemDeleteProps, type TagsInputItemProps, TagsInputItemText, type TagsInputItemTextProps, TagsInputLabel, type TagsInputLabelProps, TagsInputRoot, type TagsInputRootProps };