combobox

1"use client"
2 
3import * as React from "react"
4import { Combobox as ComboboxPrimitive } from "@base-ui/react"
5 
6import { cn } from "@/registry/bases/radix/lib/utils"
7import { Button } from "@/registry/bases/radix/ui/button"
8import {
9  InputGroup,
10  InputGroupAddon,
11  InputGroupButton,
12  InputGroupInput,
13} from "@/registry/bases/radix/ui/input-group"
14import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
15 
16const Combobox = ComboboxPrimitive.Root
17 
18function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
19  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
20}
21 
22function ComboboxTrigger({
23  className,
24  children,
25  ...props
26}: ComboboxPrimitive.Trigger.Props) {
27  return (
28    <ComboboxPrimitive.Trigger
29      data-slot="combobox-trigger"
30      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
31      {...props}
32    >
33      {children}
34      <IconPlaceholder
35        lucide="ChevronDownIcon"
36        tabler="IconChevronDown"
37        hugeicons="ArrowDown01Icon"
38        phosphor="CaretDownIcon"
39        className="text-muted-foreground size-4 pointer-events-none"
40      />
41    </ComboboxPrimitive.Trigger>
42  )
43}
44 
45function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
46  return (
47    <ComboboxPrimitive.Clear
48      data-slot="combobox-clear"
49      render={<InputGroupButton variant="ghost" size="icon-xs" />}
50      className={cn(className)}
51      {...props}
52    >
53      <IconPlaceholder
54        lucide="XIcon"
55        tabler="IconX"
56        hugeicons="Cancel01Icon"
57        phosphor="XIcon"
58        className="pointer-events-none"
59      />
60    </ComboboxPrimitive.Clear>
61  )
62}
63 
64function ComboboxInput({
65  className,
66  children,
67  disabled = false,
68  showTrigger = true,
69  showClear = false,
70  ...props
71}: ComboboxPrimitive.Input.Props & {
72  showTrigger?: boolean
73  showClear?: boolean
74}) {
75  return (
76    <InputGroup className={cn("w-auto", className)}>
77      <ComboboxPrimitive.Input
78        render={<InputGroupInput disabled={disabled} />}
79        {...props}
80      />
81      <InputGroupAddon align="inline-end">
82        {showTrigger && (
83          <InputGroupButton
84            size="icon-xs"
85            variant="ghost"
86            asChild
87            data-slot="input-group-button"
88            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
89            disabled={disabled}
90          >
91            <ComboboxTrigger />
92          </InputGroupButton>
93// … truncated