@diceui/tags-input 0.0.5 → 0.1.1

package/dist/index.cjs

@@ -2,7 +2,6 @@
 
 'use strict';
 
-var reactPrimitive = require('@radix-ui/react-primitive');
 var React = require('react');
 var shared = require('@diceui/shared');
 
@@ -56,10 +55,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 +119,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 +149,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 +163,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 +182,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 +227,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 +293,10 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       onItemRemove,
       onItemUpdate,
       onInputKeydown,
-      highlightedValue,
-      setHighlightedValue,
-      editingValue,
-      setEditingValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      editingIndex,
+      setEditingIndex,
       displayValue,
       onItemLeave,
       inputRef,
@@ -317,7 +315,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       labelId
     },
     /* @__PURE__ */ React__namespace.createElement(
-      reactPrimitive.Primitive.div,
+      shared.Primitive.div,
       {
         id,
         "data-invalid": isInvalidInput ? "" : void 0,
@@ -342,7 +340,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));
           }
         })
       },
@@ -368,7 +366,7 @@ var TagsInputLabel = React__namespace.forwardRef(
   (props, ref) => {
     const context = useTagsInput(LABEL_NAME);
     return /* @__PURE__ */ React__namespace.createElement(
-      reactPrimitive.Primitive.label,
+      shared.Primitive.label,
       {
         id: context.labelId,
         htmlFor: context.inputId,
@@ -389,19 +387,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,
@@ -409,7 +409,7 @@ var TagsInputItem = React__namespace.forwardRef(
         displayValue
       },
       /* @__PURE__ */ React__namespace.createElement(
-        reactPrimitive.Primitive.div,
+        shared.Primitive.div,
         {
           ...{ [shared.DATA_ITEM_ATTR]: "" },
           "aria-labelledby": textId,
@@ -426,16 +426,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 +472,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(
@@ -495,7 +501,7 @@ var TagsInputInput = React__namespace.forwardRef(
       return () => cancelAnimationFrame(animationFrameId);
     }, [autoFocus, context.inputRef]);
     return /* @__PURE__ */ React__namespace.createElement(
-      reactPrimitive.Primitive.input,
+      shared.Primitive.input,
       {
         type: "text",
         id: context.inputId,
@@ -530,7 +536,7 @@ var TagsInputInput = React__namespace.forwardRef(
             target.value = "";
             if (value) {
               context.onItemAdd(value);
-              context.setHighlightedValue(null);
+              context.setHighlightedIndex(null);
             }
           }
         }),
@@ -538,14 +544,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);
           }
         })
       }
@@ -561,7 +567,7 @@ var TagsInputItemDelete = React__namespace.forwardRef((props, ref) => {
   const disabled = itemContext.disabled || context.disabled;
   if (itemContext.isEditing) return null;
   return /* @__PURE__ */ React__namespace.createElement(
-    reactPrimitive.Primitive.button,
+    shared.Primitive.button,
     {
       type: "button",
       tabIndex: -1,
@@ -581,7 +587,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;
@@ -590,7 +596,7 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
   const [editValue, setEditValue] = React__namespace.useState(itemContext.displayValue);
   if (itemContext.isEditing && context.editable && !itemContext.disabled) {
     return /* @__PURE__ */ React__namespace.createElement(
-      reactPrimitive.Primitive.input,
+      shared.Primitive.input,
       {
         type: "text",
         autoCapitalize: "off",
@@ -615,7 +621,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 +633,7 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
         },
         onBlur: () => {
           setEditValue(itemContext.displayValue);
-          context.setEditingValue(null);
+          context.setEditingIndex(null);
         },
         style: {
           outline: "none",
@@ -641,16 +647,16 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ React__namespace.createElement(reactPrimitive.Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
+  return /* @__PURE__ */ React__namespace.createElement(shared.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) => {
     const { forceMount, ...clearProps } = props;
     const context = useTagsInput(CLEAR_NAME);
     return /* @__PURE__ */ React__namespace.createElement(shared.Presence, { present: forceMount || context.value.length > 0 }, /* @__PURE__ */ React__namespace.createElement(
-      reactPrimitive.Primitive.button,
+      shared.Primitive.button,
       {
         type: "button",
         "aria-disabled": context.disabled,
@@ -671,9 +677,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 +690,3 @@ exports.TagsInputItemDelete = TagsInputItemDelete;
 exports.TagsInputItemText = TagsInputItemText;
 exports.TagsInputLabel = TagsInputLabel;
 exports.TagsInputRoot = TagsInputRoot;
-exports.Text = Text;

package/dist/index.d.cts

@@ -1,6 +1,5 @@
-import { Primitive } from '@radix-ui/react-primitive';
 import * as React from 'react';
-import { Direction } from '@diceui/shared';
+import { Primitive, Direction } from '@diceui/shared';
 
 interface TagsInputInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
 }
@@ -104,12 +103,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 +122,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

@@ -1,6 +1,5 @@
-import { Primitive } from '@radix-ui/react-primitive';
 import * as React from 'react';
-import { Direction } from '@diceui/shared';
+import { Primitive, Direction } from '@diceui/shared';
 
 interface TagsInputInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
 }
@@ -104,12 +103,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 +122,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

@@ -1,8 +1,7 @@
 'use client';
 
-import { Primitive } from '@radix-ui/react-primitive';
 import * as React from 'react';
-import { createContext, useControllableState, useId, useDirection, useCollection, useFormControl, useComposedRefs, DATA_ITEM_ATTR, composeEventHandlers, BubbleInput, composeRefs, Presence } from '@diceui/shared';
+import { createContext, useControllableState, useId, useDirection, useCollection, useFormControl, useComposedRefs, DATA_ITEM_ATTR, Primitive, composeEventHandlers, BubbleInput, composeRefs, Presence } from '@diceui/shared';
 
 var ROOT_NAME = "TagsInputRoot";
 var [TagsInputProvider, useTagsInput] = createContext(ROOT_NAME);
@@ -34,10 +33,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 +97,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 +127,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 +141,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 +160,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 +205,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 +271,10 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       onItemRemove,
       onItemUpdate,
       onInputKeydown,
-      highlightedValue,
-      setHighlightedValue,
-      editingValue,
-      setEditingValue,
+      highlightedIndex,
+      setHighlightedIndex,
+      editingIndex,
+      setEditingIndex,
       displayValue,
       onItemLeave,
       inputRef,
@@ -320,7 +318,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 +365,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 +404,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 +450,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 +514,7 @@ var TagsInputInput = React.forwardRef(
             target.value = "";
             if (value) {
               context.onItemAdd(value);
-              context.setHighlightedValue(null);
+              context.setHighlightedIndex(null);
             }
           }
         }),
@@ -516,14 +522,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 +565,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 +599,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 +611,7 @@ var TagsInputItemText = React.forwardRef((props, ref) => {
         },
         onBlur: () => {
           setEditValue(itemContext.displayValue);
-          context.setEditingValue(null);
+          context.setEditingIndex(null);
         },
         style: {
           outline: "none",
@@ -621,7 +627,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 +654,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.5",
+  "version": "0.1.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -48,17 +48,16 @@
     }
   },
   "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.3.0"
+    "@diceui/shared": "0.5.0"
   },
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup --clean",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }