@diceui/tags-input 0.0.4 → 0.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Sadman Sakib
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2024 Sadman Sakib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,15 +1,15 @@
-# Tags Input
-
-Tags Input is a component that allows users to input tags.
-
-## Installation
-
-```bash
-npm install @diceui/tags-input
-# or
-pnpm add @diceui/tags-input
-# or
-yarn add @diceui/tags-input
-# or
-bun add @diceui/tags-input
-```
+# Tags Input
+
+Tags Input is a component that allows users to input tags.
+
+## Installation
+
+```bash
+npm install @diceui/tags-input
+# or
+pnpm add @diceui/tags-input
+# or
+yarn add @diceui/tags-input
+# or
+bun add @diceui/tags-input
+```

package/dist/index.cjs

@@ -56,10 +56,10 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const [highlightedValue, setHighlightedValue] = React__namespace.useState(null);
-  const [editingValue, setEditingValue] = React__namespace.useState(
+  const [highlightedIndex, setHighlightedIndex] = React__namespace.useState(
     null
   );
+  const [editingIndex, setEditingIndex] = React__namespace.useState(null);
   const [isInvalidInput, setIsInvalidInput] = React__namespace.useState(false);
   const collectionRef = React__namespace.useRef(null);
   const inputRef = React__namespace.useRef(null);
@@ -120,8 +120,8 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       const newValue = trimmedValue;
       const newValues = [...value, newValue];
       setValue(newValues);
-      setHighlightedValue(null);
-      setEditingValue(null);
+      setHighlightedIndex(null);
+      setEditingIndex(null);
       setIsInvalidInput(false);
       return true;
     },
@@ -150,8 +150,8 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         const newValues = [...value];
         newValues[index] = updatedValue;
         setValue(newValues);
-        setHighlightedValue(updatedValue);
-        setEditingValue(null);
+        setHighlightedIndex(index);
+        setEditingIndex(null);
         setIsInvalidInput(false);
         requestAnimationFrame(() => inputRef.current?.focus());
       }
@@ -164,16 +164,16 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         const newValues = [...value];
         newValues.splice(index, 1);
         setValue(newValues);
-        setHighlightedValue(null);
-        setEditingValue(null);
+        setHighlightedIndex(null);
+        setEditingIndex(null);
         inputRef.current?.focus();
       }
     },
     [value, setValue]
   );
   const onItemLeave = React__namespace.useCallback(() => {
-    setHighlightedValue(null);
-    setEditingValue(null);
+    setHighlightedIndex(null);
+    setEditingIndex(null);
     inputRef.current?.focus();
   }, []);
   const onInputKeydown = React__namespace.useCallback(
@@ -183,45 +183,44 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       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) {
-        setHighlightedValue(null);
-        setEditingValue(null);
+        setHighlightedIndex(null);
+        setEditingIndex(null);
         return;
       }
-      const findNextEnabledValue = (currentValue, direction) => {
+      function findNextEnabledIndex(currentIndex, direction) {
         const collectionElement = collectionRef.current;
         if (!collectionElement) return null;
         const enabledItems = getEnabledItems();
-        const enabledValues = enabledItems.map((_, index) => value[index]);
-        if (enabledValues.length === 0) return null;
-        if (currentValue === null) {
-          return direction === "prev" ? enabledValues[enabledValues.length - 1] ?? null : enabledValues[0] ?? null;
+        const enabledIndices = enabledItems.map((_, index) => index);
+        if (enabledIndices.length === 0) return null;
+        if (currentIndex === null) {
+          return direction === "prev" ? enabledIndices[enabledIndices.length - 1] ?? null : enabledIndices[0] ?? null;
         }
-        const currentIndex = enabledValues.indexOf(currentValue);
+        const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
         if (direction === "next") {
-          return currentIndex >= enabledValues.length - 1 ? loop ? enabledValues[0] ?? null : null : enabledValues[currentIndex + 1] ?? null;
+          return currentEnabledIndex >= enabledIndices.length - 1 ? loop ? enabledIndices[0] ?? null : null : enabledIndices[currentEnabledIndex + 1] ?? null;
         }
-        return currentIndex <= 0 ? loop ? enabledValues[enabledValues.length - 1] ?? null : null : enabledValues[currentIndex - 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 (highlightedValue !== null) {
-            const index = value.indexOf(highlightedValue);
-            const newValue = findNextEnabledValue(highlightedValue, "prev");
-            onItemRemove(index);
-            setHighlightedValue(newValue);
+          if (highlightedIndex !== null) {
+            const newIndex = findNextEnabledIndex(highlightedIndex, "prev");
+            onItemRemove(highlightedIndex);
+            setHighlightedIndex(newIndex);
             event.preventDefault();
           } else if (event.key === "Backspace" && value.length > 0) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
           }
           break;
         }
         case "Enter": {
-          if (highlightedValue !== null && editable && !disabled) {
-            setEditingValue(highlightedValue);
+          if (highlightedIndex !== null && editable && !disabled) {
+            setEditingIndex(highlightedIndex);
             event.preventDefault();
             return;
           }
@@ -229,51 +228,51 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         }
         case "ArrowLeft":
         case "ArrowRight": {
-          if (target.selectionStart === 0 && isArrowLeft && highlightedValue === null && value.length > 0) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+          if (target.selectionStart === 0 && isArrowLeft && highlightedIndex === null && value.length > 0) {
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
-          } else if (highlightedValue !== null) {
-            const nextValue = findNextEnabledValue(
-              highlightedValue,
+          } else if (highlightedIndex !== null) {
+            const nextIndex = findNextEnabledIndex(
+              highlightedIndex,
               isArrowLeft ? "prev" : "next"
             );
-            if (nextValue !== null) {
-              setHighlightedValue(nextValue);
+            if (nextIndex !== null) {
+              setHighlightedIndex(nextIndex);
               event.preventDefault();
             } else if (isArrowRight) {
-              setHighlightedValue(null);
+              setHighlightedIndex(null);
               requestAnimationFrame(() => target.setSelectionRange(0, 0));
             }
           }
           break;
         }
         case "Home": {
-          if (highlightedValue !== null) {
-            const firstValue = findNextEnabledValue(null, "next");
-            setHighlightedValue(firstValue);
+          if (highlightedIndex !== null) {
+            const firstIndex = findNextEnabledIndex(null, "next");
+            setHighlightedIndex(firstIndex);
             event.preventDefault();
           }
           break;
         }
         case "End": {
-          if (highlightedValue !== null) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+          if (highlightedIndex !== null) {
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
           }
           break;
         }
         case "Escape": {
-          setHighlightedValue(null);
-          setEditingValue(null);
+          setHighlightedIndex(null);
+          setEditingIndex(null);
           requestAnimationFrame(() => target.setSelectionRange(0, 0));
           break;
         }
       }
     },
     [
-      highlightedValue,
+      highlightedIndex,
       value,
       onItemRemove,
       dir,
@@ -295,10 +294,10 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       onItemRemove,
       onItemUpdate,
       onInputKeydown,
-      highlightedValue,
-      setHighlightedValue,
-      editingValue,
-      setEditingValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      editingIndex,
+      setEditingIndex,
       displayValue,
       onItemLeave,
       inputRef,
@@ -342,7 +341,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         }),
         onBlur: shared.composeEventHandlers(rootProps.onBlur, (event) => {
           if (event.relatedTarget !== inputRef.current && !collectionRef.current?.contains(event.relatedTarget)) {
-            requestAnimationFrame(() => setHighlightedValue(null));
+            requestAnimationFrame(() => setHighlightedIndex(null));
           }
         })
       },
@@ -389,19 +388,21 @@ var TagsInputItem = React__namespace.forwardRef(
     const context = useTagsInput(ITEM_NAME);
     const id = shared.useId();
     const textId = `${id}text`;
-    const isHighlighted = value === context.highlightedValue;
-    const isEditing = value === context.editingValue;
+    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);
-    function onSelect() {
-      context.setHighlightedValue(value);
+    const onItemSelect = React__namespace.useCallback(() => {
+      context.setHighlightedIndex(index);
       context.inputRef.current?.focus();
-    }
+    }, [context.setHighlightedIndex, context.inputRef, index]);
     return /* @__PURE__ */ React__namespace.createElement(
       TagsInputItemProvider,
       {
         id,
         value,
+        index,
         isHighlighted,
         isEditing,
         disabled: itemDisabled,
@@ -426,16 +427,16 @@ var TagsInputItem = React__namespace.forwardRef(
           onClick: shared.composeEventHandlers(itemProps.onClick, (event) => {
             event.stopPropagation();
             if (!isEditing && pointerTypeRef.current !== "mouse") {
-              onSelect();
+              onItemSelect();
             }
           }),
           onDoubleClick: shared.composeEventHandlers(itemProps.onDoubleClick, () => {
             if (context.editable && !itemDisabled) {
-              requestAnimationFrame(() => context.setEditingValue(value));
+              requestAnimationFrame(() => context.setEditingIndex(index));
             }
           }),
           onPointerUp: shared.composeEventHandlers(itemProps.onPointerUp, () => {
-            if (pointerTypeRef.current === "mouse") onSelect();
+            if (pointerTypeRef.current === "mouse") onItemSelect();
           }),
           onPointerDown: shared.composeEventHandlers(
             itemProps.onPointerDown,
@@ -472,21 +473,27 @@ var TagsInputInput = React__namespace.forwardRef(
   (props, ref) => {
     const { autoFocus, ...inputProps } = props;
     const context = useTagsInput(INPUT_NAME);
-    function onTab(event) {
-      if (!context.addOnTab) return;
-      onCustomKeydown(event);
-    }
-    function onCustomKeydown(event) {
-      if (event.defaultPrevented) return;
-      const value = event.currentTarget.value;
-      if (!value) return;
-      const isAdded = context.onItemAdd(value);
-      if (isAdded) {
-        event.currentTarget.value = "";
-        context.setHighlightedValue(null);
-      }
-      event.preventDefault();
-    }
+    const onTab = React__namespace.useCallback(
+      (event) => {
+        if (!context.addOnTab) return;
+        onCustomKeydown(event);
+      },
+      [context.addOnTab]
+    );
+    const onCustomKeydown = React__namespace.useCallback(
+      (event) => {
+        if (event.defaultPrevented) return;
+        const value = event.currentTarget.value;
+        if (!value) return;
+        const isAdded = context.onItemAdd(value);
+        if (isAdded) {
+          event.currentTarget.value = "";
+          context.setHighlightedIndex(null);
+        }
+        event.preventDefault();
+      },
+      [context.onItemAdd, context.setHighlightedIndex]
+    );
     React__namespace.useEffect(() => {
       if (!autoFocus) return;
       const animationFrameId = requestAnimationFrame(
@@ -530,7 +537,7 @@ var TagsInputInput = React__namespace.forwardRef(
             target.value = "";
             if (value) {
               context.onItemAdd(value);
-              context.setHighlightedValue(null);
+              context.setHighlightedIndex(null);
             }
           }
         }),
@@ -538,14 +545,14 @@ var TagsInputInput = React__namespace.forwardRef(
           if (event.key === "Enter") onCustomKeydown(event);
           if (event.key === "Tab") onTab(event);
           context.onInputKeydown(event);
-          if (event.key.length === 1) context.setHighlightedValue(null);
+          if (event.key.length === 1) context.setHighlightedIndex(null);
         }),
         onPaste: shared.composeEventHandlers(inputProps.onPaste, (event) => {
           if (context.addOnPaste) {
             event.preventDefault();
             const value = event.clipboardData.getData("text");
             context.onItemAdd(value, { viaPaste: true });
-            context.setHighlightedValue(null);
+            context.setHighlightedIndex(null);
           }
         })
       }
@@ -581,7 +588,7 @@ var TagsInputItemDelete = React__namespace.forwardRef((props, ref) => {
   );
 });
 TagsInputItemDelete.displayName = ITEM_DELETE_NAME;
-var Delete = TagsInputItemDelete;
+var ItemDelete = TagsInputItemDelete;
 var ITEM_TEXT_NAME = "TagsInputItemText";
 var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
   const { children, ...itemTextProps } = props;
@@ -615,7 +622,7 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
             context.onItemUpdate(index, editValue);
           } else if (event.key === "Escape") {
             setEditValue(itemContext.displayValue);
-            context.setEditingValue(null);
+            context.setEditingIndex(null);
             context.inputRef.current?.focus();
           }
           event.stopPropagation();
@@ -627,7 +634,7 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
         },
         onBlur: () => {
           setEditValue(itemContext.displayValue);
-          context.setEditingValue(null);
+          context.setEditingIndex(null);
         },
         style: {
           outline: "none",
@@ -643,7 +650,7 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
   }
   return /* @__PURE__ */ React__namespace.createElement(reactPrimitive.Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
 });
-var Text = TagsInputItemText;
+var ItemText = TagsInputItemText;
 var CLEAR_NAME = "TagsInputClear";
 var TagsInputClear = React__namespace.forwardRef(
   (props, ref) => {
@@ -671,9 +678,10 @@ TagsInputClear.displayName = CLEAR_NAME;
 var Clear = TagsInputClear;
 
 exports.Clear = Clear;
-exports.Delete = Delete;
 exports.Input = Input;
 exports.Item = Item;
+exports.ItemDelete = ItemDelete;
+exports.ItemText = ItemText;
 exports.Label = Label;
 exports.Root = Root;
 exports.TagsInputClear = TagsInputClear;
@@ -683,4 +691,3 @@ exports.TagsInputItemDelete = TagsInputItemDelete;
 exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
 exports.TagsInputRoot = TagsInputRoot;
-exports.Text = Text;

package/dist/index.d.cts

@@ -104,12 +104,12 @@ declare const Item: React.ForwardRefExoticComponent<TagsInputItemProps & React.R
 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>>;
+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 Text: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ItemText: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;
 
 interface TagsInputClearProps extends React.ComponentPropsWithoutRef<typeof Primitive.button> {
     /**
@@ -123,4 +123,4 @@ interface TagsInputClearProps extends React.ComponentPropsWithoutRef<typeof Prim
 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 };
+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 };

package/dist/index.d.ts

@@ -104,12 +104,12 @@ declare const Item: React.ForwardRefExoticComponent<TagsInputItemProps & React.R
 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>>;
+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 Text: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ItemText: React.ForwardRefExoticComponent<TagsInputItemTextProps & React.RefAttributes<HTMLSpanElement>>;
 
 interface TagsInputClearProps extends React.ComponentPropsWithoutRef<typeof Primitive.button> {
     /**
@@ -123,4 +123,4 @@ interface TagsInputClearProps extends React.ComponentPropsWithoutRef<typeof Prim
 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 };
+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 };

package/dist/index.js

@@ -34,10 +34,10 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const [highlightedValue, setHighlightedValue] = React.useState(null);
-  const [editingValue, setEditingValue] = React.useState(
+  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);
@@ -98,8 +98,8 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       const newValue = trimmedValue;
       const newValues = [...value, newValue];
       setValue(newValues);
-      setHighlightedValue(null);
-      setEditingValue(null);
+      setHighlightedIndex(null);
+      setEditingIndex(null);
       setIsInvalidInput(false);
       return true;
     },
@@ -128,8 +128,8 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         const newValues = [...value];
         newValues[index] = updatedValue;
         setValue(newValues);
-        setHighlightedValue(updatedValue);
-        setEditingValue(null);
+        setHighlightedIndex(index);
+        setEditingIndex(null);
         setIsInvalidInput(false);
         requestAnimationFrame(() => inputRef.current?.focus());
       }
@@ -142,16 +142,16 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         const newValues = [...value];
         newValues.splice(index, 1);
         setValue(newValues);
-        setHighlightedValue(null);
-        setEditingValue(null);
+        setHighlightedIndex(null);
+        setEditingIndex(null);
         inputRef.current?.focus();
       }
     },
     [value, setValue]
   );
   const onItemLeave = React.useCallback(() => {
-    setHighlightedValue(null);
-    setEditingValue(null);
+    setHighlightedIndex(null);
+    setEditingIndex(null);
     inputRef.current?.focus();
   }, []);
   const onInputKeydown = React.useCallback(
@@ -161,45 +161,44 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       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) {
-        setHighlightedValue(null);
-        setEditingValue(null);
+        setHighlightedIndex(null);
+        setEditingIndex(null);
         return;
       }
-      const findNextEnabledValue = (currentValue, direction) => {
+      function findNextEnabledIndex(currentIndex, direction) {
         const collectionElement = collectionRef.current;
         if (!collectionElement) return null;
         const enabledItems = getEnabledItems();
-        const enabledValues = enabledItems.map((_, index) => value[index]);
-        if (enabledValues.length === 0) return null;
-        if (currentValue === null) {
-          return direction === "prev" ? enabledValues[enabledValues.length - 1] ?? null : enabledValues[0] ?? null;
+        const enabledIndices = enabledItems.map((_, index) => index);
+        if (enabledIndices.length === 0) return null;
+        if (currentIndex === null) {
+          return direction === "prev" ? enabledIndices[enabledIndices.length - 1] ?? null : enabledIndices[0] ?? null;
         }
-        const currentIndex = enabledValues.indexOf(currentValue);
+        const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
         if (direction === "next") {
-          return currentIndex >= enabledValues.length - 1 ? loop ? enabledValues[0] ?? null : null : enabledValues[currentIndex + 1] ?? null;
+          return currentEnabledIndex >= enabledIndices.length - 1 ? loop ? enabledIndices[0] ?? null : null : enabledIndices[currentEnabledIndex + 1] ?? null;
         }
-        return currentIndex <= 0 ? loop ? enabledValues[enabledValues.length - 1] ?? null : null : enabledValues[currentIndex - 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 (highlightedValue !== null) {
-            const index = value.indexOf(highlightedValue);
-            const newValue = findNextEnabledValue(highlightedValue, "prev");
-            onItemRemove(index);
-            setHighlightedValue(newValue);
+          if (highlightedIndex !== null) {
+            const newIndex = findNextEnabledIndex(highlightedIndex, "prev");
+            onItemRemove(highlightedIndex);
+            setHighlightedIndex(newIndex);
             event.preventDefault();
           } else if (event.key === "Backspace" && value.length > 0) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
           }
           break;
         }
         case "Enter": {
-          if (highlightedValue !== null && editable && !disabled) {
-            setEditingValue(highlightedValue);
+          if (highlightedIndex !== null && editable && !disabled) {
+            setEditingIndex(highlightedIndex);
             event.preventDefault();
             return;
           }
@@ -207,51 +206,51 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         }
         case "ArrowLeft":
         case "ArrowRight": {
-          if (target.selectionStart === 0 && isArrowLeft && highlightedValue === null && value.length > 0) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+          if (target.selectionStart === 0 && isArrowLeft && highlightedIndex === null && value.length > 0) {
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
-          } else if (highlightedValue !== null) {
-            const nextValue = findNextEnabledValue(
-              highlightedValue,
+          } else if (highlightedIndex !== null) {
+            const nextIndex = findNextEnabledIndex(
+              highlightedIndex,
               isArrowLeft ? "prev" : "next"
             );
-            if (nextValue !== null) {
-              setHighlightedValue(nextValue);
+            if (nextIndex !== null) {
+              setHighlightedIndex(nextIndex);
               event.preventDefault();
             } else if (isArrowRight) {
-              setHighlightedValue(null);
+              setHighlightedIndex(null);
               requestAnimationFrame(() => target.setSelectionRange(0, 0));
             }
           }
           break;
         }
         case "Home": {
-          if (highlightedValue !== null) {
-            const firstValue = findNextEnabledValue(null, "next");
-            setHighlightedValue(firstValue);
+          if (highlightedIndex !== null) {
+            const firstIndex = findNextEnabledIndex(null, "next");
+            setHighlightedIndex(firstIndex);
             event.preventDefault();
           }
           break;
         }
         case "End": {
-          if (highlightedValue !== null) {
-            const lastValue = findNextEnabledValue(null, "prev");
-            setHighlightedValue(lastValue);
+          if (highlightedIndex !== null) {
+            const lastIndex = findNextEnabledIndex(null, "prev");
+            setHighlightedIndex(lastIndex);
             event.preventDefault();
           }
           break;
         }
         case "Escape": {
-          setHighlightedValue(null);
-          setEditingValue(null);
+          setHighlightedIndex(null);
+          setEditingIndex(null);
           requestAnimationFrame(() => target.setSelectionRange(0, 0));
           break;
         }
       }
     },
     [
-      highlightedValue,
+      highlightedIndex,
       value,
       onItemRemove,
       dir,
@@ -273,10 +272,10 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       onItemRemove,
       onItemUpdate,
       onInputKeydown,
-      highlightedValue,
-      setHighlightedValue,
-      editingValue,
-      setEditingValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      editingIndex,
+      setEditingIndex,
       displayValue,
       onItemLeave,
       inputRef,
@@ -320,7 +319,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         }),
         onBlur: composeEventHandlers(rootProps.onBlur, (event) => {
           if (event.relatedTarget !== inputRef.current && !collectionRef.current?.contains(event.relatedTarget)) {
-            requestAnimationFrame(() => setHighlightedValue(null));
+            requestAnimationFrame(() => setHighlightedIndex(null));
           }
         })
       },
@@ -367,19 +366,21 @@ var TagsInputItem = React.forwardRef(
     const context = useTagsInput(ITEM_NAME);
     const id = useId();
     const textId = `${id}text`;
-    const isHighlighted = value === context.highlightedValue;
-    const isEditing = value === context.editingValue;
+    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);
-    function onSelect() {
-      context.setHighlightedValue(value);
+    const onItemSelect = React.useCallback(() => {
+      context.setHighlightedIndex(index);
       context.inputRef.current?.focus();
-    }
+    }, [context.setHighlightedIndex, context.inputRef, index]);
     return /* @__PURE__ */ React.createElement(
       TagsInputItemProvider,
       {
         id,
         value,
+        index,
         isHighlighted,
         isEditing,
         disabled: itemDisabled,
@@ -404,16 +405,16 @@ var TagsInputItem = React.forwardRef(
           onClick: composeEventHandlers(itemProps.onClick, (event) => {
             event.stopPropagation();
             if (!isEditing && pointerTypeRef.current !== "mouse") {
-              onSelect();
+              onItemSelect();
             }
           }),
           onDoubleClick: composeEventHandlers(itemProps.onDoubleClick, () => {
             if (context.editable && !itemDisabled) {
-              requestAnimationFrame(() => context.setEditingValue(value));
+              requestAnimationFrame(() => context.setEditingIndex(index));
             }
           }),
           onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
-            if (pointerTypeRef.current === "mouse") onSelect();
+            if (pointerTypeRef.current === "mouse") onItemSelect();
           }),
           onPointerDown: composeEventHandlers(
             itemProps.onPointerDown,
@@ -450,21 +451,27 @@ var TagsInputInput = React.forwardRef(
   (props, ref) => {
     const { autoFocus, ...inputProps } = props;
     const context = useTagsInput(INPUT_NAME);
-    function onTab(event) {
-      if (!context.addOnTab) return;
-      onCustomKeydown(event);
-    }
-    function onCustomKeydown(event) {
-      if (event.defaultPrevented) return;
-      const value = event.currentTarget.value;
-      if (!value) return;
-      const isAdded = context.onItemAdd(value);
-      if (isAdded) {
-        event.currentTarget.value = "";
-        context.setHighlightedValue(null);
-      }
-      event.preventDefault();
-    }
+    const onTab = React.useCallback(
+      (event) => {
+        if (!context.addOnTab) return;
+        onCustomKeydown(event);
+      },
+      [context.addOnTab]
+    );
+    const onCustomKeydown = React.useCallback(
+      (event) => {
+        if (event.defaultPrevented) return;
+        const value = event.currentTarget.value;
+        if (!value) return;
+        const isAdded = context.onItemAdd(value);
+        if (isAdded) {
+          event.currentTarget.value = "";
+          context.setHighlightedIndex(null);
+        }
+        event.preventDefault();
+      },
+      [context.onItemAdd, context.setHighlightedIndex]
+    );
     React.useEffect(() => {
       if (!autoFocus) return;
       const animationFrameId = requestAnimationFrame(
@@ -508,7 +515,7 @@ var TagsInputInput = React.forwardRef(
             target.value = "";
             if (value) {
               context.onItemAdd(value);
-              context.setHighlightedValue(null);
+              context.setHighlightedIndex(null);
             }
           }
         }),
@@ -516,14 +523,14 @@ var TagsInputInput = React.forwardRef(
           if (event.key === "Enter") onCustomKeydown(event);
           if (event.key === "Tab") onTab(event);
           context.onInputKeydown(event);
-          if (event.key.length === 1) context.setHighlightedValue(null);
+          if (event.key.length === 1) context.setHighlightedIndex(null);
         }),
         onPaste: composeEventHandlers(inputProps.onPaste, (event) => {
           if (context.addOnPaste) {
             event.preventDefault();
             const value = event.clipboardData.getData("text");
             context.onItemAdd(value, { viaPaste: true });
-            context.setHighlightedValue(null);
+            context.setHighlightedIndex(null);
           }
         })
       }
@@ -559,7 +566,7 @@ var TagsInputItemDelete = React.forwardRef((props, ref) => {
   );
 });
 TagsInputItemDelete.displayName = ITEM_DELETE_NAME;
-var Delete = TagsInputItemDelete;
+var ItemDelete = TagsInputItemDelete;
 var ITEM_TEXT_NAME = "TagsInputItemText";
 var TagsInputItemText = React.forwardRef((props, ref) => {
   const { children, ...itemTextProps } = props;
@@ -593,7 +600,7 @@ var TagsInputItemText = React.forwardRef((props, ref) => {
             context.onItemUpdate(index, editValue);
           } else if (event.key === "Escape") {
             setEditValue(itemContext.displayValue);
-            context.setEditingValue(null);
+            context.setEditingIndex(null);
             context.inputRef.current?.focus();
           }
           event.stopPropagation();
@@ -605,7 +612,7 @@ var TagsInputItemText = React.forwardRef((props, ref) => {
         },
         onBlur: () => {
           setEditValue(itemContext.displayValue);
-          context.setEditingValue(null);
+          context.setEditingIndex(null);
         },
         style: {
           outline: "none",
@@ -621,7 +628,7 @@ var TagsInputItemText = React.forwardRef((props, ref) => {
   }
   return /* @__PURE__ */ React.createElement(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
 });
-var Text = TagsInputItemText;
+var ItemText = TagsInputItemText;
 var CLEAR_NAME = "TagsInputClear";
 var TagsInputClear = React.forwardRef(
   (props, ref) => {
@@ -648,4 +655,4 @@ var TagsInputClear = React.forwardRef(
 TagsInputClear.displayName = CLEAR_NAME;
 var Clear = TagsInputClear;
 
-export { Clear, Delete, Input, Item, Label, Root, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputLabel, TagsInputRoot, Text };
+export { Clear, Input, Item, ItemDelete, ItemText, Label, Root, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputLabel, TagsInputRoot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diceui/tags-input",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -48,17 +48,17 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"
   },
   "dependencies": {
     "@radix-ui/react-primitive": "^2.0.1",
-    "@diceui/shared": "0.2.1"
+    "@diceui/shared": "0.4.0"
   },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup --clean",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }