fix: add class to combo item in Input.svelte

Author: shinokada

src/lib/forms/input-field/Input.svelte

@@ -3,7 +3,7 @@
   import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "$lib";
   import { input, clampSize } from ".";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass,onInput, onFocus, onBlur, onKeydown, ...restProps }: InputProps<InputValue> = $props();
+  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, ...restProps }: InputProps<InputValue> = $props();
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -19,7 +19,7 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn, combo } = $derived(input({ size: _size, color: _color, group: isGroup }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn, combo, comboItem } = $derived(input({ size: _size, color: _color, group: isGroup }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -202,7 +202,7 @@
       <div class={cn(combo(), comboClass)}>
         {#each filteredSuggestions as item, i}
           <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
-            {item}
+            <p class={cn(comboItem(),comboItemClass)}>{item}</p>
           </button>
         {/each}
       </div>

src/lib/forms/input-field/theme.ts

@@ -9,7 +9,8 @@ export const input = tv({
     left: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5",
     right: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5",
     clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
-    combo: "absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+    combo: "absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
+    comboItem: "text-gray-900 dark:text-gray-50"
   },
   variants: {
     size: {

src/lib/types.ts

@@ -772,6 +772,7 @@ export interface InputProps<T extends InputValue = string> extends Omit<HTMLInpu
   maxSuggestions?: number;
   onSelect?: (item: string) => void;
   comboClass?: ClassValue;
+  comboItemClass?: ClassValue;
   onInput?: (event: Event) => void;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;