listbox

1import * as ListboxPrimitive from "@diceui/listbox";
2import { Check } from "lucide-react";
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6const Listbox = (({
7  className,
8  orientation = "vertical",
9  ...props
10}: React.ComponentProps<typeof ListboxPrimitive.Root>) => {
11  return (
12    <ListboxPrimitive.Root
13      data-slot="listbox"
14      orientation={orientation}
15      className={cn(
16        "flex gap-2 focus-visible:outline-none",
17        orientation === "vertical" &&
18          "flex-col *:data-[slot=listbox-group]:flex-col",
19        className,
20      )}
21      {...props}
22    />
23  );
24}) as ListboxPrimitive.ListboxRootComponentProps;
25 
26function ListboxGroup({
27  className,
28  ...props
29}: React.ComponentProps<typeof ListboxPrimitive.Group>) {
30  return (
31    <ListboxPrimitive.Group
32      data-slot="listbox-group"
33      className={cn("flex flex-col gap-2", className)}
34      {...props}
35    />
36  );
37}
38 
39function ListboxGroupLabel({
40  className,
41  ...props
42}: React.ComponentProps<typeof ListboxPrimitive.GroupLabel>) {
43  return (
44    <ListboxPrimitive.GroupLabel
45      data-slot="listbox-group-label"
46      className={cn(
47        "px-2 pt-1 font-medium text-muted-foreground text-sm",
48        className,
49      )}
50      {...props}
51    />
52  );
53}
54 
55function ListboxItem({
56  className,
57  ...props
58}: React.ComponentProps<typeof ListboxPrimitive.Item>) {
59  return (
60    <ListboxPrimitive.Item
61      data-slot="listbox-item"
62      className={cn(
63        "flex w-full cursor-default select-none items-center justify-between gap-2 rounded-md p-4 outline-hidden ring-1 ring-border focus-visible:ring-ring data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50",
64        className,
65      )}
66      {...props}
67    />
68  );
69}
70 
71function ListboxItemIndicator({
72  ...props
73}: React.ComponentProps<typeof ListboxPrimitive.ItemIndicator>) {
74  return (
75    <ListboxPrimitive.ItemIndicator
76      data-slot="listbox-item-indicator"
77      {...props}
78    >
79      <Check className="size-4" />
80    </ListboxPrimitive.ItemIndicator>
81  );
82}
83 
84export {
85  Listbox,
86  ListboxGroup,
87  ListboxGroupLabel,
88  ListboxItem,
89  ListboxItemIndicator,
90};