@servesall/atoms 1.1.24 → 1.1.25

package/README.md

@@ -1,2 +1,14 @@
-# Molecules
-Molecules for react-native
+# Atoms
+
+in react-native run :
+
+npm i @servesall/atoms
+npx react-native-asset
+
+on web run
+
+npm i @servesall/atoms
+for next js you need to copy the fonts to /public/assets
+
+npm i react-native-web
+npm i react-native-web-lottie

package/dist/bundle.cjs.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactNative = require('react-native');
 var styled = require('styled-components/native');
 var PropTypes = require('prop-types');
-var reactNative = require('react-native');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
+var NavigationBar = require('expo-navigation-bar');
 var Animated = require('react-native-reanimated');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var LottieView = require('lottie-react-native');
@@ -14,9 +16,28 @@ var BottomSheet = require('@gorhom/bottom-sheet');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var NavigationBar__namespace = /*#__PURE__*/_interopNamespace(NavigationBar);
 var Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
 var BottomSheet__default = /*#__PURE__*/_interopDefaultLegacy(BottomSheet);
@@ -203,124 +224,161 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var colors = {
-  // Whites & Grays
-  color1: "#FFFFFF",
-  // Pure white
-  color7: "#dfe6e9",
-  // Light gray
-  color8: "#F8F9FB",
-  // Very light gray
-  color10: "#F2F3F7",
-  // Another light gray
-  color16: "#636e72",
-  // Dark gray
-  greyText: "#b2bec3",
-  // Gray for text
-  greyButton: "#94A3A9",
-  // Gray for buttons
-  color2: "#2d3436",
-  // Almost black
-  // Blues
-  color3: "#74b9ff",
-  // Light blue
-  color3light: "#E1F0FF",
-  // Very light blue
-  color4: "#0984e3",
-  // Medium blue
-  blue: "#74b9ff",
-  // Light blue (duplicate)
-  blueLight: "#E1F0FF",
-  // Very light blue (duplicate)
-  darkBlue: "#0984e3",
-  // Medium blue (duplicate)
-  darkBlueLight: "#CFEAFF",
-  // Pale blue
-  color15: "#00cec9",
-  // Cyan
-  color18: "#81ecec",
-  // Light cyan
-  // Yellows
-  color5: "#ffeaa7",
-  // Light yellow
-  color5light: "#FFF9E5",
-  // Very light yellow
-  color5border: "#E4E0D2",
-  // Yellow border
-  darkYellow: "#fdcb6e",
-  // Dark yellow
-  darkYellowLight: "#FFF7E8",
-  // Light yellow
-  darkYellowDark: "#8C6F39",
-  // Brown yellow
-  darkYellowGray: "#ECE5D8",
-  // Grayish yellow
-  // Oranges & Browns
-  color9: "#FFA15F",
-  // Orange
-  color9light: "#F9F0EA",
-  // Light orange
-  color9dark: "#804F2D",
-  // Dark brown
-  color9border: "#DDD1C9",
-  // Orange border
-  color13: "#fab1a0",
-  // Peach
-  orange: "#FFA15F",
-  // Orange (duplicate)
-  orangeLight: "#FFFAF6",
-  // Light orange
-  orangeDark: "#3D1901",
-  // Very dark brown
-  orangeGray: "#EEE5DE",
-  // Grayish orange
-  // Reds
-  color6: "#ff7675",
-  // Red
-  color6light: "#FFDCDB",
-  // Light red
-  red: "#ff7675",
-  // Red (duplicate)
-  redlight: "#fff0ed",
-  // Very light red
-  redDark: "#9C4140",
-  // Dark red
-  redBorder: "#D2BBBB",
-  // Red border
-  // Greens
-  color11: "#00b894",
-  // Green
-  color11light: "#EEFFFC",
-  // Light green
-  color11border: "#D2E3E0",
-  // Green border
-  color14: "#00b894",
-  // Green (duplicate)
-  green: "#55efc4",
-  // Light green
-  greenLight: "#F3FFFC",
-  // Very light green
-  greenDark: "#236A56",
-  // Dark green
-  // Purples
-  color12: "#6c5ce7",
-  // Purple
-  color12light: "#F5F4FF",
-  // Light purple
-  color12border: "#DFDDEA",
-  // Purple border
-  color12dark: "#584E74",
-  // Dark purple
-  color17: "#6c5ce7",
-  // Purple (duplicate)
-  purple: "#6c5ce7",
-  // Purple (duplicate)
-  purpleLight: "#F9F8FF",
-  // Light purple
-  purpleDark: "#372E78" // Dark purple
-
+var colorMap = {
+  white: "#FFFFFF",
+  hotPink: "#E576A2",
+  lightPink: "#FA9EBC",
+  salmonPink: "#FFD1E0",
+  skyBlue: "#3187F6",
+  lightBlue: "#CFEAFF",
+  greyBlue: "#212E66",
+  blue: "#0B1957",
+  darkBlue: "#060630"
 };
 
+var colors = _objectSpread2(_objectSpread2({
+  backwardCompatibility: {
+    // Whites & Grays
+    color1: "#FFFFFF",
+    // Pure white
+    color7: "#dfe6e9",
+    // Light gray
+    color8: "#F8F9FB",
+    // Very light gray
+    color10: "#F2F3F7",
+    // Another light gray
+    color16: "#636e72",
+    // Dark gray
+    greyText: "#b2bec3",
+    // Gray for text
+    greyButton: "#94A3A9",
+    // Gray for buttons
+    color2: "#2d3436",
+    // Almost black
+    // Blues
+    color3: "#74b9ff",
+    // Light blue
+    color3light: "#E1F0FF",
+    // Very light blue
+    color4: "#0984e3",
+    // Medium blue
+    blue: "#74b9ff",
+    // Light blue (duplicate)
+    blueLight: "#E1F0FF",
+    // Very light blue (duplicate)
+    darkBlue: "#0984e3",
+    // Medium blue (duplicate)
+    darkBlueLight: "#CFEAFF",
+    // Pale blue
+    color15: "#00cec9",
+    // Cyan
+    color18: "#81ecec",
+    // Light cyan
+    // Yellows
+    color5: "#ffeaa7",
+    // Light yellow
+    color5light: "#FFF9E5",
+    // Very light yellow
+    color5border: "#E4E0D2",
+    // Yellow border
+    darkYellow: "#fdcb6e",
+    // Dark yellow
+    darkYellowLight: "#FFF7E8",
+    // Light yellow
+    darkYellowDark: "#8C6F39",
+    // Brown yellow
+    darkYellowGray: "#ECE5D8",
+    // Grayish yellow
+    // Oranges & Browns
+    color9: "#FFA15F",
+    // Orange
+    color9light: "#F9F0EA",
+    // Light orange
+    color9dark: "#804F2D",
+    // Dark brown
+    color9border: "#DDD1C9",
+    // Orange border
+    color13: "#fab1a0",
+    // Peach
+    orange: "#FFA15F",
+    // Orange (duplicate)
+    orangeLight: "#FFFAF6",
+    // Light orange
+    orangeDark: "#3D1901",
+    // Very dark brown
+    orangeGray: "#EEE5DE",
+    // Grayish orange
+    // Reds
+    color6: "#ff7675",
+    // Red
+    color6light: "#FFDCDB",
+    // Light red
+    red: "#ff7675",
+    // Red (duplicate)
+    redlight: "#fff0ed",
+    // Very light red
+    redDark: "#9C4140",
+    // Dark red
+    redBorder: "#D2BBBB",
+    // Red border
+    // Greens
+    color11: "#00b894",
+    // Green
+    color11light: "#EEFFFC",
+    // Light green
+    color11border: "#D2E3E0",
+    // Green border
+    color14: "#00b894",
+    // Green (duplicate)
+    green: "#55efc4",
+    // Light green
+    greenLight: "#F3FFFC",
+    // Very light green
+    greenDark: "#236A56",
+    // Dark green
+    // Purples
+    color12: "#6c5ce7",
+    // Purple
+    color12light: "#F5F4FF",
+    // Light purple
+    color12border: "#DFDDEA",
+    // Purple border
+    color12dark: "#584E74",
+    // Dark purple
+    color17: "#6c5ce7",
+    // Purple (duplicate)
+    purple: "#6c5ce7",
+    // Purple (duplicate)
+    purpleLight: "#F9F8FF",
+    // Light purple
+    purpleDark: "#372E78" // Dark purple
+
+  }
+}, colorMap), {}, {
+  // Light Mode
+  lightMode: {
+    background: colorMap.salmonPink,
+    primaryButton: colorMap.darkBlue,
+    primaryButtonText: colorMap.salmonPink,
+    secondaryButton: colorMap.skyBlue,
+    secondaryButtonText: colorMap.salmonPink,
+    primaryText: colorMap.blue,
+    secondaryText: colorMap.greyBlue,
+    border: colorMap.greyBlue
+  },
+  // Dark Mode
+  darkMode: {
+    background: colorMap.darkBlue,
+    primaryButton: colorMap.hotPink,
+    primaryButtonText: colorMap.darkBlue,
+    secondaryButton: colorMap.skyBlue,
+    secondaryButtonText: colorMap.salmonPink,
+    primaryText: colorMap.salmonPink,
+    secondaryText: colorMap.lightPink,
+    border: colorMap.lightPink
+  }
+});
+
 var fonts = {
   xssmall: "14px",
   xsmall: "16px",
@@ -333,8 +391,10 @@ var fonts = {
   lhLarge: "39px",
   xlarge: "66px",
   lhXlarge: "69px",
-  fontFamily1: "Cochin",
-  fontFamily2: "Cochin"
+  fontFamily1: "Eesti",
+  fontFamily2: "Eesti",
+  fontWeight1: "400",
+  fontWeight2: "700"
 };
 
 var layout = {
@@ -342,12 +402,18 @@ var layout = {
   padding: "10px",
   borderRadius: "8px",
   borderRadiusMedium: "16px",
-  borderRadiusSmall: "8px"
+  borderRadiusSmall: "8px",
+  webPageMarginBig: "100px",
+  webPageMarginMedium: "50px",
+  webPageMarginSmall: "16px"
 };
 
-var theme = _objectSpread2(_objectSpread2(_objectSpread2({}, colors), fonts), layout);
+var theme = function theme(colorScheme) {
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, fonts), layout), colors.backwardCompatibility), colorScheme === "dark" ? colors.darkMode : colors.lightMode);
+};
 
 var ThemeWrapperContext = /*#__PURE__*/React__default["default"].createContext();
+var colorScheme = reactNative.Appearance.getColorScheme();
 
 var ThemeWrapper = function ThemeWrapper(_ref) {
   var children = _ref.children,
@@ -356,7 +422,9 @@ var ThemeWrapper = function ThemeWrapper(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(ThemeWrapperContext.Provider, {
     value: _objectSpread2({}, theme$1)
   }, /*#__PURE__*/React__default["default"].createElement(styled.ThemeProvider, {
-    theme: _objectSpread2(_objectSpread2({}, theme), theme$1)
+    theme: _objectSpread2(_objectSpread2(_objectSpread2({}, theme(colorScheme)), theme$1), {}, {
+      colorScheme: colorScheme
+    })
   }, children));
 };
 
@@ -372,7 +440,7 @@ var H1 = styled__default["default"].Text(_templateObject$n || (_templateObject$n
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.lhLarge;
 }, function (props) {
@@ -385,7 +453,7 @@ var H2 = styled__default["default"].Text(_templateObject2$e || (_templateObject2
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.lhMedium;
 }, function (props) {
@@ -398,7 +466,7 @@ var H3 = styled__default["default"].Text(_templateObject3$7 || (_templateObject3
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.lhSmall;
 }, function (props) {
@@ -411,7 +479,7 @@ var H4 = styled__default["default"].Text(_templateObject4$1 || (_templateObject4
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.small;
 }, function (props) {
@@ -424,7 +492,7 @@ var H5 = styled__default["default"].Text(_templateObject5$1 || (_templateObject5
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.xssmall;
 }, function (props) {
@@ -437,7 +505,7 @@ var Span = styled__default["default"].Text(_templateObject6$1 || (_templateObjec
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.lhSmall;
 }, function (props) {
@@ -450,7 +518,7 @@ var P = styled__default["default"].Text(_templateObject7$1 || (_templateObject7$
 }, function (props) {
   return props.align;
 }, function (props) {
-  return props.color || props.theme.color2;
+  return props.color || props.secondary ? props.theme.secondaryText : props.theme.primaryText;
 }, function (props) {
   return props.theme.lhSmall;
 }, function (props) {
@@ -618,7 +686,7 @@ SpanText.propTypes = {
   style: PropTypes__default["default"].object
 };
 
-var _templateObject$m, _templateObject2$d, _templateObject3$6, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var _templateObject$m, _templateObject2$d, _templateObject3$6, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
 var DEFAULT_FLEX_DIRECTION = reactNative.Platform.OS === "web" ? "column" : "column";
 var CenterElement = styled__default["default"].View(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flexdirection: ", ";\n  ", ";\n"])), function (props) {
   return props.direction || DEFAULT_FLEX_DIRECTION;
@@ -755,17 +823,17 @@ var BoxElement = styled__default["default"].View(_templateObject20 || (_template
   return props.style;
 });
 var BorderBottomElement = styled__default["default"].View(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-bottom-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.color7;
+  return props.theme.border;
 }, function (props) {
   return props.style;
 });
 var BorderTopElement = styled__default["default"].View(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  border-top-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.color7;
+  return props.theme.border;
 }, function (props) {
   return props.style;
 });
 var BorderBoxElement = styled__default["default"].View(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.color7;
+  return props.theme.border;
 }, function (props) {
   return props.theme.borderRadiusSmall;
 }, function (props) {
@@ -788,6 +856,11 @@ var ImageWrapperElement = styled__default["default"].View(_templateObject26 || (
 }, function (props) {
   return props.styles;
 });
+var RoundedBoxElement = styled__default["default"].View(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.borderRadiusSmall;
+}, function (props) {
+  return props.styles;
+});
 
 var Center = function Center(_ref) {
   var children = _ref.children,
@@ -1084,6 +1157,47 @@ var ImageWrapper = function ImageWrapper(_ref) {
   }, children);
 };
 
+var Background = function Background(_ref) {
+  var children = _ref.children,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style;
+  var theme = useThemeContext();
+  var background = theme.background,
+      colorScheme = theme.colorScheme;
+  var isDarkMode = colorScheme === "dark";
+  var statusBarStyle = isDarkMode ? "light-content" : "dark-content";
+  NavigationBar__namespace.setBackgroundColorAsync(background);
+  NavigationBar__namespace.setButtonStyleAsync(isDarkMode ? "light" : "dark");
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    style: {
+      flex: 1,
+      backgroundColor: background
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.StatusBar, {
+    translucent: true,
+    backgroundColor: background,
+    barStyle: statusBarStyle
+  }), /*#__PURE__*/React__default["default"].createElement(reactNativeSafeAreaContext.SafeAreaView, {
+    style: _objectSpread2({
+      flex: 1,
+      backgroundColor: background
+    }, style)
+  }, children), /*#__PURE__*/React__default["default"].createElement(reactNativeSafeAreaContext.SafeAreaView, {
+    style: _objectSpread2({
+      flex: 0,
+      backgroundColor: background
+    }, style)
+  }));
+};
+
+var RoundedBox = function RoundedBox(_ref) {
+  var children = _ref.children,
+      styles = _ref.styles;
+  return /*#__PURE__*/React__default["default"].createElement(RoundedBoxElement, {
+    styles: _objectSpread2({}, styles)
+  }, children);
+};
+
 var _templateObject$l, _templateObject2$c, _templateObject3$5;
 var InputWrapper$2 = styled__default["default"].Pressable(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  min-height: 80px;\n"])));
 var InputElement$2 = styled__default["default"].TextInput(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  margin-top: 26px;\n  min-height: 50px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
@@ -2136,7 +2250,7 @@ var RoundBtn$1 = function RoundBtn(_ref) {
     },
     behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
     keyboardVerticalOffset: -20
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+  }, /*#__PURE__*/React__default["default"].createElement(reactNativeSafeAreaContext.SafeAreaView, {
     style: {
       flexGrow: 1,
       zIndex: 21
@@ -51482,11 +51596,11 @@ var Header = function Header(_ref) {
       style = _ref.style,
       height = _ref.height;
   return /*#__PURE__*/React__default["default"].createElement(HeaderWrapper, {
-    height: height + (reactNative.Platform.OS === 'ios' ? reactNativeStatusBarHeight.getStatusBarHeight() : 0),
+    height: height + (reactNative.Platform.OS === "ios" ? reactNativeStatusBarHeight.getStatusBarHeight() : 0),
     style: style
   }, /*#__PURE__*/React__default["default"].createElement(StatusBarComponent, {
     options: StatusBarOptions
-  }), /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+  }), /*#__PURE__*/React__default["default"].createElement(reactNativeSafeAreaContext.SafeAreaView, {
     style: {
       flex: 1
     }
@@ -51583,7 +51697,7 @@ var BottomNavBar = function BottomNavBar(props) {
   var children = props.children,
       style = props.style;
   if (isFocused) return null;
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, null, /*#__PURE__*/React__default["default"].createElement(NavContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(reactNativeSafeAreaContext.SafeAreaView, null, /*#__PURE__*/React__default["default"].createElement(NavContainer, {
     style: style
   }, /*#__PURE__*/React__default["default"].createElement(BottomNavController, props, children)));
 };
@@ -54249,6 +54363,7 @@ function NewCustomer(_ref2) {
 exports.AnimatedButton = AnimatedButton$1;
 exports.AnimatedPlaceholder = AnimatedPlaceholder;
 exports.AnimatedRoundedButton = AnimatedRoundedButton;
+exports.Background = Background;
 exports.BorderBottom = BorderBottom;
 exports.BorderBox = BorderBox;
 exports.BorderTop = BorderTop;
@@ -54293,6 +54408,7 @@ exports.PaddingRight = PaddingRight;
 exports.PaddingTop = PaddingTop;
 exports.PaddingVertical = PaddingVertical;
 exports.RoundBtn = RoundBtn$3;
+exports.RoundedBox = RoundedBox;
 exports.RoundedBtn = RoundedBtn$1;
 exports.RoundedTopBox = RoundedTopBox;
 exports.Row = Row;