"use client"; import { type InputStyle, type InputStyleContext, inputStyle, inputStyleContext, } from "@/components/remocn/input"; import { SelectItemRow, type SelectItemState, type SelectItemStyle, type SelectItemStyleContext, selectItemStyle, selectItemStyleContext, } from "@/components/remocn/select-item"; import { type RemocnTheme, revealedText, useRemocnTheme, } from "@/lib/remocn-ui"; export type ComboboxState = "opened" | "closed"; export interface ComboboxProps { state?: ComboboxState; style?: ComboboxStyle; query?: string; revealCount?: number; placeholder?: string; items?: string[]; selectedIndex?: number; highlightedIndex?: number; pressedIndex?: number; itemStyles?: (SelectItemStyle | undefined)[]; inputStyle?: InputStyle; theme?: Partial; className?: string; } const WIDTH = 280; export function filterComboboxItems( items: string[], query: string, revealCount?: number, ): string[] { const visible = ( revealCount === undefined ? query : revealedText(query, revealCount) ) .trim() .toLowerCase(); if (visible === "") return items; return items.filter((item) => item.toLowerCase().includes(visible)); } export interface ComboboxStyle { panelOpacity: number; panelScale: number; panelTranslateY: number; } export interface ComboboxStyleContext { triggerCtx: InputStyleContext; panelBg: string; panelBorder: string; mutedFg: string; radius: number; itemCtx: SelectItemStyleContext; } export function comboboxStyleContext(theme: RemocnTheme): ComboboxStyleContext { return { triggerCtx: inputStyleContext(theme), panelBg: theme.popover, panelBorder: theme.border, mutedFg: theme.mutedForeground, radius: theme.radius, itemCtx: selectItemStyleContext(theme), }; } export function comboboxStyle( state: ComboboxState, _ctx: ComboboxStyleContext, ): ComboboxStyle { switch (state) { case "opened": return { panelOpacity: 1, panelScale: 1, panelTranslateY: 0 }; default: return { panelOpacity: 0, panelScale: 0.96, panelTranslateY: -4 }; } } function rowState( i: number, selectedIndex: number, highlightedIndex: number, pressedIndex: number, ): SelectItemState { if (i === pressedIndex) return "press"; if (i === selectedIndex) return "selected"; if (i === highlightedIndex) return "hover"; return "idle"; } export function Combobox({ state = "closed", style, query = "", revealCount, placeholder = "Select a fruit…", items = ["Apple", "Banana", "Orange", "Grape"], selectedIndex = -1, highlightedIndex = -1, pressedIndex = -1, itemStyles, inputStyle: inputStyleOverride, theme: themeOverride, className, }: ComboboxProps) { const theme = useRemocnTheme(themeOverride, "light"); const ctx = comboboxStyleContext(theme); const v = style ?? comboboxStyle(state, ctx); const visibleQuery = revealCount === undefined ? query : revealedText(query, revealCount); const filtered = filterComboboxItems(items, query, revealCount); const trigger: InputStyle = inputStyleOverride ?? inputStyle(visibleQuery ? "typing" : "idle", ctx.triggerCtx); const valueWidth = visibleQuery.length * 8; return (

{}

{} 0 ? 0 : trigger.placeholderOpacity, pointerEvents: "none", whiteSpace: "nowrap", }} > {placeholder} {}

{visibleQuery}

{}

{filtered.length === 0 ? (

No results found.

) : ( filtered.map((item, i) => { const override = itemStyles?.[i]; return ( ); }) )}

); }