tags-input

1import * as TagsInputPrimitive from "@diceui/tags-input";
2import { X } from "lucide-react";
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6function TagsInput({
7  className,
8  ...props
9}: React.ComponentProps<typeof TagsInputPrimitive.Root>) {
10  return (
11    <TagsInputPrimitive.Root
12      data-slot="tags-input"
13      className={cn("flex w-[380px] flex-col gap-2", className)}
14      {...props}
15    />
16  );
17}
18 
19function TagsInputLabel({
20  className,
21  ...props
22}: React.ComponentProps<typeof TagsInputPrimitive.Label>) {
23  return (
24    <TagsInputPrimitive.Label
25      data-slot="tags-input-label"
26      className={cn(
27        "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
28        className,
29      )}
30      {...props}
31    />
32  );
33}
34 
35function TagsInputList({ className, ...props }: React.ComponentProps<"div">) {
36  return (
37    <div
38      data-slot="tags-input-list"
39      className={cn(
40        "flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
41        className,
42      )}
43      {...props}
44    />
45  );
46}
47 
48function TagsInputInput({
49  className,
50  ...props
51}: React.ComponentProps<typeof TagsInputPrimitive.Input>) {
52  return (
53    <TagsInputPrimitive.Input
54      data-slot="tags-input-input"
55      className={cn(
56        "flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
57        className,
58      )}
59      {...props}
60    />
61  );
62}
63 
64function TagsInputItem({
65  className,
66  children,
67  ...props
68}: React.ComponentProps<typeof TagsInputPrimitive.Item>) {
69  return (
70    <TagsInputPrimitive.Item
71      data-slot="tags-input-item"
72      className={cn(
73        "inline-flex max-w-[calc(100%-8px)] items-center gap-1.5 rounded border bg-transparent px-2.5 py-1 text-sm focus:outline-hidden data-disabled:cursor-not-allowed data-editable:select-none data-editing:bg-transparent data-disabled:opacity-50 data-editing:ring-1 data-editing:ring-ring [&:not([data-editing])]:pr-1.5 [&[data-highlighted]:not([data-editing])]:bg-accent [&[data-highlighted]:not([data-editing])]:text-accent-foreground",
74        className,
75      )}
76      {...props}
77    >
78      <TagsInputPrimitive.ItemText className="truncate">
79        {children}
80      </TagsInputPrimitive.ItemText>
81// … truncated