@diceui/tags-input 0.0.1

package/dist/index.d.cts

@@ -0,0 +1,126 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import * as React from 'react';
+import { Direction } from '@diceui/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. */
+    required?: boolean;
+    /** Name of the form field when used in a form. */
+    name?: string;
+    /**
+     * 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;
+    /** 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> {
+    value: InputValue;
+    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 Delete: 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 Text: 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, Delete, Input, Item, Label, Root, TagsInputClear, type TagsInputClearProps, TagsInputInput, type TagsInputInputProps, TagsInputItem, TagsInputItemDelete, type TagsInputItemDeleteProps, type TagsInputItemProps, TagsInputItemText, type TagsInputItemTextProps, TagsInputLabel, type TagsInputLabelProps, TagsInputRoot, type TagsInputRootProps, Text };

package/dist/index.d.ts

@@ -0,0 +1,126 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import * as React from 'react';
+import { Direction } from '@diceui/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. */
+    required?: boolean;
+    /** Name of the form field when used in a form. */
+    name?: string;
+    /**
+     * 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;
+    /** 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> {
+    value: InputValue;
+    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 Delete: 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 Text: 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, Delete, Input, Item, Label, Root, TagsInputClear, type TagsInputClearProps, TagsInputInput, type TagsInputInputProps, TagsInputItem, TagsInputItemDelete, type TagsInputItemDeleteProps, type TagsInputItemProps, TagsInputItemText, type TagsInputItemTextProps, TagsInputLabel, type TagsInputLabelProps, TagsInputRoot, type TagsInputRootProps, Text };