combobox

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