@chem-po/react-native 0.0.27 → 0.0.29

package/lib/module/contexts/root.js

@@ -1,15 +1,106 @@
 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 { ChempoProvider } from '@chem-po/react';
+import { ChempoProvider, useTheme } from '@chem-po/react';
 import React, { useMemo } from 'react';
 import { NotifierWrapper } from 'react-native-notifier';
+import { configureFonts, PaperProvider } from 'react-native-paper';
 import { en, registerTranslation } from 'react-native-paper-dates';
 import { nativeToast } from '../constants/toast';
 import { useThemeState } from '../hooks/useThemeState';
 import { initializeScreen } from '../store/useScreen';
 registerTranslation('en', en);
+const createPaperTheme = (theme, fonts, colorMode) => {
+  const {
+    colors
+  } = theme;
+  return {
+    dark: colorMode === 'dark',
+    colors: {
+      primary: colors.accent[200],
+      onPrimary: colors.text[900],
+      primaryContainer: colors.accent[500],
+      onPrimaryContainer: colors.text[300],
+      secondary: colors.background[150],
+      onSecondary: colors.text[100],
+      secondaryContainer: colors.background[50],
+      onSecondaryContainer: colors.text[150],
+      tertiary: colors.accent[600],
+      onTertiary: colors.text[50],
+      tertiaryContainer: colors.accent[300],
+      onTertiaryContainer: colors.text[700],
+      error: colors.error[500],
+      onError: colors.text[50],
+      errorContainer: colors.error[100],
+      onErrorContainer: colors.error[900],
+      background: colors.background[50],
+      onBackground: colors.text[100],
+      surface: colors.background[100],
+      onSurface: colors.text[100],
+      surfaceVariant: colors.background[200],
+      onSurfaceVariant: colors.text[250],
+      outline: colors.text[500],
+      outlineVariant: colors.accent[300],
+      surfaceDisabled: colors.background[200],
+      onSurfaceDisabled: colors.text[400],
+      backdrop: '#000000aa',
+      // 60% opacity
+
+      inverseSurface: colors.background[900],
+      inverseOnSurface: colors.text[50],
+      inversePrimary: colors.accent[200],
+      shadow: '#00000099',
+      scrim: '#00000099',
+      // Semi-transparent dark overlay
+
+      elevation: {
+        level0: 'transparent',
+        level1: colors.background[100],
+        level2: colors.background[200],
+        level3: colors.background[300],
+        level4: colors.background[400],
+        level5: colors.background[500]
+      }
+    },
+    roundness: 4,
+    animation: {
+      scale: 1.0
+    },
+    fonts: configureFonts({
+      config: {
+        ...fonts,
+        bodyLarge: {
+          fontSize: 18,
+          ...(fonts === null || fonts === void 0 ? void 0 : fonts.bodyLarge)
+        },
+        bodyMedium: {
+          fontSize: 17,
+          ...(fonts === null || fonts === void 0 ? void 0 : fonts.bodyMedium)
+        },
+        bodySmall: {
+          fontSize: 15,
+          ...(fonts === null || fonts === void 0 ? void 0 : fonts.bodySmall)
+        }
+      }
+    })
+  };
+};
+const ChempoPaperProvider = ({
+  children,
+  fonts
+}) => {
+  const {
+    theme,
+    colorMode
+  } = useTheme();
+  const paperTheme = useMemo(() => createPaperTheme(theme, fonts, colorMode), [theme, fonts, colorMode]);
+  return /*#__PURE__*/React.createElement(PaperProvider, {
+    theme: paperTheme
+  }, children);
+};
 export const ChempoNativeProvider = ({
   theme: themeProp,
   initialColorMode,
+  children,
+  fonts,
   ...props
 }) => {
   const useThemeProps = useMemo(() => ({
@@ -21,6 +112,8 @@ export const ChempoNativeProvider = ({
     toast: nativeToast,
     theme: theme,
     initializeScreen: initializeScreen
-  }, props)));
+  }, props), /*#__PURE__*/React.createElement(ChempoPaperProvider, {
+    fonts: fonts
+  }, children)));
 };
 //# sourceMappingURL=root.js.map

package/lib/module/contexts/root.js.map

@@ -1 +1 @@
-{"version":3,"names":["ChempoProvider","React","useMemo","NotifierWrapper","en","registerTranslation","nativeToast","useThemeState","initializeScreen","ChempoNativeProvider","theme","themeProp","initialColorMode","props","useThemeProps","createElement","_extends","toast"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/root.tsx"],"mappings":";AACA,SAAsBA,cAAc,QAAQ,gBAAgB;AAC5D,OAAOC,KAAK,IAAuBC,OAAO,QAAQ,OAAO;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,SAASC,EAAE,EAAEC,mBAAmB,QAAQ,0BAA0B;AAClE,SAASC,WAAW,QAAQ,oBAAoB;AAChD,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErDH,mBAAmB,CAAC,IAAI,EAAED,EAAE,CAAC;AAO7B,OAAO,MAAMK,oBAAoB,GAAGA,CAElC;EACAC,KAAK,EAAEC,SAAS;EAChBC,gBAAgB;EAChB,GAAGC;AACsC,CAAC,KAAK;EAC/C,MAAMC,aAAa,GAAGZ,OAAO,CAC3B,OAAO;IAAEQ,KAAK,EAAEC,SAAS;IAAEC;EAAiB,CAAC,CAAC,EAC9C,CAACD,SAAS,EAAEC,gBAAgB,CAC9B,CAAC;EACD,MAAMF,KAAK,GAAGH,aAAa,CAACO,aAAa,CAAC;EAC1C,oBACEb,KAAA,CAAAc,aAAA,CAACZ,eAAe,qBACdF,KAAA,CAAAc,aAAA,CAACf,cAAc,EAAAgB,QAAA;IACbC,KAAK,EAAEX,WAAY;IACnBI,KAAK,EAAEA,KAAM;IACbF,gBAAgB,EAAEA;EAAiB,GAC/BK,KAAK,CACV,CACc,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"names":["ChempoProvider","useTheme","React","useMemo","NotifierWrapper","configureFonts","PaperProvider","en","registerTranslation","nativeToast","useThemeState","initializeScreen","createPaperTheme","theme","fonts","colorMode","colors","dark","primary","accent","onPrimary","text","primaryContainer","onPrimaryContainer","secondary","background","onSecondary","secondaryContainer","onSecondaryContainer","tertiary","onTertiary","tertiaryContainer","onTertiaryContainer","error","onError","errorContainer","onErrorContainer","onBackground","surface","onSurface","surfaceVariant","onSurfaceVariant","outline","outlineVariant","surfaceDisabled","onSurfaceDisabled","backdrop","inverseSurface","inverseOnSurface","inversePrimary","shadow","scrim","elevation","level0","level1","level2","level3","level4","level5","roundness","animation","scale","config","bodyLarge","fontSize","bodyMedium","bodySmall","ChempoPaperProvider","children","paperTheme","createElement","ChempoNativeProvider","themeProp","initialColorMode","props","useThemeProps","_extends","toast"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/root.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/components/form/input/Editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/Editable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,EAKN,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAsC,SAAS,EAAE,MAAM,cAAc,CAAA;AAQ5E,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,KAAK,EAAE,2GAUvC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC,sBAsL7B,CAAA"}
+{"version":3,"file":"Editable.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/Editable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,EAKN,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAsC,SAAS,EAAE,MAAM,cAAc,CAAA;AAM5E,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,KAAK,EAAE,2GAUvC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC,sBAuK7B,CAAA"}

package/lib/typescript/components/form/input/StandaloneInput.d.ts

@@ -1,17 +1,19 @@
-import { InputRef } from '@chem-po/core';
+import { InputRef, InputSize } from '@chem-po/core';
 import { Field } from '@chem-po/react';
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-interface StandaloneInputProps {
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+interface StandaloneInputProps<T extends Field, ContainerStyle extends ViewStyle = ViewStyle, InputStyle extends TextStyle = TextStyle> {
     onChange: (v?: any) => void;
     value?: any;
-    field: Field;
+    field: T;
     onBlur?: () => void;
     onFocus?: () => void;
     theme?: 'basic' | 'detailed';
     inEditable?: boolean;
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<ContainerStyle>;
+    inputStyle?: StyleProp<InputStyle>;
+    size?: InputSize;
 }
-export declare const StandaloneInput: React.ForwardRefExoticComponent<StandaloneInputProps & React.RefAttributes<InputRef>>;
+export declare const StandaloneInput: React.ForwardRefExoticComponent<StandaloneInputProps<Field, ViewStyle, TextStyle> & React.RefAttributes<InputRef>>;
 export {};
 //# sourceMappingURL=StandaloneInput.d.ts.map

package/lib/typescript/components/form/input/StandaloneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandaloneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/StandaloneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,KAAK,EAAsB,MAAM,gBAAgB,CAAA;AAC1D,OAAO,KAAmC,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAoBD,eAAO,MAAM,eAAe,uFAAkC,CAAA"}
+{"version":3,"file":"StandaloneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/StandaloneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,KAAK,EAAsB,MAAM,gBAAgB,CAAA;AAC1D,OAAO,KAAmC,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG9D,UAAU,oBAAoB,CAC5B,CAAC,SAAS,KAAK,EACf,cAAc,SAAS,SAAS,GAAG,SAAS,EAC5C,UAAU,SAAS,SAAS,GAAG,SAAS;IAExC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,EAAE,CAAC,CAAA;IACR,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAClC,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAoCD,eAAO,MAAM,eAAe,oHAAkC,CAAA"}

package/lib/typescript/components/form/input/multipleSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/multipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,mBAAmB,EAQpB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAIlB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC,sBAGnE,CAAA;AA0ID,eAAO,MAAM,uBAAuB,kGAA0C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/multipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,mBAAmB,EAQpB,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAIlB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,uBAAuB,GAAI,sBAGrC,iBAAiB,CAAC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC,sBAQnE,CAAA;AAwID,eAAO,MAAM,uBAAuB,kGAA0C,CAAA"}

package/lib/typescript/components/form/input/number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/number/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AACpG,OAAO,KAA0E,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAKxC,eAAO,MAAM,eAAe;aAA6D,MAAM;kCAiD9F,CAAA;AAmBD,eAAO,MAAM,uBAAuB,kGAEnC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/number/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAqC,MAAM,gBAAgB,CAAA;AACpG,OAAO,KAA0E,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAKxC,eAAO,MAAM,eAAe;aAA6D,MAAM;kCAiE9F,CAAA;AAmBD,eAAO,MAAM,uBAAuB,kGAEnC,CAAA"}

package/lib/typescript/components/form/input/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,WAAW,EAKZ,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAgE,MAAM,OAAO,CAAA;AAIpF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAiHxC,eAAO,MAAM,eAAe,0FAAkC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2B,MAAM,eAAe,CAAA;AACjE,OAAO,EACL,WAAW,EAMZ,MAAM,gBAAgB,CAAA;AAEvB,OAAO,KAAgE,MAAM,OAAO,CAAA;AAIpF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA4HxC,eAAO,MAAM,eAAe,0FAAkC,CAAA"}

package/lib/typescript/components/form/input/text/AutoResizeTextarea.d.ts

@@ -0,0 +1,4 @@
+import { TextInput, TextInputProps } from 'react-native';
+import React from 'react';
+export declare const AutoResizeTextarea: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<TextInput>>;
+//# sourceMappingURL=AutoResizeTextarea.d.ts.map

package/lib/typescript/components/form/input/text/AutoResizeTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoResizeTextarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/AutoResizeTextarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAIpE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,kBAAkB,kFAuB9B,CAAA"}

package/lib/typescript/components/form/input/text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAE7E,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,aAAa,wFA8CzB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAE7E,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,aAAa,wFA+DzB,CAAA"}

package/lib/typescript/components/form/input/text/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAC7E,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,eAAO,MAAM,iBAAiB,wFAmC7B,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAA;AAC7E,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,eAAO,MAAM,iBAAiB,wFAiC7B,CAAA"}

package/lib/typescript/components/form/input/text/useWebAutoResize.d.ts

@@ -0,0 +1,8 @@
+import { StyleProp, TextStyle } from 'react-native';
+export declare const useWebAutoResize: (onChangeText: ((e: string) => void) | undefined, style: StyleProp<TextStyle> | undefined) => {
+    getWebTextHeight: (text: string, spanRef: React.RefObject<HTMLSpanElement | null>) => number | null;
+    handleChange: ((e: string) => void) | undefined;
+    height: number;
+    setHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
+};
+//# sourceMappingURL=useWebAutoResize.d.ts.map

package/lib/typescript/components/form/input/text/useWebAutoResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebAutoResize.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/text/useWebAutoResize.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AAmCzE,eAAO,MAAM,gBAAgB,GAC3B,cAAc,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,EAC/C,OAAO,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS;6BAlCT,MAAM,WAAW,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;uBAiCnE,MAAM,KAAK,IAAI;;;CAkCnC,CAAA"}

package/lib/typescript/components/form/types.d.ts

@@ -1,4 +1,4 @@
 import { BaseFieldProps, Field } from '@chem-po/react';
-import { StyleProp } from 'react-native';
-export type FieldProps<T extends Field> = BaseFieldProps<StyleProp<any>, T>;
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type FieldProps<T extends Field, ContainerStyle extends ViewStyle = ViewStyle, InputStyle extends TextStyle = TextStyle> = BaseFieldProps<StyleProp<ContainerStyle>, StyleProp<InputStyle>, T>;
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/components/form/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,IAAI,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/form/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE9D,MAAM,MAAM,UAAU,CACpB,CAAC,SAAS,KAAK,EACf,cAAc,SAAS,SAAS,GAAG,SAAS,EAC5C,UAAU,SAAS,SAAS,GAAG,SAAS,IACtC,cAAc,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAA"}

package/lib/typescript/contexts/root.d.ts

@@ -1,9 +1,12 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core';
 import { ChempoProps } from '@chem-po/react';
 import React, { PropsWithChildren } from 'react';
+import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types';
+export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
     theme?: Theme;
+    fonts?: FontConfig;
     initialColorMode?: ColorMode;
 }
-export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface<any, any, any, any, any, any>>({ theme: themeProp, initialColorMode, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
+export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface<any, any, any, any, any, any>>({ theme: themeProp, initialColorMode, children, fonts, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
 //# sourceMappingURL=root.d.ts.map

package/lib/typescript/contexts/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AASzD,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AACD,eAAO,MAAM,oBAAoB,GAC/B,cAAc,SAAS,uBAAuB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC5E,kDAIC,yBAAyB,CAAC,cAAc,CAAC,sBAgB3C,CAAA"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAA4B,MAAM,gBAAgB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAIzD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAA;AAOlF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3E,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AA4FD,eAAO,MAAM,oBAAoB,GAC/B,cAAc,SAAS,uBAAuB,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC5E,mEAMC,yBAAyB,CAAC,cAAc,CAAC,sBAiB3C,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -51,8 +51,8 @@
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.27",
-    "@chem-po/react": "0.0.27"
+    "@chem-po/core": "0.0.29",
+    "@chem-po/react": "0.0.29"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/components/form/input/Editable.tsx

@@ -13,8 +13,6 @@ import { LoadingOverlay } from '../../loading/LoadingOverlay'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
 import { StandaloneInput } from './StandaloneInput'
-import { InputClearButton } from './common/InputClearButton'
-import { useInputStyles } from './hooks/useInputStyles'
 
 export const Editable = <T extends Field>({
   value: initValue,
@@ -89,17 +87,8 @@ export const Editable = <T extends Field>({
   }, [isEditing, inputRef])
 
   const iconColor = useIconColor()
-  const { clearButtonSize } = useInputStyles(true, field.size, size)
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
-  const submitColor = useThemeValue('colors.accent.200')
-
-  const needsClearButton = useMemo(() => {
-    if (!field.optional) return false
-    switch (field._type) {
-      case 'select':
-        return true
-    }
-  }, [field])
+  const submitColor = useThemeValue('colors.accent.600')
 
   const handleBlur = useCallback(() => {
     switch (field._type) {
@@ -117,7 +106,7 @@ export const Editable = <T extends Field>({
   const editableField = useMemo(
     () => ({
       ...field,
-      optional: false,
+      // optional: false,
     }),
     [field],
   )
@@ -147,42 +136,36 @@ export const Editable = <T extends Field>({
               inEditable
               field={editableField}
               style={style}
+              size={size}
               onChange={shouldSubmitOnChange ? v => submitValue(v) : setValue}
               onBlur={handleBlur}
             />
           ) : (
-            <FieldView noLabel style={style} field={field} value={value} />
+            <FieldView noLabel style={style} size={size} field={field} value={value} />
           )}
         </View>
         {!alwaysEditing && (
           <View style={styles.buttonsContainer}>
-            {needsClearButton ? (
-              <InputClearButton
-                size={clearButtonSize}
+            {isEditing ? null : (
+              <TouchableOpacity
+                style={styles.editButton}
                 onPress={() => {
-                  submitValue(null)
+                  handleEditOpen()
                 }}
-                isActive={!!value}
-              />
-            ) : null}
-            {noCloseButton && isEditing ? null : (
+                onPressIn={() => setEditHovered(true)}
+                onPressOut={() => setEditHovered(false)}>
+                <Ionicons name="create-outline" size={20} color={iconColor} />
+              </TouchableOpacity>
+            )}
+            {noCloseButton || !isEditing ? null : (
               <TouchableOpacity
                 style={styles.editButton}
                 onPress={() => {
-                  if (isEditing) {
-                    setValue(value)
-                    handleEditClose()
-                  } else {
-                    handleEditOpen()
-                  }
+                  handleEditClose()
                 }}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
-                <Ionicons
-                  name={isEditing ? 'close' : 'create-outline'}
-                  size={20}
-                  color={iconColor}
-                />
+                <Ionicons name="close" size={20} color={iconColor} />
               </TouchableOpacity>
             )}
             <View

package/src/components/form/input/StandaloneInput.tsx

@@ -1,22 +1,42 @@
-import { InputRef } from '@chem-po/core'
+import { InputRef, InputSize } from '@chem-po/core'
 import { Field, useStandaloneInput } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef } from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 import { Input } from './input'
 
-interface StandaloneInputProps {
+interface StandaloneInputProps<
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+> {
   onChange: (v?: any) => void
   value?: any
-  field: Field
+  field: T
   onBlur?: () => void
   onFocus?: () => void
   theme?: 'basic' | 'detailed'
   inEditable?: boolean
-  style?: StyleProp<ViewStyle>
+  style?: StyleProp<ContainerStyle>
+  inputStyle?: StyleProp<InputStyle>
+  size?: InputSize
 }
 
-const StandaloneInputBase = (
-  { onChange, value, field, onBlur, inEditable, onFocus, style }: StandaloneInputProps,
+const StandaloneInputBase = <
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+>(
+  {
+    onChange,
+    value,
+    field,
+    onBlur,
+    inEditable,
+    onFocus,
+    style,
+    size,
+    inputStyle,
+  }: StandaloneInputProps<T, ContainerStyle, InputStyle>,
   ref: ForwardedRef<InputRef>,
 ) => {
   const { inputProps, meta } = useStandaloneInput(field, value, onChange, onFocus, onBlur)
@@ -28,6 +48,8 @@ const StandaloneInputBase = (
       inEditable={inEditable}
       style={style}
       input={inputProps}
+      inputStyle={inputStyle}
+      formSize={size}
       meta={meta}
     />
   )

package/src/components/form/input/hooks/useInputStyles.ts

@@ -110,7 +110,7 @@ export const useInputStyles = (
   const textColor = useTextColor()
   const usedSize = size ?? formSize
   return {
-    text: { ...inputTextSizeMap[usedSize], color: textColor },
+    text: { ...inputTextSizeMap[usedSize], color: textColor, outlineWidth: 0 },
     container: {
       ...inputStyles.input,
       ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),

package/src/components/form/input/multipleSelect/index.tsx

@@ -30,7 +30,12 @@ export const SelectedOptionContainer = ({
   style,
 }: PropsWithChildren<{ key?: string; style?: StyleProp<ViewStyle> }>) => {
   const borderColor = useBorderColor()
-  return <View style={[styles.selectedOption, { borderColor }, style]}>{children}</View>
+  const bg = useBackgroundColor(100)
+  return (
+    <View style={[styles.selectedOption, { borderColor, backgroundColor: bg }, style]}>
+      {children}
+    </View>
+  )
 }
 
 const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
@@ -55,7 +60,8 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
   const textColor = useTextColor()
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
-  const selectedOptionBg = useColorModeValue('#ffffff77', '#ffffff15')
+  const inputBg = useBackgroundColor(50)
+  const selectedOptionBg = useColorModeValue('#ffffff55', '#ffffff22')
   const borderColor = useBorderColor()
 
   useImperativeHandle(ref, () => ({
@@ -102,8 +108,8 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         ref={inputRef}
         style={[inputStyles, { borderColor }]}
         placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
-        containerStyle={{ backgroundColor: menuBg }}
-        inputSearchStyle={[styles.inputSearch, text]}
+        containerStyle={{ backgroundColor: menuBg, boxShadow: `0 0 10px ${borderColor}` }}
+        inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
         iconStyle={styles.iconStyle}
         data={options}
         search={searchable}
@@ -117,18 +123,19 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         onChange={updated => {
           onChange(updated)
         }}
-        activeColor={selectedOptionBg}
         onFocus={onFocus}
         onBlur={onBlur}
         renderItem={(item, selected) => (
-          <View style={{ backgroundColor: selected ? selectedOptionBg : menuBg }}>
-            <RenderOptionText
-              value={item.value}
-              option={item}
-              colorMode={colorMode}
-              isSelected={!!selected}
-              size={size}
-            />
+          <View style={{ backgroundColor: menuBg }}>
+            <View style={{ backgroundColor: selected ? selectedOptionBg : 'transparent' }}>
+              <RenderOptionText
+                value={item.value}
+                option={item}
+                colorMode={colorMode}
+                isSelected={!!selected}
+                size={size}
+              />
+            </View>
           </View>
         )}
         renderSelectedItem={item => (
@@ -140,11 +147,7 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
               isSelected
               size={size}
             />
-            <View
-              style={[
-                styles.optionClearContainer,
-                { borderColor, backgroundColor: selectedOptionBg },
-              ]}>
+            <View style={[styles.optionClearContainer, { borderColor }]}>
               <InputClearButton
                 size={clearButtonSize}
                 onPress={() => {
@@ -183,10 +186,10 @@ const styles = StyleSheet.create({
     height: 20,
   },
   inputSearch: {
-    outlineWidth: 0,
     paddingVertical: 4,
     minHeight: 0,
     height: 'auto',
+    outlineWidth: 0,
     fontSize: 16,
   },
   selectedOption: {

package/src/components/form/input/number/index.tsx

@@ -8,10 +8,25 @@ import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
 import { useInputStyles } from '../hooks/useInputStyles'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, prefix, inEditable, style, formSize }, ref) => {
+  (
+    {
+      input: { onChange, value, ...input },
+      inputStyle,
+      field,
+      prefix,
+      inEditable,
+      style,
+      formSize,
+    },
+    ref,
+  ) => {
     const { type, defaultValue, placeholder, size } = field
     const color = useTextColor()
-    const { container: inputStyles } = useInputStyles(inEditable, size, formSize)
+    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
+      inEditable,
+      size,
+      formSize,
+    )
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
@@ -22,6 +37,7 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
       return (
         <InputSlider
           label={placeholder}
+          style={style}
           onValueChange={onChange}
           value={value}
           minimumValue={defaultValue}
@@ -30,11 +46,11 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
     }
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, conatinerStyles, style]}>
         {prefix && <Text style={styles.prefix}>{prefix}</Text>}
         <TextInput
           ref={inputRef}
-          style={[inputStyles, { color }, style]}
+          style={[inputStyles, { color, outlineWidth: 0 }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           keyboardType="numeric"