combobox

1import * as ComboboxPrimitive from "@diceui/combobox";
2import { Check, ChevronDown, X } from "lucide-react";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const Combobox = (({
8  className,
9  ...props
10}: React.ComponentProps<typeof ComboboxPrimitive.Root>) => {
11  return (
12    <ComboboxPrimitive.Root
13      data-slot="combobox"
14      className={cn(className)}
15      {...props}
16    />
17  );
18}) as ComboboxPrimitive.ComboboxRootComponentProps;
19 
20function ComboboxLabel({
21  className,
22  ...props
23}: React.ComponentProps<typeof ComboboxPrimitive.Label>) {
24  return (
25    <ComboboxPrimitive.Label
26      data-slot="combobox-label"
27      className={cn("px-0.5 py-1.5 font-semibold text-sm", className)}
28      {...props}
29    />
30  );
31}
32 
33function ComboboxAnchor({
34  className,
35  ...props
36}: React.ComponentProps<typeof ComboboxPrimitive.Anchor>) {
37  return (
38    <ComboboxPrimitive.Anchor
39      data-slot="combobox-anchor"
40      className={cn(
41        "relative flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 shadow-xs data-focused:ring-1 data-focused:ring-ring",
42        className,
43      )}
44      {...props}
45    />
46  );
47}
48 
49function ComboboxInput({
50  className,
51  ...props
52}: React.ComponentProps<typeof ComboboxPrimitive.Input>) {
53  return (
54    <ComboboxPrimitive.Input
55      data-slot="combobox-input"
56      className={cn(
57        "flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
58        className,
59      )}
60      {...props}
61    />
62  );
63}
64 
65function ComboboxTrigger({
66  className,
67  children,
68  ...props
69}: React.ComponentProps<typeof ComboboxPrimitive.Trigger>) {
70  return (
71    <ComboboxPrimitive.Trigger
72      data-slot="combobox-trigger"
73      className={cn(
74        "flex shrink-0 items-center justify-center rounded-r-md border-input bg-transparent text-muted-foreground transition-colors hover:text-foreground/80 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
75        className,
76      )}
77      {...props}
78    >
79      {children || <ChevronDown className="size-4" />}
80    </ComboboxPrimitive.Trigger>
81  );
82}
83 
84function ComboboxCancel({
85  className,
86  ...props
87}: React.ComponentProps<typeof ComboboxPrimitive.Cancel>) {
88  return (
89    <ComboboxPrimitive.Cancel
90      data-slot="combobox-cancel"
91      className={cn(
92// … truncated