react-flick-keyboard 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 jarry3369
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# React Flick Keyboard
+
+A reusable, accessible, and customizable Japanese Flick Keyboard component for React.
+
+## Features
+
+- 🧠 **Headless Architecture**: Use `useFlickKeyboard` to build your own UI.
+- 📱 **Touch & Mouse Support**: Works seamlessly on mobile and desktop.
+- ⌨️ **Standard Layout**: Implements the standard 10-key Japanese flick layout.
+- 🎨 **Optional UI**: Ready-to-use Tailwind styled components included.
+- 🔄 **Flick & Toggle**: Supports both flick gestures and toggle (multi-tap) input.
+
+## Installation
+
+```bash
+npm install react-flick-keyboard
+# or
+yarn add react-flick-keyboard
+```
+
+## Usage
+
+### 1. Default UI (Easy Mode)
+
+Import the styles and the component:
+
+```tsx
+import { useState } from 'react';
+import { FlickKeyboard } from 'react-flick-keyboard';
+import 'react-flick-keyboard/dist/style.css'; // Import styles
+
+function App() {
+  const [text, setText] = useState('');
+
+  const handleInput = (char: string) => {
+    setText((prev) => prev + char);
+  };
+
+  return (
+    <div className="p-4">
+      <input value={text} readOnly />
+      <FlickKeyboard 
+        onInput={handleInput}
+        currentInput={text.slice(-1)} 
+      />
+    </div>
+  );
+}
+```
+
+### 2. Headless Mode (Custom UI)
+
+Use the `useFlickKeyboard` hook to build your own interface.
+
+```tsx
+import { useFlickKeyboard, FLICK_KEYBOARD_LAYOUT } from 'react-flick-keyboard';
+
+function CustomKeyboard() {
+  const { 
+    handleCharInput, 
+    handleModifier 
+  } = useFlickKeyboard({
+    onInput: (char) => console.log(char),
+  });
+
+  return (
+    <div>
+      {/* Build your own grid */}
+      <button onClick={() => handleCharInput('あ', 'a', true)}>あ</button>
+      {/* ... */}
+    </div>
+  );
+}
+```
+
+## Development
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Start dev server:
+   ```bash
+   npm run dev
+   ```
+
+3. Build library:
+   ```bash
+   npm run build
+   ```
+
+## License
+
+MIT

package/dist/components/FlickKeyboard.d.ts

@@ -0,0 +1,14 @@
+import { FlickDirection } from '../types';
+
+export interface FlickKeyboardProps {
+    onInput: (character: string) => void;
+    onReplace?: (oldChar: string, newChar: string) => void;
+    disabled?: boolean;
+    hintTarget?: {
+        key: string;
+        direction: FlickDirection;
+    } | null;
+    hintModifier?: boolean;
+    currentInput?: string;
+}
+export declare function FlickKeyboard({ onInput, onReplace, disabled, hintTarget, hintModifier, currentInput, }: FlickKeyboardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalFlickGuide.d.ts

@@ -0,0 +1,19 @@
+import { FlickDirection, HiraganaKey } from '../types';
+
+interface GlobalFlickGuideProps {
+    keyName: string;
+    hiraganaKey: HiraganaKey;
+    position: {
+        x: number;
+        y: number;
+    };
+    direction: FlickDirection;
+    isModifier?: boolean;
+    lastChar?: string;
+    hintTarget?: {
+        key: string;
+        direction: FlickDirection;
+    } | null;
+}
+export declare function GlobalFlickGuide({ keyName, hiraganaKey, position, direction: currentDirection, isModifier, hintTarget, }: GlobalFlickGuideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KeyButton.d.ts

@@ -0,0 +1,26 @@
+import { FlickDirection, HiraganaKey } from '../types';
+
+export interface ActiveGuideState {
+    keyName: string;
+    hiraganaKey: HiraganaKey;
+    position: {
+        x: number;
+        y: number;
+    };
+    direction: FlickDirection;
+    isModifier?: boolean;
+    lastChar?: string;
+}
+interface KeyButtonProps {
+    keyName: string;
+    hiraganaKey: HiraganaKey;
+    onInput: (character: string, keyName: string, isToggleable: boolean) => void;
+    disabled: boolean;
+    onGuideUpdate: (state: ActiveGuideState | null) => void;
+    hintTarget?: {
+        key: string;
+        direction: FlickDirection;
+    } | null;
+}
+export declare function KeyButton({ keyName, hiraganaKey, onInput, disabled, onGuideUpdate, hintTarget, }: KeyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ModifierKey.d.ts

@@ -0,0 +1,9 @@
+interface ModifierKeyProps {
+    onModifier: () => void;
+    disabled: boolean;
+    lastChar: string;
+    isHint?: boolean;
+}
+export declare function ModifierKey({ onModifier, disabled, lastChar: _lastChar, // Kept for API compatibility
+isHint, }: ModifierKeyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/useFlickKeyboard.d.ts

@@ -0,0 +1,32 @@
+import { FlickDirection, HiraganaKey } from '../types';
+
+export interface UseFlickKeyboardProps {
+    onInput: (character: string) => void;
+    onReplace?: (oldChar: string, newChar: string) => void;
+    disabled?: boolean;
+    currentInput?: string;
+}
+export interface ToggleState {
+    keyName: string;
+    index: number;
+    timestamp: number;
+}
+export interface ActiveGuideState {
+    keyName: string;
+    hiraganaKey: HiraganaKey;
+    position: {
+        x: number;
+        y: number;
+    };
+    direction: FlickDirection;
+    isModifier?: boolean;
+    lastChar?: string;
+}
+export declare function useFlickKeyboard({ onInput, onReplace, disabled, currentInput, }: UseFlickKeyboardProps): {
+    lastChar: string;
+    activeGuide: ActiveGuideState | null;
+    setActiveGuide: import('react').Dispatch<import('react').SetStateAction<ActiveGuideState | null>>;
+    toggleState: ToggleState | null;
+    handleCharInput: (character: string, keyName: string, isToggleable: boolean) => void;
+    handleModifier: () => void;
+};

package/dist/hooks/useFlickDetection.d.ts

@@ -0,0 +1,20 @@
+import { FlickDirection } from '../types';
+
+export declare function useFlickDetection(): {
+    isPressed: boolean;
+    currentDirection: FlickDirection;
+    touchHandlers: {
+        onTouchStart: (event: React.TouchEvent) => void;
+        onTouchMove: (event: React.TouchEvent) => void;
+        onTouchEnd: (onFlick?: (direction: FlickDirection) => void) => (event: React.TouchEvent) => void;
+    };
+    mouseHandlers: {
+        onMouseDown: (event: React.MouseEvent) => void;
+        onMouseMove: (event: React.MouseEvent) => void;
+        onMouseUp: (onFlick?: (direction: FlickDirection) => void) => (event: React.MouseEvent) => void;
+    };
+};
+export declare function getDirectionOffset(direction: FlickDirection, distance?: number): {
+    x: number;
+    y: number;
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+
+export { useFlickKeyboard } from './core/useFlickKeyboard';
+export type { UseFlickKeyboardProps, ToggleState, ActiveGuideState } from './core/useFlickKeyboard';
+export { FlickKeyboard } from './components/FlickKeyboard';
+export { KeyButton } from './components/KeyButton';
+export { ModifierKey } from './components/ModifierKey';
+export { GlobalFlickGuide } from './components/GlobalFlickGuide';
+export { useFlickDetection } from './hooks/useFlickDetection';
+export * from './types';
+export * from './utils/hiragana-data';