Tag Input

"use client";

import { useId, useLayoutEffect, useRef, useState, type ClipboardEvent, type KeyboardEvent } from "react";
import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
import { cn } from "@/lib/utils";

// Tag input. What you type is drawn by a mirror under a transparent field, so
// when Enter or a comma finishes a tag, the typed word itself flies into the
// new chip (a shared layout animation from the mirror to the chip's label)
// while the chip's fill grows in around it. The field glides along to its new
// place, chips after a removed one close the gap, and the box eases to its
// new height when a row wraps, so nothing ever jumps. Pasting a list ("a, b,
// c" or one per line) adds them all at once.
//
// Backspace in an empty field first selects the last chip, a second press
// removes it; arrows walk the selection along the chips. A duplicate isn't
// added twice: the chip that already has it gives a small nudge instead.

export type TagInputProps = {
  /** Tags (controlled). Pair with `onChange`. */
  value?: readonly string[];
  /** Tags on mount (uncontrolled). */
  defaultValue?: readonly string[];
  onChange?: (tags: string[]) => void;