Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* KidNumberInput - Kid-friendly number input with on-screen keypad and auto-validation
*
* This component provides a consistent touch-friendly number input experience
* for children across different parts of the app.
*
* ## Components
*
* - `KidNumberInput` - The main UI component with display and keypad
* - `useKidNumberInput` - Hook for managing input state with auto-validation
*
* ## Usage Patterns
*
* ### Basic with hook (recommended for auto-validation)
*
* ```tsx
* function MyComponent() {
* const [feedback, setFeedback] = useState<FeedbackState>('none')
*
* const { state, actions } = useKidNumberInput({
* correctAnswer: 7,
* onCorrect: (answer, time) => {
* setFeedback('correct')
* // Advance to next question
* },
* onIncorrect: (answer, correct, time) => {
* setFeedback('incorrect')
* setTimeout(() => setFeedback('none'), 300)
* },
* })
*
* return (
* <KidNumberInput
* value={state.value}
* onDigit={actions.addDigit}
* onBackspace={actions.backspace}
* feedback={feedback}
* />
* )
* }
* ```
*
* ### Controlled without hook (manual validation)
*
* ```tsx
* function MyComponent() {
* const [value, setValue] = useState('')
*
* return (
* <KidNumberInput
* value={value}
* onDigit={(d) => setValue(prev => prev + d)}
* onBackspace={() => setValue(prev => prev.slice(0, -1))}
* showKeypad={true}
* keypadMode="inline"
* />
* )
* }
* ```
*
* ## Keypad Modes
*
* - `fixed` (default): Keypad is fixed to screen edge (bottom in portrait, right in landscape)
* - `inline`: Keypad renders in place, good for forms with multiple inputs
*/
export { KidNumberInput, type KidNumberInputProps, type FeedbackState } from './KidNumberInput'
export {
useKidNumberInput,
type UseKidNumberInputOptions,
type KidNumberInputState,
type KidNumberInputActions,
} from './useKidNumberInput'
|