@diceui/tags-input 0.7.3 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diceui/tags-input",
-  "version": "0.7.3",
+  "version": "1.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -18,19 +18,12 @@
     "url": "https://github.com/sadmann7/diceui",
     "directory": "packages/tags-input"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -57,7 +50,7 @@
     "typescript": "^7.0.2"
   },
   "dependencies": {
-    "@diceui/shared": "0.12.1"
+    "@diceui/shared": "1.0.0"
   },
   "scripts": {
     "dev": "tsdown --watch",

package/dist/index.cjs

@@ -1,629 +0,0 @@
-'use client';
-"use client";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
-let _diceui_shared = require("@diceui/shared");
-let react = require("react");
-react = __toESM(react, 1);
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/tags-input-root.tsx
-const ROOT_NAME = "TagsInputRoot";
-const [TagsInputProvider, useTagsInput] = (0, _diceui_shared.createContext)(ROOT_NAME);
-const TagsInputRoot = react.forwardRef((props, ref) => {
-	const { value: valueProp, defaultValue, onValueChange, onValidate, onInvalid, displayValue = (value) => value, addOnPaste = false, addOnTab = false, disabled = false, editable = false, loop = false, blurBehavior, delimiter = ",", max = Number.POSITIVE_INFINITY, readOnly = false, required = false, name, children, dir: dirProp, id: idProp, ...rootProps } = props;
-	const [value = [], setValue] = (0, _diceui_shared.useControllableState)({
-		prop: valueProp,
-		defaultProp: defaultValue,
-		onChange: onValueChange
-	});
-	const [highlightedIndex, setHighlightedIndex] = react.useState(null);
-	const [editingIndex, setEditingIndex] = react.useState(null);
-	const [isInvalidInput, setIsInvalidInput] = react.useState(false);
-	const collectionRef = react.useRef(null);
-	const inputRef = react.useRef(null);
-	const id = (0, _diceui_shared.useId)(idProp);
-	const inputId = (0, _diceui_shared.useId)();
-	const labelId = (0, _diceui_shared.useId)();
-	const dir = (0, _diceui_shared.useDirection)(dirProp);
-	const { getEnabledItems } = (0, _diceui_shared.useItemCollection)({ ref: collectionRef });
-	const { isFormControl, onTriggerChange } = (0, _diceui_shared.useFormControl)();
-	const composedRef = (0, _diceui_shared.useComposedRefs)(ref, collectionRef, (node) => onTriggerChange(node));
-	const onItemAdd = react.useCallback((textValue, options) => {
-		if (disabled || readOnly) return false;
-		if (addOnPaste && options?.viaPaste) {
-			const splitValues = textValue.split(delimiter).map((v) => v.trim()).filter(Boolean);
-			if (value.length + splitValues.length > max && max > 0) {
-				onInvalid?.(textValue);
-				return false;
-			}
-			let newValues = [];
-			for (const v of splitValues) if (value.includes(v)) onInvalid?.(v);
-			newValues = [...new Set(splitValues.filter((v) => !value.includes(v)))];
-			const validValues = newValues.filter((v) => !onValidate || onValidate(v));
-			if (validValues.length === 0) return false;
-			setValue([...value, ...validValues]);
-			return true;
-		}
-		if (value.length >= max && max > 0) {
-			onInvalid?.(textValue);
-			return false;
-		}
-		const trimmedValue = textValue.trim();
-		if (onValidate && !onValidate(trimmedValue)) {
-			setIsInvalidInput(true);
-			onInvalid?.(trimmedValue);
-			return false;
-		}
-		if (value.some((v) => {
-			return v === trimmedValue;
-		})) {
-			setIsInvalidInput(true);
-			onInvalid?.(trimmedValue);
-			return true;
-		}
-		const newValue = trimmedValue;
-		const newValues = [...value, newValue];
-		setValue(newValues);
-		setHighlightedIndex(null);
-		setEditingIndex(null);
-		setIsInvalidInput(false);
-		return true;
-	}, [
-		value,
-		max,
-		addOnPaste,
-		delimiter,
-		setValue,
-		onInvalid,
-		onValidate,
-		disabled,
-		readOnly
-	]);
-	const onItemUpdate = react.useCallback((index, newTextValue) => {
-		if (disabled || readOnly) return;
-		if (index !== -1) {
-			const trimmedValue = newTextValue.trim();
-			if (value.some((v, i) => {
-				if (i === index) return false;
-				return v === trimmedValue;
-			})) {
-				setIsInvalidInput(true);
-				onInvalid?.(trimmedValue);
-				return;
-			}
-			if (onValidate && !onValidate(trimmedValue)) {
-				setIsInvalidInput(true);
-				onInvalid?.(trimmedValue);
-				return;
-			}
-			const updatedValue = displayValue(trimmedValue);
-			const newValues = [...value];
-			newValues[index] = updatedValue;
-			setValue(newValues);
-			setHighlightedIndex(index);
-			setEditingIndex(null);
-			setIsInvalidInput(false);
-			requestAnimationFrame(() => inputRef.current?.focus());
-		}
-	}, [
-		value,
-		setValue,
-		displayValue,
-		onInvalid,
-		onValidate,
-		disabled,
-		readOnly
-	]);
-	const onItemRemove = react.useCallback((index) => {
-		if (disabled || readOnly) return;
-		if (index !== -1) {
-			const newValues = [...value];
-			newValues.splice(index, 1);
-			setValue(newValues);
-			setHighlightedIndex(null);
-			setEditingIndex(null);
-			inputRef.current?.focus();
-		}
-	}, [
-		value,
-		setValue,
-		disabled,
-		readOnly
-	]);
-	const onItemLeave = react.useCallback(() => {
-		setHighlightedIndex(null);
-		setEditingIndex(null);
-		inputRef.current?.focus();
-	}, []);
-	const onInputKeydown = react.useCallback((event) => {
-		const target = event.target;
-		if (!(target instanceof HTMLInputElement)) return;
-		const isArrowLeft = event.key === "ArrowLeft" && dir === "ltr" || event.key === "ArrowRight" && dir === "rtl";
-		const isArrowRight = event.key === "ArrowRight" && dir === "ltr" || event.key === "ArrowLeft" && dir === "rtl";
-		if (target.value && target.selectionStart !== 0) {
-			setHighlightedIndex(null);
-			setEditingIndex(null);
-			return;
-		}
-		function findNextEnabledIndex(currentIndex, direction) {
-			if (!collectionRef.current) return null;
-			const enabledIndices = getEnabledItems().map((_, index) => index);
-			if (enabledIndices.length === 0) return null;
-			if (currentIndex === null) return direction === "prev" ? enabledIndices[enabledIndices.length - 1] ?? null : enabledIndices[0] ?? null;
-			const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
-			if (direction === "next") return currentEnabledIndex >= enabledIndices.length - 1 ? loop ? enabledIndices[0] ?? null : null : enabledIndices[currentEnabledIndex + 1] ?? null;
-			return currentEnabledIndex <= 0 ? loop ? enabledIndices[enabledIndices.length - 1] ?? null : null : enabledIndices[currentEnabledIndex - 1] ?? null;
-		}
-		switch (event.key) {
-			case "Delete":
-			case "Backspace":
-				if (target.selectionStart !== 0 || target.selectionEnd !== 0) break;
-				if (highlightedIndex !== null) {
-					const newIndex = findNextEnabledIndex(highlightedIndex, "prev");
-					onItemRemove(highlightedIndex);
-					setHighlightedIndex(newIndex);
-					event.preventDefault();
-				} else if (event.key === "Backspace" && value.length > 0) {
-					const lastIndex = findNextEnabledIndex(null, "prev");
-					setHighlightedIndex(lastIndex);
-					event.preventDefault();
-				}
-				break;
-			case "Enter":
-				if (highlightedIndex !== null && editable && !disabled) {
-					setEditingIndex(highlightedIndex);
-					event.preventDefault();
-					return;
-				}
-				break;
-			case "ArrowLeft":
-			case "ArrowRight":
-				if (target.selectionStart === 0 && isArrowLeft && highlightedIndex === null && value.length > 0) {
-					const lastIndex = findNextEnabledIndex(null, "prev");
-					setHighlightedIndex(lastIndex);
-					event.preventDefault();
-				} else if (highlightedIndex !== null) {
-					const nextIndex = findNextEnabledIndex(highlightedIndex, isArrowLeft ? "prev" : "next");
-					if (nextIndex !== null) {
-						setHighlightedIndex(nextIndex);
-						event.preventDefault();
-					} else if (isArrowRight) {
-						setHighlightedIndex(null);
-						requestAnimationFrame(() => target.setSelectionRange(0, 0));
-					}
-				}
-				break;
-			case "Home":
-				if (highlightedIndex !== null) {
-					const firstIndex = findNextEnabledIndex(null, "next");
-					setHighlightedIndex(firstIndex);
-					event.preventDefault();
-				}
-				break;
-			case "End":
-				if (highlightedIndex !== null) {
-					const lastIndex = findNextEnabledIndex(null, "prev");
-					setHighlightedIndex(lastIndex);
-					event.preventDefault();
-				}
-				break;
-			case "Escape":
-				if (highlightedIndex !== null) setHighlightedIndex(null);
-				if (editingIndex !== null) setEditingIndex(null);
-				requestAnimationFrame(() => target.setSelectionRange(0, 0));
-		}
-	}, [
-		dir,
-		editingIndex,
-		highlightedIndex,
-		value,
-		onItemRemove,
-		getEnabledItems,
-		editable,
-		disabled,
-		loop
-	]);
-	const getIsClickedInEmptyRoot = react.useCallback((target) => {
-		return collectionRef.current?.contains(target) && !target.hasAttribute(_diceui_shared.DATA_ITEM_ATTR) && target.tagName !== "INPUT";
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsInputProvider, {
-		value,
-		onValueChange: setValue,
-		onItemAdd,
-		onItemRemove,
-		onItemUpdate,
-		onInputKeydown,
-		highlightedIndex,
-		setHighlightedIndex,
-		editingIndex,
-		setEditingIndex,
-		displayValue,
-		onItemLeave,
-		inputRef,
-		isInvalidInput,
-		addOnPaste,
-		addOnTab,
-		disabled,
-		editable,
-		loop,
-		readOnly,
-		blurBehavior,
-		delimiter,
-		max,
-		dir,
-		id,
-		inputId,
-		labelId,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_diceui_shared.Primitive.div, {
-			id,
-			"data-disabled": disabled ? "" : void 0,
-			"data-invalid": isInvalidInput ? "" : void 0,
-			"data-readonly": readOnly ? "" : void 0,
-			dir,
-			...rootProps,
-			ref: composedRef,
-			onClick: (0, _diceui_shared.composeEventHandlers)(rootProps.onClick, (event) => {
-				const target = event.target;
-				if (!(target instanceof HTMLElement)) return;
-				if (getIsClickedInEmptyRoot(target) && document.activeElement !== inputRef.current) {
-					event.currentTarget.focus();
-					inputRef.current?.focus();
-				}
-			}),
-			onMouseDown: (0, _diceui_shared.composeEventHandlers)(rootProps.onMouseDown, (event) => {
-				const target = event.target;
-				if (!(target instanceof HTMLElement)) return;
-				if (getIsClickedInEmptyRoot(target)) event.preventDefault();
-			}),
-			onBlur: (0, _diceui_shared.composeEventHandlers)(rootProps.onBlur, (event) => {
-				if (event.relatedTarget !== inputRef.current && !collectionRef.current?.contains(event.relatedTarget)) requestAnimationFrame(() => setHighlightedIndex(null));
-			}),
-			children: [typeof children === "function" ? children({ value }) : children, isFormControl && name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.VisuallyHiddenInput, {
-				type: "hidden",
-				control: collectionRef.current,
-				name,
-				value,
-				disabled,
-				required
-			})]
-		})
-	});
-});
-TagsInputRoot.displayName = ROOT_NAME;
-const Root = TagsInputRoot;
-//#endregion
-//#region src/tags-input-clear.tsx
-const CLEAR_NAME = "TagsInputClear";
-const TagsInputClear = react.forwardRef((props, ref) => {
-	const { forceMount, ...clearProps } = props;
-	const context = useTagsInput(CLEAR_NAME);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Presence, {
-		present: forceMount || context.value.length > 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.button, {
-			type: "button",
-			"aria-disabled": context.disabled,
-			"data-state": context.value.length > 0 ? "visible" : "invisible",
-			"data-disabled": context.disabled ? "" : void 0,
-			...clearProps,
-			ref,
-			onClick: (0, _diceui_shared.composeEventHandlers)(props.onClick, () => {
-				if (context.disabled) return;
-				context.onValueChange([]);
-				context.inputRef.current?.focus();
-			})
-		})
-	});
-});
-TagsInputClear.displayName = CLEAR_NAME;
-const Clear = TagsInputClear;
-//#endregion
-//#region src/tags-input-input.tsx
-const INPUT_NAME = "TagsInputInput";
-const TagsInputInput = react.forwardRef((props, ref) => {
-	const { autoFocus, ...inputProps } = props;
-	const context = useTagsInput(INPUT_NAME);
-	const onCustomKeydown = react.useCallback((event) => {
-		if (event.defaultPrevented) return;
-		const value = event.currentTarget.value;
-		if (!value) return;
-		if (context.onItemAdd(value)) {
-			event.currentTarget.value = "";
-			context.setHighlightedIndex(null);
-		}
-		event.preventDefault();
-	}, [context.onItemAdd, context.setHighlightedIndex]);
-	const onTab = react.useCallback((event) => {
-		if (!context.addOnTab) return;
-		onCustomKeydown(event);
-	}, [context.addOnTab, onCustomKeydown]);
-	react.useEffect(() => {
-		if (!autoFocus) return;
-		const animationFrameId = requestAnimationFrame(() => context.inputRef.current?.focus());
-		return () => cancelAnimationFrame(animationFrameId);
-	}, [autoFocus, context.inputRef]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.input, {
-		type: "text",
-		id: context.inputId,
-		autoCapitalize: "off",
-		autoComplete: "off",
-		autoCorrect: "off",
-		spellCheck: "false",
-		autoFocus,
-		"aria-labelledby": context.labelId,
-		"aria-readonly": context.readOnly,
-		"data-invalid": context.isInvalidInput ? "" : void 0,
-		dir: context.dir,
-		disabled: context.disabled,
-		readOnly: context.readOnly,
-		...inputProps,
-		ref: (0, _diceui_shared.composeRefs)(context.inputRef, ref),
-		onBlur: (0, _diceui_shared.composeEventHandlers)(inputProps.onBlur, (event) => {
-			if (context.readOnly) return;
-			if (context.blurBehavior === "add") {
-				const value = event.target.value;
-				if (value) {
-					if (context.onItemAdd(value)) event.target.value = "";
-				}
-			}
-			if (context.blurBehavior === "clear") event.target.value = "";
-		}),
-		onChange: (0, _diceui_shared.composeEventHandlers)(inputProps.onChange, (event) => {
-			if (context.readOnly) return;
-			const target = event.target;
-			if (!(target instanceof HTMLInputElement)) return;
-			if (context.delimiter === target.value.slice(-1)) {
-				const value = target.value.slice(0, -1);
-				target.value = "";
-				if (value) {
-					context.onItemAdd(value);
-					context.setHighlightedIndex(null);
-				}
-			}
-		}),
-		onKeyDown: (0, _diceui_shared.composeEventHandlers)(inputProps.onKeyDown, (event) => {
-			if (context.readOnly) return;
-			if (event.key === "Enter") onCustomKeydown(event);
-			if (event.key === "Tab") onTab(event);
-			context.onInputKeydown(event);
-			if (event.key.length === 1) context.setHighlightedIndex(null);
-		}),
-		onPaste: (0, _diceui_shared.composeEventHandlers)(inputProps.onPaste, (event) => {
-			if (context.readOnly) return;
-			if (context.addOnPaste) {
-				event.preventDefault();
-				const value = event.clipboardData.getData("text");
-				context.onItemAdd(value, { viaPaste: true });
-				context.setHighlightedIndex(null);
-			}
-		})
-	});
-});
-TagsInputInput.displayName = INPUT_NAME;
-const Input = TagsInputInput;
-//#endregion
-//#region src/tags-input-item.tsx
-const ITEM_NAME = "TagsInputItem";
-const [TagsInputItemProvider, useTagsInputItem] = (0, _diceui_shared.createContext)(ITEM_NAME);
-const TagsInputItem = react.forwardRef((props, ref) => {
-	const { value, disabled, ...itemProps } = props;
-	const pointerTypeRef = react.useRef("touch");
-	const context = useTagsInput(ITEM_NAME);
-	const id = (0, _diceui_shared.useId)();
-	const textId = `${id}text`;
-	const index = context.value.indexOf(value);
-	const isHighlighted = index === context.highlightedIndex;
-	const isEditing = index === context.editingIndex;
-	const itemDisabled = disabled || context.disabled;
-	const displayValue = context.displayValue(value);
-	const onItemSelect = react.useCallback(() => {
-		context.setHighlightedIndex(index);
-		context.inputRef.current?.focus();
-	}, [
-		context.setHighlightedIndex,
-		context.inputRef,
-		index
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsInputItemProvider, {
-		id,
-		value,
-		index,
-		isHighlighted,
-		isEditing,
-		disabled: itemDisabled,
-		textId,
-		displayValue,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.div, {
-			id,
-			"aria-labelledby": textId,
-			"aria-current": isHighlighted,
-			"aria-disabled": itemDisabled,
-			[_diceui_shared.DATA_ITEM_ATTR]: "",
-			"data-state": isHighlighted ? "active" : "inactive",
-			"data-highlighted": isHighlighted ? "" : void 0,
-			"data-editing": isEditing ? "" : void 0,
-			"data-editable": context.editable ? "" : void 0,
-			"data-disabled": itemDisabled ? "" : void 0,
-			...itemProps,
-			ref,
-			onClick: (0, _diceui_shared.composeEventHandlers)(itemProps.onClick, (event) => {
-				event.stopPropagation();
-				if (!isEditing && pointerTypeRef.current !== "mouse") onItemSelect();
-			}),
-			onDoubleClick: (0, _diceui_shared.composeEventHandlers)(itemProps.onDoubleClick, () => {
-				if (context.editable && !itemDisabled) requestAnimationFrame(() => context.setEditingIndex(index));
-			}),
-			onPointerUp: (0, _diceui_shared.composeEventHandlers)(itemProps.onPointerUp, () => {
-				if (pointerTypeRef.current === "mouse") onItemSelect();
-			}),
-			onPointerDown: (0, _diceui_shared.composeEventHandlers)(itemProps.onPointerDown, (event) => pointerTypeRef.current = event.pointerType),
-			onPointerMove: (0, _diceui_shared.composeEventHandlers)(itemProps.onPointerMove, (event) => {
-				pointerTypeRef.current = event.pointerType;
-				if (disabled) context.onItemLeave();
-				else if (pointerTypeRef.current === "mouse") event.currentTarget.focus({ preventScroll: true });
-			}),
-			onPointerLeave: (0, _diceui_shared.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
-				if (event.currentTarget === document.activeElement) context.onItemLeave();
-			})
-		})
-	});
-});
-TagsInputItem.displayName = ITEM_NAME;
-const Item = TagsInputItem;
-//#endregion
-//#region src/tags-input-item-delete.tsx
-const ITEM_DELETE_NAME = "TagsInputItemDelete";
-const TagsInputItemDelete = react.forwardRef((props, ref) => {
-	const context = useTagsInput(ITEM_DELETE_NAME);
-	const itemContext = useTagsInputItem(ITEM_DELETE_NAME);
-	const disabled = itemContext.disabled || context.disabled;
-	if (itemContext.isEditing) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.button, {
-		type: "button",
-		tabIndex: disabled ? void 0 : -1,
-		"aria-labelledby": itemContext.textId,
-		"aria-controls": itemContext.id,
-		"aria-current": itemContext.isHighlighted,
-		"data-state": itemContext.isHighlighted ? "active" : "inactive",
-		"data-disabled": disabled ? "" : void 0,
-		...props,
-		ref,
-		onClick: (0, _diceui_shared.composeEventHandlers)(props.onClick, () => {
-			if (disabled) return;
-			const index = context.value.indexOf(itemContext.value);
-			context.onItemRemove(index);
-		})
-	});
-});
-TagsInputItemDelete.displayName = ITEM_DELETE_NAME;
-const ItemDelete = TagsInputItemDelete;
-//#endregion
-//#region src/tags-input-item-text.tsx
-const ITEM_TEXT_NAME = "TagsInputItemText";
-const TagsInputItemText = react.forwardRef((props, ref) => {
-	const { children, ...itemTextProps } = props;
-	const context = useTagsInput(ITEM_TEXT_NAME);
-	const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
-	if (itemContext.isEditing && context.editable && !itemContext.disabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagsInputEditableItemText, {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.span, {
-		id: itemContext.textId,
-		...itemTextProps,
-		ref,
-		children: children ?? itemContext.displayValue
-	});
-});
-const ItemText = TagsInputItemText;
-function TagsInputEditableItemText() {
-	const context = useTagsInput(ITEM_TEXT_NAME);
-	const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
-	const [editValue, setEditValue] = react.useState(itemContext.displayValue);
-	const onBlur = react.useCallback(() => {
-		setEditValue(itemContext.displayValue);
-		context.setEditingIndex(null);
-	}, [context.setEditingIndex, itemContext.displayValue]);
-	const onChange = react.useCallback((event) => {
-		const target = event.target;
-		target.style.width = "0";
-		target.style.width = `${target.scrollWidth + 4}px`;
-		setEditValue(event.target.value);
-	}, []);
-	const onFocus = react.useCallback((event) => {
-		event.target.select();
-		event.target.style.width = "0";
-		event.target.style.width = `${event.target.scrollWidth + 4}px`;
-	}, []);
-	const onKeyDown = react.useCallback((event) => {
-		if (event.key === "Enter") {
-			const index = context.value.indexOf(itemContext.value);
-			context.onItemUpdate(index, editValue);
-		} else if (event.key === "Escape") {
-			setEditValue(itemContext.displayValue);
-			context.setEditingIndex(null);
-			context.setHighlightedIndex(itemContext.index);
-			context.inputRef.current?.focus();
-		}
-		event.stopPropagation();
-	}, [
-		context.value,
-		context.onItemUpdate,
-		context.setEditingIndex,
-		itemContext.displayValue,
-		context.inputRef.current?.focus,
-		editValue,
-		itemContext.value,
-		context.setHighlightedIndex,
-		itemContext.index
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.input, {
-		type: "text",
-		autoCapitalize: "off",
-		autoComplete: "off",
-		autoCorrect: "off",
-		spellCheck: "false",
-		autoFocus: true,
-		"aria-describedby": itemContext.textId,
-		value: editValue,
-		onChange,
-		onKeyDown,
-		onFocus,
-		onBlur,
-		style: {
-			outline: "none",
-			background: "inherit",
-			border: "none",
-			font: "inherit",
-			color: "inherit",
-			padding: 0,
-			minWidth: "1ch"
-		}
-	});
-}
-//#endregion
-//#region src/tags-input-label.tsx
-const LABEL_NAME = "TagsInputLabel";
-const TagsInputLabel = react.forwardRef((props, ref) => {
-	const context = useTagsInput(LABEL_NAME);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_diceui_shared.Primitive.label, {
-		id: context.labelId,
-		htmlFor: context.inputId,
-		...props,
-		ref
-	});
-});
-TagsInputLabel.displayName = LABEL_NAME;
-const Label = TagsInputLabel;
-//#endregion
-exports.Clear = Clear;
-exports.Input = Input;
-exports.Item = Item;
-exports.ItemDelete = ItemDelete;
-exports.ItemText = ItemText;
-exports.Label = Label;
-exports.Root = Root;
-exports.TagsInputClear = TagsInputClear;
-exports.TagsInputInput = TagsInputInput;
-exports.TagsInputItem = TagsInputItem;
-exports.TagsInputItemDelete = TagsInputItemDelete;
-exports.TagsInputItemText = TagsInputItemText;
-exports.TagsInputLabel = TagsInputLabel;
-exports.TagsInputRoot = TagsInputRoot;

package/dist/index.d.cts

@@ -1,137 +0,0 @@
-
-import { Direction, Primitive } from "@diceui/shared";
-import * as React from "react";
-//#region src/tags-input-clear.d.ts
-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>>;
-//#endregion
-//#region src/tags-input-input.d.ts
-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>>;
-//#endregion
-//#region src/tags-input-root.d.ts
-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 React node or a function that receives the current value as an argument.
-   * @default undefined
-   */
-  children?: React.ReactNode | ((context: {
-    value: InputValue[];
-  }) => 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>>;
-//#endregion
-//#region src/tags-input-item.d.ts
-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>>;
-//#endregion
-//#region src/tags-input-item-delete.d.ts
-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>>;
-//#endregion
-//#region src/tags-input-item-text.d.ts
-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>>;
-//#endregion
-//#region src/tags-input-label.d.ts
-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>>;
-//#endregion
-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 };