UI Combobox

1"use client";
2 
3import {
4  type InputStyle,
5  type InputStyleContext,
6  inputStyle,
7  inputStyleContext,
8} from "@/components/remocn/input";
9import {
10  SelectItemRow,
11  type SelectItemState,
12  type SelectItemStyle,
13  type SelectItemStyleContext,
14  selectItemStyle,
15  selectItemStyleContext,
16} from "@/components/remocn/select-item";
17import {
18  type RemocnTheme,
19  revealedText,
20  useRemocnTheme,
21} from "@/lib/remocn-ui";
22 
23export type ComboboxState = "opened" | "closed";
24 
25export interface ComboboxProps {
26  state?: ComboboxState;
27  style?: ComboboxStyle;
28  query?: string;
29  revealCount?: number;
30  placeholder?: string;
31  items?: string[];
32  selectedIndex?: number;
33  highlightedIndex?: number;
34  pressedIndex?: number;
35  itemStyles?: (SelectItemStyle | undefined)[];
36  inputStyle?: InputStyle;
37  theme?: Partial<RemocnTheme>;
38  className?: string;
39}
40 
41const WIDTH = 280;
42 
43export function filterComboboxItems(
44  items: string[],
45  query: string,
46  revealCount?: number,
47): string[] {
48  const visible = (
49    revealCount === undefined ? query : revealedText(query, revealCount)
50  )
51    .trim()
52    .toLowerCase();
53  if (visible === "") return items;
54  return items.filter((item) => item.toLowerCase().includes(visible));
55}
56 
57export interface ComboboxStyle {
58  panelOpacity: number;
59  panelScale: number;
60  panelTranslateY: number;
61}
62 
63export interface ComboboxStyleContext {
64  triggerCtx: InputStyleContext;
65  panelBg: string;
66  panelBorder: string;
67  mutedFg: string;
68  radius: number;
69  itemCtx: SelectItemStyleContext;
70}
71 
72export function comboboxStyleContext(theme: RemocnTheme): ComboboxStyleContext {
73  return {
74    triggerCtx: inputStyleContext(theme),
75    panelBg: theme.popover,
76    panelBorder: theme.border,
77    mutedFg: theme.mutedForeground,
78    radius: theme.radius,
79    itemCtx: selectItemStyleContext(theme),
80  };
81}
82 
83export function comboboxStyle(
84  state: ComboboxState,
85  _ctx: ComboboxStyleContext,
86): ComboboxStyle {
87  switch (state) {
88    case "opened":
89      return { panelOpacity: 1, panelScale: 1, panelTranslateY: 0 };
90    default:
91      return { panelOpacity: 0, panelScale: 0.96, panelTranslateY: -4 };
92  }
93}
94 
95function rowState(
96  i: number,
97  selectedIndex: number,
98  highlightedIndex: number,
99  pressedIndex: number,
100): SelectItemState {
101  if (i === pressedIndex) return "press";
102  if (i === selectedIndex) return "selected";
103  if (i === highlightedIndex) return "hover";
104  return "idle";
105}
106 
107export function Combobox({
108  state = "closed",
109  style,
110  query = "",
111// … truncated