@magmamath/students-features 0.9.0-rc8 → 0.9.0

package/src/features/keyboard/components/BasicPlusLayout/keyboardGroups.ts

@@ -0,0 +1,102 @@
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
+import { KeyboardGroup } from '../../types/types'
+import { MATH_SYMBOLS } from '../../types/MathKeysGroups/symbols'
+import { MATH_GEOMETRY_SYMBOLS } from '../../types/MathKeysGroups/geometry'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_BASIC_SW_PLUS: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_SW_PLUS,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_MOBILE_SW: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_MOBILE_SW,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_US_PLUS: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_US_PLUS,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_MOBILE: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_MOBILE,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}

package/src/features/keyboard/components/BasicPlusPlusLayout/BasicPlusPlusLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { KeysList } from '../KeysList/KeysList'
+import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { Locale, useText } from '../../../../shared/translation'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { getKeyboardGroup } from '../../helpers'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
+
+export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
+  const t = useText()
+  const { width } = useWindowDimensions()
+  const locale = t('locale') as Locale
+  const isDesktop = width > MOBILE_LAYOUT_WIDTH && !IS_MOBILE
+  const keysGroup = getKeyboardGroup(
+    locale,
+    isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
+  )
+
+  return (
+    <View style={styles.container}>
+      <KeysList keys={keysGroup.keys} numOfRows={3} {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 16,
+    paddingRight: 16,
+  },
+})

package/src/features/keyboard/components/BasicPlusPlusLayout/keyboardGroups.ts

@@ -0,0 +1,122 @@
+import { KeyboardGroup } from '../../types/types'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { MATH_SYMBOLS } from '../../types/MathKeysGroups/symbols'
+import { MATH_GEOMETRY_SYMBOLS } from '../../types/MathKeysGroups/geometry'
+import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_PLUS,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.SLASH,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_PLUS_MOBILE,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_SW: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_PLUS_SW,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.PLUS_MINUS,
+    MATH_SYMBOLS.PI,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.SLASH,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.PERCENT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_BASIC_OPERATORS.PERMILLE,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_BASIC_OPERATORS.LESS_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN_OR_EQUAL,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+  ],
+}
+
+export const MATH_ENTRY_BASIC_PLUS_PLUS_MOBILE_SW: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.BASIC_PLUS_PLUS_MOBILE_SW,
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,46 +1,51 @@
-import React, { useEffect, useRef } from 'react'
-import {
-  Animated,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-  Easing,
-  useWindowDimensions,
-} from 'react-native'
-import { COLORS, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { Numpad } from './Numpad/Numpad'
+import React, { useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
+import { COLORS, IS_MOBILE, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
 import { getLayoutByCharType } from '../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { Numpad } from './Numpad/Numpad'
+import { MOBILE_LAYOUT_WIDTH } from '../constants/constants'
+import {
+  getLayoutConfigStyles,
+  KEYBOARD_SLIDE_DISTANCE,
+  slideInAnimationSettings,
+  slideOutAnimationSettings,
+} from './constants'
 
 type KeyboardProps = {
-  onKeyPress: ({ katexValue, mathliveValue, isSpecialSymbol }: KeyboardKeyValue) => void
+  onKeyPress: (key: KeyboardKeyValue) => void
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
-  visible?: boolean
-  isSpecialButtonsDisabled?: boolean
+  isVisible?: boolean
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]
 }
 
-export const Keyboard = ({ style, characterType, visible = true, ...props }: KeyboardProps) => {
-  const slideAnim = useRef(new Animated.Value(600)).current
+export const Keyboard = ({ style, characterType, isVisible = true, ...props }: KeyboardProps) => {
+  const slideAnim = useRef(new Animated.Value(isVisible ? 0 : KEYBOARD_SLIDE_DISTANCE)).current
   const { width } = useWindowDimensions()
+  const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
+
+  const Layout = useMemo(() => getLayoutByCharType(characterType), [characterType])
+  const mobileStyles = useMemo(
+    () => getLayoutConfigStyles(characterType, isMobile),
+    [characterType, isMobile],
+  )
 
   useEffect(() => {
-    Animated.timing(slideAnim, {
-      toValue: visible ? 0 : 600,
-      duration: 500,
-      easing: Easing.out(Easing.ease),
+    const animationConfig = isVisible ? slideOutAnimationSettings : slideInAnimationSettings
+    const anim = Animated.spring(slideAnim, {
+      ...animationConfig,
+      mass: 1,
+      velocity: 0,
       useNativeDriver: true,
-    }).start()
-  }, [visible])
+    })
 
-  if (width < 820) {
-    return null
-  }
+    anim.start()
 
-  const Layout = getLayoutByCharType(characterType)
+    return () => anim.stop()
+  }, [isVisible])
 
   return (
     <Animated.View
@@ -53,7 +58,7 @@ export const Keyboard = ({ style, characterType, visible = true, ...props }: Key
       ]}
     >
       <Layout {...props} />
-      {width >= 1275 && <Numpad {...props} />}
+      <Numpad {...props} style={mobileStyles} />
     </Animated.View>
   )
 }
@@ -72,7 +77,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     width: 'auto',
     overflow: 'hidden',
-    minHeight: 155,
+    height: 155,
     ...SHADOWS[2],
   },
 })

package/src/features/keyboard/components/KeysList/KeysList.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import {
   ButtonStyle,
@@ -7,7 +7,8 @@ import {
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
 import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
-import { DISABLED_KEYS } from '../../constants/keysValues'
+import { mapKeyToOption } from './helpers'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 type KeysListProps = {
   keys: KeyboardKey[]
@@ -25,50 +26,55 @@ export const KeysList = ({
   numOfRows,
   style,
   onKeyPress,
-  isSpecialButtonsDisabled,
   isDisabled,
   disabledKeys,
 }: KeysListProps) => {
+  const options = useMemo(
+    () =>
+      keys.map((key) =>
+        mapKeyToOption({
+          key,
+          onKeyPress,
+          disabledKeys,
+          optionStyle: style?.option,
+        }),
+      ),
+    [keys, onKeyPress, disabledKeys, style?.option],
+  )
+
   return (
     <SelectGroup
       style={{
         container: [styles.container, style?.container],
-        row: { gap: 4 },
-        option: {
-          container: {
-            flexGrow: 0,
-            flexShrink: 0,
-            flexBasis: 'auto',
-          },
-          ...style?.option,
-        },
+        row: styles.row,
       }}
       numOfRows={numOfRows}
       color={SelectOptionColor.GREY}
       disabled={isDisabled}
-      options={keys.map((key, index) => ({
-        key: key.katexValue,
-        title: key.icon ? key.icon : key.label,
-        disabled:
-          (isSpecialButtonsDisabled && DISABLED_KEYS.includes(key)) || disabledKeys?.includes(key),
-      }))}
+      options={options}
       size={SelectOptionSize.SMALL}
-      onOptionChange={(option) => {
-        const key = keys.find((k) => k.katexValue === option.key)
-        if (!key) return
-        onKeyPress?.({
-          katexValue: key.katexValue,
-          mathliveValue: key.mathliveValue,
-          isSpecialSymbol: key.isSpecialSymbol,
-        })
-      }}
     />
   )
 }
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
   container: {
     width: 'auto',
     gap: 9,
   },
+  row: {
+    gap: 3,
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: IS_MOBILE ? 45 : 'auto',
+  },
+  optionButton: {
+    width: 40,
+  },
+  optionText: {
+    fontSize: 16,
+    fontWeight: 700,
+  },
 })

package/src/features/keyboard/components/KeysList/helpers.ts

@@ -0,0 +1,50 @@
+import { GestureResponderEvent } from 'react-native'
+import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
+import { ButtonStyle } from '@magmamath/react-native-ui'
+import { styles } from './KeysList'
+import { getIsIpadOrIphoneDevice } from '../../helpers'
+
+type MapKeyToOptionProps = {
+  key: KeyboardKey
+  onKeyPress?: (key: KeyboardKeyValue) => void
+  disabledKeys?: KeyboardKey[]
+  optionStyle?: ButtonStyle
+}
+
+export const IS_IOS_WEB = getIsIpadOrIphoneDevice()
+
+const mergeOptionStyles = (keyStyle?: ButtonStyle, override?: ButtonStyle) => ({
+  container: [styles.optionContainer, keyStyle?.container, override?.container],
+  button: [styles.optionButton, keyStyle?.button, override?.button],
+  text: [styles.optionText, keyStyle?.text, override?.text],
+})
+
+const isKeyDisabled = (key: KeyboardKey, disabledKeys?: KeyboardKey[]) =>
+  disabledKeys?.includes(key)
+
+export const mapKeyToOption = ({
+  key,
+  onKeyPress,
+  disabledKeys,
+  optionStyle,
+}: MapKeyToOptionProps) => {
+  const pressHandler = (e: GestureResponderEvent) => {
+    onKeyPress?.({
+      event: e,
+      katexValue: key.katexValue,
+      mathliveValue: key.mathliveValue,
+      spreadsheetValue: key.spreadsheetValue,
+      mathQuillValue: key.mathQuillValue,
+      isSpecialSymbol: key.isSpecialSymbol,
+    })
+  }
+
+  return {
+    key: key.katexValue,
+    title: key.icon ?? key.label,
+    delayPressIn: 0,
+    style: mergeOptionStyles(optionStyle, key.style),
+    ...(IS_IOS_WEB ? { onPress: pressHandler } : { onPressIn: pressHandler }),
+    disabled: isKeyDisabled(key, disabledKeys),
+  }
+}

package/src/features/keyboard/components/Numpad/Numpad.tsx

@@ -1,28 +1,26 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const Numpad = (props: KeyboardLayoutProps) => {
+type NumpadProps = {
+  style?: StyleProp<ViewStyle>
+} & KeyboardLayoutProps
+
+export const Numpad = ({ style, ...props }: NumpadProps) => {
   const t = useText()
   const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       <KeysList
         keys={keyboardGroup.keys}
         numOfRows={3}
         style={{
           container: styles.keysContainer,
-          option: {
-            text: styles.keyText,
-            button: styles.keyButton,
-            ...(IS_MOBILE && { container: { flexBasis: 45 } }),
-          },
         }}
         {...props}
       />
@@ -33,8 +31,9 @@ export const Numpad = (props: KeyboardLayoutProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
-    borderColor: COLORS.NEUTRAL_3,
+    borderColor: 'transparent',
     paddingLeft: SPACING[800],
+    marginLeft: 'auto',
   },
   keysContainer: {
     display: 'flex',
@@ -44,11 +43,4 @@ const styles = StyleSheet.create({
     flexBasis: 'auto',
     gap: 9,
   },
-  keyText: {
-    fontSize: 16,
-    fontWeight: 700,
-  },
-  keyButton: {
-    width: 42,
-  },
 })

package/src/features/keyboard/components/Numpad/keyboardGroups.ts

@@ -0,0 +1,40 @@
+import { MATH_SPECIAL_OPERATORS } from '../../types/MathKeysGroups/specialOperators'
+import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
+import { KeyboardGroup } from '../../types/types'
+import { MathEntryKeyboardGroupId } from '../../types/keyboardGroupIds'
+
+export const MATH_ENTRY_NUMBERS_SW_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.NUMBERS_SW,
+  keys: [
+    { label: '1', mathliveValue: '1', katexValue: '1' },
+    { label: '2', mathliveValue: '2', katexValue: '2' },
+    { label: '3', mathliveValue: '3', katexValue: '3' },
+    MATH_SPECIAL_OPERATORS.BACKSPACE,
+    { label: '4', mathliveValue: '4', katexValue: '4' },
+    { label: '5', mathliveValue: '5', katexValue: '5' },
+    { label: '6', mathliveValue: '6', katexValue: '6' },
+    MATH_BASIC_OPERATORS.COMMA,
+    { label: '7', mathliveValue: '7', katexValue: '7' },
+    { label: '8', mathliveValue: '8', katexValue: '8' },
+    { label: '9', mathliveValue: '9', katexValue: '9' },
+    { label: '0', mathliveValue: '0', katexValue: '0' },
+  ],
+}
+
+export const MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP: KeyboardGroup = {
+  id: MathEntryKeyboardGroupId.NUMBERS_US,
+  keys: [
+    { label: '1', mathliveValue: '1', katexValue: '1' },
+    { label: '2', mathliveValue: '2', katexValue: '2' },
+    { label: '3', mathliveValue: '3', katexValue: '3' },
+    MATH_SPECIAL_OPERATORS.BACKSPACE,
+    { label: '4', mathliveValue: '4', katexValue: '4' },
+    { label: '5', mathliveValue: '5', katexValue: '5' },
+    { label: '6', mathliveValue: '6', katexValue: '6' },
+    MATH_BASIC_OPERATORS.DOT,
+    { label: '7', mathliveValue: '7', katexValue: '7' },
+    { label: '8', mathliveValue: '8', katexValue: '8' },
+    { label: '9', mathliveValue: '9', katexValue: '9' },
+    { label: '0', mathliveValue: '0', katexValue: '0' },
+  ],
+}