@draftbit/core 43.4.10 → 43.4.11-143169.1

package/lib/module/components/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["NumberInput.tsx"],"names":["React","useEffect","useState","TextInput","isString","isNumber","isNaN","NumberInput","onChangeText","value","defaultValue","props","formatValueToStringNumber","valueToFormat","currentStringNumberValue","test","slice","toString","setCurrentStringNumberValue","handleChangeText","newValue","newStringNumberValue","number","parseFloat","defaultStringNumberValue","nextStringNumberValue"],"mappings":";;AAAA,OAAOA,KAAP,IAAoBC,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,KAA7B,QAA0C,QAA1C;;AAQA,MAAMC,WAAsB,GAAG,QAKzB;AAAA,MAL0B;AAC9BC,IAAAA,YAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,YAH8B;AAI9B,OAAGC;AAJ2B,GAK1B;;AACJ,QAAMC,yBAAyB,GAAG,CAChCC,aADgC,EAEhCC,wBAFgC,KAG7B;AACH,QAAID,aAAa,IAAI,IAArB,EAA2B;AACzB,UAAIT,QAAQ,CAACS,aAAD,CAAR,IAA2BA,aAAa,KAAK,EAAjD,EAAqD;AACnD,YAAI,WAAWE,IAAX,CAAgBF,aAAhB,CAAJ,EAAoC;AAClC,iBAAOA,aAAa,CAACG,KAAd,CAAoB,CAApB,CAAP;AACD,SAFD,MAEO,IAAI,oCAAoCD,IAApC,CAAyCF,aAAzC,CAAJ,EAA6D;AAClE,iBAAOA,aAAP;AACD,SAFM,MAEA,IAAIC,wBAAJ,EAA8B;AACnC,iBAAOA,wBAAP;AACD;AACF,OARD,MAQO,IAAIT,QAAQ,CAACQ,aAAD,CAAR,IAA2B,CAACP,KAAK,CAACO,aAAD,CAArC,EAAsD;AAC3D,eAAOA,aAAa,CAACI,QAAd,EAAP;AACD;AACF;;AAED,WAAO,GAAP;AACD,GAnBD;;AAqBA,QAAM,CAACH,wBAAD,EAA2BI,2BAA3B,IAA0DhB,QAAQ,CACtEU,yBAAyB,CAAC,GAAD,CAD6C,CAAxE;;AAIA,QAAMO,gBAAgB,GAAIC,QAAD,IAAsB;AAC7C,UAAMC,oBAAoB,GAAGT,yBAAyB,CACpDQ,QADoD,EAEpDN,wBAFoD,CAAtD;AAIA,UAAMQ,MAAM,GAAGC,UAAU,CAACF,oBAAD,CAAzB;AAEAH,IAAAA,2BAA2B,CAACG,oBAAD,CAA3B;AACAb,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGc,MAAH,CAAZ;AACD,GATD;AAWA;AACF;;;AACErB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMuB,wBAAwB,GAAGZ,yBAAyB,CACxDF,YADwD,EAExDI,wBAFwD,CAA1D;;AAKA,QAAIA,wBAAwB,KAAKU,wBAAjC,EAA2D;AACzDN,MAAAA,2BAA2B,CAACM,wBAAD,CAA3B;AACD,KARa,CASd;;AACD,GAVQ,EAUN,EAVM,CAAT,CAvCI,CAmDJ;;AACAvB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMwB,qBAAqB,GAAGb,yBAAyB,CACrDH,KADqD,EAErDK,wBAFqD,CAAvD;;AAKA,QAAIA,wBAAwB,KAAKW,qBAAjC,EAAwD;AACtDN,MAAAA,gBAAgB,CAACM,qBAAD,CAAhB;AACD,KARa,CASd;;AACD,GAVQ,EAUN,CAAChB,KAAD,CAVM,CAAT;AAYA,sBACE,oBAAC,SAAD;AACE,IAAA,YAAY,EAAC,SADf;AAEE,IAAA,KAAK,EAAEK,wBAFT;AAGE,IAAA,YAAY,EAAEK;AAHhB,KAIMR,KAJN,EADF;AAQD,CA7ED;;AA+EA,eAAeJ,WAAf","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { TextInput } from \"react-native\";\nimport { isString, isNumber, isNaN } from \"lodash\";\n\ninterface Props {\n  value?: number | string;\n  defaultValue?: number | string;\n  onChangeText?: (value?: number) => void;\n}\n\nconst NumberInput: FC<Props> = ({\n  onChangeText,\n  value,\n  defaultValue,\n  ...props\n}) => {\n  const formatValueToStringNumber = (\n    valueToFormat?: number | string,\n    currentStringNumberValue?: string\n  ) => {\n    if (valueToFormat != null) {\n      if (isString(valueToFormat) && valueToFormat !== \"\") {\n        if (/^0[1-9]$/.test(valueToFormat)) {\n          return valueToFormat.slice(1);\n        } else if (/^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$/.test(valueToFormat)) {\n          return valueToFormat;\n        } else if (currentStringNumberValue) {\n          return currentStringNumberValue;\n        }\n      } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {\n        return valueToFormat.toString();\n      }\n    }\n\n    return \"0\";\n  };\n\n  const [currentStringNumberValue, setCurrentStringNumberValue] = useState(\n    formatValueToStringNumber(\"0\")\n  );\n\n  const handleChangeText = (newValue: string) => {\n    const newStringNumberValue = formatValueToStringNumber(\n      newValue,\n      currentStringNumberValue\n    );\n    const number = parseFloat(newStringNumberValue);\n\n    setCurrentStringNumberValue(newStringNumberValue);\n    onChangeText?.(number);\n  };\n\n  /* set currentStringNumberValue directly to defaultValue if it exists on load\n  ( no need to use TextInput's defaultValue because its value is always controlled & set ) */\n  useEffect(() => {\n    const defaultStringNumberValue = formatValueToStringNumber(\n      defaultValue,\n      currentStringNumberValue\n    );\n\n    if (currentStringNumberValue !== defaultStringNumberValue) {\n      setCurrentStringNumberValue(defaultStringNumberValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // set new (or original) value if different from current (or initialized \"0\") value\n  useEffect(() => {\n    const nextStringNumberValue = formatValueToStringNumber(\n      value,\n      currentStringNumberValue\n    );\n\n    if (currentStringNumberValue !== nextStringNumberValue) {\n      handleChangeText(nextStringNumberValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return (\n    <TextInput\n      keyboardType=\"numeric\"\n      value={currentStringNumberValue}\n      onChangeText={handleChangeText}\n      {...props}\n    />\n  );\n};\n\nexport default NumberInput;\n"]}
+{"version":3,"sources":["NumberInput.tsx"],"names":["React","useEffect","useState","TextInput","isString","isNumber","isNaN","NumberInput","onChangeText","value","defaultValue","props","currentStringNumberValue","setCurrentStringNumberValue","formatValueToStringNumber","valueToFormat","test","slice","toString","defaultStringNumberValue","handleChangeText","newValue","newStringNumberValue","number","parseFloat","nextStringNumberValue"],"mappings":";;AAAA,OAAOA,KAAP,IAAoBC,SAApB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,KAA7B,QAA0C,QAA1C;;AAQA,MAAMC,WAAsB,GAAG,QAKzB;AAAA,MAL0B;AAC9BC,IAAAA,YAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,YAH8B;AAI9B,OAAGC;AAJ2B,GAK1B;AACJ,QAAM,CAACC,wBAAD,EAA2BC,2BAA3B,IAA0DX,QAAQ,CAAC,GAAD,CAAxE;;AAEA,QAAMY,yBAAyB,GAAIC,aAAD,IAAqC;AACrE,QAAIA,aAAa,IAAI,IAArB,EAA2B;AACzB,UAAIX,QAAQ,CAACW,aAAD,CAAR,IAA2BA,aAAa,KAAK,EAAjD,EAAqD;AACnD,YAAI,WAAWC,IAAX,CAAgBD,aAAhB,CAAJ,EAAoC;AAClC,iBAAOA,aAAa,CAACE,KAAd,CAAoB,CAApB,CAAP;AACD,SAFD,MAEO,IAAI,oCAAoCD,IAApC,CAAyCD,aAAzC,CAAJ,EAA6D;AAClE,iBAAOA,aAAP;AACD,SAFM,MAEA;AACL,iBAAOH,wBAAP;AACD;AACF,OARD,MAQO,IAAIP,QAAQ,CAACU,aAAD,CAAR,IAA2B,CAACT,KAAK,CAACS,aAAD,CAArC,EAAsD;AAC3D,eAAOA,aAAa,CAACG,QAAd,EAAP;AACD;AACF;;AAED,WAAO,GAAP;AACD,GAhBD,CAHI,CAqBJ;;;AACAjB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMkB,wBAAwB,GAAGL,yBAAyB,CAACJ,YAAD,CAA1D;;AAEA,QAAIE,wBAAwB,KAAKO,wBAAjC,EAA2D;AACzDN,MAAAA,2BAA2B,CAACM,wBAAD,CAA3B;AACD,KALa,CAMd;;AACD,GAPQ,EAON,EAPM,CAAT;;AASA,QAAMC,gBAAgB,GAAIC,QAAD,IAAsB;AAC7C,UAAMC,oBAAoB,GAAGR,yBAAyB,CAACO,QAAD,CAAtD;AACA,UAAME,MAAM,GAAGC,UAAU,CAACF,oBAAD,CAAzB;AAEAT,IAAAA,2BAA2B,CAACS,oBAAD,CAA3B;AACAd,IAAAA,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAGe,MAAH,CAAZ;AACD,GAND,CA/BI,CAuCJ;;;AACAtB,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMwB,qBAAqB,GAAGX,yBAAyB,CAACL,KAAD,CAAvD;;AAEA,QAAIG,wBAAwB,KAAKa,qBAAjC,EAAwD;AACtDL,MAAAA,gBAAgB,CAACK,qBAAD,CAAhB;AACD,KALa,CAMd;;AACD,GAPQ,EAON,CAAChB,KAAD,CAPM,CAAT;AASA,sBACE,oBAAC,SAAD;AACE,IAAA,YAAY,EAAC,SADf;AAEE,IAAA,KAAK,EAAEG,wBAFT;AAGE,IAAA,YAAY,EAAEQ;AAHhB,KAIMT,KAJN,EADF;AAQD,CA9DD;;AAgEA,eAAeJ,WAAf","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { TextInput } from \"react-native\";\nimport { isString, isNumber, isNaN } from \"lodash\";\n\ninterface Props {\n  value?: number | string;\n  defaultValue?: number | string;\n  onChangeText?: (value?: number) => void;\n}\n\nconst NumberInput: FC<Props> = ({\n  onChangeText,\n  value,\n  defaultValue,\n  ...props\n}) => {\n  const [currentStringNumberValue, setCurrentStringNumberValue] = useState(\"0\");\n\n  const formatValueToStringNumber = (valueToFormat?: number | string) => {\n    if (valueToFormat != null) {\n      if (isString(valueToFormat) && valueToFormat !== \"\") {\n        if (/^0[1-9]$/.test(valueToFormat)) {\n          return valueToFormat.slice(1);\n        } else if (/^[+-]?([0-9]+\\.?[0-9]*|\\.[0-9]+)$/.test(valueToFormat)) {\n          return valueToFormat;\n        } else {\n          return currentStringNumberValue;\n        }\n      } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {\n        return valueToFormat.toString();\n      }\n    }\n\n    return \"0\";\n  };\n\n  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only\n  useEffect(() => {\n    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);\n\n    if (currentStringNumberValue !== defaultStringNumberValue) {\n      setCurrentStringNumberValue(defaultStringNumberValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChangeText = (newValue: string) => {\n    const newStringNumberValue = formatValueToStringNumber(newValue);\n    const number = parseFloat(newStringNumberValue);\n\n    setCurrentStringNumberValue(newStringNumberValue);\n    onChangeText?.(number);\n  };\n\n  // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)\n  useEffect(() => {\n    const nextStringNumberValue = formatValueToStringNumber(value);\n\n    if (currentStringNumberValue !== nextStringNumberValue) {\n      handleChangeText(nextStringNumberValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return (\n    <TextInput\n      keyboardType=\"numeric\"\n      value={currentStringNumberValue}\n      onChangeText={handleChangeText}\n      {...props}\n    />\n  );\n};\n\nexport default NumberInput;\n"]}

package/lib/module/components/ResizeMode.js

@@ -1,2 +1,2 @@
 
-//# sourceMappingURL=ResizeMode.js.map
+//# sourceMappingURL=ResizeMode.js.mapode.js.map

package/lib/module/mappings/Icon.js

@@ -6,7 +6,9 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.basic,
   layout: {},
   props: {
-    name: createIconProp(),
+    name: { ...createIconProp(),
+      group: GROUPS.data
+    },
     color: createColorProp(),
     size: createNumberProp({
       group: GROUPS.basic,

package/lib/module/mappings/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Icon.ts"],"names":["COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createIconProp","SEED_DATA","name","tag","description","category","basic","layout","props","color","size","group","label","defaultValue","min","max","step","precision"],"mappings":"AAAA,SACEA,eADF,EAEEC,MAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,GAAG,EAAE,MAFkB;AAGvBC,EAAAA,WAAW,EAAE,SAHU;AAIvBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,KAJH;AAKvBC,EAAAA,MAAM,EAAE,EALe;AAMvBC,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAEF,cAAc,EADf;AAELS,IAAAA,KAAK,EAAEV,eAAe,EAFjB;AAGLW,IAAAA,IAAI,EAAEZ,gBAAgB,CAAC;AACrBa,MAAAA,KAAK,EAAEd,MAAM,CAACS,KADO;AAErBM,MAAAA,KAAK,EAAE,MAFc;AAGrBR,MAAAA,WAAW,EAAE,+BAHQ;AAIrBS,MAAAA,YAAY,EAAE,EAJO;AAKrBC,MAAAA,GAAG,EAAE,EALgB;AAMrBC,MAAAA,GAAG,EAAE,GANgB;AAOrBC,MAAAA,IAAI,EAAE,CAPe;AAQrBC,MAAAA,SAAS,EAAE;AARU,KAAD;AAHjB;AANgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createIconProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Icon\",\n  tag: \"Icon\",\n  description: \"An icon\",\n  category: COMPONENT_TYPES.basic,\n  layout: {},\n  props: {\n    name: createIconProp(),\n    color: createColorProp(),\n    size: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Size\",\n      description: \"Width and height of your icon\",\n      defaultValue: 24,\n      min: 16,\n      max: 128,\n      step: 1,\n      precision: 0,\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["Icon.ts"],"names":["COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createIconProp","SEED_DATA","name","tag","description","category","basic","layout","props","group","data","color","size","label","defaultValue","min","max","step","precision"],"mappings":"AAAA,SACEA,eADF,EAEEC,MAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,GAAG,EAAE,MAFkB;AAGvBC,EAAAA,WAAW,EAAE,SAHU;AAIvBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,KAJH;AAKvBC,EAAAA,MAAM,EAAE,EALe;AAMvBC,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,EACJ,GAAGF,cAAc,EADb;AAEJS,MAAAA,KAAK,EAAEZ,MAAM,CAACa;AAFV,KADD;AAKLC,IAAAA,KAAK,EAAEZ,eAAe,EALjB;AAMLa,IAAAA,IAAI,EAAEd,gBAAgB,CAAC;AACrBW,MAAAA,KAAK,EAAEZ,MAAM,CAACS,KADO;AAErBO,MAAAA,KAAK,EAAE,MAFc;AAGrBT,MAAAA,WAAW,EAAE,+BAHQ;AAIrBU,MAAAA,YAAY,EAAE,EAJO;AAKrBC,MAAAA,GAAG,EAAE,EALgB;AAMrBC,MAAAA,GAAG,EAAE,GANgB;AAOrBC,MAAAA,IAAI,EAAE,CAPe;AAQrBC,MAAAA,SAAS,EAAE;AARU,KAAD;AANjB;AANgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createIconProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Icon\",\n  tag: \"Icon\",\n  description: \"An icon\",\n  category: COMPONENT_TYPES.basic,\n  layout: {},\n  props: {\n    name: {\n      ...createIconProp(),\n      group: GROUPS.data,\n    },\n    color: createColorProp(),\n    size: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Size\",\n      description: \"Width and height of your icon\",\n      defaultValue: 24,\n      min: 16,\n      max: 128,\n      step: 1,\n      precision: 0,\n    }),\n  },\n};\n"]}

package/lib/typescript/src/mappings/Icon.d.ts

@@ -6,6 +6,7 @@ export declare const SEED_DATA: {
     layout: {};
     props: {
         name: {
+            group: string;
             label: string;
             description: string;
             formType: string;
@@ -13,7 +14,6 @@ export declare const SEED_DATA: {
             defaultValue: string;
             required: boolean;
             editable: boolean;
-            group: string;
         };
         color: {
             group: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.10",
+  "version": "43.4.11-143169.1+14316984",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "43019491b3205ed9caa1f3cf2a04ebd64c0afefa"
+  "gitHead": "143169844134d6f56b45c9017522d3143cad9743"
 }

package/src/Provider.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { ThemeProvider } from "./theming";
+import PortalHost from "./components/Portal/PortalHost";
+export default class Provider extends React.Component {
+    render() {
+        return (React.createElement(PortalHost, null,
+            React.createElement(ThemeProvider, { theme: this.props.theme }, this.props.children)));
+    }
+}

package/src/components/Accordion/AccordionGroup.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { View, StyleSheet, Pressable, } from "react-native";
+import Text from "../Text";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
+const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSize = 24, style, label, children, expanded: expandedProp, theme, }) => {
+    const [expanded, setExpanded] = React.useState(expandedProp || false);
+    const handlePressAction = () => {
+        setExpanded(!expanded);
+    };
+    const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
+    const expandedColor = openColor || theme.colors.primary;
+    const collapsedColor = closedColor || theme.colors.primary;
+    const labelColor = expanded ? expandedColor : collapsedColor;
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
+            icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
+            React.createElement(View, { style: styles.content },
+                React.createElement(Text, { selectable: false, style: [
+                        {
+                            color: labelColor,
+                        },
+                        textStyles,
+                    ] }, label)),
+            React.createElement(Icon, { name: expanded
+                    ? "MaterialIcons/keyboard-arrow-up"
+                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })),
+        expandedInternal ? children : null));
+};
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    content: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    icon: {
+        marginRight: 8,
+    },
+});
+export default withTheme(AccordionGroup);

package/src/components/Accordion/AccordionItem.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Pressable, StyleSheet, View, } from "react-native";
+import Text from "../Text";
+import { extractStyles } from "../../utilities";
+import { withTheme } from "../../theming";
+const AccordionItem = ({ Icon, icon, label, style, iconColor, theme, ...rest }) => {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Pressable, { style: [styles.container, viewStyles], ...rest },
+        React.createElement(View, { style: styles.row },
+            icon ? (React.createElement(Icon, { name: icon, size: 24, color: iconColor || theme.colors.primary })) : null,
+            React.createElement(View, { style: [styles.item, styles.content] },
+                React.createElement(Text, { selectable: false, style: textStyles }, label)))));
+};
+const styles = StyleSheet.create({
+    container: {
+        padding: 8,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingLeft: 8,
+    },
+    item: {
+        marginVertical: 6,
+        paddingLeft: 8,
+    },
+    content: {
+        flex: 1,
+        justifyContent: "center",
+    },
+});
+export default withTheme(AccordionItem);

package/src/components/Accordion/index.js

@@ -0,0 +1,2 @@
+export { default as AccordionGroup } from "./AccordionGroup";
+export { default as AccordionItem } from "./AccordionItem";

package/src/components/ActionSheet/ActionSheet.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import ActionSheetCancel from "./ActionSheetCancel";
+const ActionSheet = ({ visible = false, onClose, children }) => {
+    return visible ? (React.createElement(Portal, null,
+        React.createElement(Touchable, { style: styles.wrapper, onPress: onClose },
+            React.createElement(View, { style: styles.overlay }),
+            React.createElement(View, { style: styles.groupWrapper },
+                React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child?.type !== ActionSheetCancel)),
+                React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child.type === ActionSheetCancel)))))) : (React.createElement(React.Fragment, null));
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+    },
+    overlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#000000",
+        opacity: 0.3,
+    },
+    groupWrapper: {
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "flex-end",
+        display: "flex",
+        marginBottom: 25,
+    },
+    group: {
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 10,
+        marginHorizontal: 7,
+        marginVertical: 2.5,
+        overflow: "hidden",
+    },
+});
+export default ActionSheet;

package/src/components/ActionSheet/ActionSheetCancel.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ActionSheetItem from "./ActionSheetItem";
+const ActionSheetCancel = ({ label = "Cancel", color, style, onPress, }) => {
+    return (React.createElement(ActionSheetItem, { label: label, color: color || "#FF453A", style: [style], onPress: onPress }));
+};
+export default ActionSheetCancel;

package/src/components/ActionSheet/ActionSheetItem.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Text, StyleSheet, TouchableOpacity, } from "react-native";
+import { extractStyles } from "../../utilities";
+const ActionSheetItem = ({ label, style, color, onPress }) => {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },
+        React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: "#CCCCCC",
+        backgroundColor: "#F1F1F1",
+        minHeight: 50,
+        overflow: "hidden",
+        display: "flex",
+        justifyContent: "center",
+    },
+    label: {
+        fontSize: 16,
+        textAlign: "center",
+        color: "#0A84FF",
+        fontWeight: "500",
+        overflow: "hidden",
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        alignSelf: "center",
+    },
+});
+export default ActionSheetItem;

package/src/components/ActionSheet/index.js

@@ -0,0 +1,3 @@
+export { default as ActionSheet } from "./ActionSheet";
+export { default as ActionSheetItem } from "./ActionSheetItem";
+export { default as ActionSheetCancel } from "./ActionSheetCancel";

package/src/components/AnimatedCircularProgress.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Animated, Easing, } from "react-native";
+import CircularProgress from "./CircularProgress";
+const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
+const AnimatedCircularProgress = ({ duration = 500, easing = Easing.out(Easing.ease), fill, prefill = 0, useNativeDriver = false, tintColorSecondary, onAnimationComplete, tintColor = "black", ...other }) => {
+    const [fillAnimation] = React.useState(new Animated.Value(prefill));
+    const animate = React.useCallback((toVal = -1, dur, ease) => {
+        const toValue = toVal >= 0 ? toVal : fill;
+        const dura = dur || duration;
+        const eas = ease || easing;
+        const useNative = useNativeDriver;
+        const anim = Animated.timing(fillAnimation, {
+            useNativeDriver: useNative,
+            toValue,
+            easing: eas,
+            duration: dura,
+        });
+        anim.start(onAnimationComplete);
+        return anim;
+    }, [
+        duration,
+        easing,
+        fill,
+        useNativeDriver,
+        fillAnimation,
+        onAnimationComplete,
+    ]);
+    const animateColor = () => {
+        if (!tintColorSecondary) {
+            return tintColor;
+        }
+        const tintAnimation = fillAnimation.interpolate({
+            inputRange: [0, 100],
+            outputRange: [tintColor, tintColorSecondary],
+        });
+        return tintAnimation;
+    };
+    React.useEffect(() => {
+        animate();
+    }, [fill, animate]);
+    return (React.createElement(AnimatedProgress, { ...other, style: other.style, childrenContainerStyle: other.childrenContainerStyle, fill: fillAnimation, tintColor: animateColor() }));
+};
+export default AnimatedCircularProgress;

package/src/components/AspectRatio.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { View, StyleSheet, } from "react-native";
+const AspectRatio = (props) => {
+    const [layout, setLayout] = React.useState(null);
+    const { aspectRatio = 1, ...inputStyle } = StyleSheet.flatten(props.style) || {};
+    const style = [inputStyle, { aspectRatio }];
+    if (layout) {
+        const { width = 0, height = 0 } = layout;
+        if (width === 0) {
+            style.push({ width: height * (1 / aspectRatio), height });
+        }
+        else {
+            style.push({ width, height: width * (1 / aspectRatio) });
+        }
+    }
+    return (React.createElement(View, { ...props, style: style, onLayout: ({ nativeEvent: { layout: l } }) => setLayout(l) }, props.children));
+};
+export default AspectRatio;

package/src/components/AvatarEdit.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { View } from "react-native";
+import Touchable from "./Touchable";
+import CircleImage from "./CircleImage";
+import { withTheme } from "../theming";
+const AvatarEdit = ({ Icon, image, size = 80, onPress = () => { }, style, theme, ...rest }) => {
+    const colorStyles = {
+        editBackgroundColor: theme.colors.primary,
+        editIconColor: theme.colors.surface,
+        editBorderColor: theme.colors.surface,
+    };
+    const dimensions = {
+        width: size,
+        height: size,
+    };
+    return (React.createElement(View, { style: [style, dimensions], ...rest },
+        React.createElement(Touchable, { onPress: onPress },
+            React.createElement(CircleImage, { source: image, size: size }),
+            React.createElement(View, { style: {
+                    position: "absolute",
+                    top: -3,
+                    right: -3,
+                    borderColor: colorStyles.editBorderColor,
+                    backgroundColor: colorStyles.editBackgroundColor,
+                    borderRadius: size * (3 / 16),
+                    padding: size * (3 / 32),
+                } },
+                React.createElement(Icon, { name: "MaterialIcons/edit", color: colorStyles.editIconColor, size: size * (3 / 16) })))));
+};
+export default withTheme(AvatarEdit);

package/src/components/Button.js

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { Text, Pressable, Platform, StyleSheet, ActivityIndicator, } from "react-native";
+import { withTheme } from "../theming";
+const CONSTANTS = {
+    baseHeight: 42,
+    borderRadius: 4,
+    padding: 8,
+    icon: 24,
+};
+function Base({ Icon, icon, title, onPress, loading, disabled, style, ...props }) {
+    const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...buttonStyles } = StyleSheet.flatten(style || {});
+    const titleStyles = {
+        color,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        letterSpacing,
+        textTransform,
+        textAlign,
+        textDecorationLine,
+        textDecorationColor,
+        textDecorationStyle,
+    };
+    if (textAlign === "left") {
+        buttonStyles.justifyContent = "flex-start";
+    }
+    if (textAlign === "right") {
+        buttonStyles.justifyContent = "flex-end";
+    }
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
+            return [
+                styles.base,
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                },
+                buttonStyles,
+            ];
+        }, ...props },
+        loading ? (React.createElement(ActivityIndicator, { size: "small", color: color, style: styles.loading })) : null,
+        icon && !loading ? (React.createElement(Icon, { name: icon, color: color, style: styles.icon, size: CONSTANTS.icon })) : null,
+        React.createElement(Text, { style: titleStyles }, title)));
+}
+const Solid = ({ style, theme, ...props }) => {
+    return (React.createElement(Base, { style: [
+            {
+                color: "#FFF",
+                borderRadius: theme.roundness,
+                backgroundColor: theme.colors.primary,
+            },
+            style,
+        ], ...props }));
+};
+const ButtonSolid = withTheme(Solid);
+export { ButtonSolid };
+const Outline = ({ style, theme, ...props }) => {
+    return (React.createElement(Base, { style: [
+            styles.outline,
+            {
+                borderRadius: theme.roundness,
+                borderColor: theme.colors.primary,
+                color: theme.colors.primary,
+            },
+            style,
+        ], ...props }));
+};
+const ButtonOutline = withTheme(Outline);
+export { ButtonOutline };
+const styles = StyleSheet.create({
+    base: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: CONSTANTS.baseHeight,
+        paddingHorizontal: 12,
+        fontFamily: "System",
+        fontWeight: "700",
+        ...Platform.select({
+            web: {
+                cursor: "pointer",
+                userSelect: "none",
+            },
+        }),
+    },
+    outline: {
+        backgroundColor: "transparent",
+        borderWidth: 1,
+    },
+    bare: {
+        backgroundColor: "transparent",
+        padding: 0,
+        minHeight: undefined,
+    },
+    loading: {
+        marginRight: 6,
+    },
+    icon: {
+        ...Platform.select({
+            web: {
+                marginTop: 1,
+                marginRight: 4,
+                alignSelf: "center",
+            },
+            default: {
+                marginBottom: 2,
+                marginRight: 4,
+                alignSelf: "center",
+            },
+        }),
+    },
+});

package/src/components/Card.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { StyleSheet, View, Pressable, } from "react-native";
+import Image from "./Image";
+import Surface from "./Surface";
+import { Title, Subtitle, Caption } from "./Typography";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_SIZE = Config.cardIconSize;
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const ICON_ELEVATION = Config.cardIconElevation;
+export const TopRightCircleIcon = withTheme(({ Icon, icon, theme, onPress, }) => {
+    return (React.createElement(Surface, { style: {
+            justifyContent: "center",
+            alignItems: "center",
+            elevation: ICON_ELEVATION,
+            position: "absolute",
+            top: 12,
+            right: 12,
+            width: ICON_CONTAINER_SIZE,
+            height: ICON_CONTAINER_SIZE,
+            padding: ICON_CONTAINER_PADDING,
+            borderRadius: ICON_CONTAINER_SIZE,
+            backgroundColor: "rgba(0, 0, 0, 0.1)",
+        } },
+        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
+                return [
+                    {
+                        opacity: pressed ? 0.8 : 1,
+                    },
+                ];
+            } },
+            React.createElement(Icon, { name: icon, size: ICON_SIZE, color: theme.colors.surface }))));
+});
+const Card = ({ Icon, image = Config.cardImageUrl, title, subtitle, description, textCentered, icon, aspectRatio = 1.5, elevation = 2, style, onPress, onPressIcon, titleStyle, subtitleStyle, descriptionStyle, theme, children, }) => {
+    const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(style || {});
+    const backgroundColor = bgColor ? bgColor : theme.colors.surface;
+    const innerPadding = padding ? padding : 12;
+    return (React.createElement(Surface, { style: [{ elevation, backgroundColor }, styles] },
+        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
+                return [
+                    {
+                        opacity: pressed ? 0.8 : 1,
+                    },
+                ];
+            } },
+            React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
+            React.createElement(View, { style: { padding: innerPadding } },
+                React.createElement(View, { style: { alignItems: textCentered ? "center" : "flex-start" } },
+                    title || (title && title !== "") ? (React.createElement(Title, { text: title, style: titleStyle })) : null,
+                    subtitle || (subtitle && subtitle !== "") ? (React.createElement(Subtitle, { text: subtitle, style: subtitleStyle })) : null,
+                    description || (description && description !== "") ? (React.createElement(View, { style: { marginTop: 4 } },
+                        React.createElement(Caption, { text: description, style: descriptionStyle }))) : null,
+                    children)),
+            icon ? (React.createElement(TopRightCircleIcon, { Icon: Icon, icon: icon, onPress: onPressIcon })) : null)));
+};
+export default withTheme(Card);

package/src/components/CardBlock.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { View, Text, } from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const CardBlock = ({ image = Config.cardImageUrl, title, leftDescription, rightDescription, titleCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
+    let titleJustification;
+    let titleStyle;
+    if (titleCentered && !leftDescription && !rightDescription) {
+        titleJustification = "center";
+    }
+    else {
+        titleJustification = "space-between";
+    }
+    if (numColumns === 1) {
+        titleStyle = typography.button;
+    }
+    else if (numColumns === 2) {
+        titleStyle = typography.headline6;
+    }
+    else {
+        titleStyle = typography.headline5;
+    }
+    const rightDescriptionStyles = [
+        typography.subtitle2,
+        { color: colors.light },
+    ];
+    return (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
+        React.createElement(View, { style: { backgroundColor: colors.background } },
+            React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
+                React.createElement(Image, { style: {
+                        borderRadius: roundness,
+                        aspectRatio,
+                    }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" })),
+            title ? (React.createElement(View, { style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: titleJustification,
+                    marginTop: numColumns === 3 ? 16 : 12,
+                } },
+                React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title),
+                !leftDescription && rightDescription ? (React.createElement(Text, { style: rightDescriptionStyles }, rightDescription)) : null)) : null,
+            leftDescription ? (React.createElement(View, { style: {
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginTop: numColumns === 3 ? 4 : 4 / 2,
+                } },
+                React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
+                rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: rightDescriptionStyles }, rightDescription)) : null)) : null)));
+};
+export default withTheme(CardBlock);