mention

1import * as MentionPrimitive from "@diceui/mention";
2import type * as React from "react";
3 
4import { cn } from "@/lib/utils";
5 
6function Mention({
7  className,
8  ...props
9}: React.ComponentProps<typeof MentionPrimitive.Root>) {
10  return (
11    <MentionPrimitive.Root
12      data-slot="mention"
13      className={cn(
14        "**:data-tag:rounded **:data-tag:bg-blue-200 **:data-tag:py-px **:data-tag:text-blue-950 dark:**:data-tag:bg-blue-800 dark:**:data-tag:text-blue-50",
15        className,
16      )}
17      {...props}
18    />
19  );
20}
21 
22function MentionLabel({
23  className,
24  ...props
25}: React.ComponentProps<typeof MentionPrimitive.Label>) {
26  return (
27    <MentionPrimitive.Label
28      data-slot="mention-label"
29      className={cn("px-0.5 py-1.5 font-semibold text-sm", className)}
30      {...props}
31    />
32  );
33}
34 
35function MentionInput({
36  className,
37  ...props
38}: React.ComponentProps<typeof MentionPrimitive.Input>) {
39  return (
40    <MentionPrimitive.Input
41      data-slot="mention-input"
42      className={cn(
43        "flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
44        className,
45      )}
46      {...props}
47    />
48  );
49}
50 
51function MentionContent({
52  className,
53  children,
54  ...props
55}: React.ComponentProps<typeof MentionPrimitive.Content>) {
56  return (
57    <MentionPrimitive.Portal>
58      <MentionPrimitive.Content
59        data-slot="mention-content"
60        className={cn(
61          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
62          className,
63        )}
64        {...props}
65      >
66        {children}
67      </MentionPrimitive.Content>
68    </MentionPrimitive.Portal>
69  );
70}
71 
72function MentionItem({
73  className,
74  children,
75  ...props
76}: React.ComponentProps<typeof MentionPrimitive.Item>) {
77  return (
78    <MentionPrimitive.Item
79      data-slot="mention-item"
80      className={cn(
81// … truncated