tags-input

1"use client"
2 
3import * as React from "react"
4 
5import { TagsInput as TagsInputPrimitive } from "@ark-ui/react/tags-input"
6import { XIcon } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9 
10const TagsInput = TagsInputPrimitive.Root
11 
12const TagsInputClearTrigger = React.forwardRef<
13  React.ElementRef<typeof TagsInputPrimitive.ClearTrigger>,
14  TagsInputPrimitive.ClearTriggerProps
15>(({ className, ...props }, ref) => (
16  <TagsInputPrimitive.ClearTrigger
17    ref={ref}
18    className={cn(
19      "absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
20      className
21    )}
22    {...props}
23  >
24    <XIcon size={14} aria-hidden="true" />
25  </TagsInputPrimitive.ClearTrigger>
26))
27TagsInputClearTrigger.displayName = "TagsInputClearTrigger"
28 
29const TagsInputContext = TagsInputPrimitive.Context
30 
31const TagsInputControl = React.forwardRef<
32  React.ElementRef<typeof TagsInputPrimitive.Control>,
33  TagsInputPrimitive.ControlProps
34>(({ className, children, ...props }, ref) => (
35  <TagsInputContext>
36    {(context) => (
37      <TagsInputPrimitive.Control
38        ref={ref}
39        className={cn(
40          "relative min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-data-[part=clear-trigger]:pe-9 has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
41          {
42            "p-1": !context.empty,
43          },
44          className
45        )}
46        {...props}
47      >
48        <div className="flex flex-wrap gap-1">{children}</div>
49        <TagsInputPrimitive.HiddenInput />
50      </TagsInputPrimitive.Control>
51    )}
52  </TagsInputContext>
53))
54TagsInputControl.displayName = "TagsInputControl"
55 
56const TagsInputInput = React.forwardRef<
57  React.ElementRef<typeof TagsInputPrimitive.Input>,
58  TagsInputPrimitive.InputProps
59>(({ className, ...props }, ref) => (
60  <TagsInputContext>
61    {(context) => (
62      <TagsInputPrimitive.Input
63        ref={ref}
64        className={cn(
65          "flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed",
66          {
67// … truncated