Add a theme preview and update the theme when highlight changes. (#151)

1 files changed, 10 insertions, 0 deletions

diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
index 7fef19c6..bda56014 100644
--- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
+++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
@@ -34,6 +34,9 @@ export interface RadioButtonSelectProps<T> {
 
   /** Function called when an item is selected. Receives the `value` of the selected item. */
   onSelect: (value: T) => void;
+
+  /** Function called when an item is highlighted. Receives the `value` of the selected item. */
+  onHighlight?: (value: T) => void;
 }
 
 /**
@@ -73,10 +76,16 @@ export function RadioButtonSelect<T>({
   items,
   initialIndex,
   onSelect,
+  onHighlight,
 }: RadioButtonSelectProps<T>): React.JSX.Element {
   const handleSelect = (item: RadioSelectItem<T>) => {
     onSelect(item.value);
   };
+  const handleHighlight = (item: RadioSelectItem<T>) => {
+    if (onHighlight) {
+      onHighlight(item.value);
+    }
+  };
   initialIndex = initialIndex ?? 0;
   return (
     <SelectInput
@@ -85,6 +94,7 @@ export function RadioButtonSelect<T>({
       items={items}
       initialIndex={initialIndex}
       onSelect={handleSelect}
+      onHighlight={handleHighlight}
     />
   );
 }