@react-native-ohos/react-native-keyboard-controller 1.16.8 → 1.17.0

package/lib/module/components/KeyboardToolbar/Arrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Animated","StyleSheet","View","useColorScheme","ArrowComponent","type","disabled","theme","colorScheme","color","backgroundColor","primary","left","styles","arrowLeftLine","right","arrowRightLine","createElement","style","arrowDownContainer","arrowUpContainer","arrow","arrowLine","width","height","borderRadius","marginHorizontal","justifyContent","alignItems","create","transform","rotate","flexDirection"],"sources":["Arrow.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Animated, StyleSheet, View } from \"react-native\";\n\nimport useColorScheme from \"../hooks/useColorScheme\";\n\nimport type { KeyboardToolbarTheme } from \"./types\";\nimport type { ViewStyle } from \"react-native\";\n\ntype ArrowProps = {\n  type: \"prev\" | \"next\";\n  disabled?: boolean;\n  theme: KeyboardToolbarTheme;\n};\n\nconst ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {\n  const colorScheme = useColorScheme();\n\n  const color = useMemo(\n    () => ({\n      backgroundColor: disabled\n        ? theme[colorScheme].disabled\n        : theme[colorScheme].primary,\n    }),\n    [disabled, theme, colorScheme],\n  );\n  const left = useMemo(() => [styles.arrowLeftLine, color], [color]);\n  const right = useMemo(() => [styles.arrowRightLine, color], [color]);\n\n  return (\n    <View\n      style={\n        type === \"next\" ? styles.arrowDownContainer : styles.arrowUpContainer\n      }\n    >\n      <View style={styles.arrow}>\n        <Animated.View style={left} />\n        <Animated.View style={right} />\n      </View>\n    </View>\n  );\n};\n\nconst arrowLine: ViewStyle = {\n  width: 13,\n  height: 2,\n  borderRadius: 1,\n};\nconst arrowUpContainer: ViewStyle = {\n  marginHorizontal: 5,\n  width: 30,\n  height: 30,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n};\nconst styles = StyleSheet.create({\n  arrowUpContainer: arrowUpContainer,\n  arrowDownContainer: {\n    ...arrowUpContainer,\n    transform: [{ rotate: \"180deg\" }],\n  },\n  arrow: {\n    width: 20,\n    height: 20,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  arrowLeftLine: {\n    ...arrowLine,\n    transform: [{ rotate: \"-45deg\" }],\n    left: -0.5,\n  },\n  arrowRightLine: {\n    ...arrowLine,\n    transform: [{ rotate: \"45deg\" }],\n    left: -5.5,\n  },\n});\n\nexport default ArrowComponent;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,cAAc,MAAM,yBAAyB;AAWpD,MAAMC,cAAoC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;AAAM,CAAC,KAAK;EAC1E,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EAEpC,MAAMM,KAAK,GAAGV,OAAO,CACnB,OAAO;IACLW,eAAe,EAAEJ,QAAQ,GACrBC,KAAK,CAACC,WAAW,CAAC,CAACF,QAAQ,GAC3BC,KAAK,CAACC,WAAW,CAAC,CAACG;EACzB,CAAC,CAAC,EACF,CAACL,QAAQ,EAAEC,KAAK,EAAEC,WAAW,CAC/B,CAAC;EACD,MAAMI,IAAI,GAAGb,OAAO,CAAC,MAAM,CAACc,MAAM,CAACC,aAAa,EAAEL,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAClE,MAAMM,KAAK,GAAGhB,OAAO,CAAC,MAAM,CAACc,MAAM,CAACG,cAAc,EAAEP,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEpE,oBACEX,KAAA,CAAAmB,aAAA,CAACf,IAAI;IACHgB,KAAK,EACHb,IAAI,KAAK,MAAM,GAAGQ,MAAM,CAACM,kBAAkB,GAAGN,MAAM,CAACO;EACtD,gBAEDtB,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAEL,MAAM,CAACQ;EAAM,gBACxBvB,KAAA,CAAAmB,aAAA,CAACjB,QAAQ,CAACE,IAAI;IAACgB,KAAK,EAAEN;EAAK,CAAE,CAAC,eAC9Bd,KAAA,CAAAmB,aAAA,CAACjB,QAAQ,CAACE,IAAI;IAACgB,KAAK,EAAEH;EAAM,CAAE,CAC1B,CACF,CAAC;AAEX,CAAC;AAED,MAAMO,SAAoB,GAAG;EAC3BC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE;AAChB,CAAC;AACD,MAAML,gBAA2B,GAAG;EAClCM,gBAAgB,EAAE,CAAC;EACnBH,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVG,cAAc,EAAE,QAAQ;EACxBC,UAAU,EAAE;AACd,CAAC;AACD,MAAMf,MAAM,GAAGZ,UAAU,CAAC4B,MAAM,CAAC;EAC/BT,gBAAgB,EAAEA,gBAAgB;EAClCD,kBAAkB,EAAE;IAClB,GAAGC,gBAAgB;IACnBU,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAS,CAAC;EAClC,CAAC;EACDV,KAAK,EAAE;IACLE,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVQ,aAAa,EAAE,KAAK;IACpBJ,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDb,aAAa,EAAE;IACb,GAAGQ,SAAS;IACZQ,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAS,CAAC,CAAC;IACjCnB,IAAI,EAAE,CAAC;EACT,CAAC;EACDI,cAAc,EAAE;IACd,GAAGM,SAAS;IACZQ,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAQ,CAAC,CAAC;IAChCnB,IAAI,EAAE,CAAC;EACT;AACF,CAAC,CAAC;AAEF,eAAeR,cAAc","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Animated","StyleSheet","View","useKeyboardState","ArrowComponent","type","disabled","theme","colorScheme","state","appearance","color","backgroundColor","primary","left","styles","arrowLeftLine","right","arrowRightLine","createElement","style","arrowDownContainer","arrowUpContainer","arrow","arrowLine","width","height","borderRadius","marginHorizontal","justifyContent","alignItems","create","transform","rotate","flexDirection"],"sources":["Arrow.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Animated, StyleSheet, View } from \"react-native\";\n\nimport { useKeyboardState } from \"../../hooks\";\n\nimport type { KeyboardToolbarTheme } from \"./types\";\nimport type { ViewStyle } from \"react-native\";\n\ntype ArrowProps = {\n  type: \"prev\" | \"next\";\n  disabled?: boolean;\n  theme: KeyboardToolbarTheme;\n};\n\nconst ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {\n  const colorScheme = useKeyboardState((state) => state.appearance);\n\n  const color = useMemo(\n    () => ({\n      backgroundColor: disabled\n        ? theme[colorScheme].disabled\n        : theme[colorScheme].primary,\n    }),\n    [disabled, theme, colorScheme],\n  );\n  const left = useMemo(() => [styles.arrowLeftLine, color], [color]);\n  const right = useMemo(() => [styles.arrowRightLine, color], [color]);\n\n  return (\n    <View\n      style={\n        type === \"next\" ? styles.arrowDownContainer : styles.arrowUpContainer\n      }\n    >\n      <View style={styles.arrow}>\n        <Animated.View style={left} />\n        <Animated.View style={right} />\n      </View>\n    </View>\n  );\n};\n\nconst arrowLine: ViewStyle = {\n  width: 13,\n  height: 2,\n  borderRadius: 1,\n};\nconst arrowUpContainer: ViewStyle = {\n  marginHorizontal: 5,\n  width: 30,\n  height: 30,\n  justifyContent: \"center\",\n  alignItems: \"center\",\n};\nconst styles = StyleSheet.create({\n  arrowUpContainer: arrowUpContainer,\n  arrowDownContainer: {\n    ...arrowUpContainer,\n    transform: [{ rotate: \"180deg\" }],\n  },\n  arrow: {\n    width: 20,\n    height: 20,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n  arrowLeftLine: {\n    ...arrowLine,\n    transform: [{ rotate: \"-45deg\" }],\n    left: -0.5,\n  },\n  arrowRightLine: {\n    ...arrowLine,\n    transform: [{ rotate: \"45deg\" }],\n    left: -5.5,\n  },\n});\n\nexport default ArrowComponent;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,SAASC,gBAAgB,QAAQ,aAAa;AAW9C,MAAMC,cAAoC,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;AAAM,CAAC,KAAK;EAC1E,MAAMC,WAAW,GAAGL,gBAAgB,CAAEM,KAAK,IAAKA,KAAK,CAACC,UAAU,CAAC;EAEjE,MAAMC,KAAK,GAAGZ,OAAO,CACnB,OAAO;IACLa,eAAe,EAAEN,QAAQ,GACrBC,KAAK,CAACC,WAAW,CAAC,CAACF,QAAQ,GAC3BC,KAAK,CAACC,WAAW,CAAC,CAACK;EACzB,CAAC,CAAC,EACF,CAACP,QAAQ,EAAEC,KAAK,EAAEC,WAAW,CAC/B,CAAC;EACD,MAAMM,IAAI,GAAGf,OAAO,CAAC,MAAM,CAACgB,MAAM,CAACC,aAAa,EAAEL,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAClE,MAAMM,KAAK,GAAGlB,OAAO,CAAC,MAAM,CAACgB,MAAM,CAACG,cAAc,EAAEP,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEpE,oBACEb,KAAA,CAAAqB,aAAA,CAACjB,IAAI;IACHkB,KAAK,EACHf,IAAI,KAAK,MAAM,GAAGU,MAAM,CAACM,kBAAkB,GAAGN,MAAM,CAACO;EACtD,gBAEDxB,KAAA,CAAAqB,aAAA,CAACjB,IAAI;IAACkB,KAAK,EAAEL,MAAM,CAACQ;EAAM,gBACxBzB,KAAA,CAAAqB,aAAA,CAACnB,QAAQ,CAACE,IAAI;IAACkB,KAAK,EAAEN;EAAK,CAAE,CAAC,eAC9BhB,KAAA,CAAAqB,aAAA,CAACnB,QAAQ,CAACE,IAAI;IAACkB,KAAK,EAAEH;EAAM,CAAE,CAC1B,CACF,CAAC;AAEX,CAAC;AAED,MAAMO,SAAoB,GAAG;EAC3BC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE;AAChB,CAAC;AACD,MAAML,gBAA2B,GAAG;EAClCM,gBAAgB,EAAE,CAAC;EACnBH,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVG,cAAc,EAAE,QAAQ;EACxBC,UAAU,EAAE;AACd,CAAC;AACD,MAAMf,MAAM,GAAGd,UAAU,CAAC8B,MAAM,CAAC;EAC/BT,gBAAgB,EAAEA,gBAAgB;EAClCD,kBAAkB,EAAE;IAClB,GAAGC,gBAAgB;IACnBU,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAS,CAAC;EAClC,CAAC;EACDV,KAAK,EAAE;IACLE,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVQ,aAAa,EAAE,KAAK;IACpBJ,UAAU,EAAE,QAAQ;IACpBD,cAAc,EAAE;EAClB,CAAC;EACDb,aAAa,EAAE;IACb,GAAGQ,SAAS;IACZQ,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAS,CAAC,CAAC;IACjCnB,IAAI,EAAE,CAAC;EACT,CAAC;EACDI,cAAc,EAAE;IACd,GAAGM,SAAS;IACZQ,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAQ,CAAC,CAAC;IAChCnB,IAAI,EAAE,CAAC;EACT;AACF,CAAC,CAAC;AAEF,eAAeV,cAAc","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/Button.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { Platform, TouchableNativeFeedback, TouchableOpacity, View } from "react-native";
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
 const ButtonIOS = ({
   children,
   onPress,
@@ -37,7 +37,7 @@ const ButtonAndroid = ({
   style,
   theme
 }) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState(state => state.appearance);
   const accessibilityState = useMemo(() => ({
     disabled
   }), [disabled]);

package/lib/module/components/KeyboardToolbar/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Platform","TouchableNativeFeedback","TouchableOpacity","View","useColorScheme","ButtonIOS","children","onPress","disabled","accessibilityLabel","accessibilityHint","testID","style","Container","accessibilityState","createElement","accessibilityRole","ButtonAndroid","rippleRadius","theme","colorScheme","ripple","Ripple","background","select","android","default"],"sources":["Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Platform,\n  TouchableNativeFeedback,\n  TouchableOpacity,\n  View,\n} from \"react-native\";\n\nimport useColorScheme from \"../hooks/useColorScheme\";\n\nimport type { KeyboardToolbarTheme } from \"./types\";\nimport type { PropsWithChildren } from \"react\";\nimport type { ViewStyle } from \"react-native\";\n\ntype ButtonProps = {\n  disabled?: boolean;\n  onPress: () => void;\n  accessibilityLabel: string;\n  accessibilityHint: string;\n  testID: string;\n  rippleRadius?: number;\n  style?: ViewStyle;\n  theme: KeyboardToolbarTheme;\n};\n\nconst ButtonIOS = ({\n  children,\n  onPress,\n  disabled,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n  style,\n}: PropsWithChildren<ButtonProps>) => {\n  // immediately switch to plain view to avoid animation flickering\n  // when fade out animation happens and view becomes disabled\n  const Container = disabled\n    ? (View as unknown as typeof TouchableOpacity)\n    : TouchableOpacity;\n  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);\n\n  return (\n    <Container\n      accessibilityState={accessibilityState}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      onPress={onPress}\n      style={style}\n      testID={testID}\n    >\n      {children}\n    </Container>\n  );\n};\nconst ButtonAndroid = ({\n  children,\n  onPress,\n  disabled,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n  rippleRadius = 18,\n  style,\n  theme,\n}: PropsWithChildren<ButtonProps>) => {\n  const colorScheme = useColorScheme();\n  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);\n  const ripple = useMemo(\n    () =>\n      TouchableNativeFeedback.Ripple(\n        theme[colorScheme].ripple,\n        true,\n        rippleRadius,\n      ),\n    [colorScheme, rippleRadius, theme],\n  );\n\n  return (\n    <TouchableNativeFeedback\n      accessibilityState={accessibilityState}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      onPress={onPress}\n      background={ripple}\n      testID={testID}\n      style={style}\n    >\n      <View style={style}>{children}</View>\n    </TouchableNativeFeedback>\n  );\n};\n\nexport default Platform.select({\n  android: ButtonAndroid,\n  default: ButtonIOS,\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,QAAQ,EACRC,uBAAuB,EACvBC,gBAAgB,EAChBC,IAAI,QACC,cAAc;AAErB,OAAOC,cAAc,MAAM,yBAAyB;AAiBpD,MAAMC,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,kBAAkB;EAClBC,iBAAiB;EACjBC,MAAM;EACNC;AAC8B,CAAC,KAAK;EACpC;EACA;EACA,MAAMC,SAAS,GAAGL,QAAQ,GACrBL,IAAI,GACLD,gBAAgB;EACpB,MAAMY,kBAAkB,GAAGf,OAAO,CAAC,OAAO;IAAES;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEpE,oBACEV,KAAA,CAAAiB,aAAA,CAACF,SAAS;IACRC,kBAAkB,EAAEA,kBAAmB;IACvCE,iBAAiB,EAAC,QAAQ;IAC1BP,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCH,OAAO,EAAEA,OAAQ;IACjBK,KAAK,EAAEA,KAAM;IACbD,MAAM,EAAEA;EAAO,GAEdL,QACQ,CAAC;AAEhB,CAAC;AACD,MAAMW,aAAa,GAAGA,CAAC;EACrBX,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,kBAAkB;EAClBC,iBAAiB;EACjBC,MAAM;EACNO,YAAY,GAAG,EAAE;EACjBN,KAAK;EACLO;AAC8B,CAAC,KAAK;EACpC,MAAMC,WAAW,GAAGhB,cAAc,CAAC,CAAC;EACpC,MAAMU,kBAAkB,GAAGf,OAAO,CAAC,OAAO;IAAES;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACpE,MAAMa,MAAM,GAAGtB,OAAO,CACpB,MACEE,uBAAuB,CAACqB,MAAM,CAC5BH,KAAK,CAACC,WAAW,CAAC,CAACC,MAAM,EACzB,IAAI,EACJH,YACF,CAAC,EACH,CAACE,WAAW,EAAEF,YAAY,EAAEC,KAAK,CACnC,CAAC;EAED,oBACErB,KAAA,CAAAiB,aAAA,CAACd,uBAAuB;IACtBa,kBAAkB,EAAEA,kBAAmB;IACvCE,iBAAiB,EAAC,QAAQ;IAC1BP,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCH,OAAO,EAAEA,OAAQ;IACjBgB,UAAU,EAAEF,MAAO;IACnBV,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA;EAAM,gBAEbd,KAAA,CAAAiB,aAAA,CAACZ,IAAI;IAACS,KAAK,EAAEA;EAAM,GAAEN,QAAe,CACb,CAAC;AAE9B,CAAC;AAED,eAAeN,QAAQ,CAACwB,MAAM,CAAC;EAC7BC,OAAO,EAAER,aAAa;EACtBS,OAAO,EAAErB;AACX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Platform","TouchableNativeFeedback","TouchableOpacity","View","useKeyboardState","ButtonIOS","children","onPress","disabled","accessibilityLabel","accessibilityHint","testID","style","Container","accessibilityState","createElement","accessibilityRole","ButtonAndroid","rippleRadius","theme","colorScheme","state","appearance","ripple","Ripple","background","select","android","default"],"sources":["Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Platform,\n  TouchableNativeFeedback,\n  TouchableOpacity,\n  View,\n} from \"react-native\";\n\nimport { useKeyboardState } from \"../../hooks\";\n\nimport type { KeyboardToolbarTheme } from \"./types\";\nimport type { PropsWithChildren } from \"react\";\nimport type { GestureResponderEvent, ViewStyle } from \"react-native\";\n\ntype ButtonProps = {\n  disabled?: boolean;\n  onPress: (event: GestureResponderEvent) => void;\n  accessibilityLabel: string;\n  accessibilityHint: string;\n  testID: string;\n  rippleRadius?: number;\n  style?: ViewStyle;\n  theme: KeyboardToolbarTheme;\n};\n\nconst ButtonIOS = ({\n  children,\n  onPress,\n  disabled,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n  style,\n}: PropsWithChildren<ButtonProps>) => {\n  // immediately switch to plain view to avoid animation flickering\n  // when fade out animation happens and view becomes disabled\n  const Container = disabled\n    ? (View as unknown as typeof TouchableOpacity)\n    : TouchableOpacity;\n  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);\n\n  return (\n    <Container\n      accessibilityState={accessibilityState}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      onPress={onPress}\n      style={style}\n      testID={testID}\n    >\n      {children}\n    </Container>\n  );\n};\nconst ButtonAndroid = ({\n  children,\n  onPress,\n  disabled,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n  rippleRadius = 18,\n  style,\n  theme,\n}: PropsWithChildren<ButtonProps>) => {\n  const colorScheme = useKeyboardState((state) => state.appearance);\n  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);\n  const ripple = useMemo(\n    () =>\n      TouchableNativeFeedback.Ripple(\n        theme[colorScheme].ripple,\n        true,\n        rippleRadius,\n      ),\n    [colorScheme, rippleRadius, theme],\n  );\n\n  return (\n    <TouchableNativeFeedback\n      accessibilityState={accessibilityState}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      onPress={onPress}\n      background={ripple}\n      testID={testID}\n      style={style}\n    >\n      <View style={style}>{children}</View>\n    </TouchableNativeFeedback>\n  );\n};\n\nexport default Platform.select({\n  android: ButtonAndroid,\n  default: ButtonIOS,\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,QAAQ,EACRC,uBAAuB,EACvBC,gBAAgB,EAChBC,IAAI,QACC,cAAc;AAErB,SAASC,gBAAgB,QAAQ,aAAa;AAiB9C,MAAMC,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,kBAAkB;EAClBC,iBAAiB;EACjBC,MAAM;EACNC;AAC8B,CAAC,KAAK;EACpC;EACA;EACA,MAAMC,SAAS,GAAGL,QAAQ,GACrBL,IAAI,GACLD,gBAAgB;EACpB,MAAMY,kBAAkB,GAAGf,OAAO,CAAC,OAAO;IAAES;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEpE,oBACEV,KAAA,CAAAiB,aAAA,CAACF,SAAS;IACRC,kBAAkB,EAAEA,kBAAmB;IACvCE,iBAAiB,EAAC,QAAQ;IAC1BP,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCH,OAAO,EAAEA,OAAQ;IACjBK,KAAK,EAAEA,KAAM;IACbD,MAAM,EAAEA;EAAO,GAEdL,QACQ,CAAC;AAEhB,CAAC;AACD,MAAMW,aAAa,GAAGA,CAAC;EACrBX,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,kBAAkB;EAClBC,iBAAiB;EACjBC,MAAM;EACNO,YAAY,GAAG,EAAE;EACjBN,KAAK;EACLO;AAC8B,CAAC,KAAK;EACpC,MAAMC,WAAW,GAAGhB,gBAAgB,CAAEiB,KAAK,IAAKA,KAAK,CAACC,UAAU,CAAC;EACjE,MAAMR,kBAAkB,GAAGf,OAAO,CAAC,OAAO;IAAES;EAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACpE,MAAMe,MAAM,GAAGxB,OAAO,CACpB,MACEE,uBAAuB,CAACuB,MAAM,CAC5BL,KAAK,CAACC,WAAW,CAAC,CAACG,MAAM,EACzB,IAAI,EACJL,YACF,CAAC,EACH,CAACE,WAAW,EAAEF,YAAY,EAAEC,KAAK,CACnC,CAAC;EAED,oBACErB,KAAA,CAAAiB,aAAA,CAACd,uBAAuB;IACtBa,kBAAkB,EAAEA,kBAAmB;IACvCE,iBAAiB,EAAC,QAAQ;IAC1BP,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCH,OAAO,EAAEA,OAAQ;IACjBkB,UAAU,EAAEF,MAAO;IACnBZ,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA;EAAM,gBAEbd,KAAA,CAAAiB,aAAA,CAACZ,IAAI;IAACS,KAAK,EAAEA;EAAM,GAAEN,QAAe,CACb,CAAC;AAE9B,CAAC;AAED,eAAeN,QAAQ,CAAC0B,MAAM,CAAC;EAC7BC,OAAO,EAAEV,aAAa;EACtBW,OAAO,EAAEvB;AACX,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/Background.js

@@ -0,0 +1,6 @@
+import React from "react";
+const Background = ({
+  children
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, children);
+export default Background;
+//# sourceMappingURL=Background.js.map

package/lib/module/components/KeyboardToolbar/compound/components/Background.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Background","children","createElement","Fragment"],"sources":["Background.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ReactNode } from \"react\";\n\nconst Background: React.FC<{ children: ReactNode }> = ({ children }) => (\n  <>{children}</>\n);\n\nexport default Background;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,MAAMC,UAA6C,GAAGA,CAAC;EAAEC;AAAS,CAAC,kBACjEF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,QAAW,CACf;AAED,eAAeD,UAAU","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/Content.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { TEST_ID_KEYBOARD_TOOLBAR_CONTENT } from "../../constants";
+const Content = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.flex,
+    testID: TEST_ID_KEYBOARD_TOOLBAR_CONTENT
+  }, children);
+};
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  }
+});
+export default Content;
+//# sourceMappingURL=Content.js.map

package/lib/module/components/KeyboardToolbar/compound/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","TEST_ID_KEYBOARD_TOOLBAR_CONTENT","Content","children","createElement","style","styles","flex","testID","create"],"sources":["Content.tsx"],"sourcesContent":["import React from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { TEST_ID_KEYBOARD_TOOLBAR_CONTENT } from \"../../constants\";\n\nimport type { ReactNode } from \"react\";\nimport type { ViewProps } from \"react-native\";\n\nconst Content: React.FC<ViewProps & { children?: ReactNode }> = ({\n  children,\n}) => {\n  return (\n    <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  flex: {\n    flex: 1,\n  },\n});\n\nexport default Content;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,gCAAgC,QAAQ,iBAAiB;AAKlE,MAAMC,OAAuD,GAAGA,CAAC;EAC/DC;AACF,CAAC,KAAK;EACJ,oBACEL,KAAA,CAAAM,aAAA,CAACJ,IAAI;IAACK,KAAK,EAAEC,MAAM,CAACC,IAAK;IAACC,MAAM,EAAEP;EAAiC,GAChEE,QACG,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGP,UAAU,CAACU,MAAM,CAAC;EAC/BF,IAAI,EAAE;IACJA,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,eAAeL,OAAO","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/Done.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useMemo } from "react";
+import { StyleSheet, Text } from "react-native";
+import { useKeyboardState } from "../../../../hooks";
+import { KeyboardController } from "../../../../module";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_DONE } from "../../constants";
+import { useToolbarContext } from "../context";
+const Done = ({
+  children,
+  onPress,
+  rippleRadius = 28,
+  text,
+  button: ButtonContainer = Button
+}) => {
+  const colorScheme = useKeyboardState(state => state.appearance);
+  const {
+    theme
+  } = useToolbarContext();
+  const doneStyle = useMemo(() => [styles.doneButton, {
+    color: theme[colorScheme].primary
+  }], [colorScheme, theme]);
+  const onPressDone = useCallback(event => {
+    onPress === null || onPress === void 0 || onPress(event);
+    if (!event.isDefaultPrevented()) KeyboardController.dismiss();
+  }, [onPress]);
+  return /*#__PURE__*/React.createElement(ButtonContainer, {
+    accessibilityHint: "Closes the keyboard",
+    accessibilityLabel: "Done",
+    rippleRadius: rippleRadius,
+    style: styles.doneButtonContainer,
+    testID: TEST_ID_KEYBOARD_TOOLBAR_DONE,
+    theme: theme,
+    onPress: onPressDone
+  }, /*#__PURE__*/React.createElement(Text, {
+    maxFontSizeMultiplier: 1.3,
+    style: doneStyle
+  }, children ?? text ?? "Done"));
+};
+const styles = StyleSheet.create({
+  doneButton: {
+    fontWeight: "600",
+    fontSize: 15
+  },
+  doneButtonContainer: {
+    marginRight: 16,
+    marginLeft: 8
+  }
+});
+export default Done;
+//# sourceMappingURL=Done.js.map

package/lib/module/components/KeyboardToolbar/compound/components/Done.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","StyleSheet","Text","useKeyboardState","KeyboardController","Button","TEST_ID_KEYBOARD_TOOLBAR_DONE","useToolbarContext","Done","children","onPress","rippleRadius","text","button","ButtonContainer","colorScheme","state","appearance","theme","doneStyle","styles","doneButton","color","primary","onPressDone","event","isDefaultPrevented","dismiss","createElement","accessibilityHint","accessibilityLabel","style","doneButtonContainer","testID","maxFontSizeMultiplier","create","fontWeight","fontSize","marginRight","marginLeft"],"sources":["Done.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport { useKeyboardState } from \"../../../../hooks\";\nimport { KeyboardController } from \"../../../../module\";\nimport Button from \"../../Button\";\nimport { TEST_ID_KEYBOARD_TOOLBAR_DONE } from \"../../constants\";\nimport { useToolbarContext } from \"../context\";\n\nimport type { ButtonSubProps } from \"./types\";\nimport type { ReactNode } from \"react\";\nimport type { GestureResponderEvent } from \"react-native\";\n\nconst Done: React.FC<Omit<ButtonSubProps, \"icon\"> & { text?: ReactNode }> = ({\n  children,\n  onPress,\n  rippleRadius = 28,\n  text,\n  button: ButtonContainer = Button,\n}) => {\n  const colorScheme = useKeyboardState((state) => state.appearance);\n  const { theme } = useToolbarContext();\n  const doneStyle = useMemo(\n    () => [styles.doneButton, { color: theme[colorScheme].primary }],\n    [colorScheme, theme],\n  );\n  const onPressDone = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n      if (!event.isDefaultPrevented()) KeyboardController.dismiss();\n    },\n    [onPress],\n  );\n\n  return (\n    <ButtonContainer\n      accessibilityHint=\"Closes the keyboard\"\n      accessibilityLabel=\"Done\"\n      rippleRadius={rippleRadius}\n      style={styles.doneButtonContainer}\n      testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}\n      theme={theme}\n      onPress={onPressDone}\n    >\n      <Text maxFontSizeMultiplier={1.3} style={doneStyle}>\n        {children ?? text ?? \"Done\"}\n      </Text>\n    </ButtonContainer>\n  );\n};\n\nconst styles = StyleSheet.create({\n  doneButton: { fontWeight: \"600\", fontSize: 15 },\n  doneButtonContainer: { marginRight: 16, marginLeft: 8 },\n});\n\nexport default Done;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,6BAA6B,QAAQ,iBAAiB;AAC/D,SAASC,iBAAiB,QAAQ,YAAY;AAM9C,MAAMC,IAAmE,GAAGA,CAAC;EAC3EC,QAAQ;EACRC,OAAO;EACPC,YAAY,GAAG,EAAE;EACjBC,IAAI;EACJC,MAAM,EAAEC,eAAe,GAAGT;AAC5B,CAAC,KAAK;EACJ,MAAMU,WAAW,GAAGZ,gBAAgB,CAAEa,KAAK,IAAKA,KAAK,CAACC,UAAU,CAAC;EACjE,MAAM;IAAEC;EAAM,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EACrC,MAAMY,SAAS,GAAGnB,OAAO,CACvB,MAAM,CAACoB,MAAM,CAACC,UAAU,EAAE;IAAEC,KAAK,EAAEJ,KAAK,CAACH,WAAW,CAAC,CAACQ;EAAQ,CAAC,CAAC,EAChE,CAACR,WAAW,EAAEG,KAAK,CACrB,CAAC;EACD,MAAMM,WAAW,GAAGzB,WAAW,CAC5B0B,KAA4B,IAAK;IAChCf,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGe,KAAK,CAAC;IAChB,IAAI,CAACA,KAAK,CAACC,kBAAkB,CAAC,CAAC,EAAEtB,kBAAkB,CAACuB,OAAO,CAAC,CAAC;EAC/D,CAAC,EACD,CAACjB,OAAO,CACV,CAAC;EAED,oBACEZ,KAAA,CAAA8B,aAAA,CAACd,eAAe;IACde,iBAAiB,EAAC,qBAAqB;IACvCC,kBAAkB,EAAC,MAAM;IACzBnB,YAAY,EAAEA,YAAa;IAC3BoB,KAAK,EAAEX,MAAM,CAACY,mBAAoB;IAClCC,MAAM,EAAE3B,6BAA8B;IACtCY,KAAK,EAAEA,KAAM;IACbR,OAAO,EAAEc;EAAY,gBAErB1B,KAAA,CAAA8B,aAAA,CAAC1B,IAAI;IAACgC,qBAAqB,EAAE,GAAI;IAACH,KAAK,EAAEZ;EAAU,GAChDV,QAAQ,IAAIG,IAAI,IAAI,MACjB,CACS,CAAC;AAEtB,CAAC;AAED,MAAMQ,MAAM,GAAGnB,UAAU,CAACkC,MAAM,CAAC;EAC/Bd,UAAU,EAAE;IAAEe,UAAU,EAAE,KAAK;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC/CL,mBAAmB,EAAE;IAAEM,WAAW,EAAE,EAAE;IAAEC,UAAU,EAAE;EAAE;AACxD,CAAC,CAAC;AAEF,eAAe/B,IAAI","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/Next.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from "react";
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_NEXT } from "../../constants";
+import { useToolbarContext } from "../context";
+const Next = ({
+  children,
+  onPress,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow
+}) => {
+  const {
+    theme,
+    isNextDisabled
+  } = useToolbarContext();
+  const isDisabled = disabled ?? isNextDisabled;
+  const onPressNext = useCallback(event => {
+    onPress === null || onPress === void 0 || onPress(event);
+    if (!event.isDefaultPrevented()) KeyboardController.setFocusTo("next");
+  }, [onPress]);
+  return /*#__PURE__*/React.createElement(ButtonContainer, {
+    accessibilityHint: "Moves focus to the next field",
+    accessibilityLabel: "Next",
+    disabled: isDisabled,
+    rippleRadius: rippleRadius,
+    style: style,
+    testID: TEST_ID_KEYBOARD_TOOLBAR_NEXT,
+    theme: theme,
+    onPress: onPressNext
+  }, children ?? /*#__PURE__*/React.createElement(IconContainer, {
+    disabled: isDisabled,
+    theme: theme,
+    type: "next"
+  }));
+};
+export default Next;
+//# sourceMappingURL=Next.js.map

package/lib/module/components/KeyboardToolbar/compound/components/Next.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","KeyboardController","Arrow","Button","TEST_ID_KEYBOARD_TOOLBAR_NEXT","useToolbarContext","Next","children","onPress","disabled","rippleRadius","style","button","ButtonContainer","icon","IconContainer","theme","isNextDisabled","isDisabled","onPressNext","event","isDefaultPrevented","setFocusTo","createElement","accessibilityHint","accessibilityLabel","testID","type"],"sources":["Next.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\n\nimport { KeyboardController } from \"../../../../module\";\nimport Arrow from \"../../Arrow\";\nimport Button from \"../../Button\";\nimport { TEST_ID_KEYBOARD_TOOLBAR_NEXT } from \"../../constants\";\nimport { useToolbarContext } from \"../context\";\n\nimport type { ButtonSubProps } from \"./types\";\nimport type { GestureResponderEvent } from \"react-native\";\n\nconst Next: React.FC<ButtonSubProps> = ({\n  children,\n  onPress,\n  disabled,\n  rippleRadius,\n  style,\n  button: ButtonContainer = Button,\n  icon: IconContainer = Arrow,\n}) => {\n  const { theme, isNextDisabled } = useToolbarContext();\n  const isDisabled = disabled ?? isNextDisabled;\n  const onPressNext = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n      if (!event.isDefaultPrevented()) KeyboardController.setFocusTo(\"next\");\n    },\n    [onPress],\n  );\n\n  return (\n    <ButtonContainer\n      accessibilityHint=\"Moves focus to the next field\"\n      accessibilityLabel=\"Next\"\n      disabled={isDisabled}\n      rippleRadius={rippleRadius}\n      style={style}\n      testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}\n      theme={theme}\n      onPress={onPressNext}\n    >\n      {children ?? (\n        <IconContainer disabled={isDisabled} theme={theme} type=\"next\" />\n      )}\n    </ButtonContainer>\n  );\n};\n\nexport default Next;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,6BAA6B,QAAQ,iBAAiB;AAC/D,SAASC,iBAAiB,QAAQ,YAAY;AAK9C,MAAMC,IAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,MAAM,EAAEC,eAAe,GAAGV,MAAM;EAChCW,IAAI,EAAEC,aAAa,GAAGb;AACxB,CAAC,KAAK;EACJ,MAAM;IAAEc,KAAK;IAAEC;EAAe,CAAC,GAAGZ,iBAAiB,CAAC,CAAC;EACrD,MAAMa,UAAU,GAAGT,QAAQ,IAAIQ,cAAc;EAC7C,MAAME,WAAW,GAAGnB,WAAW,CAC5BoB,KAA4B,IAAK;IAChCZ,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGY,KAAK,CAAC;IAChB,IAAI,CAACA,KAAK,CAACC,kBAAkB,CAAC,CAAC,EAAEpB,kBAAkB,CAACqB,UAAU,CAAC,MAAM,CAAC;EACxE,CAAC,EACD,CAACd,OAAO,CACV,CAAC;EAED,oBACET,KAAA,CAAAwB,aAAA,CAACV,eAAe;IACdW,iBAAiB,EAAC,+BAA+B;IACjDC,kBAAkB,EAAC,MAAM;IACzBhB,QAAQ,EAAES,UAAW;IACrBR,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA,KAAM;IACbe,MAAM,EAAEtB,6BAA8B;IACtCY,KAAK,EAAEA,KAAM;IACbR,OAAO,EAAEW;EAAY,GAEpBZ,QAAQ,iBACPR,KAAA,CAAAwB,aAAA,CAACR,aAAa;IAACN,QAAQ,EAAES,UAAW;IAACF,KAAK,EAAEA,KAAM;IAACW,IAAI,EAAC;EAAM,CAAE,CAEnD,CAAC;AAEtB,CAAC;AAED,eAAerB,IAAI","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/Prev.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from "react";
+import { KeyboardController } from "../../../../module";
+import Arrow from "../../Arrow";
+import Button from "../../Button";
+import { TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS } from "../../constants";
+import { useToolbarContext } from "../context";
+const Prev = ({
+  children,
+  onPress,
+  disabled,
+  rippleRadius,
+  style,
+  button: ButtonContainer = Button,
+  icon: IconContainer = Arrow
+}) => {
+  const {
+    theme,
+    isPrevDisabled
+  } = useToolbarContext();
+  const isDisabled = disabled ?? isPrevDisabled;
+  const onPressPrev = useCallback(event => {
+    onPress === null || onPress === void 0 || onPress(event);
+    if (!event.isDefaultPrevented()) KeyboardController.setFocusTo("prev");
+  }, [onPress]);
+  return /*#__PURE__*/React.createElement(ButtonContainer, {
+    accessibilityHint: "Moves focus to the previous field",
+    accessibilityLabel: "Previous",
+    disabled: isDisabled,
+    rippleRadius: rippleRadius,
+    style: style,
+    testID: TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS,
+    theme: theme,
+    onPress: onPressPrev
+  }, children ?? /*#__PURE__*/React.createElement(IconContainer, {
+    disabled: isDisabled,
+    theme: theme,
+    type: "prev"
+  }));
+};
+export default Prev;
+//# sourceMappingURL=Prev.js.map

package/lib/module/components/KeyboardToolbar/compound/components/Prev.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","KeyboardController","Arrow","Button","TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS","useToolbarContext","Prev","children","onPress","disabled","rippleRadius","style","button","ButtonContainer","icon","IconContainer","theme","isPrevDisabled","isDisabled","onPressPrev","event","isDefaultPrevented","setFocusTo","createElement","accessibilityHint","accessibilityLabel","testID","type"],"sources":["Prev.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\n\nimport { KeyboardController } from \"../../../../module\";\nimport Arrow from \"../../Arrow\";\nimport Button from \"../../Button\";\nimport { TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS } from \"../../constants\";\nimport { useToolbarContext } from \"../context\";\n\nimport type { ButtonSubProps } from \"./types\";\nimport type { GestureResponderEvent } from \"react-native\";\n\nconst Prev: React.FC<ButtonSubProps> = ({\n  children,\n  onPress,\n  disabled,\n  rippleRadius,\n  style,\n  button: ButtonContainer = Button,\n  icon: IconContainer = Arrow,\n}) => {\n  const { theme, isPrevDisabled } = useToolbarContext();\n  const isDisabled = disabled ?? isPrevDisabled;\n  const onPressPrev = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n      if (!event.isDefaultPrevented()) KeyboardController.setFocusTo(\"prev\");\n    },\n    [onPress],\n  );\n\n  return (\n    <ButtonContainer\n      accessibilityHint=\"Moves focus to the previous field\"\n      accessibilityLabel=\"Previous\"\n      disabled={isDisabled}\n      rippleRadius={rippleRadius}\n      style={style}\n      testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}\n      theme={theme}\n      onPress={onPressPrev}\n    >\n      {children ?? (\n        <IconContainer disabled={isDisabled} theme={theme} type=\"prev\" />\n      )}\n    </ButtonContainer>\n  );\n};\n\nexport default Prev;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,iCAAiC,QAAQ,iBAAiB;AACnE,SAASC,iBAAiB,QAAQ,YAAY;AAK9C,MAAMC,IAA8B,GAAGA,CAAC;EACtCC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,MAAM,EAAEC,eAAe,GAAGV,MAAM;EAChCW,IAAI,EAAEC,aAAa,GAAGb;AACxB,CAAC,KAAK;EACJ,MAAM;IAAEc,KAAK;IAAEC;EAAe,CAAC,GAAGZ,iBAAiB,CAAC,CAAC;EACrD,MAAMa,UAAU,GAAGT,QAAQ,IAAIQ,cAAc;EAC7C,MAAME,WAAW,GAAGnB,WAAW,CAC5BoB,KAA4B,IAAK;IAChCZ,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAGY,KAAK,CAAC;IAChB,IAAI,CAACA,KAAK,CAACC,kBAAkB,CAAC,CAAC,EAAEpB,kBAAkB,CAACqB,UAAU,CAAC,MAAM,CAAC;EACxE,CAAC,EACD,CAACd,OAAO,CACV,CAAC;EAED,oBACET,KAAA,CAAAwB,aAAA,CAACV,eAAe;IACdW,iBAAiB,EAAC,mCAAmC;IACrDC,kBAAkB,EAAC,UAAU;IAC7BhB,QAAQ,EAAES,UAAW;IACrBR,YAAY,EAAEA,YAAa;IAC3BC,KAAK,EAAEA,KAAM;IACbe,MAAM,EAAEtB,iCAAkC;IAC1CY,KAAK,EAAEA,KAAM;IACbR,OAAO,EAAEW;EAAY,GAEpBZ,QAAQ,iBACPR,KAAA,CAAAwB,aAAA,CAACR,aAAa;IAACN,QAAQ,EAAES,UAAW;IAACF,KAAK,EAAEA,KAAM;IAACW,IAAI,EAAC;EAAM,CAAE,CAEnD,CAAC;AAEtB,CAAC;AAED,eAAerB,IAAI","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/index.js

@@ -0,0 +1,6 @@
+export { default as Background } from "./Background";
+export { default as Content } from "./Content";
+export { default as Done } from "./Done";
+export { default as Next } from "./Next";
+export { default as Prev } from "./Prev";
+//# sourceMappingURL=index.js.map

package/lib/module/components/KeyboardToolbar/compound/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","Background","Content","Done","Next","Prev"],"sources":["index.ts"],"sourcesContent":["export { default as Background } from \"./Background\";\nexport { default as Content } from \"./Content\";\nexport { default as Done } from \"./Done\";\nexport { default as Next } from \"./Next\";\nexport { default as Prev } from \"./Prev\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,IAAI,QAAQ,QAAQ;AACxC,SAASH,OAAO,IAAII,IAAI,QAAQ,QAAQ;AACxC,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/KeyboardToolbar/compound/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type Arrow from \"../../Arrow\";\nimport type Button from \"../../Button\";\nimport type { ReactNode } from \"react\";\nimport type { GestureResponderEvent, ViewStyle } from \"react-native\";\n\nexport type ButtonSubProps = {\n  children?: ReactNode;\n  onPress?: (event: GestureResponderEvent) => void;\n  disabled?: boolean;\n  testID?: string;\n  rippleRadius?: number;\n  style?: ViewStyle;\n  button?: typeof Button;\n  icon?: typeof Arrow;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/compound/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+export const ToolbarContext = /*#__PURE__*/createContext(undefined);
+export const useToolbarContext = () => {
+  const context = useContext(ToolbarContext);
+  if (!context) {
+    throw new Error("KeyboardToolbar.* component must be used inside <KeyboardToolbar>");
+  }
+  return context;
+};
+//# sourceMappingURL=context.js.map

package/lib/module/components/KeyboardToolbar/compound/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","ToolbarContext","undefined","useToolbarContext","context","Error"],"sources":["context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport type { KeyboardToolbarTheme } from \"../types\";\n\ntype ToolbarContextType = {\n  theme: KeyboardToolbarTheme;\n  isPrevDisabled: boolean;\n  isNextDisabled: boolean;\n};\n\nexport const ToolbarContext = createContext<ToolbarContextType | undefined>(\n  undefined,\n);\n\nexport const useToolbarContext = () => {\n  const context = useContext(ToolbarContext);\n\n  if (!context) {\n    throw new Error(\n      \"KeyboardToolbar.* component must be used inside <KeyboardToolbar>\",\n    );\n  }\n\n  return context;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAUjD,OAAO,MAAMC,cAAc,gBAAGF,aAAa,CACzCG,SACF,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,MAAMC,OAAO,GAAGJ,UAAU,CAACC,cAAc,CAAC;EAE1C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,mEACF,CAAC;EACH;EAEA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/constants.js

@@ -0,0 +1,11 @@
+import { KEYBOARD_BORDER_RADIUS } from "../../constants";
+export const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+export const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
+export const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
+export const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
+export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
+export const KEYBOARD_TOOLBAR_HEIGHT = 42;
+export const DEFAULT_OPACITY = "FF";
+export const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;
+export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;
+//# sourceMappingURL=constants.js.map

package/lib/module/components/KeyboardToolbar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["KEYBOARD_BORDER_RADIUS","TEST_ID_KEYBOARD_TOOLBAR","TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS","TEST_ID_KEYBOARD_TOOLBAR_NEXT","TEST_ID_KEYBOARD_TOOLBAR_CONTENT","TEST_ID_KEYBOARD_TOOLBAR_DONE","KEYBOARD_TOOLBAR_HEIGHT","DEFAULT_OPACITY","KEYBOARD_HAS_ROUNDED_CORNERS","OPENED_OFFSET"],"sources":["constants.ts"],"sourcesContent":["import { KEYBOARD_BORDER_RADIUS } from \"../../constants\";\n\nimport type { HEX } from \"./types\";\n\nexport const TEST_ID_KEYBOARD_TOOLBAR = \"keyboard.toolbar\";\nexport const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;\nexport const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;\nexport const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;\nexport const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;\n\nexport const KEYBOARD_TOOLBAR_HEIGHT = 42;\nexport const DEFAULT_OPACITY: HEX = \"FF\";\nexport const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;\nexport const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;\n"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,iBAAiB;AAIxD,OAAO,MAAMC,wBAAwB,GAAG,kBAAkB;AAC1D,OAAO,MAAMC,iCAAiC,GAAG,GAAGD,wBAAwB,WAAW;AACvF,OAAO,MAAME,6BAA6B,GAAG,GAAGF,wBAAwB,OAAO;AAC/E,OAAO,MAAMG,gCAAgC,GAAG,GAAGH,wBAAwB,UAAU;AACrF,OAAO,MAAMI,6BAA6B,GAAG,GAAGJ,wBAAwB,OAAO;AAE/E,OAAO,MAAMK,uBAAuB,GAAG,EAAE;AACzC,OAAO,MAAMC,eAAoB,GAAG,IAAI;AACxC,OAAO,MAAMC,4BAA4B,GAAGR,sBAAsB,GAAG,CAAC;AACtE,OAAO,MAAMS,aAAa,GAAGD,4BAA4B,GAAG,CAAC,EAAE,GAAG,CAAC","ignoreList":[]}

package/lib/module/components/KeyboardToolbar/index.js

@@ -1,32 +1,24 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { FocusedInputEvents } from "../../bindings";
+import React, { useEffect, useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { FocusedInputEvents, RCTKeyboardToolbarGroupView } from "../../bindings";
+import { useKeyboardState } from "../../hooks";
 import KeyboardStickyView from "../KeyboardStickyView";
-import { KeyboardControllerNative } from "../../bindings";
-import useColorScheme from "../hooks/useColorScheme";
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
-const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
-const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
-const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
-const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
-const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
-const KEYBOARD_TOOLBAR_HEIGHT = 42;
-const DEFAULT_OPACITY = "FF";
-const dismissKeyboard = () => KeyboardControllerNative.dismiss(false);
-const goToNextField = () => KeyboardControllerNative.setFocusTo("next");
-const goToPrevField = () => KeyboardControllerNative.setFocusTo("prev");
-
+import { Background, Content, Done, Next, Prev } from "./compound/components";
+import { ToolbarContext } from "./compound/context";
+import { DEFAULT_OPACITY, KEYBOARD_HAS_ROUNDED_CORNERS, KEYBOARD_TOOLBAR_HEIGHT, OPENED_OFFSET, TEST_ID_KEYBOARD_TOOLBAR } from "./constants";
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
  * `Done` buttons.
  */
 const KeyboardToolbar = ({
+  children,
   content,
   theme = colors,
-  doneText,
+  doneText = "Done",
   button,
   icon,
   showArrows = true,
@@ -40,92 +32,103 @@ const KeyboardToolbar = ({
     opened = 0
   } = {},
   enabled = true,
+  insets,
   ...rest
 }) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState(state => state.appearance);
   const [inputs, setInputs] = useState({
     current: 0,
     count: 0
   });
   const isPrevDisabled = inputs.current === 0;
   const isNextDisabled = inputs.current === inputs.count - 1;
+  const buttonContainer = button ?? Button;
+  const iconContainer = icon ?? Arrow;
   useEffect(() => {
     const subscription = FocusedInputEvents.addListener("focusDidSet", e => {
       setInputs(e);
     });
     return subscription.remove;
   }, []);
-  const doneStyle = useMemo(() => [styles.doneButton, {
-    color: theme[colorScheme].primary
-  }], [colorScheme, theme]);
   const toolbarStyle = useMemo(() => [styles.toolbar, {
     backgroundColor: `${theme[colorScheme].background}${opacity}`
-  }], [colorScheme, opacity, theme]);
+  }, !KEYBOARD_HAS_ROUNDED_CORNERS ? {
+    paddingLeft: insets === null || insets === void 0 ? void 0 : insets.left,
+    paddingRight: insets === null || insets === void 0 ? void 0 : insets.right
+  } : null, KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null], [colorScheme, opacity, theme, insets]);
+  const containerStyle = useMemo(() => [
+  // CRUCIAL: gives the native view real bounds
+  styles.sticky, KEYBOARD_HAS_ROUNDED_CORNERS ? {
+    left: ((insets === null || insets === void 0 ? void 0 : insets.left) ?? 0) + 16,
+    right: ((insets === null || insets === void 0 ? void 0 : insets.right) ?? 0) + 16
+  } : null], [insets]);
   const offset = useMemo(() => ({
     closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
-    opened
+    opened: opened + OPENED_OFFSET
   }), [closed, opened]);
-  const ButtonContainer = button || Button;
-  const IconContainer = icon || Arrow;
-  const onPressNext = useCallback(() => {
-    goToNextField();
-    onNextCallback === null || onNextCallback === void 0 || onNextCallback();
-  }, [onNextCallback]);
-  const onPressPrev = useCallback(() => {
-    goToPrevField();
-    onPrevCallback === null || onPrevCallback === void 0 || onPrevCallback();
-  }, [onPrevCallback]);
-  const onPressDone = useCallback(() => {
-    dismissKeyboard();
-    onDoneCallback === null || onDoneCallback === void 0 || onDoneCallback();
-  }, [onDoneCallback]);
-  return /*#__PURE__*/React.createElement(KeyboardStickyView, {
+  let backgroundElement = null;
+  let arrowsElement = null;
+  let contentContainer = null;
+  let doneElement = null;
+  if (children) {
+    let prevChild = null;
+    let nextChild = null;
+    let contentChild = null;
+    let doneChild = null;
+    let backgroundChild = null;
+    React.Children.forEach(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return;
+      if (child.type === Background) backgroundChild = child;else if (child.type === Content) contentChild = child;else if (child.type === Prev) prevChild = child;else if (child.type === Next) nextChild = child;else if (child.type === Done) doneChild = child;
+    });
+    backgroundElement = backgroundChild;
+    doneElement = doneChild;
+    arrowsElement = prevChild || nextChild ? /*#__PURE__*/React.createElement(View, {
+      style: styles.arrows
+    }, prevChild, nextChild) : null;
+    contentContainer = contentChild ?? /*#__PURE__*/React.createElement(Content, null, contentChild);
+  } else {
+    backgroundElement = blur;
+    arrowsElement = showArrows ? /*#__PURE__*/React.createElement(View, {
+      style: styles.arrows
+    }, /*#__PURE__*/React.createElement(Prev, {
+      button: buttonContainer,
+      icon: iconContainer,
+      onPress: onPrevCallback
+    }), /*#__PURE__*/React.createElement(Next, {
+      button: buttonContainer,
+      icon: iconContainer,
+      onPress: onNextCallback
+    })) : null;
+    contentContainer = /*#__PURE__*/React.createElement(Content, null, content);
+    doneElement = doneText ? /*#__PURE__*/React.createElement(Done, {
+      button: buttonContainer,
+      text: doneText,
+      onPress: onDoneCallback
+    }) : null;
+  }
+  const contextValue = useMemo(() => ({
+    theme,
+    isPrevDisabled,
+    isNextDisabled
+  }), [theme, isPrevDisabled, isNextDisabled]);
+  return /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(KeyboardStickyView, {
     enabled: enabled,
-    offset: offset
+    offset: offset,
+    style: containerStyle
   }, /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     style: toolbarStyle,
     testID: TEST_ID_KEYBOARD_TOOLBAR
-  }), blur, showArrows && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-    accessibilityLabel: "Previous",
-    accessibilityHint: "Will move focus to previous field",
-    disabled: isPrevDisabled,
-    onPress: onPressPrev,
-    testID: TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS,
-    theme: theme
-  }, /*#__PURE__*/React.createElement(IconContainer, {
-    disabled: isPrevDisabled,
-    type: "prev",
-    theme: theme
-  })), /*#__PURE__*/React.createElement(ButtonContainer, {
-    accessibilityLabel: "Next",
-    accessibilityHint: "Will move focus to next field",
-    disabled: isNextDisabled,
-    onPress: onPressNext,
-    testID: TEST_ID_KEYBOARD_TOOLBAR_NEXT,
-    theme: theme
-  }, /*#__PURE__*/React.createElement(IconContainer, {
-    disabled: isNextDisabled,
-    type: "next",
-    theme: theme
-  }))), /*#__PURE__*/React.createElement(View, {
-    style: styles.flex,
-    testID: TEST_ID_KEYBOARD_TOOLBAR_CONTENT
-  }, content), /*#__PURE__*/React.createElement(ButtonContainer, {
-    accessibilityLabel: "Done",
-    accessibilityHint: "Will close the keyboard",
-    onPress: onPressDone,
-    testID: TEST_ID_KEYBOARD_TOOLBAR_DONE,
-    rippleRadius: 28,
-    style: styles.doneButtonContainer,
-    theme: theme
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: doneStyle,
-    maxFontSizeMultiplier: 1.3
-  }, doneText || "Done"))));
+  }), backgroundElement, arrowsElement, contentContainer, doneElement)));
 };
 const styles = StyleSheet.create({
-  flex: {
-    flex: 1
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: KEYBOARD_TOOLBAR_HEIGHT
   },
   toolbar: {
     position: "absolute",
@@ -133,17 +136,24 @@ const styles = StyleSheet.create({
     alignItems: "center",
     width: "100%",
     flexDirection: "row",
-    height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8
+    height: KEYBOARD_TOOLBAR_HEIGHT
   },
-  doneButton: {
-    fontWeight: "600",
-    fontSize: 15
+  arrows: {
+    flexDirection: "row",
+    paddingLeft: 8
   },
-  doneButtonContainer: {
-    marginRight: 8
+  floating: {
+    alignSelf: "center",
+    borderRadius: 20,
+    overflow: "hidden"
   }
 });
+KeyboardToolbar.Background = Background;
+KeyboardToolbar.Content = Content;
+KeyboardToolbar.Prev = Prev;
+KeyboardToolbar.Next = Next;
+KeyboardToolbar.Done = Done;
+KeyboardToolbar.Group = RCTKeyboardToolbarGroupView;
 export { colors as DefaultKeyboardToolbarTheme };
 export default KeyboardToolbar;
 //# sourceMappingURL=index.js.map