<!-- source-hash: cc1ede727d1bab8a8e8ff3b969595614 -->
A floating popup component that displays a list of hidden tag items with optional remove functionality, typically used in multi-select inputs when tags overflow the visible area.

## Key Components

### Interfaces

| Interface | Description |
|-----------|-------------|
| `HiddenTagItem` | Defines a tag item with a `label` (ReactNode) and `value` (unknown) |
| `HiddenTagsPopupProps` | Props for the popup including `items`, `onRemove`, `disabled`, `className`, and `style` |

### Exports

- **`HiddenTagsPopup`** — A `forwardRef` component rendering an absolutely-positioned dropdown card listing overflow tags. Each item shows a truncated uppercase label and an optional remove button (`XmarkCircleIcon`) when `onRemove` is provided and `disabled` is false.

## Usage Example

```typescript
import { HiddenTagsPopup, HiddenTagItem } from "./hidden-tags-popup"

const overflowTags: HiddenTagItem[] = [
  { label: "Engineering", value: "engineering" },
  { label: "Design", value: "design" },
]

function TagSelector() {
  const handleRemove = (value: unknown) => {
    console.log("Remove tag:", value)
  }

  return (
    <div style={{ position: "relative" }}>
      <HiddenTagsPopup
        items={overflowTags}
        onRemove={handleRemove}
        disabled={false}
      />
    </div>
  )
}
```

## Notes

- Renders with `z-50` and `top-full` positioning — expects a relatively-positioned parent container.
- Includes entrance animation via `animate-in fade-in-0 zoom-in-95`.
- Remove button uses `e.stopPropagation()` to prevent unintended parent click events.
- Accessible via `aria-label` on each remove button.