@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/keyboard/src/AndroidKeyboard/Keyboard.tsx

@@ -0,0 +1,228 @@
+/* eslint-disable no-magic-numbers */
+import { DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Matrix, CircularDirection } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { KeyboardBase } from '../KeyboardBase';
+import { makeSpecialFocusStrings, makeNormalFocusStrings } from './makeLayout';
+import './Keyboard.styles';
+import {
+    QwertyKeyboardBase,
+    Props,
+    KEYBOARD_ROW,
+    SPECIAL,
+} from '../QwertyKeyboardBase/QwertyKeyboardBase';
+
+const NORMAL = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '@'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '_', '&'],
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '-', '?'],
+];
+
+export class Keyboard extends QwertyKeyboardBase {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        circular: CircularDirection.NONE,
+        layouts: {
+            normal: NORMAL,
+            special: SPECIAL,
+        },
+        makeFocusStrings: {
+            normal: makeNormalFocusStrings,
+            special: makeSpecialFocusStrings,
+        },
+        initialFocus: { x: 5, y: 2 },
+        texts: {
+            cancel: 'Cancel',
+            clear: 'Clear',
+            done: 'Next',
+            shift: 'UP',
+            shiftActive: 'UP',
+            toNormalLayout: 'ab',
+            toSpecialLayout: '=/#',
+        },
+    };
+
+    declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
+
+    createFocusMatrices() {
+        const { layouts, makeFocusStrings } = this.props;
+        super.createFocusMatrices({
+            normal: makeFocusStrings.normal(layouts.normal),
+            special: makeFocusStrings.special(layouts.special),
+        });
+    }
+
+    renderQWERTY() {
+        const { texts, circular, shouldHideOnBackdropClick } = this.props;
+        if (this.renderedLayout === 'normal') {
+            return;
+        }
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onDone()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    circular={circular}
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.normal}
+                >
+                    <div className={`${KEYBOARD_ROW} row-numbers`}>
+                        {map(NORMAL[0], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.backspace}
+                            className="key key-backspace key-icon"
+                            onPress={() => this.onBackspace()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-qwerty`}>
+                        {map(NORMAL[1], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-asdf`}>
+                        {map(NORMAL[2], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-zxcv`}>
+                        {map(NORMAL[3], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-spacebar`}>
+                        <Interactable
+                            ref={this.keyRefs.special}
+                            className="key key-special"
+                            onPress={this.onSpecial}
+                        >
+                            {texts.toSpecialLayout}
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.shift}
+                            className="key key-shift"
+                            onPress={() => this.onShift()}
+                        >
+                            {texts.shift}
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.space}
+                            className="key key-space key-icon"
+                            onPress={() => this.onKey(' ')}
+                        />
+                        <Interactable
+                            ref={this.keyRefs.left}
+                            className="key key-left key-icon"
+                            onPress={() => this.onLeft()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.right}
+                            className="key key-right key-icon"
+                            onPress={() => this.onRight()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                    </div>
+                    <div className="key done-container">
+                        <Interactable
+                            ref={this.keyRefs.done}
+                            className="key key-done"
+                            onPress={() => this.onDone()}
+                        >
+                            {texts.done}
+                        </Interactable>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+        this.renderedLayout = 'normal';
+    }
+
+    renderSpecial() {
+        const { texts, circular, shouldHideOnBackdropClick } = this.props;
+        if (this.renderedLayout === 'special') {
+            return;
+        }
+        this.clearMount(
+            <>
+                <Backdrop
+                    onClick={() => this.onDone()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    circular={circular}
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.special}
+                >
+                    <div className={`${KEYBOARD_ROW} row-numbers`}>
+                        {map(SPECIAL[0], this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.backspace}
+                            className="key key-backspace key-icon"
+                            onPress={() => this.onBackspace()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-qwerty`}>
+                        {map(SPECIAL[1], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-asdf`}>
+                        {map(SPECIAL[2], this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-zxcv`}>
+                        {map(SPECIAL[3], this.generateKey)}
+                        <div className="key key-fill" />
+                        <div className="key key-fill " />
+                        <div className="key key-fill " />
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-spacebar`}>
+                        <Interactable
+                            ref={this.keyRefs.special}
+                            className="key key-special"
+                            onPress={this.onQWERTY}
+                        >
+                            {texts.toNormalLayout}
+                        </Interactable>
+                        <div className="key key-fill " />
+                        <Interactable
+                            ref={this.keyRefs.space}
+                            className="key key-space key-icon"
+                            onPress={() => this.onKey(' ')}
+                        />
+                        <Interactable
+                            ref={this.keyRefs.left}
+                            className="key key-left key-icon"
+                            onPress={() => this.onLeft()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.right}
+                            className="key key-right key-icon"
+                            onPress={() => this.onRight()}
+                        >
+                            <div className="key-mask-icon" />
+                        </Interactable>
+                    </div>
+                    <div className="key done-container">
+                        <Interactable
+                            ref={this.keyRefs.done}
+                            className="key key-done"
+                            onPress={() => this.onDone()}
+                        >
+                            {texts.done}
+                        </Interactable>
+                    </div>
+                </Matrix>
+            </>,
+            this.keyboardWrapper,
+        );
+        this.renderedLayout = 'special';
+    }
+}

package/packages/keyboard/src/AndroidKeyboard/_animated.scss

@@ -0,0 +1,7 @@
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+
+$transition-time: 300ms;
+
+.keyboard .key {
+    @include transition((background-color, color), $transition-time);
+}

package/packages/keyboard/src/AndroidKeyboard/_sizes.1080.scss

@@ -0,0 +1,15 @@
+$key-width: 64px;
+$key-height: 64px;
+$keyboard-padding-bottom: 60px;
+$font-size: 36px;
+$spacebar-button-width: 436px;
+$spacebar-button-height: 24px;
+$spacebar-button-margin-left: 41px;
+$spacebar-button-margin-right: 41px;
+$done-container-top: 142px;
+$done-container-right: 300px;
+$key-done-padding: 0 30px;
+$key-line-height: $key-height;
+$key-margin: 5px;
+$icon-width: 54px;
+$caps-indicator-left: -8px;

package/packages/keyboard/src/AndroidKeyboard/_sizes.scss

@@ -0,0 +1,15 @@
+$key-width: 43px;
+$key-height: 43px;
+$keyboard-padding-bottom: 40px;
+$font-size: 24px;
+$spacebar-button-width: 290px;
+$spacebar-button-height: 16px;
+$spacebar-button-margin-left: 26px;
+$spacebar-button-margin-right: 27px;
+$done-container-top: 95px;
+$done-container-right: 200px;
+$key-done-padding: 0 20px;
+$key-line-height: $key-height;
+$key-margin: 3px;
+$icon-width: 36px;
+$caps-indicator-left: -5px;

package/packages/keyboard/src/AndroidKeyboard/icons/arrow_left.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/left/arrow-medium</title>
+    <g id="Icons/navigation/left/arrow-medium" stroke="none" stroke-width="1">
+        <path d="M20.74975,20.24975 C20.55775,20.24975 20.36575,20.17675 20.21975,20.02975 L12.71975,12.52975 C12.42675,12.23675 12.42675,11.76275 12.71975,11.46975 L20.21975,3.96975 C20.51275,3.67675 20.98675,3.67675 21.27975,3.96975 C21.57275,4.26275 21.57275,4.73675 21.27975,5.02975 L14.31075,11.99975 L21.27975,18.96975 C21.57275,19.26275 21.57275,19.73675 21.27975,20.02975 C21.13375,20.17675 20.94175,20.24975 20.74975,20.24975" id="arrow"></path>
+    </g>
+</svg>

package/packages/keyboard/src/AndroidKeyboard/icons/arrow_right.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/right/arrow-medium</title>
+    <g id="Icons/navigation/right/arrow-medium" stroke="none" stroke-width="1">
+        <path d="M13.24975,20.24975 C13.05775,20.24975 12.86575,20.17675 12.71975,20.02975 C12.42675,19.73675 12.42675,19.26275 12.71975,18.96975 L19.68875,11.99975 L12.71975,5.02975 C12.42675,4.73675 12.42675,4.26275 12.71975,3.96975 C13.01275,3.67675 13.48675,3.67675 13.77975,3.96975 L21.27975,11.46975 C21.57275,11.76275 21.57275,12.23675 21.27975,12.52975 L13.77975,20.02975 C13.63375,20.17675 13.44175,20.24975 13.24975,20.24975" id="arrow"></path>
+    </g>
+</svg>

package/packages/keyboard/src/AndroidKeyboard/icons/key_backspace.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="24px" viewBox="0 0 34 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icons/navigation/delete</title>
+    <defs>
+        <path d="M25,4 C26.1907257,4 27,4.96273397 27,6 L27,10.2990096 C27,13.603883 27,17.6301738 27,18 C27,19.036353 26.1750996,20 25,20 L13.0020501,20 L13.0020501,20 C12.8244425,20 12.6514884,19.917434 12.5015432,19.7608014 L7.17269558,12.5051098 C7.06489011,12.3925933 7,12.2031772 7,12 C7,11.7972276 7.06489011,11.6078114 7.17269558,11.4948902 L12.5018017,4.23919862 C12.651747,4.08256602 12.8247011,4 13.0020501,4 L25,4 L25,4 Z M16.1528496,8.15284963 C15.9490501,8.35664913 15.9490501,8.68704082 16.1528496,8.89084033 L19.2620093,12 L16.1528496,15.1091597 C15.9490501,15.3129592 15.9490501,15.6426553 16.1528496,15.8464548 C16.2550972,15.9487023 16.3879494,15.9994783 16.5214972,15.9994783 C16.6557406,15.9994783 16.7885928,15.9487023 16.8908403,15.8464548 L19.9993044,12.7379907 L23.1091597,15.8464548 C23.2114072,15.9487023 23.3442594,15.9994783 23.4778072,15.9994783 C23.6120506,15.9994783 23.7449028,15.9487023 23.8471504,15.8464548 C24.0509499,15.6426553 24.0509499,15.3129592 23.8471504,15.1091597 L20.7372951,12 L23.8471504,8.89084033 C24.0509499,8.68704082 24.0509499,8.35664913 23.8471504,8.15284963 C23.6433509,7.94905012 23.3129592,7.94905012 23.1091597,8.15284963 L19.9993044,11.2620093 L16.8908403,8.15284963 C16.6870408,7.94905012 16.3566491,7.94905012 16.1528496,8.15284963 Z" id="path-1"></path>
+    </defs>
+    <g id="Icons/navigation/delete" stroke="none" stroke-width="1">
+        <mask id="mask-2">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="Combined-Shape" xlink:href="#path-1"></use>
+    </g>
+</svg>

package/packages/keyboard/src/AndroidKeyboard/index.ts

@@ -0,0 +1 @@
+export * from './Keyboard';

package/packages/keyboard/src/AndroidKeyboard/makeLayout.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable max-len */
+import { KeyMatrixCell } from '../types';
+
+export const makeNormalFocusStrings = (layout: KeyMatrixCell[][]) => [
+    [...layout[0], 'backspace', 'done'],
+    [...layout[1], 'done'],
+    [...layout[2], 'done'],
+    [...layout[3], 'done'],
+    ['special', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'left', 'right', 'done'],
+];
+
+export const makeSpecialFocusStrings = (layout: KeyMatrixCell[][]) => [
+    [...layout[0], 'backspace', 'done'],
+    [...layout[1], 'done'],
+    [...layout[2], 'done'],
+    [...layout[3], null, 'left', 'right', 'done'],
+    ['special', 'space', 'space', 'space', 'space', 'space', 'space', 'space', 'left', 'right', 'done'],
+];

package/packages/keyboard/src/Backdrop/Backdrop.scss

@@ -0,0 +1,15 @@
+.keyboard-backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: $backdrop-width;
+    height: $backdrop-height;
+}
+
+.keyboard-backdrop-disabled {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}

package/packages/keyboard/src/Backdrop/Backdrop.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Backdrop';

package/packages/keyboard/src/Backdrop/Backdrop.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Backdrop';

package/packages/keyboard/src/Backdrop/Backdrop.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import './Backdrop.styles';
+
+type Props = {
+    onClick: () => void,
+    enableOnClick: boolean,
+    backdropDisabledRef?: Reference<HTMLDivElement>,
+};
+
+export const Backdrop = forwardRef(
+    (props: Props, ref: Reference<HTMLDivElement>) => {
+        const { onClick, backdropDisabledRef, enableOnClick } = props;
+        const onClickHandler = () => {
+            if (!enableOnClick) return;
+            onClick();
+        };
+        return (
+            <>
+                <div
+                    ref={ref}
+                    className="keyboard-backdrop"
+                    onClick={onClickHandler}
+                />
+                <div
+                    ref={backdropDisabledRef}
+                    className="keyboard-backdrop-disabled"
+                />
+            </>
+        );
+    },
+);

package/packages/keyboard/src/Backdrop/_sizes.1080.scss

@@ -0,0 +1,2 @@
+$backdrop-width: 1920px;
+$backdrop-height: 1080px;

package/packages/keyboard/src/Backdrop/_sizes.scss

@@ -0,0 +1,2 @@
+$backdrop-width: 1280px;
+$backdrop-height: 720px;

package/packages/keyboard/src/DefaultKeyboard/Keyboard.scss

@@ -0,0 +1,73 @@
+$background-color: #ddd;
+$key-text-color: #000;
+$key-color: #fff;
+$focus-color: #f00;
+$focus-text-color: #fff;
+
+.keyboard {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    background-color: $background-color;
+
+    &.shift-active,
+    &.caps-active {
+        text-transform: uppercase;
+    }
+
+    &.caps-active .key.key-shift {
+        position: relative;
+
+        &::before {
+            content: '⬤';
+            position: absolute;
+            left: $caps-indicator-left;
+            font-size: 0.35em;
+        }
+    }
+
+    .keyboard-row {
+        position: relative;
+        text-align: center;
+    }
+
+    .key {
+        display: inline-block;
+        width: $key-width;
+        height: $key-height;
+        margin: $key-margin;
+        line-height: $key-line-height;
+        font-size: $key-font-size;
+        text-align: center;
+        background-color: $key-color;
+        color: $key-text-color;
+        outline: none;
+
+        &:focus {
+            background-color: $focus-color;
+            color: $focus-text-color;
+        }
+
+        &.key-space {
+            width: $space-key-width;
+        }
+
+        &.key-backspace,
+        &.key-done,
+        &.key-shift {
+            width: $shift-key-width;
+        }
+
+        &.key-backspace {
+            margin-left: $backspace-key-margin-left;
+            margin-right: $backspace-key-margin-right;
+        }
+
+        &.key-done {
+            margin-left: $done-key-margin-left;
+            margin-right: $done-key-margin-right;
+        }
+    }
+}

package/packages/keyboard/src/DefaultKeyboard/Keyboard.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Keyboard';

package/packages/keyboard/src/DefaultKeyboard/Keyboard.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Keyboard';

package/packages/keyboard/src/DefaultKeyboard/Keyboard.tsx

@@ -0,0 +1,154 @@
+import { clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Matrix } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import './Keyboard.styles';
+
+const NUMBERS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+const QWERTY = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'];
+const ASDF = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'];
+const ZXCV = ['z', 'x', 'c', 'v', 'b', 'n', 'm'];
+
+const KEYBOARD_ROW = 'keyboard-row';
+
+const NORMAL = [
+    ['1', ...NUMBERS, 'backspace'],
+    ['q', ...QWERTY],
+    ['a', ...ASDF, 'done', 'done'],
+    ['shift', ...ZXCV, 'dot', 'at', 'dash', 'dash'],
+    // eslint-disable-next-line max-len
+    ['left', 'left', 'space', 'space', 'space', 'space', 'space', 'space', 'right', 'right', 'right'],
+];
+
+type Layouts = 'normal';
+
+type Props = BaseProps<Layouts>;
+
+export class Keyboard extends KeyboardBase<Layouts, Props> {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        layouts: {
+            normal: NORMAL,
+        },
+        initialFocus: { x: 5, y: 2 },
+    };
+
+    declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
+
+    show() {
+        super.show();
+        this.renderNormal();
+    }
+
+    hide() {
+        super.hide();
+        clearNode(this.keyboardWrapper);
+    }
+
+    generateKey = (char: string) => (
+        <Interactable
+            ref={this.keyRefs[char]}
+            className={`key key-${char}`}
+            onPress={() => this.onKey(char)}
+        >
+            {char}
+        </Interactable>
+    );
+
+    renderNormal() {
+        const { shouldHideOnBackdropClick } = this.props;
+        this.clearMount((
+            <>
+                <Backdrop
+                    onClick={() => this.onDone()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <Matrix
+                    ref={this.matrix}
+                    domRef={this.keyboardWrapper}
+                    matrix={this.focusMatrices.normal}
+                >
+                    <div className={`${KEYBOARD_ROW} row-numbers`}>
+                        {map(NUMBERS, this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.backspace}
+                            className="key key-backspace"
+                            onPress={() => this.onBackspace()}
+                        >
+                            DEL
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-qwerty`}>
+                        {map(QWERTY, this.generateKey)}
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-asdf`}>
+                        {map(ASDF, this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.done}
+                            className="key key-done"
+                            onPress={() => this.onDone()}
+                        >
+                            DONE
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-zxcv`}>
+                        <Interactable
+                            ref={this.keyRefs.shift}
+                            className="key key-shift"
+                            onPress={() => this.onShift()}
+                        >
+                            SHIFT
+                        </Interactable>
+                        {map(ZXCV, this.generateKey)}
+                        <Interactable
+                            ref={this.keyRefs.dot}
+                            className="key key-dot"
+                            onPress={() => this.onKey('.')}
+                        >
+                            .
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.at}
+                            className="key key-at"
+                            onPress={() => this.onKey('@')}
+                        >
+                            @
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.dash}
+                            className="key key-dash"
+                            onPress={() => this.onKey('-')}
+                        >
+                            -
+                        </Interactable>
+                    </div>
+                    <div className={`${KEYBOARD_ROW} row-spacebar`}>
+                        <Interactable
+                            ref={this.keyRefs.left}
+                            className="key key-left"
+                            onPress={() => this.onLeft()}
+                        >
+                            ◀
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.space}
+                            className="key key-space"
+                            onPress={() => this.onKey(' ')}
+                        >
+                            &nbsp;
+                        </Interactable>
+                        <Interactable
+                            ref={this.keyRefs.right}
+                            className="key key-right"
+                            onPress={() => this.onRight()}
+                        >
+                            ▶
+                        </Interactable>
+                    </div>
+                </Matrix>
+            </>
+        ), this.keyboardWrapper);
+    }
+}

package/packages/keyboard/src/DefaultKeyboard/_sizes.1080.scss

@@ -0,0 +1,12 @@
+$key-width: 75px;
+$key-height: 75px;
+$key-line-height: 75px;
+$key-margin: 8px;
+$key-font-size: 35px;
+$space-key-width: 450px;
+$shift-key-width: 150px;
+$backspace-key-margin-left: 75px;
+$backspace-key-margin-right: -150px;
+$done-key-margin-left: 75px;
+$done-key-margin-right: -225px;
+$caps-indicator-left: 10px;

package/packages/keyboard/src/DefaultKeyboard/_sizes.scss

@@ -0,0 +1,12 @@
+$key-width: 50px;
+$key-height: 50px;
+$key-line-height: 50px;
+$key-margin: 5px;
+$key-font-size: 23px;
+$space-key-width: 300px;
+$shift-key-width: 100px;
+$backspace-key-margin-left: 50px;
+$backspace-key-margin-right: -100px;
+$done-key-margin-left: 50px;
+$done-key-margin-right: -150px;
+$caps-indicator-left: 7px;

package/packages/keyboard/src/DefaultKeyboard/index.ts

@@ -0,0 +1 @@
+export { Keyboard } from './Keyboard';