refactor: better shortcut hook

packages/ui/components/Button.tsx

@@ -1,7 +1,8 @@
-import { useKeyboard } from "../src/useKeyboard";
-import type { ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { Text, Pressable } from "react-native";
 
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
 export interface ButtonProps {
   children: ReactNode;
   onPress?: () => void;
@@ -21,10 +22,16 @@ const STYLES: Record<
 export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
   const { backgroundColor, color } = STYLES[variant || "default"];
 
-  useKeyboard((key) => {
-    if (!shortcut || !onPress) return;
-    if (key.name == shortcut) onPress();
-  });
+  // if (shortcut) {
+  // useKeys((key) => {
+  //   if (
+  //     typeof shortcut == "object"
+  //       ? key.name == shortcut.name
+  //       : key.name == shortcut
+  //   )
+  //     return onPress;
+  // });
+  // }
 
   return (
     <Pressable onPress={onPress} style={{ backgroundColor }}>

packages/ui/components/Dialog.tsx

@@ -1,6 +1,5 @@
 import { createContext, type ReactNode } from "react";
 import { Modal, View, Text } from "react-native";
-import { useKeyboard } from "../src/useKeyboard";
 
 export interface DialogState {
   close?: () => void;
@@ -15,12 +14,6 @@ interface ProviderProps {
   close?: () => void;
 }
 export function Provider({ children, visible, close }: ProviderProps) {
-  useKeyboard((key) => {
-    if (key.name == "escape") {
-      if (close) close();
-    }
-  }, []);
-
   return (
     <Context.Provider value={{ close }}>
       <Modal transparent visible={visible}>

packages/ui/components/Table.tsx

@@ -1,7 +1,14 @@
-import { createContext, use, useState, type ReactNode } from "react";
+import {
+  createContext,
+  use,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { View, Text } from "react-native";
-import { useKeyboard } from "../src/useKeyboard";
 import type { KeyEvent } from "@opentui/core";
+import { useShortcut } from "../lib/shortcuts/hooks";
 
 const HEADER_COLOR = "#7158e2";
 const TABLE_COLORS = ["#ddd", "#eee"];
@@ -58,33 +65,12 @@ export function Provider<T extends ValidRecord>({
   const [idx, setIdx] = useState(0);
   const [selectedFrom, setSelectedFrom] = useState<number>();
 
-  useKeyboard(
-    (key) => {
-      if (key.name == "j" || key.name == "down") {
-        if (key.shift && selectedFrom == undefined) {
-          setSelectedFrom(idx);
-        }
-        setIdx((prev) => Math.min(prev + 1, data.length - 1));
-      } else if (key.name == "k" || key.name == "up") {
-        if (key.shift && selectedFrom == undefined) {
-          setSelectedFrom(idx);
-        }
-        setIdx((prev) => Math.max(prev - 1, 0));
-      } else if (key.name == "g" && key.shift) {
-        setIdx(data.length - 1);
-      } else if (key.name == "v") {
-        setSelectedFrom(idx);
-      } else if (key.name == "escape") {
-        setSelectedFrom(undefined);
-      } else {
-        const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
-        const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
-        const selected = data.slice(from, to + 1);
-        if (onKey) onKey(key, selected);
-      }
-    },
-    [data, idx, selectedFrom],
-  );
+  useShortcut("j", () => {
+    setIdx((prev) => Math.min(prev + 1, data.length - 1));
+  });
+  useShortcut("k", () => {
+    setIdx((prev) => Math.max(prev - 1, 0));
+  });
 
   const columnMap = new Map(
     columns.map((col) => {