From d219f9013206aad5a1361e436ad4a45114e9cd49 Mon Sep 17 00:00:00 2001
From: Jacob Richman <jacob314@gmail.com>
Date: Tue, 12 Aug 2025 14:05:49 -0700
Subject: Switch from useInput to useKeypress. (#6056)

---
 packages/cli/src/ui/components/ThemeDialog.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'packages/cli/src/ui/components/ThemeDialog.tsx')

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index 37663447..16ecfc8f 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
 import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
 import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
@@ -16,6 +16,7 @@ import {
   getScopeItems,
   getScopeMessageForSetting,
 } from '../../utils/dialogScopeUtils.js';
+import { useKeypress } from '../hooks/useKeypress.js';
 
 interface ThemeDialogProps {
   /** Callback function when a theme is selected */
@@ -111,14 +112,17 @@ export function ThemeDialog({
     'theme',
   );
 
-  useInput((input, key) => {
-    if (key.tab) {
-      setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
-    }
-    if (key.escape) {
-      onSelect(undefined, selectedScope);
-    }
-  });
+  useKeypress(
+    (key) => {
+      if (key.name === 'tab') {
+        setFocusedSection((prev) => (prev === 'theme' ? 'scope' : 'theme'));
+      }
+      if (key.name === 'escape') {
+        onSelect(undefined, selectedScope);
+      }
+    },
+    { isActive: true },
+  );
 
   // Generate scope message for theme setting
   const otherScopeModifiedMessage = getScopeMessageForSetting(
-- 
cgit v1.2.3