Search input

1"use client";
2 
3import { mdiClose } from "@mdi/js";
4import * as React from "react";
5 
6import { Button } from "@/components/ui/button";
7import { Input } from "@/components/ui/input";
8import {
9  Tooltip,
10  TooltipContent,
11  TooltipTrigger,
12} from "@/components/ui/tooltip";
13import { Icon } from "@/lib/icon";
14import { cn } from "@/lib/utils";
15 
16// SearchInput wrapper (similar to InputGroup)
17function SearchInput({ className, ...props }: React.ComponentProps<"div">) {
18  return (
19    <div
20      data-slot="search-input"
21      role="group"
22      className={cn(
23        "relative flex w-full items-center rounded-md border border-input transition-[color,box-shadow] outline-none",
24        "h-10 min-w-0",
25        "bg-white dark:bg-input/30",
26        // Focus state (border-2 primary, no ring)
27        "has-[[data-slot=search-input-control]:focus-visible]:border-2 has-[[data-slot=search-input-control]:focus-visible]:border-primary",
28        // Error state
29        "has-[[data-slot=search-input-control][aria-invalid=true]]:ring-destructive/20 has-[[data-slot=search-input-control][aria-invalid=true]]:border-destructive dark:has-[[data-slot=search-input-control][aria-invalid=true]]:ring-destructive/40",
30        className,
31      )}
32      {...props}
33    />
34  );
35}
36 
37// SearchInputLeftElement (for icons, similar to InputLeftElement)
38function SearchInputLeftElement({
39  className,
40  children,
41  ...props
42}: React.ComponentProps<"div">) {
43  return (
44    <div
45      data-slot="search-input-left-element"
46      className={cn(
47        "text-muted-foreground flex h-auto cursor-text items-center justify-center pl-3 pointer-events-none",
48        "[&>svg:not([class*='size-'])]:size-5",
49        className,
50      )}
51      {...props}
52    >
53      {children}
54    </div>
55  );
56}
57 
58// SearchInputRightElement (for clear button, similar to InputRightElement)
59function SearchInputRightElement({
60  className,
61  children,
62  ...props
63}: React.ComponentProps<"div">) {
64  return (
65    <div
66      data-slot="search-input-right-element"
67      className={cn("flex h-auto items-center justify-center pr-1", className)}
68      {...props}
69    >
70      {children}
71    </div>
72  );
73}
74 
75// SearchInputField (the actual input field, identical to Input but without ring)
76const SearchInputField = React.forwardRef<
77  HTMLInputElement,
78  React.ComponentProps<"input">
79>(({ className, type = "text", ...props }, ref) => {
80  return (
81    <Input
82      ref={ref}
83      type={type}
84      data-slot="search-input-control"
85      className={cn(
86// … truncated