Aurora Filter Bar

1"use client";
2 
3import * as React from "react";
4import { Search, X } from "lucide-react";
5import { Button } from "./button";
6import { cn } from "@/lib/utils";
7 
8// ---------------------------------------------------------------------------
9// FilterSearch — transparent inline input
10// ---------------------------------------------------------------------------
11 
12export interface FilterSearchProps
13  extends React.InputHTMLAttributes<HTMLInputElement> {
14  onClear?: () => void;
15}
16 
17export function FilterSearch({
18  ref,
19  className,
20  onClear,
21  value,
22  onChange,
23  ...rest
24}: FilterSearchProps & { ref?: React.Ref<HTMLInputElement> }) {
25  return (
26    <div className="relative flex flex-1 items-center">
27      <span
28        aria-hidden
29        className="pointer-events-none absolute left-0 flex items-center"
30        style={{ color: "var(--aurora-text-muted)" }}
31      >
32        <Search size={14} strokeWidth={1.75} />
33      </span>
34 
35      <input
36        ref={ref}
37        type="text"
38        value={value}
39        onChange={onChange}
40        className={cn(
41          "w-full bg-transparent pl-5 pr-5 placeholder:opacity-50",
42          "border-none outline-none ring-0 focus:ring-0",
43          className,
44        )}
45        style={{
46          color: "var(--aurora-text-primary)",
47          caretColor: "var(--aurora-accent-primary)",
48          fontFamily: "var(--aurora-font-sans)",
49          fontSize: "var(--aurora-type-control)",
50          fontWeight: "var(--aurora-weight-body)",
51          letterSpacing: "var(--aurora-letter-ui)",
52          lineHeight: "var(--aurora-line-dense)",
53        }}
54        {...rest}
55      />
56      {onClear && value ? (
57        <Button
58          variant="plain"
59          size="unstyled"
60          type="button"
61          aria-label="Clear Search"
62          onClick={onClear}
63          className="absolute right-0 inline-flex size-4 items-center justify-center rounded-full"
64          style={{ color: "var(--aurora-text-muted)" }}
65        >
66          <X size={10} strokeWidth={1.75} aria-hidden="true" />
67        </Button>
68      ) : null}
69    </div>
70  );
71}
72 
73// ---------------------------------------------------------------------------
74// FilterTag — accent tinted pill
75// ---------------------------------------------------------------------------
76 
77export interface FilterTagProps extends React.HTMLAttributes<HTMLSpanElement> {
78  children: React.ReactNode;
79  onRemove?: () => void;
80}
81 
82export function FilterTag({
83  ref,
84  children,
85  onRemove,
86  className,
87// … truncated