react-keyhub/dist/ShortcutSheet.d.ts

A lightweight, scalable keyboard shortcut manager for React applications with TypeScript support

import React from "react";
import { ShortcutSheetProps } from "./types";
/**
 * Component for displaying all registered keyboard shortcuts
 */
export declare const ShortcutSheet: React.FC<ShortcutSheetProps>;
/**
 * Default CSS styles for the ShortcutSheet component
 */
export declare const ShortcutSheetStyles = "\n.keyhub-shortcut-sheet {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.keyhub-shortcut-sheet-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.6);\n  backdrop-filter: blur(4px);\n  transition: opacity 0.2s ease;\n}\n\n.keyhub-shortcut-sheet-content {\n  position: relative;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  width: 90%;\n  max-width: 1000px;\n  max-height: 100vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  animation: keyhub-sheet-appear 0.2s ease;\n  transition: transform 0.2s ease;\n}\n\n@keyframes keyhub-sheet-appear {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Light theme */\n.keyhub-theme-light .keyhub-shortcut-sheet-content {\n  background-color: white;\n  color: #333;\n}\n\n/* Dark theme */\n.keyhub-theme-dark .keyhub-shortcut-sheet-content {\n  background-color: #1e1e1e;\n  color: #eee;\n}\n\n/* Modal layout */\n.keyhub-layout-modal .keyhub-shortcut-sheet-content {\n  width: 90%;\n  max-width: 1000px;\n}\n\n/* Sidebar layout */\n.keyhub-layout-sidebar .keyhub-shortcut-sheet-content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 450px;\n  max-width: 90%;\n  border-radius: 0;\n  border-top-left-radius: 12px;\n  border-bottom-left-radius: 12px;\n  animation: keyhub-sheet-slide-in 0.3s ease;\n}\n\n@keyframes keyhub-sheet-slide-in {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.keyhub-shortcut-sheet-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  border-bottom: 1px solid;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-header {\n  border-color: #eee;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-header {\n  border-color: #333;\n}\n\n.keyhub-shortcut-sheet-header h2 {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 600;\n}\n\n.keyhub-shortcut-sheet-close {\n  background: none;\n  border: none;\n  font-size: 22px;\n  cursor: pointer;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: all 0.2s;\n  padding:0px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-close {\n  color: #666;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-close:hover {\n  background-color: #f0f0f0;\n  color: #333;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-close {\n  color: #aaa;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-close:hover {\n  background-color: #333;\n  color: #fff;\n}\n\n.keyhub-shortcut-sheet-filters {\n  display: flex;\n  flex-direction: column;\n  padding: 16px 24px;\n  gap: 12px;\n  border-bottom: 1px solid;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-filters {\n  border-color: #eee;\n  background-color: #fafafa;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-filters {\n  border-color: #333;\n  background-color: #252525;\n}\n\n.keyhub-shortcut-sheet-search-container {\n  position: relative;\n  flex: 1;\n}\n\n.keyhub-shortcut-sheet-search {\n  width: 100%;\n  padding: 12px 16px;\n  border-radius: 8px;\n  font-size: 15px;\n  border: 1px solid;\n  transition: all 0.2s;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-search {\n  border-color: #ddd;\n  background-color: white;\n  color: #333;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-search:focus {\n  border-color: #0066cc;\n  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-search {\n  border-color: #444;\n  background-color: #2a2a2a;\n  color: #eee;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-search:focus {\n  border-color: #4da3ff;\n  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.2);\n}\n\n.keyhub-shortcut-sheet-search-clear {\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  font-size: 18px;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: all 0.2s;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-search-clear {\n  color: #999;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-search-clear:hover {\n  background-color: #f0f0f0;\n  color: #666;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-search-clear {\n  color: #777;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-search-clear:hover {\n  background-color: #444;\n  color: #aaa;\n}\n\n.keyhub-shortcut-sheet-filter-controls {\n  display: flex;\n  gap: 12px;\n}\n\n.keyhub-shortcut-sheet-scope,\n.keyhub-shortcut-sheet-context {\n  padding: 10px 14px;\n  border-radius: 8px;\n  font-size: 14px;\n  border: 1px solid;\n  transition: all 0.2s;\n  cursor: pointer;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 10px center;\n  padding-right: 32px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-scope,\n.keyhub-theme-light .keyhub-shortcut-sheet-context {\n  border-color: #ddd;\n  background-color: white;\n  color: #333;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-scope:focus,\n.keyhub-theme-light .keyhub-shortcut-sheet-context:focus {\n  border-color: #0066cc;\n  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-scope,\n.keyhub-theme-dark .keyhub-shortcut-sheet-context {\n  border-color: #444;\n  background-color: #2a2a2a;\n  color: #eee;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-scope:focus,\n.keyhub-theme-dark .keyhub-shortcut-sheet-context:focus {\n  border-color: #4da3ff;\n  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.2);\n}\n\n.keyhub-shortcut-sheet-tabs {\n  display: flex;\n  overflow-x: auto;\n  padding: 0 24px;\n  border-bottom: 1px solid;\n  scrollbar-width: thin;\n  background-color: transparent;\n  min-height: 45px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-tabs {\n  border-color: #eee;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-tabs {\n  border-color: #333;\n}\n\n.keyhub-shortcut-sheet-tab {\n  padding: 14px 18px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 0.2s;\n  border-radius:0px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-tab {\n  color: #666;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-tab:hover:not(.active) {\n  color: #333;\n  background-color: #f5f5f5;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-tab {\n  color: #aaa;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-tab:hover:not(.active) {\n  color: #eee;\n  background-color: #333;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-tab.active {\n  color: #0066cc;\n  border-color: #0066cc;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-tab.active {\n  color: #4da3ff;\n  border-color: #4da3ff;\n}\n\n.keyhub-shortcut-sheet-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px 24px;\n}\n\n.keyhub-shortcut-sheet-empty {\n  padding: 40px 24px;\n  text-align: center;\n  color: #999;\n  font-size: 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n.keyhub-shortcut-sheet-empty:before {\n  content: \"\uD83D\uDD0D\";\n  font-size: 32px;\n  opacity: 0.7;\n}\n\n.keyhub-shortcut-sheet-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 28px;\n}\n\n.keyhub-shortcut-sheet-group-title {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 600;\n  padding-bottom: 8px;\n  border-bottom: 1px solid;\n  display: flex;\n  align-items: center;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-group-title {\n  color: #444;\n  border-color: #eee;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-group-title {\n  color: #ddd;\n  border-color: #333;\n}\n\n.keyhub-shortcut-sheet-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.keyhub-shortcut-sheet-card {\n  border-radius: 10px;\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  border: 1px solid;\n  transition: all 0.2s;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-card {\n  border-color: #eee;\n  background-color: #f9f9f9;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-card:hover {\n  border-color: #ddd;\n  background-color: #f5f5f5;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n  transform: translateY(-2px);\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-card {\n  border-color: #333;\n  background-color: #252525;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-card:hover {\n  border-color: #444;\n  background-color: #2a2a2a;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  transform: translateY(-2px);\n}\n\n.keyhub-shortcut-sheet-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.keyhub-shortcut-sheet-card-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.keyhub-shortcut-sheet-card-context {\n  font-size: 12px;\n  padding: 3px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-card-context {\n  background-color: #e0e0e0;\n  color: #555;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-card-context {\n  background-color: #444;\n  color: #ccc;\n}\n\n.keyhub-shortcut-sheet-card-description {\n  font-size: 14px;\n  line-height: 1.5;\n  flex-grow: 1;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-card-description {\n  color: #666;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-card-description {\n  color: #aaa;\n}\n\n.keyhub-shortcut-sheet-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.keyhub-shortcut-sheet-card-scope {\n  font-size: 12px;\n  padding: 3px 8px;\n  border-radius: 12px;\n  text-transform: capitalize;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-card-scope {\n  background-color: #e0e0e0;\n  color: #555;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-card-scope {\n  background-color: #444;\n  color: #ccc;\n}\n\n.keyhub-shortcut-sheet-key-combo {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.keyhub-shortcut-sheet-key {\n  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;\n  padding: 4px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  min-width: 24px;\n  text-align: center;\n  border: 1px solid;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-key {\n  background-color: white;\n  border-color: #ddd;\n  color: #333;\n  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-key {\n  background-color: #333;\n  border-color: #444;\n  color: #eee;\n  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);\n}\n\n.keyhub-shortcut-sheet-key-plus,\n.keyhub-shortcut-sheet-key-then {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-key-plus,\n.keyhub-theme-light .keyhub-shortcut-sheet-key-then {\n  color: #999;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-key-plus,\n.keyhub-theme-dark .keyhub-shortcut-sheet-key-then {\n  color: #777;\n}\n\n.keyhub-shortcut-disabled {\n  opacity: 0.6;\n}\n\n/* Scrollbar styling */\n.keyhub-shortcut-sheet-list::-webkit-scrollbar,\n.keyhub-shortcut-sheet-tabs::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-list::-webkit-scrollbar-track,\n.keyhub-theme-light .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-list::-webkit-scrollbar-thumb,\n.keyhub-theme-light .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 4px;\n}\n\n.keyhub-theme-light .keyhub-shortcut-sheet-list::-webkit-scrollbar-thumb:hover,\n.keyhub-theme-light .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-thumb:hover {\n  background: #aaa;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-list::-webkit-scrollbar-track,\n.keyhub-theme-dark .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-track {\n  background: #2a2a2a;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-list::-webkit-scrollbar-thumb,\n.keyhub-theme-dark .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-thumb {\n  background: #444;\n  border-radius: 4px;\n}\n\n.keyhub-theme-dark .keyhub-shortcut-sheet-list::-webkit-scrollbar-thumb:hover,\n.keyhub-theme-dark .keyhub-shortcut-sheet-tabs::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .keyhub-shortcut-sheet-cards {\n    grid-template-columns: 1fr;\n  }\n  \n  .keyhub-shortcut-sheet-filter-controls {\n    flex-direction: column;\n  }\n  \n  .keyhub-layout-sidebar .keyhub-shortcut-sheet-content {\n    width: 100%;\n    max-width: 100%;\n    border-radius: 0;\n  }\n  \n  .keyhub-shortcut-sheet-header {\n    padding: 16px 20px;\n  }\n  \n  .keyhub-shortcut-sheet-list {\n    padding: 16px 20px;\n  }\n  \n  .keyhub-shortcut-sheet-card {\n    padding: 16px;\n  }\n}\n\n@media (max-width: 480px) {\n  .keyhub-shortcut-sheet-header h2 {\n    font-size: 18px;\n  }\n  \n  .keyhub-shortcut-sheet-card-footer {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n";