diff --git a/packages/solid/README.md b/packages/solid/README.md
new file mode 100644
index 0000000..5655bea
--- /dev/null
+++ b/packages/solid/README.md
@@ -0,0 +1,99 @@
+# @vgerbot/shortcuts-solid
+
+`@vgerbot/shortcuts-solid` is a Solid.js library that provides a set of utilities for easily integrating keyboard shortcuts into your Solid.js applications. It is built on top of the `@vgerbot/shortcuts` library, which handles the underlying keyboard event management.
+
+## Installation
+
+```bash
+npm install @vgerbot/shortcuts-solid
+```
+
+## Usage
+
+### `KeyboardProvider`
+
+The `KeyboardProvider` component is a Solid.js context provider that manages the keyboard instance and its options. It should be wrapped around the parts of your application where you want to use keyboard shortcuts.
+
+```jsx
+import { KeyboardProvider } from '@vgerbot/shortcuts-solid';
+
+const App = () => (
+
+ {/* Your app components */}
+
+);
+```
+
+You can pass options to the `KeyboardProvider` to configure the keyboard instance:
+
+```jsx
+
+ {/* Your app components */}
+
+```
+
+### `useKeyboard`
+
+The `useKeyboard` hook returns a function that provides the keyboard instance, which can be used to register or unregister shortcut commands, add event interceptors, switch keyboard contexts, and more optionals manually. It also accepts an optional callback function that will be called with the keyboard instance.
+
+```jsx
+import { useKeyboard } from '@vgerbot/shortcuts-solid';
+
+const MyComponent = () => {
+ const getKeyboard = useKeyboard((keyboard) => {
+ // Register a shortcut
+ const unregister = keyboard.register('save', () => {
+ console.log('Shortcut triggered!');
+ });
+ // Add an event interceptor
+ keyboard.addInterceptor((event, next) => {
+ // Intercept and handle keyboard events
+ // ...
+ return next(event);
+ });
+
+ // Switch keyboard context
+ keyboard.switchContext('editor');
+
+ // Unregister the shortcut
+ return unregister;
+ });
+
+ // Get the keyboard instance
+ const keyboard = getKeyboard();
+
+ // ...
+};
+```
+
+### `useCommand`
+
+The `useCommand` hook registers a keyboard shortcut with a provided command string and callback function.
+
+```jsx
+import { useCommand } from '@vgerbot/shortcuts-solid';
+
+const MyComponent = () => {
+ useCommand('Ctrl+S', () => {
+ console.log('Shortcut triggered!');
+ });
+
+ // ...
+};
+```
+
+### `useShortcutKeyMatch`
+
+The `useShortcutKeyMatch` hook registers a keyboard shortcut with a provided shortcut object or string and callback function.
+
+```jsx
+import { useShortcutKeyMatch } from '@vgerbot/shortcuts-solid';
+
+const MyComponent = () => {
+ useShortcutKeyMatch('Ctrl+S', () => {
+ console.log('Shortcut triggered!');
+ });
+
+ // ...
+};
+```
diff --git a/packages/solid/package.json b/packages/solid/package.json
new file mode 100644
index 0000000..e78fd7c
--- /dev/null
+++ b/packages/solid/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "@vgerbot/shortcuts-solid",
+ "version": "1.0.0",
+ "description": "Shortcuts for Solid-js",
+ "author": "y1j2x34 ",
+ "homepage": "https://github.com/y1j2x34/shortcuts/tree/main/packages/solid#readme",
+ "license": "MIT",
+ "main": "lib/index.cjs.js",
+ "directories": {
+ "lib": "lib",
+ "test": "__tests__"
+ },
+ "files": [
+ "lib"
+ ],
+ "publishConfig": {
+ "registry": "https://registry.npmmirror.com/"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/y1j2x34/shortcuts.git"
+ },
+ "scripts": {},
+ "bugs": {
+ "url": "https://github.com/y1j2x34/shortcuts/issues"
+ },
+ "dependencies": {
+ "@vgerbot/shortcuts": "^1.0.0",
+ "solid-js": "^1.8.16"
+ },
+ "devDependencies": {},
+ "peerDependencies": {
+ "solid-js": ">= 1.8.0"
+ }
+}
diff --git a/packages/solid/src/context/KeyboardContext.ts b/packages/solid/src/context/KeyboardContext.ts
new file mode 100644
index 0000000..eb107d7
--- /dev/null
+++ b/packages/solid/src/context/KeyboardContext.ts
@@ -0,0 +1,5 @@
+import { Keyboard } from '@vgerbot/shortcuts';
+import { Context, createContext } from 'solid-js';
+export const KeyboardContext = createContext<() => Keyboard>() as Context<
+ () => Keyboard
+>;
diff --git a/packages/solid/src/context/KeyboardContextProvider.tsx b/packages/solid/src/context/KeyboardContextProvider.tsx
new file mode 100644
index 0000000..b4c0f43
--- /dev/null
+++ b/packages/solid/src/context/KeyboardContextProvider.tsx
@@ -0,0 +1,74 @@
+import {
+ JSXElement,
+ ParentProps,
+ createEffect,
+ createSignal,
+ on,
+ untrack
+} from 'solid-js';
+import { KeyboardContext } from './KeyboardContext';
+import { Keyboard } from '@vgerbot/shortcuts';
+
+type Options = ConstructorParameters[0];
+
+type InitKeyboardProviderProps = ParentProps;
+
+type UserProvideKeyboardProps = ParentProps<{ keyboard: Keyboard }>;
+
+export function KeyboardProvider(props: ParentProps): JSXElement;
+export function KeyboardProvider(
+ props: ParentProps<{ keyboard: Keyboard }>
+): JSXElement;
+export function KeyboardProvider(
+ props: InitKeyboardProviderProps | UserProvideKeyboardProps
+) {
+ if ('keyboard' in props) {
+ return (
+ props.keyboard}>
+ {props.children}
+
+ );
+ } else {
+ const [keyboard, setKeyboard] = createSignal(new Keyboard(props));
+ createEffect(() => {
+ const [eventOptions, macroRegistry] = untrack(() => [
+ props.eventOptions,
+ props.macroRegistry
+ ]);
+ const oldKeyboard = keyboard();
+ if (oldKeyboard) {
+ oldKeyboard.destroy();
+ }
+ setKeyboard(
+ new Keyboard({
+ anchor: props.anchor,
+ eventOptions,
+ macroRegistry
+ })
+ );
+ });
+ createEffect(
+ on(
+ [() => props.eventOptions, () => props.macroRegistry],
+ ([eventOptions, macroRegistry]) => {
+ const oldKeyboard = keyboard();
+ if (oldKeyboard) {
+ oldKeyboard.destroy();
+ }
+ setKeyboard(
+ new Keyboard({
+ anchor: props.anchor,
+ eventOptions,
+ macroRegistry
+ })
+ );
+ }
+ )
+ );
+ return (
+
+ {props.children}
+
+ );
+ }
+}
diff --git a/packages/solid/src/hooks/index.ts b/packages/solid/src/hooks/index.ts
new file mode 100644
index 0000000..36fe765
--- /dev/null
+++ b/packages/solid/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useCommand';
+export * from './useKeyboard';
+export * from './useShortcutKeyMatch';
diff --git a/packages/solid/src/hooks/useCommand.ts b/packages/solid/src/hooks/useCommand.ts
new file mode 100644
index 0000000..23c09d1
--- /dev/null
+++ b/packages/solid/src/hooks/useCommand.ts
@@ -0,0 +1,8 @@
+import { ShortcutEventHandler } from '@vgerbot/shortcuts';
+import { useKeyboard } from './useKeyboard';
+
+export function useCommand(command: string, callback: ShortcutEventHandler) {
+ useKeyboard(keyboard => {
+ return keyboard.on(command, callback);
+ });
+}
diff --git a/packages/solid/src/hooks/useKeyboard.ts b/packages/solid/src/hooks/useKeyboard.ts
new file mode 100644
index 0000000..a1dad7f
--- /dev/null
+++ b/packages/solid/src/hooks/useKeyboard.ts
@@ -0,0 +1,16 @@
+import { createEffect, useContext } from 'solid-js';
+import { KeyboardContext } from '../context/KeyboardContext';
+import { Keyboard } from '@vgerbot/shortcuts';
+
+export function useKeyboard(
+ callback?: (keyboard: Keyboard) => void | (() => void)
+) {
+ const getKeyboard = useContext(KeyboardContext);
+ if (callback) {
+ createEffect(() => {
+ const keyboard = getKeyboard();
+ return callback(keyboard);
+ });
+ }
+ return getKeyboard;
+}
diff --git a/packages/solid/src/hooks/useShortcutKeyMatch.ts b/packages/solid/src/hooks/useShortcutKeyMatch.ts
new file mode 100644
index 0000000..6b1d59e
--- /dev/null
+++ b/packages/solid/src/hooks/useShortcutKeyMatch.ts
@@ -0,0 +1,11 @@
+import { Shortcut, ShortcutEventHandler } from '@vgerbot/shortcuts';
+import { useKeyboard } from './useKeyboard';
+
+export function useShortcutKeyMatch(
+ shortcut: string | Shortcut,
+ callback: ShortcutEventHandler
+) {
+ useKeyboard(keyboard => {
+ return keyboard.onShortcutKeyMatch(shortcut, callback);
+ });
+}
diff --git a/packages/solid/src/index.ts b/packages/solid/src/index.ts
new file mode 100644
index 0000000..929acac
--- /dev/null
+++ b/packages/solid/src/index.ts
@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './context/KeyboardContextProvider';
diff --git a/packages/solid/tsconfig.json b/packages/solid/tsconfig.json
new file mode 100644
index 0000000..3ceb5bf
--- /dev/null
+++ b/packages/solid/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
+ },
+ "extends": "../../tsconfig.json",
+ "include": ["src"]
+}
\ No newline at end of file
diff --git a/packages/solid/yarn.lock b/packages/solid/yarn.lock
new file mode 100644
index 0000000..1bcb632
--- /dev/null
+++ b/packages/solid/yarn.lock
@@ -0,0 +1,46 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@vgerbot/shortcuts@^1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@vgerbot/shortcuts/-/shortcuts-1.0.0.tgz#1d0341b3024f5d795d6cce9887040d072bc27f43"
+ integrity sha512-KqfEfkvi/mX+oeySNP55/mBQxM/rgA8dssx9UdiTN+TXqdaLkMr3af4bbzVVzioe5X6km5jJ1paJGXKdXgrVfA==
+ dependencies:
+ browser-detect "^0.2.28"
+
+browser-detect@^0.2.28:
+ version "0.2.28"
+ resolved "https://registry.yarnpkg.com/browser-detect/-/browser-detect-0.2.28.tgz#5688fc22f638390614ebea4646483403fb20ebfb"
+ integrity sha512-KeWGHqYQmHDkCFG2dIiX/2wFUgqevbw/rd6wNi9N6rZbaSJFtG5kel0HtprRwCGp8sqpQP79LzDJXf/WCx4WAw==
+ dependencies:
+ core-js "^2.5.7"
+
+core-js@^2.5.7:
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+ integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
+csstype@^3.1.0:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+ integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+seroval-plugins@^1.0.3:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/seroval-plugins/-/seroval-plugins-1.0.5.tgz#eeded50d736d5e1dba142a72b0188df9f4e42b6d"
+ integrity sha512-8+pDC1vOedPXjKG7oz8o+iiHrtF2WswaMQJ7CKFpccvSYfrzmvKY9zOJWCg+881722wIHfwkdnRmiiDm9ym+zQ==
+
+seroval@^1.0.4:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/seroval/-/seroval-1.0.5.tgz#d71ee540d936babaed92f56eda3e52d8e2a3deed"
+ integrity sha512-TM+Z11tHHvQVQKeNlOUonOWnsNM+2IBwZ4vwoi4j3zKzIpc5IDw8WPwCfcc8F17wy6cBcJGbZbFOR0UCuTZHQA==
+
+solid-js@^1.8.16:
+ version "1.8.16"
+ resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.8.16.tgz#33ce9bff617154d5f4b889e1b2fb89d682b7a422"
+ integrity sha512-rja94MNU9flF3qQRLNsu60QHKBDKBkVE1DldJZPIfn2ypIn3NV2WpSbGTQIvsyGPBo+9E2IMjwqnqpbgfWuzeg==
+ dependencies:
+ csstype "^3.1.0"
+ seroval "^1.0.4"
+ seroval-plugins "^1.0.3"