{"_rev":"34-dd928efa1cc6cd942d5f7a6138bcdb64","time":{"created":"2025-06-27T03:15:57.618Z","modified":"2025-06-27T03:15:58.141Z","0.0.4":"2025-05-19T09:01:13.762Z","0.0.5":"2025-05-19T09:18:32.743Z","0.0.6":"2025-05-21T10:42:35.595Z","0.0.7":"2025-05-22T03:01:00.472Z","0.0.8":"2025-05-22T04:36:44.105Z","0.0.9":"2025-05-22T04:40:56.447Z","0.0.10":"2025-05-22T05:21:05.342Z","0.0.11":"2025-05-22T07:36:08.846Z","0.0.12":"2025-05-22T08:07:43.707Z","0.0.13":"2025-05-23T03:28:05.954Z","0.0.14":"2025-05-23T09:53:54.316Z","0.0.15":"2025-05-26T01:42:50.210Z","0.0.16":"2025-05-29T05:05:50.647Z","0.0.17":"2025-05-30T04:54:02.420Z","0.0.18":"2025-05-30T15:36:29.375Z","0.0.19":"2025-05-31T03:01:23.157Z","0.0.20":"2025-05-31T03:46:18.637Z","0.0.21":"2025-05-31T05:06:13.927Z","0.0.22":"2025-05-31T07:02:39.558Z","0.0.23":"2025-05-31T07:05:54.586Z","0.0.24":"2025-05-31T08:22:16.818Z","0.0.26":"2025-05-31T08:33:48.440Z","0.0.27":"2025-05-31T09:00:16.846Z","0.0.28":"2025-05-31T09:21:42.224Z","0.0.29":"2025-06-02T01:43:21.097Z","0.0.30":"2025-06-02T02:08:00.870Z","0.0.31":"2025-06-02T02:53:50.631Z","0.0.32":"2025-06-02T03:02:45.244Z","0.0.33":"2025-06-02T06:49:08.446Z","0.0.34":"2025-06-02T06:57:45.505Z","0.0.35":"2025-06-02T09:16:03.823Z","0.0.36":"2025-06-02T09:18:57.042Z","0.0.37":"2025-06-27T03:15:57.834Z"},"_id":"tek-input-keyboard","name":"tek-input-keyboard","dist-tags":{"latest":"0.0.37"},"versions":{"0.0.37":{"name":"tek-input-keyboard","version":"0.0.37","description":"A custom input and keyboard","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","format":"prettier --write . && eslint --fix --ignore-pattern .next --ignore-pattern node_modules --ignore-pattern dist","build":"tsc","copy-css":"mkdir -p dist/styles && cp src/components/InputKeyboard/style.css dist/styles/","version:patch":"npm version patch","version:minor":"npm version minor","version:major":"npm version major","publish:patch":"npm run version:patch && npm publish","publish:minor":"npm run version:minor && npm publish","publish:major":"npm run version:major && npm publish","release":"npm run clean && npm run format && npm run build && npm run copy-css && git add . && git commit -m \"new version\" && npm version patch"},"keywords":["react","input","keyboard"],"author":"","license":"ISC","type":"commonjs","dependencies":{"clsx":"^2.1.1","react":">=16.8.0","react-dom":">=16.8.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@eslint/eslintrc":"^3","@types/node":"^22.14.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","eslint":"^9","eslint-config-next":"15.1.7","prettier":"^3.5.3","typescript":"^5.8.3"},"_id":"tek-input-keyboard@0.0.37","_nodeVersion":"24.1.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-xDsD5UCCL65EPGSfj/pklVm6q+e407wQGNlh1PzTc8AsAE4aWFLH0iJ+8Um2nxvwl0mCl+gsU8yulb8KqRPShw==","shasum":"f8c4f05dfcff315356f8fad00616ec8756343f5a","tarball":"https://registry.npmjs.org/tek-input-keyboard/-/tek-input-keyboard-0.0.37.tgz","fileCount":35,"unpackedSize":58280,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD2okyR8PMCvQYnwXSuBDDjtF1CJS7ZDKlQ9sf+0uq92QIgeKS7O8WcxJ605e1PVAsCr/F+eWy2vMHPS3TVSLhJEz8="}]},"_npmUser":{"name":"tekpack","email":"resource@teknixcorp.com","actor":{"name":"tekpack","email":"resource@teknixcorp.com","type":"user"}},"directories":{},"maintainers":[{"name":"tekpack","email":"resource@teknixcorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tek-input-keyboard_0.0.37_1750994157619_0.2845603880471481"},"_hasShrinkwrap":false}},"maintainers":[{"name":"tekpack","email":"resource@teknixcorp.com"}],"description":"A custom input and keyboard","keywords":["react","input","keyboard"],"license":"ISC","readme":"# Package Overview\n\nThis package provides three main components for creating a virtual keyboard input system:\n\n1. [Input Component](#input-component) - A customizable text input field\n2. [Keyboard Component](#keyboard-component) - A virtual keyboard with different types and display modes\n3. [InputKeyboard Component](#inputkeyboard-component) - An integrated solution combining Input and Keyboard components\n\nEach component can be used independently or together to create a complete virtual keyboard input system. Click on the component names above to jump to their detailed documentation.\n\n## Installation\n\n```bash\nnpm install tek-keyboard\n```\n\n## Usage\n\n### Import CSS\n\nYou can import the CSS:\n\n```typescript\nimport \"tek-keyboard/dist/components/InputKeyboard/input-keyboard.css\";\n```\n\n### Basic Usage\n\n```tsx\nimport { InputKeyboard } from \"tek-keyboard\";\nimport \"tek-keyboard/dist/components/InputKeyboard/input-keyboard.css\";\n\nfunction App() {\n  return <InputKeyboard placeholder=\"Enter text\" theme=\"light\" />;\n}\n```\n\n## Input Component\n\n### Overview\n\nThe Input component is a customizable text input field that supports various themes, styling options, and additional features like left/right elements and cursor animation.\n\n### Exposed Methods\n\nThe Input component exposes the following methods through `forwardRef`:\n\n```typescript\ninterface InputRef {\n  focus: () => void; // Focus the input field\n  blur: () => void; // Remove focus from the input field\n}\n```\n\nUsage example:\n\n```tsx\nconst inputRef = useRef<InputRef>(null);\n\n// Focus the input\ninputRef.current?.focus();\n\n// Blur the input\ninputRef.current?.blur();\n\n<Input ref={inputRef} />;\n```\n\n## Props\n\n### Basic Props\n\n| Prop             | Type          | Description                                                        | Default       |\n| ---------------- | ------------- | ------------------------------------------------------------------ | ------------- |\n| `value`          | `string`      | The current value of the input                                     | -             |\n| `placeholder`    | `string`      | Placeholder text when input is empty                               | -             |\n| `theme`          | `THEME`       | Theme of the input (LIGHT/DARK)                                    | `THEME.LIGHT` |\n| `autoFocus`      | `boolean`     | Whether to focus the input on mount                                | `false`       |\n| `alwaysFocus`    | `boolean`     | Whether to keep the input always focused                           | `false`       |\n| `displayType`    | `DisplayType` | How to display the input (Text/Number/Replace)                     | `Text`        |\n| `replaceElement` | `ReactNode`   | Element to use for replacement display when displayType is Replace | `\"●\"`         |\n\n### Event Handlers\n\n| Prop      | Type         | Description                     |\n| --------- | ------------ | ------------------------------- |\n| `onFocus` | `() => void` | Callback when input is focused  |\n| `onBlur`  | `() => void` | Callback when input loses focus |\n\n### Custom Elements\n\n| Prop           | Type        | Description                                   |\n| -------------- | ----------- | --------------------------------------------- |\n| `leftElement`  | `ReactNode` | Element to display on the left side of input  |\n| `rightElement` | `ReactNode` | Element to display on the right side of input |\n\n### Styling Props\n\n| Prop         | Type              | Description                          |\n| ------------ | ----------------- | ------------------------------------ |\n| `styles`     | `InputStyleProps` | Custom styles for different elements |\n| `classNames` | `InputClassNames` | Custom class names for elements      |\n\n### InputStyleProps Interface\n\n```typescript\ninterface InputStyleProps {\n  container?: CSSProperties; // Styles for the main container\n  input?: CSSProperties; // Styles for the input area\n  text?: CSSProperties; // Styles for the text content\n  placeholder?: CSSProperties; // Styles for the placeholder\n}\n```\n\n### InputClassNames Interface\n\n```typescript\ninterface InputClassNames {\n  container?: string; // Class name for the main container\n  input?: string; // Class name for the input area\n  text?: string; // Class name for the text content\n  placeholder?: string; // Class name for the placeholder\n}\n```\n\n## Keyboard Component\n\n### Overview\n\nThe Keyboard component is a customizable virtual keyboard that can be integrated with the Input component. It supports different keyboard types, display modes, and themes.\n\n### Exposed Methods\n\nThe Keyboard component exposes the following methods through `forwardRef`:\n\n```typescript\ninterface KeyboardRef {\n  open: () => void; // Open the keyboard\n  close: () => void; // Close the keyboard\n  getKeyboardHeight: () => number | undefined; // Get the keyboard height\n}\n```\n\nUsage example:\n\n```tsx\nconst keyboardRef = useRef<KeyboardRef>(null);\n\n// Open the keyboard\nkeyboardRef.current?.open();\n\n// Close the keyboard\nkeyboardRef.current?.close();\n\n// Get keyboard height\nconst height = keyboardRef.current?.getKeyboardHeight();\n\n<Keyboard ref={keyboardRef} />;\n```\n\n## Props\n\n### Basic Props\n\n| Prop                     | Type           | Description                                       | Default                |\n| ------------------------ | -------------- | ------------------------------------------------- | ---------------------- |\n| `keyboardType`           | `KeyboardType` | Type of keyboard (Text/Number/Decimal)            | `KeyboardType.Decimal` |\n| `theme`                  | `THEME`        | Theme of the keyboard (LIGHT/DARK)                | `THEME.LIGHT`          |\n| `alwaysOpen`             | `boolean`      | Whether keyboard should always be visible         | `false`                |\n| `openInit`               | `boolean`      | Whether keyboard should be open initially         | `false`                |\n| `outFocusOnClickToolbar` | `boolean`      | Whether to close keyboard when clicking toolbar   | `true`                 |\n| `toolbarFullHeight`      | `boolean`      | Whether toolbar should take full remaining height | `false`                |\n| `value`                  | `string`       | Current value of the keyboard                     | -                      |\n\n### Event Handlers\n\n| Prop       | Type                        | Description                          |\n| ---------- | --------------------------- | ------------------------------------ |\n| `onChange` | `(value: string) => void`   | Callback when keyboard value changes |\n| `onOpen`   | `(height?: number) => void` | Callback when keyboard opens         |\n| `onClose`  | `() => void`                | Callback when keyboard closes        |\n\n### Custom Elements\n\n| Prop      | Type        | Description                              |\n| --------- | ----------- | ---------------------------------------- |\n| `toolbar` | `ReactNode` | Custom toolbar to display above keyboard |\n| `trigger` | `ReactNode` | Element that triggers keyboard opening   |\n\n### Styling Props\n\n| Prop         | Type                 | Description                          |\n| ------------ | -------------------- | ------------------------------------ |\n| `styles`     | `KeyboardStyleProps` | Custom styles for different elements |\n| `classNames` | `KeyboardClassNames` | Custom class names for elements      |\n\n### KeyboardStyleProps Interface\n\n```typescript\ninterface KeyboardStyleProps {\n  container?: CSSProperties; // Styles for the main container\n  toolbar?: CSSProperties; // Styles for the toolbar\n  keyboardContainer?: CSSProperties; // Styles for the keyboard container\n  key?: CSSProperties; // Styles for individual keys\n  keyHover?: CSSProperties; // Styles for key hover state\n  keyActive?: CSSProperties; // Styles for key active state\n  trigger?: CSSProperties; // Styles for the trigger element\n}\n```\n\n### KeyboardClassNames Interface\n\n```typescript\ninterface KeyboardClassNames {\n  container?: string; // Class name for the main container\n  toolbar?: string; // Class name for the toolbar\n  keyboardContainer?: string; // Class name for the keyboard container\n  trigger?: string; // Class name for the trigger element\n  theKey?: TheKeyClassNames; // Class names for individual keys\n}\n```\n\n## InputKeyboard Component\n\n### Overview\n\nThe InputKeyboard component is a combination of the Input and Keyboard components, providing an integrated solution for text input with a virtual keyboard. It handles the interaction between the input field and keyboard, managing focus states and value synchronization.\n\n### Exposed Methods\n\nThe InputKeyboard component exposes the following methods through `forwardRef`:\n\n```typescript\ninterface InputKeyboardRef {\n  focus: () => void; // Focus the input and open the keyboard\n  blur: () => void; // Remove focus from the input and close the keyboard\n}\n```\n\nUsage example:\n\n```tsx\nconst inputKeyboardRef = useRef<InputKeyboardRef>(null);\n\n// Focus the input and open keyboard\ninputKeyboardRef.current?.focus();\n\n// Blur the input and close keyboard\ninputKeyboardRef.current?.blur();\n\n<InputKeyboard ref={inputKeyboardRef} />;\n```\n\n## Props\n\n### Basic Props\n\n| Prop         | Type      | Description                                    | Default       |\n| ------------ | --------- | ---------------------------------------------- | ------------- |\n| `value`      | `string`  | The current value of the input                 | -             |\n| `theme`      | `THEME`   | Theme for both input and keyboard (LIGHT/DARK) | `THEME.LIGHT` |\n| `alwaysOpen` | `boolean` | Keep keyboard always visible                   | `false`       |\n| `openInit`   | `boolean` | Open keyboard on initial render                | `false`       |\n\n### Component Props\n\n| Prop            | Type                                            | Description                  |\n| --------------- | ----------------------------------------------- | ---------------------------- |\n| `inputProps`    | `Omit<InputProps, \"displayValue\" \\| \"value\">`   | Props for Input component    |\n| `keyboardProps` | `Omit<KeyboardProps, \"openInit\" \\| \"onChange\">` | Props for Keyboard component |\n\n### Event Handlers\n\n| Prop       | Type                      | Description                 |\n| ---------- | ------------------------- | --------------------------- |\n| `onChange` | `(value: string) => void` | Callback when value changes |\n\n## Features\n\n### Input Component\n\n- Responsive design\n- Customizable themes (Light/Dark)\n- Support for left and right elements\n- Animated cursor\n- Customizable styling\n- Placeholder support\n- Focus/blur handling\n- Auto-focus and always-focus options\n- Display type customization (Text/Number/Replace)\n\n### Keyboard Component\n\n- Multiple keyboard types (Text/Number/Decimal)\n- Customizable themes (Light/Dark)\n- Custom toolbar support\n- Responsive design\n- Animated key presses\n- Value validation\n- Height management\n- Click outside handling\n- Full-height toolbar option\n\n### InputKeyboard Component\n\n- Integrated Input and Keyboard components\n- Automatic focus management\n- Value synchronization between input and keyboard\n- Customizable themes for both components\n- Support for always visible keyboard\n- Custom toolbar support\n- Responsive design\n- Event handling for value changes\n- Support for different keyboard types and display modes\n\n## Best Practices\n\n1. Use `alwaysOpen` when you want the keyboard to be permanently visible\n2. Use `openInit` when you want the keyboard to be open on initial render\n3. Customize input and keyboard separately using their respective prop objects\n4. Use theme props at the InputKeyboard level for consistent theming\n5. Handle value changes through the `onChange` callback\n6. Use `displayType` and `replaceElement` for secure input display\n7. Utilize `autoFocus` and `alwaysFocus` for better user experience\n8. Customize styles and class names for better integration with your design system\n","readmeFilename":"README.md"}